@bettercms-ai/kit 0.1.1 → 1.0.0

package/src/core/primitives/heading/__workshop__/index.ts

@@ -1,19 +0,0 @@
-import {defineScope} from '@bettercms-ai/kit-workshop'
-import {lazy} from 'react'
-
-export default defineScope({
-  name: 'primitives/heading',
-  title: 'Heading',
-  stories: [
-    {
-      name: 'plain',
-      title: 'Plain',
-      component: lazy(() => import('./plain')),
-    },
-    {
-      name: 'optical-alignment',
-      title: 'Optical alignment',
-      component: lazy(() => import('./opticalAlignment')),
-    },
-  ],
-})

package/src/core/primitives/heading/__workshop__/opticalAlignment.tsx

@@ -1,54 +0,0 @@
-import {AddCircleIcon} from '@bettercms-ai/icons'
-import {Box, Card, Flex, Heading, Stack} from '@bettercms-ai/kit'
-
-export default function OpticalAlignment() {
-  return (
-    <Box padding={[4, 5, 6]}>
-      <Stack space={1}>
-        <Flex>
-          <Card padding={0} tone="neutral">
-            <Heading size={5}>Hamburgefonstiv M</Heading>
-          </Card>
-        </Flex>
-
-        <Flex>
-          <Card padding={0} tone="neutral">
-            <Heading size={4}>Hamburgefonstiv M</Heading>
-          </Card>
-        </Flex>
-
-        <Flex>
-          <Card padding={0} tone="neutral">
-            <Heading size={3}>Hamburgefonstiv M</Heading>
-          </Card>
-        </Flex>
-
-        <Flex>
-          <Card padding={0} tone="neutral">
-            <Heading size={2}>Hamburgefonstiv M</Heading>
-          </Card>
-        </Flex>
-
-        <Flex>
-          <Card padding={0} tone="neutral">
-            <Heading size={1}>Hamburgefonstiv M</Heading>
-          </Card>
-        </Flex>
-
-        <Flex>
-          <Card padding={0} tone="neutral">
-            <Heading size={0}>Hamburgefonstiv M</Heading>
-          </Card>
-        </Flex>
-
-        <Flex>
-          <Card padding={2} tone="neutral">
-            <Heading accent>
-              <AddCircleIcon />
-            </Heading>
-          </Card>
-        </Flex>
-      </Stack>
-    </Box>
-  )
-}

package/src/core/primitives/heading/__workshop__/plain.tsx

@@ -1,32 +0,0 @@
-import {Flex, Heading} from '@bettercms-ai/kit'
-import {useBoolean, useSelect, useText} from '@bettercms-ai/kit-workshop'
-
-import {
-  WORKSHOP_FONT_WEIGHT_OPTIONS,
-  WORKSHOP_HEADING_FONT_SIZE_OPTIONS,
-  WORKSHOP_TEXT_OVERFLOW_OPTIONS,
-} from '../../../__workshop__/constants'
-
-export default function PlainStory() {
-  const accent = useBoolean('Accent', false, 'Props')
-  const muted = useBoolean('Muted', false, 'Props')
-  const size = useSelect('Size', WORKSHOP_HEADING_FONT_SIZE_OPTIONS, 2, 'Props')
-  const textChild = useText('Text', 'Hello, world', 'Props')
-  const textOverflow =
-    useSelect('Text overflow', WORKSHOP_TEXT_OVERFLOW_OPTIONS, '', 'Props') || undefined
-  const weight = useSelect('Weight', WORKSHOP_FONT_WEIGHT_OPTIONS, '', 'Props') || undefined
-
-  return (
-    <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
-      <Heading
-        accent={accent}
-        muted={muted}
-        size={size}
-        textOverflow={textOverflow}
-        weight={weight}
-      >
-        {textChild}
-      </Heading>
-    </Flex>
-  )
-}

package/src/core/primitives/heading/heading.tsx

