@sanity/ui 1.0.0-next.3 → 1.0.0

package/src/primitives/select/styles.ts

@@ -1,4 +1,4 @@
-import {CSSObject} from 'styled-components'
+import {css, CSSObject, FlattenSimpleInterpolation} from 'styled-components'
 import {rem, _responsive, ThemeProps} from '../../styles'
 import {
   focusRingBorderStyle,
@@ -9,98 +9,98 @@ import {
 } from '../../styles/internal'
 import {ThemeFontSize} from '../../theme'
 
-function rootStyle(): CSSObject {
-  return {
-    position: 'relative',
-    width: 'stretch',
+function rootStyle(): FlattenSimpleInterpolation {
+  return css`
+    position: relative;
+    width: stretch;
 
-    '&:not([hidden])': {
-      display: 'inline-block',
-    },
-  }
+    &:not([hidden]) {
+      display: inline-block;
+    }
+  `
 }
 
-function inputBaseStyle(props: ThemeProps): CSSObject {
+function inputBaseStyle(props: ThemeProps): FlattenSimpleInterpolation {
   const {theme} = props
   const font = theme.sanity.fonts.text
 
-  return {
-    WebkitFontSmoothing: 'antialiased',
-    appearance: 'none',
-    border: 0,
-    fontFamily: font.family,
-    color: 'inherit',
-    width: '100%',
-    outline: 'none',
-    margin: 0,
-
-    '&:disabled': {
-      opacity: 1,
-    },
-  }
+  return css`
+    -webkit-font-smoothing: antialiased;
+    appearance: none;
+    border: 0;
+    font-family: ${font.family};
+    color: inherit;
+    width: 100%;
+    outline: none;
+    margin: 0;
+
+    &:disabled {
+      opacity: 1;
+    }
+  `
 }
 
-function inputColorStyle(props: ThemeProps): CSSObject {
+function inputColorStyle(props: ThemeProps) {
   const {theme} = props
   const {focusRing, input} = theme.sanity
   const color = theme.sanity.color.input
 
-  return {
+  return css`
     /* enabled */
-    backgroundColor: color.default.enabled.bg,
-    color: color.default.enabled.fg,
-    boxShadow: focusRingBorderStyle({
+    background-color: ${color.default.enabled.bg};
+    color: ${color.default.enabled.fg};
+    box-shadow: ${focusRingBorderStyle({
       color: color.default.enabled.border,
       width: input.border.width,
-    }),
+    })};
 
     /* hovered */
-    '@media (hover: hover)': {
-      '&:not(:disabled):hover': {
-        backgroundColor: color.default.hovered.bg,
-        color: color.default.hovered.fg,
-        boxShadow: focusRingBorderStyle({
+    @media (hover: hover) {
+      &:not(:disabled):hover {
+        background-color: ${color.default.hovered.bg};
+        color: ${color.default.hovered.fg};
+        box-shadow: ${focusRingBorderStyle({
           color: color.default.hovered.border,
           width: input.border.width,
-        }),
-      },
-    },
+        })};
+      }
+    }
 
     /* focused */
-    '&:not(:disabled):focus': {
-      boxShadow: focusRingStyle({
+    &:not(:disabled):focus {
+      box-shadow: ${focusRingStyle({
         border: {width: input.border.width, color: color.default.enabled.border},
         focusRing,
-      }),
-    },
+      })};
+    }
 
     /* read-only */
-    '&[data-read-only]': {
-      backgroundColor: color.default.readOnly.bg,
-      color: color.default.readOnly.fg,
-      boxShadow: focusRingBorderStyle({
+    &[data-read-only] {
+      background-color: ${color.default.readOnly.bg};
+      color: ${color.default.readOnly.fg};
+      box-shadow: ${focusRingBorderStyle({
         color: color.default.readOnly.border,
         width: input.border.width,
-      }),
-    },
+      })};
+    }
 
     /* disabled */
-    '&:not([data-read-only]):disabled': {
-      backgroundColor: color.default.disabled.bg,
-      color: color.default.disabled.fg,
-      boxShadow: focusRingBorderStyle({
+    &:not([data-read-only]):disabled {
+      background-color: ${color.default.disabled.bg};
+      color: ${color.default.disabled.fg};
+      box-shadow: ${focusRingBorderStyle({
         color: color.default.disabled.border,
         width: input.border.width,
-      }),
-    },
-  }
+      })};
+    }
+  `
 }
 
-function textSize(size: ThemeFontSize): CSSObject {
+function textSize(size: ThemeFontSize) {
   return {fontSize: rem(size.fontSize), lineHeight: rem(size.lineHeight)}
 }
 
-function inputTextSizeStyle(props: {$fontSize: number[]} & ThemeProps): CSSObject[] {
+function inputTextSizeStyle(props: {$fontSize: number[]} & ThemeProps) {
   const {theme, $fontSize} = props
   const {sizes} = theme.sanity.fonts.text
 
@@ -117,7 +117,7 @@ function inputStyle(): Array<
         $space: number[]
       } & ThemeProps
     ) => CSSObject[])
-  | ((props: ThemeProps) => CSSObject)
+  | ((props: ThemeProps) => FlattenSimpleInterpolation)
 > {
   return [
     responsiveRadiusStyle,
@@ -128,36 +128,36 @@ function inputStyle(): Array<
   ]
 }
 
-function iconBoxStyle(props: ThemeProps): CSSObject {
+function iconBoxStyle(props: ThemeProps): FlattenSimpleInterpolation {
   const {theme} = props
   const color = theme.sanity.color.input
 
-  return {
-    pointerEvents: 'none',
-    position: 'absolute',
-    top: 0,
-    right: 0,
+  return css`
+    pointer-events: none;
+    position: absolute;
+    top: 0;
+    right: 0;
 
     /* enabled */
-    '--card-fg-color': color.default.enabled.fg,
+    --card-fg-color: ${color.default.enabled.fg};
 
     /* hover */
-    '@media (hover: hover)': {
-      'select:not(disabled):not(:read-only):hover + &&': {
-        '--card-fg-color': color.default.hovered.fg,
-      },
-    },
+    @media (hover: hover) {
+      select:not(disabled):not(:read-only):hover + && {
+        --card-fg-color: ${color.default.hovered.fg};
+      }
+    }
 
     /* disabled */
-    'select:disabled + &&': {
-      '--card-fg-color': color.default.disabled.fg,
-    },
+    select:disabled + && {
+      --card-fg-color: ${color.default.disabled.fg};
+    }
 
     /* read-only */
-    'select[data-read-only] + &&': {
-      '--card-fg-color': color.default.readOnly.fg,
-    },
-  }
+    select[data-read-only] + && {
+      --card-fg-color: ${color.default.readOnly.fg};
+    }
+  `
 }
 
 export const selectStyle = {

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

@@ -1,10 +1,14 @@
 import {defineScope} from '@sanity/ui-workshop'
 import {lazy} from 'react'
 
-export default defineScope('primitives/spinner', 'Spinner', [
-  {
-    name: 'props',
-    title: 'Props',
-    component: lazy(() => import('./Props')),
-  },
-])
+export default defineScope({
+  name: 'primitives/spinner',
+  title: 'Spinner',
+  stories: [
+    {
+      name: 'props',
+      title: 'Props',
+      component: lazy(() => import('./Props')),
+    },
+  ],
+})

package/src/primitives/spinner/spinner.tsx

@@ -1,5 +1,5 @@
 import {SpinnerIcon} from '@sanity/icons'
-import {forwardRef, memo} from 'react'
+import {forwardRef} from 'react'
 import styled, {keyframes} from 'styled-components'
 import {Text} from '../text'
 
@@ -21,15 +21,12 @@ const rotate = keyframes`
   }
 `
 
-const RawRoot = styled(Text)`
+const Root = styled(Text)`
   & > span > svg {
     animation: ${rotate} 500ms linear infinite;
   }
 `
 
-// NOTE: workaround for VS Code syntax highlighting
-const Root = memo(RawRoot)
-
 /**
  * @public
  */

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

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

package/src/primitives/stack/stack.tsx

@@ -1,6 +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 {Box, BoxProps} from '../box'
 import {stackBaseStyle, responsiveStackSpaceStyle, ResponsiveStackSpaceStyleProps} from './styles'
 
@@ -12,9 +12,7 @@ export interface StackProps extends BoxProps {
   space?: number | number[]
 }
 
-const Root = memo(
-  compose<ResponsiveStackSpaceStyleProps>(Box, [stackBaseStyle, responsiveStackSpaceStyle])
-)
+const Root = styled(Box)<ResponsiveStackSpaceStyleProps>(stackBaseStyle, responsiveStackSpaceStyle)
 
 /**
  * @public

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

@@ -1,7 +1,11 @@
 import {defineScope} from '@sanity/ui-workshop'
 import {lazy} from 'react'
 
-export default defineScope('primitives/switch', 'Switch', [
-  {name: 'props', title: 'Props', component: lazy(() => import('./props'))},
-  {name: 'example', title: 'Example', component: lazy(() => import('./example'))},
-])
+export default defineScope({
+  name: 'primitives/switch',
+  title: 'Switch',
+  stories: [
+    {name: 'props', title: 'Props', component: lazy(() => import('./props'))},
+    {name: 'example', title: 'Example', component: lazy(() => import('./example'))},
+  ],
+})

package/src/primitives/switch/styles.ts

@@ -1,129 +1,129 @@
-import {CSSObject} from 'styled-components'
+import {css, FlattenSimpleInterpolation} from 'styled-components'
 import {rem, ThemeProps} from '../../styles'
 import {focusRingStyle} from '../../styles/internal'
 
 /* Root */
-export function switchBaseStyles(): CSSObject {
-  return {
-    position: 'relative',
-    '&:not([hidden])': {
-      display: 'inline-block',
-    },
-  }
+export function switchBaseStyles(): FlattenSimpleInterpolation {
+  return css`
+    position: relative;
+    &:not([hidden]) {
+      display: inline-block;
+    }
+  `
 }
 
 /* Input */
-export function switchInputStyles(): CSSObject {
+export function switchInputStyles(): FlattenSimpleInterpolation {
   // Visually hide the input element while keeping it interactive
-  return {
-    position: 'absolute',
-    top: 0,
-    right: 0,
-    bottom: 0,
-    left: 0,
-    opacity: 0,
-    height: '100%',
-    width: '100%',
-    outline: 'none',
-    padding: 0,
-    margin: 0,
+  return css`
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    opacity: 0;
+    height: 100%;
+    width: 100%;
+    outline: none;
+    padding: 0;
+    margin: 0;
 
     /* Place the input element above the representation element */
-    zIndex: 1,
-  }
+    z-index: 1;
+  `
 }
 
 /* Representation */
-export function switchRepresentationStyles(props: ThemeProps): CSSObject {
+export function switchRepresentationStyles(props: ThemeProps): FlattenSimpleInterpolation {
   const {theme} = props
   const {focusRing, input} = theme.sanity
   const color = theme.sanity.color.button.default
 
-  return {
-    '--switch-bg-color': color.default.enabled.bg,
-    '--switch-fg-color': color.default.enabled.fg,
-    '--switch-box-shadow': 'none',
+  return css`
+    --switch-bg-color: ${color.default.enabled.bg};
+    --switch-fg-color: ${color.default.enabled.fg};
+    --switch-box-shadow: none;
 
-    '&:not([hidden])': {
-      display: 'block',
-    },
-    position: 'relative',
-    width: rem(input.switch.width),
-    height: rem(input.switch.height),
-    borderRadius: rem(input.switch.height / 2),
+    &:not([hidden]) {
+      display: block;
+    }
+    position: relative;
+    width: ${rem(input.switch.width)};
+    height: ${rem(input.switch.height)};
+    border-radius: ${rem(input.switch.height / 2)};
 
     /* Make sure it’s not possible to interact with the wrapper element */
-    pointerEvents: 'none',
-
-    '&:after': {
-      content: '""',
-      display: 'block',
-      position: 'absolute',
-      top: 0,
-      left: 0,
-      right: 0,
-      bottom: 0,
-      zIndex: 1,
-      boxShadow: 'var(--switch-box-shadow)',
-      borderRadius: 'inherit',
-    },
+    pointer-events: none;
+
+    &:after {
+      content: '';
+      display: block;
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      z-index: 1;
+      box-shadow: var(--switch-box-shadow);
+      border-radius: inherit;
+    }
 
     /* Focus styles */
-    'input:focus + &&': {
-      '--switch-box-shadow': focusRingStyle({focusRing}),
-    },
-
-    'input:focus:not(:focus-visible) + &&': {
-      '--switch-box-shadow': 'none',
-    },
-
-    'input:checked + &&': {
-      '--switch-bg-color': color.positive.enabled.bg,
-      '--switch-fg-color': color.positive.enabled.fg,
-    },
-
-    '@media (hover: hover)': {
-      'input:not(:disabled):hover + &&': {
-        '--switch-bg-color': color.default.hovered.bg,
-        '--switch-fg-color': color.default.hovered.fg,
-      },
-
-      'input:not(:disabled):checked:hover + &&': {
-        '--switch-bg-color': color.positive.hovered.bg,
-        '--switch-fg-color': color.positive.hovered.fg,
-      },
-    },
-
-    'input:not([data-read-only]):disabled + &&': {
-      '--switch-bg-color': color.default.disabled.bg,
-      '--switch-fg-color': color.default.disabled.fg,
-    },
-  }
+    input:focus + && {
+      --switch-box-shadow: ${focusRingStyle({focusRing})};
+    }
+
+    input:focus:not(:focus-visible) + && {
+      --switch-box-shadow: none;
+    }
+
+    input:checked + && {
+      --switch-bg-color: ${color.positive.enabled.bg};
+      --switch-fg-color: ${color.positive.enabled.fg};
+    }
+
+    @media (hover: hover) {
+      input:not(:disabled):hover + && {
+        --switch-bg-color: ${color.default.hovered.bg};
+        --switch-fg-color: ${color.default.hovered.fg};
+      }
+
+      input:not(:disabled):checked:hover + && {
+        --switch-bg-color: ${color.positive.hovered.bg};
+        --switch-fg-color: ${color.positive.hovered.fg};
+      }
+    }
+
+    input:not([data-read-only]):disabled + && {
+      --switch-bg-color: ${color.default.disabled.bg};
+      --switch-fg-color: ${color.default.disabled.fg};
+    }
+  `
 }
 
 /* Track */
-export function switchTrackStyles(props: ThemeProps): CSSObject {
+export function switchTrackStyles(props: ThemeProps): FlattenSimpleInterpolation {
   const {theme} = props
   const {input} = theme.sanity
 
-  return {
-    '&:not([hidden])': {
-      display: 'block',
-    },
-    backgroundColor: 'var(--switch-bg-color)',
-    position: 'absolute',
-    left: 0,
-    top: 0,
-    width: rem(input.switch.width),
-    height: rem(input.switch.height),
-    borderRadius: rem(input.switch.height / 2),
-  }
+  return css`
+    &:not([hidden]) {
+      display: block;
+    }
+    background-color: var(--switch-bg-color);
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: ${rem(input.switch.width)};
+    height: ${rem(input.switch.height)};
+    border-radius: ${rem(input.switch.height / 2)};
+  `
 }
 
 /* Thumb */
 export function switchThumbStyles(
   props: {$checked?: boolean; $indeterminate?: boolean} & ThemeProps
-): CSSObject {
+): FlattenSimpleInterpolation {
   const {$indeterminate, theme} = props
   const {input} = theme.sanity
   const trackWidth = input.switch.width
@@ -134,23 +134,30 @@ export function switchThumbStyles(
   const indeterminateOffset = trackWidth / 2 - size / 2 - trackPadding
   const checked = $indeterminate !== true && props.$checked === true
 
-  return {
-    '&:not([hidden])': {
-      display: 'block',
-    },
-    position: 'absolute',
-    left: rem(trackPadding),
-    top: rem(trackPadding),
-    height: rem(size),
-    width: rem(size),
-    borderRadius: rem(size / 2),
-    transitionProperty: 'transform',
-    transitionDuration: `${input.switch.transitionDurationMs}ms`,
-    transitionTimingFunction: input.switch.transitionTimingFunction,
-    background: 'var(--switch-fg-color)',
-    transform: 'translate3d(0, 0, 0)',
-
-    ...(checked ? {transform: `translate3d(${checkedOffset}px, 0, 0)`} : {}),
-    ...($indeterminate ? {transform: `translate3d(${indeterminateOffset}px, 0, 0)`} : {}),
-  }
+  return css`
+    &:not([hidden]) {
+      display: block;
+    }
+    position: absolute;
+    left: ${rem(trackPadding)};
+    top: ${rem(trackPadding)};
+    height: ${rem(size)};
+    width: ${rem(size)};
+    border-radius: ${rem(size / 2)};
+    transition-property: transform;
+    transition-duration: ${input.switch.transitionDurationMs}ms;
+    transition-timing-function: ${input.switch.transitionTimingFunction};
+    background: var(--switch-fg-color);
+    transform: translate3d(0, 0, 0);
+
+    ${checked &&
+    css`
+      transform: translate3d(${checkedOffset}px, 0, 0);
+    `}
+
+    ${$indeterminate &&
+    css`
+      transform: translate3d(${indeterminateOffset}px, 0, 0);
+    `}
+  `
 }

package/src/primitives/switch/switch.tsx

@@ -1,4 +1,4 @@
-import {forwardRef, memo, useEffect} from 'react'
+import {forwardRef, useEffect} from 'react'
 import styled from 'styled-components'
 import {useForwardedRef} from '../../hooks'
 import {
@@ -16,11 +16,11 @@ export interface SwitchProps {
   indeterminate?: boolean
 }
 
-const Root = memo(styled.span(switchBaseStyles))
-const Input = memo(styled.input(switchInputStyles))
-const Representation = memo(styled.span(switchRepresentationStyles))
-const Track = memo(styled.span(switchTrackStyles))
-const Thumb = memo(styled.span<{$checked?: boolean; $indeterminate?: boolean}>(switchThumbStyles))
+const Root = styled.span(switchBaseStyles)
+const Input = styled.input(switchInputStyles)
+const Representation = styled.span(switchRepresentationStyles)
+const Track = styled.span(switchTrackStyles)
+const Thumb = styled.span<{$checked?: boolean; $indeterminate?: boolean}>(switchThumbStyles)
 
 /**
  * @public