@sanity/ui 3.0.0-static.4 → 3.0.0-static.41

package/src/core/primitives/box/box.tsx

@@ -0,0 +1,215 @@
+import {box, type BoxStyleProps} from '@sanity/ui/css'
+
+import type {ComponentType, Props} from '../../types'
+
+/** @public */
+export const DEFAULT_BOX_ELEMENT = 'div'
+
+/** @public */
+export type BoxOwnProps = BoxStyleProps
+
+/** @public */
+export type BoxElementType =
+  | 'a'
+  | 'article'
+  | 'aside'
+  | 'blockquote'
+  | 'body'
+  | 'button'
+  | 'details'
+  | 'div'
+  | 'header'
+  | 'fieldset'
+  | 'figure'
+  | 'figcaption'
+  | 'footer'
+  | 'form'
+  | 'html'
+  | 'iframe'
+  | 'kbd'
+  | 'label'
+  | 'legend'
+  | 'li'
+  | 'main'
+  | 'nav'
+  | 'ol'
+  | 'pre'
+  | 'section'
+  | 'span'
+  | 'summary'
+  | 'ul'
+  | ComponentType
+
+/** @public */
+export type BoxProps<E extends BoxElementType = BoxElementType> = Props<BoxOwnProps, E>
+
+/**
+ * The `Box` component is a basic layout wrapper component which provides utility properties
+ * for flex, margins and padding.
+ *
+ * @public
+ */
+export function Box<E extends BoxElementType = typeof DEFAULT_BOX_ELEMENT>(
+  props: BoxProps<E>,
+): React.JSX.Element {
+  const {
+    alignItems,
+    as: Element = DEFAULT_BOX_ELEMENT,
+    // autoCols,
+    // autoFlow,
+    // autoRows,
+    border = false,
+    borderTop,
+    borderRight,
+    borderBottom,
+    borderLeft,
+    className,
+    children,
+    // column,
+    // columnStart,
+    // columnEnd,
+    // columns,
+    display = 'block',
+    flex,
+    flexDirection,
+    flexWrap,
+    gap,
+    gapX,
+    gapY,
+    gridAutoColumns,
+    gridAutoFlow,
+    gridAutoRows,
+    gridColumn,
+    gridColumnEnd,
+    gridColumnStart,
+    gridRow,
+    gridRowEnd,
+    gridRowStart,
+    gridTemplateColumns,
+    gridTemplateRows,
+    height,
+    inset,
+    insetBottom,
+    insetLeft,
+    insetRight,
+    insetTop,
+    justifyContent,
+    margin = 0,
+    marginX,
+    marginY,
+    marginTop,
+    marginRight,
+    marginBottom,
+    marginLeft,
+    maxWidth,
+    minHeight = 0,
+    minWidth = 0,
+    muted,
+    outline,
+    overflow,
+    overflowX,
+    overflowY,
+    padding = 0,
+    paddingX,
+    paddingY,
+    paddingTop,
+    paddingRight,
+    paddingBottom,
+    paddingLeft,
+    pointerEvents,
+    position,
+    radius,
+    // row,
+    // rows,
+    // rowStart,
+    // rowEnd,
+    shadow,
+    sizing = 'border',
+    textAlign,
+    width,
+    ...rest
+  } = props as BoxProps<typeof DEFAULT_BOX_ELEMENT>
+
+  return (
+    <Element
+      data-ui="Box"
+      {...rest}
+      className={box({
+        className,
+        alignItems,
+        // autoCols,
+        // autoFlow,
+        // autoRows,
+        border,
+        borderTop,
+        borderRight,
+        borderBottom,
+        borderLeft,
+        // column,
+        // columnStart,
+        // columnEnd,
+        // columns,
+        display,
+        flex,
+        flexDirection,
+        flexWrap,
+        gap,
+        gapX,
+        gapY,
+        gridAutoColumns,
+        gridAutoFlow,
+        gridAutoRows,
+        gridColumn,
+        gridColumnEnd,
+        gridColumnStart,
+        gridRow,
+        gridRowEnd,
+        gridRowStart,
+        gridTemplateColumns,
+        gridTemplateRows,
+        height,
+        inset,
+        insetBottom,
+        insetLeft,
+        insetRight,
+        insetTop,
+        justifyContent,
+        margin,
+        marginX,
+        marginY,
+        marginTop,
+        marginRight,
+        marginBottom,
+        marginLeft,
+        maxWidth,
+        minHeight,
+        minWidth,
+        muted,
+        outline,
+        overflow,
+        overflowX,
+        overflowY,
+        padding,
+        paddingX,
+        paddingY,
+        paddingTop,
+        paddingRight,
+        paddingBottom,
+        paddingLeft,
+        pointerEvents,
+        position,
+        radius,
+        // row,
+        // rows,
+        // rowStart,
+        // rowEnd,
+        shadow,
+        sizing,
+        textAlign,
+        width,
+      })}
+    >
+      {children}
+    </Element>
+  )
+}

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

