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

package/src/core/primitives/button/button.tsx

@@ -0,0 +1,196 @@
+import type {
+  BoxStyleProps,
+  ButtonStyleProps,
+  DisplayStyleProps,
+  GapStyleProps,
+  PaddingStyleProps,
+  ResponsiveProp,
+  Width,
+} from '@sanity/ui/css'
+import {button, buttonLoadingBox} from '@sanity/ui/css'
+import type {FontTextSize, Space} from '@sanity/ui/theme'
+import {type ElementType as ReactElementType, isValidElement, type ReactNode} from 'react'
+import {isValidElementType} from 'react-is'
+
+import type {ComponentType, Props} from '../../types/props'
+import {Box} from '../box/box'
+import {Spinner} from '../spinner/spinner'
+import {Text, type TextOwnProps} from '../text/text'
+import type {ButtonTextAlign} from './types'
+
+/** @public */
+export const DEFAULT_BUTTON_ELEMENT = 'button'
+
+/** @public */
+export type ButtonOwnProps = ButtonStyleProps &
+  DisplayStyleProps &
+  GapStyleProps &
+  PaddingStyleProps & {
+    'align'?: BoxStyleProps['alignItems']
+    'data-ui'?: string
+    'disabled'?: boolean
+    'fontSize'?: ResponsiveProp<FontTextSize>
+    'icon'?: ReactElementType | ReactNode
+    'iconRight'?: ReactElementType | ReactNode
+    'justify'?: BoxStyleProps['justifyContent']
+    /** @beta Do not use in production, as this might change.*/
+    'loading'?: boolean
+    'selected'?: boolean
+    /** @deprecated Use `gap` instead. */
+    'space'?: ResponsiveProp<Space>
+    'textAlign'?: ButtonTextAlign
+    'muted'?: boolean
+    'target'?: string
+    'text'?: ReactNode
+    'textOverflow'?: TextOwnProps['textOverflow']
+    'textWeight'?: TextOwnProps['weight']
+    'width'?: ResponsiveProp<Width>
+  }
+
+/** @public */
+export type ButtonElementType = 'a' | 'button' | 'label' | ComponentType
+
+/** @public */
+export type ButtonProps<E extends ButtonElementType = ButtonElementType> = Props<ButtonOwnProps, E>
+
+/** @public */
+export function Button<E extends ButtonElementType = typeof DEFAULT_BUTTON_ELEMENT>(
+  props: ButtonProps<E>,
+) {
+  const {
+    align = 'center',
+    as: Element = DEFAULT_BUTTON_ELEMENT,
+    children,
+    className,
+    disabled,
+    flex,
+    fontSize = 1,
+    gap = props.space ?? props.padding ?? 3,
+    gapX,
+    gapY,
+    icon: IconComponent,
+    iconRight: IconRightComponent,
+    justify = 'center',
+    loading,
+    mode = 'default',
+    padding = 3,
+    paddingX,
+    paddingY,
+    paddingTop,
+    paddingBottom,
+    paddingLeft,
+    paddingRight,
+    radius = 2,
+    selected,
+    space = props.gap ?? props.space ?? props.padding ?? 3, // eslint-disable-line @typescript-eslint/no-unused-vars
+    text,
+    textAlign,
+    textOverflow = 'ellipsis',
+    textWeight = 'medium',
+    tone = 'default',
+    type = 'button',
+    muted = false,
+    width,
+    ...rest
+  } = props as ButtonProps<typeof DEFAULT_BUTTON_ELEMENT>
+
+  let href: string | undefined = undefined
+
+  if ('href' in rest) {
+    href = typeof rest.href === 'string' ? rest.href : href
+    delete rest.href
+  }
+
+  return (
+    <Element
+      data-ui="Button"
+      {...rest}
+      className={button({className, flex, mode, radius, tone, width})}
+      data-disabled={loading || disabled ? '' : undefined}
+      data-selected={selected ? '' : undefined}
+      disabled={Boolean(loading || disabled)}
+      // @ts-expect-error - TODO: fix this
+      href={disabled ? undefined : href}
+      type={type}
+    >
+      {Boolean(loading) && (
+        <Box
+          alignItems="center"
+          as="span"
+          className={buttonLoadingBox()}
+          display="flex"
+          flex={1}
+          justifyContent="center"
+          width="fill"
+        >
+          <Spinner size={fontSize} />
+        </Box>
+      )}
+
+      {(IconComponent || text || IconRightComponent) && (
+        <Box
+          alignItems={align}
+          as="span"
+          display="flex"
+          flex={1}
+          gap={gap}
+          gapX={gapX}
+          gapY={gapY}
+          justifyContent={justify}
+          padding={padding}
+          paddingX={paddingX}
+          paddingY={paddingY}
+          paddingTop={paddingTop}
+          paddingBottom={paddingBottom}
+          paddingLeft={paddingLeft}
+          paddingRight={paddingRight}
+        >
+          {IconComponent && (
+            <Text as="span" flex="none" muted size={fontSize}>
+              {isValidElement(IconComponent) && IconComponent}
+              {isValidElementType(IconComponent) && <IconComponent />}
+            </Text>
+          )}
+
+          {text && (
+            <Box as="span" maxWidth="auto">
+              <Text
+                align={textAlign}
+                as="span"
+                muted={muted}
+                size={fontSize}
+                textOverflow={textOverflow}
+                weight={textWeight}
+              >
+                {text}
+              </Text>
+            </Box>
+          )}
+
+          {IconRightComponent && (
+            <Text as="span" flex="none" muted size={fontSize}>
+              {isValidElement(IconRightComponent) && IconRightComponent}
+              {isValidElementType(IconRightComponent) && <IconRightComponent />}
+            </Text>
+          )}
+        </Box>
+      )}
+
+      {children && (
+        <Box
+          as="span"
+          flex={1}
+          padding={padding}
+          paddingX={paddingX}
+          paddingY={paddingY}
+          paddingTop={paddingTop}
+          paddingBottom={paddingBottom}
+          paddingLeft={paddingLeft}
+          paddingRight={paddingRight}
+        >
+          {children}
+        </Box>
+      )}
+    </Element>
+  )
+}

