@bettercms-ai/kit 0.1.0

package/src/core/components/menu/useMenuController.ts

@@ -0,0 +1,231 @@
+import {useCallback, useEffect, useRef, useState} from 'react'
+
+import {_getFocusableElements, _sortElements} from './helpers'
+
+/**
+ * @internal
+ */
+export interface MenuController {
+  activeElement: HTMLElement | null
+  activeIndex: number
+  handleItemMouseEnter: (event: React.MouseEvent<HTMLElement>) => void
+  handleItemMouseLeave: () => void
+  handleKeyDown: (event: React.KeyboardEvent<HTMLDivElement>) => void
+  mount: (element: HTMLElement | null, selected?: boolean) => () => void
+}
+
+/**
+ * This controller is responsible for controlling UI menu state.
+ *
+ * @internal
+ */
+export function useMenuController(props: {
+  onKeyDown?: React.KeyboardEventHandler
+  originElement?: HTMLElement | null
+  shouldFocus: 'first' | 'last' | null
+  rootElementRef: React.MutableRefObject<HTMLDivElement | null>
+}): MenuController {
+  const {onKeyDown, originElement, shouldFocus, rootElementRef} = props
+  const elementsRef = useRef<HTMLElement[]>([])
+  const [activeIndex, _setActiveIndex] = useState(-1)
+  const activeIndexRef = useRef(activeIndex)
+  const [activeElement, setActiveElement] = useState<HTMLElement | null>(null)
+
+  const setActiveIndex = useCallback((nextActiveIndex: number) => {
+    _setActiveIndex(nextActiveIndex)
+    activeIndexRef.current = nextActiveIndex
+    setActiveElement(elementsRef.current[nextActiveIndex] || null)
+  }, [])
+
+  const mount = useCallback(
+    (element: HTMLElement | null, selected?: boolean): (() => void) => {
+      if (!element) return () => undefined
+
+      if (elementsRef.current.indexOf(element) === -1) {
+        elementsRef.current.push(element)
+        _sortElements(rootElementRef.current, elementsRef.current)
+      }
+
+      if (selected) {
+        const selectedIndex = elementsRef.current.indexOf(element)
+
+        setActiveIndex(selectedIndex)
+      }
+
+      return () => {
+        const idx = elementsRef.current.indexOf(element)
+
+        if (idx > -1) {
+          elementsRef.current.splice(idx, 1)
+        }
+      }
+    },
+    [rootElementRef, setActiveIndex],
+  )
+
+  const handleKeyDown = useCallback(
+    (event: React.KeyboardEvent<HTMLDivElement>) => {
+      // Move focus to the element that opened the menu before handling the `Tab` press
+      if (event.key === 'Tab') {
+        if (originElement) {
+          originElement.focus()
+        }
+
+        return
+      }
+
+      // Move focus to the first focusable menuitem
+      if (event.key === 'Home') {
+        event.preventDefault()
+        event.stopPropagation()
+
+        const focusableElements = _getFocusableElements(elementsRef.current)
+        const el = focusableElements[0]
+
+        if (!el) return
+
+        const currentIndex = elementsRef.current.indexOf(el)
+
+        setActiveIndex(currentIndex)
+
+        return
+      }
+
+      // Move focus to the last focusable menuitem
+      if (event.key === 'End') {
+        event.preventDefault()
+        event.stopPropagation()
+
+        const focusableElements = _getFocusableElements(elementsRef.current)
+        const el = focusableElements[focusableElements.length - 1]
+
+        if (!el) return
+
+        const currentIndex = elementsRef.current.indexOf(el)
+
+        setActiveIndex(currentIndex)
+
+        return
+      }
+
+      if (event.key === 'ArrowUp') {
+        event.preventDefault()
+        event.stopPropagation()
+
+        const focusableElements = _getFocusableElements(elementsRef.current)
+        const focusableLen = focusableElements.length
+
+        if (focusableLen === 0) return
+
+        const focusedElement = elementsRef.current[activeIndexRef.current]
+
+        let focusedIndex = focusableElements.indexOf(focusedElement)
+
+        focusedIndex = (focusedIndex - 1 + focusableLen) % focusableLen
+
+        const el = focusableElements[focusedIndex]
+        const currentIndex = elementsRef.current.indexOf(el)
+
+        setActiveIndex(currentIndex)
+
+        return
+      }
+
+      if (event.key === 'ArrowDown') {
+        event.preventDefault()
+        event.stopPropagation()
+
+        const focusableElements = _getFocusableElements(elementsRef.current)
+        const focusableLen = focusableElements.length
+
+        if (focusableLen === 0) return
+
+        const focusedElement = elementsRef.current[activeIndexRef.current]
+
+        let focusedIndex = focusableElements.indexOf(focusedElement)
+
+        focusedIndex = (focusedIndex + 1) % focusableLen
+
+        const el = focusableElements[focusedIndex]
+        const currentIndex = elementsRef.current.indexOf(el)
+
+        setActiveIndex(currentIndex)
+
+        return
+      }
+
+      if (onKeyDown) {
+        onKeyDown(event)
+      }
+    },
+    [onKeyDown, originElement, setActiveIndex],
+  )
+
+  const handleItemMouseEnter = useCallback(
+    (event: React.MouseEvent<HTMLElement>) => {
+      const element = event.currentTarget
+      const currentIndex = elementsRef.current.indexOf(element)
+
+      setActiveIndex(currentIndex)
+    },
+    [setActiveIndex],
+  )
+
+  const handleItemMouseLeave = useCallback(() => {
+    // Set the active index to -2 to deactivate all menu items
+    // when the user moves the mouse away from the menu item.
+    // We avoid using -1 because it would focus the first menu item,
+    // which would be incorrect when the user hovers over a gap
+    // between two menu items or a menu divider.
+    setActiveIndex(-2)
+    rootElementRef.current?.focus()
+  }, [rootElementRef, setActiveIndex])
+
+  // Set focus on the currently active element
+  useEffect(() => {
+    if (!rootElementRef.current) return
+
+    const rafId = requestAnimationFrame(() => {
+      if (activeIndex === -1) {
+        if (shouldFocus === 'first') {
+          const focusableElements = _getFocusableElements(elementsRef.current)
+          const el = focusableElements[0]
+
+          if (el) {
+            const currentIndex = elementsRef.current.indexOf(el)
+
+            setActiveIndex(currentIndex)
+          }
+        }
+
+        if (shouldFocus === 'last') {
+          const focusableElements = _getFocusableElements(elementsRef.current)
+          const el = focusableElements[focusableElements.length - 1]
+
+          if (el) {
+            const currentIndex = elementsRef.current.indexOf(el)
+
+            setActiveIndex(currentIndex)
+          }
+        }
+
+        return
+      }
+
+      const element = elementsRef.current[activeIndex] || null
+
+      element?.focus()
+    })
+
+    return () => cancelAnimationFrame(rafId)
+  }, [activeIndex, rootElementRef, setActiveIndex, shouldFocus])
+
+  return {
+    activeElement,
+    activeIndex,
+    handleItemMouseEnter,
+    handleItemMouseLeave,
+    handleKeyDown,
+    mount,
+  }
+}

