@sanity/ui 3.3.1 → 3.3.2

package/src/core/components/menu/__workshop__/onCloseMenuButton.tsx

@@ -1,41 +0,0 @@
-import {Box, Button, Menu, MenuButton, MenuButtonProps, MenuItem, Stack, useToast} from '@sanity/ui'
-import {useCallback} from 'react'
-
-const POPOVER_PROPS: MenuButtonProps['popover'] = {
-  constrainSize: true,
-}
-
-export default function OnCloseMenuButton() {
-  const {push} = useToast()
-
-  const handleClose = useCallback(() => {
-    push({
-      title: 'Menu closed',
-      status: 'success',
-    })
-  }, [push])
-
-  return (
-    <Box padding={[4, 5, 6]}>
-      <Stack space={2}>
-        <MenuButton
-          button={<Button text="With onClose callback" />}
-          id="closable-example"
-          onClose={handleClose}
-          menu={
-            <Menu padding={0} space={0}>
-              <Stack padding={1} space={1}>
-                <MenuItem text="Item 1" />
-                <MenuItem text="Item 2" />
-                <MenuItem text="Item 3" />
-                <MenuItem text="Item 4" />
-              </Stack>
-            </Menu>
-          }
-          popover={POPOVER_PROPS}
-        />
-        <Button text="Blur test button" mode="ghost" />
-      </Stack>
-    </Box>
-  )
-}

package/src/core/components/menu/__workshop__/selectedItem.tsx

@@ -1,69 +0,0 @@
-import {CheckmarkIcon, ClockIcon, ExpandIcon, SearchIcon} from '@sanity/icons'
-import {
-  Box,
-  Button,
-  Code,
-  Menu,
-  MenuButton,
-  MenuButtonProps,
-  MenuDivider,
-  MenuItem,
-  Stack,
-} from '@sanity/ui'
-import {useState} from 'react'
-
-const POPOVER_PROPS: MenuButtonProps['popover'] = {
-  matchReferenceWidth: true,
-}
-
-const INITIAL_INDEX = 1
-
-export default function SelectedItemStory() {
-  const [selectedIndex, setSelectedIndex] = useState(INITIAL_INDEX)
-
-  return (
-    <Box padding={[4, 5, 6]}>
-      <Stack space={4}>
-        <Code>selectedIndex={selectedIndex}</Code>
-
-        <MenuButton
-          button={<Button text="Open menu" />}
-          id="menu-button"
-          menu={
-            <Menu>
-              <MenuItem
-                icon={SearchIcon}
-                iconRight={selectedIndex === 0 ? CheckmarkIcon : undefined}
-                id="menu-item-1"
-                onClick={() => setSelectedIndex(0)}
-                pressed={selectedIndex === 0}
-                selected={selectedIndex === 0}
-                text="Show search"
-              />
-              <MenuItem
-                icon={ClockIcon}
-                iconRight={selectedIndex === 1 ? CheckmarkIcon : undefined}
-                id="menu-item-2"
-                onClick={() => setSelectedIndex(1)}
-                pressed={selectedIndex === 1}
-                selected={selectedIndex === 1}
-                text="Show clock"
-              />
-              <MenuDivider />
-              <MenuItem
-                icon={ExpandIcon}
-                iconRight={selectedIndex === 2 ? CheckmarkIcon : undefined}
-                id="menu-item-3"
-                onClick={() => setSelectedIndex(2)}
-                pressed={selectedIndex === 2}
-                selected={selectedIndex === 2}
-                text="Expanded"
-              />
-            </Menu>
-          }
-          popover={POPOVER_PROPS}
-        />
-      </Stack>
-    </Box>
-  )
-}

package/src/core/components/menu/__workshop__/shouldFocus.tsx

