@sanity/ui 1.0.0-beta.9 → 1.0.0

package/src/primitives/badge/styles.ts

@@ -0,0 +1,20 @@
+import {CSSObject} from 'styled-components'
+import {ThemeProps} from '../../styles'
+import {BadgeStyleProps} from './types'
+
+export function badgeStyle(props: BadgeStyleProps & ThemeProps): CSSObject {
+  const {$mode, $tone, theme} = props
+  const palette = theme.sanity.color[$mode === 'outline' ? 'muted' : 'solid']
+  const color = palette[$tone] || palette.default
+
+  return {
+    backgroundColor: color.enabled.bg,
+    color: color.enabled.fg,
+    boxShadow: `inset 0 0 0 1px ${color.enabled.border}`,
+    cursor: 'default',
+
+    '&:not([hidden])': {
+      display: 'inline-block',
+    },
+  }
+}

package/src/primitives/badge/types.ts

@@ -0,0 +1,9 @@
+import {BadgeMode, BadgeTone} from '../../types'
+
+/**
+ * @internal
+ */
+export interface BadgeStyleProps {
+  $mode: BadgeMode
+  $tone: BadgeTone
+}

package/src/primitives/box/__workshop__/.eslintrc

@@ -0,0 +1,5 @@
+{
+  "rules": {
+    "@typescript-eslint/explicit-module-boundary-types": "off"
+  }
+}

package/src/primitives/box/__workshop__/index.ts

@@ -0,0 +1,19 @@
+import {defineScope} from '@sanity/ui-workshop'
+import {lazy} from 'react'
+
+export default defineScope({
+  name: 'primitives/box',
+  title: 'Box',
+  stories: [
+    {
+      name: 'props',
+      title: 'Props',
+      component: lazy(() => import('./props')),
+    },
+    {
+      name: 'responsive',
+      title: 'Responsive',
+      component: lazy(() => import('./responsive')),
+    },
+  ],
+})

package/src/primitives/box/__workshop__/props.tsx

@@ -0,0 +1,19 @@
+import {Box, Card, Text} from '@sanity/ui'
+import {useAction, useSelect} from '@sanity/ui-workshop'
+import {WORKSHOP_SPACE_OPTIONS} from '../../../__workshop__/constants'
+
+export default function PropsStory() {
+  const padding = useSelect('Padding', WORKSHOP_SPACE_OPTIONS, 0, 'Props')
+
+  return (
+    <Box padding={[4, 5, 6]}>
+      <Card border tone="inherit">
+        <Box onClick={useAction('onClick')} padding={padding}>
+          <Text>
+            Box with <code>padding={padding}</code>
+          </Text>
+        </Box>
+      </Card>
+    </Box>
+  )
+}

package/src/primitives/box/__workshop__/responsive.tsx

@@ -0,0 +1,20 @@
+import {Box, Text} from '@sanity/ui'
+
+export default function ResponsiveStory() {
+  return (
+    <Box padding={[4, 5, 6]}>
+      <Box
+        id="responsive-box"
+        display={['none', 'block', 'none', 'block', 'none', 'block', 'none']}
+        flex={[1, 2, 3, 4, 5, 6, 7]}
+        padding={3}
+        sizing={['content', 'border', 'content', 'border', 'content', 'border', 'content']}
+        style={{outline: '1px solid var(--card-border-color)'}}
+      >
+        <Text align="center" muted>
+          This is a box with responsive props
+        </Text>
+      </Box>
+    </Box>
+  )
+}

package/src/primitives/box/box.tsx

