@sanity/ui 3.1.13 → 4.0.0-beta.0

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

@@ -1,122 +0,0 @@
-import {getTheme_v2, ThemeFontKey} from '@sanity/ui/theme'
-import {forwardRef} from 'react'
-import {styled} from 'styled-components'
-
-import {_getArrayProp, _responsive, ThemeProps} from '../../styles'
-import {Skeleton, SkeletonProps} from './skeleton'
-
-const StyledSkeleton = styled(Skeleton)<{$size: number[]; $style: ThemeFontKey}>((
-  props: {
-    $size: number[]
-    $style: ThemeFontKey
-  } & ThemeProps,
-) => {
-  const {$size, $style} = props
-  const {font, media} = getTheme_v2(props.theme)
-  const fontStyle = font[$style]
-
-  const styles = _responsive(media, $size, (sizeIndex) => {
-    const fontSize = fontStyle.sizes[sizeIndex]
-    const capHeight = fontSize.lineHeight - fontSize.ascenderHeight - fontSize.descenderHeight
-
-    return {height: capHeight}
-  })
-
-  return styles
-})
-
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-export interface TextSkeletonProps extends SkeletonProps {
-  size?: number | number[]
-}
-
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-export interface LabelSkeletonProps extends SkeletonProps {
-  size?: number | number[]
-}
-
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-export interface HeadingSkeletonProps extends SkeletonProps {
-  size?: number | number[]
-}
-
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-export interface CodeSkeletonProps extends SkeletonProps {
-  size?: number | number[]
-}
-
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-export const TextSkeleton = forwardRef(function TextSkeleton(
-  props: TextSkeletonProps &
-    Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'children' | 'height' | 'size'>,
-  ref: React.Ref<HTMLDivElement>,
-) {
-  const {size = 2, ...restProps} = props
-  const $size = _getArrayProp(size)
-
-  return <StyledSkeleton {...restProps} $size={$size} ref={ref} $style="text" />
-})
-TextSkeleton.displayName = 'ForwardRef(TextSkeleton)'
-
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-export const LabelSkeleton = forwardRef(function TextSkeleton(
-  props: LabelSkeletonProps &
-    Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'children' | 'height' | 'size'>,
-  ref: React.Ref<HTMLDivElement>,
-) {
-  const {size = 2, ...restProps} = props
-  const $size = _getArrayProp(size)
-
-  return <StyledSkeleton {...restProps} $size={$size} ref={ref} $style="label" />
-})
-LabelSkeleton.displayName = 'ForwardRef(LabelSkeleton)'
-
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-export const HeadingSkeleton = forwardRef(function TextSkeleton(
-  props: HeadingSkeletonProps &
-    Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'children' | 'height' | 'size'>,
-  ref: React.Ref<HTMLDivElement>,
-) {
-  const {size = 2, ...restProps} = props
-  const $size = _getArrayProp(size)
-
-  return <StyledSkeleton {...restProps} $size={$size} ref={ref} $style="heading" />
-})
-HeadingSkeleton.displayName = 'ForwardRef(HeadingSkeleton)'
-
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-export const CodeSkeleton = forwardRef(function TextSkeleton(
-  props: CodeSkeletonProps &
-    Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'children' | 'height' | 'size'>,
-  ref: React.Ref<HTMLDivElement>,
-) {
-  const {size = 2, ...restProps} = props
-  const $size = _getArrayProp(size)
-
-  return <StyledSkeleton {...restProps} $size={$size} ref={ref} $style="code" />
-})
-CodeSkeleton.displayName = 'ForwardRef(CodeSkeleton)'

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/tab/index.ts

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

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

