@sanity/ui 3.0.0-static.8 → 3.0.0

package/exports/css.ts

@@ -1 +0,0 @@
-export * from '../src/css'

package/src/cli/buildCommand.ts

@@ -1,48 +0,0 @@
-import {compilePalette, compileSystem, compileTheme} from '@sanity/ui/css'
-import {buildTheme_v3, RootTheme} from '@sanity/ui/theme'
-import fs from 'fs/promises'
-import path from 'path'
-
-async function buildPalette(outDir: string) {
-  const css = compilePalette()
-
-  await fs.mkdir(outDir, {recursive: true})
-
-  await fs.writeFile(path.resolve(outDir, 'sanity-palette.css'), css, 'utf-8')
-
-  // eslint-disable-next-line no-console
-  console.log('- sanity-palette.css')
-}
-
-async function buildTheme(outDir: string) {
-  const css = compileTheme({v3: buildTheme_v3()} as RootTheme)
-
-  await fs.mkdir(outDir, {recursive: true})
-
-  await fs.writeFile(path.resolve(outDir, 'sanity-theme.css'), css, 'utf-8')
-
-  // eslint-disable-next-line no-console
-  console.log('- sanity-theme.css')
-}
-
-async function buildSystem(outDir: string) {
-  const css = compileSystem()
-
-  await fs.mkdir(outDir, {recursive: true})
-
-  await fs.writeFile(path.resolve(outDir, 'system.css'), css, 'utf-8')
-
-  // eslint-disable-next-line no-console
-  console.log('- system.css')
-}
-
-export async function buildCommand(options: {cwd?: string; outDir?: string}): Promise<void> {
-  const cwd = options.cwd ?? process.cwd()
-  const outDir = options.outDir ?? path.resolve(cwd, 'dist')
-
-  await buildPalette(outDir)
-
-  await buildTheme(outDir)
-
-  await buildSystem(outDir)
-}

package/src/cli/index.ts

@@ -1,38 +0,0 @@
-import cac from 'cac'
-
-import {version} from '../../package.json'
-
-const cli = cac('ui')
-
-// cli
-//   .command('dev')
-//   .option('--cwd [cwd]', 'Output directory')
-//   .action(async (options) => {
-//     const {devCommand} = await import('./devCommand')
-
-//     await devCommand({
-//       ...options,
-//       cwd: options.cwd || process.cwd(),
-//     })
-//   })
-
-cli
-  .command('build')
-  .option('--cwd [cwd]', 'Working directory')
-  .option('--outDir [outDir]', 'Output directory')
-  .action(async (options) => {
-    const {buildCommand} = await import('./buildCommand')
-
-    await buildCommand({
-      ...options,
-      cwd: options.cwd || process.cwd(),
-    })
-  })
-
-cli.command('').action(() => {
-  cli.outputHelp()
-})
-
-cli.help()
-cli.version(version)
-cli.parse()

package/src/css/_comp.test.ts

@@ -1,7 +0,0 @@
-import {_comp} from './_comp'
-
-it('should compose class names', () => {
-  const result = _comp('foo', 'bar baz', undefined, false)
-
-  expect(result).toBe('s-foo s-bar s-baz')
-})

package/src/css/_comp.ts

@@ -1,11 +0,0 @@
-import {getClassNames} from './composeClassNames'
-import {scopeClassName} from './scopeClassName'
-
-export function _comp(...classNames: Array<string | false | undefined>): string | undefined {
-  return (
-    getClassNames(...classNames)
-      .filter(Boolean)
-      .map(scopeClassName)
-      .join(' ') || undefined
-  )
-}

package/src/css/_mergeStyles.ts