@@ -0,0 +1,125 @@
+import {forwardRef} from 'react'
+import styled from 'styled-components'
+import {useArrayProp} from '../../hooks'
+import {
+  boxStyle,
+  flexItemStyle,
+  FlexItemStyleProps,
+  responsiveBoxStyle,
+  ResponsiveBoxStyleProps,
+  responsiveGridItemStyle,
+  ResponsiveGridItemStyleProps,
+  responsivePaddingStyle,
+  ResponsivePaddingStyleProps,
+  responsiveMarginStyle,
+  ResponsiveMarginStyleProps,
+} from '../../styles/internal'
+import {
+  ResponsiveBoxProps,
+  ResponsiveFlexItemProps,
+  ResponsiveGridItemProps,
+  ResponsiveMarginProps,
+  ResponsivePaddingProps,
+} from '../types'
+
+/**
+ * @public
+ */
+export interface BoxProps
+  extends ResponsiveFlexItemProps,
+    ResponsiveBoxProps,
+    ResponsiveGridItemProps,
+    ResponsiveMarginProps,
+    ResponsivePaddingProps {
+  as?: React.ElementType | keyof JSX.IntrinsicElements
+}
+
+const Root = styled.div<
+  FlexItemStyleProps &
+    ResponsiveBoxStyleProps &
+    ResponsiveGridItemStyleProps &
+    ResponsiveMarginStyleProps &
+    ResponsivePaddingStyleProps
+>(
+  boxStyle,
+  flexItemStyle,
+  responsiveBoxStyle,
+  responsiveGridItemStyle,
+  responsiveMarginStyle,
+  responsivePaddingStyle
+)
+
+/**
+ * @public
+ */
+export const Box = forwardRef(function Box(
+  props: BoxProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height'>,
+  ref: React.ForwardedRef<HTMLDivElement>
+) {
+  const {
+    as: asProp = 'div',
+    column,
+    columnStart,
+    columnEnd,
+    display = 'block',
+    flex,
+    height,
+    margin = 0,
+    marginX,
+    marginY,
+    marginTop,
+    marginRight,
+    marginBottom,
+    marginLeft,
+    overflow,
+    padding = 0,
+    paddingX,
+    paddingY,
+    paddingTop,
+    paddingRight,
+    paddingBottom,
+    paddingLeft,
+    row,
+    rowStart,
+    rowEnd,
+    sizing,
+    ...restProps
+  } = props
+
+  return (
+    <Root
+      data-as={typeof asProp === 'string' ? asProp : undefined}
+      data-ui="Box"
+      {...restProps}
+      $column={useArrayProp(column)}
+      $columnStart={useArrayProp(columnStart)}
+      $columnEnd={useArrayProp(columnEnd)}
+      $display={useArrayProp(display)}
+      $flex={useArrayProp(flex)}
+      $height={useArrayProp(height)}
+      $margin={useArrayProp(margin)}
+      $marginX={useArrayProp(marginX)}
+      $marginY={useArrayProp(marginY)}
+      $marginTop={useArrayProp(marginTop)}
+      $marginRight={useArrayProp(marginRight)}
+      $marginBottom={useArrayProp(marginBottom)}
+      $marginLeft={useArrayProp(marginLeft)}
+      $overflow={useArrayProp(overflow)}
+      $padding={useArrayProp(padding)}
+      $paddingX={useArrayProp(paddingX)}
+      $paddingY={useArrayProp(paddingY)}
+      $paddingTop={useArrayProp(paddingTop)}
+      $paddingRight={useArrayProp(paddingRight)}
+      $paddingBottom={useArrayProp(paddingBottom)}
+      $paddingLeft={useArrayProp(paddingLeft)}
+      $row={useArrayProp(row)}
+      $rowStart={useArrayProp(rowStart)}
+      $rowEnd={useArrayProp(rowEnd)}
+      $sizing={useArrayProp(sizing)}
+      as={asProp}
+      ref={ref}
+    >
+      {props.children}
+    </Root>
+  )
+})

package/src/primitives/box/index.ts

@@ -0,0 +1 @@
+export * from './box'

package/src/primitives/button/__workshop__/.eslintrc

@@ -0,0 +1,5 @@
+{
+  "rules": {
+    "@typescript-eslint/explicit-module-boundary-types": "off"
+  }
+}

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

