@sanity/ui 3.3.0 → 3.3.2

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

@@ -1,408 +0,0 @@
-import {CropIcon} from '@sanity/icons'
-import {
-  THEME_COLOR_BUTTON_MODES,
-  THEME_COLOR_STATE_TONES,
-  THEME_COLOR_STATES,
-  ThemeColorCard_v2,
-  ThemeColorCardToneKey,
-  ThemeColorScheme_v2,
-  ThemeColorSchemeKey,
-  ThemeColorState_v2,
-} from '@sanity/ui/theme'
-import {useBoolean, useSelect} from '@sanity/ui-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 '@sanity/ui-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 '@sanity/ui'
-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 '@sanity/ui'
-
-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/utils/boundaryElement/__workshop__/index.ts

@@ -1,14 +0,0 @@
-import {defineScope} from '@sanity/ui-workshop'
-import {lazy} from 'react'
-
-export default defineScope({
-  name: 'utils/boundaryElement',
-  title: 'BoundaryElement',
-  stories: [
-    {
-      name: 'plain',
-      title: 'Plain',
-      component: lazy(() => import('./plain')),
-    },
-  ],
-})

package/src/core/utils/boundaryElement/__workshop__/plain.tsx

@@ -1,19 +0,0 @@
-import {BoundaryElementProvider, Button, Card, Text, Tooltip} from '@sanity/ui'
-import {useState} from 'react'
-
-export default function PlainStory() {
-  const [boundaryElement, setBoundaryElement] = useState<HTMLDivElement | null>(null)
-
-  return (
-    <Card padding={7} ref={setBoundaryElement}>
-      <BoundaryElementProvider element={boundaryElement}>
-        <Tooltip
-          content={<Text size={1}>Test aldsakm alkdmal dmalskdm alkdmlakds</Text>}
-          placement="top"
-        >
-          <Button text={<>Hover me</>} />
-        </Tooltip>
-      </BoundaryElementProvider>
-    </Card>
-  )
-}

package/src/core/utils/elementQuery/__workshop__/customMedia.tsx

@@ -1,30 +0,0 @@
-import {Box, Card, ElementQuery, Text} from '@sanity/ui'
-import {styled} from 'styled-components'
-
-const TestCard = styled(Card)`
-  --card-fg-color: orange;
-
-  [data-eq-min~='0'] > & {
-    --card-fg-color: green;
-  }
-
-  [data-eq-min~='1'] > & {
-    --card-fg-color: blue;
-  }
-`
-
-export default function CustomMediaQuery() {
-  return (
-    <Box padding={[3, 4, 5]}>
-      <Box marginBottom={[3, 4, 5]}>
-        <Text>Resize this frame to see the text color change:</Text>
-      </Box>
-
-      <ElementQuery media={[100, 200, 300]}>
-        <TestCard padding={2} shadow={1}>
-          <Text>This card sits inside an element query.</Text>
-        </TestCard>
-      </ElementQuery>
-    </Box>
-  )
-}

package/src/core/utils/elementQuery/__workshop__/index.ts

@@ -1,14 +0,0 @@
-import {defineScope} from '@sanity/ui-workshop'
-import {lazy} from 'react'
-
-export default defineScope({
-  name: 'utils/elementQuery',
-  title: 'ElementQuery',
-  stories: [
-    {
-      name: 'custom-media',
-      title: 'Custom media',
-      component: lazy(() => import('./customMedia')),
-    },
-  ],
-})

package/src/core/utils/layer/__workshop__/_debug.tsx

@@ -1,17 +0,0 @@
-import {Code, useLayer} from '@sanity/ui'
-
-export function LayerDebugInfo(props: {id?: string}) {
-  const {id} = props
-  const layer = useLayer()
-
-  return (
-    <Code id={id} size={1}>
-      {[
-        //
-        `isTopLayer=${layer.isTopLayer}`,
-        `size=${layer.size}`,
-        `zIndex=${layer.zIndex}`,
-      ].join('\n')}
-    </Code>
-  )
-}

package/src/core/utils/layer/__workshop__/index.ts

@@ -1,24 +0,0 @@
-import {defineScope} from '@sanity/ui-workshop'
-import {lazy} from 'react'
-
-export default defineScope({
-  name: 'utils/layer',
-  title: 'Layer',
-  stories: [
-    {
-      name: 'nested',
-      title: 'Nested',
-      component: lazy(() => import('./nested')),
-    },
-    {
-      name: 'multiple-roots',
-      title: 'Multiple roots',
-      component: lazy(() => import('./multipleRoots')),
-    },
-    {
-      name: 'responsive-z-offset',
-      title: 'Responsive z-offset',
-      component: lazy(() => import('./responsiveZOffset')),
-    },
-  ],
-})