@sanity/ui 1.0.0-next.3 → 1.0.0

package/src/components/tree/style.ts

@@ -1,105 +1,107 @@
-import {CSSObject} from 'styled-components'
+import {css, FlattenSimpleInterpolation} from 'styled-components'
 import {rem, ThemeProps} from '../../styles'
 import {_colorVarsStyle} from '../../styles/colorVars'
 
-export function treeItemRootStyle(): CSSObject {
-  return {
-    '&[role="none"] > [role="treeitem"]': {
-      outline: 'none',
-      cursor: 'default',
-      borderRadius: '3px',
-
-      '&:focus': {
-        position: 'relative',
-      },
-    },
-
-    '&[role="treeitem"]': {
-      outline: 'none',
-
-      '& > div': {
-        cursor: 'default',
-        borderRadius: '3px',
-      },
-
-      '&:focus > div': {
-        position: 'relative',
-      },
-    },
-  }
+export function treeItemRootStyle(): FlattenSimpleInterpolation {
+  return css`
+    &[role='none'] > [role='treeitem'] {
+      outline: none;
+      cursor: default;
+      border-radius: 3px;
+
+      &:focus {
+        position: relative;
+      }
+    }
+
+    &[role='treeitem'] {
+      outline: none;
+
+      & > div {
+        cursor: default;
+        border-radius: 3px;
+      }
+
+      &:focus > div {
+        position: relative;
+      }
+    }
+  `
 }
 
-export function treeItemRootColorStyle(props: ThemeProps): CSSObject {
+export function treeItemRootColorStyle(props: ThemeProps): FlattenSimpleInterpolation {
   const {theme} = props
   const $tone = 'default'
   const {base, muted, selectable} = theme.sanity.color
   // @todo: remove use of `muted` here
   const tone = selectable ? selectable[$tone] || selectable.default : muted[$tone] || muted.default
 
-  return {
+  return css`
     /* <div role="none"><a data-ui="TreeItem__box" role="treeitem" tabIndex="0"></div> */
-    '&[role="none"]': {
-      '& > [role="treeitem"]': {
-        ..._colorVarsStyle(base, tone.enabled),
+    &[role='none'] {
+      & > [role='treeitem'] {
+        ${_colorVarsStyle(base, tone.enabled)}
 
-        backgroundColor: 'var(--card-bg-color)',
-        color: 'var(--treeitem-fg-color)',
-      },
+        background-color: var(--card-bg-color);
+        color: var(--treeitem-fg-color);
+      }
 
-      '&[data-selected] > [role="treeitem"]': {
-        ..._colorVarsStyle(base, tone.pressed),
-      },
+      &[data-selected] > [role='treeitem'] {
+        ${_colorVarsStyle(base, tone.pressed)}
+      }
 
-      '@media (hover: hover)': {
-        '&:not([data-selected]) > [role="treeitem"]:not(:focus):hover': {
-          ..._colorVarsStyle(base, tone.hovered),
-        },
+      @media (hover: hover) {
+        &:not([data-selected]) > [role='treeitem']:not(:focus):hover {
+          ${_colorVarsStyle(base, tone.hovered)}
+        }
 
-        '& > [role="treeitem"]:focus': {
-          ..._colorVarsStyle(base, tone.selected),
-        },
-      },
-    },
+        & > [role='treeitem']:focus {
+          ${_colorVarsStyle(base, tone.selected)}
+        }
+      }
+    }
 
     /* <div role="treeitem" tabIndex="0"><div data-ui="TreeItem__box"></div> */
-    '&[role="treeitem"]': {
-      '& > [data-ui="TreeItem__box"]': {
-        ..._colorVarsStyle(base, tone.enabled),
-
-        backgroundColor: 'var(--card-bg-color)',
-        color: 'var(--card-fg-color)',
-      },
-
-      '&[data-selected] > [data-ui="TreeItem__box"]': {
-        ..._colorVarsStyle(base, tone.pressed),
-      },
-
-      '@media (hover: hover)': {
-        '&:not([data-selected]):not(:focus) > [data-ui="TreeItem__box"]:hover': {
-          ..._colorVarsStyle(base, tone.hovered),
-        },
-
-        '&:focus > [data-ui="TreeItem__box"]': {
-          ..._colorVarsStyle(base, tone.selected),
-        },
-      },
-    },
-  }
+    &[role='treeitem'] {
+      & > [data-ui='TreeItem__box'] {
+        ${_colorVarsStyle(base, tone.enabled)}
+
+        background-color: var(--card-bg-color);
+        color: var(--card-fg-color);
+      }
+
+      &[data-selected] > [data-ui='TreeItem__box'] {
+        ${_colorVarsStyle(base, tone.pressed)}
+      }
+
+      @media (hover: hover) {
+        &:not([data-selected]):not(:focus) > [data-ui='TreeItem__box']:hover {
+          ${_colorVarsStyle(base, tone.hovered)}
+        }
+
+        &:focus > [data-ui='TreeItem__box'] {
+          ${_colorVarsStyle(base, tone.selected)}
+        }
+      }
+    }
+  `
 }
 
 export interface TreeItemBoxStyleProps {
   $level: number
 }
 
-export function treeItemBoxStyle(props: TreeItemBoxStyleProps & ThemeProps): CSSObject {
+export function treeItemBoxStyle(
+  props: TreeItemBoxStyleProps & ThemeProps
+): FlattenSimpleInterpolation {
   const {$level, theme} = props
   const {space} = theme.sanity
 
-  return {
-    paddingLeft: rem(space[2] * $level),
+  return css`
+    padding-left: ${rem(space[2] * $level)};
 
-    '&[data-as="a"]': {
-      textDecoration: 'none',
-    },
-  }
+    &[data-as='a'] {
+      text-decoration: none;
+    }
+  `
 }

package/src/components/tree/treeItem.tsx

@@ -2,7 +2,6 @@ import {ToggleArrowRightIcon} from '@sanity/icons'
 import {createElement, memo, useCallback, useEffect, useId, useMemo, useRef} from 'react'
 import styled from 'styled-components'
 import {Box, Flex, Text} from '../../primitives'
-import {compose} from '../../styles'
 import {ThemeFontWeightKey} from '../../theme'
 import {
   treeItemRootStyle,
@@ -27,19 +26,15 @@ export interface TreeItemProps {
   weight?: ThemeFontWeightKey
 }
 
-const Root = memo(compose('li', [treeItemRootStyle, treeItemRootColorStyle]))
+const Root = memo(styled.li(treeItemRootStyle, treeItemRootColorStyle))
 
-const TreeItemBox = memo(
-  styled(Box)['attrs']({forwardedAs: 'a'})<TreeItemBoxStyleProps>(treeItemBoxStyle)
-)
+const TreeItemBox = styled(Box).attrs({forwardedAs: 'a'})<TreeItemBoxStyleProps>(treeItemBoxStyle)
 
-const ToggleArrowText = memo(
-  styled(Text)({
-    '& > svg': {
-      transition: 'transform 100ms',
-    },
-  })
-)
+const ToggleArrowText = styled(Text)`
+  & > svg {
+    transition: transform 100ms;
+  }
+`
 
 /**
  * This API might change. DO NOT USE IN PRODUCTION.

package/src/hooks/useElementRect/__workshop__/index.ts

@@ -1,6 +1,14 @@
 import {defineScope} from '@sanity/ui-workshop'
 import {lazy} from 'react'
 
-export default defineScope('hooks/useElementRect', 'useElementRect', [
-  {name: 'example', title: 'Example', component: lazy(() => import('./example'))},
-])
+export default defineScope({
+  name: 'hooks/useElementRect',
+  title: 'useElementRect',
+  stories: [
+    {
+      name: 'example',
+      title: 'Example',
+      component: lazy(() => import('./example')),
+    },
+  ],
+})

package/src/hooks/useMediaIndex/__workshop__/index.ts

@@ -1,6 +1,14 @@
 import {defineScope} from '@sanity/ui-workshop'
 import {lazy} from 'react'
 
-export default defineScope('hooks/use-media-index', 'useMediaIndex', [
-  {name: 'test', title: 'Test', component: lazy(() => import('./test'))},
-])
+export default defineScope({
+  name: 'hooks/use-media-index',
+  title: 'useMediaIndex',
+  stories: [
+    {
+      name: 'test',
+      title: 'Test',
+      component: lazy(() => import('./test')),
+    },
+  ],
+})

package/src/primitives/_selectable/selectable.tsx

@@ -1,4 +1,3 @@
-import {memo} from 'react'
 import styled from 'styled-components'
 import {responsiveRadiusStyle, ResponsiveRadiusStyleProps} from '../../styles/radius'
 import {Box} from '../box'
@@ -7,10 +6,8 @@ import {selectableBaseStyle, selectableColorStyle, SelectableStyleProps} from '.
 /**
  * @internal
  */
-export const Selectable = memo(
-  styled(Box)<SelectableStyleProps & ResponsiveRadiusStyleProps>(
-    responsiveRadiusStyle,
-    selectableBaseStyle,
-    selectableColorStyle
-  )
+export const Selectable = styled(Box)<SelectableStyleProps & ResponsiveRadiusStyleProps>(
+  responsiveRadiusStyle,
+  selectableBaseStyle,
+  selectableColorStyle
 )

package/src/primitives/_selectable/style.ts

@@ -1,4 +1,4 @@
-import {CSSObject} from 'styled-components'
+import {css, FlattenSimpleInterpolation} from 'styled-components'
 import {ThemeProps} from '../../styles'
 import {_colorVarsStyle} from '../../styles/colorVars'
 import {SelectableTone} from '../../types/selectable'
@@ -10,99 +10,102 @@ export interface SelectableStyleProps {
   $tone: SelectableTone
 }
 
-export function selectableBaseStyle(): CSSObject {
-  return {
-    backgroundColor: 'inherit',
-    color: 'inherit',
-
-    '&[data-as="button"]': {
-      WebkitFontSmoothing: 'inherit',
-      appearance: 'none',
-      outline: 'none',
-      font: 'inherit',
-      textAlign: 'inherit',
-      border: 0,
-      width: 'stretch',
-    },
+export function selectableBaseStyle(): FlattenSimpleInterpolation {
+  return css`
+    background-color: inherit;
+    color: inherit;
+
+    &[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"]': {
-      textDecoration: 'none',
-    },
-  }
+    &[data-as='a'] {
+      text-decoration: none;
+    }
+  `
 }
 
-export function selectableColorStyle(props: SelectableStyleProps & ThemeProps): CSSObject {
+export function selectableColorStyle(
+  props: SelectableStyleProps & ThemeProps
+): FlattenSimpleInterpolation {
   const {$tone, theme} = props
   const {base, muted, selectable} = theme.sanity.color
   // @todo: remove use of `muted` here
   const tone = selectable ? selectable[$tone] || selectable.default : muted[$tone] || muted.default
 
-  return {
-    ..._colorVarsStyle(base, tone.enabled),
+  return css`
+    ${_colorVarsStyle(base, tone.enabled)}
 
-    backgroundColor: 'var(--card-bg-color)',
-    color: 'var(--card-fg-color)',
-    outline: 'none',
+    background-color: var(--card-bg-color);
+    color: var(--card-fg-color);
+    outline: none;
 
     /* &:is(button) */
-    '&[data-as="button"]': {
-      '&:disabled': {
-        ..._colorVarsStyle(base, tone.disabled),
-      },
-
-      '&:not(:disabled)': {
-        '&[aria-pressed="true"]': {
-          ..._colorVarsStyle(base, tone.pressed),
-        },
-
-        '&[data-selected], &[aria-selected="true"] > &': {
-          ..._colorVarsStyle(base, tone.selected),
-        },
-
-        '@media (hover: hover)': {
-          '&:not([data-selected])': {
-            '&:hover': {
-              ..._colorVarsStyle(base, tone.hovered),
-            },
-
-            '&:active': {
-              ..._colorVarsStyle(base, tone.pressed),
-            },
-          },
-        },
-      },
-    },
+    &[data-as='button'] {
+      &:disabled {
+        ${_colorVarsStyle(base, tone.disabled)}
+      }
+
+      &:not(:disabled) {
+        &[aria-pressed='true'] {
+          ${_colorVarsStyle(base, tone.pressed)}
+        }
+
+        &[data-selected],
+        &[aria-selected='true'] > & {
+          ${_colorVarsStyle(base, tone.selected)}
+        }
+
+        @media (hover: hover) {
+          &:not([data-selected]) {
+            &:hover {
+              ${_colorVarsStyle(base, tone.hovered)}
+            }
+
+            &:active {
+              ${_colorVarsStyle(base, tone.pressed)}
+            }
+          }
+        }
+      }
+    }
 
     /* &:is(a) */
-    '&[data-as="a"]': {
-      '&[data-disabled]': {
-        ..._colorVarsStyle(base, tone.disabled),
-      },
-
-      '&:not([data-disabled])': {
-        '&[data-pressed]': {
-          ..._colorVarsStyle(base, tone.pressed),
-        },
-
-        '&[data-selected]': {
-          ..._colorVarsStyle(base, tone.selected),
-        },
-
-        '@media (hover: hover)': {
-          '&:not([data-selected])': {
-            '&:hover': {
-              ..._colorVarsStyle(base, tone.hovered),
-            },
-
-            '&:active': {
-              ..._colorVarsStyle(base, tone.pressed),
-            },
-          },
-        },
-      },
-    },
-
-    ...theme.sanity.styles?.card?.root,
-  }
+    &[data-as='a'] {
+      &[data-disabled] {
+        ${_colorVarsStyle(base, tone.disabled)}
+      }
+
+      &:not([data-disabled]) {
+        &[data-pressed] {
+          ${_colorVarsStyle(base, tone.pressed)}
+        }
+
+        &[data-selected] {
+          ${_colorVarsStyle(base, tone.selected)}
+        }
+
+        @media (hover: hover) {
+          &:not([data-selected]) {
+            &:hover {
+              ${_colorVarsStyle(base, tone.hovered)}
+            }
+
+            &:active {
+              ${_colorVarsStyle(base, tone.pressed)}
+            }
+          }
+        }
+      }
+    }
+
+    ${theme.sanity.styles?.card?.root}
+  `
 }

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

@@ -1,15 +1,19 @@
 import {defineScope} from '@sanity/ui-workshop'
 import {lazy} from 'react'
 
-export default defineScope('primitives/avatar', 'Avatar', [
-  {
-    name: 'as-button',
-    title: 'As button',
-    component: lazy(() => import('./asButton')),
-  },
-  {
-    name: 'avatar-stack',
-    title: 'Avatar stack',
-    component: lazy(() => import('./stack')),
-  },
-])
+export default defineScope({
+  name: 'primitives/avatar',
+  title: 'Avatar',
+  stories: [
+    {
+      name: 'as-button',
+      title: 'As button',
+      component: lazy(() => import('./asButton')),
+    },
+    {
+      name: 'avatar-stack',
+      title: 'Avatar stack',
+      component: lazy(() => import('./stack')),
+    },
+  ],
+})

package/src/primitives/avatar/avatar.tsx

@@ -1,12 +1,11 @@
-import {forwardRef, memo, useCallback, useEffect, useId, useMemo, useState} from 'react'
+import {forwardRef, useCallback, useEffect, useId, useMemo, useState} from 'react'
 import ReactIs from 'react-is'
+import styled from 'styled-components'
 import {useArrayProp} from '../../hooks'
-import {compose} from '../../styles'
 import {ThemeColorSpotKey, useTheme} from '../../theme'
 import {AvatarPosition, AvatarSize, AvatarStatus} from '../../types'
 import {Text} from '../text'
 import {avatarStyle, responsiveAvatarSizeStyle} from './styles'
-import {AvatarRootStyleProps, ResponsiveAvatarSizeStyleProps} from './types'
 
 /**
  * @public
@@ -28,20 +27,18 @@ export interface AvatarProps {
   title?: string
 }
 
-const Root = memo(
-  compose<AvatarRootStyleProps & ResponsiveAvatarSizeStyleProps>('div', [
-    responsiveAvatarSizeStyle,
-    avatarStyle.root,
-  ])
+const Root = styled.div<{$color: string; $size: AvatarSize[]}>(
+  responsiveAvatarSizeStyle,
+  avatarStyle.root
 )
 
-const Arrow = memo(compose('div', [avatarStyle.arrow]))
+const Arrow = styled.div(avatarStyle.arrow)
 
-const BgStroke = memo(compose('ellipse', [avatarStyle.bgStroke]))
+const BgStroke = styled.ellipse(avatarStyle.bgStroke)
 
-const Stroke = memo(compose('ellipse', [avatarStyle.stroke]))
+const Stroke = styled.ellipse(avatarStyle.stroke)
 
-const Initials = memo(compose('div', [avatarStyle.initials]))
+const Initials = styled.div(avatarStyle.initials)
 
 /**
  * @public

package/src/primitives/avatar/avatarCounter.tsx

@@ -1,12 +1,12 @@
-import {forwardRef, memo, useMemo} from 'react'
-import {CSSObject} from 'styled-components'
+import {forwardRef, useMemo} from 'react'
+import styled, {css} from 'styled-components'
 import {EMPTY_RECORD} from '../../constants'
 import {useArrayProp} from '../../hooks'
-import {rem, _responsive, ThemeProps, compose} from '../../styles'
+import {rem, _responsive, ThemeProps} from '../../styles'
 import {AvatarSize} from '../../types'
 import {Text} from '../text'
 
-function _responsiveAvatarCounterSizeStyle(props: {$size: AvatarSize[]} & ThemeProps): CSSObject[] {
+function _responsiveAvatarCounterSizeStyle(props: {$size: AvatarSize[]} & ThemeProps) {
   const {theme} = props
   const {avatar, media} = theme.sanity
 
@@ -23,31 +23,29 @@ function _responsiveAvatarCounterSizeStyle(props: {$size: AvatarSize[]} & ThemeP
   })
 }
 
-function _avatarCounterBaseStyle(props: ThemeProps): CSSObject {
+function _avatarCounterBaseStyle(props: ThemeProps) {
   const {theme} = props
 
-  return {
-    alignItems: 'center',
-    justifyContent: 'center',
-    boxSizing: 'border-box',
-    userSelect: 'none',
-    // color: 'inherit',
-    color: 'var(--card-fg-color)',
-    background: 'var(--card-bg-color)',
-    boxShadow: '0 0 0 1px var(--card-bg-color), inset 0 0 0 1.5px var(--card-hairline-hard-color)',
-    padding: `0 ${rem(theme.sanity.space[2])}`,
+  return css`
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    user-select: none;
+    color: inherit;
+    color: var(--card-fg-color);
+    background: var(--card-bg-color);
+    box-shadow: 0 0 0 1px var(--card-bg-color), inset 0 0 0 1.5px var(--card-hairline-hard-color);
+    padding: 0 ${rem(theme.sanity.space[2])};
 
-    '&:not([hidden])': {
-      display: 'flex',
-    },
-  }
+    &:not([hidden]) {
+      display: flex;
+    }
+  `
 }
 
-const Root = memo(
-  compose<{$size: AvatarSize[]}>('div', [
-    _responsiveAvatarCounterSizeStyle,
-    _avatarCounterBaseStyle,
-  ])
+const Root = styled.div<{$size: AvatarSize[]}>(
+  _responsiveAvatarCounterSizeStyle,
+  _avatarCounterBaseStyle
 )
 
 /**

package/src/primitives/avatar/avatarStack.tsx

@@ -1,22 +1,26 @@
-import {cloneElement, forwardRef, memo} from 'react'
-import {CSSObject} from 'styled-components'
+import {cloneElement, forwardRef} from 'react'
+import styled, {css} from 'styled-components'
 import {EMPTY_RECORD} from '../../constants'
 import {useArrayProp} from '../../hooks'
-import {rem, _responsive, ThemeProps, compose} from '../../styles'
+import {rem, _responsive, ThemeProps} from '../../styles'
 import {AvatarSize} from '../../types'
 import {childrenToElementArray} from '../helpers'
 import {AvatarCounter} from './avatarCounter'
 
-const BASE_STYLES: CSSObject = {
-  whiteSpace: 'nowrap',
+const BASE_STYLES = css`
+  white-space: nowrap;
 
-  '& > div': {
-    verticalAlign: 'top',
+  & > div {
+    vertical-align: top;
 
-    '&:not([hidden])': {
-      display: 'inline-block',
-    },
-  },
+    &:not([hidden]) {
+      display: inline-block;
+    }
+  }
+`
+
+function avatarStackStyle() {
+  return BASE_STYLES
 }
 
 function responsiveAvatarStackSizeStyle(props: {$size: AvatarSize[]} & ThemeProps) {
@@ -36,9 +40,7 @@ function responsiveAvatarStackSizeStyle(props: {$size: AvatarSize[]} & ThemeProp
   })
 }
 
-const Root = memo(
-  compose<{$size: AvatarSize[]}>('div', [responsiveAvatarStackSizeStyle, BASE_STYLES])
-)
+const Root = styled.div<{$size: AvatarSize[]}>(responsiveAvatarStackSizeStyle, avatarStackStyle)
 
 /**
  * @public