@sanity/ui 1.0.0-beta.9 → 1.0.0

package/src/primitives/code/__workshop__/opticalAlignment.tsx

@@ -0,0 +1,48 @@
+import {AddCircleIcon} from '@sanity/icons'
+import {Box, Card, Code, Flex, Stack} from '@sanity/ui'
+
+export default function OpticalAlignment() {
+  return (
+    <Box padding={[4, 5, 6]}>
+      <Stack space={1}>
+        <Flex>
+          <Card padding={0} scheme="dark">
+            <Code size={4}>Hamburgefonstiv M</Code>
+          </Card>
+        </Flex>
+
+        <Flex>
+          <Card padding={0} scheme="dark">
+            <Code size={3}>Hamburgefonstiv M</Code>
+          </Card>
+        </Flex>
+
+        <Flex>
+          <Card padding={0} scheme="dark">
+            <Code size={2}>Hamburgefonstiv M</Code>
+          </Card>
+        </Flex>
+
+        <Flex>
+          <Card padding={0} scheme="dark">
+            <Code size={1}>Hamburgefonstiv M</Code>
+          </Card>
+        </Flex>
+
+        <Flex>
+          <Card padding={0} scheme="dark">
+            <Code size={0}>Hamburgefonstiv M</Code>
+          </Card>
+        </Flex>
+
+        <Flex>
+          <Card padding={2} scheme="dark">
+            <Code>
+              <AddCircleIcon />
+            </Code>
+          </Card>
+        </Flex>
+      </Stack>
+    </Box>
+  )
+}

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

@@ -0,0 +1,20 @@
+import {Box, Code} from '@sanity/ui'
+import {useSelect, useText} from '@sanity/ui-workshop'
+import {
+  WORKSHOP_CODE_LANGUAGE_OPTIONS,
+  WORKSHOP_TEXT_FONT_SIZE_OPTIONS,
+} from '../../../__workshop__/constants'
+
+export default function PropsStory() {
+  const code = useText('Code', `console.log('Hello, world')`, 'Props')
+  const language = useSelect('Language', WORKSHOP_CODE_LANGUAGE_OPTIONS, 'typescript', 'Props')
+  const size = useSelect('Size', WORKSHOP_TEXT_FONT_SIZE_OPTIONS, 2, 'Props')
+
+  return (
+    <Box padding={[4, 5, 6]}>
+      <Code language={language} size={size}>
+        {code}
+      </Code>
+    </Box>
+  )
+}

package/src/primitives/code/code.tsx

@@ -0,0 +1,37 @@
+import {forwardRef} from 'react'
+import Refractor from 'react-refractor'
+import styled from 'styled-components'
+import {useArrayProp} from '../../hooks'
+import {responsiveCodeFontStyle, ResponsiveFontStyleProps} from '../../styles/internal'
+import {codeBaseStyle} from './styles'
+
+/**
+ * @public
+ */
+export interface CodeProps {
+  as?: React.ElementType | keyof JSX.IntrinsicElements
+  language?: string
+  size?: number | number[]
+  weight?: string
+}
+
+const Root = styled.pre<ResponsiveFontStyleProps>(codeBaseStyle, responsiveCodeFontStyle)
+
+/**
+ * @public
+ */
+export const Code = forwardRef(function Code(
+  props: CodeProps & Omit<React.HTMLProps<HTMLElement>, 'as' | 'size'>,
+  ref: React.ForwardedRef<HTMLElement>
+) {
+  const {children, language: languageProp, size = 2, weight, ...restProps} = props
+  const language = typeof languageProp === 'string' ? languageProp : undefined
+  const registered = language ? Refractor.hasLanguage(language as any) : false
+
+  return (
+    <Root data-ui="Code" {...restProps} $size={useArrayProp(size)} $weight={weight} ref={ref}>
+      {!(language && registered) && <code>{children}</code>}
+      {language && registered && <Refractor inline language={language} value={String(children)} />}
+    </Root>
+  )
+})

package/src/primitives/code/index.ts

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

package/src/primitives/code/styles.ts

