@bettercms-ai/kit 0.1.1 → 2.0.0-next.0

package/src/core/theme/__workshop__/build/story.tsx

@@ -1,465 +0,0 @@
-import {
-  buildTheme,
-  THEME_COLOR_BUTTON_MODES,
-  THEME_COLOR_CARD_TONES,
-  THEME_COLOR_INPUT_MODES,
-  THEME_COLOR_STATE_TONES,
-  ThemeColorButtonTone_v2,
-  ThemeColorCard_v2,
-  ThemeColorCardToneKey,
-  ThemeColorInputMode_v2,
-  ThemeColorInputModeKey,
-  ThemeColorState_v2,
-} from '@bettercms-ai/kit/theme'
-
-import {rem} from '../../../styles'
-import {useTheme_v2} from '../../useTheme'
-import {getCSSProps} from './helpers'
-import {Root} from './Root'
-
-const theme = buildTheme()
-
-export default function BuildStory(): React.JSX.Element {
-  return (
-    <Root>
-      <div
-        style={{
-          display: 'flex',
-          ...getCSSProps({
-            radius: theme.radius.map((r) => rem(r)),
-            shadows: theme.shadows.map((s) =>
-              s
-                ? {
-                    umbra: s.umbra.join(' '),
-                    penumbra: s.penumbra.join(' '),
-                    ambient: s.ambient.join(' '),
-                  }
-                : {},
-            ),
-            space: theme.space.map((s) => rem(s)),
-          }),
-        }}
-      >
-        <div style={{flex: 1}}>
-          {THEME_COLOR_CARD_TONES.map((baseTone) => (
-            <BaseTonePreview
-              baseTone={baseTone}
-              key={baseTone}
-              scheme="light"
-              theme={theme.v2!.color.light[baseTone]}
-            />
-          ))}
-        </div>
-        <div style={{flex: 1}}>
-          {THEME_COLOR_CARD_TONES.map((baseTone) => (
-            <BaseTonePreview
-              baseTone={baseTone}
-              key={baseTone}
-              scheme="dark"
-              theme={theme.v2!.color.dark[baseTone]}
-            />
-          ))}
-        </div>
-      </div>
-    </Root>
-  )
-}
-
-function BaseTonePreview(props: {
-  baseTone: ThemeColorCardToneKey
-  scheme: 'light' | 'dark'
-  theme: ThemeColorCard_v2
-}) {
-  const {baseTone, scheme, theme: color} = props
-  const theme = useTheme_v2()
-
-  return (
-    <div className="base" style={getCSSProps(color as unknown as Record<string, unknown>)}>
-      <div
-        style={{
-          maxWidth: 600,
-          margin: 'auto',
-          padding: 'var(--space-4)',
-        }}
-      >
-        <pre style={{padding: 12}}>
-          color/{scheme}/{baseTone}
-        </pre>
-        <div style={{padding: 12}}>
-          <div
-            style={{
-              boxShadow: [
-                `0 0 0 ${theme.card.shadow.outline}px var(--shadow-outline)`,
-                `0 6px 8px -4px var(--shadow-umbra)`,
-                `0 12px 17px 2px var(--shadow-penumbra)`,
-                `0 5px 22px 4px var(--shadow-ambient)`,
-              ].join(', '),
-              padding: 'var(--space-3)',
-              borderRadius: 'var(--radius-2)',
-            }}
-          >
-            Shadow
-          </div>
-        </div>
-        <div style={{padding: 'var(--space-3)'}}>
-          <StatePreview theme={color.selectable.default.enabled} />
-        </div>
-        <div
-          style={{
-            padding: 'var(--space-3)',
-            display: 'flex',
-            flexDirection: 'column',
-            gap: 'var(--space-4)',
-          }}
-        >
-          {THEME_COLOR_INPUT_MODES.map((mode) => (
-            <InputPreview key={mode} mode={mode} theme={color.input[mode]} />
-          ))}
-        </div>
-        <div
-          style={{
-            marginTop: 'var(--space-4)',
-            padding: '1px 12px 12px 12px',
-            display: 'flex',
-            flexDirection: 'column',
-            gap: 'var(--space-4)',
-          }}
-        >
-          {THEME_COLOR_BUTTON_MODES.map((mode) => (
-            <div
-              key={mode}
-              style={{display: 'flex', flexDirection: 'column', gap: 'var(--space-1)'}}
-            >
-              {THEME_COLOR_STATE_TONES.map((tone) => {
-                return <ButtonPreview key={tone} theme={color.button[mode][tone]} />
-              })}
-            </div>
-          ))}
-        </div>
-      </div>
-    </div>
-  )
-}
-
-function StatePreview(props: {theme: ThemeColorState_v2}) {
-  const {theme: card} = props
-
-  return (
-    <div
-      style={
-        {
-          ...getCSSProps({card}),
-
-          display: 'flex',
-          flexDirection: 'column',
-          marginTop: -1,
-        } as any
-      }
-    >
-      <div
-        style={{
-          display: 'flex',
-          gap: 4,
-        }}
-      >
-        <div
-          className="card"
-          style={{
-            flex: 1,
-            padding: 'var(--space-2)',
-            display: 'flex',
-            gap: 'var(--space-1)',
-          }}
-          // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-          tabIndex={0}
-        >
-          <div style={{flex: 'none'}}>Card</div>
-          <div className="icon" style={{flex: 'none'}}>
-            &copy;
-          </div>
-          <div className="muted-fg" style={{flex: 'none'}}>
-            m
-          </div>
-          <div className="accent-fg" style={{flex: 'none'}}>
-            a
-          </div>
-          <div className="link-fg" style={{flex: 'none'}}>
-            l
-          </div>
-          <div className="code" style={{flex: 'none'}}>
-            c
-          </div>
-          <div style={{flex: 'none'}}>
-            <CheckeredBackground />
-          </div>
-          <div style={{flex: 'none'}}>
-            <Skeleton />
-          </div>
-        </div>
-        <div
-          className="card selected"
-          style={{
-            flex: 1,
-            padding: 'var(--space-2)',
-            display: 'flex',
-            gap: 4,
-          }}
-        >
-          <div style={{flex: 'none'}}>Card</div>
-          <div className="icon" style={{flex: 'none'}}>
-            &copy;
-          </div>
-          <div className="muted-fg" style={{flex: 'none'}}>
-            m
-          </div>
-          <div className="accent-fg" style={{flex: 'none'}}>
-            a
-          </div>
-          <div className="link-fg" style={{flex: 'none'}}>
-            l
-          </div>
-          <div className="code" style={{flex: 'none'}}>
-            c
-          </div>
-          <div style={{flex: 'none'}}>
-            <CheckeredBackground />
-          </div>
-          <div style={{flex: 'none'}}>
-            <Skeleton />
-          </div>
-        </div>
-        <div
-          className="card disabled"
-          style={{
-            flex: 1,
-            padding: 'var(--space-2)',
-            display: 'flex',
-            gap: 4,
-          }}
-        >
-          <div style={{flex: 'none'}}>Card</div>
-          <div className="icon" style={{flex: 'none'}}>
-            &copy;
-          </div>
-          <div className="muted-fg" style={{flex: 'none'}}>
-            m
-          </div>
-          <div className="accent-fg" style={{flex: 'none'}}>
-            a
-          </div>
-          <div className="link-fg" style={{flex: 'none'}}>
-            l
-          </div>
-          <div className="code" style={{flex: 'none'}}>
-            c
-          </div>
-          <div style={{flex: 'none'}}>
-            <CheckeredBackground />
-          </div>
-          <div style={{flex: 'none'}}>
-            <Skeleton />
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-function ButtonPreview(props: {theme: ThemeColorButtonTone_v2}) {
-  const {theme: button} = props
-
-  return (
-    <div
-      style={{
-        ...getCSSProps({button}),
-
-        display: 'flex',
-        gap: 4,
-      }}
-    >
-      <div
-        className="button"
-        style={{flex: 1, padding: 'var(--space-2)', display: 'flex', gap: 4}}
-        // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-        tabIndex={0}
-      >
-        <div style={{flex: 'none'}}>Button</div>
-        <div className="icon" style={{flex: 'none'}}>
-          &copy;
-        </div>
-        <div className="muted" style={{flex: 'none'}}>
-          m
-        </div>
-        <div className="accent" style={{flex: 'none'}}>
-          a
-        </div>
-        <div className="link" style={{flex: 'none'}}>
-          l
-        </div>
-        <div className="code" style={{flex: 'none'}}>
-          c
-        </div>
-        <div className="kbd" style={{flex: 'none'}}>
-          k
-        </div>
-        <div className="badge badge--default" style={{flex: 'none'}}>
-          b
-        </div>
-        <div style={{flex: 'none'}}>
-          <CheckeredBackground />
-        </div>
-        <div style={{flex: 'none'}}>
-          <Skeleton />
-        </div>
-      </div>
-      <div
-        className="button selected"
-        style={{flex: 1, padding: 'var(--space-2)', display: 'flex', gap: 4}}
-      >
-        <div style={{flex: 'none'}}>Button</div>
-        <div className="icon" style={{flex: 'none'}}>
-          &copy;
-        </div>
-        <div className="muted-fg" style={{flex: 'none'}}>
-          m
-        </div>
-        <div className="accent-fg" style={{flex: 'none'}}>
-          a
-        </div>
-        <div className="link-fg" style={{flex: 'none'}}>
-          l
-        </div>
-        <div className="code" style={{flex: 'none'}}>
-          c
-        </div>
-        <div style={{flex: 'none'}}>
-          <CheckeredBackground />
-        </div>
-        <div style={{flex: 'none'}}>
-          <Skeleton />
-        </div>
-      </div>
-      <div
-        className="button disabled"
-        style={{flex: 1, padding: 'var(--space-2)', display: 'flex', gap: 4}}
-      >
-        <div style={{flex: 'none'}}>Button</div>
-        <div className="icon" style={{flex: 'none'}}>
-          &copy;
-        </div>
-        <div className="muted-fg" style={{flex: 'none'}}>
-          m
-        </div>
-        <div className="accent-fg" style={{flex: 'none'}}>
-          a
-        </div>
-        <div className="link-fg" style={{flex: 'none'}}>
-          l
-        </div>
-        <div className="code" style={{flex: 'none'}}>
-          c
-        </div>
-        <div style={{flex: 'none'}}>
-          <CheckeredBackground />
-        </div>
-        <div style={{flex: 'none'}}>
-          <Skeleton />
-        </div>
-      </div>
-    </div>
-  )
-}
-
-function CheckeredBackground() {
-  return (
-    <div className="border" style={{display: 'flex', flexDirection: 'column'}}>
-      <div style={{display: 'flex'}}>
-        <div
-          style={{
-            width: 8,
-            height: 8,
-          }}
-        />
-        <div
-          className="bg2"
-          style={{
-            width: 8,
-            height: 8,
-          }}
-        />
-      </div>
-      <div style={{display: 'flex'}}>
-        <div
-          className="bg2"
-          style={{
-            width: 8,
-            height: 8,
-          }}
-        />
-        <div
-          style={{
-            width: 8,
-            height: 8,
-          }}
-        />
-      </div>
-    </div>
-  )
-}
-
-function Skeleton() {
-  return (
-    <div className="border" style={{display: 'flex'}}>
-      <div
-        className="skeleton-from"
-        style={{
-          width: 8,
-          height: 16,
-        }}
-      />
-      <div
-        className="skeleton-to"
-        style={{
-          width: 8,
-          height: 16,
-        }}
-      />
-    </div>
-  )
-}
-
-function InputPreview(props: {mode: ThemeColorInputModeKey; theme: ThemeColorInputMode_v2}) {
-  const {mode, theme: input} = props
-
-  return (
-    <div
-      style={
-        {
-          ...getCSSProps({input}),
-
-          display: 'flex',
-          flexDirection: 'column',
-          gap: 8,
-        } as any
-      }
-    >
-      <div
-        className="input"
-        // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-        tabIndex={0}
-      >
-        <span>Text ({mode})</span> <span className="placeholder">Placeholder</span>
-      </div>
-      <div
-        className="input readOnly"
-        // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-        tabIndex={0}
-      >
-        <span>Text ({mode})</span>
-      </div>
-      <div className="input disabled">
-        <span>Text ({mode})</span>
-      </div>
-    </div>
-  )
-}