@@ -1,31 +0,0 @@
-// import type {Style, StyleKeyframes, StyleLayers, StyleRules} from '@sanity/css'
-
-import {Style, StyleKeyframes, StyleLayers, StyleRules} from './types'
-
-/** @internal */
-export function _mergeStyles(styles: Style[]): Style {
-  const keyframes: StyleKeyframes = {}
-  const layers: StyleLayers = {}
-  const rules: StyleRules = {}
-
-  for (const s of styles) {
-    if (!s) {
-      // TODO: should not happen
-      continue
-    }
-
-    Object.assign(keyframes, s.keyframes)
-
-    for (const layerName in s.layers) {
-      if (!layers[layerName]) {
-        layers[layerName] = {}
-      }
-
-      Object.assign(layers[layerName], s.layers[layerName])
-    }
-
-    Object.assign(rules, s.rules)
-  }
-
-  return {keyframes, layers, rules}
-}

package/src/css/_resp.ts

@@ -1,38 +0,0 @@
-// import {scopeClassName as _} from './scopeClassName'
-import {ResponsiveProp} from './types'
-
-function _(className: string) {
-  return className
-}
-
-export function _resp<T>(
-  prefix: string | undefined,
-  prop: ResponsiveProp<T> | undefined,
-): string | undefined {
-  if (prop === undefined || prop === false) {
-    return undefined
-  }
-
-  if (Array.isArray(prop)) {
-    return prop
-      .map((value, index) => {
-        if (value === undefined || (typeof prop === 'boolean' && prop === false)) return undefined
-
-        const className = (typeof value === 'boolean' ? [prefix] : [prefix, value])
-          .filter((s) => s === 0 || Boolean(s))
-          .join('-')
-          .replace(/\./g, '_')
-
-        return index === 0 ? _(className) : _(`${index}:${className}`)
-      })
-      .filter(Boolean)
-      .join(' ')
-  }
-
-  return _(
-    (typeof prop === 'boolean' ? [prefix] : [prefix, prop])
-      .filter((s) => s === 0 || Boolean(s))
-      .join('-')
-      .replace(/\./g, '_'),
-  )
-}

package/src/css/_responsiveRule.ts

@@ -1,38 +0,0 @@
-import type {Properties, StyleRules} from './types'
-
-/** @internal */
-export function _responsiveRule(rules: StyleRules, _name: string, properties: Properties): void {
-  const name = _name.replace(/\./g, '_')
-
-  rules[`.${name}`] = properties
-  rules[`.1\\:${name}`] = {
-    '@media': {
-      'screen and (min-width: 360px)': properties,
-    },
-  }
-  rules[`.2\\:${name}`] = {
-    '@media': {
-      'screen and (min-width: 600px)': properties,
-    },
-  }
-  rules[`.3\\:${name}`] = {
-    '@media': {
-      'screen and (min-width: 900px)': properties,
-    },
-  }
-  rules[`.4\\:${name}`] = {
-    '@media': {
-      'screen and (min-width: 1200px)': properties,
-    },
-  }
-  rules[`.5\\:${name}`] = {
-    '@media': {
-      'screen and (min-width: 1800px)': properties,
-    },
-  }
-  rules[`.6\\:${name}`] = {
-    '@media': {
-      'screen and (min-width: 2400px)': properties,
-    },
-  }
-}

package/src/css/aspects/border/border.style.ts

@@ -1,13 +0,0 @@
-import {_responsiveRule} from '../../_responsiveRule'
-import {Style, StyleRules} from '../../types'
-import {vars} from '../../vars'
-
-const util: StyleRules = {}
-
-_responsiveRule(util, 'border', {border: `1px solid ${vars.color.border}`})
-_responsiveRule(util, 'border-t', {borderTop: `1px solid ${vars.color.border}`})
-_responsiveRule(util, 'border-r', {borderRight: `1px solid ${vars.color.border}`})
-_responsiveRule(util, 'border-b', {borderBottom: `1px solid ${vars.color.border}`})
-_responsiveRule(util, 'border-l', {borderLeft: `1px solid ${vars.color.border}`})
-
-export const borderStyle: Style = {layers: {util}}

package/src/css/aspects/border/border.ts