@@ -1,88 +0,0 @@
-import {ThemeFontWeightKey} from '@bettercms-ai/kit/theme'
-import {forwardRef} from 'react'
-import {styled} from 'styled-components'
-
-import {_getArrayProp} from '../../styles'
-import {
-  ResponsiveFontStyleProps,
-  responsiveHeadingFont,
-  responsiveTextAlignStyle,
-  ResponsiveTextAlignStyleProps,
-} from '../../styles/internal'
-import {ElementType, Props, TextAlign} from '../../types'
-import {SpanWithTextOverflow} from '../../utils/spanWithTextOverflow'
-import {headingBaseStyle} from './styles'
-import {HeadingStyleProps} from './types'
-
-/**
- * @public
- */
-export interface HeadingOwnProps {
-  accent?: boolean
-  align?: TextAlign | TextAlign[]
-  muted?: boolean
-  size?: number | number[]
-  /**
-   * Controls how overflowing text is treated.
-   * Use `textOverflow="ellipsis"` to render text as a single line which is concatenated with a `…` symbol.
-   * @beta
-   */
-  textOverflow?: 'ellipsis'
-  weight?: ThemeFontWeightKey
-}
-
-/**
- * @public
- */
-export type HeadingProps<E extends ElementType = 'div'> = Props<HeadingOwnProps, E>
-
-const StyledHeading = styled.div<
-  HeadingStyleProps & ResponsiveTextAlignStyleProps & ResponsiveFontStyleProps
->(headingBaseStyle, responsiveTextAlignStyle, responsiveHeadingFont)
-
-const HeadingComponent = forwardRef(function Heading(
-  props: HeadingOwnProps & {as?: ElementType} & Omit<React.HTMLProps<HTMLElement>, 'as' | 'size'>,
-  ref: React.ForwardedRef<HTMLElement>,
-) {
-  const {
-    accent = false,
-    align,
-    children: childrenProp,
-    muted = false,
-    size = 2,
-    textOverflow,
-    weight,
-    ...restProps
-  } = props
-
-  let children = childrenProp
-
-  if (textOverflow === 'ellipsis') {
-    children = <SpanWithTextOverflow>{children}</SpanWithTextOverflow>
-  }
-
-  return (
-    <StyledHeading
-      data-ui="Heading"
-      {...restProps}
-      $accent={accent}
-      $align={_getArrayProp(align)}
-      $muted={muted}
-      $size={_getArrayProp(size)}
-      $weight={weight}
-      ref={ref}
-    >
-      <span>{children}</span>
-    </StyledHeading>
-  )
-})
-HeadingComponent.displayName = 'ForwardRef(Heading)'
-
-/**
- * Typographic headings.
- *
- * @public
- */
-export const Heading = HeadingComponent as unknown as <E extends ElementType = 'div'>(
-  props: HeadingProps<E>,
-) => React.JSX.Element

package/src/core/primitives/heading/index.ts

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

package/src/core/primitives/heading/styles.ts

@@ -1,64 +0,0 @@
-import {getTheme_v2} from '@bettercms-ai/kit/theme'
-import {css} from 'styled-components'
-
-import {ThemeProps} from '../../styles'
-import {HeadingStyleProps} from './types'
-
-export function headingBaseStyle(props: HeadingStyleProps & ThemeProps): ReturnType<typeof css> {
-  const {$accent, $muted} = props
-  const {font} = getTheme_v2(props.theme)
-
-  return css`
-    ${$accent &&
-    css`
-      color: var(--card-accent-fg-color);
-    `}
-
-    ${$muted &&
-    css`
-      color: var(--card-muted-fg-color);
-    `}
-
-    & code {
-      font-family: ${font.code.family};
-      border-radius: 1px;
-    }
-
-    & a {
-      text-decoration: none;
-      border-radius: 1px;
-      color: var(--card-link-color);
-      outline: none;
-
-      @media (hover: hover) {
-        &:hover {
-          text-decoration: underline;
-        }
-      }
-
-      &:focus {
-        box-shadow:
-          0 0 0 1px var(--card-bg-color),
-          0 0 0 3px var(--card-focus-ring-color);
-      }
-
-      &:focus:not(:focus-visible) {
-        box-shadow: none;
-      }
-    }
-
-    & strong {
-      font-weight: ${font.heading.weights.bold};
-    }
-
-    & svg {
-      /* Certain popular CSS libraries changes the defaults for SVG display */
-      /* Make sure SVGs are rendered as inline elements */
-      display: inline;
-    }
-
-    & [data-bcms-icon] {
-      vertical-align: baseline;
-    }
-  `
-}

package/src/core/primitives/heading/types.ts

@@ -1,7 +0,0 @@
-/**
- * @internal
- */
-export interface HeadingStyleProps {
-  $accent: boolean
-  $muted: boolean
-}

package/src/core/primitives/index.ts

@@ -1,27 +0,0 @@
-export * from './avatar'
-export * from './badge'
-export * from './box'
-export * from './button'
-export * from './card'
-export * from './checkbox'
-export * from './code'
-export * from './container'
-export * from './flex'
-export * from './grid'
-export * from './heading'
-export * from './inline'
-export * from './kbd'
-export * from './label'
-export * from './popover'
-export * from './radio'
-export * from './select'
-export * from './spinner'
-export * from './stack'
-export * from './switch'
-export * from './text'
-export * from './textArea'
-export * from './textInput'
-export * from './tooltip'
-
-// Types
-export * from './types'

