@sanity/ui 1.0.0-next.3 → 1.0.0

package/src/__workshop__/color/overview.tsx

@@ -1,101 +0,0 @@
-import {black, ColorTints, ColorValue, COLOR_HUES, hues, white} from '@sanity/color'
-import {Box, Card, Code, Flex, Grid, Heading, Stack, useToast} from '@sanity/ui'
-import {useCallback} from 'react'
-import {hexToRgb, rgbToHsl} from '../../theme'
-
-function ucfirst(str: string) {
-  return str.slice(0, 1).toUpperCase() + str.slice(1)
-}
-
-const clipboard = {
-  write(text: string) {
-    const type = 'text/plain'
-    const blob = new Blob([text], {type})
-    const data = [new ClipboardItem({[type]: blob as any})]
-
-    return navigator.clipboard.write(data)
-  },
-}
-
-export default function ColorOverviewStory(): React.ReactElement {
-  return (
-    <Grid columns={[1, 1, 2, 3]} gapX={[4, 4, 5]} gapY={[5, 5, 6]} padding={[4, 5, 6]}>
-      {COLOR_HUES.map((hueKey) => (
-        <ColorHuePreview tints={hues[hueKey]} hueKey={hueKey} key={hueKey} />
-      ))}
-    </Grid>
-  )
-}
-
-function ColorHuePreview(props: {hueKey: string; tints: ColorTints}) {
-  const {hueKey, tints} = props
-
-  return (
-    <Box>
-      <Heading as="h2" size={1}>
-        {ucfirst(hueKey)}
-      </Heading>
-
-      <Stack marginTop={[3, 3, 4]} space={1}>
-        {Object.entries(tints).map(([tintKey, tint]) => {
-          return <ColorTintPreview key={tintKey} tint={tint} />
-        })}
-      </Stack>
-    </Box>
-  )
-}
-
-function ColorTintPreview(props: {tint: ColorValue}) {
-  const {tint} = props
-  const hsl = rgbToHsl(hexToRgb(tint.hex))
-  const {push: pushToast} = useToast()
-
-  const handleClick = useCallback(() => {
-    clipboard
-      .write(tint.hex)
-      .then(() => {
-        pushToast({
-          title: (
-            <>
-              Copied {tint.title} (<code>{tint.hex}</code>) to clipboard!
-            </>
-          ),
-        })
-      })
-      .catch((err) => {
-        // eslint-disable-next-line no-console
-        console.log(err)
-        pushToast({
-          status: 'error',
-          title: <>Copied not write to clipboard!</>,
-        })
-      })
-  }, [pushToast, tint])
-
-  return (
-    <Card
-      __unstable_focusRing
-      as="button"
-      onClick={handleClick}
-      radius={2}
-      style={{
-        ['--card-bg-color' as any]: tint.hex,
-        ['--card-fg-color' as any]: hsl.l < 50 ? white.hex : black.hex,
-        cursor: 'pointer',
-      }}
-    >
-      <Flex padding={3}>
-        <Box flex={1}>
-          <Code size={1} style={{color: 'inherit'}}>
-            {tint.title}
-          </Code>
-        </Box>
-        <Box>
-          <Code size={1} style={{color: 'inherit'}}>
-            {tint.hex}
-          </Code>
-        </Box>
-      </Flex>
-    </Card>
-  )
-}

package/src/__workshop__/index.ts

@@ -1,10 +0,0 @@
-import {defineScope} from '@sanity/ui-workshop'
-import {lazy} from 'react'
-
-export default defineScope('color', 'Color', [
-  {
-    name: 'overview',
-    title: 'Overview',
-    component: lazy(() => import('./color/overview')),
-  },
-])

package/src/icons/__workshop__/.eslintrc

@@ -1,5 +0,0 @@
-{
-  "rules": {
-    "@typescript-eslint/explicit-module-boundary-types": "off"
-  }
-}

package/src/icons/__workshop__/index.tsx

@@ -1,6 +0,0 @@
-import {defineScope} from '@sanity/ui-workshop'
-import {lazy} from 'react'
-
-export default defineScope('icons', 'Icons', [
-  {name: 'overview', title: 'Overview', component: lazy(() => import('./overview'))},
-])

