@sanity/ui 1.0.0-next.3 → 1.0.0

package/src/styles/input/textInputStyle.ts

@@ -1,4 +1,4 @@
-import {CSSObject} from 'styled-components'
+import {css, CSSObject, FlattenSimpleInterpolation} from 'styled-components'
 import {ThemeColorSchemeKey, ThemeFontWeightKey} from '../../theme'
 import {CardTone} from '../../types'
 import {focusRingBorderStyle, focusRingStyle} from '../focusRing'
@@ -25,86 +25,90 @@ export interface TextInputRepresentationStyleProps {
   $tone: CardTone
 }
 
-const ROOT_STYLE: CSSObject = {
-  '&:not([hidden])': {
-    display: 'flex',
-  },
+const ROOT_STYLE = css`
+  &:not([hidden]) {
+    display: flex;
+  }
 
-  alignItems: 'center',
-}
+  align-items: center;
+`
 
-export function textInputRootStyle(): CSSObject {
+export function textInputRootStyle(): FlattenSimpleInterpolation {
   return ROOT_STYLE
 }
 
-export function textInputBaseStyle(props: TextInputInputStyleProps & ThemeProps): CSSObject {
+export function textInputBaseStyle(
+  props: TextInputInputStyleProps & ThemeProps
+): FlattenSimpleInterpolation {
   const {theme, $scheme, $tone, $weight} = props
   const font = theme.sanity.fonts.text
   const color = theme.sanity.color.input
 
-  return {
-    appearance: 'none',
-    background: 'none',
-    border: 0,
-    borderRadius: 0,
-    outline: 'none',
-    width: '100%',
-    boxSizing: 'border-box',
-    fontFamily: font.family,
-    fontWeight: ($weight && font.weights[$weight]) || font.weights.regular,
-    margin: 0,
-    position: 'relative',
-    zIndex: 1,
-    display: 'block',
+  return css`
+    appearance: none;
+    background: none;
+    border: 0;
+    border-radius: 0;
+    outline: none;
+    width: 100%;
+    box-sizing: border-box;
+    font-family: ${font.family};
+    font-weight: ${($weight && font.weights[$weight]) || font.weights.regular};
+    margin: 0;
+    position: relative;
+    z-index: 1;
+    display: block;
 
     /* NOTE: This is a hack to disable Chrome’s autofill styles */
-    '&:-webkit-autofill, &:-webkit-autofill:hover, &:-webkit-autofill:focus, &:-webkit-autofill:active':
-      {
-        WebkitTextFillColor: 'var(--input-fg-color) !important',
-        transition: 'background-color 5000s',
-        transitionDelay: '86400s' /* 24h */,
-      },
+    &:-webkit-autofill,
+    &:-webkit-autofill:hover,
+    &:-webkit-autofill:focus,
+    &:-webkit-autofill:active {
+      -webkit-text-fill-color: var(--input-fg-color) !important;
+      transition: background-color 5000s;
+      transition-delay: 86400s /* 24h */;
+    }
 
     /* &:is(textarea) */
-    '&[data-as="textarea"]': {
-      resize: 'none',
-    },
+    &[data-as='textarea'] {
+      resize: none;
+    }
 
-    color: 'var(--input-fg-color)',
+    color: var(--input-fg-color);
 
-    '&::placeholder': {
-      color: 'var(--input-placeholder-color)',
-    },
+    &::placeholder {
+      color: var(--input-placeholder-color);
+    }
 
-    [`&[data-scheme="${$scheme}"][data-tone="${$tone}"]`]: {
-      '--input-fg-color': color.default.enabled.fg,
-      '--input-placeholder-color': color.default.enabled.placeholder,
+    &[data-scheme='${$scheme}'][data-tone='${$tone}'] {
+      --input-fg-color: ${color.default.enabled.fg};
+      --input-placeholder-color: ${color.default.enabled.placeholder};
 
       /* enabled */
-      '&:not(:invalid):not(:disabled):not(:read-only)': {
-        '--input-fg-color': color.default.enabled.fg,
-        '--input-placeholder-color': color.default.enabled.placeholder,
-      },
+      &:not(:invalid):not(:disabled):not(:read-only) {
+        --input-fg-color: ${color.default.enabled.fg};
+        --input-placeholder-color: ${color.default.enabled.placeholder};
+      }
 
       /* disabled */
-      '&:not(:invalid):disabled': {
-        '--input-fg-color': color.default.disabled.fg,
-        '--input-placeholder-color': color.default.disabled.placeholder,
-      },
+      &:not(:invalid):disabled {
+        --input-fg-color: ${color.default.disabled.fg};
+        --input-placeholder-color: ${color.default.disabled.placeholder};
+      }
 
       /* invalid */
-      '&:invalid': {
-        '--input-fg-color': color.invalid.enabled.fg,
-        '--input-placeholder-color': color.invalid.enabled.placeholder,
-      },
+      &:invalid {
+        --input-fg-color: ${color.invalid.enabled.fg};
+        --input-placeholder-color: ${color.invalid.enabled.placeholder};
+      }
 
       /* readOnly */
-      '&:read-only': {
-        '--input-fg-color': color.default.readOnly.fg,
-        '--input-placeholder-color': color.default.readOnly.placeholder,
-      },
-    },
-  }
+      &:read-only {
+        --input-fg-color: ${color.default.readOnly.fg};
+        --input-placeholder-color: ${color.default.readOnly.placeholder};
+      }
+    }
+  `
 }
 
 export function textInputFontSizeStyle(props: TextInputInputStyleProps & ThemeProps): CSSObject[] {
@@ -123,103 +127,103 @@ export function textInputFontSizeStyle(props: TextInputInputStyleProps & ThemePr
 
 export function textInputRepresentationStyle(
   props: TextInputRepresentationStyleProps & ThemeProps
-): CSSObject {
+): FlattenSimpleInterpolation {
   const {$hasPrefix, $hasSuffix, $scheme, $tone, theme} = props
   const {focusRing, input} = theme.sanity
   const color = theme.sanity.color.input
 
-  return {
-    '--input-box-shadow': 'none',
+  return css`
+    --input-box-shadow: none;
 
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    display: 'block',
-    pointerEvents: 'none',
-    zIndex: 0,
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: block;
+    pointer-events: none;
+    z-index: 0;
 
-    backgroundColor: 'var(--card-bg-color)',
-    boxShadow: 'var(--input-box-shadow)',
+    background-color: var(--card-bg-color);
+    box-shadow: var(--input-box-shadow);
 
-    borderTopLeftRadius: $hasPrefix ? 0 : undefined,
-    borderBottomLeftRadius: $hasPrefix ? 0 : undefined,
-    borderTopRightRadius: $hasSuffix ? 0 : undefined,
-    borderBottomRightRadius: $hasSuffix ? 0 : undefined,
+    border-top-left-radius: ${$hasPrefix ? 0 : undefined};
+    border-bottom-left-radius: ${$hasPrefix ? 0 : undefined};
+    border-top-right-radius: ${$hasSuffix ? 0 : undefined};
+    border-bottom-right-radius: ${$hasSuffix ? 0 : undefined};
 
-    [`&[data-scheme="${$scheme}"][data-tone="${$tone}"]`]: {
-      '--card-bg-color': color.default.enabled.bg,
-      '--card-fg-color': color.default.enabled.fg,
+    &[data-scheme='${$scheme}'][data-tone='${$tone}'] {
+      --card-bg-color: ${color.default.enabled.bg};
+      --card-fg-color: ${color.default.enabled.fg};
 
       /* enabled */
-      '*:not(:disabled) + &[data-border]': {
-        '--input-box-shadow': focusRingBorderStyle({
+      *:not(:disabled) + &[data-border] {
+        --input-box-shadow: ${focusRingBorderStyle({
           color: color.default.enabled.border,
           width: input.border.width,
-        }),
-      },
+        })};
+      }
 
       /* invalid */
-      '*:not(:disabled):invalid + &': {
-        '--card-bg-color': color.invalid.enabled.bg,
-        '--card-fg-color': color.invalid.enabled.fg,
+      *:not(:disabled):invalid + & {
+        --card-bg-color: ${color.invalid.enabled.bg};
+        --card-fg-color: ${color.invalid.enabled.fg};
 
-        '&[data-border]': {
-          '--input-box-shadow': focusRingBorderStyle({
+        &[data-border] {
+          --input-box-shadow: ${focusRingBorderStyle({
             color: color.invalid.enabled.border,
             width: input.border.width,
-          }),
-        },
-      },
+          })};
+        }
+      }
 
       /* focused */
-      '*:not(:disabled):focus + &': {
-        '&[data-border]': {
-          '--input-box-shadow': focusRingStyle({
+      *:not(:disabled):focus + & {
+        &[data-border] {
+          --input-box-shadow: ${focusRingStyle({
             border: {color: color.default.enabled.border, width: input.border.width},
             focusRing,
-          }),
-        },
+          })};
+        }
 
-        '&:not([data-border])': {
-          '--input-box-shadow': focusRingStyle({focusRing}),
-        },
-      },
+        &:not([data-border]) {
+          --input-box-shadow: ${focusRingStyle({focusRing})};
+        }
+      }
 
       /* disabled */
-      '*:disabled + &': {
-        '--card-bg-color': `${color.default.disabled.bg} !important`,
-        '--card-fg-color': `${color.default.disabled.fg} !important`,
+      *:disabled + & {
+        --card-bg-color: ${color.default.disabled.bg} !important;
+        --card-fg-color: ${color.default.disabled.fg} !important;
 
-        '&[data-border]': {
-          '--input-box-shadow': focusRingBorderStyle({
+        &[data-border] {
+          --input-box-shadow: ${focusRingBorderStyle({
             color: color.default.disabled.border,
             width: input.border.width,
-          }),
-        },
-      },
+          })};
+        }
+      }
 
       /* readOnly */
-      '*:read-only + &': {
-        '--card-bg-color': `${color.default.readOnly.bg} !important`,
-        '--card-fg-color': `${color.default.readOnly.fg} !important`,
-      },
+      *:read-only + & {
+        --card-bg-color: ${color.default.readOnly.bg} !important;
+        --card-fg-color: ${color.default.readOnly.fg} !important;
+      }
 
       /* hovered */
-      '@media (hover: hover)': {
-        '*:not(:disabled):not(:read-only):not(:invalid):hover + &': {
-          '--card-bg-color': color.default.hovered.bg,
-          '--card-fg-color': color.default.hovered.fg,
-        },
-
-        '*:not(:disabled):not(:read-only):not(:invalid):not(:focus):hover + &[data-border]': {
-          '--input-box-shadow': focusRingBorderStyle({
+      @media (hover: hover) {
+        *:not(:disabled):not(:read-only):not(:invalid):hover + & {
+          --card-bg-color: ${color.default.hovered.bg};
+          --card-fg-color: ${color.default.hovered.fg};
+        }
+
+        *:not(:disabled):not(:read-only):not(:invalid):not(:focus):hover + &[data-border] {
+          --input-box-shadow: ${focusRingBorderStyle({
             color: color.default.hovered.border,
             width: input.border.width,
-          }),
-        },
-      },
-    },
-  }
+          })};
+        }
+      }
+    }
+  `
 }

package/src/styles/margin/marginStyle.ts

@@ -3,17 +3,18 @@ import {_getResponsiveSpace} from '../helpers'
 import {ThemeProps} from '../types'
 import {ResponsiveMarginStyleProps} from './types'
 
-// TODO: refactor this to separate style functions
-export function responsiveMarginStyle(props: ResponsiveMarginStyleProps & ThemeProps): CSSObject[] {
+export function responsiveMarginStyle(
+  props: ResponsiveMarginStyleProps & ThemeProps
+): CSSObject[][] {
   const {theme} = props
 
   return [
-    ..._getResponsiveSpace(theme, ['margin'], props.$margin),
-    ..._getResponsiveSpace(theme, ['marginLeft', 'marginRight'], props.$marginX),
-    ..._getResponsiveSpace(theme, ['marginTop', 'marginBottom'], props.$marginY),
-    ..._getResponsiveSpace(theme, ['marginTop'], props.$marginTop),
-    ..._getResponsiveSpace(theme, ['marginRight'], props.$marginRight),
-    ..._getResponsiveSpace(theme, ['marginBottom'], props.$marginBottom),
-    ..._getResponsiveSpace(theme, ['marginLeft'], props.$marginLeft),
-  ]
+    _getResponsiveSpace(theme, ['margin'], props.$margin),
+    _getResponsiveSpace(theme, ['marginLeft', 'marginRight'], props.$marginX),
+    _getResponsiveSpace(theme, ['marginTop', 'marginBottom'], props.$marginY),
+    _getResponsiveSpace(theme, ['marginTop'], props.$marginTop),
+    _getResponsiveSpace(theme, ['marginRight'], props.$marginRight),
+    _getResponsiveSpace(theme, ['marginBottom'], props.$marginBottom),
+    _getResponsiveSpace(theme, ['marginLeft'], props.$marginLeft),
+  ].filter(Boolean) as CSSObject[][]
 }

package/src/styles/margin/marginsStyle.test.ts

@@ -10,22 +10,24 @@ describe('styles/margin', () => {
   it('should 1', () => {
     const styles = responsiveMarginStyle({$margin: [0], theme})
 
-    expect(styles).toEqual([{margin: 0}])
+    expect(styles).toEqual([[{margin: 0}]])
   })
 
   it('should 2', () => {
     const styles = responsiveMarginStyle({$margin: [0, 1, 2], theme})
 
     expect(styles).toEqual([
-      {
-        margin: 0,
-      },
-      {
-        '@media screen and (min-width: 360px)': {margin: '0.25rem'},
-      },
-      {
-        '@media screen and (min-width: 600px)': {margin: '0.5rem'},
-      },
+      [
+        {
+          margin: 0,
+        },
+        {
+          '@media screen and (min-width: 360px)': {margin: '0.25rem'},
+        },
+        {
+          '@media screen and (min-width: 600px)': {margin: '0.5rem'},
+        },
+      ],
     ])
   })
 })

package/src/styles/padding/paddingStyle.test.ts

@@ -10,22 +10,24 @@ describe('styles/padding', () => {
   it('should 1', () => {
     const styles = responsivePaddingStyle({$padding: [0], theme})
 
-    expect(styles).toEqual([{padding: 0}])
+    expect(styles).toEqual([[{padding: 0}]])
   })
 
   it('should 2', () => {
     const styles = responsivePaddingStyle({$padding: [0, 1, 2], theme})
 
     expect(styles).toEqual([
-      {
-        padding: 0,
-      },
-      {
-        '@media screen and (min-width: 360px)': {padding: '0.25rem'},
-      },
-      {
-        '@media screen and (min-width: 600px)': {padding: '0.5rem'},
-      },
+      [
+        {
+          padding: 0,
+        },
+        {
+          '@media screen and (min-width: 360px)': {padding: '0.25rem'},
+        },
+        {
+          '@media screen and (min-width: 600px)': {padding: '0.5rem'},
+        },
+      ],
     ])
   })
 })

package/src/styles/padding/paddingStyle.ts

@@ -3,19 +3,18 @@ import {_getResponsiveSpace} from '../helpers'
 import {ThemeProps} from '../types'
 import {ResponsivePaddingStyleProps} from './types'
 
-// TODO: refactor this to separate style functions
 export function responsivePaddingStyle(
   props: ResponsivePaddingStyleProps & ThemeProps
-): CSSObject[] {
+): CSSObject[][] {
   const {theme} = props
 
   return [
-    ..._getResponsiveSpace(theme, ['padding'], props.$padding),
-    ..._getResponsiveSpace(theme, ['paddingLeft', 'paddingRight'], props.$paddingX),
-    ..._getResponsiveSpace(theme, ['paddingTop', 'paddingBottom'], props.$paddingY),
-    ..._getResponsiveSpace(theme, ['paddingTop'], props.$paddingTop),
-    ..._getResponsiveSpace(theme, ['paddingRight'], props.$paddingRight),
-    ..._getResponsiveSpace(theme, ['paddingBottom'], props.$paddingBottom),
-    ..._getResponsiveSpace(theme, ['paddingLeft'], props.$paddingLeft),
-  ]
+    _getResponsiveSpace(theme, ['padding'], props.$padding),
+    _getResponsiveSpace(theme, ['paddingLeft', 'paddingRight'], props.$paddingX),
+    _getResponsiveSpace(theme, ['paddingTop', 'paddingBottom'], props.$paddingY),
+    _getResponsiveSpace(theme, ['paddingTop'], props.$paddingTop),
+    _getResponsiveSpace(theme, ['paddingRight'], props.$paddingRight),
+    _getResponsiveSpace(theme, ['paddingBottom'], props.$paddingBottom),
+    _getResponsiveSpace(theme, ['paddingLeft'], props.$paddingLeft),
+  ].filter(Boolean) as CSSObject[][]
 }

package/src/theme/__workshop__/index.ts

@@ -1,25 +1,29 @@
 import {defineScope} from '@sanity/ui-workshop'
 import {lazy} from 'react'
 
-export default defineScope('theme', 'Theme', [
-  {
-    name: 'canvas',
-    title: 'Canvas',
-    component: lazy(() => import('./canvas')),
-  },
-  {
-    name: 'nested-provider',
-    title: 'Nested provider',
-    component: lazy(() => import('./nestedProvider')),
-  },
-  {
-    name: 'layer',
-    title: 'Layer',
-    component: lazy(() => import('./layer')),
-  },
-  {
-    name: 'color',
-    title: 'Color',
-    component: lazy(() => import('./color')),
-  },
-])
+export default defineScope({
+  name: 'theme',
+  title: 'Theme',
+  stories: [
+    {
+      name: 'canvas',
+      title: 'Canvas',
+      component: lazy(() => import('./canvas')),
+    },
+    {
+      name: 'nested-provider',
+      title: 'Nested provider',
+      component: lazy(() => import('./nestedProvider')),
+    },
+    {
+      name: 'layer',
+      title: 'Layer',
+      component: lazy(() => import('./layer')),
+    },
+    {
+      name: 'color',
+      title: 'Color',
+      component: lazy(() => import('./color')),
+    },
+  ],
+})

package/src/utils/boundaryElement/__workshop__/index.ts

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

package/src/utils/elementQuery/__workshop__/index.ts

@@ -1,10 +1,14 @@
 import {defineScope} from '@sanity/ui-workshop'
 import {lazy} from 'react'
 
-export default defineScope('utils/elementQuery', 'ElementQuery', [
-  {
-    name: 'custom-media',
-    title: 'Custom media',
-    component: lazy(() => import('./customMedia')),
-  },
-])
+export default defineScope({
+  name: 'utils/elementQuery',
+  title: 'ElementQuery',
+  stories: [
+    {
+      name: 'custom-media',
+      title: 'Custom media',
+      component: lazy(() => import('./customMedia')),
+    },
+  ],
+})

package/src/utils/layer/__workshop__/index.ts

@@ -1,20 +1,24 @@
 import {defineScope} from '@sanity/ui-workshop'
 import {lazy} from 'react'
 
-export default defineScope('utils/layer', 'Layer', [
-  {
-    name: 'plain',
-    title: 'Plain',
-    component: lazy(() => import('./plain')),
-  },
-  {
-    name: 'multiple-roots',
-    title: 'Multiple roots',
-    component: lazy(() => import('./multipleRoots')),
-  },
-  {
-    name: 'responsive-z-offset',
-    title: 'Responsive z-offset',
-    component: lazy(() => import('./responsiveZOffset')),
-  },
-])
+export default defineScope({
+  name: 'utils/layer',
+  title: 'Layer',
+  stories: [
+    {
+      name: 'plain',
+      title: 'Plain',
+      component: lazy(() => import('./plain')),
+    },
+    {
+      name: 'multiple-roots',
+      title: 'Multiple roots',
+      component: lazy(() => import('./multipleRoots')),
+    },
+    {
+      name: 'responsive-z-offset',
+      title: 'Responsive z-offset',
+      component: lazy(() => import('./responsiveZOffset')),
+    },
+  ],
+})

package/src/utils/layer/layer.tsx

@@ -1,4 +1,4 @@
-import {forwardRef, memo} from 'react'
+import {forwardRef} from 'react'
 import styled from 'styled-components'
 import {EMPTY_RECORD} from '../../constants'
 import {LayerProvider} from './layerProvider'
@@ -16,11 +16,9 @@ interface LayerChildrenProps {
   as?: React.ElementType | keyof JSX.IntrinsicElements
 }
 
-const Root = memo(
-  styled.div({
-    position: 'relative',
-  })
-)
+const Root = styled.div`
+  position: relative;
+`
 
 const LayerChildren = forwardRef(function LayerChildren(
   props: LayerChildrenProps & Omit<React.HTMLProps<HTMLDivElement>, 'as'>,

package/src/utils/portal/__workshop__/index.ts

@@ -1,10 +1,14 @@
 import {defineScope} from '@sanity/ui-workshop'
 import {lazy} from 'react'
 
-export default defineScope('utils/portal', 'Portal', [
-  {
-    name: 'named',
-    title: 'Named portals',
-    component: lazy(() => import('./named')),
-  },
-])
+export default defineScope({
+  name: 'utils/portal',
+  title: 'Portal',
+  stories: [
+    {
+      name: 'named',
+      title: 'Named portals',
+      component: lazy(() => import('./named')),
+    },
+  ],
+})