@bettercms-ai/kit 0.1.0

package/src/core/primitives/code/__workshop__/props.tsx

@@ -0,0 +1,21 @@
+import {Box, Code} from '@bettercms-ai/kit'
+import {useSelect, useText} from '@bettercms-ai/kit-workshop'
+
+import {
+  WORKSHOP_CODE_LANGUAGE_OPTIONS,
+  WORKSHOP_TEXT_FONT_SIZE_OPTIONS,
+} from '../../../__workshop__/constants'
+
+export default function PropsStory() {
+  const code = useText('Code', `console.log('Hello, world')`, 'Props')
+  const language = useSelect('Language', WORKSHOP_CODE_LANGUAGE_OPTIONS, 'typescript', 'Props')
+  const size = useSelect('Size', WORKSHOP_TEXT_FONT_SIZE_OPTIONS, 1, 'Props')
+
+  return (
+    <Box padding={[4, 5, 6]}>
+      <Code language={language} size={size}>
+        {code}
+      </Code>
+    </Box>
+  )
+}

package/src/core/primitives/code/code.tsx

@@ -0,0 +1,55 @@
+import {forwardRef, lazy, Suspense} from 'react'
+import {styled} from 'styled-components'
+
+import {_getArrayProp} from '../../styles'
+import {responsiveCodeFontStyle, ResponsiveFontStyleProps} from '../../styles/internal'
+import {ElementType, Props} from '../../types'
+import {codeBaseStyle} from './styles'
+
+const LazyRefractor = lazy(() => import('./refractor'))
+
+/**
+ * @public
+ */
+export interface CodeOwnProps {
+  /** Define the language to use for syntax highlighting. */
+  language?: string
+  size?: number | number[]
+  weight?: string
+}
+
+/**
+ * @public
+ */
+export type CodeProps<E extends ElementType = 'pre'> = Props<CodeOwnProps, E>
+
+const StyledCode = styled.pre<ResponsiveFontStyleProps>(codeBaseStyle, responsiveCodeFontStyle)
+
+const CodeComponent = forwardRef(function Code(
+  props: CodeOwnProps & {as?: ElementType} & Omit<React.HTMLProps<HTMLElement>, 'as' | 'size'>,
+  ref: React.ForwardedRef<HTMLElement>,
+) {
+  const {children, language, size = 2, weight, ...restProps} = props
+
+  return (
+    <StyledCode
+      data-ui="Code"
+      {...restProps}
+      $size={_getArrayProp(size)}
+      $weight={weight}
+      ref={ref}
+    >
+      <Suspense fallback={<code>{children}</code>}>
+        <LazyRefractor language={language} value={children} />
+      </Suspense>
+    </StyledCode>
+  )
+})
+CodeComponent.displayName = 'ForwardRef(Code)'
+
+/**
+ * @public
+ */
+export const Code = CodeComponent as unknown as <E extends ElementType = 'pre'>(
+  props: CodeProps<E>,
+) => React.JSX.Element

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

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

package/src/core/primitives/code/refractor.tsx

@@ -0,0 +1,20 @@
+import {hasLanguage, Refractor} from 'react-refractor'
+
+export default function LazyRefractor(
+  props: Partial<Pick<React.ComponentProps<typeof Refractor>, 'language'>> & {
+    value: React.ReactNode
+  },
+) {
+  const {language: languageProp, value} = props
+  const language = typeof languageProp === 'string' ? languageProp : undefined
+  const registered = language ? hasLanguage(language as any) : false
+
+  return (
+    <>
+      {!(language && registered) && <code>{value}</code>}
+      {language && registered && <Refractor inline language={language} value={String(value)} />}
+    </>
+  )
+}
+
+LazyRefractor.displayName = 'LazyRefractor'

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

