@sanity/ui 3.0.0-static.8 → 3.0.0

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

@@ -1,20 +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/ui/primitives/box/box.tsx

@@ -1,162 +0,0 @@
-import {
-  box,
-  BoxStyleProps,
-  composeClassNames,
-  GapStyleProps,
-  InsetStyleProps,
-  PositionStyleProps,
-} from '@sanity/ui/css'
-import {ForwardedRef, forwardRef} from 'react'
-
-import {Props} from '../../types'
-
-/**
- * @public
- */
-export interface BoxProps
-  extends BoxStyleProps,
-    GapStyleProps,
-    InsetStyleProps,
-    PositionStyleProps {}
-
-/**
- * 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: Props<BoxProps, 'div'>,
-  ref: ForwardedRef<HTMLDivElement>,
-) {
-  const {
-    align,
-    as: As = 'div',
-    autoCols,
-    autoFlow,
-    autoRows,
-    border = false,
-    borderTop,
-    borderRight,
-    borderBottom,
-    borderLeft,
-    className,
-    column,
-    columnStart,
-    columnEnd,
-    columns,
-    direction,
-    display = 'block',
-    flex,
-    gap,
-    gapX,
-    gapY,
-    height,
-    inset,
-    insetBottom,
-    insetLeft,
-    insetRight,
-    insetTop,
-    justify,
-    margin = 0,
-    marginX,
-    marginY,
-    marginTop,
-    marginRight,
-    marginBottom,
-    marginLeft,
-    maxWidth,
-    minWidth = 0,
-    overflow,
-    padding = 0,
-    paddingX,
-    paddingY,
-    paddingTop,
-    paddingRight,
-    paddingBottom,
-    paddingLeft,
-    pointerEvents,
-    position,
-    muted,
-    radius,
-    row,
-    rows,
-    rowStart,
-    rowEnd,
-    sizing = 'content',
-    width,
-    wrap,
-    ...restProps
-  } = props
-
-  return (
-    <As
-      data-ui="Box"
-      {...restProps}
-      className={composeClassNames(
-        className,
-        box({
-          align,
-          autoCols,
-          autoFlow,
-          autoRows,
-          border,
-          borderTop,
-          borderRight,
-          borderBottom,
-          borderLeft,
-          column,
-          columnStart,
-          columnEnd,
-          columns,
-          direction,
-          display,
-          flex,
-          gap,
-          gapX,
-          gapY,
-          height,
-          inset,
-          insetBottom,
-          insetLeft,
-          insetRight,
-          insetTop,
-          justify,
-          overflow,
-          margin,
-          marginX,
-          marginY,
-          marginTop,
-          marginRight,
-          marginBottom,
-          marginLeft,
-          maxWidth,
-          minWidth,
-          muted,
-          padding,
-          paddingX,
-          paddingY,
-          paddingTop,
-          paddingRight,
-          paddingBottom,
-          paddingLeft,
-          pointerEvents,
-          position,
-          radius,
-          row,
-          rows,
-          rowStart,
-          rowEnd,
-          sizing,
-          width,
-          wrap,
-        }),
-      )}
-      ref={ref}
-    >
-      {props.children}
-    </As>
-  )
-})
-
-Box.displayName = 'ForwardRef(Box)'

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

@@ -1,50 +0,0 @@
-/* eslint-disable jsx-a11y/anchor-is-valid */
-
-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" padding={4} sizing="border">
-      <Stack space={2}>
-        <Grid columns={7} 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={7} 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/ui/primitives/button/__workshop__/props.tsx

@@ -1,58 +0,0 @@
-import {icons} from '@sanity/icons'
-import {Button, Flex} from '@sanity/ui'
-import {FontTextSize} from '@sanity/ui/theme'
-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_SIZE_OPTIONS,
-  WORKSHOP_TEXT_WEIGHT_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')
-  const textWeight =
-    useSelect('Text weight', WORKSHOP_TEXT_WEIGHT_OPTIONS, '', 'Props') || undefined
-
-  return (
-    <Flex align="center" height="fill" justify="center">
-      <Button
-        disabled={disabled}
-        fontSize={fontSize as FontTextSize}
-        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}
-        textWeight={textWeight}
-        tone={tone}
-      />
-    </Flex>
-  )
-}

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

