@bettercms-ai/kit 0.1.0

package/src/core/components/autocomplete/autocompleteOption.tsx

@@ -0,0 +1,45 @@
+import {useCallback} from 'react'
+
+import {_isEnterToClickElement} from '../../helpers'
+
+export interface AutocompleteOptionProps {
+  children: React.ReactNode
+  id: string
+  onSelect: (v: string) => void
+  selected: boolean
+  value: string
+}
+
+export function AutocompleteOption(props: AutocompleteOptionProps): React.JSX.Element {
+  const {children, id, onSelect, selected, value} = props
+
+  const handleClick = useCallback(() => {
+    // Calling the `onSelect` in a timeout is a fix to
+    // allow the `click` event to propagate in some cases
+    setTimeout(() => {
+      onSelect(value)
+    }, 0)
+  }, [onSelect, value])
+
+  const handleKeyDown = useCallback(
+    (event: React.KeyboardEvent<HTMLLIElement>) => {
+      if (event.key === 'Enter' && !_isEnterToClickElement(event.currentTarget)) {
+        handleClick()
+      }
+    },
+    [handleClick],
+  )
+
+  return (
+    <li
+      aria-selected={selected}
+      data-ui="AutocompleteOption"
+      id={id}
+      role="option"
+      onClick={handleClick}
+      onKeyDown={handleKeyDown}
+    >
+      {children}
+    </li>
+  )
+}

package/src/core/components/autocomplete/autocompleteReducer.ts

@@ -0,0 +1,47 @@
+import {AutocompleteMsg, AutocompleteState} from './types'
+
+/**
+ * @internal
+ */
+export function autocompleteReducer(
+  state: AutocompleteState,
+  msg: AutocompleteMsg,
+): AutocompleteState {
+  if (msg.type === 'input/change') {
+    return {...state, activeValue: null, focused: true, query: msg.query}
+  }
+
+  if (msg.type === 'input/focus') {
+    return {...state, focused: true}
+  }
+
+  if (msg.type === 'root/blur') {
+    return {...state, focused: false, query: null}
+  }
+
+  if (msg.type === 'root/clear') {
+    return {...state, activeValue: null, query: null, value: null}
+  }
+
+  if (msg.type === 'root/escape') {
+    return {...state, focused: false, query: null}
+  }
+
+  if (msg.type === 'root/open') {
+    return {...state, query: state.query || msg.query}
+  }
+
+  if (msg.type === 'root/setActiveValue') {
+    return {...state, activeValue: msg.value, listFocused: msg.listFocused || state.listFocused}
+  }
+
+  if (msg.type === 'root/setListFocused') {
+    return {...state, listFocused: msg.listFocused}
+  }
+
+  if (msg.type === 'value/change') {
+    return {...state, activeValue: msg.value, query: null, value: msg.value}
+  }
+
+  return state
+}

package/src/core/components/autocomplete/constants.ts

@@ -0,0 +1,28 @@
+import {Placement} from '../../types'
+
+/**
+ * @internal
+ */
+export const AUTOCOMPLETE_LISTBOX_IGNORE_KEYS = [
+  'Control',
+  'Shift',
+  'Alt',
+  'Enter',
+  'Home',
+  'End',
+  'PageUp',
+  'PageDown',
+  'Meta',
+  'Tab',
+  'CapsLock',
+]
+
+/**
+ * @internal
+ */
+export const AUTOCOMPLETE_POPOVER_PLACEMENT: Placement = 'bottom-start'
+
+/**
+ * @internal
+ */
+export const AUTOCOMPLETE_POPOVER_FALLBACK_PLACEMENTS: Placement[] = ['bottom-start', 'top-start']

package/src/core/components/autocomplete/index.ts

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

package/src/core/components/autocomplete/types.ts