@@ -0,0 +1,47 @@
+import {Button, Flex, Grid, Stack, Text} from '@sanity/ui'
+import {WORKSHOP_BUTTON_TONE_OPTIONS} from '../../../__workshop__/constants'
+
+export default function CustomStory() {
+  const tones = Object.entries(WORKSHOP_BUTTON_TONE_OPTIONS)
+
+  return (
+    <Flex align="center" height="fill" justify="center">
+      <Stack space={2}>
+        <Grid columns={5} gap={1}>
+          {tones.map(([title, tone]) => (
+            <Button key={tone} mode="ghost" padding={3} tone={tone}>
+              <Stack space={2}>
+                <Text>{title}</Text>
+                <Text muted>Muted</Text>
+                <Text muted>
+                  <a href="#">Link</a>
+                </Text>
+                <Text>
+                  <code>Code</code>
+                </Text>
+                <Text accent>Accent</Text>
+              </Stack>
+            </Button>
+          ))}
+        </Grid>
+        <Grid columns={5} gap={1}>
+          {tones.map(([title, tone]) => (
+            <Button key={tone} mode="default" padding={3} tone={tone}>
+              <Stack space={2}>
+                <Text>{title}</Text>
+                <Text muted>Muted</Text>
+                <Text muted>
+                  <a href="#">Link</a>
+                </Text>
+                <Text>
+                  <code>Code</code>
+                </Text>
+                <Text accent>Accent</Text>
+              </Stack>
+            </Button>
+          ))}
+        </Grid>
+      </Stack>
+    </Flex>
+  )
+}

package/src/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() {
+  return (
+    <Flex align="center" height="fill" justify="center">
+      <Inline space={1}>
+        <Button fontSize={1} icon={RocketIcon} padding={2} space={2} text="Rocket" />
+        <Button fontSize={1} icon={CustomIcon} padding={2} space={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/primitives/button/__workshop__/index.ts

@@ -0,0 +1,54 @@
+import {defineScope} from '@sanity/ui-workshop'
+import {lazy} from 'react'
+
+export default defineScope({
+  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')),
+    },
+  ],
+})

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

@@ -0,0 +1,12 @@
+import {AddIcon} from '@sanity/icons'
+import {Button, Flex} from '@sanity/ui'
+
+export default function MixedChildrenStory() {
+  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/primitives/button/__workshop__/props.tsx

@@ -0,0 +1,50 @@
+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_TEXT_SIZE_OPTIONS,
+  WORKSHOP_SPACE_OPTIONS,
+} from '../../../__workshop__/constants'
+
+export default function ButtonStory() {
+  const disabled = useBoolean('Disabled', false, 'Props')
+  const fontSize = useSelect('Font size', WORKSHOP_TEXT_SIZE_OPTIONS, 2, 'Props')
+  const icon = useSelect('Icon', WORKSHOP_ICON_SYMBOL_OPTIONS, 'add-circle', 'Props')
+  const iconRight = useSelect('Icon (right)', WORKSHOP_ICON_SYMBOL_OPTIONS, '', 'Props')
+  const justify = useSelect('Justify', WORKSHOP_FLEX_JUSTIFY_OPTIONS, 'center', 'Props')
+  const mode = useSelect('Mode', WORKSHOP_BUTTON_MODE_OPTIONS, 'default', 'Props')
+  const paddingX = useSelect('Padding X', WORKSHOP_SPACE_OPTIONS, 3, 'Props')
+  const paddingY = useSelect('Padding Y', WORKSHOP_SPACE_OPTIONS, 3, 'Props')
+  const selected = useBoolean('Selected', false, 'Props')
+  const space = useSelect('Space', WORKSHOP_SPACE_OPTIONS, 3, 'Props')
+  const tone = useSelect('Tone', WORKSHOP_BUTTON_TONE_OPTIONS, 'default', 'Props')
+  const textAlign =
+    useSelect('Text align', WORKSHOP_BUTTON_TEXT_ALIGN_OPTIONS, undefined, 'Props') || undefined
+  const textProp = useText('Text', 'Label', 'Props')
+
+  return (
+    <Flex align="center" height="fill" justify="center">
+      <Button
+        disabled={disabled}
+        fontSize={fontSize}
+        icon={icon && icons[icon]}
+        iconRight={iconRight && icons[iconRight]}
+        justify={justify}
+        mode={mode}
+        onClick={useAction('onClick')}
+        paddingX={paddingX}
+        paddingY={paddingY}
+        selected={selected}
+        space={space}
+        textAlign={textAlign}
+        text={textProp}
+        tone={tone}
+      />
+    </Flex>
+  )
+}

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

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

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

@@ -0,0 +1,57 @@
+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_SIZE_OPTIONS,
+} from '../../../__workshop__/constants'
+
+export default function StackedStory() {
+  const tones = Object.entries(WORKSHOP_BUTTON_TONE_OPTIONS)
+  const disabled = useBoolean('Disabled', false, 'Props')
+  const fontSize = useSelect('Font size', WORKSHOP_TEXT_SIZE_OPTIONS, 2, 'Props')
+  const icon = useSelect('Icon', WORKSHOP_ICON_SYMBOL_OPTIONS, 'add-circle', 'Props')
+  const iconRight = useSelect('Icon (right)', WORKSHOP_ICON_SYMBOL_OPTIONS, '', 'Props')
+  const justify = useSelect('Justify', WORKSHOP_FLEX_JUSTIFY_OPTIONS, 'center', 'Props')
+  const mode = useSelect('Mode', WORKSHOP_BUTTON_MODE_OPTIONS, 'default', 'Props')
+  const onClick = useAction('onClick')
+  const paddingX = useSelect('Padding X', WORKSHOP_SPACE_OPTIONS, 3, 'Props')
+  const paddingY = useSelect('Padding Y', WORKSHOP_SPACE_OPTIONS, 3, 'Props')
+  const selected = useBoolean('Selected', false, 'Props')
+  const space = useSelect('Space', WORKSHOP_SPACE_OPTIONS, 3, 'Props')
+
+  return (
+    <Card height="fill" tone="transparent">
+      <Flex align="center" height="fill" justify="center">
+        <Container width={0} style={{textAlign: 'center'}}>
+          <Box padding={4}>
+            <Stack space={1}>
+              {tones.map(([title, tone]) => (
+                <Button
+                  disabled={disabled}
+                  fontSize={fontSize}
+                  icon={icon && icons[icon]}
+                  iconRight={iconRight && icons[iconRight]}
+                  justify={justify}
+                  key={tone}
+                  mode={mode}
+                  onClick={onClick}
+                  paddingX={paddingX}
+                  paddingY={paddingY}
+                  selected={selected}
+                  space={space}
+                  text={title}
+                  tone={tone}
+                />
+              ))}
+            </Stack>
+          </Box>
+        </Container>
+      </Flex>
+    </Card>
+  )
+}