@@ -1,59 +0,0 @@
-import {icons} from '@sanity/icons'
-import {Box, Button, Card, Container, Flex, Stack} from '@sanity/ui'
-import {FontTextSize} from '@sanity/ui/theme'
-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 as FontTextSize}
-                  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/ui/primitives/button/button.tsx

@@ -1,207 +0,0 @@
-import {
-  button,
-  buttonLoadingBox,
-  ButtonStyleProps,
-  composeClassNames,
-  DisplayStyleProps,
-  FlexStyleProps,
-  GapStyleProps,
-  PaddingStyleProps,
-  ResponsiveProp,
-  Width,
-} from '@sanity/ui/css'
-import {FontTextSize, Space} from '@sanity/ui/theme'
-import {ElementType, ForwardedRef, forwardRef, isValidElement, ReactNode} from 'react'
-import {isValidElementType} from 'react-is'
-
-import {ButtonMode, ButtonTextAlign, ButtonTone, Props} from '../../types'
-import {Box} from '../box'
-import {Spinner} from '../spinner'
-import {Text, TextProps} from '../text'
-
-/**
- * @public
- */
-export interface ButtonProps
-  extends ButtonStyleProps,
-    DisplayStyleProps,
-    FlexStyleProps,
-    GapStyleProps,
-    PaddingStyleProps {
-  'data-ui'?: string
-  'fontSize'?: ResponsiveProp<FontTextSize>
-  'href'?: string
-  'mode'?: ButtonMode
-  'icon'?: ElementType | ReactNode
-  'iconRight'?: ElementType | ReactNode
-  /** @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'?: TextProps['textOverflow']
-  'textWeight'?: TextProps['weight']
-  'tone'?: ButtonTone
-  'type'?: 'button' | 'reset' | 'submit'
-  'width'?: ResponsiveProp<Width>
-}
-
-/**
- * @public
- */
-export const Button = forwardRef(function Button(
-  props: Props<ButtonProps, 'button'>,
-  ref: ForwardedRef<HTMLButtonElement>,
-) {
-  const {
-    align = 'center',
-    as: As = 'button',
-    children,
-    className,
-    direction,
-    disabled,
-    display = 'inline-flex',
-    flex,
-    fontSize = 1,
-    gap = props.space ?? props.padding ?? 3,
-    gapX,
-    gapY,
-    href,
-    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,
-    wrap,
-    ...restProps
-  } = props
-  // const {button: buttonTheme} = useTheme_v2()
-
-  return (
-    <As
-      data-ui="Button"
-      {...restProps}
-      className={composeClassNames(className, button({display, flex, mode, radius, tone, width}))}
-      data-disabled={loading || disabled ? '' : undefined}
-      data-selected={selected ? '' : undefined}
-      disabled={Boolean(loading || disabled)}
-      href={disabled ? undefined : href}
-      ref={ref}
-      type={type}
-    >
-      {Boolean(loading) && (
-        <Box
-          align="center"
-          as="span"
-          className={buttonLoadingBox()}
-          display="flex"
-          flex={1}
-          justify="center"
-          width="fill"
-        >
-          <Spinner size={fontSize} />
-        </Box>
-      )}
-
-      {(IconComponent || text || IconRightComponent) && (
-        <Box
-          // align={align}
-          as="span"
-          direction={direction}
-          display="flex"
-          flex={1}
-          gap={gap}
-          gapX={gapX}
-          gapY={gapY}
-          justify={justify}
-          padding={padding}
-          paddingX={paddingX}
-          paddingY={paddingY}
-          paddingTop={paddingTop}
-          paddingBottom={paddingBottom}
-          paddingLeft={paddingLeft}
-          paddingRight={paddingRight}
-          // width="fill"
-          // wrap={wrap}
-        >
-          {IconComponent && (
-            <Text as="span" flex="none" muted size={fontSize}>
-              {isValidElement(IconComponent) && IconComponent}
-              {isValidElementType(IconComponent) && <IconComponent />}
-            </Text>
-          )}
-
-          {text && (
-            <Text
-              align={textAlign}
-              as="span"
-              flex="none"
-              muted={muted}
-              size={fontSize}
-              textOverflow={textOverflow}
-              weight={textWeight}
-            >
-              {text}
-            </Text>
-          )}
-
-          {IconRightComponent && (
-            <Text as="span" flex="none" muted size={fontSize}>
-              {isValidElement(IconRightComponent) && IconRightComponent}
-              {isValidElementType(IconRightComponent) && <IconRightComponent />}
-            </Text>
-          )}
-        </Box>
-      )}
-
-      {children && (
-        <Box
-          // align={align}
-          as="span"
-          // direction={direction}
-          // display="flex"
-          flex={1}
-          gap={gap}
-          gapX={gapX}
-          gapY={gapY}
-          // justify={justify}
-          padding={padding}
-          paddingX={paddingX}
-          paddingY={paddingY}
-          paddingTop={paddingTop}
-          paddingBottom={paddingBottom}
-          paddingLeft={paddingLeft}
-          paddingRight={paddingRight}
-          // width="fill"
-          // wrap={wrap}
-        >
-          {children}
-        </Box>
-      )}
-    </As>
-  )
-})
-
-Button.displayName = 'ForwardRef(Button)'

package/src/ui/primitives/button/index.ts

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

package/src/ui/primitives/card/__workshop__/allTones.tsx

@@ -1,27 +0,0 @@
-import {Card, Container, Flex, Stack, Text} from '@sanity/ui'
-import {THEME_COLOR_CARD_TONES} from '@sanity/ui/theme'
-
-export default function AllTonesStory() {
-  return (
-    <Card height="fill" tone="transparent">
-      <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
-        <Container width={0}>
-          <Stack space={3}>
-            {THEME_COLOR_CARD_TONES.filter((tone) => tone !== 'transparent').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>
-  )
-}

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

@@ -1,107 +0,0 @@
-import {Box, Card, Container, Flex, Grid, Stack, Text} from '@sanity/ui'
-
-import {WORKSHOP_CARD_TONE_OPTIONS} from '../../../../../workshop/constants'
-
-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={2}>
-          <Box>
-            <Text align="center" size={1} weight="medium">
-              Enabled
-            </Text>
-            <Stack marginTop={3} space={2}>
-              {tones.map(([title, tone]) => (
-                <Card
-                  __unstable_focusRing
-                  as="button"
-                  key={tone}
-                  padding={3}
-                  style={{textAlign: 'center'}}
-                  tone={tone}
-                >
-                  <Stack space={2}>
-                    <Text size={1} weight="medium">
-                      {title}
-                    </Text>
-                    <Text muted size={1}>
-                      Muted
-                    </Text>
-                    <Text accent size={1}>
-                      Accent
-                    </Text>
-                  </Stack>
-                </Card>
-              ))}
-            </Stack>
-          </Box>
-
-          <Box>
-            <Text align="center" size={1} weight="medium">
-              Disabled
-            </Text>
-            <Stack marginTop={3} space={2}>
-              {tones.map(([title, tone]) => (
-                <Card
-                  __unstable_focusRing
-                  as="button"
-                  disabled
-                  key={tone}
-                  padding={3}
-                  style={{textAlign: 'center'}}
-                  tone={tone}
-                >
-                  <Stack space={2}>
-                    <Text size={1} weight="medium">
-                      {title}
-                    </Text>
-                    <Text size={1} muted>
-                      Muted
-                    </Text>
-                    <Text accent size={1}>
-                      Accent
-                    </Text>
-                  </Stack>
-                </Card>
-              ))}
-            </Stack>
-          </Box>
-
-          <Box>
-            <Text align="center" size={1} weight="medium">
-              Selected
-            </Text>
-            <Stack marginTop={3} space={2}>
-              {tones.map(([title, tone]) => (
-                <Card
-                  __unstable_focusRing
-                  as="button"
-                  key={tone}
-                  padding={3}
-                  selected
-                  style={{textAlign: 'center'}}
-                  tone={tone}
-                >
-                  <Stack space={2}>
-                    <Text size={1} weight="medium">
-                      {title}
-                    </Text>
-                    <Text size={1} muted>
-                      Muted
-                    </Text>
-                    <Text accent size={1}>
-                      Accent
-                    </Text>
-                  </Stack>
-                </Card>
-              ))}
-            </Stack>
-          </Box>
-        </Grid>
-      </Container>
-    </Flex>
-  )
-}