@@ -0,0 +1,108 @@
+import {ButtonOwnProps} from '../../primitives'
+
+/**
+ * @public
+ */
+export type AutocompleteOpenButtonProps = ButtonOwnProps &
+  Omit<React.HTMLProps<HTMLButtonElement>, 'as' | 'ref'>
+
+/**
+ * @public
+ */
+export interface BaseAutocompleteOption {
+  value: string
+}
+
+/**
+ * @internal
+ */
+export interface AutocompleteState {
+  activeValue: string | null
+  focused: boolean
+  listFocused: boolean
+  query: string | null
+  value: string | null
+}
+
+/**
+ * @internal
+ */
+export interface AutocompleteRootBlurMsg {
+  type: 'root/blur'
+}
+
+/**
+ * @internal
+ */
+export interface AutocompleteRootClearMsg {
+  type: 'root/clear'
+}
+
+/**
+ * @internal
+ */
+export interface AutocompleteRootEscapeMsg {
+  type: 'root/escape'
+}
+
+/**
+ * @internal
+ */
+export interface AutocompleteRootOpenMsg {
+  type: 'root/open'
+  query: string | null
+}
+
+/**
+ * @internal
+ */
+export interface AutocompleteRootSetActiveValueMsg {
+  type: 'root/setActiveValue'
+  value: string
+  listFocused?: boolean
+}
+
+/**
+ * @internal
+ */
+export interface AutocompleteRootSetListFocusedMsg {
+  type: 'root/setListFocused'
+  listFocused: boolean
+}
+
+/**
+ * @internal
+ */
+export interface AutocompleteInputChangeMsg {
+  type: 'input/change'
+  query: string | null
+}
+
+/**
+ * @internal
+ */
+export interface AutocompleteInputFoocusMsg {
+  type: 'input/focus'
+}
+
+/**
+ * @internal
+ */
+export interface AutocompleteValueChangeMsg {
+  type: 'value/change'
+  value: string | null
+}
+
+/**
+ * @internal
+ */
+export type AutocompleteMsg =
+  | AutocompleteRootBlurMsg
+  | AutocompleteRootClearMsg
+  | AutocompleteRootEscapeMsg
+  | AutocompleteRootOpenMsg
+  | AutocompleteRootSetActiveValueMsg
+  | AutocompleteRootSetListFocusedMsg
+  | AutocompleteInputChangeMsg
+  | AutocompleteInputFoocusMsg
+  | AutocompleteValueChangeMsg

package/src/core/components/breadcrumbs/__workshop__/example.tsx