package/src/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() {
+  return (
+    <Flex align="center" height="fill" justify="center">
+      <Button as={StyledButton1} href="#" text="Test" />
+    </Flex>
+  )
+}

package/src/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() {
+  const props = {href: '#', text: 'Test'}
+
+  return (
+    <Flex align="center" height="fill" justify="center">
+      <StyledButton2 $color forwardedAs="a" {...props} />
+    </Flex>
+  )
+}

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

@@ -0,0 +1,28 @@
+import {Button, Flex} from '@sanity/ui'
+import {useCallback, useRef} from 'react'
+
+export default function UploadButtonStory() {
+  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" htmlFor="file" justify="center">
+      <Button
+        as="label"
+        onKeyDown={handleKeyDown}
+        tabIndex={0}
+        text={
+          <>
+            Upload
+            <input id="file" ref={inputRef} type="file" style={{display: 'none'}} />
+          </>
+        }
+      />
+    </Flex>
+  )
+}

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

@@ -0,0 +1,43 @@
+/** @jest-environment jsdom */
+
+import {AddIcon} from '@sanity/icons'
+import {screen} from '@testing-library/react'
+import {axe} from 'jest-axe'
+import {render} from '../../../test'
+import {Button, ButtonProps} 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()
+  })
+
+  it('should wrap button', () => {
+    function WrappedButton({button: buttonProps}: {button: ButtonProps}) {
+      return <Button {...buttonProps} />
+    }
+
+    const buttonProps: ButtonProps = {
+      text: 'Button text',
+    }
+
+    render(<WrappedButton button={buttonProps} />)
+
+    expect(screen.getByText('Button text')).toBeInTheDocument()
+  })
+})