@bettercms-ai/kit 0.1.0

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

@@ -0,0 +1,408 @@
+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

@@ -0,0 +1,39 @@
+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

@@ -0,0 +1,78 @@
+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

@@ -0,0 +1,15 @@
+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

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

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

@@ -0,0 +1,73 @@
+/** @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

@@ -0,0 +1,29 @@
+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

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