@@ -1,14 +0,0 @@
-import {_resp} from '../../_resp'
-import {composeClassNames} from '../../composeClassNames'
-import {BorderStyleProps} from './types'
-
-/** @public */
-export function border(props: BorderStyleProps): string | undefined {
-  return composeClassNames(
-    _resp('border', props.border),
-    _resp('border-t', props.borderTop),
-    _resp('border-r', props.borderRight),
-    _resp('border-b', props.borderBottom),
-    _resp('border-l', props.borderLeft),
-  )
-}

package/src/css/aspects/border/index.ts

@@ -1,2 +0,0 @@
-export * from './border'
-export * from './types'

package/src/css/aspects/border/types.ts

@@ -1,10 +0,0 @@
-import {ResponsiveProp} from '../../types'
-
-/** @public */
-export interface BorderStyleProps {
-  border?: ResponsiveProp<boolean>
-  borderTop?: ResponsiveProp<boolean>
-  borderRight?: ResponsiveProp<boolean>
-  borderBottom?: ResponsiveProp<boolean>
-  borderLeft?: ResponsiveProp<boolean>
-}

package/src/css/aspects/display/display.style.ts

@@ -1,34 +0,0 @@
-import {_responsiveRule} from '../../_responsiveRule'
-import {Style, StyleRules} from '../../types'
-
-const util: StyleRules = {}
-
-_responsiveRule(util, 'block', {
-  '@nest': {'&:not([hidden])': {display: 'block'}},
-})
-
-_responsiveRule(util, 'flex', {
-  '@nest': {'&:not([hidden])': {display: 'flex'}},
-})
-
-_responsiveRule(util, 'grid', {
-  '@nest': {'&:not([hidden])': {display: 'grid'}},
-})
-
-_responsiveRule(util, 'inline-block', {
-  '@nest': {'&:not([hidden])': {display: 'inline-block'}},
-})
-
-_responsiveRule(util, 'inline-flex', {
-  '@nest': {'&:not([hidden])': {display: 'inline-flex'}},
-})
-
-_responsiveRule(util, 'inline-grid', {
-  '@nest': {'&:not([hidden])': {display: 'inline-grid'}},
-})
-
-_responsiveRule(util, 'none', {
-  '@nest': {'&:not([hidden])': {display: 'none'}},
-})
-
-export const displayStyle: Style = {layers: {util}}

package/src/css/aspects/display/display.ts

@@ -1,7 +0,0 @@
-import {_resp} from '../../_resp'
-import {composeClassNames} from '../../composeClassNames'
-import {DisplayStyleProps} from './types'
-
-export function display(props: DisplayStyleProps): string | undefined {
-  return composeClassNames(_resp(undefined, props.display))
-}

package/src/css/aspects/display/index.ts

@@ -1,2 +0,0 @@
-export * from './display'
-export * from './types'

package/src/css/aspects/display/types.ts

@@ -1,17 +0,0 @@
-import {ResponsiveProp} from '../../types'
-
-/**
- * @public
- */
-export type Display =
-  | 'block'
-  | 'inline-block'
-  | 'flex'
-  | 'inline-flex'
-  | 'grid'
-  | 'inline-grid'
-  | 'none'
-
-export interface DisplayStyleProps {
-  display?: ResponsiveProp<Display>
-}

package/src/css/aspects/flex/flex.style.ts