package/src/core/primitives/button/types.ts

@@ -0,0 +1,22 @@
+import type {ThemeColorButtonModeKey, ThemeColorStateToneKey} from '@sanity/ui/theme'
+
+/**
+ * @public
+ * @deprecated Use `ThemeColorButtonModeKey` instead
+ */
+export type ButtonMode = ThemeColorButtonModeKey
+
+/** @public */
+export type ButtonTextAlign = 'left' | 'right' | 'center'
+
+/**
+ * @public
+ * @deprecated Use `ThemeColorStateToneKey` instead
+ */
+export type ButtonTone = ThemeColorStateToneKey
+
+/**
+ * @public
+ * @deprecated Use `Width` from `@sanity/ui/css` instead.
+ */
+export type ButtonWidth = 'fill'

package/src/core/primitives/card/__workshop__/asButton.tsx

@@ -0,0 +1,107 @@
+import {Box, Card, Container, Flex, Grid, Stack, Text} from '@sanity/ui'
+
+import {WORKSHOP_CARD_TONE_OPTIONS} from '$workshop'
+
+export default function AsButtonStory() {
+  const tones = Object.entries(WORKSHOP_CARD_TONE_OPTIONS)
+
+  return (
+    <Flex align="center" height="fill" justify="center" padding={4} sizing="border">
+      <Container>
+        <Grid columns={3} gap={1}>
+          <Box>
+            <Text align="center" size={1} weight="medium">
+              Enabled
+            </Text>
+            <Stack marginTop={3} gap={1}>
+              {tones.map(([title, tone]) => (
+                <Card
+                  __unstable_focusRing
+                  as="button"
+                  key={tone}
+                  padding={3}
+                  style={{textAlign: 'center'}}
+                  tone={tone}
+                >
+                  <Stack gap={3}>
+                    <Text size={1} weight="medium">
+                      {title}
+                    </Text>
+                    <Text muted size={1}>
+                      Muted
+                    </Text>
+                    <Text size={1}>
+                      <code>Code</code>
+                    </Text>
+                  </Stack>
+                </Card>
+              ))}
+            </Stack>
+          </Box>
+
+          <Box>
+            <Text align="center" size={1} weight="medium">
+              Disabled
+            </Text>
+            <Stack marginTop={3} gap={1}>
+              {tones.map(([title, tone]) => (
+                <Card
+                  __unstable_focusRing
+                  as="button"
+                  disabled
+                  key={tone}
+                  padding={3}
+                  style={{textAlign: 'center'}}
+                  tone={tone}
+                >
+                  <Stack gap={3}>
+                    <Text size={1} weight="medium">
+                      {title}
+                    </Text>
+                    <Text size={1} muted>
+                      Muted
+                    </Text>
+                    <Text size={1}>
+                      <code>Code</code>
+                    </Text>
+                  </Stack>
+                </Card>
+              ))}
+            </Stack>
+          </Box>
+
+          <Box>
+            <Text align="center" size={1} weight="medium">
+              Selected
+            </Text>
+            <Stack marginTop={3} gap={1}>
+              {tones.map(([title, tone]) => (
+                <Card
+                  __unstable_focusRing
+                  as="button"
+                  key={tone}
+                  padding={3}
+                  selected
+                  style={{textAlign: 'center'}}
+                  tone={tone}
+                >
+                  <Stack gap={3}>
+                    <Text size={1} weight="medium">
+                      {title}
+                    </Text>
+                    <Text size={1} muted>
+                      Muted
+                    </Text>
+                    <Text size={1}>
+                      <code>Code</code>
+                    </Text>
+                  </Stack>
+                </Card>
+              ))}
+            </Stack>
+          </Box>
+        </Grid>
+      </Container>
+    </Flex>
+  )
+}