package/src/core/components/skeleton/__workshop__/delay.tsx

@@ -0,0 +1,70 @@
+import {
+  Box,
+  Card,
+  CodeSkeleton,
+  Container,
+  Flex,
+  HeadingSkeleton,
+  LabelSkeleton,
+  Skeleton,
+  Stack,
+  Text,
+  TextSkeleton,
+} from '@bettercms-ai/kit'
+import {useBoolean, useSelect} from '@bettercms-ai/kit-workshop'
+
+import {WORKSHOP_CARD_TONE_OPTIONS} from '../../../__workshop__/constants'
+
+export default function SkeletonDelayStory() {
+  const tone = useSelect('Tone', WORKSHOP_CARD_TONE_OPTIONS, '', 'Props') || 'default'
+  const animated = useBoolean('Animated', true)
+
+  return (
+    <Box padding={[4, 5, 6]}>
+      <Container width={1}>
+        <Text muted>Delayed by 2000ms</Text>
+        <Card tone={tone} marginTop={4} padding={2} radius={2} border>
+          <Flex align="center">
+            <Skeleton
+              style={{width: 90, height: 90}}
+              radius={2}
+              animated={animated}
+              marginRight={3}
+              delay={1000}
+            />
+            <Stack space={2} flex={1}>
+              <HeadingSkeleton
+                size={4}
+                style={{width: '100%'}}
+                radius={1}
+                animated={animated}
+                delay={1000}
+              />
+              <TextSkeleton
+                size={1}
+                style={{width: '100%'}}
+                radius={1}
+                animated={animated}
+                delay={1000}
+              />
+              <LabelSkeleton
+                size={1}
+                style={{width: '100%'}}
+                radius={1}
+                animated={animated}
+                delay={1000}
+              />
+              <CodeSkeleton
+                size={1}
+                style={{width: '100%'}}
+                radius={1}
+                animated={animated}
+                delay={1000}
+              />
+            </Stack>
+          </Flex>
+        </Card>
+      </Container>
+    </Box>
+  )
+}

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