@@ -0,0 +1,70 @@
+import {css, FlattenInterpolation, ThemeProps as StyledThemeProps} from 'styled-components'
+import {ThemeProps} from '../../styles'
+import {Theme} from '../../theme'
+
+function codeSyntaxHighlightingStyle({theme}: ThemeProps) {
+  const color = theme.sanity.color.syntax
+
+  return {
+    '&.atrule': {color: color.atrule},
+    '&.attr-name': {color: color.attrName},
+    '&.attr-value': {color: color.attrValue},
+    '&.attribute': {color: color.attribute},
+    '&.boolean': {color: color.boolean},
+    '&.builtin': {color: color.builtin},
+    '&.cdata': {color: color.cdata},
+    '&.char': {color: color.char},
+    '&.class': {color: color.class},
+    '&.class-name': {color: color.className},
+    '&.comment': {color: color.comment},
+    '&.constant': {color: color.constant},
+    '&.deleted': {color: color.deleted},
+    '&.doctype': {color: color.doctype},
+    '&.entity': {color: color.entity},
+    '&.function': {color: color.function},
+    '&.hexcode': {color: color.hexcode},
+    '&.id': {color: color.id},
+    '&.important': {color: color.important},
+    '&.inserted': {color: color.inserted},
+    '&.keyword': {color: color.keyword},
+    '&.number': {color: color.number},
+    '&.operator': {color: color.operator},
+    '&.prolog': {color: color.prolog},
+    '&.property': {color: color.property},
+    '&.pseudo-class': {color: color.pseudoClass},
+    '&.pseudo-element': {color: color.pseudoElement},
+    '&.punctuation': {color: color.punctuation},
+    '&.regex': {color: color.regex},
+    '&.selector': {color: color.selector},
+    '&.string': {color: color.string},
+    '&.symbol': {color: color.symbol},
+    '&.tag': {color: color.tag},
+    '&.unit': {color: color.unit},
+    '&.url': {color: color.url},
+    '&.variable': {color: color.variable},
+  }
+}
+
+export function codeBaseStyle(): FlattenInterpolation<StyledThemeProps<Theme>> {
+  return css`
+    color: var(--card-code-fg-color);
+
+    & code {
+      font-family: inherit;
+
+      &.refractor .token {
+        ${codeSyntaxHighlightingStyle}
+      }
+    }
+
+    & a {
+      color: inherit;
+      text-decoration: underline;
+      border-radius: 1px;
+    }
+
+    & [data-sanity-icon] {
+      vertical-align: baseline;
+    }
+  `
+}

package/src/primitives/container/__workshop__/.eslintrc

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

package/src/primitives/container/__workshop__/example.tsx

@@ -0,0 +1,19 @@
+import {Card, Container, Flex, Text} from '@sanity/ui'
+import {useAction, useSelect} from '@sanity/ui-workshop'
+import {WORKSHOP_CONTAINER_WIDTH_OPTIONS} from '../../../__workshop__/constants'
+
+export default function PlainStory() {
+  const width = useSelect('Width', WORKSHOP_CONTAINER_WIDTH_OPTIONS, 0, 'Props')
+
+  return (
+    <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
+      <Container onClick={useAction('onClick')} width={width}>
+        <Card padding={4} shadow={1}>
+          <Text>
+            Container with <code>max-width={width}</code>
+          </Text>
+        </Card>
+      </Container>
+    </Flex>
+  )
+}

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

@@ -0,0 +1,8 @@
+import {defineScope} from '@sanity/ui-workshop'
+import {lazy} from 'react'
+
+export default defineScope({
+  name: 'primitives/container',
+  title: 'Container',
+  stories: [{name: 'plain', title: 'Plain', component: lazy(() => import('./example'))}],
+})

package/src/primitives/container/container.tsx

@@ -0,0 +1,37 @@
+import {forwardRef} from 'react'
+import styled from 'styled-components'
+import {useArrayProp} from '../../hooks'
+import {Box, BoxProps} from '../box'
+import {ResponsiveWidthProps} from '../types'
+import {containerBaseStyle, responsiveContainerWidthStyle} from './styles'
+import {ResponsiveWidthStyleProps} from './types'
+
+/**
+ * @public
+ */
+export interface ContainerProps extends BoxProps, ResponsiveWidthProps {}
+
+const Root = styled(Box)<ResponsiveWidthStyleProps>(
+  containerBaseStyle,
+  responsiveContainerWidthStyle
+)
+
+/**
+ * @public
+ */
+export const Container = forwardRef(function Container(
+  props: ContainerProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'width'>,
+  ref: React.ForwardedRef<HTMLDivElement>
+) {
+  const {as, width = 2, ...restProps} = props
+
+  return (
+    <Root
+      data-ui="Container"
+      {...restProps}
+      $width={useArrayProp(width)}
+      forwardedAs={as}
+      ref={ref}
+    />
+  )
+})