package/src/core/primitives/card/__workshop__/asComponent.tsx

@@ -0,0 +1,27 @@
+import {Card, Flex, Text} from '@sanity/ui'
+import {forwardRef} from 'react'
+
+const CustomLink = forwardRef(function CustomLink(
+  props: {req: string} & Omit<React.HTMLProps<HTMLAnchorElement>, 'as' | 'href'>,
+  ref: React.ForwardedRef<HTMLAnchorElement>,
+): React.JSX.Element {
+  const {children, req, ...rest} = props
+
+  return (
+    <a data-required={req} {...rest} ref={ref}>
+      {children}
+    </a>
+  )
+})
+
+export default function AsComponentStory() {
+  const props = {href: '#'}
+
+  return (
+    <Flex align="center" height="fill" justify="center">
+      <Card as={CustomLink} data-as="a" {...props} padding={3} req="1">
+        <Text size={1}>As component</Text>
+      </Card>
+    </Flex>
+  )
+}

package/src/core/primitives/card/__workshop__/checkered.tsx

@@ -0,0 +1,26 @@
+import {Card, Flex, Stack, Text} from '@sanity/ui'
+import {THEME_COLOR_CARD_TONES} from '@sanity/ui/theme'
+
+export default function CheckeredStory() {
+  return (
+    <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
+      <Stack gap={1}>
+        {THEME_COLOR_CARD_TONES.map((tone) => (
+          <Card
+            __unstable_checkered
+            border
+            key={tone}
+            padding={3}
+            sizing="border"
+            style={{width: 120, height: 60}}
+            tone={tone}
+          >
+            <Text muted size={1}>
+              {tone}
+            </Text>
+          </Card>
+        ))}
+      </Stack>
+    </Flex>
+  )
+}

package/src/core/primitives/card/__workshop__/index.ts

@@ -0,0 +1,18 @@
+import {defineScope} from '@sanity/ui-workshop'
+import {lazy} from 'react'
+
+export default defineScope({
+  name: 'primitives/card',
+  title: 'Card',
+  stories: [
+    {name: 'props', title: 'Props', component: lazy(() => import('./props'))},
+    {name: 'styled', title: 'Styled', component: lazy(() => import('./styled'))},
+    {name: 'interactive', title: 'Interactive', component: lazy(() => import('./interactive'))},
+    {name: 'tones', title: 'Tones', component: lazy(() => import('./tones'))},
+    {name: 'as-button', title: 'As button', component: lazy(() => import('./asButton'))},
+    {name: 'list-nav', title: 'List navigation', component: lazy(() => import('./listNavigation'))},
+    {name: 'checkered', title: 'Checkered', component: lazy(() => import('./checkered'))},
+    {name: 'as-component', title: 'As component', component: lazy(() => import('./asComponent'))},
+    {name: 'selected', title: 'Selected', component: lazy(() => import('./selected'))},
+  ],
+})

