@sanity/ui 4.0.0-v4.1 → 4.0.0

package/src/core/primitives/avatar/__workshop__/WithinMenuItem.tsx

@@ -1,72 +0,0 @@
-import {
-  Avatar,
-  AvatarStack,
-  Box,
-  Card,
-  Container,
-  Flex,
-  Layer,
-  Menu,
-  MenuItem,
-  Text,
-} from '@sanity/ui'
-import {useBoolean} from '@sanity/ui-workshop'
-
-export default function WithinMenuItemStory(): React.JSX.Element {
-  const disabled = useBoolean('Disabled', false)
-
-  return (
-    <Container width={1}>
-      <Layer>
-        <Box paddingX={4} paddingY={[5, 6, 7]}>
-          <Card radius={3} shadow={3}>
-            <Menu gap={1}>
-              <MenuItem disabled={disabled} padding={0}>
-                <Flex align="center" gap={2} padding={1}>
-                  <Box flex={1} padding={2}>
-                    <Text size={1}>Menu item 1</Text>
-                  </Box>
-                  <Box flex="none">
-                    <AvatarStack>
-                      <Avatar color="purple" initials="AB" />
-                      <Avatar color="magenta" initials="CD" />
-                      <Avatar color="orange" initials="EF" />
-                    </AvatarStack>
-                  </Box>
-                </Flex>
-              </MenuItem>
-              <MenuItem disabled={disabled} padding={0}>
-                <Flex align="center" gap={2} padding={1}>
-                  <Box flex={1} padding={2}>
-                    <Text size={1}>Menu item 1</Text>
-                  </Box>
-                  <Box flex="none">
-                    <AvatarStack>
-                      {/* <Avatar color="purple" initials="AB" /> */}
-                      <Avatar color="magenta" initials="CD" />
-                      <Avatar color="orange" initials="EF" />
-                    </AvatarStack>
-                  </Box>
-                </Flex>
-              </MenuItem>
-              <MenuItem disabled={disabled} padding={0}>
-                <Flex align="center" gap={2} padding={1}>
-                  <Box flex={1} padding={2}>
-                    <Text size={1}>Menu item 1</Text>
-                  </Box>
-                  <Box flex="none">
-                    <AvatarStack>
-                      <Avatar color="purple" initials="AB" />
-                      {/* <Avatar color="magenta" initials="CD" /> */}
-                      {/* <Avatar color="orange" initials="EF" /> */}
-                    </AvatarStack>
-                  </Box>
-                </Flex>
-              </MenuItem>
-            </Menu>
-          </Card>
-        </Box>
-      </Layer>
-    </Container>
-  )
-}

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

@@ -1,31 +0,0 @@
-import {type WorkshopScope} from '@sanity/ui-workshop'
-import {lazy} from 'react'
-
-const scope: WorkshopScope = {
-  name: 'primitives/avatar',
-  title: 'Avatar',
-  stories: [
-    {
-      name: 'as-button',
-      title: 'As button',
-      component: lazy(() => import('./AsButton')),
-    },
-    {
-      name: 'avatar-stack',
-      title: 'Avatar stack',
-      component: lazy(() => import('./Stack')),
-    },
-    {
-      name: 'within-button',
-      title: 'Within button',
-      component: lazy(() => import('./WithinButton')),
-    },
-    {
-      name: 'within-menu-item',
-      title: 'Within menu item',
-      component: lazy(() => import('./WithinMenuItem')),
-    },
-  ],
-}
-
-export default scope

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

@@ -1,2 +0,0 @@
-/** @public */
-export type AvatarPosition = 'top' | 'bottom' | 'inside'

package/src/core/primitives/badge/Badge.test.tsx

@@ -1,16 +0,0 @@
-import {describe, expect, it} from 'vitest'
-import {axe} from 'vitest-axe'
-
-import {render} from '$test/utils'
-
-import {Badge} from './Badge'
-
-describe('atoms/badge', () => {
-  it('should have no violations (axe)', async () => {
-    const lightResult = render(<Badge tone="positive">Label</Badge>, {scheme: 'light'})
-    const darkResult = render(<Badge tone="positive">Label</Badge>, {scheme: 'dark'})
-
-    expect(await axe(lightResult.container.outerHTML)).toHaveNoViolations()
-    expect(await axe(darkResult.container.outerHTML)).toHaveNoViolations()
-  })
-})

package/src/core/primitives/badge/Badge.tsx