package/src/icons/__workshop__/overview.tsx

@@ -1,76 +0,0 @@
-import {Icon, icons, IconSymbol, SearchIcon} from '@sanity/icons'
-import {Box, Card, Code, Container, Flex, Heading, Stack, Text, TextInput} from '@sanity/ui'
-import {useCallback, useMemo, useState} from 'react'
-import {packages} from '$packages'
-
-function ucfirst(str: string) {
-  return str.slice(0, 1).toUpperCase() + str.slice(1)
-}
-
-function toPascalCase(str: string) {
-  const p = str.split('-')
-
-  return p.map(ucfirst).join('')
-}
-
-export default function OverviewStory() {
-  const [query, setQuery] = useState('')
-
-  const iconKeys = useMemo(() => {
-    return Object.keys(icons).filter((iconKey) => {
-      return query === '' ? true : iconKey.includes(query.toLowerCase())
-    })
-  }, [query])
-
-  const handleQueryChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
-    setQuery(event.currentTarget.value)
-  }, [])
-
-  return (
-    <Card padding={[4, 5, 6]}>
-      <Container width={1}>
-        <Stack space={4}>
-          <Heading as="h1">@sanity/icons v{packages.icons?.version}</Heading>
-          <Text as="p" muted>
-            {packages.icons?.description}
-          </Text>
-          <Card border padding={3} radius={2}>
-            <Code language="bash">{`npm install @sanity/icons\n\n# Install peer dependencies\nnpm install react`}</Code>
-          </Card>
-        </Stack>
-
-        <Box marginTop={[3, 4, 5]} marginBottom={3}>
-          <TextInput
-            icon={SearchIcon}
-            onChange={handleQueryChange}
-            placeholder="Filter by name…"
-            radius={2}
-            value={query}
-          />
-        </Box>
-
-        {iconKeys.length === 0 && <Text>No matches</Text>}
-
-        {iconKeys.length > 0 && (
-          <Stack space={3}>
-            {iconKeys.map((iconKey) => (
-              <Card border key={iconKey} overflow="hidden" radius={2}>
-                <Flex align="center" gap={4} padding={4}>
-                  <Heading>
-                    <Icon symbol={iconKey as IconSymbol} />
-                  </Heading>
-                  <Text>{iconKey}</Text>
-                </Flex>
-                <Card overflow="auto" padding={4} tone="transparent">
-                  <Code language="typescript">{`import {${toPascalCase(
-                    iconKey
-                  )}Icon} from '@sanity/icons'`}</Code>
-                </Card>
-              </Card>
-            ))}
-          </Stack>
-        )}
-      </Container>
-    </Card>
-  )
-}

package/src/styles/compose.ts

@@ -1,35 +0,0 @@
-/* eslint-disable @typescript-eslint/ban-types */
-
-import {ComponentType} from 'react'
-import styled, {CSSObject, DefaultTheme, StyledComponent} from 'styled-components'
-import {ThemeProps} from './types'
-
-/** @internal */
-export interface CSSObjectFactory<P extends {} = {}> {
-  (props: P & ThemeProps): CSSObject | CSSObject[]
-}
-
-const EMPTY_CSS: CSSObject = {}
-
-/** @internal */
-export function compose<
-  // style props
-  P extends {} = {},
-  // type
-  C extends keyof JSX.IntrinsicElements | ComponentType<any> = any
->(
-  type: C,
-  styles: Array<CSSObjectFactory<P & ThemeProps> | CSSObject>
-): StyledComponent<C, DefaultTheme, P> {
-  if (styles.length === 0) {
-    return styled(type)<P>(EMPTY_CSS)
-  }
-
-  let comp = type
-
-  for (const style of styles) {
-    comp = styled(comp)<P>(style) as any
-  }
-
-  return comp as any
-}

package/src/utils/srOnly/__workshop__/.eslintrc

@@ -1,5 +0,0 @@
-{
-  "rules": {
-    "@typescript-eslint/explicit-module-boundary-types": "off"
-  }
-}