package/src/core/primitives/card/__workshop__/interactive.tsx

@@ -0,0 +1,29 @@
+import {Card, Flex, Stack, Text} from '@sanity/ui'
+import {useBoolean} from '@sanity/ui-workshop'
+
+export default function InteractiveCardStory() {
+  const pressed = useBoolean('Pressed', false)
+  const selected = useBoolean('Selected', false)
+
+  return (
+    <Flex align="center" height="fill" justify="center">
+      <div>
+        <Card
+          __unstable_focusRing
+          as="button"
+          padding={3}
+          pressed={pressed}
+          selected={selected}
+          tabIndex={0}
+        >
+          <Stack gap={3}>
+            <Text>
+              Text <code>Code</code>
+            </Text>
+            <Text muted>Muted</Text>
+          </Stack>
+        </Card>
+      </div>
+    </Flex>
+  )
+}

package/src/core/primitives/card/__workshop__/listNavigation.tsx

@@ -0,0 +1,78 @@
+import {Box, Card, Flex, Stack, Text} from '@sanity/ui'
+
+export default function ListNavigationStory() {
+  return (
+    <Box height="fill" padding={[3, 4, 5]} sizing="border">
+      <Card height="fill" shadow={1}>
+        <Flex height="fill">
+          <Card flex={1} padding={2}>
+            <List1 />
+          </Card>
+          <Card borderLeft flex={1} padding={2}>
+            <List2 />
+          </Card>
+        </Flex>
+      </Card>
+    </Box>
+  )
+}
+
+function List1() {
+  return (
+    <Stack gap={1}>
+      <Card __unstable_focusRing as="a" href="#" padding={2} radius={2}>
+        <Preview />
+      </Card>
+      <Card __unstable_focusRing as="a" href="#" padding={2} pressed radius={2}>
+        <Preview />
+      </Card>
+      <Card __unstable_focusRing as="a" href="#" padding={2} radius={2}>
+        <Preview />
+      </Card>
+      <Card __unstable_focusRing as="a" href="#" padding={2} radius={2}>
+        <Preview />
+      </Card>
+      <Card __unstable_focusRing as="a" href="#" padding={2} radius={2}>
+        <Preview />
+      </Card>
+    </Stack>
+  )
+}
+
+function List2() {
+  return (
+    <Stack gap={1}>
+      <Card __unstable_focusRing as="a" href="#" padding={2} radius={2}>
+        <Preview />
+      </Card>
+      <Card __unstable_focusRing as="a" href="#" padding={2} pressed radius={2} selected>
+        <Preview />
+      </Card>
+      <Card __unstable_focusRing as="a" href="#" padding={2} radius={2}>
+        <Preview />
+      </Card>
+      <Card __unstable_focusRing as="a" href="#" padding={2} radius={2}>
+        <Preview />
+      </Card>
+      <Card __unstable_focusRing as="a" href="#" padding={2} radius={2}>
+        <Preview />
+      </Card>
+    </Stack>
+  )
+}
+
+function Preview() {
+  return (
+    <Flex align="center" gap={2}>
+      <Box muted radius="full" style={{width: 33, height: 33}} />
+      <Stack flex={1} gap={2}>
+        <Text size={1} weight="medium">
+          Preview
+        </Text>
+        <Text muted size={1}>
+          Preview
+        </Text>
+      </Stack>
+    </Flex>
+  )
+}

package/src/core/primitives/card/__workshop__/props.tsx