@@ -1,47 +0,0 @@
-import {useSelect} from '@sanity/ui-workshop'
-import {Fragment, useCallback, useState} from 'react'
-
-import {Button, Flex, Popover} from '../../../primitives'
-import {LayerProvider} from '../../../utils'
-import {Menu} from '../menu'
-import {MenuDivider} from '../menuDivider'
-import {MenuItem} from '../menuItem'
-
-const ITEMS = [...Array(8).keys()].map((num) => ({
-  title: `Item ${num + 1}`,
-  divider: num === 3,
-}))
-
-const OPTIONS = {first: 'first', last: 'last'}
-
-export default function ShouldFocusStory() {
-  const shouldFocus = useSelect<keyof typeof OPTIONS>('Should focus', OPTIONS, 'first')
-
-  const [popoverOpen, setPopoverOpen] = useState<boolean>(false)
-  const handleToggleOpen = useCallback(() => setPopoverOpen((v) => !v), [])
-
-  return (
-    <LayerProvider>
-      <Flex align="center" justify="center" padding={4}>
-        <Popover
-          content={
-            <Menu shouldFocus={shouldFocus}>
-              {ITEMS.map((item) => {
-                return (
-                  <Fragment key={item.title}>
-                    <MenuItem text={item.title} />
-                    {item.divider && <MenuDivider />}
-                  </Fragment>
-                )
-              })}
-            </Menu>
-          }
-          open={popoverOpen}
-          portal
-        >
-          <Button text="Open menu" onClick={handleToggleOpen} />
-        </Popover>
-      </Flex>
-    </LayerProvider>
-  )
-}

package/src/core/components/menu/__workshop__/tones.tsx

@@ -1,25 +0,0 @@
-import {CubeIcon} from '@sanity/icons'
-import {Box, Card, LayerProvider, Menu, MenuItem} from '@sanity/ui'
-import {THEME_COLOR_STATE_TONES} from '@sanity/ui/theme'
-import {useBoolean, useSelect} from '@sanity/ui-workshop'
-
-import {WORKSHOP_CARD_TONE_OPTIONS} from '../../../__workshop__/constants'
-
-export default function TonesStory() {
-  const disabled = useBoolean('Disabled', false, 'Props')
-  const parentTone = useSelect('Parent tone', WORKSHOP_CARD_TONE_OPTIONS, 'default', 'Props')
-
-  return (
-    <LayerProvider>
-      <Box padding={[4, 5, 6]}>
-        <Card radius={3} shadow={3} tone={parentTone}>
-          <Menu>
-            {THEME_COLOR_STATE_TONES.map((tone) => (
-              <MenuItem disabled={disabled} icon={CubeIcon} key={tone} text={tone} tone={tone} />
-            ))}
-          </Menu>
-        </Card>
-      </Box>
-    </LayerProvider>
-  )
-}

package/src/core/components/menu/__workshop__/withoutArrow.tsx

@@ -1,32 +0,0 @@
-import {Box, Button, Menu, MenuButton, MenuButtonProps, MenuItem, Stack} from '@sanity/ui'
-
-const POPOVER_PROPS: MenuButtonProps['popover'] = {
-  __unstable_margins: [1, 1, 1, 1],
-  arrow: false,
-  constrainSize: true,
-  fallbackPlacements: ['top-start'],
-  matchReferenceWidth: true,
-  radius: 0,
-  placement: 'bottom-start',
-}
-
-export default function WithoutArrowStory() {
-  return (
-    <Box padding={[4, 5, 6]}>
-      <Stack>
-        <MenuButton
-          button={<Button mode="ghost" text="Open menu" />}
-          id="without-arrow-example"
-          menu={
-            <Menu>
-              <MenuItem text="Item 1" />
-              <MenuItem text="Item 2" />
-              <MenuItem text="Item 3" />
-            </Menu>
-          }
-          popover={POPOVER_PROPS}
-        />
-      </Stack>
-    </Box>
-  )
-}

package/src/core/components/skeleton/__workshop__/delay.tsx

