@sanity/ui 3.0.0-static.0 → 3.0.0-static.10

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

@@ -1,59 +0,0 @@
-import {badge, composeClassNames, RadiusStyleProps} from '@sanity/ui/css'
-import {ForwardedRef, forwardRef} from 'react'
-import {BadgeMode, BadgeTone} from '../../types'
-import {Box, BoxProps} from '../box'
-import {Text} from '../text'
-
-/**
- * @public
- */
-export interface BadgeProps extends BoxProps, RadiusStyleProps {
-  as?: React.ElementType | keyof JSX.IntrinsicElements
-  fontSize?: number | number[]
-  /** @deprecated No longer used. */
-  mode?: BadgeMode
-  tone?: BadgeTone
-}
-
-/**
- * Badges are used to tag resources.
- *
- * @public
- */
-export const Badge = forwardRef(function Badge(
-  props: BadgeProps & React.HTMLProps<HTMLDivElement>,
-  ref: ForwardedRef<HTMLDivElement>,
-) {
-  const {
-    children,
-    className,
-    display = 'inline-block',
-    fontSize = 1,
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    mode: _deprecated_mode,
-    padding = 1,
-    radius = 2,
-    tone = 'default',
-    ...restProps
-  } = props
-
-  return (
-    <Box
-      data-ui="Badge"
-      {...restProps}
-      className={composeClassNames(
-        className,
-        badge({
-          radius,
-          tone,
-        }),
-      )}
-      display={display}
-      padding={padding}
-      ref={ref}
-    >
-      <Text size={fontSize}>{children}</Text>
-    </Box>
-  )
-})
-Badge.displayName = 'ForwardRef(Badge)'

package/src/core/primitives/badge/styles.ts

@@ -1,19 +0,0 @@
-import {CSSObject} from '@sanity/ui/theme'
-import {BadgeStyleProps} from './types'
-
-export function badgeStyle(props: BadgeStyleProps): CSSObject {
-  const {$tone} = props
-
-  return {
-    '--card-bg-color': `var(--card-badge-${$tone}-bg-color)`,
-    '--card-fg-color': `var(--card-badge-${$tone}-fg-color)`,
-
-    'backgroundColor': 'var(--card-bg-color)',
-    'cursor': 'default',
-
-    '&:not([hidden])': {
-      display: 'inline-block',
-      verticalAlign: 'top',
-    },
-  }
-}

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

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

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

@@ -1,19 +0,0 @@
-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/core/primitives/box/box.tsx

@@ -1,118 +0,0 @@
-import {box, BoxStyleProps, composeClassNames, PositionStyleProps} from '@sanity/ui/css'
-import {GapStyleProps} from '@sanity/ui/css'
-import {forwardRef} from 'react'
-
-/**
- * @public
- */
-export interface BoxProps extends BoxStyleProps, GapStyleProps, PositionStyleProps {
-  as?: React.ElementType | keyof JSX.IntrinsicElements
-  forwardedAs?: React.ElementType | keyof JSX.IntrinsicElements
-}
-
-/**
- * The `Box` component is a basic layout wrapper component which provides utility properties
- * for flex, margins and padding.
- *
- * @public
- */
-export const Box = forwardRef(function Box(
-  props: BoxProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'wrap' | 'width'>,
-  ref: React.ForwardedRef<HTMLDivElement>,
-) {
-  const {
-    align,
-    as: As = 'div',
-    className,
-    column,
-    columnStart,
-    columnEnd,
-    direction,
-    display = 'block',
-    flex,
-    gap,
-    gapX,
-    gapY,
-    height,
-    inset,
-    justify,
-    margin = 0,
-    marginX,
-    marginY,
-    marginTop,
-    marginRight,
-    marginBottom,
-    marginLeft,
-    overflow,
-    padding = 0,
-    paddingX,
-    paddingY,
-    paddingTop,
-    paddingRight,
-    paddingBottom,
-    paddingLeft,
-    pointerEvents,
-    position,
-    row,
-    rowStart,
-    rowEnd,
-    sizing,
-    width,
-    wrap,
-    ...restProps
-  } = props
-
-  return (
-    <As
-      data-as={typeof As === 'string' ? As : undefined}
-      data-ui="Box"
-      {...restProps}
-      className={composeClassNames(
-        className,
-        box({
-          align,
-          column,
-          columnStart,
-          columnEnd,
-          direction,
-          display,
-          flex,
-          gap,
-          gapX,
-          gapY,
-          height,
-          inset,
-          justify,
-          overflow,
-          margin,
-          marginX,
-          marginY,
-          marginTop,
-          marginRight,
-          marginBottom,
-          marginLeft,
-          padding,
-          paddingX,
-          paddingY,
-          paddingTop,
-          paddingRight,
-          paddingBottom,
-          paddingLeft,
-          pointerEvents,
-          position,
-          row,
-          rowStart,
-          rowEnd,
-          sizing,
-          width,
-          wrap,
-        }),
-      )}
-      ref={ref}
-    >
-      {props.children}
-    </As>
-  )
-})
-
-Box.displayName = 'ForwardRef(Box)'

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

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

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

