@sanity/ui 1.0.0-next.3 → 1.0.1

package/src/primitives/flex/flex.tsx

@@ -1,17 +1,11 @@
-import {forwardRef, memo} from 'react'
+import {forwardRef} from 'react'
+import styled from 'styled-components'
 import {useArrayProp} from '../../hooks'
-import {compose} from '../../styles'
 import {
+  flexItemStyle,
   FlexItemStyleProps,
+  responsiveFlexStyle,
   ResponsiveFlexStyleProps,
-  __tmp_flexItemStyle,
-  __tmp_flexStyle,
-  responsiveFlexAlignStyle,
-  responsiveFlexDirectionStyle,
-  responsiveFlexGapStyle,
-  responsiveFlexItemStyle,
-  responsiveFlexJustifyStyle,
-  responsiveFlexWrapStyle,
 } from '../../styles/internal'
 import {Box, BoxProps} from '../box'
 import {ResponsiveFlexProps, ResponsiveFlexItemProps} from '../types'
@@ -26,19 +20,9 @@ export interface FlexProps
   gap?: number | number[]
 }
 
-const Root = memo(
-  compose<FlexItemStyleProps & ResponsiveFlexStyleProps>(Box, [
-    // flexItem
-    __tmp_flexItemStyle,
-    responsiveFlexItemStyle,
-    // flex
-    __tmp_flexStyle,
-    responsiveFlexAlignStyle,
-    responsiveFlexGapStyle,
-    responsiveFlexWrapStyle,
-    responsiveFlexJustifyStyle,
-    responsiveFlexDirectionStyle,
-  ])
+const Root = styled(Box)<FlexItemStyleProps & ResponsiveFlexStyleProps>(
+  flexItemStyle,
+  responsiveFlexStyle
 )
 
 /**

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

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

package/src/primitives/grid/grid.tsx

@@ -1,18 +1,7 @@
-import {forwardRef, memo} from 'react'
+import {forwardRef} from 'react'
+import styled from 'styled-components'
 import {useArrayProp} from '../../hooks'
-import {compose} from '../../styles'
-import {
-  responsiveGridAutoColsStyle,
-  responsiveGridAutoFlowStyle,
-  responsiveGridAutoRowsStyle,
-  responsiveGridColumnsStyle,
-  responsiveGridGapStyle,
-  responsiveGridGapXStyle,
-  responsiveGridGapYStyle,
-  responsiveGridRowsStyle,
-  ResponsiveGridStyleProps,
-  __tmp_gridStyle,
-} from '../../styles/internal'
+import {responsiveGridStyle, ResponsiveGridStyleProps} from '../../styles/internal'
 import {Box, BoxProps} from '../box'
 import {ResponsiveGridProps} from '../types'
 
@@ -21,19 +10,7 @@ import {ResponsiveGridProps} from '../types'
  */
 export interface GridProps extends Omit<BoxProps, 'display'>, ResponsiveGridProps {}
 
-const Root = memo(
-  compose<ResponsiveGridStyleProps>(Box, [
-    __tmp_gridStyle,
-    responsiveGridAutoFlowStyle,
-    responsiveGridAutoRowsStyle,
-    responsiveGridAutoColsStyle,
-    responsiveGridColumnsStyle,
-    responsiveGridRowsStyle,
-    responsiveGridGapStyle,
-    responsiveGridGapXStyle,
-    responsiveGridGapYStyle,
-  ])
-)
+const Root = styled(Box)<ResponsiveGridStyleProps>(responsiveGridStyle)
 
 /**
  * @public

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

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

@@ -1,7 +1,6 @@
-import {forwardRef, memo} from 'react'
+import {forwardRef} from 'react'
 import styled from 'styled-components'
 import {useArrayProp} from '../../hooks'
-import {compose} from '../../styles'
 import {
   ResponsiveFontStyleProps,
   responsiveHeadingFont,
@@ -31,22 +30,16 @@ export interface HeadingProps {
   weight?: ThemeFontWeightKey
 }
 
-const Root = memo(
-  compose<HeadingStyleProps & ResponsiveTextAlignStyleProps & ResponsiveFontStyleProps>('div', [
-    headingBaseStyle,
-    responsiveTextAlignStyle,
-    responsiveHeadingFont,
-  ])
-)
+const Root = styled.div<
+  HeadingStyleProps & ResponsiveTextAlignStyleProps & ResponsiveFontStyleProps
+>(headingBaseStyle, responsiveTextAlignStyle, responsiveHeadingFont)
 
-const SpanWithTextOverflow = memo(
-  styled.span({
-    display: 'block',
-    whiteSpace: 'nowrap',
-    textOverflow: 'ellipsis',
-    overflow: 'hidden',
-  })
-)
+const SpanWithTextOverflow = styled.span`
+  display: block;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+`
 
 /**
  * @public

package/src/primitives/heading/styles.ts

@@ -1,42 +1,51 @@
-import {CSSObject} from 'styled-components'
+import {css, FlattenSimpleInterpolation} from 'styled-components'
 import {ThemeProps} from '../../styles'
 import {HeadingStyleProps} from './types'
 
-export function headingBaseStyle(props: HeadingStyleProps & ThemeProps): CSSObject {
+export function headingBaseStyle(
+  props: HeadingStyleProps & ThemeProps
+): FlattenSimpleInterpolation {
   const {$accent, $muted, theme} = props
 
-  return {
-    ...($accent ? {color: 'var(--card-accent-fg-color)'} : {}),
-    ...($muted ? {color: 'var(--card-muted-fg-color)'} : {}),
-
-    '& code': {
-      fontFamily: theme.sanity.fonts.code.family,
-      borderRadius: 1,
-    },
-
-    '& a': {
-      textDecoration: 'none',
-      borderRadius: 1,
-      color: 'var(--card-link-color)',
-      outline: 'none',
-
-      '@media (hover: hover)': {
-        '&:hover': {
-          textDecoration: 'underline',
-        },
-      },
-
-      '&:focus': {
-        boxShadow: '0 0 0 1px var(--card-bg-color), 0 0 0 3px var(--card-focus-ring-color)',
-      },
-
-      '&:focus:not(:focus-visible)': {
-        boxShadow: 'none',
-      },
-    },
-
-    '& [data-sanity-icon]': {
-      verticalAlign: 'baseline',
-    },
-  }
+  return css`
+    ${$accent &&
+    css`
+      color: var(--card-accent-fg-color);
+    `}
+
+    ${$muted &&
+    css`
+      color: var(--card-muted-fg-color);
+    `}
+
+    & code {
+      font-family: ${theme.sanity.fonts.code.family};
+      border-radius: 1px;
+    }
+
+    & a {
+      text-decoration: none;
+      border-radius: 1px;
+      color: var(--card-link-color);
+      outline: none;
+
+      @media (hover: hover) {
+        &:hover {
+          text-decoration: underline;
+        }
+      }
+
+      &:focus {
+        box-shadow: 0 0 0 1px var(--card-bg-color), 0 0 0 3px var(--card-focus-ring-color);
+      }
+
+      &:focus:not(:focus-visible) {
+        box-shadow: none;
+      }
+    }
+
+    & [data-sanity-icon] {
+      vertical-align: baseline;
+    }
+  `
 }

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

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

package/src/primitives/inline/inline.tsx

@@ -1,6 +1,6 @@
-import {forwardRef, memo, useMemo} from 'react'
+import {forwardRef, useMemo} from 'react'
+import styled from 'styled-components'
 import {useArrayProp} from '../../hooks'
-import {compose} from '../../styles'
 import {Box, BoxProps} from '../box'
 import {childrenToElementArray} from '../helpers'
 import {inlineBaseStyle, inlineSpaceStyle} from './styles'
@@ -13,9 +13,7 @@ export interface InlineProps extends Omit<BoxProps, 'display'> {
   space?: number | number[]
 }
 
-const Root = memo(
-  compose<ResponsiveInlineSpaceStyleProps>(Box, [inlineBaseStyle, inlineSpaceStyle])
-)
+const Root = styled(Box)<ResponsiveInlineSpaceStyleProps>(inlineBaseStyle, inlineSpaceStyle)
 
 /**
  * @public

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

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

package/src/primitives/kbd/kbd.tsx

@@ -1,7 +1,6 @@
-import {forwardRef, memo} from 'react'
-import {CSSObject} from 'styled-components'
+import {forwardRef} from 'react'
+import styled, {css} from 'styled-components'
 import {useArrayProp} from '../../hooks'
-import {compose} from '../../styles'
 import {responsiveRadiusStyle, ResponsiveRadiusStyleProps} from '../../styles/internal'
 import {Box} from '../box'
 import {Code} from '../code'
@@ -16,19 +15,19 @@ export interface KBDProps {
   radius?: number | number[]
 }
 
-function kbdStyle(): CSSObject {
-  return {
-    background: 'var(--card-bg-color)',
-    font: 'inherit',
-    boxShadow: 'inset 0 0 0 1px var(--card-hairline-hard-color)',
+function kbdStyle() {
+  return css`
+    background: var(--card-bg-color);
+    font: inherit;
+    box-shadow: inset 0 0 0 1px var(--card-hairline-hard-color);
 
-    '&:not([hidden])': {
-      display: 'inline-block',
-    },
-  }
+    &:not([hidden]) {
+      display: inline-block;
+    }
+  `
 }
 
-const Root = memo(compose<ResponsiveRadiusStyleProps>('kbd', [responsiveRadiusStyle, kbdStyle]))
+const Root = styled.kbd<ResponsiveRadiusStyleProps>(responsiveRadiusStyle, kbdStyle)
 
 /**
  * @public

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

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

package/src/primitives/label/label.tsx

@@ -1,7 +1,6 @@
-import {forwardRef, memo} from 'react'
+import {forwardRef} from 'react'
 import styled from 'styled-components'
 import {useArrayProp} from '../../hooks'
-import {compose} from '../../styles'
 import {responsiveLabelFont, responsiveTextAlignStyle} from '../../styles/internal'
 import {ThemeFontWeightKey} from '../../theme'
 import {TextAlign} from '../../types'
@@ -25,23 +24,19 @@ export interface LabelProps {
   weight?: ThemeFontWeightKey
 }
 
-const Root = memo(
-  compose<{
-    $accent?: boolean
-    $align: TextAlign[]
-    $muted: boolean
-    $size: number[]
-  }>('div', [responsiveLabelFont, responsiveTextAlignStyle, labelBaseStyle])
-)
+const Root = styled.div<{
+  $accent?: boolean
+  $align: TextAlign[]
+  $muted: boolean
+  $size: number[]
+}>(responsiveLabelFont, responsiveTextAlignStyle, labelBaseStyle)
 
-const SpanWithTextOverflow = memo(
-  styled.span({
-    display: 'block',
-    whiteSpace: 'nowrap',
-    textOverflow: 'ellipsis',
-    overflow: 'hidden',
-  })
-)
+const SpanWithTextOverflow = styled.span`
+  display: block;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+`
 
 /**
  * @public

package/src/primitives/label/styles.ts

@@ -1,31 +1,37 @@
-import {CSSObject} from 'styled-components'
+import {css, FlattenSimpleInterpolation} from 'styled-components'
 import {ThemeProps} from '../../styles'
 
 export function labelBaseStyle(
   props: {$accent?: boolean; $muted: boolean} & ThemeProps
-): CSSObject {
+): FlattenSimpleInterpolation {
   const {$accent, $muted, theme} = props
   const {fonts} = theme.sanity
 
-  return {
-    textTransform: 'uppercase',
+  return css`
+    text-transform: uppercase;
 
-    ...($accent ? {color: 'var(--card-accent-fg-color)'} : {}),
+    ${$accent &&
+    css`
+      color: var(--card-accent-fg-color);
+    `}
 
-    ...($muted ? {color: 'var(--card-muted-fg-color)'} : {}),
+    ${$muted &&
+    css`
+      color: var(--card-muted-fg-color);
+    `}
 
-    '& code': {
-      fontFamily: fonts.code.family,
-      borderRadius: 1,
-    },
+    & code {
+      font-family: ${fonts.code.family};
+      border-radius: 1px;
+    }
 
-    '& a': {
-      textDecoration: 'none',
-      borderRadius: 1,
-    },
+    & a {
+      text-decoration: none;
+      border-radius: 1px;
+    }
 
-    '& [data-sanity-icon]': {
-      verticalAlign: 'baseline',
-    },
-  }
+    & [data-sanity-icon] {
+      vertical-align: baseline;
+    }
+  `
 }

package/src/primitives/popover/__workshop__/PlainStory.tsx

@@ -52,7 +52,6 @@ export default function PlainStory() {
               fallbackPlacements={['top', 'bottom']}
               matchReferenceWidth={matchReferenceWidth}
               open={open}
-              overflow="auto"
               padding={padding}
               placement={placement}
               portal={portal}

package/src/primitives/popover/__workshop__/TestStory.tsx

@@ -63,7 +63,6 @@ export default function TestStory(): ReactElement {
                 fallbackPlacements={['left', 'bottom', 'right', 'top']}
                 matchReferenceWidth={matchReferenceWidth}
                 open={open}
-                overflow="auto"
                 padding={3}
                 placement={placement}
                 portal

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

@@ -1,35 +1,39 @@
 import {defineScope} from '@sanity/ui-workshop'
 import {lazy} from 'react'
 
-export default defineScope('primitives/popover', 'Popover', [
-  {
-    name: 'test',
-    title: 'Test',
-    component: lazy(() => import('./TestStory')),
-  },
-  {
-    name: 'plain',
-    title: 'Plain',
-    component: lazy(() => import('./PlainStory')),
-  },
-  {
-    name: 'recursive',
-    title: 'Recursive',
-    component: lazy(() => import('./RecursiveStory')),
-  },
-  {
-    name: 'match-ref-width',
-    title: 'Match reference width',
-    component: lazy(() => import('./MatchReferenceWidthStory')),
-  },
-  {
-    name: 'margins',
-    title: 'Margins',
-    component: lazy(() => import('./MarginsStory')),
-  },
-  {
-    name: 'aligned',
-    title: 'Aligned',
-    component: lazy(() => import('./AlignedStory')),
-  },
-])
+export default defineScope({
+  name: 'primitives/popover',
+  title: 'Popover',
+  stories: [
+    {
+      name: 'test',
+      title: 'Test',
+      component: lazy(() => import('./TestStory')),
+    },
+    {
+      name: 'plain',
+      title: 'Plain',
+      component: lazy(() => import('./PlainStory')),
+    },
+    {
+      name: 'recursive',
+      title: 'Recursive',
+      component: lazy(() => import('./RecursiveStory')),
+    },
+    {
+      name: 'match-ref-width',
+      title: 'Match reference width',
+      component: lazy(() => import('./MatchReferenceWidthStory')),
+    },
+    {
+      name: 'margins',
+      title: 'Margins',
+      component: lazy(() => import('./MarginsStory')),
+    },
+    {
+      name: 'aligned',
+      title: 'Aligned',
+      component: lazy(() => import('./AlignedStory')),
+    },
+  ],
+})

package/src/primitives/popover/constants.ts

@@ -1,10 +1,7 @@
 import {PopoverMargins} from '../../types'
 
 export const DEFAULT_POPOVER_DISTANCE = 4
-
 export const DEFAULT_POPOVER_PADDING = 4
-
 export const DEFAULT_POPOVER_ARROW_WIDTH = 27
 export const DEFAULT_POPOVER_ARROW_HEIGHT = 11
-
 export const DEFAULT_POPOVER_MARGINS: PopoverMargins = [0, 0, 0, 0]