@@ -0,0 +1,77 @@
+import {getTheme_v2} from '@bettercms-ai/kit/theme'
+import {css, ExecutionContext} from 'styled-components'
+
+function codeSyntaxHighlightingStyle({theme}: ExecutionContext) {
+  const {
+    color: {syntax: color},
+  } = getTheme_v2(theme)
+
+  return {
+    '&.atrule': {color: color.atrule},
+    '&.attr-name': {color: color.attrName},
+    '&.attr-value': {color: color.attrValue},
+    '&.attribute': {color: color.attribute},
+    '&.boolean': {color: color.boolean},
+    '&.builtin': {color: color.builtin},
+    '&.cdata': {color: color.cdata},
+    '&.char': {color: color.char},
+    '&.class': {color: color.class},
+    '&.class-name': {color: color.className},
+    '&.comment': {color: color.comment},
+    '&.constant': {color: color.constant},
+    '&.deleted': {color: color.deleted},
+    '&.doctype': {color: color.doctype},
+    '&.entity': {color: color.entity},
+    '&.function': {color: color.function},
+    '&.hexcode': {color: color.hexcode},
+    '&.id': {color: color.id},
+    '&.important': {color: color.important},
+    '&.inserted': {color: color.inserted},
+    '&.keyword': {color: color.keyword},
+    '&.number': {color: color.number},
+    '&.operator': {color: color.operator},
+    '&.prolog': {color: color.prolog},
+    '&.property': {color: color.property},
+    '&.pseudo-class': {color: color.pseudoClass},
+    '&.pseudo-element': {color: color.pseudoElement},
+    '&.punctuation': {color: color.punctuation},
+    '&.regex': {color: color.regex},
+    '&.selector': {color: color.selector},
+    '&.string': {color: color.string},
+    '&.symbol': {color: color.symbol},
+    '&.tag': {color: color.tag},
+    '&.unit': {color: color.unit},
+    '&.url': {color: color.url},
+    '&.variable': {color: color.variable},
+  }
+}
+
+export function codeBaseStyle(): ReturnType<typeof css> {
+  return css`
+    color: var(--card-code-fg-color);
+
+    & code {
+      font-family: inherit;
+
+      &.refractor .token {
+        ${codeSyntaxHighlightingStyle}
+      }
+    }
+
+    & a {
+      color: inherit;
+      text-decoration: underline;
+      border-radius: 1px;
+    }
+
+    & 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/container/__workshop__/example.tsx

@@ -0,0 +1,20 @@
+import {Card, Container, Flex, Text} from '@bettercms-ai/kit'
+import {useAction, useSelect} from '@bettercms-ai/kit-workshop'
+
+import {WORKSHOP_CONTAINER_WIDTH_OPTIONS} from '../../../__workshop__/constants'
+
+export default function PlainStory() {
+  const width = useSelect('Width', WORKSHOP_CONTAINER_WIDTH_OPTIONS, 0, 'Props')
+
+  return (
+    <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
+      <Container onClick={useAction('onClick')} width={width}>
+        <Card padding={4} shadow={1}>
+          <Text size={1}>
+            Container with <code>max-width={width}</code>
+          </Text>
+        </Card>
+      </Container>
+    </Flex>
+  )
+}

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

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

package/src/core/primitives/container/container.tsx

@@ -0,0 +1,54 @@
+import {forwardRef} from 'react'
+import {styled} from 'styled-components'
+
+import {_getArrayProp} from '../../styles'
+import {ElementType, Props} from '../../types'
+import {Box, BoxOwnProps} from '../box'
+import {ResponsiveWidthProps} from '../types'
+import {containerBaseStyle, responsiveContainerWidthStyle} from './styles'
+import {ResponsiveWidthStyleProps} from './types'
+
+/**
+ * @public
+ */
+export interface ContainerOwnProps extends BoxOwnProps, ResponsiveWidthProps {}
+
+/**
+ * @public
+ */
+export type ContainerProps<E extends ElementType = 'div'> = Props<ContainerOwnProps, E>
+
+const StyledContainer = styled(Box)<ResponsiveWidthStyleProps>(
+  containerBaseStyle,
+  responsiveContainerWidthStyle,
+)
+
+const ContainerComponent = forwardRef(function Container(
+  props: ContainerOwnProps & {as?: ElementType} & Omit<
+      React.HTMLProps<HTMLDivElement>,
+      'as' | 'height' | 'width'
+    >,
+  ref: React.ForwardedRef<HTMLDivElement>,
+) {
+  const {as, width = 2, ...restProps} = props
+
+  return (
+    <StyledContainer
+      data-ui="Container"
+      {...restProps}
+      $width={_getArrayProp(width)}
+      forwardedAs={as}
+      ref={ref}
+    />
+  )
+})
+ContainerComponent.displayName = 'ForwardRef(Container)'
+
+/**
+ * The `Container` component wraps content layout in a defined set of widths.
+ *
+ * @public
+ */
+export const Container = ContainerComponent as unknown as <E extends ElementType = 'div'>(
+  props: ContainerProps<E>,
+) => React.JSX.Element

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

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

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

@@ -0,0 +1,23 @@
+import {CSSObject, getTheme_v2} from '@bettercms-ai/kit/theme'
+
+import {_responsive, rem, ThemeProps} from '../../styles'
+import {ResponsiveWidthStyleProps} from './types'
+
+const BASE_STYLE: CSSObject = {
+  width: '100%',
+  margin: '0 auto',
+}
+
+export function containerBaseStyle(): CSSObject {
+  return BASE_STYLE
+}
+
+export function responsiveContainerWidthStyle(
+  props: ResponsiveWidthStyleProps & ThemeProps,
+): CSSObject[] {
+  const {container, media} = getTheme_v2(props.theme)
+
+  return _responsive(media, props.$width, (val) => ({
+    maxWidth: val === 'auto' ? 'none' : rem(container[val]),
+  }))
+}

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

@@ -0,0 +1,6 @@
+/**
+ * @internal
+ */
+export interface ResponsiveWidthStyleProps {
+  $width: (number | 'auto')[]
+}

package/src/core/primitives/flex/__workshop__/example.tsx

@@ -0,0 +1,34 @@
+import {Card, Code, Flex} from '@bettercms-ai/kit'
+import {useSelect} from '@bettercms-ai/kit-workshop'
+import {styled} from 'styled-components'
+
+import {WORKSHOP_FLEX_DIRECTION_OPTIONS} from '../../../__workshop__/constants'
+
+const DebugCard = styled(Card)`
+  outline: 1px solid red;
+  &:not([hidden]) {
+    display: flex;
+  }
+  align-items: center;
+  justify-content: center;
+`
+
+export default function ExampleStory() {
+  const direction = useSelect('Direction', WORKSHOP_FLEX_DIRECTION_OPTIONS, 'row', 'Props')
+
+  return (
+    <Flex direction={direction} height="fill" style={{width: '100%'}}>
+      <DebugCard flex={1}>
+        <Code size={1}>1</Code>
+      </DebugCard>
+
+      <DebugCard flex={[1, 2, 3]}>
+        <Code size={1}>[1,2,3]</Code>
+      </DebugCard>
+
+      <DebugCard flex={['none', 'none', 1]}>
+        <Code size={1}>['none', 'none', 1]</Code>
+      </DebugCard>
+    </Flex>
+  )
+}

package/src/core/primitives/flex/__workshop__/gap.tsx

@@ -0,0 +1,25 @@
+import {Card, Flex, Text} from '@bettercms-ai/kit'
+
+export default function GapStory() {
+  return (
+    <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
+      <Flex align="center" gap={[2, 3, 4]} justify="center" wrap="wrap">
+        <Card padding={3} scheme="dark">
+          <Text size={0}>Card 0</Text>
+        </Card>
+        <Card padding={3} scheme="dark">
+          <Text size={1}>Card 1</Text>
+        </Card>
+        <Card padding={3} scheme="dark">
+          <Text size={2}>Card 2</Text>
+        </Card>
+        <Card padding={3} scheme="dark">
+          <Text size={3}>Card 3</Text>
+        </Card>
+        <Card padding={3} scheme="dark">
+          <Text size={4}>Card 4</Text>
+        </Card>
+      </Flex>
+    </Flex>
+  )
+}

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

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

package/src/core/primitives/flex/flex.tsx

@@ -0,0 +1,64 @@
+import {forwardRef} from 'react'
+import {styled} from 'styled-components'
+
+import {_getArrayProp} from '../../styles'
+import {
+  flexItemStyle,
+  FlexItemStyleProps,
+  responsiveFlexStyle,
+  ResponsiveFlexStyleProps,
+} from '../../styles/internal'
+import {ElementType, Props} from '../../types'
+import {Box, BoxOwnProps} from '../box'
+import {ResponsiveFlexItemProps, ResponsiveFlexProps} from '../types'
+
+/**
+ * @public
+ */
+export interface FlexOwnProps
+  extends Omit<BoxOwnProps, 'display'>,
+    ResponsiveFlexProps,
+    ResponsiveFlexItemProps {
+  gap?: number | number[]
+}
+
+/**
+ * @public
+ */
+export type FlexProps<E extends ElementType = 'div'> = Props<FlexOwnProps, E>
+
+const StyledFlex = styled(Box)<FlexItemStyleProps & ResponsiveFlexStyleProps>(
+  flexItemStyle,
+  responsiveFlexStyle,
+)
+
+const FlexComponent = forwardRef(function Flex(
+  props: FlexOwnProps & {as?: ElementType} & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'wrap'>,
+  ref: React.ForwardedRef<HTMLDivElement>,
+) {
+  const {align, as, direction = 'row', gap, justify, wrap, ...restProps} = props
+
+  return (
+    <StyledFlex
+      data-ui="Flex"
+      {...restProps}
+      $align={_getArrayProp(align)}
+      $direction={_getArrayProp(direction)}
+      $gap={_getArrayProp(gap)}
+      $justify={_getArrayProp(justify)}
+      $wrap={_getArrayProp(wrap)}
+      forwardedAs={as}
+      ref={ref}
+    />
+  )
+})
+FlexComponent.displayName = 'ForwardRef(Flex)'
+
+/**
+ * The `Flex` component is a wrapper component for flexible elements (`Box`, `Card` and `Flex`).
+ *
+ * @public
+ */
+export const Flex = FlexComponent as unknown as <E extends ElementType = 'div'>(
+  props: FlexProps<E>,
+) => React.JSX.Element

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

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

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

@@ -0,0 +1,10 @@
+import {defineScope} from '@bettercms-ai/kit-workshop'
+import {lazy} from 'react'
+
+export default defineScope({
+  name: 'primitives/grid',
+  title: 'Grid',
+  stories: [
+    {name: 'responsive', title: 'Responsive', component: lazy(() => import('./responsive'))},
+  ],
+})

package/src/core/primitives/grid/__workshop__/responsive.tsx

@@ -0,0 +1,54 @@
+import {Card, Code, Container, Flex, Grid} from '@bettercms-ai/kit'
+
+export default function ResponsiveStory() {
+  return (
+    <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
+      <Container width="auto">
+        <Grid
+          id="responsive-grid"
+          columns={[1, 2, 3, 4, 5, 6, 7]}
+          gap={[0, 1, 2, 3, 4, 5, 6]}
+          rows={[1, 2, 3, 4, 5, 6, 7]}
+          style={{textAlign: 'center'}}
+        >
+          <Card padding={[1, 2, 3]} tone="neutral">
+            <Code>1</Code>
+          </Card>
+          <Card padding={[1, 2, 3]} tone="neutral">
+            <Code>2</Code>
+          </Card>
+          <Card padding={[1, 2, 3]} tone="neutral">
+            <Code>3</Code>
+          </Card>
+          <Card padding={[1, 2, 3]} tone="neutral">
+            <Code>4</Code>
+          </Card>
+          <Card padding={[1, 2, 3]} tone="neutral">
+            <Code>5</Code>
+          </Card>
+          <Card padding={[1, 2, 3]} tone="neutral">
+            <Code>6</Code>
+          </Card>
+          <Card padding={[1, 2, 3]} tone="neutral">
+            <Code>7</Code>
+          </Card>
+          <Card padding={[1, 2, 3]} tone="neutral">
+            <Code>8</Code>
+          </Card>
+          <Card padding={[1, 2, 3]} tone="neutral">
+            <Code>9</Code>
+          </Card>
+          <Card padding={[1, 2, 3]} tone="neutral">
+            <Code>10</Code>
+          </Card>
+          <Card padding={[1, 2, 3]} tone="neutral">
+            <Code>11</Code>
+          </Card>
+          <Card padding={[1, 2, 3]} tone="neutral">
+            <Code>12</Code>
+          </Card>
+        </Grid>
+      </Container>
+    </Flex>
+  )
+}

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

@@ -0,0 +1,80 @@
+/** @jest-environment jsdom */
+
+import {render} from '../../../../test'
+import {responsiveGridStyle} from '../../styles/internal'
+import {Grid} from './grid'
+
+jest.mock('../../styles/internal', () => {
+  const actual = jest.requireActual('../../styles/internal')
+
+  return {
+    ...actual,
+    responsiveGridStyle: jest.fn(actual.responsiveGridStyle),
+  }
+})
+
+describe('primitives/grid', () => {
+  const mockedResponsiveGridStyle = jest.mocked(responsiveGridStyle)
+
+  beforeEach(() => {
+    mockedResponsiveGridStyle.mockClear()
+  })
+
+  it('should support `columns` and `gridTemplateColumns` with the same behavior', () => {
+    render(
+      <Grid columns={2}>
+        <div>A</div>
+      </Grid>,
+    )
+    expect(mockedResponsiveGridStyle).toHaveBeenCalledWith(expect.objectContaining({$columns: [2]}))
+
+    mockedResponsiveGridStyle.mockClear()
+    render(
+      <Grid gridTemplateColumns={2}>
+        <div>A</div>
+      </Grid>,
+    )
+    expect(mockedResponsiveGridStyle).toHaveBeenCalledWith(expect.objectContaining({$columns: [2]}))
+  })
+
+  it('should prefer `gridTemplateColumns` over `columns` when both are provided', () => {
+    render(
+      <Grid columns={1} gridTemplateColumns={3}>
+        <div>A</div>
+      </Grid>,
+    )
+    expect(mockedResponsiveGridStyle).toHaveBeenCalledWith(expect.objectContaining({$columns: [3]}))
+    expect(mockedResponsiveGridStyle).not.toHaveBeenCalledWith(
+      expect.objectContaining({$columns: [1]}),
+    )
+  })
+
+  it('should support `rows` and `gridTemplateRows` with the same behavior', () => {
+    render(
+      <Grid rows={2}>
+        <div>A</div>
+      </Grid>,
+    )
+    expect(mockedResponsiveGridStyle).toHaveBeenCalledWith(expect.objectContaining({$rows: [2]}))
+
+    mockedResponsiveGridStyle.mockClear()
+    render(
+      <Grid gridTemplateRows={2}>
+        <div>A</div>
+      </Grid>,
+    )
+    expect(mockedResponsiveGridStyle).toHaveBeenCalledWith(expect.objectContaining({$rows: [2]}))
+  })
+
+  it('should prefer `gridTemplateRows` over `rows` when both are provided', () => {
+    render(
+      <Grid gridTemplateRows={3} rows={1}>
+        <div>A</div>
+      </Grid>,
+    )
+    expect(mockedResponsiveGridStyle).toHaveBeenCalledWith(expect.objectContaining({$rows: [3]}))
+    expect(mockedResponsiveGridStyle).not.toHaveBeenCalledWith(
+      expect.objectContaining({$rows: [1]}),
+    )
+  })
+})

package/src/core/primitives/grid/grid.tsx

@@ -0,0 +1,74 @@
+import {forwardRef} from 'react'
+import {styled} from 'styled-components'
+
+import {_getArrayProp} from '../../styles'
+import {responsiveGridStyle, ResponsiveGridStyleProps} from '../../styles/internal'
+import {ElementType, Props} from '../../types'
+import {Box, BoxOwnProps} from '../box'
+import {ResponsiveGridProps} from '../types'
+
+/**
+ * @public
+ */
+export interface GridOwnProps extends Omit<BoxOwnProps, 'display'>, ResponsiveGridProps {}
+
+/**
+ * @public
+ */
+export type GridProps<E extends ElementType = 'div'> = Props<GridOwnProps, E>
+
+const StyledGrid = styled(Box)<ResponsiveGridStyleProps>(responsiveGridStyle)
+
+const GridComponent = forwardRef(function Grid(
+  props: GridOwnProps & {as?: ElementType} & Omit<
+      React.HTMLProps<HTMLDivElement>,
+      'as' | 'height' | 'rows'
+    >,
+  ref: React.ForwardedRef<HTMLDivElement>,
+) {
+  const {
+    as,
+    autoRows,
+    autoCols,
+    autoFlow,
+    columns,
+    gridTemplateColumns,
+    gap,
+    gapX,
+    gapY,
+    rows,
+    gridTemplateRows,
+    children,
+    ...restProps
+  } = props
+
+  return (
+    <StyledGrid
+      data-as={typeof as === 'string' ? as : undefined}
+      data-ui="Grid"
+      {...restProps}
+      $autoRows={_getArrayProp(autoRows)}
+      $autoCols={_getArrayProp(autoCols)}
+      $autoFlow={_getArrayProp(autoFlow)}
+      $columns={_getArrayProp(gridTemplateColumns === undefined ? columns : gridTemplateColumns)}
+      $gap={_getArrayProp(gap)}
+      $gapX={_getArrayProp(gapX)}
+      $gapY={_getArrayProp(gapY)}
+      $rows={_getArrayProp(gridTemplateRows === undefined ? rows : gridTemplateRows)}
+      forwardedAs={as}
+      ref={ref}
+    >
+      {children}
+    </StyledGrid>
+  )
+})
+GridComponent.displayName = 'ForwardRef(Grid)'
+
+/**
+ * The `Grid` component is for building 2-dimensional layers (based on CSS grid).
+ *
+ * @public
+ */
+export const Grid = GridComponent as unknown as <E extends ElementType = 'div'>(
+  props: GridProps<E>,
+) => React.JSX.Element

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

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