@sanity/ui 3.3.1 → 3.3.2

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

@@ -1,49 +0,0 @@
-import {Card, Layer, LayerProvider, Stack} from '@sanity/ui'
-
-import {LayerDebugInfo} from './_debug'
-
-export default function MultipleRootsStory() {
-  return (
-    <Stack space={4}>
-      <LayerProvider zOffset={100}>
-        <Card padding={3} shadow={1}>
-          <Stack space={3}>
-            <LayerDebugInfo />
-            <Layer>
-              <Card padding={3} shadow={1}>
-                <Stack space={3}>
-                  <LayerDebugInfo />
-                  <Layer>
-                    <Card padding={3} shadow={1}>
-                      <LayerDebugInfo />
-                    </Card>
-                  </Layer>
-                </Stack>
-              </Card>
-            </Layer>
-          </Stack>
-        </Card>
-      </LayerProvider>
-
-      <LayerProvider zOffset={200}>
-        <Card as={Layer} padding={3} shadow={5} style={{top: -50, left: 30}}>
-          <Stack space={3}>
-            <LayerDebugInfo />
-            <Layer>
-              <Card padding={3} shadow={1}>
-                <Stack space={3}>
-                  <LayerDebugInfo />
-                  <Layer>
-                    <Card padding={3} shadow={1}>
-                      <LayerDebugInfo />
-                    </Card>
-                  </Layer>
-                </Stack>
-              </Card>
-            </Layer>
-          </Stack>
-        </Card>
-      </LayerProvider>
-    </Stack>
-  )
-}

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

@@ -1,98 +0,0 @@
-import {CloseIcon} from '@sanity/icons'
-import {Box, Button, Card, Flex, Layer, LayerProvider, Stack, Text} from '@sanity/ui'
-import {useCallback, useState} from 'react'
-
-import {LayerDebugInfo} from './_debug'
-
-export default function PlainStory() {
-  return (
-    <Box padding={3}>
-      <Root />
-      <Root />
-      <Root />
-    </Box>
-  )
-}
-
-function Root() {
-  const [open, setOpen] = useState(false)
-  const handleOpen = useCallback(() => setOpen(true), [])
-  const handleClose = useCallback(() => setOpen(false), [])
-
-  return (
-    <LayerProvider>
-      <Card radius={2} shadow={1}>
-        <Box padding={3}>
-          <Text>
-            <strong>Root layer</strong>
-          </Text>
-        </Box>
-        <Box padding={3}>
-          <Stack space={3}>
-            <LayerDebugInfo id="layer-debug-info-1" />
-            <Button id="open-layer-1" mode="ghost" onClick={handleOpen} text="Open layer 1" />
-            {open && (
-              <Layer style={{display: 'flex', alignItems: 'center', justifyContent: 'center'}}>
-                <Layer1 onClose={handleClose} />
-              </Layer>
-            )}
-          </Stack>
-        </Box>
-      </Card>
-    </LayerProvider>
-  )
-}
-
-function Layer1({onClose}: {onClose: () => void}) {
-  const [open, setOpen] = useState(false)
-  const handleOpen = useCallback(() => setOpen(true), [])
-  const handleClose = useCallback(() => setOpen(false), [])
-
-  return (
-    <Card radius={2} shadow={3}>
-      <Flex>
-        <Box flex={1} padding={3}>
-          <Text>
-            <strong>Layer 1</strong>
-          </Text>
-        </Box>
-        <Box padding={1}>
-          <Button icon={CloseIcon} mode="bleed" onClick={onClose} padding={2} />
-        </Box>
-      </Flex>
-      <Box padding={3}>
-        <Stack space={3}>
-          <LayerDebugInfo />
-          <Button id="open-layer-2" mode="ghost" onClick={handleOpen} text="Open layer 2" />
-          {open && (
-            <Layer style={{display: 'flex', alignItems: 'center', justifyContent: 'center'}}>
-              <Layer2 onClose={handleClose} />
-            </Layer>
-          )}
-        </Stack>
-      </Box>
-    </Card>
-  )
-}
-
-function Layer2({onClose}: {onClose: () => void}) {
-  return (
-    <Card radius={2} shadow={3}>
-      <Flex>
-        <Box flex={1} padding={3}>
-          <Text>
-            <strong>Layer 2</strong>
-          </Text>
-        </Box>
-        <Box padding={1}>
-          <Button icon={CloseIcon} mode="bleed" onClick={onClose} padding={2} />
-        </Box>
-      </Flex>
-      <Box padding={3}>
-        <Stack space={3}>
-          <LayerDebugInfo />
-        </Stack>
-      </Box>
-    </Card>
-  )
-}

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