package/src/primitives/container/index.ts

@@ -0,0 +1,2 @@
+export * from './container'
+export * from './types'

package/src/primitives/container/styles.ts

@@ -0,0 +1,23 @@
+import {CSSObject} from 'styled-components'
+import {rem, _responsive, ThemeProps} from '../../styles'
+import {ResponsiveWidthStyleProps} from './types'
+
+const BASE_STYLE: CSSObject = {
+  width: '100%',
+  margin: '0 auto',
+}
+
+export function containerBaseStyle(): CSSObject {
+  return BASE_STYLE
+}
+
+export function responsiveContainerWidthStyle(
+  props: ResponsiveWidthStyleProps & ThemeProps
+): CSSObject[] {
+  const {theme} = props
+  const {container, media} = theme.sanity
+
+  return _responsive(media, props.$width, (val) => ({
+    maxWidth: val === 'auto' ? 'none' : rem(container[val]),
+  }))
+}

package/src/primitives/container/types.ts

@@ -0,0 +1,6 @@
+/**
+ * @internal
+ */
+export interface ResponsiveWidthStyleProps {
+  $width: (number | 'auto')[]
+}

package/src/primitives/flex/__workshop__/.eslintrc

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

package/src/primitives/flex/__workshop__/example.tsx

@@ -0,0 +1,33 @@
+import {Card, Code, Flex} from '@sanity/ui'
+import {useSelect} from '@sanity/ui-workshop'
+import styled from 'styled-components'
+import {WORKSHOP_FLEX_DIRECTION_OPTIONS} from '../../../__workshop__/constants'
+
+const DebugCard = styled(Card)`
+  outline: 1px solid red;
+  &:not([hidden]) {
+    display: flex;
+  }
+  align-items: center;
+  justify-content: center;
+`
+
+export default function ExampleStory() {
+  const direction = useSelect('Direction', WORKSHOP_FLEX_DIRECTION_OPTIONS, 'row', 'Props')
+
+  return (
+    <Flex direction={direction} height="fill" style={{width: '100%'}}>
+      <DebugCard flex={1}>
+        <Code>1</Code>
+      </DebugCard>
+
+      <DebugCard flex={[1, 2, 3]}>
+        <Code>[1,2,3]</Code>
+      </DebugCard>
+
+      <DebugCard flex={['none', 'none', 1]}>
+        <Code>['none', 'none', 1]</Code>
+      </DebugCard>
+    </Flex>
+  )
+}

package/src/primitives/flex/__workshop__/gap.tsx

@@ -0,0 +1,25 @@
+import {Card, Flex, Text} from '@sanity/ui'
+
+export default function GapStory() {
+  return (
+    <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
+      <Flex align="center" gap={[2, 3, 4]} justify="center" wrap="wrap">
+        <Card padding={3} scheme="dark">
+          <Text size={0}>Card 0</Text>
+        </Card>
+        <Card padding={3} scheme="dark">
+          <Text size={1}>Card 1</Text>
+        </Card>
+        <Card padding={3} scheme="dark">
+          <Text size={2}>Card 2</Text>
+        </Card>
+        <Card padding={3} scheme="dark">
+          <Text size={3}>Card 3</Text>
+        </Card>
+        <Card padding={3} scheme="dark">
+          <Text size={4}>Card 4</Text>
+        </Card>
+      </Flex>
+    </Flex>
+  )
+}

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

@@ -0,0 +1,11 @@
+import {defineScope} from '@sanity/ui-workshop'
+import {lazy} from 'react'
+
+export default defineScope({
+  name: 'primitives/flex',
+  title: 'Flex',
+  stories: [
+    {name: 'plain', title: 'Plain', component: lazy(() => import('./example'))},
+    {name: 'gap', title: 'Gap', component: lazy(() => import('./gap'))},
+  ],
+})

package/src/primitives/flex/flex.tsx

