@sanity/ui 1.0.0-next.3 → 1.0.0

package/src/primitives/card/styles.ts

@@ -1,145 +1,150 @@
-import {CSSObject} from 'styled-components'
+import {css, FlattenSimpleInterpolation} from 'styled-components'
 import {ThemeProps} from '../../styles'
 import {_colorVarsStyle} from '../../styles/colorVars'
 import {focusRingBorderStyle, focusRingStyle} from '../../styles/focusRing'
 import {CardStyleProps} from './types'
 
-export function cardBaseStyle(props: CardStyleProps & ThemeProps): CSSObject {
+export function cardStyle(
+  props: CardStyleProps & ThemeProps
+): Array<FlattenSimpleInterpolation | (() => FlattenSimpleInterpolation)> {
+  return [cardBaseStyle(props), cardColorStyle(props)]
+}
+
+export function cardBaseStyle(props: CardStyleProps & ThemeProps): FlattenSimpleInterpolation {
   const {$checkered, theme} = props
   const space = theme.sanity.space
 
-  return {
-    ...($checkered
-      ? {
-          backgroundSize: `${space[3]}px ${space[3]}px`,
-          backgroundPosition: '50% 50%',
-          backgroundImage: 'var(--card-bg-image)',
-        }
-      : {}),
-
-    '&[data-as="button"]': {
-      WebkitFontSmoothing: 'inherit',
-      appearance: 'none',
-      outline: 'none',
-      font: 'inherit',
-      textAlign: 'inherit',
-      border: 0,
-      width: 'stretch',
-    },
+  return css`
+    ${$checkered &&
+    css`
+      background-size: ${space[3]}px ${space[3]}px;
+      background-position: 50% 50%;
+      background-image: var(--card-bg-image);
+    `}
+
+    &[data-as='button'] {
+      -webkit-font-smoothing: inherit;
+      appearance: none;
+      outline: none;
+      font: inherit;
+      text-align: inherit;
+      border: 0;
+      width: stretch;
+    }
 
     /* &:is(a) */
-    '&[data-as="a"]': {
-      outline: 'none',
-      textDecoration: 'none',
-    },
+    &[data-as='a'] {
+      outline: none;
+      text-decoration: none;
+    }
 
     /* &:is(pre) */
-    '&[data-as="pre"]': {
-      font: 'inherit',
-    },
-  }
+    &[data-as='pre'] {
+      font: inherit;
+    }
+  `
 }
 
-export function cardColorStyle(props: CardStyleProps & ThemeProps): CSSObject {
+export function cardColorStyle(props: CardStyleProps & ThemeProps): FlattenSimpleInterpolation {
   const {$checkered, $focusRing, theme} = props
   const {focusRing} = theme.sanity
   const {base, card, dark} = theme.sanity.color
   const border = {width: 0, color: 'var(--card-border-color)'}
 
-  return {
-    colorScheme: dark ? 'dark' : 'light',
+  return css`
+    color-scheme: ${dark ? 'dark' : 'light'};
 
-    ..._colorVarsStyle(base, card.enabled, $checkered),
+    ${_colorVarsStyle(base, card.enabled, $checkered)}
 
-    backgroundColor: 'var(--card-bg-color)',
-    color: 'var(--card-fg-color)',
+    background-color: var(--card-bg-color);
+    color: var(--card-fg-color);
 
     /* &:is(button) */
-    '&[data-as="button"]': {
-      '--card-focus-ring-box-shadow': 'none',
-
-      cursor: 'default',
-      boxShadow: 'var(--card-focus-ring-box-shadow)',
-
-      '&:disabled': {
-        ..._colorVarsStyle(base, card.disabled, $checkered),
-      },
-
-      '&:not(:disabled)': {
-        '&[data-pressed]': {
-          ..._colorVarsStyle(base, card.pressed, $checkered),
-        },
-
-        '&[data-selected]': {
-          ..._colorVarsStyle(base, card.selected, $checkered),
-        },
-
-        '@media (hover: hover)': {
-          '&:not([data-pressed]):not([data-selected])': {
-            '&:hover': {
-              ..._colorVarsStyle(base, card.hovered, $checkered),
-            },
-
-            '&:active': {
-              ..._colorVarsStyle(base, card.pressed, $checkered),
-            },
-          },
-        },
-
-        '&:focus': {
-          '--card-focus-ring-box-shadow': $focusRing
+    &[data-as='button'] {
+      --card-focus-ring-box-shadow: none;
+
+      cursor: default;
+      box-shadow: var(--card-focus-ring-box-shadow);
+
+      &:disabled {
+        ${_colorVarsStyle(base, card.disabled, $checkered)}
+      }
+
+      &:not(:disabled) {
+        &[data-pressed] {
+          ${_colorVarsStyle(base, card.pressed, $checkered)}
+        }
+
+        &[data-selected] {
+          ${_colorVarsStyle(base, card.selected, $checkered)}
+        }
+
+        @media (hover: hover) {
+          &:not([data-pressed]):not([data-selected]) {
+            &:hover {
+              ${_colorVarsStyle(base, card.hovered, $checkered)}
+            }
+
+            &:active {
+              ${_colorVarsStyle(base, card.pressed, $checkered)}
+            }
+          }
+        }
+
+        &:focus {
+          --card-focus-ring-box-shadow: ${$focusRing
             ? focusRingStyle({base, border, focusRing})
-            : undefined,
-        },
+            : undefined};
+        }
 
-        '&:focus:not(:focus-visible)': {
-          '--card-focus-ring-box-shadow': $focusRing ? focusRingBorderStyle(border) : undefined,
-        },
-      },
-    },
+        &:focus:not(:focus-visible) {
+          --card-focus-ring-box-shadow: ${$focusRing ? focusRingBorderStyle(border) : undefined};
+        }
+      }
+    }
 
     /* &:is(a) */
-    '&[data-as="a"]': {
-      cursor: 'pointer',
-      boxShadow: 'var(--card-focus-ring-box-shadow)',
-
-      '&[data-disabled]': {
-        ..._colorVarsStyle(base, card.disabled, $checkered),
-      },
-
-      '&:not([data-disabled])': {
-        '&[data-pressed]': {
-          ..._colorVarsStyle(base, card.pressed, $checkered),
-        },
-
-        '&[data-selected]': {
-          ..._colorVarsStyle(base, card.selected, $checkered),
-        },
-
-        '@media (hover: hover)': {
-          '&:not([data-pressed]):not([data-selected])': {
-            '&:hover': {
-              ..._colorVarsStyle(base, card.hovered, $checkered),
-            },
-
-            '&:active': {
-              ..._colorVarsStyle(base, card.pressed, $checkered),
-            },
-          },
-        },
-
-        '&:focus': {
-          '--card-focus-ring-box-shadow': $focusRing
+    &[data-as='a'] {
+      cursor: pointer;
+      box-shadow: var(--card-focus-ring-box-shadow);
+
+      &[data-disabled] {
+        ${_colorVarsStyle(base, card.disabled, $checkered)}
+      }
+
+      &:not([data-disabled]) {
+        &[data-pressed] {
+          ${_colorVarsStyle(base, card.pressed, $checkered)}
+        }
+
+        &[data-selected] {
+          ${_colorVarsStyle(base, card.selected, $checkered)}
+        }
+
+        @media (hover: hover) {
+          &:not([data-pressed]):not([data-selected]) {
+            &:hover {
+              ${_colorVarsStyle(base, card.hovered, $checkered)}
+            }
+
+            &:active {
+              ${_colorVarsStyle(base, card.pressed, $checkered)}
+            }
+          }
+        }
+
+        &:focus {
+          --card-focus-ring-box-shadow: ${$focusRing
             ? focusRingStyle({base, border, focusRing})
-            : undefined,
-        },
+            : undefined};
+        }
 
-        '&:focus:not(:focus-visible)': {
-          '--card-focus-ring-box-shadow': $focusRing ? focusRingBorderStyle(border) : undefined,
-        },
-      },
-    },
+        &:focus:not(:focus-visible) {
+          --card-focus-ring-box-shadow: ${$focusRing ? focusRingBorderStyle(border) : undefined};
+        }
+      }
+    }
 
-    ...theme.sanity.styles?.card?.root,
-  }
+    ${theme.sanity.styles?.card?.root}
+  `
 }

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

@@ -1,9 +1,13 @@
 import {defineScope} from '@sanity/ui-workshop'
 import {lazy} from 'react'
 
-export default defineScope('primitives/checkbox', 'Checkbox', [
-  {name: 'props', title: 'Props', component: lazy(() => import('./props'))},
-  {name: 'example', title: 'Example', component: lazy(() => import('./example'))},
-  {name: 'read-only', title: 'Read-only', component: lazy(() => import('./readOnly'))},
-  {name: 'multiple-tones', title: 'Multiple tones', component: lazy(() => import('./tones'))},
-])
+export default defineScope({
+  name: 'primitives/checkbox',
+  title: 'Checkbox',
+  stories: [
+    {name: 'props', title: 'Props', component: lazy(() => import('./props'))},
+    {name: 'example', title: 'Example', component: lazy(() => import('./example'))},
+    {name: 'read-only', title: 'Read-only', component: lazy(() => import('./readOnly'))},
+    {name: 'multiple-tones', title: 'Multiple tones', component: lazy(() => import('./tones'))},
+  ],
+})

package/src/primitives/checkbox/checkbox.tsx

@@ -1,7 +1,7 @@
 import {CheckmarkIcon, RemoveIcon} from '@sanity/icons'
-import {forwardRef, memo, useEffect} from 'react'
+import {forwardRef, useEffect} from 'react'
+import styled from 'styled-components'
 import {useForwardedRef, useCustomValidity} from '../../hooks'
-import {compose} from '../../styles'
 import {checkboxBaseStyles, inputElementStyles} from './styles'
 
 /**
@@ -12,8 +12,8 @@ export interface CheckboxProps {
   customValidity?: string
 }
 
-const Root = memo(compose('div', [checkboxBaseStyles]))
-const Input = memo(compose('input', [inputElementStyles]))
+const Root = styled.div(checkboxBaseStyles)
+const Input = styled.input(inputElementStyles)
 
 /**
  * @public

package/src/primitives/checkbox/styles.ts

@@ -1,95 +1,97 @@
-import {CSSObject} from 'styled-components'
-import {ThemeProps, rem} from '../../styles'
+import {css, FlattenSimpleInterpolation} from 'styled-components'
+import {rem, ThemeProps} from '../../styles'
 import {focusRingBorderStyle, focusRingStyle} from '../../styles/internal'
 
-export function checkboxBaseStyles(): CSSObject {
-  return {
-    position: 'relative',
-    display: 'inline-block',
-  }
+export function checkboxBaseStyles(): FlattenSimpleInterpolation {
+  return css`
+    position: relative;
+    display: inline-block;
+  `
 }
 
-export function inputElementStyles(props: ThemeProps): CSSObject {
+export function inputElementStyles(props: ThemeProps): FlattenSimpleInterpolation {
   const {theme} = props
   const color = theme.sanity.color.input
   const {focusRing, input, radius} = theme.sanity
 
-  return {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    width: '100%',
-    height: '100%',
-    outline: 'none',
-    opacity: 0,
-    zIndex: 1,
-    padding: 0,
-    margin: 0,
+  return css`
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    outline: none;
+    opacity: 0;
+    z-index: 1;
+    padding: 0;
+    margin: 0;
 
-    '& + span': {
-      position: 'relative',
-      display: 'block',
-      height: rem(input.checkbox.size),
-      width: rem(input.checkbox.size),
-      boxSizing: 'border-box',
-      boxShadow: focusRingBorderStyle({
+    & + span {
+      position: relative;
+      display: block;
+      height: ${rem(input.checkbox.size)};
+      width: ${rem(input.checkbox.size)};
+      box-sizing: border-box;
+      box-shadow: ${focusRingBorderStyle({
         color: color.default.enabled.border,
         width: input.border.width,
-      }),
-      borderRadius: rem(radius[2]),
-      lineHeight: 1,
-      backgroundColor: color.default.enabled.bg,
-      '& > svg': {
-        display: 'block',
-        position: 'absolute',
-        opacity: 0,
-        height: '100%',
-        width: '100%',
-        '& > path': {
-          vectorEffect: 'non-scaling-stroke',
-          strokeWidth: '2 !important',
-        },
-      },
-    },
+      })};
+      border-radius: ${rem(radius[2])};
+      line-height: 1;
+      background-color: ${color.default.enabled.bg};
 
-    '&:not(:disabled):focus + span': {
-      boxShadow: focusRingStyle({
+      & > svg {
+        display: block;
+        position: absolute;
+        opacity: 0;
+        height: 100%;
+        width: 100%;
+
+        & > path {
+          vector-effect: non-scaling-stroke;
+          stroke-width: 2 !important;
+        }
+      }
+    }
+
+    &:not(:disabled):focus + span {
+      box-shadow: ${focusRingStyle({
         border: {width: input.border.width, color: color.default.enabled.border},
         focusRing,
-      }),
-    },
+      })};
+    }
 
-    '&:not(:disabled):focus:not(:focus-visible) + span': {
-      boxShadow: focusRingBorderStyle({
+    &:not(:disabled):focus:not(:focus-visible) + span {
+      box-shadow: ${focusRingBorderStyle({
         color: color.default.enabled.border,
         width: input.border.width,
-      }),
-    },
+      })};
+    }
 
-    '&:checked + span > svg:first-child': {
-      opacity: 1,
-    },
+    &:checked + span > svg:first-child {
+      opacity: 1;
+    }
 
-    '&[data-read-only] + span': {
-      backgroundColor: color.default.readOnly.bg,
-      boxShadow: focusRingBorderStyle({
+    &[data-read-only] + span {
+      background-color: ${color.default.readOnly.bg};
+      box-shadow: ${focusRingBorderStyle({
         width: input.border.width,
         color: color.default.readOnly.border,
-      }),
-      color: color.default.readOnly.fg,
-    },
+      })};
+      color: ${color.default.readOnly.fg};
+    }
 
-    '&:not([data-read-only]):disabled + span': {
-      backgroundColor: color.default.disabled.bg,
-      boxShadow: focusRingBorderStyle({
+    &:not([data-read-only]):disabled + span {
+      background-color: ${color.default.disabled.bg};
+      box-shadow: ${focusRingBorderStyle({
         width: input.border.width,
         color: color.default.disabled.border,
-      }),
-      color: color.default.disabled.fg,
-    },
+      })};
+      color: ${color.default.disabled.fg};
+    }
 
-    '&:indeterminate + span > svg:last-child': {
-      opacity: 1,
-    },
-  }
+    &:indeterminate + span > svg:last-child {
+      opacity: 1;
+    }
+  `
 }

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

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

package/src/primitives/code/code.tsx

@@ -1,7 +1,7 @@
-import {forwardRef, memo} from 'react'
+import {forwardRef} from 'react'
 import Refractor from 'react-refractor'
+import styled from 'styled-components'
 import {useArrayProp} from '../../hooks'
-import {compose} from '../../styles'
 import {responsiveCodeFontStyle, ResponsiveFontStyleProps} from '../../styles/internal'
 import {codeBaseStyle} from './styles'
 
@@ -15,9 +15,7 @@ export interface CodeProps {
   weight?: string
 }
 
-const Root = memo(
-  compose<ResponsiveFontStyleProps>('pre', [codeBaseStyle, responsiveCodeFontStyle])
-)
+const Root = styled.pre<ResponsiveFontStyleProps>(codeBaseStyle, responsiveCodeFontStyle)
 
 /**
  * @public

package/src/primitives/code/styles.ts

@@ -1,8 +1,8 @@
-import {CSSObject} from 'styled-components'
+import {css, FlattenInterpolation, ThemeProps as StyledThemeProps} from 'styled-components'
 import {ThemeProps} from '../../styles'
 import {Theme} from '../../theme'
 
-function codeSyntaxHighlightingStyle({theme}: ThemeProps): CSSObject {
+function codeSyntaxHighlightingStyle({theme}: ThemeProps) {
   const color = theme.sanity.color.syntax
 
   return {
@@ -45,24 +45,26 @@ function codeSyntaxHighlightingStyle({theme}: ThemeProps): CSSObject {
   }
 }
 
-export function codeBaseStyle({theme}: {theme: Theme}): CSSObject {
-  return {
-    color: 'var(--card-code-fg-color)',
+export function codeBaseStyle(): FlattenInterpolation<StyledThemeProps<Theme>> {
+  return css`
+    color: var(--card-code-fg-color);
 
-    '& code': {
-      fontFamily: 'inherit',
+    & code {
+      font-family: inherit;
 
-      '&.refractor .token': codeSyntaxHighlightingStyle({theme}),
-    },
+      &.refractor .token {
+        ${codeSyntaxHighlightingStyle}
+      }
+    }
 
-    '& a': {
-      color: 'inherit',
-      textDecoration: 'underline',
-      borderRadius: '1px',
-    },
+    & a {
+      color: inherit;
+      text-decoration: underline;
+      border-radius: 1px;
+    }
 
-    '& [data-sanity-icon]': {
-      verticalAlign: 'baseline',
-    },
-  }
+    & [data-sanity-icon] {
+      vertical-align: baseline;
+    }
+  `
 }

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

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

package/src/primitives/container/container.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 {ResponsiveWidthProps} from '../types'
 import {containerBaseStyle, responsiveContainerWidthStyle} from './styles'
@@ -11,8 +11,9 @@ import {ResponsiveWidthStyleProps} from './types'
  */
 export interface ContainerProps extends BoxProps, ResponsiveWidthProps {}
 
-const Root = memo(
-  compose<ResponsiveWidthStyleProps>(Box, [containerBaseStyle, responsiveContainerWidthStyle])
+const Root = styled(Box)<ResponsiveWidthStyleProps>(
+  containerBaseStyle,
+  responsiveContainerWidthStyle
 )
 
 /**

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

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