Integrate basic fields and buttons

.gitignore

@@ -5,11 +5,13 @@
 node_modules
 *.log
 *.local.js
+*.tsbuildinfo
 .env
 .env-*
 .DS_Store
 .idea/
 .rollup-plugin-visualizer.html
+.gitignore
 
 # Ignore lock files to allow any package manager
 bun.lock
@@ -26,3 +28,7 @@ yarn.lock
 *.swp
 
 *storybook.log
+
+.harness/
+.harness.yml
+.claude

.storybook/decorators/context.tsx

@@ -1,15 +1,92 @@
-import React from 'react'
+import { useEffect, useState } from 'react'
+import type { Decorator } from '@storybook/react-vite'
 
-export const withContext = (Story, { args, globals }) => {
-  // Access the global context value
-  const globalContext = globals.context || 'default';
+type Mode = 'light' | 'dark' | 'auto'
 
-  // Generate a dynamic class name based on context
-  const contextClass = `tf-context-${globalContext}`;
+type ContextFrameProps = {
+  Story: any
+  contextClass: string
+  modeClass: string
+  themeAttr?: 'dark'
+  colorScheme?: 'light' | 'dark'
+}
 
+const ContextFrame = ({
+  Story,
+  contextClass,
+  modeClass,
+  themeAttr,
+  colorScheme
+}: ContextFrameProps) => {
   return (
-    <div className={contextClass}>
-      <Story {...args} />
+    <div className={`${contextClass} ${modeClass}`} style={colorScheme ? { colorScheme } : undefined}>
+      <div className="tui-interface" data-theme={themeAttr}>
+        <Story />
+      </div>
     </div>
-  );
-};
+  )
+}
+
+export const withContext: Decorator = (Story, { globals, viewMode, id }) => {
+  const contextClass = `tf-context-${globals.context || 'default'}`
+  const colorMode = (globals.colorMode || 'light') as Mode
+  const [systemMode, setSystemMode] = useState<'light' | 'dark'>(() => {
+    if (typeof window === 'undefined' || !window.matchMedia) return 'light'
+    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+  })
+
+  useEffect(() => {
+    if (colorMode !== 'auto' || typeof window === 'undefined' || !window.matchMedia) return
+
+    const media = window.matchMedia('(prefers-color-scheme: dark)')
+    const onChange = (event: MediaQueryListEvent) => {
+      setSystemMode(event.matches ? 'dark' : 'light')
+    }
+    const legacyOnChange = (event: MediaQueryListEvent) => onChange(event)
+
+    setSystemMode(media.matches ? 'dark' : 'light')
+    if ('addEventListener' in media) {
+      media.addEventListener('change', onChange)
+    } else {
+      ;(media as MediaQueryList & {
+        addListener: (listener: (event: MediaQueryListEvent) => void) => void
+      }).addListener(legacyOnChange)
+    }
+
+    return () => {
+      if ('removeEventListener' in media) {
+        media.removeEventListener('change', onChange)
+      } else {
+        ;(media as MediaQueryList & {
+          removeListener: (listener: (event: MediaQueryListEvent) => void) => void
+        }).removeListener(legacyOnChange)
+      }
+    }
+  }, [colorMode])
+
+  const resolvedMode = colorMode === 'auto' ? systemMode : colorMode
+  const modeClass =
+    colorMode === 'auto'
+      ? `tf-color-mode-auto tf-color-mode-${resolvedMode}`
+      : `tf-color-mode-${resolvedMode}`
+  const themeAttr = resolvedMode === 'dark' ? 'dark' : undefined
+  const colorScheme = resolvedMode
+  const isDocsView = viewMode === 'docs'
+  const isDocsPage = typeof id === 'string' && id.endsWith('--docs')
+
+  // Keep docs page chrome (controls/table) unwrapped to avoid style leakage,
+  // but still wrap docs story blocks so components render with TUI styles.
+  if (isDocsView && isDocsPage) {
+    return <Story />
+  }
+
+  return (
+    <ContextFrame
+      Story={Story}
+      contextClass={contextClass}
+      modeClass={modeClass}
+      themeAttr={themeAttr}
+      colorScheme={colorScheme}
+    />
+  )
+}

.storybook/decorators/globalCss.tsx