@@ -1,101 +0,0 @@
-import {forwardRef, useCallback, useEffect, useImperativeHandle, useRef} from 'react'
-import {styled} from 'styled-components'
-
-import {Button} from '../../primitives'
-import {ButtonTone} from '../../types'
-
-/**
- * @public
- */
-export interface TabProps {
-  /**
-   * The `id` of the correlating `TabPanel` component.
-   */
-  'aria-controls': string
-  'id': string
-  'icon'?: React.ElementType | React.ReactNode
-  'focused'?: boolean
-  'fontSize'?: number | number[]
-  'label'?: React.ReactNode
-  'padding'?: number | number[]
-  'selected'?: boolean
-  'tone'?: ButtonTone
-}
-
-const CustomButton = styled(Button)`
-  max-width: 100%;
-`
-
-/**
- * @public
- */
-export const Tab = forwardRef(function Tab(
-  props: TabProps &
-    Omit<
-      React.HTMLProps<HTMLButtonElement>,
-      'aria-controls' | 'as' | 'id' | 'label' | 'type' | 'width'
-    >,
-  forwardedRef: React.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: React.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 (
-    <CustomButton
-      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/core/components/tab/tabList.tsx

@@ -1,70 +0,0 @@
-import {Children, cloneElement, forwardRef, isValidElement, useCallback, useState} from 'react'
-import {styled} from 'styled-components'
-
-import {Inline, InlineProps} from '../../primitives'
-
-/**
- * @public
- */
-export interface TabListProps extends Omit<InlineProps, 'as' | 'height'> {
-  children: Array<React.JSX.Element | null | undefined | false>
-}
-
-//Limits the width of tabs in tablist
-const CustomInline = styled(Inline)`
-  & > div {
-    display: inline-block;
-    vertical-align: middle;
-    max-width: 100%;
-    box-sizing: border-box;
-  }
-`
-
-/**
- * @public
- */
-export const TabList = forwardRef(function TabList(
-  props: TabListProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height'>,
-  ref,
-) {
-  const {children: childrenProp, ...restProps} = props
-  const [focusedIndex, setFocusedIndex] = useState(-1)
-
-  const children: React.JSX.Element[] = Children.toArray(childrenProp).filter(isValidElement)
-
-  const tabs = children.map((child, childIndex) =>
-    cloneElement(child, {
-      focused: focusedIndex === childIndex,
-      key: childIndex,
-      onFocus: () => setFocusedIndex(childIndex),
-    }),
-  )
-
-  const numTabs = tabs.length
-
-  const handleKeyDown = useCallback(
-    (event: React.KeyboardEvent<HTMLDivElement>) => {
-      if (event.key === 'ArrowLeft') {
-        setFocusedIndex((prevIndex) => (prevIndex + numTabs - 1) % numTabs)
-      }
-
-      if (event.key === 'ArrowRight') {
-        setFocusedIndex((prevIndex) => (prevIndex + 1) % numTabs)
-      }
-    },
-    [numTabs],
-  )
-
-  return (
-    <CustomInline
-      data-ui="TabList"
-      {...restProps}
-      onKeyDown={handleKeyDown}
-      ref={ref}
-      role="tablist"
-    >
-      {tabs}
-    </CustomInline>
-  )
-})
-TabList.displayName = 'ForwardRef(TabList)'

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

@@ -1,39 +0,0 @@
-import {forwardRef} from 'react'
-
-import {Box, BoxProps} from '../../primitives'
-
-/**
- * @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: TabPanelProps &
-    Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'aria-labelledby' | 'id' | 'role'>,
-  ref: React.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)'

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/toast/index.ts

@@ -1,4 +0,0 @@
-export * from './toast'
-export * from './toastProvider'
-export * from './types'
-export * from './useToast'

package/src/core/components/toast/styles.ts

@@ -1,77 +0,0 @@
-import {getTheme_v2, ThemeColorStateToneKey} from '@sanity/ui/theme'
-import {styled} from 'styled-components'
-
-import {Card, Flex} from '../../primitives'
-import type {ButtonTone} from '../../types'
-
-const LOADING_BAR_HEIGHT = 2
-
-export const STATUS_CARD_TONE = {
-  error: 'critical',
-  warning: 'caution',
-  success: 'positive',
-  info: 'neutral',
-} satisfies {[key: string]: ThemeColorStateToneKey}
-
-export const BUTTON_TONE = {
-  error: 'critical',
-  warning: 'caution',
-  success: 'positive',
-  info: 'neutral',
-} satisfies {[key: string]: ButtonTone}
-
-export const TextBox = styled(Flex)`
-  overflow-x: auto;
-`
-
-export const StyledToast = styled(Card)`
-  pointer-events: all;
-  width: 100%;
-  position: relative;
-  overflow: hidden;
-  overflow: clip;
-
-  &[data-has-duration] {
-    padding-bottom: calc(${LOADING_BAR_HEIGHT}px / 2);
-  }
-`
-
-export const LoadingBar = styled.div`
-  display: flex;
-  position: absolute;
-  bottom: 0px;
-  top: 0px;
-  left: 0px;
-  right: 0px;
-  pointer-events: none;
-  z-index: -1;
-  overflow: hidden;
-  overflow: clip;
-  background: transparent;
-  align-items: flex-end;
-  will-change: opacity;
-`
-
-export const LoadingBarMask = styled(Card)`
-  position: absolute;
-  top: 0;
-  left: -${LOADING_BAR_HEIGHT}px;
-  right: -${LOADING_BAR_HEIGHT}px;
-  bottom: ${LOADING_BAR_HEIGHT}px;
-  z-index: 1;
-`
-
-type LoadingBarProgressProps = Omit<React.ComponentProps<typeof Card>, 'tone'> & {
-  tone: ThemeColorStateToneKey
-}
-export const LoadingBarProgress = styled<React.ComponentType<LoadingBarProgressProps>>(Card)`
-  display: block;
-  height: 100%;
-  width: 100%;
-  transform-origin: 0% 50%;
-  background-color: ${(props) => {
-    const {color} = getTheme_v2(props.theme)
-
-    return color.button.default[props.tone].enabled.bg
-  }};
-`