@@ -1,30 +0,0 @@
-// import {responsiveRules} from '../../responsiveRules'
-// import {type Rules} from '../../types'
-
-// export const flexRules: Rules = {
-//   // direction
-//   // ...responsiveRules('row', {flexDirection: 'row'}),
-//   // ...responsiveRules('column', {flexDirection: 'column'}),
-
-//   // align
-//   ...responsiveRules('align-flex-start', {alignItems: 'flex-start'}),
-//   ...responsiveRules('align-flex-end', {alignItems: 'end'}),
-//   ...responsiveRules('align-center', {alignItems: 'center'}),
-//   ...responsiveRules('align-stretch', {alignItems: 'stretch'}),
-//   ...responsiveRules('align-baseline', {alignItems: 'baseline'}),
-
-//   // justify
-//   ...responsiveRules('justify-flex-start', {justifyContent: 'flex-start'}),
-//   ...responsiveRules('justify-flex-end', {justifyContent: 'flex-end'}),
-//   ...responsiveRules('justify-center', {justifyContent: 'center'}),
-//   ...responsiveRules('justify-between', {justifyContent: 'space-between'}),
-//   ...responsiveRules('justify-around', {justifyContent: 'space-around'}),
-//   ...responsiveRules('justify-evenly', {justifyContent: 'space-evenly'}),
-
-//   // wrap
-//   ...responsiveRules('wrap-nowrap', {flexWrap: 'nowrap'}),
-//   ...responsiveRules('wrap-wrap', {flexWrap: 'wrap'}),
-//   ...responsiveRules('wrap-reverse', {flexWrap: 'wrap-reverse'}),
-// }
-
-export {}

package/src/css/aspects/flex/flex.ts

@@ -1,13 +0,0 @@
-import {_resp} from '../../_resp'
-import {composeClassNames} from '../../composeClassNames'
-import {FlexStyleProps} from './types'
-
-/** @public */
-export function flex(props: FlexStyleProps): string | undefined {
-  return composeClassNames(
-    _resp('flex-align', props.align),
-    _resp('f', props.direction),
-    _resp('flex-justify', props.justify),
-    _resp('flex', props.wrap),
-  )
-}

package/src/css/aspects/flex/flexAlign.style.ts

@@ -1,12 +0,0 @@
-import {_responsiveRule} from '../../_responsiveRule'
-import type {Style, StyleRules} from '../../types'
-
-const util: StyleRules = {}
-
-_responsiveRule(util, 'flex-align-flex-start', {alignItems: 'flex-start'})
-_responsiveRule(util, 'flex-align-flex-end', {alignItems: 'flex-end'})
-_responsiveRule(util, 'flex-align-center', {alignItems: 'center'})
-_responsiveRule(util, 'flex-align-stretch', {alignItems: 'stretch'})
-_responsiveRule(util, 'flex-align-baseline', {alignItems: 'baseline'})
-
-export const flexAlignStyle: Style = {layers: {util}}

package/src/css/aspects/flex/flexDirection.style.ts

@@ -1,11 +0,0 @@
-import {_responsiveRule} from '../../_responsiveRule'
-import type {Style, StyleRules} from '../../types'
-
-const util: StyleRules = {}
-
-_responsiveRule(util, 'f-row', {flexDirection: 'row'})
-_responsiveRule(util, 'f-column', {flexDirection: 'column'})
-// _responsiveRule(util, 'f-row-reverse', {flexDirection: 'row-reverse'})
-// _responsiveRule(util, 'f-column-reverse', {flexDirection: 'column-reverse'})
-
-export const flexDirectionStyle: Style = {layers: {util}}

package/src/css/aspects/flex/flexJustify.style.ts

@@ -1,13 +0,0 @@
-import {_responsiveRule} from '../../_responsiveRule'
-import type {Style, StyleRules} from '../../types'
-
-const util: StyleRules = {}
-
-_responsiveRule(util, 'flex-justify-flex-start', {justifyContent: 'flex-start'})
-_responsiveRule(util, 'flex-justify-flex-end', {justifyContent: 'flex-end'})
-_responsiveRule(util, 'flex-justify-center', {justifyContent: 'center'})
-_responsiveRule(util, 'flex-justify-space-between', {justifyContent: 'space-between'})
-_responsiveRule(util, 'flex-justify-space-around', {justifyContent: 'space-around'})
-_responsiveRule(util, 'flex-justify-space-evenly', {justifyContent: 'space-evenly'})
-
-export const flexJustifyStyle: Style = {layers: {util}}

package/src/css/aspects/flex/flexWrap.style.ts