@@ -0,0 +1,11 @@
+import {defineScope} from '@bettercms-ai/kit-workshop'
+import {lazy} from 'react'
+
+export default defineScope({
+  name: 'components/skeleton',
+  title: 'Skeleton',
+  stories: [
+    {name: 'skeleton', title: 'Skeleton', component: lazy(() => import('./skeleton'))},
+    {name: 'skeleton-delay', title: 'Skeleton delay', component: lazy(() => import('./delay'))},
+  ],
+})

package/src/core/components/skeleton/__workshop__/skeleton.tsx

@@ -0,0 +1,64 @@
+import {
+  Box,
+  Card,
+  CodeSkeleton,
+  Container,
+  Flex,
+  Grid,
+  HeadingSkeleton,
+  LabelSkeleton,
+  Skeleton,
+  Stack,
+  TextSkeleton,
+} from '@bettercms-ai/kit'
+import {useBoolean, useSelect} from '@bettercms-ai/kit-workshop'
+
+import {WORKSHOP_CARD_TONE_OPTIONS} from '../../../__workshop__/constants'
+
+export default function SkeletonStory() {
+  const tone = useSelect('Tone', WORKSHOP_CARD_TONE_OPTIONS, '', 'Props') || 'default'
+  const animated = useBoolean('Animated', true)
+
+  return (
+    <Box padding={[4, 5, 6]}>
+      <Container width={1}>
+        <Stack space={4}>
+          {[1, 2, 3].map((item) => (
+            <Card key={item} tone={tone} padding={2} radius={2} border>
+              <Flex align="center">
+                <Grid gap={2} columns={2} marginRight={3}>
+                  <Skeleton style={{width: 40, height: 40}} radius={2} animated={animated} />
+                  <Skeleton style={{width: 40, height: 40}} radius={2} animated={animated} />
+                  <Skeleton style={{width: 40, height: 40}} radius={2} animated={animated} />
+                  <Skeleton style={{width: 40, height: 40}} radius={2} animated={animated} />
+                </Grid>
+                <Stack space={2} flex={1}>
+                  <HeadingSkeleton style={{width: '100%'}} radius={1} animated={animated} />
+                  <TextSkeleton style={{width: '100%'}} radius={1} animated={animated} />
+                  <LabelSkeleton style={{width: '100%'}} radius={1} animated={animated} />
+                  <CodeSkeleton style={{width: '100%'}} radius={1} animated={animated} />
+                </Stack>
+              </Flex>
+              <Flex marginTop={2}>
+                <Skeleton
+                  style={{height: 50}}
+                  flex={1}
+                  marginRight={1}
+                  radius={2}
+                  animated={animated}
+                />
+                <Skeleton
+                  style={{height: 50}}
+                  flex={1}
+                  marginLeft={1}
+                  radius={2}
+                  animated={animated}
+                />
+              </Flex>
+            </Card>
+          ))}
+        </Stack>
+      </Container>
+    </Box>
+  )
+}

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

@@ -0,0 +1,2 @@
+export * from './skeleton'
+export * from './textSkeleton'

package/src/core/components/skeleton/skeleton.tsx

@@ -0,0 +1,57 @@
+import {forwardRef, useEffect, useState} from 'react'
+import {styled} from 'styled-components'
+
+import {Box, BoxOwnProps, ResponsiveRadiusProps} from '../../primitives'
+import {_getArrayProp} from '../../styles'
+import {responsiveRadiusStyle, ResponsiveRadiusStyleProps} from '../../styles/internal'
+import {skeletonStyle} from './styles'
+
+const StyledSkeleton = styled(Box)<
+  {$animated: boolean; $visible: boolean} & ResponsiveRadiusStyleProps
+>(responsiveRadiusStyle, skeletonStyle)
+
+/**
+ * This API might change. DO NOT USE IN PRODUCTION.
+ * @beta
+ */
+export interface SkeletonProps extends ResponsiveRadiusProps, Omit<BoxOwnProps, 'children'> {
+  animated?: boolean
+  delay?: number
+}
+
+/**
+ * This API might change. DO NOT USE IN PRODUCTION.
+ * @beta
+ */
+export const Skeleton = forwardRef(function Skeleton(
+  props: SkeletonProps & React.HTMLProps<HTMLDivElement>,
+  ref: React.Ref<HTMLDivElement>,
+) {
+  const {animated = false, delay, radius, ...restProps} = props
+  const [visible, setVisible] = useState<boolean>(delay ? false : true)
+
+  useEffect(() => {
+    if (!delay) {
+      return undefined
+    }
+
+    const timeout = setTimeout(() => {
+      setVisible(true)
+    }, delay)
+
+    return () => {
+      clearTimeout(timeout)
+    }
+  }, [delay])
+
+  return (
+    <StyledSkeleton
+      {...restProps}
+      $animated={animated}
+      $radius={_getArrayProp(radius)}
+      $visible={delay ? visible : true}
+      ref={ref}
+    />
+  )
+})
+Skeleton.displayName = 'ForwardRef(Skeleton)'

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