@@ -0,0 +1,27 @@
+import {Button, Flex, Grid, Hotkeys, Stack, Text} from '@sanity/ui'
+import {BUTTON_MODES, ELEMENT_TONES} from '@sanity/ui/theme'
+
+export default function CustomStory(): React.JSX.Element {
+  return (
+    <Flex align="center" height="fill" justify="center" padding={4} sizing="border">
+      <Stack gap={2}>
+        {BUTTON_MODES.map((mode) => (
+          <Grid gridTemplateColumns={7} gap={1} key={mode}>
+            {ELEMENT_TONES.map((tone) => (
+              <Button key={tone} mode={mode} padding={3} tone={tone}>
+                <Stack gap={2}>
+                  <Text>Text</Text>
+                  <Text muted>Muted</Text>
+                  <Text>
+                    <code>Code</code>
+                  </Text>
+                  <Hotkeys keys={['Cmd', 'C']} />
+                </Stack>
+              </Button>
+            ))}
+          </Grid>
+        ))}
+      </Stack>
+    </Flex>
+  )
+}

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

@@ -0,0 +1,30 @@
+import {RocketIcon} from '@sanity/icons'
+import {Button, Flex, Inline} from '@sanity/ui'
+
+export default function CustomIconsStory(): React.JSX.Element {
+  return (
+    <Flex align="center" height="fill" justify="center">
+      <Inline gap={1}>
+        <Button fontSize={1} gap={2} icon={RocketIcon} padding={2} text="Rocket" />
+        <Button fontSize={1} gap={2} icon={CustomIcon} padding={2} text="Heart" />
+      </Inline>
+    </Flex>
+  )
+}
+
+function CustomIcon() {
+  return (
+    <svg
+      stroke="currentColor"
+      fill="currentColor"
+      strokeWidth="0"
+      viewBox="0 0 24 24"
+      height="1em"
+      width="1em"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path fill="none" d="M0 0h24v24H0z"></path>
+      <path d="M16.5 3c-1.74 0-3.41.81-4.5 2.09C10.91 3.81 9.24 3 7.5 3 4.42 3 2 5.42 2 8.5c0 3.78 3.4 6.86 8.55 11.54L12 21.35l1.45-1.32C18.6 15.36 22 12.28 22 8.5 22 5.42 19.58 3 16.5 3zm-4.4 15.55l-.1.1-.1-.1C7.14 14.24 4 11.39 4 8.5 4 6.5 5.5 5 7.5 5c1.54 0 3.04.99 3.57 2.36h1.87C13.46 5.99 14.96 5 16.5 5c2 0 3.5 1.5 3.5 3.5 0 2.89-3.14 5.74-7.9 10.05z"></path>
+    </svg>
+  )
+}

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

@@ -0,0 +1,54 @@
+import {SquareIcon} from '@sanity/icons'
+import {Button, Card, Container, Grid, Stack, Text} from '@sanity/ui'
+import {useBoolean} from '@sanity/ui-workshop'
+
+const GAP = 4
+const COLUMNS = 3
+
+const DEFAULT_PROPS = {
+  icon: SquareIcon,
+  iconRight: SquareIcon,
+} as const
+
+export default function DisabledButtonStory(): React.JSX.Element {
+  const muted = useBoolean('Muted', false)
+
+  return (
+    <Card padding={5}>
+      <Container width={2}>
+        <Stack gap={4}>
+          <Grid gridTemplateColumns={COLUMNS} gap={GAP}>
+            <Text size={1} weight="semibold">
+              Default
+            </Text>
+            <Text size={1} weight="semibold">
+              Ghost
+            </Text>
+            <Text size={1} weight="semibold">
+              Bleed
+            </Text>
+          </Grid>
+
+          <Stack gap={2}>
+            <Grid gridTemplateColumns={COLUMNS} gap={GAP}>
+              <Stack gap={2}>
+                <Button {...DEFAULT_PROPS} mode="default" muted={muted} text="Enabled" />
+                <Button {...DEFAULT_PROPS} disabled mode="default" muted={muted} text="Disabled" />
+              </Stack>
+
+              <Stack gap={2}>
+                <Button {...DEFAULT_PROPS} mode="ghost" muted={muted} text="Enabled" />
+                <Button {...DEFAULT_PROPS} disabled mode="ghost" muted={muted} text="Disabled" />
+              </Stack>
+
+              <Stack gap={2}>
+                <Button {...DEFAULT_PROPS} mode="bleed" muted={muted} text="Enabled" />
+                <Button {...DEFAULT_PROPS} mode="bleed" disabled muted={muted} text="Disabled" />
+              </Stack>
+            </Grid>
+          </Stack>
+        </Stack>
+      </Container>
+    </Card>
+  )
+}

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