package/src/core/primitives/inline/__workshop__/index.ts

@@ -1,8 +0,0 @@
-import {defineScope} from '@bettercms-ai/kit-workshop'
-import {lazy} from 'react'
-
-export default defineScope({
-  name: 'primitives/inline',
-  title: 'Inline',
-  stories: [{name: 'plain', title: 'Plain', component: lazy(() => import('./plain'))}],
-})

package/src/core/primitives/inline/__workshop__/plain.tsx

@@ -1,27 +0,0 @@
-import {Card, Flex, Inline, Text} from '@bettercms-ai/kit'
-import {useAction, useSelect} from '@bettercms-ai/kit-workshop'
-
-import {WORKSHOP_SPACE_OPTIONS} from '../../../__workshop__/constants'
-
-export default function PlainStory() {
-  return (
-    <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
-      <Inline
-        onClick={useAction('onClick')}
-        space={useSelect('Space', WORKSHOP_SPACE_OPTIONS, 0, 'Props')}
-      >
-        <Card padding={1} shadow={1}>
-          <Text size={1}>Inline item</Text>
-        </Card>
-
-        <Card padding={2} shadow={1}>
-          <Text size={1}>Inline item</Text>
-        </Card>
-
-        <Card padding={3} shadow={1}>
-          <Text size={1}>Inline item</Text>
-        </Card>
-      </Inline>
-    </Flex>
-  )
-}

package/src/core/primitives/inline/index.ts

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

package/src/core/primitives/inline/inline.test.tsx

@@ -1,51 +0,0 @@
-/** @jest-environment jsdom */
-
-import {render} from '../../../../test'
-import {Inline} from './inline'
-import {inlineSpaceStyle} from './styles'
-
-jest.mock('./styles', () => {
-  const actual = jest.requireActual('./styles')
-
-  return {
-    ...actual,
-    inlineSpaceStyle: jest.fn(actual.inlineSpaceStyle),
-  }
-})
-
-describe('primitives/inline', () => {
-  const mockedInlineSpaceStyle = jest.mocked(inlineSpaceStyle)
-
-  beforeEach(() => {
-    mockedInlineSpaceStyle.mockClear()
-  })
-
-  it('should support `space` and `gap` with the same behavior', () => {
-    render(
-      <Inline space={2}>
-        <span>One</span>
-        <span>Two</span>
-      </Inline>,
-    )
-    expect(mockedInlineSpaceStyle).toHaveBeenCalledWith(expect.objectContaining({$space: [2]}))
-
-    mockedInlineSpaceStyle.mockClear()
-    render(
-      <Inline gap={2}>
-        <span>One</span>
-        <span>Two</span>
-      </Inline>,
-    )
-    expect(mockedInlineSpaceStyle).toHaveBeenCalledWith(expect.objectContaining({$space: [2]}))
-  })
-
-  it('should prefer `gap` over `space` when both are provided', () => {
-    render(
-      <Inline gap={3} space={1}>
-        <span>One</span>
-        <span>Two</span>
-      </Inline>,
-    )
-    expect(mockedInlineSpaceStyle).toHaveBeenCalledWith(expect.objectContaining({$space: [3]}))
-  })
-})

package/src/core/primitives/inline/inline.tsx