@@ -0,0 +1,50 @@
+import {css, keyframes} from 'styled-components'
+
+const keyframe = keyframes`
+  0% {
+    background-position: 100%;
+  }
+  100% {
+    background-position: -100%;
+  }
+`
+
+const animation = css`
+  background-image: linear-gradient(
+    to right,
+    var(--card-skeleton-color-from),
+    var(--card-skeleton-color-to),
+    var(--card-skeleton-color-from),
+    var(--card-skeleton-color-from),
+    var(--card-skeleton-color-from)
+  );
+  background-position: 100%;
+  background-size: 200% 100%;
+  background-attachment: fixed;
+  animation-name: ${keyframe};
+  animation-timing-function: ease-in-out;
+  animation-iteration-count: infinite;
+  animation-duration: 2000ms;
+`
+
+/**
+ * This API might change. DO NOT USE IN PRODUCTION.
+ * @beta
+ */
+export const skeletonStyle = css<{$animated: boolean; $visible: boolean}>`
+  opacity: ${({$visible}) => ($visible ? 1 : 0)};
+  transition: opacity 200ms ease-in;
+
+  @media screen and (prefers-reduced-motion: no-preference) {
+    ${({$animated}) =>
+      $animated
+        ? animation
+        : css`
+            background-color: var(--card-skeleton-color-from);
+          `}
+  }
+
+  @media screen and (prefers-reduced-motion: reduce) {
+    background-color: var(--card-skeleton-color-from);
+  }
+`

package/src/core/components/skeleton/textSkeleton.tsx

@@ -0,0 +1,122 @@
+import {getTheme_v2, ThemeFontKey} from '@bettercms-ai/kit/theme'
+import {forwardRef} from 'react'
+import {styled} from 'styled-components'
+
+import {_getArrayProp, _responsive, ThemeProps} from '../../styles'
+import {Skeleton, SkeletonProps} from './skeleton'
+
+const StyledSkeleton = styled(Skeleton)<{$size: number[]; $style: ThemeFontKey}>((
+  props: {
+    $size: number[]
+    $style: ThemeFontKey
+  } & ThemeProps,
+) => {
+  const {$size, $style} = props
+  const {font, media} = getTheme_v2(props.theme)
+  const fontStyle = font[$style]
+
+  const styles = _responsive(media, $size, (sizeIndex) => {
+    const fontSize = fontStyle.sizes[sizeIndex]
+    const capHeight = fontSize.lineHeight - fontSize.ascenderHeight - fontSize.descenderHeight
+
+    return {height: capHeight}
+  })
+
+  return styles
+})
+
+/**
+ * This API might change. DO NOT USE IN PRODUCTION.
+ * @beta
+ */
+export interface TextSkeletonProps extends SkeletonProps {
+  size?: number | number[]
+}
+
+/**
+ * This API might change. DO NOT USE IN PRODUCTION.
+ * @beta
+ */
+export interface LabelSkeletonProps extends SkeletonProps {
+  size?: number | number[]
+}
+
+/**
+ * This API might change. DO NOT USE IN PRODUCTION.
+ * @beta
+ */
+export interface HeadingSkeletonProps extends SkeletonProps {
+  size?: number | number[]
+}
+
+/**
+ * This API might change. DO NOT USE IN PRODUCTION.
+ * @beta
+ */
+export interface CodeSkeletonProps extends SkeletonProps {
+  size?: number | number[]
+}
+
+/**
+ * This API might change. DO NOT USE IN PRODUCTION.
+ * @beta
+ */
+export const TextSkeleton = forwardRef(function TextSkeleton(
+  props: TextSkeletonProps &
+    Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'children' | 'height' | 'size'>,
+  ref: React.Ref<HTMLDivElement>,
+) {
+  const {size = 2, ...restProps} = props
+  const $size = _getArrayProp(size)
+
+  return <StyledSkeleton {...restProps} $size={$size} ref={ref} $style="text" />
+})
+TextSkeleton.displayName = 'ForwardRef(TextSkeleton)'
+
+/**
+ * This API might change. DO NOT USE IN PRODUCTION.
+ * @beta
+ */
+export const LabelSkeleton = forwardRef(function TextSkeleton(
+  props: LabelSkeletonProps &
+    Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'children' | 'height' | 'size'>,
+  ref: React.Ref<HTMLDivElement>,
+) {
+  const {size = 2, ...restProps} = props
+  const $size = _getArrayProp(size)
+
+  return <StyledSkeleton {...restProps} $size={$size} ref={ref} $style="label" />
+})
+LabelSkeleton.displayName = 'ForwardRef(LabelSkeleton)'
+
+/**
+ * This API might change. DO NOT USE IN PRODUCTION.
+ * @beta
+ */
+export const HeadingSkeleton = forwardRef(function TextSkeleton(
+  props: HeadingSkeletonProps &
+    Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'children' | 'height' | 'size'>,
+  ref: React.Ref<HTMLDivElement>,
+) {
+  const {size = 2, ...restProps} = props
+  const $size = _getArrayProp(size)
+
+  return <StyledSkeleton {...restProps} $size={$size} ref={ref} $style="heading" />
+})
+HeadingSkeleton.displayName = 'ForwardRef(HeadingSkeleton)'
+
+/**
+ * This API might change. DO NOT USE IN PRODUCTION.
+ * @beta
+ */
+export const CodeSkeleton = forwardRef(function TextSkeleton(
+  props: CodeSkeletonProps &
+    Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'children' | 'height' | 'size'>,
+  ref: React.Ref<HTMLDivElement>,
+) {
+  const {size = 2, ...restProps} = props
+  const $size = _getArrayProp(size)
+
+  return <StyledSkeleton {...restProps} $size={$size} ref={ref} $style="code" />
+})
+CodeSkeleton.displayName = 'ForwardRef(CodeSkeleton)'

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