@@ -1,70 +0,0 @@
-import {
-  Box,
-  Card,
-  CodeSkeleton,
-  Container,
-  Flex,
-  HeadingSkeleton,
-  LabelSkeleton,
-  Skeleton,
-  Stack,
-  Text,
-  TextSkeleton,
-} from '@sanity/ui'
-import {useBoolean, useSelect} from '@sanity/ui-workshop'
-
-import {WORKSHOP_CARD_TONE_OPTIONS} from '../../../__workshop__/constants'
-
-export default function SkeletonDelayStory() {
-  const tone = useSelect('Tone', WORKSHOP_CARD_TONE_OPTIONS, '', 'Props') || 'default'
-  const animated = useBoolean('Animated', true)
-
-  return (
-    <Box padding={[4, 5, 6]}>
-      <Container width={1}>
-        <Text muted>Delayed by 2000ms</Text>
-        <Card tone={tone} marginTop={4} padding={2} radius={2} border>
-          <Flex align="center">
-            <Skeleton
-              style={{width: 90, height: 90}}
-              radius={2}
-              animated={animated}
-              marginRight={3}
-              delay={1000}
-            />
-            <Stack space={2} flex={1}>
-              <HeadingSkeleton
-                size={4}
-                style={{width: '100%'}}
-                radius={1}
-                animated={animated}
-                delay={1000}
-              />
-              <TextSkeleton
-                size={1}
-                style={{width: '100%'}}
-                radius={1}
-                animated={animated}
-                delay={1000}
-              />
-              <LabelSkeleton
-                size={1}
-                style={{width: '100%'}}
-                radius={1}
-                animated={animated}
-                delay={1000}
-              />
-              <CodeSkeleton
-                size={1}
-                style={{width: '100%'}}
-                radius={1}
-                animated={animated}
-                delay={1000}
-              />
-            </Stack>
-          </Flex>
-        </Card>
-      </Container>
-    </Box>
-  )
-}

package/src/core/components/skeleton/__workshop__/index.ts

@@ -1,11 +0,0 @@
-import {defineScope} from '@sanity/ui-workshop'
-import {lazy} from 'react'
-
-export default defineScope({
-  name: 'components/skeleton',
-  title: 'Skeleton',
-  stories: [
-    {name: 'skeleton', title: 'Skeleton', component: lazy(() => import('./skeleton'))},
-    {name: 'skeleton-delay', title: 'Skeleton delay', component: lazy(() => import('./delay'))},
-  ],
-})

package/src/core/components/skeleton/__workshop__/skeleton.tsx

@@ -1,64 +0,0 @@
-import {
-  Box,
-  Card,
-  CodeSkeleton,
-  Container,
-  Flex,
-  Grid,
-  HeadingSkeleton,
-  LabelSkeleton,
-  Skeleton,
-  Stack,
-  TextSkeleton,
-} from '@sanity/ui'
-import {useBoolean, useSelect} from '@sanity/ui-workshop'
-
-import {WORKSHOP_CARD_TONE_OPTIONS} from '../../../__workshop__/constants'
-
-export default function SkeletonStory() {
-  const tone = useSelect('Tone', WORKSHOP_CARD_TONE_OPTIONS, '', 'Props') || 'default'
-  const animated = useBoolean('Animated', true)
-
-  return (
-    <Box padding={[4, 5, 6]}>
-      <Container width={1}>
-        <Stack space={4}>
-          {[1, 2, 3].map((item) => (
-            <Card key={item} tone={tone} padding={2} radius={2} border>
-              <Flex align="center">
-                <Grid gap={2} columns={2} marginRight={3}>
-                  <Skeleton style={{width: 40, height: 40}} radius={2} animated={animated} />
-                  <Skeleton style={{width: 40, height: 40}} radius={2} animated={animated} />
-                  <Skeleton style={{width: 40, height: 40}} radius={2} animated={animated} />
-                  <Skeleton style={{width: 40, height: 40}} radius={2} animated={animated} />
-                </Grid>
-                <Stack space={2} flex={1}>
-                  <HeadingSkeleton style={{width: '100%'}} radius={1} animated={animated} />
-                  <TextSkeleton style={{width: '100%'}} radius={1} animated={animated} />
-                  <LabelSkeleton style={{width: '100%'}} radius={1} animated={animated} />
-                  <CodeSkeleton style={{width: '100%'}} radius={1} animated={animated} />
-                </Stack>
-              </Flex>
-              <Flex marginTop={2}>
-                <Skeleton
-                  style={{height: 50}}
-                  flex={1}
-                  marginRight={1}
-                  radius={2}
-                  animated={animated}
-                />
-                <Skeleton
-                  style={{height: 50}}
-                  flex={1}
-                  marginLeft={1}
-                  radius={2}
-                  animated={animated}
-                />
-              </Flex>
-            </Card>
-          ))}
-        </Stack>
-      </Container>
-    </Box>
-  )
-}