@@ -0,0 +1,66 @@
+import type {WorkshopScope} from '@sanity/ui-workshop'
+import {lazy} from 'react'
+
+const scope: WorkshopScope = {
+  name: 'primitives/button',
+  title: 'Button',
+  stories: [
+    {
+      name: 'props',
+      title: 'Props',
+      component: lazy(() => import('./props')),
+    },
+    {
+      name: 'styled-1',
+      title: 'Styled #1',
+      component: lazy(() => import('./styled1')),
+    },
+    {
+      name: 'styled-2',
+      title: 'Styled #2',
+      component: lazy(() => import('./styled2')),
+    },
+    {
+      name: 'stacked',
+      title: 'Stacked',
+      component: lazy(() => import('./stacked')),
+    },
+    {
+      name: 'custom',
+      title: 'Custom',
+      component: lazy(() => import('./custom')),
+    },
+    {
+      name: 'mixed-children',
+      title: 'Mixed children',
+      component: lazy(() => import('./mixedChildren')),
+    },
+    {
+      name: 'upload-button',
+      title: 'Upload button',
+      component: lazy(() => import('./uploadButton')),
+    },
+    {
+      name: 'sanity-upload-button-workaround',
+      title: 'SanityUploadButtonWorkaroundStory',
+      component: lazy(() => import('./sanityUploadButton')),
+    },
+    {
+      name: 'custom-icons',
+      title: 'Custom icons',
+      component: lazy(() => import('./customIcons')),
+    },
+    {
+      name: 'disabled',
+      title: 'Disabled',
+      component: lazy(() => import('./disabled')),
+    },
+    {
+      name: 'text-overflow',
+      title: 'Text overflow',
+      component: lazy(() => import('./textOverflow')),
+    },
+  ],
+}
+
+export default scope

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

@@ -0,0 +1,12 @@
+import {AddIcon} from '@sanity/icons'
+import {Button, Flex} from '@sanity/ui'
+
+export default function MixedChildrenStory(): React.JSX.Element {
+  return (
+    <Flex align="center" height="fill" justify="center">
+      <Button fontSize={[2, 2, 3]} icon={AddIcon} mode="ghost" padding={[3, 3, 4]} text="Create">
+        <span style={{display: 'none'}}>test</span>
+      </Button>
+    </Flex>
+  )
+}

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

