@bettercms-ai/kit 0.1.0

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

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

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

@@ -0,0 +1,3 @@
+export * from './tab'
+export * from './tabList'
+export * from './tabPanel'

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

@@ -0,0 +1,101 @@
+import {forwardRef, useCallback, useEffect, useImperativeHandle, useRef} from 'react'
+import {styled} from 'styled-components'
+
+import {Button} from '../../primitives'
+import {ButtonTone} from '../../types'
+
+/**
+ * @public
+ */
+export interface TabProps {
+  /**
+   * The `id` of the correlating `TabPanel` component.
+   */
+  'aria-controls': string
+  'id': string
+  'icon'?: React.ElementType | React.ReactNode
+  'focused'?: boolean
+  'fontSize'?: number | number[]
+  'label'?: React.ReactNode
+  'padding'?: number | number[]
+  'selected'?: boolean
+  'tone'?: ButtonTone
+}
+
+const CustomButton = styled(Button)`
+  max-width: 100%;
+`
+
+/**
+ * @public
+ */
+export const Tab = forwardRef(function Tab(
+  props: TabProps &
+    Omit<
+      React.HTMLProps<HTMLButtonElement>,
+      'aria-controls' | 'as' | 'id' | 'label' | 'type' | 'width'
+    >,
+  forwardedRef: React.ForwardedRef<HTMLButtonElement>,
+) {
+  const {
+    icon,
+    id,
+    focused,
+    fontSize = 1,
+    label,
+    onClick,
+    onFocus,
+    padding = 2,
+    selected,
+    ...restProps
+  } = props
+  const ref = useRef<HTMLButtonElement | null>(null)
+  const focusedRef = useRef(false)
+
+  useImperativeHandle<HTMLButtonElement | null, HTMLButtonElement | null>(
+    forwardedRef,
+    () => ref.current,
+  )
+
+  const handleBlur = useCallback(() => {
+    focusedRef.current = false
+  }, [])
+
+  const handleFocus = useCallback(
+    (event: React.FocusEvent<HTMLButtonElement>) => {
+      focusedRef.current = true
+      if (onFocus) onFocus(event)
+    },
+    [onFocus],
+  )
+
+  useEffect(() => {
+    if (focused && !focusedRef.current) {
+      if (ref.current) ref.current.focus()
+      focusedRef.current = true
+    }
+  }, [focused])
+
+  return (
+    <CustomButton
+      data-ui="Tab"
+      {...restProps}
+      aria-selected={selected ? 'true' : 'false'}
+      fontSize={fontSize}
+      icon={icon}
+      id={id}
+      mode="bleed"
+      onClick={onClick}
+      onBlur={handleBlur}
+      onFocus={handleFocus}
+      padding={padding}
+      ref={ref}
+      role="tab"
+      selected={selected}
+      tabIndex={selected ? 0 : -1}
+      text={label}
+      type="button"
+    />
+  )
+})
+Tab.displayName = 'ForwardRef(Tab)'

package/src/core/components/tab/tabList.test.tsx

@@ -0,0 +1,48 @@
+/** @jest-environment jsdom */
+
+import {render} from '../../../../test'
+import {inlineSpaceStyle} from '../../primitives/inline/styles'
+import {Tab} from './tab'
+import {TabList} from './tabList'
+
+jest.mock('../../primitives/inline/styles', () => {
+  const actual = jest.requireActual('../../primitives/inline/styles')
+
+  return {
+    ...actual,
+    inlineSpaceStyle: jest.fn(actual.inlineSpaceStyle),
+  }
+})
+
+describe('components/tabList', () => {
+  const mockedInlineSpaceStyle = jest.mocked(inlineSpaceStyle)
+
+  beforeEach(() => {
+    mockedInlineSpaceStyle.mockClear()
+  })
+
+  function renderTabList(
+    props: Partial<React.ComponentProps<typeof TabList>> = {},
+  ): ReturnType<typeof render> {
+    return render(
+      <TabList {...props}>
+        <Tab aria-controls="tab-panel-a" id="tab-a" label="Tab A" />
+        <Tab aria-controls="tab-panel-b" id="tab-b" label="Tab B" />
+      </TabList>,
+    )
+  }
+
+  it('should support `space` and `gap` with the same behavior', () => {
+    renderTabList({space: 2})
+    expect(mockedInlineSpaceStyle).toHaveBeenCalledWith(expect.objectContaining({$space: [2]}))
+
+    mockedInlineSpaceStyle.mockClear()
+    renderTabList({gap: 2})
+    expect(mockedInlineSpaceStyle).toHaveBeenCalledWith(expect.objectContaining({$space: [2]}))
+  })
+
+  it('should prefer `gap` over `space` when both are provided', () => {
+    renderTabList({gap: 3, space: 1})
+    expect(mockedInlineSpaceStyle).toHaveBeenCalledWith(expect.objectContaining({$space: [3]}))
+  })
+})