package/src/core/components/tab/__workshop__/example.tsx

@@ -1,79 +0,0 @@
-import {OkHandIcon, RocketIcon, SunIcon} from '@sanity/icons'
-import {Box, Card, Tab, TabList, TabPanel, Text} from '@sanity/ui'
-import {useBoolean} from '@sanity/ui-workshop'
-import {useState} from 'react'
-
-export default function ExampleStory() {
-  const [tab, setTab] = useState('foo')
-  const useLongTitle = useBoolean('Use long title', false, 'Props') || false
-
-  const longTitle =
-    "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."
-
-  return (
-    <Box padding={[4, 5, 6]}>
-      <TabList space={[1, 2, 3]}>
-        <Tab
-          aria-controls="example-panel-foo"
-          icon={SunIcon}
-          id="example-tab-foo"
-          label="Foo"
-          onClick={() => setTab('foo')}
-          selected={tab === 'foo'}
-        />
-        <Tab
-          aria-controls="example-panel-bar"
-          icon={RocketIcon}
-          id="example-tab-bar"
-          label="Bar"
-          onClick={() => setTab('bar')}
-          selected={tab === 'bar'}
-        />
-        <Tab
-          aria-controls="example-panel-baz"
-          icon={OkHandIcon}
-          id="example-tab-baz"
-          label={useLongTitle ? longTitle : 'Baz'}
-          onClick={() => setTab('baz')}
-          selected={tab === 'baz'}
-        />
-      </TabList>
-      <TabPanel
-        aria-labelledby="example-panel-foo"
-        hidden={tab !== 'foo'}
-        id="example-panel-foo"
-        marginTop={[3, 4, 5]}
-      >
-        <Card border padding={3}>
-          <Text>
-            This is the <strong>Foo</strong> panel
-          </Text>
-        </Card>
-      </TabPanel>
-      <TabPanel
-        aria-labelledby="example-panel-bar"
-        hidden={tab !== 'bar'}
-        id="example-panel-bar"
-        marginTop={[3, 4, 5]}
-      >
-        <Card border padding={3}>
-          <Text>
-            This is the <strong>Bar</strong> panel
-          </Text>
-        </Card>
-      </TabPanel>
-      <TabPanel
-        aria-labelledby="example-panel-baz"
-        hidden={tab !== 'baz'}
-        id="example-panel-baz"
-        marginTop={[3, 4, 5]}
-      >
-        <Card border padding={3}>
-          <Text>
-            This is the <strong>Baz</strong> panel
-          </Text>
-        </Card>
-      </TabPanel>
-    </Box>
-  )
-}

package/src/core/components/tab/__workshop__/index.ts

@@ -1,14 +0,0 @@
-import {defineScope} from '@sanity/ui-workshop'
-import {lazy} from 'react'
-
-export default defineScope({
-  name: 'components/tab',
-  title: 'Tab',
-  stories: [
-    {
-      name: 'example',
-      title: 'Example',
-      component: lazy(() => import('./example')),
-    },
-  ],
-})

package/src/core/components/toast/__workshop__/hook.tsx

