@sanity/ui 3.0.0-static.8 → 3.0.0

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

@@ -0,0 +1,64 @@
+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/skeleton/skeleton.tsx

@@ -0,0 +1,57 @@
+import {forwardRef, useEffect, useState} from 'react'
+import {styled} from 'styled-components'
+
+import {useArrayProp} from '../../hooks'
+import {Box, BoxProps, ResponsiveRadiusProps} from '../../primitives'
+import {responsiveRadiusStyle, ResponsiveRadiusStyleProps} from '../../styles/internal'
+import {skeletonStyle} from './styles'
+
+const StyledSkeleton = styled(Box)<
+  {$animated: boolean; $visible: boolean} & ResponsiveRadiusStyleProps
+>(responsiveRadiusStyle, skeletonStyle)
+
+/**
+ * This API might change. DO NOT USE IN PRODUCTION.
+ * @beta
+ */
+export interface SkeletonProps extends ResponsiveRadiusProps, Omit<BoxProps, 'children'> {
+  animated?: boolean
+  delay?: number
+}
+
+/**
+ * This API might change. DO NOT USE IN PRODUCTION.
+ * @beta
+ */
+export const Skeleton = forwardRef(function Skeleton(
+  props: SkeletonProps & React.HTMLProps<HTMLDivElement>,
+  ref: React.Ref<HTMLDivElement>,
+) {
+  const {animated = false, 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 (
+    <StyledSkeleton
+      {...restProps}
+      $animated={animated}
+      $radius={useArrayProp(radius)}
+      $visible={visible}
+      ref={ref}
+    />
+  )
+})
+Skeleton.displayName = 'ForwardRef(Skeleton)'

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

@@ -0,0 +1,50 @@
+import {css, keyframes} from 'styled-components'
+
+const keyframe = keyframes`
+  0% {
+    background-position: 100%;
+  }
+  100% {
+    background-position: -100%;
+  }
+`
+
+const animation = css`
+  background-image: linear-gradient(
+    to right,
+    var(--card-skeleton-color-from),
+    var(--card-skeleton-color-to),
+    var(--card-skeleton-color-from),
+    var(--card-skeleton-color-from),
+    var(--card-skeleton-color-from)
+  );
+  background-position: 100%;
+  background-size: 200% 100%;
+  background-attachment: fixed;
+  animation-name: ${keyframe};
+  animation-timing-function: ease-in-out;
+  animation-iteration-count: infinite;
+  animation-duration: 2000ms;
+`
+
+/**
+ * This API might change. DO NOT USE IN PRODUCTION.
+ * @beta
+ */
+export const skeletonStyle = css<{$animated: boolean; $visible: boolean}>`
+  opacity: ${({$visible}) => ($visible ? 1 : 0)};
+  transition: opacity 200ms ease-in;
+
+  @media screen and (prefers-reduced-motion: no-preference) {
+    ${({$animated}) =>
+      $animated
+        ? animation
+        : css`
+            background-color: var(--card-skeleton-color-from);
+          `}
+  }
+
+  @media screen and (prefers-reduced-motion: reduce) {
+    background-color: var(--card-skeleton-color-from);
+  }
+`

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

@@ -0,0 +1,123 @@
+import {getTheme_v2, ThemeFontKey} from '@sanity/ui/theme'
+import {forwardRef} from 'react'
+import {styled} from 'styled-components'
+
+import {useArrayProp} from '../../hooks'
+import {_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 = useArrayProp(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 = useArrayProp(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 = useArrayProp(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 = useArrayProp(size)
+
+  return <StyledSkeleton {...restProps} $size={$size} ref={ref} $style="code" />
+})
+CodeSkeleton.displayName = 'ForwardRef(CodeSkeleton)'

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

@@ -0,0 +1,101 @@
+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

@@ -0,0 +1,70 @@
+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

@@ -0,0 +1,39 @@
+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__/toast.tsx

@@ -0,0 +1,26 @@
+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/styles.ts

@@ -0,0 +1,77 @@
+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
+  }};
+`