@@ -0,0 +1,55 @@
+import {icons} from '@sanity/icons'
+import {Button, Flex} from '@sanity/ui'
+import {useAction, useBoolean, useSelect, useText} from '@sanity/ui-workshop'
+
+import {
+  WORKSHOP_BUTTON_MODE_OPTIONS,
+  WORKSHOP_BUTTON_TEXT_ALIGN_OPTIONS,
+  WORKSHOP_BUTTON_TONE_OPTIONS,
+  WORKSHOP_FLEX_JUSTIFY_OPTIONS,
+  WORKSHOP_ICON_SYMBOL_OPTIONS,
+  WORKSHOP_SPACE_OPTIONS,
+  WORKSHOP_TEXT_FONT_SIZE_OPTIONS,
+  WORKSHOP_TEXT_WEIGHT_OPTIONS,
+} from '$workshop'
+
+export default function ButtonStory(): React.JSX.Element {
+  const disabled = useBoolean('Disabled')
+  const fontSize = useSelect('Font size', WORKSHOP_TEXT_FONT_SIZE_OPTIONS)
+  const gap = useSelect('Gap', WORKSHOP_SPACE_OPTIONS)
+  const icon = useSelect('Icon', WORKSHOP_ICON_SYMBOL_OPTIONS)
+  const iconRight = useSelect('Icon (right)', WORKSHOP_ICON_SYMBOL_OPTIONS)
+  const justify = useSelect('Justify', WORKSHOP_FLEX_JUSTIFY_OPTIONS)
+  const loading = useBoolean('Loading')
+  const mode = useSelect('Mode', WORKSHOP_BUTTON_MODE_OPTIONS)
+  const paddingX = useSelect('Padding X', WORKSHOP_SPACE_OPTIONS)
+  const paddingY = useSelect('Padding Y', WORKSHOP_SPACE_OPTIONS)
+  const selected = useBoolean('Selected')
+  const tone = useSelect('Tone', WORKSHOP_BUTTON_TONE_OPTIONS)
+  const textAlign = useSelect('Text align', WORKSHOP_BUTTON_TEXT_ALIGN_OPTIONS)
+  const textProp = useText('Text', 'Label')
+  const textWeight = useSelect('Text weight', WORKSHOP_TEXT_WEIGHT_OPTIONS)
+
+  return (
+    <Flex align="center" height="fill" justify="center">
+      <Button
+        disabled={disabled}
+        fontSize={fontSize}
+        gap={gap}
+        icon={icon && icons[icon]}
+        iconRight={iconRight && icons[iconRight]}
+        justify={justify}
+        loading={loading}
+        mode={mode}
+        onClick={useAction('onClick')}
+        paddingX={paddingX}
+        paddingY={paddingY}
+        selected={selected}
+        textAlign={textAlign}
+        text={textProp}
+        textWeight={textWeight}
+        tone={tone}
+      />
+    </Flex>
+  )
+}

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

@@ -0,0 +1,36 @@
+import {UploadIcon} from '@sanity/icons'
+import {Button, Flex} from '@sanity/ui'
+import {styled} from 'styled-components'
+
+const SanityUploadButton = styled(Button).attrs({forwardedAs: 'label'})`
+  & input {
+    appearance: none;
+    overflow: hidden;
+    overflow: clip;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    position: absolute;
+    max-width: 0;
+    width: -webkit-fill-available;
+    width: stretch;
+  }
+
+  & > span:nth-child(2) {
+    width: 0;
+    flex: none;
+    padding: 0;
+  }
+`
+
+export default function SanityUploadButtonWorkaroundStory(): React.JSX.Element {
+  return (
+    <Flex align="center" height="fill" justify="center">
+      <SanityUploadButton htmlFor="file" icon={UploadIcon} tabIndex={0} text="Upload">
+        <input type="file" />
+      </SanityUploadButton>
+    </Flex>
+  )
+}

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

@@ -0,0 +1,58 @@
+import {icons} from '@sanity/icons'
+import {Box, Button, Card, Container, Flex, Stack} from '@sanity/ui'
+import {useAction, useBoolean, useSelect} from '@sanity/ui-workshop'
+
+import {
+  WORKSHOP_BUTTON_MODE_OPTIONS,
+  WORKSHOP_BUTTON_TONE_OPTIONS,
+  WORKSHOP_FLEX_JUSTIFY_OPTIONS,
+  WORKSHOP_ICON_SYMBOL_OPTIONS,
+  WORKSHOP_SPACE_OPTIONS,
+  WORKSHOP_TEXT_FONT_SIZE_OPTIONS,
+} from '$workshop'
+
+export default function StackedStory(): React.JSX.Element {
+  const tones = Object.entries(WORKSHOP_BUTTON_TONE_OPTIONS)
+  const disabled = useBoolean('Disabled', false)
+  const fontSize = useSelect('Font size', WORKSHOP_TEXT_FONT_SIZE_OPTIONS, 2)
+  const gap = useSelect('Gap', WORKSHOP_SPACE_OPTIONS, 3)
+  const icon = useSelect('Icon', WORKSHOP_ICON_SYMBOL_OPTIONS, 'add-circle')
+  const iconRight = useSelect('Icon (right)', WORKSHOP_ICON_SYMBOL_OPTIONS)
+  const justify = useSelect('Justify', WORKSHOP_FLEX_JUSTIFY_OPTIONS, 'center')
+  const mode = useSelect('Mode', WORKSHOP_BUTTON_MODE_OPTIONS, 'default')
+  const onClick = useAction('onClick')
+  const paddingX = useSelect('Padding X', WORKSHOP_SPACE_OPTIONS, 3)
+  const paddingY = useSelect('Padding Y', WORKSHOP_SPACE_OPTIONS, 3)
+  const selected = useBoolean('Selected', false)
+
+  return (
+    <Card height="fill">
+      <Flex align="center" height="fill" justify="center">
+        <Container width={0} style={{textAlign: 'center'}}>
+          <Box padding={4}>
+            <Stack gap={1}>
+              {tones.map(([title, tone]) => (
+                <Button
+                  disabled={disabled}
+                  fontSize={fontSize}
+                  gap={gap}
+                  icon={icon && icons[icon]}
+                  iconRight={iconRight && icons[iconRight]}
+                  justify={justify}
+                  key={tone}
+                  mode={mode}
+                  onClick={onClick}
+                  paddingX={paddingX}
+                  paddingY={paddingY}
+                  selected={selected}
+                  text={title}
+                  tone={tone}
+                />
+              ))}
+            </Stack>
+          </Box>
+        </Container>
+      </Flex>
+    </Card>
+  )
+}

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