package/src/core/components/tab/tabList.tsx

@@ -0,0 +1,70 @@
+import {Children, cloneElement, forwardRef, isValidElement, useCallback, useState} from 'react'
+import {styled} from 'styled-components'
+
+import {Inline, InlineOwnProps} from '../../primitives'
+
+/**
+ * @public
+ */
+export interface TabListProps extends Omit<InlineOwnProps, 'height'> {
+  children: Array<React.JSX.Element | null | undefined | false>
+}
+
+//Limits the width of tabs in tablist
+const CustomInline = styled(Inline)`
+  & > div {
+    display: inline-block;
+    vertical-align: middle;
+    max-width: 100%;
+    box-sizing: border-box;
+  }
+`
+
+/**
+ * @public
+ */
+export const TabList = forwardRef(function TabList(
+  props: TabListProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height'>,
+  ref,
+) {
+  const {children: childrenProp, ...restProps} = props
+  const [focusedIndex, setFocusedIndex] = useState(-1)
+
+  const children: React.JSX.Element[] = Children.toArray(childrenProp).filter(isValidElement)
+
+  const tabs = children.map((child, childIndex) =>
+    cloneElement(child, {
+      focused: focusedIndex === childIndex,
+      key: childIndex,
+      onFocus: () => setFocusedIndex(childIndex),
+    }),
+  )
+
+  const numTabs = tabs.length
+
+  const handleKeyDown = useCallback(
+    (event: React.KeyboardEvent<HTMLDivElement>) => {
+      if (event.key === 'ArrowLeft') {
+        setFocusedIndex((prevIndex) => (prevIndex + numTabs - 1) % numTabs)
+      }
+
+      if (event.key === 'ArrowRight') {
+        setFocusedIndex((prevIndex) => (prevIndex + 1) % numTabs)
+      }
+    },
+    [numTabs],
+  )
+
+  return (
+    <CustomInline
+      data-ui="TabList"
+      {...restProps}
+      onKeyDown={handleKeyDown}
+      ref={ref}
+      role="tablist"
+    >
+      {tabs}
+    </CustomInline>
+  )
+})
+TabList.displayName = 'ForwardRef(TabList)'

package/src/core/components/tab/tabPanel.tsx

@@ -0,0 +1,39 @@
+import {forwardRef} from 'react'
+
+import {Box, BoxOwnProps} from '../../primitives'
+
+/**
+ * @public
+ */
+export interface TabPanelProps extends BoxOwnProps {
+  /**
+   * The `id` of the correlating `Tab` component.
+   */
+  'aria-labelledby': string
+  'id': string
+}
+
+/**
+ * @public
+ */
+export const TabPanel = forwardRef(function TabPanel(
+  props: TabPanelProps &
+    Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'aria-labelledby' | 'id' | 'role'>,
+  ref: React.ForwardedRef<HTMLDivElement>,
+) {
+  const {flex, ...restProps} = props
+
+  return (
+    <Box
+      data-ui="TabPanel"
+      {...restProps}
+      flex={flex}
+      ref={ref}
+      role="tabpanel"
+      tabIndex={props.tabIndex === undefined ? 0 : props.tabIndex}
+    >
+      {props.children}
+    </Box>
+  )
+})
+TabPanel.displayName = 'ForwardRef(TabPanel)'