@@ -0,0 +1,50 @@
+import {forwardRef} from 'react'
+import styled from 'styled-components'
+import {useArrayProp} from '../../hooks'
+import {
+  flexItemStyle,
+  FlexItemStyleProps,
+  responsiveFlexStyle,
+  ResponsiveFlexStyleProps,
+} from '../../styles/internal'
+import {Box, BoxProps} from '../box'
+import {ResponsiveFlexProps, ResponsiveFlexItemProps} from '../types'
+
+/**
+ * @public
+ */
+export interface FlexProps
+  extends Omit<BoxProps, 'display'>,
+    ResponsiveFlexProps,
+    ResponsiveFlexItemProps {
+  gap?: number | number[]
+}
+
+const Root = styled(Box)<FlexItemStyleProps & ResponsiveFlexStyleProps>(
+  flexItemStyle,
+  responsiveFlexStyle
+)
+
+/**
+ * @public
+ */
+export const Flex = forwardRef(function Flex(
+  props: FlexProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'wrap'>,
+  ref: React.ForwardedRef<HTMLDivElement>
+) {
+  const {align, as, direction = 'row', gap, justify, wrap, ...restProps} = props
+
+  return (
+    <Root
+      data-ui="Flex"
+      {...restProps}
+      $align={useArrayProp(align)}
+      $direction={useArrayProp(direction)}
+      $gap={useArrayProp(gap)}
+      $justify={useArrayProp(justify)}
+      $wrap={useArrayProp(wrap)}
+      forwardedAs={as}
+      ref={ref}
+    />
+  )
+})

package/src/primitives/flex/index.ts

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

package/src/primitives/grid/__workshop__/.eslintrc

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

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

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

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

@@ -0,0 +1,54 @@
+import {Card, Code, Container, Flex, Grid} from '@sanity/ui'
+
+export default function ResponsiveStory() {
+  return (
+    <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
+      <Container width="auto">
+        <Grid
+          id="responsive-grid"
+          columns={[1, 2, 3, 4, 5, 6, 7]}
+          gap={[0, 1, 2, 3, 4, 5, 6]}
+          rows={[1, 2, 3, 4, 5, 6, 7]}
+          style={{textAlign: 'center'}}
+        >
+          <Card padding={[1, 2, 3]} tone="transparent">
+            <Code>1</Code>
+          </Card>
+          <Card padding={[1, 2, 3]} tone="transparent">
+            <Code>2</Code>
+          </Card>
+          <Card padding={[1, 2, 3]} tone="transparent">
+            <Code>3</Code>
+          </Card>
+          <Card padding={[1, 2, 3]} tone="transparent">
+            <Code>4</Code>
+          </Card>
+          <Card padding={[1, 2, 3]} tone="transparent">
+            <Code>5</Code>
+          </Card>
+          <Card padding={[1, 2, 3]} tone="transparent">
+            <Code>6</Code>
+          </Card>
+          <Card padding={[1, 2, 3]} tone="transparent">
+            <Code>7</Code>
+          </Card>
+          <Card padding={[1, 2, 3]} tone="transparent">
+            <Code>8</Code>
+          </Card>
+          <Card padding={[1, 2, 3]} tone="transparent">
+            <Code>9</Code>
+          </Card>
+          <Card padding={[1, 2, 3]} tone="transparent">
+            <Code>10</Code>
+          </Card>
+          <Card padding={[1, 2, 3]} tone="transparent">
+            <Code>11</Code>
+          </Card>
+          <Card padding={[1, 2, 3]} tone="transparent">
+            <Code>12</Code>
+          </Card>
+        </Grid>
+      </Container>
+    </Flex>
+  )
+}

package/src/primitives/grid/grid.tsx

@@ -0,0 +1,44 @@
+import {forwardRef} from 'react'
+import styled from 'styled-components'
+import {useArrayProp} from '../../hooks'
+import {responsiveGridStyle, ResponsiveGridStyleProps} from '../../styles/internal'
+import {Box, BoxProps} from '../box'
+import {ResponsiveGridProps} from '../types'
+
+/**
+ * @public
+ */
+export interface GridProps extends Omit<BoxProps, 'display'>, ResponsiveGridProps {}
+
+const Root = styled(Box)<ResponsiveGridStyleProps>(responsiveGridStyle)
+
+/**
+ * @public
+ */
+export const Grid = forwardRef(function Grid(
+  props: GridProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'rows'>,
+  ref: React.ForwardedRef<HTMLDivElement>
+) {
+  const {as, autoRows, autoCols, autoFlow, columns, gap, gapX, gapY, rows, children, ...restProps} =
+    props
+
+  return (
+    <Root
+      data-as={typeof as === 'string' ? as : undefined}
+      data-ui="Grid"
+      {...restProps}
+      $autoRows={useArrayProp(autoRows)}
+      $autoCols={useArrayProp(autoCols)}
+      $autoFlow={useArrayProp(autoFlow)}
+      $columns={useArrayProp(columns)}
+      $gap={useArrayProp(gap)}
+      $gapX={useArrayProp(gapX)}
+      $gapY={useArrayProp(gapY)}
+      $rows={useArrayProp(rows)}
+      forwardedAs={as}
+      ref={ref}
+    >
+      {children}
+    </Root>
+  )
+})