@@ -1,10 +0,0 @@
-import {_responsiveRule} from '../../_responsiveRule'
-import type {Style, StyleRules} from '../../types'
-
-const util: StyleRules = {}
-
-_responsiveRule(util, 'flex-nowrap', {flexWrap: 'nowrap'})
-_responsiveRule(util, 'flex-wrap', {flexWrap: 'wrap'})
-_responsiveRule(util, 'flex-wrap-reverse', {flexWrap: 'wrap-reverse'})
-
-export const flexWrapStyle: Style = {layers: {util}}

package/src/css/aspects/flex/index.ts

@@ -1,2 +0,0 @@
-export * from './flex'
-export * from './types'

package/src/css/aspects/flex/types.ts

@@ -1,35 +0,0 @@
-import {ResponsiveProp} from '../../types'
-
-/**
- * @public
- */
-export type FlexAlign = 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch'
-
-/**
- * @public
- */
-export type FlexDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse'
-
-/**
- * @public
- */
-export type FlexJustify =
-  | 'flex-start'
-  | 'flex-end'
-  | 'center'
-  | 'space-between'
-  | 'space-around'
-  | 'space-evenly'
-
-/**
- * @public
- */
-export type FlexWrap = 'wrap' | 'wrap-reverse' | 'nowrap'
-
-/** @public */
-export interface FlexStyleProps {
-  align?: ResponsiveProp<FlexAlign>
-  direction?: ResponsiveProp<FlexDirection>
-  justify?: ResponsiveProp<FlexJustify>
-  wrap?: ResponsiveProp<FlexWrap>
-}

package/src/css/aspects/flexItem/flex.style.ts

@@ -1,22 +0,0 @@
-import {_responsiveRule} from '../../_responsiveRule'
-import {Style, StyleRules} from '../../types'
-
-const util: StyleRules = {}
-
-_responsiveRule(util, 'f-none', {flex: 'none'})
-_responsiveRule(util, 'f-auto', {flex: 'auto'})
-_responsiveRule(util, 'f-initial', {flex: 'initial'})
-_responsiveRule(util, 'f-1', {flex: 1})
-_responsiveRule(util, 'f-2', {flex: 2})
-_responsiveRule(util, 'f-3', {flex: 3})
-_responsiveRule(util, 'f-4', {flex: 4})
-_responsiveRule(util, 'f-5', {flex: 5})
-_responsiveRule(util, 'f-6', {flex: 6})
-_responsiveRule(util, 'f-7', {flex: 7})
-_responsiveRule(util, 'f-8', {flex: 8})
-_responsiveRule(util, 'f-9', {flex: 9})
-_responsiveRule(util, 'f-10', {flex: 10})
-_responsiveRule(util, 'f-11', {flex: 11})
-_responsiveRule(util, 'f-12', {flex: 12})
-
-export const flexStyle: Style = {layers: {util}}

package/src/css/aspects/flexItem/flexItem.ts

@@ -1,8 +0,0 @@
-import {_resp} from '../../_resp'
-import {composeClassNames} from '../../composeClassNames'
-import {FlexItemStyleProps} from './types'
-
-/** @public */
-export function flexItem(props: FlexItemStyleProps): string | undefined {
-  return composeClassNames(_resp(`f`, props.flex))
-}

package/src/css/aspects/flexItem/index.ts

@@ -1,2 +0,0 @@
-export * from './flexItem'
-export * from './types'

package/src/css/aspects/flexItem/types.ts

@@ -1,27 +0,0 @@
-import {ResponsiveProp} from '../../types'
-
-/**
- * @public
- */
-export type FlexValue =
-  | 'none'
-  | 'auto'
-  | 'initial'
-  | 0
-  | 1
-  | 2
-  | 3
-  | 4
-  | 5
-  | 6
-  | 7
-  | 8
-  | 9
-  | 10
-  | 11
-  | 12
-
-/** @public */
-export interface FlexItemStyleProps {
-  flex?: ResponsiveProp<FlexValue>
-}