@@ -0,0 +1,62 @@
+import {Breadcrumbs, Flex, Text} from '@bettercms-ai/kit'
+import {useSelect} from '@bettercms-ai/kit-workshop'
+
+const BREADCRUMBS_MAX_LENGTH_OPTIONS = {
+  '(none)': 0,
+  '1': 1,
+  '2': 2,
+  '3': 3,
+  '4': 4,
+  '5': 5,
+  '6': 6,
+  '7': 7,
+}
+
+export default function Example() {
+  const maxLength =
+    useSelect('Max. length', BREADCRUMBS_MAX_LENGTH_OPTIONS, 0, 'Props') || undefined
+
+  return (
+    <Flex align="center" height="fill" justify="center">
+      <Breadcrumbs
+        maxLength={maxLength}
+        separator={
+          <Text muted size={1}>
+            /
+          </Text>
+        }
+        space={2}
+      >
+        <Text size={1}>
+          {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
+          <a href="#">Root</a>
+        </Text>
+        <Text size={1}>
+          {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
+          <a href="#">Category A</a>
+        </Text>
+        <Text size={1}>
+          {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
+          <a href="#">Category B</a>
+        </Text>
+        <Text size={1}>
+          {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
+          <a href="#">Category C</a>
+        </Text>
+        <Text size={1}>
+          {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
+          <a href="#">Category D</a>
+        </Text>
+        <Text size={1}>
+          {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
+          <a href="#">Category E</a>
+        </Text>
+        <Text size={1}>
+          {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
+          <a href="#">Category F</a>
+        </Text>
+        <Text size={1}>Item</Text>
+      </Breadcrumbs>
+    </Flex>
+  )
+}

package/src/core/components/breadcrumbs/__workshop__/index.ts

@@ -0,0 +1,14 @@
+import {defineScope} from '@bettercms-ai/kit-workshop'
+import {lazy} from 'react'
+
+export default defineScope({
+  name: 'components/breadcrumbs',
+  title: 'Breadcrumbs',
+  stories: [
+    {
+      name: 'example',
+      title: 'Example',
+      component: lazy(() => import('./example')),
+    },
+  ],
+})

package/src/core/components/breadcrumbs/breadcrumbs.styles.ts

@@ -0,0 +1,18 @@
+import {styled} from 'styled-components'
+
+import {Button} from '../../primitives'
+
+export const StyledBreadcrumbs = styled.ol`
+  margin: 0;
+  padding: 0;
+  display: flex;
+  list-style: none;
+  align-items: center;
+  white-space: nowrap;
+  line-height: 0;
+`
+
+export const ExpandButton = styled(Button)`
+  appearance: none;
+  margin: -4px;
+`

package/src/core/components/breadcrumbs/breadcrumbs.test.tsx

@@ -0,0 +1,51 @@
+/** @jest-environment jsdom */
+
+import {render} from '../../../../test'
+import {Box} from '../../primitives'
+import {Breadcrumbs} from './breadcrumbs'
+
+jest.mock('../../primitives', () => {
+  const actual = jest.requireActual('../../primitives')
+
+  return {
+    ...actual,
+    Box: jest.fn((props: Record<string, unknown>) => (actual.Box as any).render(props, null)),
+  }
+})
+
+function renderBreadcrumbs(props: Partial<React.ComponentProps<typeof Breadcrumbs>> = {}) {
+  return render(
+    <Breadcrumbs {...props}>
+      <span>Root</span>
+      <span>Section</span>
+    </Breadcrumbs>,
+  )
+}
+
+describe('components/breadcrumbs spacing', () => {
+  const mockedBox = jest.mocked(Box)
+
+  beforeEach(() => {
+    mockedBox.mockClear()
+  })
+
+  it('should support `space` and `gap` with the same behavior', () => {
+    renderBreadcrumbs({space: 2})
+    expect(mockedBox.mock.calls.map(([props]) => props)).toContainEqual(
+      expect.objectContaining({paddingX: [2]}),
+    )
+
+    mockedBox.mockClear()
+    renderBreadcrumbs({gap: 2})
+    expect(mockedBox.mock.calls.map(([props]) => props)).toContainEqual(
+      expect.objectContaining({paddingX: [2]}),
+    )
+  })
+
+  it('should prefer `gap` over `space` when both are provided', () => {
+    renderBreadcrumbs({gap: 3, space: 1})
+    const propsList = mockedBox.mock.calls.map(([props]) => props)
+    expect(propsList).toContainEqual(expect.objectContaining({paddingX: [3]}))
+    expect(propsList).not.toContainEqual(expect.objectContaining({paddingX: [1]}))
+  })
+})

package/src/core/components/breadcrumbs/breadcrumbs.tsx

@@ -0,0 +1,133 @@
+import {
+  Children,
+  forwardRef,
+  Fragment,
+  isValidElement,
+  useCallback,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
+
+import {useClickOutsideEvent} from '../../hooks'
+import {Box, Popover, Stack, Text} from '../../primitives'
+import {_getArrayProp} from '../../styles'
+import {ExpandButton, StyledBreadcrumbs} from './breadcrumbs.styles'
+
+/**
+ * @beta
+ */
+export interface BreadcrumbsProps {
+  maxLength?: number
+  separator?: React.ReactNode
+  gap?: number | number[]
+  /**
+   * @deprecated Use `gap` instead. `space` will be removed in v4.
+   */
+  space?: number | number[]
+}
+
+/**
+ * @beta
+ */
+export const Breadcrumbs = forwardRef(function Breadcrumbs(
+  props: BreadcrumbsProps & Omit<React.HTMLProps<HTMLOListElement>, 'as' | 'ref' | 'type'>,
+  ref: React.ForwardedRef<HTMLOListElement>,
+) {
+  const {children, gap, maxLength, separator, space: deprecated_space = 2, ...restProps} = props
+  const space = _getArrayProp(gap === undefined ? deprecated_space : gap)
+  const [open, setOpen] = useState(false)
+  const expandElementRef = useRef<HTMLButtonElement | null>(null)
+  const popoverElementRef = useRef<HTMLDivElement | null>(null)
+
+  const collapse = useCallback(() => setOpen(false), [])
+  const expand = useCallback(() => setOpen(true), [])
+
+  useClickOutsideEvent(collapse, () => [expandElementRef.current, popoverElementRef.current])
+
+  const rawItems = useMemo(() => Children.toArray(children).filter(isValidElement), [children])
+
+  const items = useItems({
+    collapse,
+    expand,
+    expandElementRef,
+    maxLength,
+    open,
+    popoverElementRef,
+    rawItems,
+    space,
+  })
+
+  return (
+    <StyledBreadcrumbs data-ui="Breadcrumbs" {...restProps} ref={ref}>
+      {items.map((item, itemIndex) => (
+        <Fragment key={itemIndex}>
+          {itemIndex > 0 && (
+            <Box aria-hidden as="li" paddingX={space}>
+              {separator || <Text muted>/</Text>}
+            </Box>
+          )}
+          <Box as="li">{item}</Box>
+        </Fragment>
+      ))}
+    </StyledBreadcrumbs>
+  )
+})
+Breadcrumbs.displayName = 'ForwardRef(Breadcrumbs)'
+
+function useItems({
+  collapse,
+  expand,
+  expandElementRef,
+  maxLength,
+  open,
+  popoverElementRef,
+  rawItems,
+  space,
+}: {
+  collapse: () => void
+  expand: () => void
+  expandElementRef: React.RefObject<HTMLButtonElement | null>
+  maxLength: number | undefined
+  open: boolean
+  popoverElementRef: React.RefObject<HTMLDivElement | null>
+  rawItems: React.ReactElement<unknown, string | React.JSXElementConstructor<any>>[]
+  space: number[]
+}) {
+  const len = rawItems.length
+
+  if (maxLength && len > maxLength) {
+    const beforeLength = Math.ceil(maxLength / 2)
+    const afterLength = Math.floor(maxLength / 2)
+
+    return [
+      ...rawItems.slice(0, beforeLength - 1),
+      <Popover
+        constrainSize
+        content={
+          <Stack as="ol" overflow="auto" padding={space} gap={space}>
+            {rawItems.slice(beforeLength - 1, len - afterLength)}
+          </Stack>
+        }
+        key="button"
+        open={open}
+        placement="top"
+        portal
+        ref={popoverElementRef}
+      >
+        <ExpandButton
+          fontSize={1}
+          mode="bleed"
+          onClick={open ? collapse : expand}
+          padding={1}
+          ref={expandElementRef}
+          selected={open}
+          text="…"
+        />
+      </Popover>,
+      ...rawItems.slice(len - afterLength),
+    ]
+  }
+
+  return rawItems
+}

package/src/core/components/breadcrumbs/index.ts

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

package/src/core/components/dialog/__workshop__/activate.tsx

@@ -0,0 +1,134 @@
+import {useState} from 'react'
+
+import {Button, Flex, Stack, Text} from '../../../primitives'
+import {Layer, LayerProvider} from '../../../utils'
+import {Menu, MenuButton, MenuItem} from '../../menu'
+import {Dialog} from '../dialog'
+
+export default function LayeringFocusStory() {
+  const [firstDialogOpen, setFirstDialogOpen] = useState<boolean>(false)
+  const [secondDialogOpen, setSecondDialogOpen] = useState<boolean>(false)
+  const [thirdDialogOpen, setThirdDialogOpen] = useState<boolean>(false)
+  const [fourthDialogOpen, setFourthDialogOpen] = useState<boolean>(false)
+
+  return (
+    <LayerProvider>
+      <Flex align="center" height="fill" justify="center">
+        <Layer onActivate={({activeElement}) => activeElement?.focus()}>
+          <Button
+            text="Open dialog 1"
+            onClick={() => setFirstDialogOpen(true)}
+            id="open-dialog-1-button"
+          />
+
+          {firstDialogOpen && (
+            <Dialog
+              header="Dialog 1"
+              id="1"
+              onActivate={({activeElement}) => activeElement?.focus()}
+              onClose={() => setFirstDialogOpen(false)}
+            >
+              <Stack space={2} padding={3}>
+                <Button
+                  mode="ghost"
+                  text="Open dialog 2"
+                  onClick={() => setSecondDialogOpen(true)}
+                  id="open-dialog-2-button-1"
+                />
+                <Button
+                  mode="ghost"
+                  text="Open dialog 2"
+                  onClick={() => setSecondDialogOpen(true)}
+                  id="open-dialog-2-button-2"
+                />
+                <Button
+                  mode="ghost"
+                  text="Open dialog 2"
+                  onClick={() => setSecondDialogOpen(true)}
+                  id="open-dialog-2-button-3"
+                />
+              </Stack>
+
+              {secondDialogOpen && (
+                <Dialog
+                  header="Dialog 2"
+                  id="2"
+                  onActivate={({activeElement}) => activeElement?.focus()}
+                  onClose={() => setSecondDialogOpen(false)}
+                >
+                  <Stack space={2} padding={3}>
+                    <Button
+                      mode="ghost"
+                      text="Open dialog 3"
+                      onClick={() => setThirdDialogOpen(true)}
+                      id="open-dialog-3-button-1"
+                    />
+                    <Button
+                      mode="ghost"
+                      text="Open dialog 3"
+                      onClick={() => setThirdDialogOpen(true)}
+                      id="open-dialog-3-button-2"
+                    />
+                    <Button
+                      mode="ghost"
+                      text="Open dialog 3"
+                      onClick={() => setThirdDialogOpen(true)}
+                      id="open-dialog-3-button-3"
+                    />
+                  </Stack>
+
+                  {thirdDialogOpen && (
+                    <Dialog
+                      header="Dialog 3"
+                      id="3"
+                      onActivate={({activeElement}) => activeElement?.focus()}
+                      onClose={() => setThirdDialogOpen(false)}
+                    >
+                      <Stack space={2} padding={3}>
+                        <MenuButton
+                          id="menu"
+                          button={
+                            <Button mode="ghost" text="Open menu" id="open-dialog-4-menu-button" />
+                          }
+                          menu={
+                            <Menu>
+                              <MenuItem
+                                text="Open dialog 4"
+                                onClick={() => setFourthDialogOpen(true)}
+                              />
+                              <MenuItem
+                                text="Open dialog 4"
+                                onClick={() => setFourthDialogOpen(true)}
+                              />
+                              <MenuItem
+                                text="Open dialog 4"
+                                onClick={() => setFourthDialogOpen(true)}
+                              />
+                            </Menu>
+                          }
+                        />
+                      </Stack>
+
+                      {fourthDialogOpen && (
+                        <Dialog
+                          header="Dialog 4"
+                          id="4"
+                          onActivate={({activeElement}) => activeElement?.focus()}
+                          onClose={() => setFourthDialogOpen(false)}
+                        >
+                          <Stack space={2} padding={3}>
+                            <Text>👋</Text>
+                          </Stack>
+                        </Dialog>
+                      )}
+                    </Dialog>
+                  )}
+                </Dialog>
+              )}
+            </Dialog>
+          )}
+        </Layer>
+      </Flex>
+    </LayerProvider>
+  )
+}

package/src/core/components/dialog/__workshop__/autoFocus.tsx

@@ -0,0 +1,29 @@
+import {Box, Button, Dialog, Text} from '@bettercms-ai/kit'
+import {useAction, useBoolean} from '@bettercms-ai/kit-workshop'
+
+export default function AutoFocusStory() {
+  const autoFocus = useBoolean('Auto-focus', true, 'Props')
+  const open = useBoolean('Open', false, 'Props')
+  const handleClose = useAction('onClose')
+
+  if (!open) {
+    return (
+      <Box padding={4}>
+        <Text muted>Use knobs to open the dialog</Text>
+      </Box>
+    )
+  }
+
+  return (
+    <Dialog
+      __unstable_autoFocus={autoFocus}
+      header="Auto-focus example"
+      id="auto-focus-example"
+      onClose={handleClose}
+    >
+      <Box padding={4}>
+        <Button text="Focusable button" />
+      </Box>
+    </Dialog>
+  )
+}