@@ -0,0 +1,52 @@
+import {Card, Flex, Stack, Text} from '@sanity/ui'
+import {useAction, useBoolean, useSelect} from '@sanity/ui-workshop'
+
+import {
+  WORKSHOP_CARD_AS_OPTIONS,
+  WORKSHOP_CARD_TONE_OPTIONS,
+  WORKSHOP_RADIUS_OPTIONS,
+  WORKSHOP_SHADOW_OPTIONS,
+  WORKSHOP_SPACE_OPTIONS,
+} from '$workshop'
+
+export default function PropsStory() {
+  const as = useSelect('As', WORKSHOP_CARD_AS_OPTIONS, 'div')
+  const border = useBoolean('Border', false)
+  const checkered = useBoolean('Checkered', false)
+  const muted = useBoolean('Muted', false)
+  const padding = useSelect('Padding', WORKSHOP_SPACE_OPTIONS, 3)
+  const pressed = useBoolean('Pressed', false)
+  const radius = useSelect('Radius', WORKSHOP_RADIUS_OPTIONS, 0)
+  const selected = useBoolean('Selected', false)
+  const shadow = useSelect('Shadow', WORKSHOP_SHADOW_OPTIONS, 0)
+  const tone = useSelect('Tone', WORKSHOP_CARD_TONE_OPTIONS, 'default')
+
+  return (
+    <Flex align="center" height="fill" justify="center" padding={4} sizing="border">
+      <Card
+        __unstable_checkered={checkered}
+        as={as}
+        border={border}
+        muted={muted}
+        onClick={useAction('onClick')}
+        padding={padding}
+        pressed={pressed}
+        radius={radius}
+        selected={selected}
+        shadow={shadow}
+        tone={tone}
+      >
+        <Stack gap={3}>
+          <Text size={1}>
+            Card with <code>padding={padding}</code>, <code>tone={tone}</code>, and{' '}
+            <code>shadow={shadow}</code>.
+          </Text>
+          <Text size={1}>
+            Text with {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
+            <a href="#">link</a>.
+          </Text>
+        </Stack>
+      </Card>
+    </Flex>
+  )
+}

package/src/core/primitives/card/__workshop__/selected.tsx

@@ -0,0 +1,62 @@
+import {EditIcon, PublishIcon} from '@sanity/icons'
+import {Box, Card, Container, Flex, Inline, Stack, Text} from '@sanity/ui'
+import {useBoolean} from '@sanity/ui-workshop'
+
+export default function SelectedStory() {
+  const disabled = useBoolean('Disabled', false)
+  const selected = useBoolean('Selected', false)
+
+  return (
+    <Flex align="center" height="fill" justify="center" padding={4} sizing="border">
+      <Container width={0}>
+        <Stack gap={1}>
+          <Card
+            __unstable_focusRing
+            as="button"
+            disabled={disabled}
+            padding={3}
+            radius={2}
+            selected={selected}
+          >
+            <Preview selected={selected} />
+          </Card>
+
+          <Card
+            __unstable_focusRing
+            as="button"
+            disabled={disabled}
+            padding={3}
+            radius={2}
+            selected={selected}
+            tone="critical"
+          >
+            <Preview selected={selected} />
+          </Card>
+        </Stack>
+      </Container>
+    </Flex>
+  )
+}
+
+function Preview({selected}: {selected: boolean}) {
+  return (
+    <Flex>
+      <Box flex={1}>
+        <Text size={1}>Title</Text>
+      </Box>
+      <Inline gap={3}>
+        <Text data-selected={selected ? '' : undefined} muted size={1} weight="medium">
+          <EditIcon />
+        </Text>
+        <Text
+          data-selected={selected ? '' : undefined}
+          muted
+          size={1}
+          // $tone={rootTheme.tone === 'default' ? 'positive' : 'default'}
+        >
+          <PublishIcon />
+        </Text>
+      </Inline>
+    </Flex>
+  )
+}

package/src/core/primitives/card/__workshop__/tones.tsx

@@ -0,0 +1,27 @@
+import {Card, Container, Flex, Stack, Text} from '@sanity/ui'
+import {THEME_COLOR_CARD_TONES} from '@sanity/ui/theme'
+
+export default function TonesStory() {
+  return (
+    <Card height="fill" tone="transparent">
+      <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
+        <Container width={0}>
+          <Stack gap={3}>
+            {THEME_COLOR_CARD_TONES.map((tone) => (
+              <Card
+                key={tone}
+                padding={3}
+                radius={2}
+                shadow={2}
+                style={{textAlign: 'center'}}
+                tone={tone}
+              >
+                <Text size={1}>{tone}</Text>
+              </Card>
+            ))}
+          </Stack>
+        </Container>
+      </Flex>
+    </Card>
+  )
+}