@sanity/ui 3.3.0 → 3.3.2

package/src/core/primitives/card/__workshop__/interactive.tsx

@@ -1,30 +0,0 @@
-import {Card, Flex, Stack, Text} from '@sanity/ui'
-import {useBoolean} from '@sanity/ui-workshop'
-
-export default function InteractiveCardStory() {
-  const pressed = useBoolean('Pressed', false, 'Props')
-  const selected = useBoolean('Selected', false, 'Props')
-
-  return (
-    <Flex align="center" height="fill" justify="center">
-      <div>
-        <Card
-          __unstable_focusRing
-          as="button"
-          padding={3}
-          pressed={pressed}
-          selected={selected}
-          tabIndex={0}
-        >
-          <Stack space={3}>
-            <Text>
-              Text <code>Code</code>
-            </Text>
-            <Text muted>Muted</Text>
-            <Text accent>Accent</Text>
-          </Stack>
-        </Card>
-      </div>
-    </Flex>
-  )
-}

package/src/core/primitives/card/__workshop__/listNavigation.tsx

@@ -1,80 +0,0 @@
-import {Box, Card, Flex, Skeleton, Text} from '@sanity/ui'
-
-import {Stack} from '../../stack'
-
-export default function ListNavigationStory() {
-  return (
-    <Box height="fill" padding={[3, 4, 5]} sizing="border">
-      <Card height="fill" shadow={1}>
-        <Flex height="fill">
-          <Card flex={1} padding={2}>
-            <List1 />
-          </Card>
-          <Card borderLeft flex={1} padding={2}>
-            <List2 />
-          </Card>
-        </Flex>
-      </Card>
-    </Box>
-  )
-}
-
-function List1() {
-  return (
-    <Stack space={1}>
-      <Card __unstable_focusRing as="a" href="#" padding={2} radius={2}>
-        <Preview />
-      </Card>
-      <Card __unstable_focusRing as="a" href="#" padding={2} pressed radius={2}>
-        <Preview />
-      </Card>
-      <Card __unstable_focusRing as="a" href="#" padding={2} radius={2}>
-        <Preview />
-      </Card>
-      <Card __unstable_focusRing as="a" href="#" padding={2} radius={2}>
-        <Preview />
-      </Card>
-      <Card __unstable_focusRing as="a" href="#" padding={2} radius={2}>
-        <Preview />
-      </Card>
-    </Stack>
-  )
-}
-
-function List2() {
-  return (
-    <Stack space={1}>
-      <Card __unstable_focusRing as="a" href="#" padding={2} radius={2}>
-        <Preview />
-      </Card>
-      <Card __unstable_focusRing as="a" href="#" padding={2} pressed radius={2} selected>
-        <Preview />
-      </Card>
-      <Card __unstable_focusRing as="a" href="#" padding={2} radius={2}>
-        <Preview />
-      </Card>
-      <Card __unstable_focusRing as="a" href="#" padding={2} radius={2}>
-        <Preview />
-      </Card>
-      <Card __unstable_focusRing as="a" href="#" padding={2} radius={2}>
-        <Preview />
-      </Card>
-    </Stack>
-  )
-}
-
-function Preview() {
-  return (
-    <Flex align="center" gap={2}>
-      <Skeleton radius="full" style={{width: 33, height: 33}} />
-      <Stack flex={1} space={2}>
-        <Text size={1} weight="medium">
-          Preview
-        </Text>
-        <Text muted size={1}>
-          Preview
-        </Text>
-      </Stack>
-    </Flex>
-  )
-}

package/src/core/primitives/card/__workshop__/props.tsx