@@ -0,0 +1,149 @@
+import { useEffect, useMemo, useState } from 'react'
+import type { Decorator } from '@storybook/react-vite'
+
+type GlobalCssMode =
+  | 'auto'
+  | 'none'
+  | 'basic'
+  | 'wordpress'
+  | 'elementor'
+  | 'beaver-builder'
+
+type Direction = 'ltr' | 'rtl'
+type ColorMode = 'light' | 'dark' | 'auto'
+
+const WORDPRESS_STYLES = [
+  'https://wordpress.org/gutenberg/wp-admin/css/common.min.css',
+  'https://wordpress.org/gutenberg/wp-admin/css/forms.min.css',
+  'https://wordpress.org/gutenberg/wp-includes/css/dashicons.min.css'
+]
+
+const resolveMode = (globals: Record<string, unknown>): Exclude<GlobalCssMode, 'auto'> => {
+  const selected = (globals.css as GlobalCssMode | undefined) ?? 'auto'
+  if (selected !== 'auto') return selected
+
+  const context = (globals.context as string | undefined) ?? 'default'
+  if (context === 'wp') return 'wordpress'
+  if (context === 'elementor') return 'elementor'
+  if (context === 'beaver-builder') return 'beaver-builder'
+
+  return 'basic'
+}
+
+const getElementorMedia = (mode: ColorMode) => {
+  if (mode === 'dark') return 'all'
+  if (mode === 'light') return 'none'
+  return '(prefers-color-scheme: dark)'
+}
+
+const getBodyClasses = (
+  mode: Exclude<GlobalCssMode, 'auto'>,
+  direction: Direction,
+  resolvedColorMode: 'light' | 'dark'
+) => {
+  const classes: string[] = []
+
+  if (mode === 'wordpress') classes.push('wp-admin', 'wp-core-ui')
+  if (mode === 'elementor') classes.push('elementor-editor-active')
+  if (mode === 'beaver-builder') {
+    classes.push('fl-builder', 'fl-builder-admin')
+    classes.push(resolvedColorMode === 'dark' ? 'fl-builder-ui-skin--dark' : 'fl-builder-ui-skin--light')
+  }
+  if (direction === 'rtl') classes.push('rtl')
+
+  return classes
+}
+
+export const withGlobalCss: Decorator = (Story, context) => {
+  const globals = context.globals as Record<string, unknown>
+  const isDocsView = context.viewMode === 'docs'
+  const mode = resolveMode(globals)
+  const direction = ((globals.direction as Direction | undefined) ?? 'ltr') as Direction
+  const colorMode = ((globals.colorMode as ColorMode | undefined) ?? 'light') as ColorMode
+  const [systemMode, setSystemMode] = useState<'light' | 'dark'>(() => {
+    if (typeof window === 'undefined' || !window.matchMedia) return 'light'
+    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+  })
+
+  useEffect(() => {
+    if (colorMode !== 'auto' || typeof window === 'undefined' || !window.matchMedia) return
+
+    const media = window.matchMedia('(prefers-color-scheme: dark)')
+    const onChange = (event: MediaQueryListEvent) => {
+      setSystemMode(event.matches ? 'dark' : 'light')
+    }
+    const legacyOnChange = (event: MediaQueryListEvent) => onChange(event)
+
+    setSystemMode(media.matches ? 'dark' : 'light')
+    if ('addEventListener' in media) {
+      media.addEventListener('change', onChange)
+    } else {
+      ;(media as MediaQueryList & {
+        addListener: (listener: (event: MediaQueryListEvent) => void) => void
+      }).addListener(legacyOnChange)
+    }
+
+    return () => {
+      if ('removeEventListener' in media) {
+        media.removeEventListener('change', onChange)
+      } else {
+        ;(media as MediaQueryList & {
+          removeListener: (listener: (event: MediaQueryListEvent) => void) => void
+        }).removeListener(legacyOnChange)
+      }
+    }
+  }, [colorMode])
+
+  const resolvedColorMode = colorMode === 'auto' ? systemMode : colorMode
+
+  const externalStyles = !isDocsView && mode === 'wordpress' ? WORDPRESS_STYLES : []
+  const wrapperClasses = useMemo(() => {
+    if (isDocsView) return []
+    if (mode === 'wordpress') return ['wp-admin', 'wp-core-ui']
+    if (mode === 'elementor') return ['elementor-editor-active']
+    if (mode === 'beaver-builder') {
+      return [resolvedColorMode === 'dark' ? 'fl-builder-ui-skin--dark' : 'fl-builder-ui-skin--light']
+    }
+    return []
+  }, [isDocsView, mode, resolvedColorMode])
+
+  useEffect(() => {
+    if (isDocsView) return
+
+    const { body } = document
+    const bodyClasses = getBodyClasses(mode, direction, resolvedColorMode)
+    body.classList.add('tui-interface', `tf-color-mode-${resolvedColorMode}`)
+    if (resolvedColorMode === 'dark') {
+      body.setAttribute('data-theme', 'dark')
+    } else {
+      body.removeAttribute('data-theme')
+    }
+    bodyClasses.forEach((className) => body.classList.add(className))
+
+    let elementorMarker: HTMLStyleElement | null = null
+    if (mode === 'elementor') {
+      elementorMarker = document.createElement('style')
+      elementorMarker.id = 'e-theme-ui-dark-css'
+      elementorMarker.media = getElementorMedia(colorMode)
+      body.appendChild(elementorMarker)
+    }
+
+    return () => {
+      body.classList.remove('tui-interface', 'tf-color-mode-light', 'tf-color-mode-dark')
+      bodyClasses.forEach((className) => body.classList.remove(className))
+      body.removeAttribute('data-theme')
+      if (elementorMarker && elementorMarker.parentElement) {
+        elementorMarker.parentElement.removeChild(elementorMarker)
+      }
+    }
+  }, [isDocsView, mode, direction, resolvedColorMode, colorMode])
+
+  return (
+    <div className={wrapperClasses.join(' ')}>
+      {externalStyles.map((stylesheet) => (
+        <link key={stylesheet} rel="stylesheet" href={stylesheet} />
+      ))}
+      <Story />
+    </div>
+  )
+}