package/src/primitives/grid/index.ts

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

package/src/primitives/heading/__workshop__/.eslintrc

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

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

@@ -0,0 +1,19 @@
+import {defineScope} from '@sanity/ui-workshop'
+import {lazy} from 'react'
+
+export default defineScope({
+  name: 'primitives/heading',
+  title: 'Heading',
+  stories: [
+    {
+      name: 'plain',
+      title: 'Plain',
+      component: lazy(() => import('./plain')),
+    },
+    {
+      name: 'optical-alignment',
+      title: 'Optical alignment',
+      component: lazy(() => import('./opticalAlignment')),
+    },
+  ],
+})

package/src/primitives/heading/__workshop__/opticalAlignment.tsx

@@ -0,0 +1,66 @@
+import {AddCircleIcon} from '@sanity/icons'
+import {Box, Card, Flex, Heading, Stack} from '@sanity/ui'
+
+export default function OpticalAlignment() {
+  return (
+    <Box padding={[4, 5, 6]}>
+      <Stack space={1}>
+        <Flex>
+          <Card padding={0} scheme="dark">
+            <Heading accent size={5}>
+              Hamburgefonstiv M
+            </Heading>
+          </Card>
+        </Flex>
+
+        <Flex>
+          <Card padding={0} scheme="dark">
+            <Heading accent size={4}>
+              Hamburgefonstiv M
+            </Heading>
+          </Card>
+        </Flex>
+
+        <Flex>
+          <Card padding={0} scheme="dark">
+            <Heading accent size={3}>
+              Hamburgefonstiv M
+            </Heading>
+          </Card>
+        </Flex>
+
+        <Flex>
+          <Card padding={0} scheme="dark">
+            <Heading accent size={2}>
+              Hamburgefonstiv M
+            </Heading>
+          </Card>
+        </Flex>
+
+        <Flex>
+          <Card padding={0} scheme="dark">
+            <Heading accent size={1}>
+              Hamburgefonstiv M
+            </Heading>
+          </Card>
+        </Flex>
+
+        <Flex>
+          <Card padding={0} scheme="dark">
+            <Heading accent size={0}>
+              Hamburgefonstiv M
+            </Heading>
+          </Card>
+        </Flex>
+
+        <Flex>
+          <Card padding={2} scheme="dark">
+            <Heading accent>
+              <AddCircleIcon />
+            </Heading>
+          </Card>
+        </Flex>
+      </Stack>
+    </Box>
+  )
+}

package/src/primitives/heading/__workshop__/plain.tsx

@@ -0,0 +1,31 @@
+import {Flex, Heading} from '@sanity/ui'
+import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
+import {
+  WORKSHOP_HEADING_FONT_SIZE_OPTIONS,
+  WORKSHOP_FONT_WEIGHT_OPTIONS,
+  WORKSHOP_TEXT_OVERFLOW_OPTIONS,
+} from '../../../__workshop__/constants'
+
+export default function PlainStory() {
+  const accent = useBoolean('Accent', false, 'Props')
+  const muted = useBoolean('Muted', false, 'Props')
+  const size = useSelect('Size', WORKSHOP_HEADING_FONT_SIZE_OPTIONS, 2, 'Props')
+  const textChild = useText('Text', 'Hello, world', 'Props')
+  const textOverflow =
+    useSelect('Text overflow', WORKSHOP_TEXT_OVERFLOW_OPTIONS, '', 'Props') || undefined
+  const weight = useSelect('Weight', WORKSHOP_FONT_WEIGHT_OPTIONS, '', 'Props') || undefined
+
+  return (
+    <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
+      <Heading
+        accent={accent}
+        muted={muted}
+        size={size}
+        textOverflow={textOverflow}
+        weight={weight}
+      >
+        {textChild}
+      </Heading>
+    </Flex>
+  )
+}