@@ -1,71 +0,0 @@
-import {Box, Button, Inline, ToastProvider, useToast} from '@sanity/ui'
-
-export default function HookStory() {
-  const toast = useToast()
-
-  return (
-    <ToastProvider>
-      <Box padding={[4, 5, 6]}>
-        <Inline space={2}>
-          <Button
-            onClick={() =>
-              toast.push({
-                id: 'status',
-                closable: true,
-                title: 'Information',
-                status: 'info',
-                description: (
-                  <>
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis faucibus
-                    pellentesque luctus. Curabitur sed tortor a elit tempus malesuada. Quisque sed
-                    dapibus ligula, id pulvinar nisl.
-                  </>
-                ),
-              })
-            }
-            text="Push info"
-            tone="neutral"
-          />
-
-          <Button
-            onClick={() =>
-              toast.push({
-                id: 'status',
-                closable: true,
-                title: 'Warning',
-                status: 'warning',
-              })
-            }
-            text="Push warning"
-            tone="caution"
-          />
-
-          <Button
-            onClick={() =>
-              toast.push({
-                id: 'status',
-                closable: true,
-                title: 'Error',
-                status: 'error',
-              })
-            }
-            text="Push error"
-            tone="critical"
-          />
-
-          <Button
-            onClick={() =>
-              toast.push({
-                // id: 'status',
-                closable: true,
-                title: 'Some message',
-                // status: 'error',
-              })
-            }
-            text="Push some message"
-          />
-        </Inline>
-      </Box>
-    </ToastProvider>
-  )
-}

package/src/core/components/toast/__workshop__/index.ts

@@ -1,19 +0,0 @@
-import {defineScope} from '@sanity/ui-workshop'
-import {lazy} from 'react'
-
-export default defineScope({
-  name: 'components/toast',
-  title: 'Toast',
-  stories: [
-    {
-      name: 'toast',
-      title: 'Toast',
-      component: lazy(() => import('./toast')),
-    },
-    {
-      name: 'hook',
-      title: 'Hook',
-      component: lazy(() => import('./hook')),
-    },
-  ],
-})

package/src/core/components/toast/__workshop__/toast.tsx

@@ -1,26 +0,0 @@
-import {Box, Container, Toast} from '@sanity/ui'
-import {useAction, useBoolean, useSelect, useString, useText} from '@sanity/ui-workshop'
-
-import {WORKSHOP_TOAST_STATUS_OPTIONS} from '../../../__workshop__/constants'
-
-export default function ToastStory() {
-  const closable = useBoolean('Closable', false, 'Props')
-  const title = useString('Title', 'Toast title', 'Props')
-  const status = useSelect('Status', WORKSHOP_TOAST_STATUS_OPTIONS, '', 'Props') || undefined
-  const description = useText('Description', '', 'Props')
-  const handleClose = useAction('onClose')
-
-  return (
-    <Box padding={[4, 5, 6]}>
-      <Container width={0}>
-        <Toast
-          closable={closable}
-          description={description}
-          onClose={handleClose}
-          status={status}
-          title={title}
-        />
-      </Container>
-    </Box>
-  )
-}

package/src/core/components/tree/__workshop__/basic.perf.ts

@@ -1,19 +0,0 @@
-import {PerfTestProps, PerfTestRunFn} from '@sanity/ui-workshop/plugin-perf'
-import {findByTestId, fireEvent} from '@testing-library/dom'
-
-function test<ElementType = unknown>(
-  title: string,
-  run: PerfTestRunFn<ElementType>,
-): PerfTestProps<ElementType> {
-  return {name: title, run}
-}
-
-export const perfTests = [
-  test('Toggle tree groups', async ({target}: {target: HTMLUListElement}) => {
-    const apples = await findByTestId(target, 'apples')
-    const oranges = await findByTestId(target, 'oranges')
-
-    fireEvent.click(apples)
-    fireEvent.click(oranges)
-  }),
-]