@@ -1,47 +0,0 @@
-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/core/primitives/button/__workshop__/disabled.tsx

@@ -1,73 +0,0 @@
-import {SquareIcon} from '@sanity/icons'
-import {Card} from '../../card/card'
-import {Container} from '../../container/container'
-import {Grid} from '../../grid/grid'
-import {Stack} from '../../stack/stack'
-import {Text} from '../../text/text'
-import {Button, ButtonProps} from '../button'
-
-const GAP = 4
-const COLUMNS = 3
-
-const DEFAULT_PROPS: ButtonProps = {
-  icon: SquareIcon,
-  iconRight: SquareIcon,
-}
-
-function Layout() {
-  return (
-    <Container width={2}>
-      <Stack space={4}>
-        <Grid columns={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 space={2}>
-          <Grid columns={COLUMNS} gap={GAP}>
-            <Stack space={2}>
-              <Button {...DEFAULT_PROPS} mode="default" text="Enabled" />
-              <Button {...DEFAULT_PROPS} disabled mode="default" text="Disabled" />
-              <Button {...DEFAULT_PROPS} disabled mode="default" muted text="Disabled (muted)" />
-            </Stack>
-
-            <Stack space={2}>
-              <Button {...DEFAULT_PROPS} mode="ghost" text="Enabled" />
-              <Button {...DEFAULT_PROPS} disabled mode="ghost" text="Disabled" />
-              <Button {...DEFAULT_PROPS} disabled mode="ghost" muted text="Disabled (muted)" />
-            </Stack>
-
-            <Stack space={2}>
-              <Button {...DEFAULT_PROPS} mode="bleed" text="Enabled" />
-              <Button {...DEFAULT_PROPS} mode="bleed" disabled text="Disabled" />
-              <Button {...DEFAULT_PROPS} disabled mode="bleed" muted text="Disabled (muted)" />
-            </Stack>
-          </Grid>
-        </Stack>
-      </Stack>
-    </Container>
-  )
-}
-
-export default function DisabledButtonStory() {
-  return (
-    <Stack>
-      <Stack space={4}>
-        <Card padding={5} scheme="light">
-          <Layout />
-        </Card>
-
-        <Card padding={5} scheme="dark">
-          <Layout />
-        </Card>
-      </Stack>
-    </Stack>
-  )
-}

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

@@ -1,52 +0,0 @@
-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 loading = useBoolean('Loading', false, '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}
-        loading={loading}
-        mode={mode}
-        onClick={useAction('onClick')}
-        paddingX={paddingX}
-        paddingY={paddingY}
-        selected={selected}
-        space={space}
-        textAlign={textAlign}
-        text={textProp}
-        tone={tone}
-      />
-    </Flex>
-  )
-}

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

@@ -1,36 +0,0 @@
-import {UploadIcon} from '@sanity/icons'
-import {Button, Flex} from '@sanity/ui'
-import {styled} from '../../../lib/styled'
-
-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() {
-  return (
-    <Flex align="center" height="fill" htmlFor="file" justify="center">
-      <SanityUploadButton icon={UploadIcon} tabIndex={0} text="Upload">
-        <input type="file" />
-      </SanityUploadButton>
-    </Flex>
-  )
-}

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

@@ -1,57 +0,0 @@
-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">
-      <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/core/primitives/button/__workshop__/styled1.tsx

@@ -1,17 +0,0 @@
-import {Button, Flex} from '@sanity/ui'
-import {styled} from '../../../lib/styled'
-
-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/core/primitives/button/__workshop__/styled2.tsx

@@ -1,19 +0,0 @@
-import {Button, Flex} from '@sanity/ui'
-import {styled} from '../../../lib/styled'
-
-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/core/primitives/button/button.test.tsx

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