@@ -1,13 +0,0 @@
-import {Card, Layer} from '@sanity/ui'
-
-import {LayerDebugInfo} from './_debug'
-
-export default function ResponsiveZOffsetStory() {
-  return (
-    <Layer id="responsive-layer" zOffset={[1, 2, 3, 4, 5, 6, 7]}>
-      <Card padding={[1, 2, 3, 4, 5, 6, 7]} shadow={1}>
-        <LayerDebugInfo />
-      </Card>
-    </Layer>
-  )
-}

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

@@ -1,14 +0,0 @@
-import {defineScope} from '@sanity/ui-workshop'
-import {lazy} from 'react'
-
-export default defineScope({
-  name: 'utils/portal',
-  title: 'Portal',
-  stories: [
-    {
-      name: 'named',
-      title: 'Named portals',
-      component: lazy(() => import('./named')),
-    },
-  ],
-})

package/src/core/utils/portal/__workshop__/named.tsx

@@ -1,63 +0,0 @@
-import {Card, Container, Portal, PortalProvider, Stack, Text} from '@sanity/ui'
-import {useMemo, useState} from 'react'
-
-export default function NamedStory() {
-  const [portal1Element, setPortal1Element] = useState<HTMLDivElement | null>(null)
-  const [portal2Element, setPortal2Element] = useState<HTMLDivElement | null>(null)
-  const [portal3Element, setPortal3Element] = useState<HTMLDivElement | null>(null)
-  const __unstable_elements = useMemo(
-    () => ({
-      portal1: portal1Element,
-      portal2: portal2Element,
-      portal3: portal3Element,
-    }),
-    [portal1Element, portal2Element, portal3Element],
-  )
-
-  return (
-    <PortalProvider __unstable_elements={__unstable_elements}>
-      <Container width={1}>
-        <Card height="fill" padding={4}>
-          <Stack space={2}>
-            <Text size={1} weight="medium">
-              Portal 1
-            </Text>
-            <Card border padding={3} ref={setPortal1Element} />
-          </Stack>
-        </Card>
-        <Card height="fill" padding={4}>
-          <Stack space={2}>
-            <Text size={1} weight="medium">
-              Portal 2
-            </Text>
-            <Card border padding={3} ref={setPortal2Element} />
-          </Stack>
-        </Card>
-        <Card height="fill" padding={4}>
-          <Stack space={2}>
-            <Text size={1} weight="medium">
-              Portal 3
-            </Text>
-            <Card border padding={3} ref={setPortal3Element} />
-          </Stack>
-        </Card>
-      </Container>
-
-      <Portal __unstable_name="portal1">
-        <Text>Portal 1</Text>
-      </Portal>
-
-      <Portal __unstable_name="portal2">
-        <Text>Portal 2</Text>
-      </Portal>
-
-      <Portal __unstable_name="portal3">
-        <Text>Portal 3A</Text>
-      </Portal>
-
-      <Portal __unstable_name="portal3">
-        <Text>Portal 3B</Text>
-      </Portal>
-    </PortalProvider>
-  )
-}

package/src/core/utils/virtualList/__workshop__/changingProps.tsx

@@ -1,36 +0,0 @@
-import {Box, Card, Text, VirtualList} from '@sanity/ui'
-import {useCallback, useState} from 'react'
-
-const data = Array.from(new Array(1000)).map((_, key) => ({key}))
-
-export default function ChangingProps() {
-  const [expanded, setExpanded] = useState(false)
-
-  const toggleExpand = useCallback(() => setExpanded((v) => !v), [])
-
-  const renderItem = useCallback(
-    (item: {key: number}) => (
-      <Card
-        as="button"
-        onClick={toggleExpand}
-        paddingX={4}
-        paddingY={expanded ? 5 : 4}
-        radius={2}
-        tone="primary"
-      >
-        <Text>Item #{item.key}</Text>
-      </Card>
-    ),
-    [expanded, toggleExpand],
-  )
-
-  return (
-    <Box padding={4}>
-      <Box marginBottom={5}>
-        <Text size={1}>Click any item to toggle expanded view</Text>
-      </Box>
-
-      <VirtualList gap={expanded ? 4 : 2} items={data} renderItem={renderItem} />
-    </Box>
-  )
-}

