@sanity/ui 3.0.0-static.3 → 3.0.0-static.31

package/src/ui/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/ui/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/ui/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/ui/components/skeleton/index.ts

@@ -1,2 +0,0 @@
-export * from './skeleton'
-export * from './textSkeleton'

package/src/ui/components/skeleton/skeleton.tsx

@@ -1,53 +0,0 @@
-import {composeClassNames, skeleton, SkeletonStyleProps} from '@sanity/ui/css'
-import {ForwardedRef, forwardRef, useEffect, useState} from 'react'
-
-import {Box, BoxProps} from '../../primitives'
-import {Props} from '../../types'
-
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-export interface SkeletonProps extends SkeletonStyleProps, Omit<BoxProps, 'children'> {
-  animated?: boolean
-  delay?: number
-}
-
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-export const Skeleton = forwardRef(function Skeleton(
-  props: Props<SkeletonProps, 'div'>,
-  ref: ForwardedRef<HTMLDivElement>,
-) {
-  const {animated = false, className, delay, radius, ...restProps} = props
-  const [visible, setVisible] = useState<boolean>(delay ? false : true)
-
-  useEffect(() => {
-    if (!delay) {
-      return setVisible(true)
-    }
-
-    const timeout = setTimeout(() => {
-      setVisible(true)
-    }, delay)
-
-    return () => {
-      clearTimeout(timeout)
-    }
-  }, [delay])
-
-  return (
-    <Box
-      data-ui="Skeleton"
-      {...restProps}
-      className={composeClassNames(className, skeleton({radius}))}
-      data-animated={animated ? '' : undefined}
-      data-visible={visible ? '' : undefined}
-      ref={ref}
-    />
-  )
-})
-
-Skeleton.displayName = 'ForwardRef(Skeleton)'

package/src/ui/components/skeleton/textSkeleton.tsx

@@ -1,132 +0,0 @@
-import {
-  codeSkeleton,
-  composeClassNames,
-  headingSkeleton,
-  labelSkeleton,
-  ResponsiveProp,
-  textSkeleton,
-} from '@sanity/ui/css'
-import {FontCodeSize, FontHeadingSize, FontLabelSize, FontTextSize} from '@sanity/ui/theme'
-import {ForwardedRef, forwardRef} from 'react'
-
-import {Props} from '../../types'
-import {Skeleton, SkeletonProps} from './skeleton'
-
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-export interface TextSkeletonProps extends SkeletonProps {
-  size?: ResponsiveProp<FontTextSize>
-}
-
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-export interface LabelSkeletonProps extends SkeletonProps {
-  size?: ResponsiveProp<FontLabelSize>
-}
-
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-export interface HeadingSkeletonProps extends SkeletonProps {
-  size?: ResponsiveProp<FontHeadingSize>
-}
-
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-export interface CodeSkeletonProps extends SkeletonProps {
-  size?: ResponsiveProp<FontCodeSize>
-}
-
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-export const TextSkeleton = forwardRef(function TextSkeleton(
-  props: Props<TextSkeletonProps, 'div'>,
-  ref: ForwardedRef<HTMLDivElement>,
-) {
-  const {className, size = 2, ...restProps} = props
-
-  return (
-    <Skeleton
-      data-ui="TextSkeleton"
-      {...restProps}
-      className={composeClassNames(className, textSkeleton({size}))}
-      ref={ref}
-    />
-  )
-})
-
-TextSkeleton.displayName = 'ForwardRef(TextSkeleton)'
-
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-export const LabelSkeleton = forwardRef(function TextSkeleton(
-  props: Props<LabelSkeletonProps, 'div'>,
-  ref: ForwardedRef<HTMLDivElement>,
-) {
-  const {className, size = 2, ...restProps} = props
-
-  return (
-    <Skeleton
-      data-ui="LabelSkeleton"
-      {...restProps}
-      className={composeClassNames(className, labelSkeleton({size}))}
-      ref={ref}
-    />
-  )
-})
-
-LabelSkeleton.displayName = 'ForwardRef(LabelSkeleton)'
-
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-export const HeadingSkeleton = forwardRef(function TextSkeleton(
-  props: Props<HeadingSkeletonProps, 'div'>,
-  ref: ForwardedRef<HTMLDivElement>,
-) {
-  const {className, size = 2, ...restProps} = props
-
-  return (
-    <Skeleton
-      {...restProps}
-      className={composeClassNames(className, headingSkeleton({size}))}
-      ref={ref}
-    />
-  )
-})
-
-HeadingSkeleton.displayName = 'ForwardRef(HeadingSkeleton)'
-
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-export const CodeSkeleton = forwardRef(function TextSkeleton(
-  props: Props<CodeSkeletonProps, 'div'>,
-  ref: ForwardedRef<HTMLDivElement>,
-) {
-  const {className, size = 2, ...restProps} = props
-
-  return (
-    <Skeleton
-      // root
-      {...restProps}
-      className={composeClassNames(className, codeSkeleton({size}))}
-      ref={ref}
-    />
-  )
-})
-
-CodeSkeleton.displayName = 'ForwardRef(CodeSkeleton)'

package/src/ui/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/ui/components/tab/index.ts

@@ -1,3 +0,0 @@
-export * from './tab'
-export * from './tabList'
-export * from './tabPanel'

package/src/ui/components/tab/tab.tsx