package/src/core/components/toast/__workshop__/hook.tsx

@@ -0,0 +1,71 @@
+import {Box, Button, Inline, ToastProvider, useToast} from '@bettercms-ai/kit'
+
+export default function HookStory() {
+  const toast = useToast()
+
+  return (
+    <ToastProvider>
+      <Box padding={[4, 5, 6]}>
+        <Inline space={2}>
+          <Button
+            onClick={() =>
+              toast.push({
+                id: 'status',
+                closable: true,
+                title: 'Information',
+                status: 'info',
+                description: (
+                  <>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis faucibus
+                    pellentesque luctus. Curabitur sed tortor a elit tempus malesuada. Quisque sed
+                    dapibus ligula, id pulvinar nisl.
+                  </>
+                ),
+              })
+            }
+            text="Push info"
+            tone="neutral"
+          />
+
+          <Button
+            onClick={() =>
+              toast.push({
+                id: 'status',
+                closable: true,
+                title: 'Warning',
+                status: 'warning',
+              })
+            }
+            text="Push warning"
+            tone="caution"
+          />
+
+          <Button
+            onClick={() =>
+              toast.push({
+                id: 'status',
+                closable: true,
+                title: 'Error',
+                status: 'error',
+              })
+            }
+            text="Push error"
+            tone="critical"
+          />
+
+          <Button
+            onClick={() =>
+              toast.push({
+                // id: 'status',
+                closable: true,
+                title: 'Some message',
+                // status: 'error',
+              })
+            }
+            text="Push some message"
+          />
+        </Inline>
+      </Box>
+    </ToastProvider>
+  )
+}

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

@@ -0,0 +1,19 @@
+import {defineScope} from '@bettercms-ai/kit-workshop'
+import {lazy} from 'react'
+
+export default defineScope({
+  name: 'components/toast',
+  title: 'Toast',
+  stories: [
+    {
+      name: 'toast',
+      title: 'Toast',
+      component: lazy(() => import('./toast')),
+    },
+    {
+      name: 'hook',
+      title: 'Hook',
+      component: lazy(() => import('./hook')),
+    },
+  ],
+})

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

@@ -0,0 +1,26 @@
+import {Box, Container, Toast} from '@bettercms-ai/kit'
+import {useAction, useBoolean, useSelect, useString, useText} from '@bettercms-ai/kit-workshop'
+
+import {WORKSHOP_TOAST_STATUS_OPTIONS} from '../../../__workshop__/constants'
+
+export default function ToastStory() {
+  const closable = useBoolean('Closable', false, 'Props')
+  const title = useString('Title', 'Toast title', 'Props')
+  const status = useSelect('Status', WORKSHOP_TOAST_STATUS_OPTIONS, '', 'Props') || undefined
+  const description = useText('Description', '', 'Props')
+  const handleClose = useAction('onClose')
+
+  return (
+    <Box padding={[4, 5, 6]}>
+      <Container width={0}>
+        <Toast
+          closable={closable}
+          description={description}
+          onClose={handleClose}
+          status={status}
+          title={title}
+        />
+      </Container>
+    </Box>
+  )
+}

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

@@ -0,0 +1,4 @@
+export * from './toast'
+export * from './toastProvider'
+export * from './types'
+export * from './useToast'

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