.storybook/decorators/rtl.tsx

@@ -0,0 +1,23 @@
+import { useEffect } from 'react'
+import type { Decorator } from '@storybook/react-vite'
+
+type Direction = 'ltr' | 'rtl'
+
+export const withRtl: Decorator = (Story, context) => {
+  const direction = ((context.globals.direction as Direction | undefined) ?? 'ltr') as Direction
+
+  useEffect(() => {
+    const root = document.documentElement
+    root.setAttribute('dir', direction)
+    return () => {
+      root.setAttribute('dir', 'ltr')
+    }
+  }, [direction])
+
+  return (
+    <div dir={direction}>
+      <Story />
+    </div>
+  )
+}
+

.storybook/main.ts

@@ -1,22 +1,26 @@
+import type { StorybookConfig } from '@storybook/react-vite'
 
-
-/** @type { import('@storybook/react-vite').StorybookConfig } */
-const config = {
-  "stories": [
-    "../assets/src/components/**/*.mdx",
-    "../assets/src/components/**/*.stories.@(js|jsx|mjs|ts|tsx)"
+const config: StorybookConfig = {
+  stories: [
+    '../assets/src/components/**/*.mdx',
+    '../assets/src/components/**/*.stories.@(js|jsx|mjs|ts|tsx)'
   ],
-  "addons": [
-    "@storybook/addon-onboarding",
-    "@storybook/addon-docs"
+  addons: [
+    '@storybook/addon-onboarding',
+    '@storybook/addon-docs',
+    '@storybook/addon-a11y'
   ],
-  "framework": {
-    "name": "@storybook/react-vite",
-    "options": {}
+  framework: {
+    name: '@storybook/react-vite',
+    options: {}
+  },
+  typescript: {
+    reactDocgen: false
   },
   core: {
-    builder: '@storybook/builder-vite', // Replace Webpack with Vite
-    disableTelemetry: true,
+    builder: '@storybook/builder-vite',
+    disableTelemetry: true
   }
-};
-export default config;
+}
+
+export default config

.storybook/manager.ts

@@ -1,7 +1,6 @@
-import { addons } from 'storybook/manager-api';
-import { themes } from 'storybook/theming';
-import tangibleTheme from './tangibleTheme';
-
+import { addons } from 'storybook/manager-api'
+import tangibleTheme from './tangibleTheme'
+
 addons.setConfig({
-  theme: tangibleTheme,
-});
+  theme: tangibleTheme
+})

.storybook/preview.css

@@ -0,0 +1,35 @@
+:root {
+  font-family: "Open Sans", "Inter", "Helvetica Neue", Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  margin: 0;
+  min-width: 320px;
+}
+
+body.tui-interface {
+  min-height: 100vh;
+  background-color: var(--tui-color-bg);
+  color: var(--tui-color-fg);
+}
+
+body.tui-interface.tf-color-mode-dark {
+  color-scheme: dark;
+}
+
+body.tui-interface.tf-color-mode-light {
+  color-scheme: light;
+}
+
+/* Docs story preview: wrapper fills frame */
+.docs-story .tui-interface {
+  min-height: 100%;
+  padding: 1rem;
+  box-sizing: border-box;
+}