@@ -1,63 +0,0 @@
-import {Children, forwardRef, useMemo} from 'react'
-import {styled} from 'styled-components'
-
-import {_getArrayProp} from '../../styles'
-import {ElementType, Props} from '../../types'
-import {Box, BoxOwnProps} from '../box'
-import {inlineBaseStyle, inlineSpaceStyle} from './styles'
-import {ResponsiveInlineSpaceStyleProps} from './types'
-
-/**
- * @public
- */
-export interface InlineOwnProps extends Omit<BoxOwnProps, 'display'> {
-  /**
-   * The spacing between children.
-   * @deprecated Use `gap` instead. `space` will be removed in v4.
-   */
-  space?: number | number[]
-  /** The spacing between children. */
-  gap?: number | number[]
-}
-
-/**
- * @public
- */
-export type InlineProps<E extends ElementType = 'div'> = Props<InlineOwnProps, E>
-
-const StyledInline = styled(Box)<ResponsiveInlineSpaceStyleProps>(inlineBaseStyle, inlineSpaceStyle)
-
-const InlineComponent = forwardRef(function Inline(
-  props: InlineOwnProps & {as?: ElementType} & React.HTMLProps<HTMLDivElement>,
-  ref,
-) {
-  const {as, children: childrenProp, gap, space: deprecated_space, ...restProps} = props
-  const spacing = gap === undefined ? deprecated_space : gap
-
-  const children = useMemo(
-    () => Children.map(childrenProp, (child) => child && <div>{child}</div>),
-    [childrenProp],
-  )
-
-  return (
-    <StyledInline
-      data-ui="Inline"
-      {...restProps}
-      $space={_getArrayProp(spacing)}
-      forwardedAs={as}
-      ref={ref as any}
-    >
-      {children}
-    </StyledInline>
-  )
-})
-InlineComponent.displayName = 'ForwardRef(Inline)'
-
-/**
- * The `Inline` component is a layout utility for aligning and spacing items horizontally.
- *
- * @public
- */
-export const Inline = InlineComponent as unknown as <E extends ElementType = 'div'>(
-  props: InlineProps<E>,
-) => React.JSX.Element

package/src/core/primitives/inline/styles.ts

@@ -1,32 +0,0 @@
-import {CSSObject, getTheme_v2} from '@bettercms-ai/kit/theme'
-
-import {_responsive, rem, ThemeProps} from '../../styles'
-import {ResponsiveInlineSpaceStyleProps} from './types'
-
-export function inlineBaseStyle(): CSSObject {
-  return {
-    'lineHeight': '0',
-
-    '&&:not([hidden])': {
-      display: 'block',
-    },
-
-    '& > div': {
-      display: 'inline-block',
-      verticalAlign: 'middle',
-    },
-  }
-}
-
-export function inlineSpaceStyle(props: ResponsiveInlineSpaceStyleProps & ThemeProps): CSSObject[] {
-  const {media, space} = getTheme_v2(props.theme)
-
-  return _responsive(media, props.$space, (spaceIndex) => {
-    const _space = rem(spaceIndex === 0.5 ? space[1] / 2 : space[spaceIndex])
-
-    return {
-      'margin': `-${_space} 0 0 -${_space}`,
-      '& > div': {padding: `${_space} 0 0 ${_space}`},
-    }
-  })
-}

package/src/core/primitives/inline/types.ts

@@ -1,6 +0,0 @@
-/**
- * @internal
- */
-export interface ResponsiveInlineSpaceStyleProps {
-  $space: number[]
-}

package/src/core/primitives/kbd/__workshop__/index.ts

@@ -1,8 +0,0 @@
-import {defineScope} from '@bettercms-ai/kit-workshop'
-import {lazy} from 'react'
-
-export default defineScope({
-  name: 'primitives/kbd',
-  title: 'KBD',
-  stories: [{name: 'plain', title: 'Plain', component: lazy(() => import('./plain'))}],
-})

package/src/core/primitives/kbd/__workshop__/plain.tsx

@@ -1,9 +0,0 @@
-import {Flex, KBD} from '@bettercms-ai/kit'
-
-export default function PlainStory() {
-  return (
-    <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
-      <KBD style={{verticalAlign: 'top'}}>Ctrl</KBD>
-    </Flex>
-  )
-}

package/src/core/primitives/kbd/index.ts

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

package/src/core/primitives/kbd/kbd.tsx