@@ -0,0 +1,77 @@
+import {getTheme_v2, ThemeColorStateToneKey} from '@bettercms-ai/kit/theme'
+import {styled} from 'styled-components'
+
+import {Card, type CardProps, Flex} from '../../primitives'
+import type {ButtonTone} from '../../types'
+
+const LOADING_BAR_HEIGHT = 2
+
+export const STATUS_CARD_TONE = {
+  error: 'critical',
+  warning: 'caution',
+  success: 'positive',
+  info: 'neutral',
+} satisfies {[key: string]: ThemeColorStateToneKey}
+
+export const BUTTON_TONE = {
+  error: 'critical',
+  warning: 'caution',
+  success: 'positive',
+  info: 'neutral',
+} satisfies {[key: string]: ButtonTone}
+
+export const TextBox = styled(Flex)`
+  overflow-x: auto;
+`
+
+export const StyledToast = styled(Card)`
+  pointer-events: all;
+  width: 100%;
+  position: relative;
+  overflow: hidden;
+  overflow: clip;
+
+  &[data-has-duration] {
+    padding-bottom: calc(${LOADING_BAR_HEIGHT}px / 2);
+  }
+`
+
+export const LoadingBar = styled.div`
+  display: flex;
+  position: absolute;
+  bottom: 0px;
+  top: 0px;
+  left: 0px;
+  right: 0px;
+  pointer-events: none;
+  z-index: -1;
+  overflow: hidden;
+  overflow: clip;
+  background: transparent;
+  align-items: flex-end;
+  will-change: opacity;
+`
+
+export const LoadingBarMask = styled(Card)`
+  position: absolute;
+  top: 0;
+  left: -${LOADING_BAR_HEIGHT}px;
+  right: -${LOADING_BAR_HEIGHT}px;
+  bottom: ${LOADING_BAR_HEIGHT}px;
+  z-index: 1;
+`
+
+type LoadingBarProgressProps = Omit<CardProps, 'tone'> & {
+  tone: ThemeColorStateToneKey
+}
+export const LoadingBarProgress = styled<React.ComponentType<LoadingBarProgressProps>>(Card)`
+  display: block;
+  height: 100%;
+  width: 100%;
+  transform-origin: 0% 50%;
+  background-color: ${(props) => {
+    const {color} = getTheme_v2(props.theme)
+
+    return color.button.default[props.tone].enabled.bg
+  }};
+`

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

@@ -0,0 +1,101 @@
+/** @jest-environment jsdom */
+
+import {render} from '../../../../test'
+import {ToastContext} from './toastContext'
+import {ToastContextValue} from './types'
+import {useToast} from './useToast'
+
+describe('components/toast', () => {
+  describe('useToast', () => {
+    it('should get context value', async () => {
+      const log = jest.fn()
+
+      function Debug() {
+        const rootToast = useToast()
+
+        log(rootToast)
+
+        return <>debug</>
+      }
+
+      function Root() {
+        const value: ToastContextValue = {
+          version: 0.0,
+          push: () => '',
+        }
+
+        return (
+          <ToastContext.Provider value={value}>
+            <Debug />
+          </ToastContext.Provider>
+        )
+      }
+
+      render(<Root />)
+
+      expect(log.mock.calls[0][0].version).toBe(0.0)
+      expect(typeof log.mock.calls[0][0].push).toBe('function')
+    })
+
+    it('should fail when no context value is provided', async () => {
+      const log = jest.fn()
+
+      function Debug() {
+        try {
+          useToast()
+        } catch (err) {
+          log(err)
+        }
+
+        return null
+      }
+
+      function Root() {
+        const value = undefined
+
+        return (
+          <ToastContext.Provider value={value as any}>
+            <Debug />
+          </ToastContext.Provider>
+        )
+      }
+
+      render(<Root />)
+
+      expect(log.mock.calls[0][0].message).toEqual('useToast(): missing context value')
+    })
+
+    it('should fail when context value is not compatible', async () => {
+      const log = jest.fn()
+
+      function Debug() {
+        try {
+          useToast()
+        } catch (err) {
+          log(err)
+        }
+
+        return null
+      }
+
+      function Root() {
+        // NOTE: we’re testing this because the context value may be a function in the future
+        const value = () => {
+          return {version: 1}
+        }
+
+        return (
+          <ToastContext.Provider value={value as any}>
+            <Debug />
+          </ToastContext.Provider>
+        )
+      }
+
+      render(<Root />)
+
+      expect(log.mock.calls[0][0].message).toEqual(
+        'useToast(): the context value is not compatible',
+      )
+    })
+  })
+})