@@ -1,53 +0,0 @@
-import {Card, Flex, Stack, Text} from '@sanity/ui'
-import {useAction, useBoolean, useSelect} from '@sanity/ui-workshop'
-
-import {
-  WORKSHOP_CARD_AS_OPTIONS,
-  WORKSHOP_CARD_TONE_OPTIONS,
-  WORKSHOP_RADIUS_OPTIONS,
-  WORKSHOP_SHADOW_OPTIONS,
-  WORKSHOP_SPACE_OPTIONS,
-} from '../../../__workshop__/constants'
-
-export default function PropsStory() {
-  const as = useSelect('As', WORKSHOP_CARD_AS_OPTIONS, 'div', 'Props')
-  const border = useBoolean('Border', false, 'Props')
-  const checkered = useBoolean('Checkered', false, 'Props')
-  const muted = useBoolean('Muted', false, 'Props')
-  const padding = useSelect('Padding', WORKSHOP_SPACE_OPTIONS, 3, 'Props')
-  const radius = useSelect('Radius', WORKSHOP_RADIUS_OPTIONS, 0, 'Props')
-  const selected = useBoolean('Selected', false, 'Props')
-  const shadow = useSelect('Shadow', WORKSHOP_SHADOW_OPTIONS, 0, 'Props')
-  const tone = useSelect('Tone', WORKSHOP_CARD_TONE_OPTIONS, 'default', 'Props')
-
-  return (
-    <Flex align="center" height="fill" justify="center" padding={4} sizing="border">
-      <Card
-        __unstable_checkered={checkered}
-        as={as}
-        border={border}
-        muted={muted}
-        onClick={useAction('onClick')}
-        padding={padding}
-        radius={radius}
-        selected={selected}
-        shadow={shadow}
-        tone={tone}
-      >
-        <Stack space={3}>
-          <Text size={1}>
-            Card with <code>padding={padding}</code>, <code>tone={tone}</code>, and{' '}
-            <code>shadow={shadow}</code>.
-          </Text>
-          <Text size={1}>
-            Text with {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
-            <a href="#">link</a>.
-          </Text>
-          <Text accent size={1}>
-            Text with accent color.
-          </Text>
-        </Stack>
-      </Card>
-    </Flex>
-  )
-}

package/src/core/primitives/card/__workshop__/selected.tsx

@@ -1,94 +0,0 @@
-import {EditIcon, PublishIcon} from '@sanity/icons'
-import {Box, Card, Container, Flex, Inline, Stack, Text, ThemeProps, useRootTheme} from '@sanity/ui'
-import {getTheme_v2, ThemeColorStateToneKey} from '@sanity/ui/theme'
-import {useBoolean} from '@sanity/ui-workshop'
-import {css, styled} from 'styled-components'
-
-const TextWithTone = styled(Text)<{$tone: ThemeColorStateToneKey}>((
-  props: {
-    $tone: ThemeColorStateToneKey
-  } & ThemeProps,
-) => {
-  const {$tone} = props
-  const {color} = getTheme_v2(props.theme)
-  const tone = color.button.default[$tone]
-
-  return css`
-    &:not([data-selected]) {
-      --card-fg-color: ${tone.enabled.bg};
-      --card-muted-fg-color: ${tone.enabled.bg};
-    }
-
-    [data-ui='Card']:disabled & {
-      --card-fg-color: inherit;
-      --card-muted-fg-color: inherit;
-    }
-  `
-})
-
-export default function SelectedStory() {
-  const disabled = useBoolean('Disabled', false) || false
-  const selected = useBoolean('Selected', false) || false
-
-  return (
-    <Flex align="center" height="fill" justify="center" padding={4} sizing="border">
-      <Container width={0}>
-        <Stack space={1}>
-          <Card
-            __unstable_focusRing
-            as="button"
-            disabled={disabled}
-            padding={3}
-            radius={2}
-            selected={selected}
-          >
-            <Preview selected={selected} />
-          </Card>
-
-          <Card
-            __unstable_focusRing
-            as="button"
-            disabled={disabled}
-            padding={3}
-            radius={2}
-            selected={selected}
-            tone="critical"
-          >
-            <Preview selected={selected} />
-          </Card>
-        </Stack>
-      </Container>
-    </Flex>
-  )
-}
-
-function Preview({selected}: {selected: boolean}) {
-  const rootTheme = useRootTheme()
-
-  return (
-    <Flex>
-      <Box flex={1}>
-        <Text size={1}>Title</Text>
-      </Box>
-      <Inline space={3}>
-        <TextWithTone
-          data-selected={selected ? '' : undefined}
-          muted
-          size={1}
-          weight="medium"
-          $tone={rootTheme.tone === 'default' ? 'caution' : 'default'}
-        >
-          <EditIcon />
-        </TextWithTone>
-        <TextWithTone
-          data-selected={selected ? '' : undefined}
-          muted
-          size={1}
-          $tone={rootTheme.tone === 'default' ? 'positive' : 'default'}
-        >
-          <PublishIcon />
-        </TextWithTone>
-      </Inline>
-    </Flex>
-  )
-}

package/src/core/primitives/card/__workshop__/styled.tsx

@@ -1,14 +0,0 @@
-import {Card, Flex, Text} from '@sanity/ui'
-import {styled} from 'styled-components'
-
-const StyledCard = styled(Card).attrs({forwardedAs: 'ol'})``
-
-export default function StyledCardStory() {
-  return (
-    <Flex align="center" height="fill" justify="center">
-      <StyledCard>
-        <Text as="li">Styled</Text>
-      </StyledCard>
-    </Flex>
-  )
-}

package/src/core/primitives/checkbox/__workshop__/example.tsx

@@ -1,25 +0,0 @@
-import {Box, Checkbox, Flex, Text} from '@sanity/ui'
-import {useCallback, useState} from 'react'
-
-export default function ExampleStory() {
-  const [checked, setChecked] = useState<boolean | undefined>(undefined)
-  const [indeterminate] = useState(checked === undefined)
-  const handleChange = useCallback(() => setChecked((val) => !val), [])
-
-  return (
-    <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
-      <Flex align="center" as="label">
-        <Checkbox
-          checked={checked || false}
-          indeterminate={indeterminate}
-          onChange={handleChange}
-        />
-        <Box marginLeft={2}>
-          <Text size={1} weight="medium">
-            Toggle
-          </Text>
-        </Box>
-      </Flex>
-    </Flex>
-  )
-}

package/src/core/primitives/checkbox/__workshop__/index.ts

@@ -1,13 +0,0 @@
-import {defineScope} from '@sanity/ui-workshop'
-import {lazy} from 'react'
-
-export default defineScope({
-  name: 'primitives/checkbox',
-  title: 'Checkbox',
-  stories: [
-    {name: 'props', title: 'Props', component: lazy(() => import('./props'))},
-    {name: 'example', title: 'Example', component: lazy(() => import('./example'))},
-    {name: 'read-only', title: 'Read-only', component: lazy(() => import('./readOnly'))},
-    {name: 'multiple-tones', title: 'Multiple tones', component: lazy(() => import('./tones'))},
-  ],
-})

package/src/core/primitives/checkbox/__workshop__/props.tsx

@@ -1,33 +0,0 @@
-import {Box, Checkbox, Flex, Text} from '@sanity/ui'
-import {useAction, useBoolean} from '@sanity/ui-workshop'
-
-export default function PropsStory() {
-  const checked = useBoolean('Checked', false, 'Props')
-  const disabled = useBoolean('Disabled', false, 'Props')
-  const indeterminate = useBoolean('Indeterminate', false, 'Props')
-  const onChange = useAction('onChange')
-  const onFocus = useAction('onFocus')
-  const onBlur = useAction('onBlur')
-  const readOnly = useBoolean('Read only', false, 'Props')
-
-  return (
-    <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
-      <Flex align="center" as="label">
-        <Checkbox
-          checked={checked}
-          disabled={disabled}
-          indeterminate={indeterminate}
-          onChange={onChange}
-          onFocus={onFocus}
-          onBlur={onBlur}
-          readOnly={readOnly}
-        />
-        <Box marginLeft={2}>
-          <Text size={1} weight="medium">
-            Toggle
-          </Text>
-        </Box>
-      </Flex>
-    </Flex>
-  )
-}

package/src/core/primitives/checkbox/__workshop__/readOnly.tsx

@@ -1,16 +0,0 @@
-import {Box, Checkbox, Flex, Text} from '@sanity/ui'
-
-export default function ReadOnlyStory() {
-  return (
-    <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
-      <Flex align="center" as="label">
-        <Checkbox id="checkbox-example" readOnly />
-        <Box marginLeft={2}>
-          <Text size={1} weight="medium">
-            Toggle
-          </Text>
-        </Box>
-      </Flex>
-    </Flex>
-  )
-}

package/src/core/primitives/checkbox/__workshop__/tones.tsx

@@ -1,28 +0,0 @@
-import {Card, Checkbox, Flex, Stack} from '@sanity/ui'
-
-export default function MultipleTonesStory() {
-  return (
-    <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
-      <Stack>
-        <Card padding={3} tone="neutral">
-          <Checkbox />
-        </Card>
-        <Card padding={3} tone="primary">
-          <Checkbox />
-        </Card>
-        <Card padding={3} tone="suggest">
-          <Checkbox />
-        </Card>
-        <Card padding={3} tone="positive">
-          <Checkbox />
-        </Card>
-        <Card padding={3} tone="caution">
-          <Checkbox />
-        </Card>
-        <Card padding={3} tone="critical">
-          <Checkbox />
-        </Card>
-      </Stack>
-    </Flex>
-  )
-}

package/src/core/primitives/code/__workshop__/index.ts

@@ -1,19 +0,0 @@
-import {defineScope} from '@sanity/ui-workshop'
-import {lazy} from 'react'
-
-export default defineScope({
-  name: 'primitives/code',
-  title: 'Code',
-  stories: [
-    {
-      name: 'props',
-      title: 'Props',
-      component: lazy(() => import('./props')),
-    },
-    {
-      name: 'optical-alignment',
-      title: 'Optical alignment',
-      component: lazy(() => import('./opticalAlignment')),
-    },
-  ],
-})

package/src/core/primitives/code/__workshop__/opticalAlignment.tsx

@@ -1,48 +0,0 @@
-import {AddCircleIcon} from '@sanity/icons'
-import {Box, Card, Code, Flex, Stack} from '@sanity/ui'
-
-export default function OpticalAlignment() {
-  return (
-    <Box padding={[4, 5, 6]}>
-      <Stack space={1}>
-        <Flex>
-          <Card padding={0} scheme="dark">
-            <Code size={4}>Hamburgefonstiv M</Code>
-          </Card>
-        </Flex>
-
-        <Flex>
-          <Card padding={0} scheme="dark">
-            <Code size={3}>Hamburgefonstiv M</Code>
-          </Card>
-        </Flex>
-
-        <Flex>
-          <Card padding={0} scheme="dark">
-            <Code size={2}>Hamburgefonstiv M</Code>
-          </Card>
-        </Flex>
-
-        <Flex>
-          <Card padding={0} scheme="dark">
-            <Code size={1}>Hamburgefonstiv M</Code>
-          </Card>
-        </Flex>
-
-        <Flex>
-          <Card padding={0} scheme="dark">
-            <Code size={0}>Hamburgefonstiv M</Code>
-          </Card>
-        </Flex>
-
-        <Flex>
-          <Card padding={2} scheme="dark">
-            <Code>
-              <AddCircleIcon />
-            </Code>
-          </Card>
-        </Flex>
-      </Stack>
-    </Box>
-  )
-}

package/src/core/primitives/code/__workshop__/props.tsx

@@ -1,21 +0,0 @@
-import {Box, Code} from '@sanity/ui'
-import {useSelect, useText} from '@sanity/ui-workshop'
-
-import {
-  WORKSHOP_CODE_LANGUAGE_OPTIONS,
-  WORKSHOP_TEXT_FONT_SIZE_OPTIONS,
-} from '../../../__workshop__/constants'
-
-export default function PropsStory() {
-  const code = useText('Code', `console.log('Hello, world')`, 'Props')
-  const language = useSelect('Language', WORKSHOP_CODE_LANGUAGE_OPTIONS, 'typescript', 'Props')
-  const size = useSelect('Size', WORKSHOP_TEXT_FONT_SIZE_OPTIONS, 1, 'Props')
-
-  return (
-    <Box padding={[4, 5, 6]}>
-      <Code language={language} size={size}>
-        {code}
-      </Code>
-    </Box>
-  )
-}

package/src/core/primitives/container/__workshop__/example.tsx

@@ -1,20 +0,0 @@
-import {Card, Container, Flex, Text} from '@sanity/ui'
-import {useAction, useSelect} from '@sanity/ui-workshop'
-
-import {WORKSHOP_CONTAINER_WIDTH_OPTIONS} from '../../../__workshop__/constants'
-
-export default function PlainStory() {
-  const width = useSelect('Width', WORKSHOP_CONTAINER_WIDTH_OPTIONS, 0, 'Props')
-
-  return (
-    <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
-      <Container onClick={useAction('onClick')} width={width}>
-        <Card padding={4} shadow={1}>
-          <Text size={1}>
-            Container with <code>max-width={width}</code>
-          </Text>
-        </Card>
-      </Container>
-    </Flex>
-  )
-}

package/src/core/primitives/container/__workshop__/index.ts

@@ -1,8 +0,0 @@
-import {defineScope} from '@sanity/ui-workshop'
-import {lazy} from 'react'
-
-export default defineScope({
-  name: 'primitives/container',
-  title: 'Container',
-  stories: [{name: 'plain', title: 'Plain', component: lazy(() => import('./example'))}],
-})

package/src/core/primitives/flex/__workshop__/example.tsx

@@ -1,34 +0,0 @@
-import {Card, Code, Flex} from '@sanity/ui'
-import {useSelect} from '@sanity/ui-workshop'
-import {styled} from 'styled-components'
-
-import {WORKSHOP_FLEX_DIRECTION_OPTIONS} from '../../../__workshop__/constants'
-
-const DebugCard = styled(Card)`
-  outline: 1px solid red;
-  &:not([hidden]) {
-    display: flex;
-  }
-  align-items: center;
-  justify-content: center;
-`
-
-export default function ExampleStory() {
-  const direction = useSelect('Direction', WORKSHOP_FLEX_DIRECTION_OPTIONS, 'row', 'Props')
-
-  return (
-    <Flex direction={direction} height="fill" style={{width: '100%'}}>
-      <DebugCard flex={1}>
-        <Code size={1}>1</Code>
-      </DebugCard>
-
-      <DebugCard flex={[1, 2, 3]}>
-        <Code size={1}>[1,2,3]</Code>
-      </DebugCard>
-
-      <DebugCard flex={['none', 'none', 1]}>
-        <Code size={1}>['none', 'none', 1]</Code>
-      </DebugCard>
-    </Flex>
-  )
-}

package/src/core/primitives/flex/__workshop__/gap.tsx

@@ -1,25 +0,0 @@
-import {Card, Flex, Text} from '@sanity/ui'
-
-export default function GapStory() {
-  return (
-    <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
-      <Flex align="center" gap={[2, 3, 4]} justify="center" wrap="wrap">
-        <Card padding={3} scheme="dark">
-          <Text size={0}>Card 0</Text>
-        </Card>
-        <Card padding={3} scheme="dark">
-          <Text size={1}>Card 1</Text>
-        </Card>
-        <Card padding={3} scheme="dark">
-          <Text size={2}>Card 2</Text>
-        </Card>
-        <Card padding={3} scheme="dark">
-          <Text size={3}>Card 3</Text>
-        </Card>
-        <Card padding={3} scheme="dark">
-          <Text size={4}>Card 4</Text>
-        </Card>
-      </Flex>
-    </Flex>
-  )
-}

package/src/core/primitives/flex/__workshop__/index.ts

@@ -1,11 +0,0 @@
-import {defineScope} from '@sanity/ui-workshop'
-import {lazy} from 'react'
-
-export default defineScope({
-  name: 'primitives/flex',
-  title: 'Flex',
-  stories: [
-    {name: 'plain', title: 'Plain', component: lazy(() => import('./example'))},
-    {name: 'gap', title: 'Gap', component: lazy(() => import('./gap'))},
-  ],
-})

package/src/core/primitives/grid/__workshop__/index.ts

@@ -1,10 +0,0 @@
-import {defineScope} from '@sanity/ui-workshop'
-import {lazy} from 'react'
-
-export default defineScope({
-  name: 'primitives/grid',
-  title: 'Grid',
-  stories: [
-    {name: 'responsive', title: 'Responsive', component: lazy(() => import('./responsive'))},
-  ],
-})

package/src/core/primitives/grid/__workshop__/responsive.tsx

@@ -1,54 +0,0 @@
-import {Card, Code, Container, Flex, Grid} from '@sanity/ui'
-
-export default function ResponsiveStory() {
-  return (
-    <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
-      <Container width="auto">
-        <Grid
-          id="responsive-grid"
-          columns={[1, 2, 3, 4, 5, 6, 7]}
-          gap={[0, 1, 2, 3, 4, 5, 6]}
-          rows={[1, 2, 3, 4, 5, 6, 7]}
-          style={{textAlign: 'center'}}
-        >
-          <Card padding={[1, 2, 3]} tone="neutral">
-            <Code>1</Code>
-          </Card>
-          <Card padding={[1, 2, 3]} tone="neutral">
-            <Code>2</Code>
-          </Card>
-          <Card padding={[1, 2, 3]} tone="neutral">
-            <Code>3</Code>
-          </Card>
-          <Card padding={[1, 2, 3]} tone="neutral">
-            <Code>4</Code>
-          </Card>
-          <Card padding={[1, 2, 3]} tone="neutral">
-            <Code>5</Code>
-          </Card>
-          <Card padding={[1, 2, 3]} tone="neutral">
-            <Code>6</Code>
-          </Card>
-          <Card padding={[1, 2, 3]} tone="neutral">
-            <Code>7</Code>
-          </Card>
-          <Card padding={[1, 2, 3]} tone="neutral">
-            <Code>8</Code>
-          </Card>
-          <Card padding={[1, 2, 3]} tone="neutral">
-            <Code>9</Code>
-          </Card>
-          <Card padding={[1, 2, 3]} tone="neutral">
-            <Code>10</Code>
-          </Card>
-          <Card padding={[1, 2, 3]} tone="neutral">
-            <Code>11</Code>
-          </Card>
-          <Card padding={[1, 2, 3]} tone="neutral">
-            <Code>12</Code>
-          </Card>
-        </Grid>
-      </Container>
-    </Flex>
-  )
-}