@@ -1,69 +0,0 @@
-import {forwardRef} from 'react'
-import {css, styled} from 'styled-components'
-
-import {_getArrayProp} from '../../styles'
-import {responsiveRadiusStyle, ResponsiveRadiusStyleProps} from '../../styles/internal'
-import {ElementType, Props, Radius} from '../../types'
-import {Box} from '../box'
-import {Text} from '../text'
-
-/**
- * @public
- */
-export interface KBDOwnProps {
-  fontSize?: number | number[]
-  padding?: number | number[]
-  radius?: Radius | Radius[]
-}
-
-/**
- * @public
- */
-export type KBDProps<E extends ElementType = 'kbd'> = Props<KBDOwnProps, E>
-
-function kbdStyle() {
-  return css`
-    --card-bg-color: var(--card-kbd-bg-color);
-    --card-border-color: var(--card-kbd-border-color);
-    --card-fg-color: var(--card-kbd-fg-color);
-
-    box-shadow: inset 0 0 0 1px var(--card-border-color);
-    background: var(--card-bg-color);
-    font: inherit;
-
-    vertical-align: top;
-
-    &:not([hidden]) {
-      display: inline-block;
-    }
-  `
-}
-
-const StyledKBD = styled.kbd<ResponsiveRadiusStyleProps>(responsiveRadiusStyle, kbdStyle)
-
-const KBDComponent = forwardRef(function KBD(
-  props: KBDOwnProps & {as?: ElementType} & Omit<React.HTMLProps<HTMLElement>, 'as' | 'ref' | 'size'>,
-  ref: React.ForwardedRef<HTMLDivElement>,
-) {
-  const {children, fontSize = 0, padding = 1, radius = 2, ...restProps} = props
-
-  return (
-    <StyledKBD data-ui="KBD" {...restProps} $radius={_getArrayProp(radius)} ref={ref}>
-      <Box as="span" padding={padding}>
-        <Text as="span" size={fontSize} weight="semibold">
-          {children}
-        </Text>
-      </Box>
-    </StyledKBD>
-  )
-})
-KBDComponent.displayName = 'ForwardRef(KBD)'
-
-/**
- * Used to define some text as keyboard input.
- *
- * @public
- */
-export const KBD = KBDComponent as unknown as <E extends ElementType = 'kbd'>(
-  props: KBDProps<E>,
-) => React.JSX.Element

package/src/core/primitives/label/__workshop__/index.ts

@@ -1,19 +0,0 @@
-import {defineScope} from '@bettercms-ai/kit-workshop'
-import {lazy} from 'react'
-
-export default defineScope({
-  name: 'primitives/label',
-  title: 'Label',
-  stories: [
-    {
-      name: 'plain',
-      title: 'Plain',
-      component: lazy(() => import('./plain')),
-    },
-    {
-      name: 'optical-alignment',
-      title: 'Optical alignment',
-      component: lazy(() => import('./opticalAlignment')),
-    },
-  ],
-})

package/src/core/primitives/label/__workshop__/opticalAlignment.tsx

@@ -1,48 +0,0 @@
-import {AddCircleIcon} from '@bettercms-ai/icons'
-import {Box, Card, Flex, Label, Stack} from '@bettercms-ai/kit'
-
-export default function OpticalAlignment() {
-  return (
-    <Box padding={[4, 5, 6]}>
-      <Stack space={1}>
-        <Flex>
-          <Card padding={0} tone="suggest">
-            <Label size={4}>Hamburgefonstiv M</Label>
-          </Card>
-        </Flex>
-
-        <Flex>
-          <Card padding={0} tone="suggest">
-            <Label size={3}>Hamburgefonstiv M</Label>
-          </Card>
-        </Flex>
-
-        <Flex>
-          <Card padding={0} tone="suggest">
-            <Label size={2}>Hamburgefonstiv M</Label>
-          </Card>
-        </Flex>
-
-        <Flex>
-          <Card padding={0} tone="suggest">
-            <Label size={1}>Hamburgefonstiv M</Label>
-          </Card>
-        </Flex>
-
-        <Flex>
-          <Card padding={0} tone="suggest">
-            <Label size={0}>Hamburgefonstiv M</Label>
-          </Card>
-        </Flex>
-
-        <Flex>
-          <Card padding={2} tone="suggest">
-            <Label>
-              <AddCircleIcon />
-            </Label>
-          </Card>
-        </Flex>
-      </Stack>
-    </Box>
-  )
-}

package/src/core/primitives/label/__workshop__/plain.tsx

@@ -1,24 +0,0 @@
-import {Flex, Label} from '@bettercms-ai/kit'
-import {useSelect, useText} from '@bettercms-ai/kit-workshop'
-
-import {
-  WORKSHOP_FONT_WEIGHT_OPTIONS,
-  WORKSHOP_LABEL_FONT_SIZE_OPTIONS,
-  WORKSHOP_TEXT_OVERFLOW_OPTIONS,
-} from '../../../__workshop__/constants'
-
-export default function PlainStory() {
-  const size = useSelect('Size', WORKSHOP_LABEL_FONT_SIZE_OPTIONS, undefined, 'Props')
-  const textChild = useText('Text', 'Label text', 'Props')
-  const textOverflow =
-    useSelect('Text overflow', WORKSHOP_TEXT_OVERFLOW_OPTIONS, '', 'Props') || undefined
-  const weight = useSelect('Weight', WORKSHOP_FONT_WEIGHT_OPTIONS, undefined, 'Props')
-
-  return (
-    <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
-      <Label size={size} textOverflow={textOverflow} weight={weight}>
-        {textChild}
-      </Label>
-    </Flex>
-  )
-}