@@ -0,0 +1,17 @@
+import {Button, Flex} from '@sanity/ui'
+import {styled} from 'styled-components'
+
+const StyledButton1 = styled.a`
+  &:hover {
+    background-color: red;
+    box-shadow: none;
+  }
+`
+
+export default function StyledButton1Story(): React.JSX.Element {
+  return (
+    <Flex align="center" height="fill" justify="center">
+      <Button as={StyledButton1} href="#" text="Test" />
+    </Flex>
+  )
+}

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

@@ -0,0 +1,19 @@
+import {Button, Flex} from '@sanity/ui'
+import {styled} from 'styled-components'
+
+const StyledButton2 = styled(Button)<{$color?: boolean}>`
+  &:hover {
+    background-color: red;
+    box-shadow: none;
+  }
+`
+
+export default function StyledButton2Story(): React.JSX.Element {
+  const props = {href: '#', text: 'Test'}
+
+  return (
+    <Flex align="center" height="fill" justify="center">
+      <StyledButton2 $color forwardedAs="a" {...props} />
+    </Flex>
+  )
+}

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

@@ -0,0 +1,13 @@
+import {Button, Flex} from '@sanity/ui'
+import {useText} from '@sanity/ui-workshop'
+
+export default function TextOverflowStory(): React.JSX.Element {
+  const text = useText('Text', 'Long text that should overflow')
+
+  return (
+    <Flex gap={1} padding={4}>
+      <Button flex={1} text={text} />
+      <Button mode="bleed" text="Cancel" />
+    </Flex>
+  )
+}

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

@@ -0,0 +1,29 @@
+import {Button, Flex} from '@sanity/ui'
+import {useCallback, useRef} from 'react'
+
+export default function UploadButtonStory(): React.JSX.Element {
+  const inputRef = useRef<HTMLInputElement | null>(null)
+
+  const handleKeyDown = useCallback((event: React.KeyboardEvent) => {
+    if (event.key === 'Enter' || event.key === ' ') {
+      inputRef.current?.click()
+    }
+  }, [])
+
+  return (
+    <Flex align="center" height="fill" justify="center">
+      <Button
+        as="label"
+        htmlFor="file"
+        onKeyDown={handleKeyDown}
+        tabIndex={0}
+        text={
+          <>
+            Upload
+            <input id="file" ref={inputRef} type="file" style={{display: 'none'}} />
+          </>
+        }
+      />
+    </Flex>
+  )
+}

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

@@ -0,0 +1,30 @@
+import {AddIcon} from '@sanity/icons'
+import {screen} from '@testing-library/react'
+import {describe, expect, it} from 'vitest'
+import {axe} from 'vitest-axe'
+
+import {render} from '$test/utils'
+
+import {Button} from './button'
+
+describe('atoms/button', () => {
+  it('Axe: should have no violations', async () => {
+    const lightResult = render(<Button icon={AddIcon} text="Label" tone="positive" />, {
+      scheme: 'light',
+    })
+
+    expect(await axe(lightResult.container.outerHTML)).toHaveNoViolations()
+
+    const darkResult = render(<Button icon={AddIcon} text="Label" tone="positive" />, {
+      scheme: 'dark',
+    })
+
+    expect(await axe(darkResult.container.outerHTML)).toHaveNoViolations()
+  })
+
+  it('should render text', () => {
+    render(<Button text="Button text" />)
+
+    expect(screen.getByText('Button text')).toBeInTheDocument()
+  })
+})