package/src/core/utils/virtualList/__workshop__/elementScroll.tsx

@@ -1,24 +0,0 @@
-import {Box, Card, Container, Text, VirtualList} from '@sanity/ui'
-import {useCallback} from 'react'
-
-const data = Array.from(new Array(1000)).map((_, key) => ({key}))
-
-export default function ElementScroll() {
-  const renderItem = useCallback((item: {key: number}) => {
-    return (
-      <Card padding={3} radius={2} shadow={1}>
-        <Text>Item #{item.key}</Text>
-      </Card>
-    )
-  }, [])
-
-  return (
-    <Box height="fill" padding={4} sizing="border">
-      <Card height="fill" overflow="auto" padding={4} shadow={1} sizing="border">
-        <Container width={1}>
-          <VirtualList gap={2} items={data} renderItem={renderItem} />
-        </Container>
-      </Card>
-    </Box>
-  )
-}

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

@@ -1,29 +0,0 @@
-import {defineScope} from '@sanity/ui-workshop'
-import {lazy} from 'react'
-
-export default defineScope({
-  name: 'utils/virtual-list',
-  title: 'VirtualList',
-  stories: [
-    {
-      name: 'window-scroll',
-      title: 'Window scroll',
-      component: lazy(() => import('./windowScrolll')),
-    },
-    {
-      name: 'element-scroll',
-      title: 'Element scroll',
-      component: lazy(() => import('./elementScroll')),
-    },
-    {
-      name: 'infinite-list',
-      title: 'Infinite list',
-      component: lazy(() => import('./infiniteList')),
-    },
-    {
-      name: 'changing-props',
-      title: 'Changing props',
-      component: lazy(() => import('./changingProps')),
-    },
-  ],
-})

package/src/core/utils/virtualList/__workshop__/infiniteList.tsx

@@ -1,48 +0,0 @@
-import {Box, Card, Text, VirtualList, VirtualListChangeOpts} from '@sanity/ui'
-import {useCallback, useRef, useState} from 'react'
-
-interface Item {
-  key: string
-}
-
-function getData(len: number, offsetIndex = 0): Item[] {
-  return Array.from(new Array(len)).map((_, index) => ({key: String(offsetIndex + index)}))
-}
-
-const ITEMS_PER_PAGE = 1000
-
-export default function InfiniteList() {
-  const [data, setData] = useState<Item[]>(() => getData(ITEMS_PER_PAGE))
-  const offsetRef = useRef(0)
-
-  const getItemKey = useCallback((item: Item) => `item-${item.key}`, [])
-
-  const handleChange = useCallback((opts: VirtualListChangeOpts) => {
-    const maxIndex = (offsetRef.current + 1) * ITEMS_PER_PAGE
-
-    if (opts.toIndex >= maxIndex - 50) {
-      offsetRef.current += 1
-      setData((d) => d.concat(getData(ITEMS_PER_PAGE, offsetRef.current * ITEMS_PER_PAGE)))
-    }
-  }, [])
-
-  const renderItem = useCallback((item: Item) => {
-    return (
-      <Card padding={3} shadow={1}>
-        <Text align="center">Item #{item.key}</Text>
-      </Card>
-    )
-  }, [])
-
-  return (
-    <Box padding={4}>
-      <VirtualList
-        gap={3}
-        getItemKey={getItemKey}
-        items={data}
-        onChange={handleChange}
-        renderItem={renderItem}
-      />
-    </Box>
-  )
-}

package/src/core/utils/virtualList/__workshop__/windowScrolll.tsx

@@ -1,22 +0,0 @@
-import {Box, Card, Container, Text, VirtualList} from '@sanity/ui'
-import {useCallback} from 'react'
-
-const data = Array.from(new Array(1000)).map((_, key) => ({key}))
-
-export default function Example() {
-  const renderItem = useCallback((item: {key: number}) => {
-    return (
-      <Card padding={3} radius={2} shadow={1}>
-        <Text>Item #{item.key}</Text>
-      </Card>
-    )
-  }, [])
-
-  return (
-    <Box padding={4}>
-      <Container width={1}>
-        <VirtualList gap={2} items={data} renderItem={renderItem} />
-      </Container>
-    </Box>
-  )
-}