@@ -0,0 +1,79 @@
+import {OkHandIcon, RocketIcon, SunIcon} from '@bettercms-ai/icons'
+import {Box, Card, Tab, TabList, TabPanel, Text} from '@bettercms-ai/kit'
+import {useBoolean} from '@bettercms-ai/kit-workshop'
+import {useState} from 'react'
+
+export default function ExampleStory() {
+  const [tab, setTab] = useState('foo')
+  const useLongTitle = useBoolean('Use long title', false, 'Props') || false
+
+  const longTitle =
+    "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."
+
+  return (
+    <Box padding={[4, 5, 6]}>
+      <TabList space={[1, 2, 3]}>
+        <Tab
+          aria-controls="example-panel-foo"
+          icon={SunIcon}
+          id="example-tab-foo"
+          label="Foo"
+          onClick={() => setTab('foo')}
+          selected={tab === 'foo'}
+        />
+        <Tab
+          aria-controls="example-panel-bar"
+          icon={RocketIcon}
+          id="example-tab-bar"
+          label="Bar"
+          onClick={() => setTab('bar')}
+          selected={tab === 'bar'}
+        />
+        <Tab
+          aria-controls="example-panel-baz"
+          icon={OkHandIcon}
+          id="example-tab-baz"
+          label={useLongTitle ? longTitle : 'Baz'}
+          onClick={() => setTab('baz')}
+          selected={tab === 'baz'}
+        />
+      </TabList>
+      <TabPanel
+        aria-labelledby="example-panel-foo"
+        hidden={tab !== 'foo'}
+        id="example-panel-foo"
+        marginTop={[3, 4, 5]}
+      >
+        <Card border padding={3}>
+          <Text>
+            This is the <strong>Foo</strong> panel
+          </Text>
+        </Card>
+      </TabPanel>
+      <TabPanel
+        aria-labelledby="example-panel-bar"
+        hidden={tab !== 'bar'}
+        id="example-panel-bar"
+        marginTop={[3, 4, 5]}
+      >
+        <Card border padding={3}>
+          <Text>
+            This is the <strong>Bar</strong> panel
+          </Text>
+        </Card>
+      </TabPanel>
+      <TabPanel
+        aria-labelledby="example-panel-baz"
+        hidden={tab !== 'baz'}
+        id="example-panel-baz"
+        marginTop={[3, 4, 5]}
+      >
+        <Card border padding={3}>
+          <Text>
+            This is the <strong>Baz</strong> panel
+          </Text>
+        </Card>
+      </TabPanel>
+    </Box>
+  )
+}