@@ -1,61 +0,0 @@
-import {
-  badge,
-  type BadgeStyleProps,
-  type FlexStyleProps,
-  type PaddingStyleProps,
-  type RadiusStyleProps,
-} from '@sanity/ui/css'
-
-import type {ComponentType, Props} from '../../types'
-import {Box} from '../box/Box'
-import {Text} from '../text/Text'
-
-/** @public */
-export const DEFAULT_BADGE_ELEMENT = 'span'
-
-/** @public */
-export type BadgeOwnProps = BadgeStyleProps & FlexStyleProps & PaddingStyleProps & RadiusStyleProps
-
-/** @public */
-export type BadgeElementType = 'div' | 'span' | ComponentType
-
-/** @public */
-export type BadgeProps<E extends BadgeElementType = BadgeElementType> = Props<BadgeOwnProps, E>
-
-/**
- * Badges are used to tag resources.
- *
- * @public
- */
-export function Badge<E extends BadgeElementType = typeof DEFAULT_BADGE_ELEMENT>(
-  props: BadgeProps<E>,
-): React.JSX.Element {
-  const {
-    as = DEFAULT_BADGE_ELEMENT,
-    children,
-    className,
-    flex = 'none',
-    fontSize = 1,
-    padding = 1,
-    radius = 2,
-    tone = 'default',
-    ...rest
-  } = props as BadgeProps<typeof DEFAULT_BADGE_ELEMENT>
-
-  return (
-    <Box
-      data-ui="Badge"
-      {...rest}
-      as={as}
-      className={badge({className, tone})}
-      flex={flex}
-      display="flex"
-      maxWidth="fill"
-      padding={padding}
-      radius={radius}
-      width="min"
-    >
-      <Text size={fontSize}>{children}</Text>
-    </Box>
-  )
-}

package/src/core/primitives/badge/__workshop__/Props.tsx

@@ -1,30 +0,0 @@
-import {Badge, Flex} from '@sanity/ui'
-import {useAction, useSelect, useText} from '@sanity/ui-workshop'
-
-import {WORKSHOP_BADGE_TONE_OPTIONS, WORKSHOP_SPACE_OPTIONS} from '$workshop'
-
-export default function PropsStory(): React.JSX.Element {
-  // @ts-expect-error - TODO: fix this
-  const paddingX = useSelect('Padding X', WORKSHOP_SPACE_OPTIONS, 1)
-  // @ts-expect-error - TODO: fix this
-  const paddingY = useSelect('Padding Y', WORKSHOP_SPACE_OPTIONS, 1)
-  // @ts-expect-error - TODO: fix this
-  const tone = useSelect('Tone', WORKSHOP_BADGE_TONE_OPTIONS, 'default')
-  const textProp = useText('Text', 'Label')
-
-  return (
-    <Flex align="center" height="fill" justify="center">
-      <Badge
-        onClick={useAction('onClick')}
-        // @ts-expect-error - TODO: fix this
-        paddingX={paddingX}
-        // @ts-expect-error - TODO: fix this
-        paddingY={paddingY}
-        // @ts-expect-error - TODO: fix this
-        tone={tone}
-      >
-        {textProp}
-      </Badge>
-    </Flex>
-  )
-}

package/src/core/primitives/badge/__workshop__/Tones.tsx

@@ -1,16 +0,0 @@
-import {Badge, Flex} from '@sanity/ui'
-import {ELEMENT_TONES} from '@sanity/ui/theme'
-
-export default function Tones(): React.JSX.Element {
-  return (
-    <Flex align="center" height="fill" justify="center" padding={4} sizing="border">
-      <Flex align="center" direction="column" gap={2}>
-        {ELEMENT_TONES.map((tone) => (
-          <Badge key={tone} tone={tone}>
-            {tone}
-          </Badge>
-        ))}
-      </Flex>
-    </Flex>
-  )
-}

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

@@ -1,21 +0,0 @@
-import type {WorkshopScope} from '@sanity/ui-workshop'
-import {lazy} from 'react'
-
-const scope: WorkshopScope = {
-  name: 'primitives/badge',
-  title: 'Badge',
-  stories: [
-    {
-      name: 'props',
-      title: 'Props',
-      component: lazy(() => import('./Props')),
-    },
-    {
-      name: 'tones',
-      title: 'Tones',
-      component: lazy(() => import('./Tones')),
-    },
-  ],
-}
-
-export default scope

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

@@ -1,222 +0,0 @@
-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'
-  | 'table'
-  | 'tbody'
-  | 'td'
-  | 'tfoot'
-  | 'th'
-  | 'thead'
-  | 'tr'
-  | '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/box/__workshop__/Props.tsx

@@ -1,25 +0,0 @@
-import {Box, Card, Text} from '@sanity/ui'
-import {useAction, useSelect} from '@sanity/ui-workshop'
-
-import {WORKSHOP_SPACE_OPTIONS} from '$workshop'
-
-export default function PropsStory(): React.JSX.Element {
-  // @ts-expect-error - TODO: fix this
-  const padding = useSelect('Padding', WORKSHOP_SPACE_OPTIONS, 0)
-
-  return (
-    <Box padding={[4, 5, 6]}>
-      <Card border tone="inherit">
-        <Box
-          onClick={useAction('onClick')}
-          // @ts-expect-error - TODO: fix this
-          padding={padding}
-        >
-          <Text>
-            Box with <code>padding={padding}</code>
-          </Text>
-        </Box>
-      </Card>
-    </Box>
-  )
-}

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

@@ -1,20 +0,0 @@
-import {Box, Text} from '@sanity/ui'
-import {vars} from '@sanity/ui/css'
-
-export default function ResponsiveStory(): React.JSX.Element {
-  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}
-        style={{outline: `1px solid ${vars.color.border}`}}
-      >
-        <Text align="center" muted>
-          This is a box with responsive props
-        </Text>
-      </Box>
-    </Box>
-  )
-}

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

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

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

@@ -1,30 +0,0 @@
-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()
-  })
-})