@@ -1,105 +0,0 @@
-import {ResponsiveProp} from '@sanity/ui/css'
-import {FontTextSize, Space} from '@sanity/ui/theme'
-import {
-  ElementType,
-  FocusEvent,
-  ForwardedRef,
-  forwardRef,
-  ReactNode,
-  useCallback,
-  useEffect,
-  useImperativeHandle,
-  useRef,
-} from 'react'
-
-import {Button} from '../../primitives'
-import {ButtonTone, Props} from '../../types'
-
-/**
- * @public
- */
-export interface TabProps {
-  /**
-   * The `id` of the corresponding `TabPanel` component.
-   */
-  'aria-controls': string
-  'id': string
-  'icon'?: ElementType | ReactNode
-  'focused'?: boolean
-  'fontSize'?: ResponsiveProp<FontTextSize>
-  'label'?: ReactNode
-  'padding'?: ResponsiveProp<Space>
-  'selected'?: boolean
-  'tone'?: ButtonTone
-}
-
-/**
- * @public
- */
-export const Tab = forwardRef(function Tab(
-  props: Props<TabProps, 'button'>,
-  forwardedRef: ForwardedRef<HTMLButtonElement>,
-) {
-  const {
-    icon,
-    id,
-    focused,
-    fontSize = 1,
-    label,
-    onClick,
-    onFocus,
-    padding = 2,
-    selected,
-    ...restProps
-  } = props
-  const ref = useRef<HTMLButtonElement | null>(null)
-  const focusedRef = useRef(false)
-
-  useImperativeHandle<HTMLButtonElement | null, HTMLButtonElement | null>(
-    forwardedRef,
-    () => ref.current,
-  )
-
-  const handleBlur = useCallback(() => {
-    focusedRef.current = false
-  }, [])
-
-  const handleFocus = useCallback(
-    (event: FocusEvent<HTMLButtonElement>) => {
-      focusedRef.current = true
-      if (onFocus) onFocus(event)
-    },
-    [onFocus],
-  )
-
-  useEffect(() => {
-    if (focused && !focusedRef.current) {
-      if (ref.current) ref.current.focus()
-      focusedRef.current = true
-    }
-  }, [focused])
-
-  return (
-    <Button
-      data-ui="Tab"
-      {...restProps}
-      aria-selected={selected ? 'true' : 'false'}
-      fontSize={fontSize}
-      icon={icon}
-      id={id}
-      mode="bleed"
-      onClick={onClick}
-      onBlur={handleBlur}
-      onFocus={handleFocus}
-      padding={padding}
-      ref={ref}
-      role="tab"
-      selected={selected}
-      tabIndex={selected ? 0 : -1}
-      text={label}
-      type="button"
-    />
-  )
-})
-
-Tab.displayName = 'ForwardRef(Tab)'

package/src/ui/components/tab/tabList.tsx

@@ -1,74 +0,0 @@
-import {
-  Children,
-  cloneElement,
-  ForwardedRef,
-  forwardRef,
-  KeyboardEvent,
-  ReactElement,
-  useCallback,
-  useState,
-} from 'react'
-
-import {Inline, InlineProps} from '../../primitives'
-import {Props} from '../../types'
-import {TabProps} from './tab'
-
-/**
- * @public
- */
-export type TabListChild = ReactElement<Props<TabProps, 'button'>> | null | undefined | false
-
-/**
- * @public
- */
-export interface TabListProps extends Omit<InlineProps, 'as' | 'height'> {
-  children: TabListChild[]
-}
-
-function _isReactElement(node: unknown): node is ReactElement<Props<TabProps, 'button'>> {
-  return Boolean(node)
-}
-
-/**
- * @public
- */
-export const TabList = forwardRef(function TabList(
-  props: Props<TabListProps, 'div'>,
-  ref: ForwardedRef<HTMLDivElement>,
-) {
-  const {children: childrenProp, ...restProps} = props
-  const [focusedIndex, setFocusedIndex] = useState(-1)
-
-  const children = Children.toArray(childrenProp).filter(_isReactElement)
-
-  const tabs = children.map((child, childIndex) =>
-    cloneElement(child, {
-      focused: focusedIndex === childIndex,
-      key: childIndex,
-      onFocus: () => setFocusedIndex(childIndex),
-    }),
-  )
-
-  const numTabs = tabs.length
-
-  const handleKeyDown = useCallback(
-    (event: KeyboardEvent<HTMLDivElement>) => {
-      if (event.key === 'ArrowLeft') {
-        setFocusedIndex((prevIndex) => (prevIndex + numTabs - 1) % numTabs)
-      }
-
-      if (event.key === 'ArrowRight') {
-        setFocusedIndex((prevIndex) => (prevIndex + 1) % numTabs)
-      }
-    },
-    [numTabs],
-  )
-
-  return (
-    <Inline data-ui="TabList" {...restProps} onKeyDown={handleKeyDown} ref={ref} role="tablist">
-      {tabs}
-    </Inline>
-  )
-})
-
-TabList.displayName = 'ForwardRef(TabList)'

package/src/ui/components/tab/tabPanel.tsx

@@ -1,40 +0,0 @@
-import {ForwardedRef, forwardRef} from 'react'
-
-import {Box, BoxProps} from '../../primitives'
-import {Props} from '../../types'
-
-/**
- * @public
- */
-export interface TabPanelProps extends BoxProps {
-  /**
-   * The `id` of the correlating `Tab` component.
-   */
-  'aria-labelledby': string
-  'id': string
-}
-
-/**
- * @public
- */
-export const TabPanel = forwardRef(function TabPanel(
-  props: Props<TabPanelProps, 'div'>,
-  ref: ForwardedRef<HTMLDivElement>,
-) {
-  const {flex, ...restProps} = props
-
-  return (
-    <Box
-      data-ui="TabPanel"
-      {...restProps}
-      flex={flex}
-      ref={ref}
-      role="tabpanel"
-      tabIndex={props.tabIndex === undefined ? 0 : props.tabIndex}
-    >
-      {props.children}
-    </Box>
-  )
-})
-
-TabPanel.displayName = 'ForwardRef(TabPanel)'