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

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

@@ -1,408 +0,0 @@
-import {CropIcon} from '@bettercms-ai/icons'
-import {
-  THEME_COLOR_BUTTON_MODES,
-  THEME_COLOR_STATE_TONES,
-  THEME_COLOR_STATES,
-  ThemeColorCard_v2,
-  ThemeColorCardToneKey,
-  ThemeColorScheme_v2,
-  ThemeColorSchemeKey,
-  ThemeColorState_v2,
-} from '@bettercms-ai/kit/theme'
-import {useBoolean, useSelect} from '@bettercms-ai/kit-workshop'
-import {CSSProperties} from 'react'
-
-import {Badge, Box, Flex, KBD, Stack, Text} from '../../../primitives'
-import {useRootTheme} from '../../useRootTheme'
-
-interface Features {
-  base: boolean
-  button: boolean
-  schemes: ThemeColorSchemeKey[]
-  selectable: boolean
-  tones: ThemeColorCardToneKey[]
-}
-
-const SCHEME_OPTIONS: {[key: string]: ThemeColorSchemeKey | 'all'} = {
-  All: 'all',
-  Dark: 'dark',
-  Light: 'light',
-}
-
-const TONE_OPTIONS: {[key: string]: ThemeColorCardToneKey | 'all'} = {
-  All: 'all',
-  Transparent: 'transparent',
-  Default: 'default',
-  Primary: 'primary',
-  Positive: 'positive',
-  Caution: 'caution',
-  Critical: 'critical',
-}
-
-export default function DebugStory() {
-  const {color} = useRootTheme().theme.v2!
-
-  const scheme = useSelect('Color scheme', SCHEME_OPTIONS, 'all', 'Props') || 'all'
-  const tone = useSelect('Tone', TONE_OPTIONS, 'default', 'Props') || 'all'
-
-  const base = useBoolean('Base', true, 'Props') || false
-  const button = useBoolean('Button', false, 'Props') || false
-  const selectable = useBoolean('Selectable', false, 'Props') || false
-
-  const features: Features = {
-    base,
-    button,
-    schemes: scheme == 'all' ? ['light', 'dark'] : [scheme],
-    selectable,
-    tones: tone == 'all' ? ['transparent', 'default'] : [tone],
-  }
-
-  return (
-    <Flex>
-      {features.schemes.map((scheme) => (
-        <DebugScheme features={features} key={scheme} scheme={color[scheme]} />
-      ))}
-    </Flex>
-  )
-}
-
-function DebugScheme(props: {features: Features; scheme: ThemeColorScheme_v2}) {
-  const {features, scheme} = props
-
-  return (
-    <Box flex={1} style={{backgroundColor: scheme.default.bg}}>
-      {features.tones.map((tone) => (
-        <DebugCard card={scheme[tone]} features={features} key={tone} />
-      ))}
-    </Box>
-  )
-}
-
-function DebugCard(props: {card: ThemeColorCard_v2; features: Features}) {
-  const {card, features} = props
-
-  return (
-    <Box style={getStateVars(card)}>
-      {features.base && <DebugState />}
-
-      {features.button && (
-        <Stack padding={2} space={1}>
-          {THEME_COLOR_BUTTON_MODES.map((mode) => (
-            <Stack key={mode} space={1}>
-              {THEME_COLOR_STATE_TONES.map((stateTone) => (
-                <Flex key={stateTone} gap={1}>
-                  {/* {mode} */}
-                  {THEME_COLOR_STATES.map((state) => (
-                    <Box
-                      flex={1}
-                      key={state}
-                      style={getStateVars(card.button[mode][stateTone][state])}
-                    >
-                      <DebugState />
-                    </Box>
-                  ))}
-                </Flex>
-              ))}
-            </Stack>
-          ))}
-        </Stack>
-      )}
-
-      {features.selectable && (
-        <Stack padding={2} space={1}>
-          {THEME_COLOR_STATE_TONES.map((stateTone) => (
-            <Flex key={stateTone} gap={1}>
-              {/* {mode} */}
-              {THEME_COLOR_STATES.map((state) => (
-                <Box flex={1} key={state} style={getStateVars(card.selectable[stateTone][state])}>
-                  <DebugState />
-                </Box>
-              ))}
-            </Flex>
-          ))}
-        </Stack>
-      )}
-    </Box>
-  )
-}
-
-function DebugState() {
-  return (
-    <Stack
-      overflow="auto"
-      padding={4}
-      space={3}
-      style={{border: '1px solid var(--card-border-color)'}}
-    >
-      <Flex gap={3}>
-        <Text size={1}>Text</Text>
-        <Text size={1}>
-          <CropIcon />
-        </Text>
-      </Flex>
-      <Box padding={1} style={{backgroundColor: 'var(--card-muted-bg-color)'}}>
-        <Text muted size={1}>
-          Muted
-        </Text>
-      </Box>
-      <Text accent size={1}>
-        Accent
-      </Text>
-      <Text size={1}>
-        {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
-        <a href="#" style={{color: 'var(--card-link-fg-color)'}}>
-          Link
-        </a>
-      </Text>
-      <Text size={1}>
-        <code>Code</code>
-      </Text>
-      <div>
-        <KBD>Cmd</KBD>
-      </div>
-      <Flex gap={1}>
-        {THEME_COLOR_STATE_TONES.map((stateTone) => (
-          <Box flex="none" key={stateTone}>
-            <Badge tone={stateTone}>{stateTone}</Badge>
-          </Box>
-        ))}
-      </Flex>
-      <div style={{borderBottom: '1px solid var(--card-border-color)'}} />
-      <Flex>
-        <Box
-          flex={1}
-          paddingBottom={3}
-          style={{backgroundColor: 'var(--card-skeleton-from-color)'}}
-        />
-        <Box
-          flex={1}
-          paddingBottom={3}
-          style={{backgroundColor: 'var(--card-skeleton-to-color)'}}
-        />
-      </Flex>
-      <Flex style={{gap: 1}}>
-        <Box
-          flex={1}
-          overflow="hidden"
-          padding={1}
-          style={
-            {
-              '--card-fg-color': 'var(--card-avatar-gray-fg-color)',
-              'backgroundColor': 'var(--card-avatar-gray-bg-color)',
-            } as any
-          }
-        >
-          <Text size={1} weight="bold">
-            A
-          </Text>
-        </Box>
-        <Box
-          flex={1}
-          overflow="hidden"
-          padding={1}
-          style={
-            {
-              '--card-fg-color': 'var(--card-avatar-red-fg-color)',
-              'backgroundColor': 'var(--card-avatar-red-bg-color)',
-            } as any
-          }
-        >
-          <Text size={1} weight="bold">
-            A
-          </Text>
-        </Box>
-        <Box
-          flex={1}
-          overflow="hidden"
-          padding={1}
-          style={
-            {
-              '--card-fg-color': 'var(--card-avatar-orange-fg-color)',
-              'backgroundColor': 'var(--card-avatar-orange-bg-color)',
-            } as any
-          }
-        >
-          <Text size={1} weight="bold">
-            A
-          </Text>
-        </Box>
-        <Box
-          flex={1}
-          overflow="hidden"
-          padding={1}
-          style={
-            {
-              '--card-fg-color': 'var(--card-avatar-yellow-fg-color)',
-              'backgroundColor': 'var(--card-avatar-yellow-bg-color)',
-            } as any
-          }
-        >
-          <Text size={1} weight="bold">
-            A
-          </Text>
-        </Box>
-        <Box
-          flex={1}
-          overflow="hidden"
-          padding={1}
-          style={
-            {
-              '--card-fg-color': 'var(--card-avatar-green-fg-color)',
-              'backgroundColor': 'var(--card-avatar-green-bg-color)',
-            } as any
-          }
-        >
-          <Text size={1} weight="bold">
-            A
-          </Text>
-        </Box>
-        <Box
-          flex={1}
-          overflow="hidden"
-          padding={1}
-          style={
-            {
-              '--card-fg-color': 'var(--card-avatar-cyan-fg-color)',
-              'backgroundColor': 'var(--card-avatar-cyan-bg-color)',
-            } as any
-          }
-        >
-          <Text size={1} weight="bold">
-            A
-          </Text>
-        </Box>
-        <Box
-          flex={1}
-          overflow="hidden"
-          padding={1}
-          style={
-            {
-              '--card-fg-color': 'var(--card-avatar-blue-fg-color)',
-              'backgroundColor': 'var(--card-avatar-blue-bg-color)',
-            } as any
-          }
-        >
-          <Text size={1} weight="bold">
-            A
-          </Text>
-        </Box>
-        <Box
-          flex={1}
-          overflow="hidden"
-          padding={1}
-          style={
-            {
-              '--card-fg-color': 'var(--card-avatar-purple-fg-color)',
-              'backgroundColor': 'var(--card-avatar-purple-bg-color)',
-            } as any
-          }
-        >
-          <Text size={1} weight="bold">
-            A
-          </Text>
-        </Box>
-        <Box
-          flex={1}
-          overflow="hidden"
-          padding={1}
-          style={
-            {
-              '--card-fg-color': 'var(--card-avatar-magenta-fg-color)',
-              'backgroundColor': 'var(--card-avatar-magenta-bg-color)',
-            } as any
-          }
-        >
-          <Text size={1} weight="bold">
-            A
-          </Text>
-        </Box>
-      </Flex>
-    </Stack>
-  )
-}
-
-function getStateVars(state: ThemeColorState_v2) {
-  return {
-    '--card-accent-fg-color': state.accent.fg,
-
-    '--card-avatar-gray-bg-color': state.avatar.gray.bg,
-    '--card-avatar-gray-fg-color': state.avatar.gray.fg,
-    '--card-avatar-red-bg-color': state.avatar.red.bg,
-    '--card-avatar-red-fg-color': state.avatar.red.fg,
-    '--card-avatar-orange-bg-color': state.avatar.orange.bg,
-    '--card-avatar-orange-fg-color': state.avatar.orange.fg,
-    '--card-avatar-yellow-bg-color': state.avatar.yellow.bg,
-    '--card-avatar-yellow-fg-color': state.avatar.yellow.fg,
-    '--card-avatar-green-bg-color': state.avatar.green.bg,
-    '--card-avatar-green-fg-color': state.avatar.green.fg,
-    '--card-avatar-cyan-bg-color': state.avatar.cyan.bg,
-    '--card-avatar-cyan-fg-color': state.avatar.cyan.fg,
-    '--card-avatar-blue-bg-color': state.avatar.blue.bg,
-    '--card-avatar-blue-fg-color': state.avatar.blue.fg,
-    '--card-avatar-purple-bg-color': state.avatar.purple.bg,
-    '--card-avatar-purple-fg-color': state.avatar.purple.fg,
-    '--card-avatar-magenta-bg-color': state.avatar.magenta.bg,
-    '--card-avatar-magenta-fg-color': state.avatar.magenta.fg,
-
-    '--card-badge-default-bg-color': state.badge.default.bg,
-    '--card-badge-default-dot-color': state.badge.default.dot,
-    '--card-badge-default-fg-color': state.badge.default.fg,
-    '--card-badge-default-icon-color': state.badge.default.icon,
-
-    '--card-badge-neutral-bg-color': state.badge.neutral.bg,
-    '--card-badge-neutral-dot-color': state.badge.neutral.dot,
-    '--card-badge-neutral-fg-color': state.badge.neutral.fg,
-    '--card-badge-neutral-icon-color': state.badge.neutral.icon,
-
-    '--card-badge-primary-bg-color': state.badge.primary.bg,
-    '--card-badge-primary-dot-color': state.badge.primary.dot,
-    '--card-badge-primary-fg-color': state.badge.primary.fg,
-    '--card-badge-primary-icon-color': state.badge.primary.icon,
-
-    '--card-badge-suggest-bg-color': state.badge.suggest.bg,
-    '--card-badge-suggest-dot-color': state.badge.suggest.dot,
-    '--card-badge-suggest-fg-color': state.badge.suggest.fg,
-    '--card-badge-suggest-icon-color': state.badge.suggest.icon,
-
-    '--card-badge-positive-bg-color': state.badge.positive.bg,
-    '--card-badge-positive-dot-color': state.badge.positive.dot,
-    '--card-badge-positive-fg-color': state.badge.positive.fg,
-    '--card-badge-positive-icon-color': state.badge.positive.icon,
-
-    '--card-badge-caution-bg-color': state.badge.caution.bg,
-    '--card-badge-caution-dot-color': state.badge.caution.dot,
-    '--card-badge-caution-fg-color': state.badge.caution.fg,
-    '--card-badge-caution-icon-color': state.badge.caution.icon,
-
-    '--card-badge-critical-bg-color': state.badge.critical.bg,
-    '--card-badge-critical-dot-color': state.badge.critical.dot,
-    '--card-badge-critical-fg-color': state.badge.critical.fg,
-    '--card-badge-critical-icon-color': state.badge.critical.icon,
-
-    '--card-bg-color': state.bg,
-
-    '--card-border-color': state.border,
-
-    '--card-code-bg-color': state.code.bg,
-    '--card-code-fg-color': state.code.fg,
-
-    '--card-fg-color': state.fg,
-
-    '--card-icon-color': state.icon,
-
-    '--card-kbd-bg-color': state.kbd.bg,
-    '--card-kbd-border-color': state.kbd.border,
-    '--card-kbd-fg-color': state.kbd.fg,
-
-    '--card-link-fg-color': state.link.fg,
-
-    '--card-muted-bg-color': state.muted.bg,
-    '--card-muted-fg-color': state.muted.fg,
-
-    '--card-skeleton-from-color': state.skeleton.from,
-    '--card-skeleton-to-color': state.skeleton.to,
-
-    'backgroundColor': 'var(--card-bg-color)',
-    'color': 'var(--card-fg-color)',
-  } as CSSProperties
-}

package/src/core/theme/__workshop__/index.ts

@@ -1,39 +0,0 @@
-import {defineScope} from '@bettercms-ai/kit-workshop'
-import {lazy} from 'react'
-
-export default defineScope({
-  name: 'theme',
-  title: 'Theme',
-  stories: [
-    {
-      name: 'debug',
-      title: 'Debug',
-      component: lazy(() => import('./debug/story')),
-    },
-    {
-      name: 'build',
-      title: 'Build theme',
-      component: lazy(() => import('./build/story')),
-    },
-    {
-      name: 'canvas',
-      title: 'Canvas',
-      component: lazy(() => import('./canvas')),
-    },
-    {
-      name: 'nested-provider',
-      title: 'Nested provider',
-      component: lazy(() => import('./nestedProvider')),
-    },
-    {
-      name: 'layer',
-      title: 'Layer',
-      component: lazy(() => import('./layer')),
-    },
-    {
-      name: 'color',
-      title: 'Color',
-      component: lazy(() => import('./color')),
-    },
-  ],
-})

package/src/core/theme/__workshop__/layer.tsx

@@ -1,78 +0,0 @@
-import {Box, Button, Container, Dialog, Flex, Popover, Stack, Text, Tooltip} from '@bettercms-ai/kit'
-import {useCallback, useState} from 'react'
-
-export default function LayerStory() {
-  const [dialogOpen, setDialogOpen] = useState(false)
-  const openDialog = useCallback(() => setDialogOpen(true), [])
-  const closeDialog = useCallback(() => setDialogOpen(false), [])
-
-  return (
-    <Flex padding={[4, 5, 6]}>
-      <Container>
-        {dialogOpen && (
-          <Dialog header="Dialog" id="dialog" onClickOutside={closeDialog} onClose={closeDialog}>
-            <Box padding={4}>
-              <Stack space={[4, 5, 6]}>
-                <Popover
-                  content={
-                    <Box padding={2}>
-                      <Text>Popover content</Text>
-                    </Box>
-                  }
-                  open
-                  portal
-                >
-                  <Text>Popover</Text>
-                </Popover>
-
-                <Flex>
-                  <Tooltip
-                    content={
-                      <Box padding={2}>
-                        <Text>Tooltip content</Text>
-                      </Box>
-                    }
-                    placement="top"
-                    portal
-                  >
-                    <Text size={1}>Tooltip</Text>
-                  </Tooltip>
-                </Flex>
-              </Stack>
-            </Box>
-          </Dialog>
-        )}
-
-        <Stack space={[4, 5, 6]}>
-          <Popover
-            content={
-              <Box padding={2}>
-                <Text>Popover content</Text>
-              </Box>
-            }
-            open
-            portal
-          >
-            <Text>Popover</Text>
-          </Popover>
-
-          <Flex>
-            <Tooltip
-              content={
-                <Box padding={2}>
-                  <Text size={1}>Tooltip content</Text>
-                </Box>
-              }
-              placement="top"
-              portal
-            >
-              <Text>Tooltip</Text>
-            </Tooltip>
-          </Flex>
-
-          <Button onClick={openDialog} text="Open dialog" />
-        </Stack>
-      </Container>
-    </Flex>
-  )
-}

package/src/core/theme/__workshop__/nestedProvider.tsx

@@ -1,15 +0,0 @@
-import {Card, Flex, Text, ThemeProvider} from '@bettercms-ai/kit'
-
-export default function NestedProviderStory() {
-  return (
-    <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
-      <ThemeProvider>
-        <Card padding={[3, 4, 5]} radius={3} tone="primary">
-          <Text>
-            This card is wrapped in a nested <code>ThemeProvider</code>
-          </Text>
-        </Card>
-      </ThemeProvider>
-    </Flex>
-  )
-}

package/src/core/theme/index.ts

@@ -1,5 +0,0 @@
-export * from './themeColorProvider'
-export * from './themeProvider'
-export * from './types'
-export * from './useRootTheme'
-export * from './useTheme'

package/src/core/theme/theme.test.tsx

@@ -1,73 +0,0 @@
-/** @jest-environment jsdom */
-
-import {buildTheme} from '@bettercms-ai/kit/theme'
-
-import {render} from '../../../test'
-import {ThemeContext} from './themeContext'
-import {ThemeContextValue} from './types'
-import {useRootTheme} from './useRootTheme'
-
-describe('theme', () => {
-  describe('useRootTheme', () => {
-    it('should get context value', async () => {
-      const log = jest.fn()
-
-      function Debug() {
-        const rootTheme = useRootTheme()
-
-        log(rootTheme)
-
-        return <>debug</>
-      }
-
-      function Root() {
-        const value: ThemeContextValue = {
-          version: 0.0,
-          scheme: 'light',
-          theme: buildTheme(),
-          tone: 'default',
-        }
-
-        return (
-          <ThemeContext.Provider value={value}>
-            <Debug />
-          </ThemeContext.Provider>
-        )
-      }
-
-      render(<Root />)
-
-      expect(log.mock.calls[0][0].version).toBe(0.0)
-      expect(log.mock.calls[0][0].scheme).toBe('light')
-      expect(log.mock.calls[0][0].tone).toBe('default')
-    })
-
-    it('should fail when no context value is provided', async () => {
-      const log = jest.fn()
-
-      function Debug() {
-        try {
-          useRootTheme()
-        } catch (err) {
-          log(err)
-        }
-
-        return null
-      }
-
-      function Root() {
-        const value = undefined
-
-        return (
-          <ThemeContext.Provider value={value as any}>
-            <Debug />
-          </ThemeContext.Provider>
-        )
-      }
-
-      render(<Root />)
-
-      expect(log.mock.calls[0][0].message).toEqual('useRootTheme(): missing context value')
-    })
-  })
-})

package/src/core/theme/themeColorProvider.tsx

@@ -1,29 +0,0 @@
-import {ThemeColorCardToneKey, ThemeColorSchemeKey} from '@bettercms-ai/kit/theme'
-
-import {ThemeProvider} from './themeProvider'
-import {useRootTheme} from './useRootTheme'
-
-/**
- * @public
- */
-export interface ThemeColorProviderProps {
-  children?: React.ReactNode
-  scheme?: ThemeColorSchemeKey
-  tone?: ThemeColorCardToneKey
-}
-
-/**
- * @public
- */
-export function ThemeColorProvider(props: ThemeColorProviderProps): React.JSX.Element {
-  const {children, scheme, tone} = props
-  const root = useRootTheme()
-
-  return (
-    <ThemeProvider scheme={scheme || root.scheme} theme={root.theme} tone={tone}>
-      {children}
-    </ThemeProvider>
-  )
-}
-
-ThemeColorProvider.displayName = 'ThemeColorProvider'

package/src/core/theme/themeContext.ts

@@ -1,10 +0,0 @@
-import {createGlobalScopedContext} from '../lib/createGlobalScopedContext'
-import {ThemeContextValue} from './types'
-
-/**
- * @internal
- */
-export const ThemeContext = createGlobalScopedContext<ThemeContextValue | null>(
-  '@bettercms-ai/kit/context/theme',
-  null,
-)