@bettercms-ai/kit 0.1.0

package/src/core/components/hotkeys/hotkeys.tsx

@@ -0,0 +1,66 @@
+import {forwardRef} from 'react'
+import {styled} from 'styled-components'
+
+import {Inline, KBD} from '../../primitives'
+import {_getArrayProp} from '../../styles'
+import {Radius} from '../../types'
+
+/**
+ * @public
+ */
+export interface HotkeysProps {
+  fontSize?: number | number[]
+  gap?: number | number[]
+  padding?: number | number[]
+  radius?: Radius | Radius[]
+  /**
+   * @deprecated Use `gap` instead. `space` will be removed in v4.
+   */
+  space?: number | number[]
+  keys?: string[]
+}
+
+const StyledHotkeys = styled.kbd`
+  font: inherit;
+  padding: 1px;
+
+  &:not([hidden]) {
+    display: block;
+  }
+`
+
+const Key = styled(KBD)`
+  &:not([hidden]) {
+    display: block;
+  }
+`
+
+/**
+ * Represent hotkeys (a keyboard combination) with semantic `<kbd>` elements.
+ *
+ * @public
+ */
+export const Hotkeys = forwardRef(function Hotkeys(
+  props: HotkeysProps & Omit<React.HTMLProps<HTMLElement>, 'as' | 'ref' | 'size'>,
+  ref: React.Ref<HTMLElement>,
+) {
+  const {fontSize, gap, keys, padding, radius, space: deprecated_space = 0.5, ...restProps} = props
+  const spacing = _getArrayProp(gap === undefined ? deprecated_space : gap)
+
+  if (!keys || keys.length === 0) {
+    return <></>
+  }
+
+  return (
+    <StyledHotkeys data-ui="Hotkeys" {...restProps} ref={ref}>
+      <Inline as="span" gap={spacing}>
+        {keys.map((key, i) => (
+          <Key fontSize={fontSize} key={i} padding={padding} radius={radius}>
+            {key}
+          </Key>
+        ))}
+      </Inline>
+    </StyledHotkeys>
+  )
+})
+Hotkeys.displayName = 'ForwardRef(Hotkeys)'

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

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

package/src/core/components/index.ts

@@ -0,0 +1,9 @@
+export * from './autocomplete'
+export * from './breadcrumbs'
+export * from './dialog'
+export * from './hotkeys'
+export * from './menu'
+export * from './skeleton'
+export * from './tab'
+export * from './toast'
+export * from './tree'

package/src/core/components/menu/__workshop__/asComponent.tsx

@@ -0,0 +1,45 @@
+import {Button, Flex, Menu, MenuButton, MenuItem, Text} from '@bettercms-ai/kit'
+import {forwardRef} from 'react'
+
+const CustomLink = forwardRef(function CustomLink(
+  props: {req: string} & Omit<React.HTMLProps<HTMLAnchorElement>, 'as' | 'href'>,
+  ref: React.ForwardedRef<HTMLAnchorElement>,
+): React.JSX.Element {
+  const {children, req, ...restProps} = props
+
+  return (
+    // eslint-disable-next-line jsx-a11y/anchor-is-valid
+    <a data-required={req} {...restProps} href="#" ref={ref}>
+      {children}
+    </a>
+  )
+})
+
+export default function AsComponentStory() {
+  const props = {href: '#', req: 'example'}
+
+  return (
+    <Flex align="center" height="fill" justify="center">
+      <MenuButton
+        button={<Button text="Menu with components" />}
+        id="test"
+        menu={
+          <Menu>
+            <MenuItem as={CustomLink} data-as="a" {...props} padding={3}>
+              <Text>Component 1</Text>
+            </MenuItem>
+            <MenuItem as={CustomLink} data-as="a" {...props} padding={3}>
+              <Text>Component 2</Text>
+            </MenuItem>
+            <MenuItem as={CustomLink} data-as="a" {...props} padding={3}>
+              <Text>Component 3</Text>
+            </MenuItem>
+            <MenuItem as={CustomLink} data-as="a" {...props} padding={3}>
+              <Text>Component 3</Text>
+            </MenuItem>
+          </Menu>
+        }
+      />
+    </Flex>
+  )
+}

package/src/core/components/menu/__workshop__/avatarMenu.tsx

@@ -0,0 +1,51 @@
+import {UsersIcon} from '@bettercms-ai/icons'
+
+import {Avatar, Badge, Box, Button, Flex, Text} from '../../../primitives'
+import {Hotkeys} from '../../hotkeys'
+import {Menu} from '../menu'
+import {MenuButton} from '../menuButton'
+import {MenuItem} from '../menuItem'
+
+export default function AvatarMenuStory() {
+  return (
+    <Flex align="center" height="fill" justify="center">
+      <MenuButton
+        button={<Button icon={UsersIcon} />}
+        id="avatar-menu"
+        menu={
+          <Menu>
+            <MenuItem padding={0}>
+              <Flex align="center" padding={1}>
+                <Box flex="none">
+                  <Avatar color="purple" initials="JS" />
+                </Box>
+                <Box flex={1} padding={2}>
+                  <Text size={1}>Jane Smith</Text>
+                </Box>
+                <Box padding={1}>
+                  <Badge>Me</Badge>
+                </Box>
+                <Box padding={1}>
+                  <Hotkeys keys={['Cmd', '1']} />
+                </Box>
+              </Flex>
+            </MenuItem>
+            <MenuItem padding={0}>
+              <Flex align="center" padding={1}>
+                <Box flex="none">
+                  <Avatar color="magenta" initials="JS" />
+                </Box>
+                <Box flex={1} padding={2}>
+                  <Text size={1}>John Doe</Text>
+                </Box>
+                <Box padding={1}>
+                  <Hotkeys keys={['Cmd', '2']} />
+                </Box>
+              </Flex>
+            </MenuItem>
+          </Menu>
+        }
+      />
+    </Flex>
+  )
+}

package/src/core/components/menu/__workshop__/closableMenuButton.tsx

@@ -0,0 +1,46 @@
+import {AddIcon} from '@bettercms-ai/icons'
+import {Box, Button, Menu, MenuButton, MenuButtonProps, MenuItem, Stack} from '@bettercms-ai/kit'
+import {useRef} from 'react'
+
+const POPOVER_PROPS: MenuButtonProps['popover'] = {
+  constrainSize: true,
+}
+
+export default function ClosableMenuButtonStory() {
+  const ref = useRef<HTMLButtonElement | null>(null)
+
+  return (
+    <Box padding={[4, 5, 6]}>
+      <Stack>
+        <MenuButton
+          button={<Button text="Open" />}
+          id="closable-example"
+          menu={
+            <Menu padding={0} space={0}>
+              <Stack padding={1} space={1}>
+                <MenuItem text="Item 1" />
+                <MenuItem text="Item 2" />
+                <MenuItem text="Item 3" />
+                <MenuItem text="Item 4" />
+              </Stack>
+              <Stack padding={1} style={{borderTop: '1px solid var(--card-border-color)'}}>
+                <Button
+                  icon={AddIcon}
+                  onClick={() => {
+                    ref.current?.click()
+                    ref.current?.focus()
+                  }}
+                  mode="bleed"
+                  text="Add item"
+                  tone="primary"
+                />
+              </Stack>
+            </Menu>
+          }
+          popover={POPOVER_PROPS}
+          ref={ref}
+        />
+      </Stack>
+    </Box>
+  )
+}

package/src/core/components/menu/__workshop__/constrainedInBoundary.tsx

@@ -0,0 +1,134 @@
+import {ErrorOutlineIcon} from '@bettercms-ai/icons'
+import {
+  BoundaryElementProvider,
+  Box,
+  Button,
+  Card,
+  Flex,
+  Menu,
+  MenuButton,
+  MenuItem,
+  SelectableTone,
+  Text,
+} from '@bettercms-ai/kit'
+import {useState} from 'react'
+
+import {MenuButtonProps} from '../menuButton'
+
+const POPOVER_PROPS: MenuButtonProps['popover'] = {
+  constrainSize: true,
+  placement: 'bottom',
+  portal: true,
+}
+
+const items: {tone: SelectableTone; message: string}[] = [
+  {
+    tone: 'critical',
+    message: 'Critical message',
+  },
+  {
+    tone: 'critical',
+    message: 'Critical message',
+  },
+  {
+    tone: 'critical',
+    message: 'Critical message',
+  },
+  {
+    tone: 'critical',
+    message: 'Critical message',
+  },
+  {
+    tone: 'critical',
+    message: 'Critical message',
+  },
+  {
+    tone: 'critical',
+    message: 'Critical message',
+  },
+  {
+    tone: 'critical',
+    message: 'Critical message',
+  },
+  {
+    tone: 'critical',
+    message: 'Critical message',
+  },
+  {
+    tone: 'critical',
+    message: 'Critical message',
+  },
+  {
+    tone: 'critical',
+    message: 'Critical message',
+  },
+  {
+    tone: 'critical',
+    message: 'Critical message',
+  },
+  {
+    tone: 'critical',
+    message: 'Critical message',
+  },
+  {
+    tone: 'critical',
+    message: 'Critical message',
+  },
+  {
+    tone: 'critical',
+    message: 'Critical message',
+  },
+  {
+    tone: 'critical',
+    message: 'Critical message',
+  },
+  {
+    tone: 'critical',
+    message: 'Critical message',
+  },
+  {
+    tone: 'critical',
+    message: 'Critical message',
+  },
+]
+
+export default function ConstrainedInBoundaryStory() {
+  const [boundaryElement, setBoundaryElement] = useState<HTMLDivElement | null>(null)
+
+  return (
+    <Box height="fill" padding={[4, 5, 6]} sizing="border">
+      <Card height="fill" shadow={1}>
+        <Flex height="fill">
+          <Card flex={1} padding={4}>
+            <Text>Pane</Text>
+          </Card>
+          <Card borderLeft flex={1} padding={2} ref={setBoundaryElement}>
+            <Flex>
+              <Box flex={1} padding={3}>
+                <Text>Pane</Text>
+              </Box>
+              <Box>
+                <BoundaryElementProvider element={boundaryElement}>
+                  <MenuButton
+                    button={<Button icon={ErrorOutlineIcon} mode="bleed" tone="critical" />}
+                    id="validation-menu"
+                    menu={
+                      <Menu>
+                        {items.map((item, itemIndex) => (
+                          <MenuItem key={itemIndex} padding={5} tone={item.tone}>
+                            <Text>{item.message}</Text>
+                          </MenuItem>
+                        ))}
+                      </Menu>
+                    }
+                    popover={POPOVER_PROPS}
+                  />
+                </BoundaryElementProvider>
+              </Box>
+            </Flex>
+          </Card>
+        </Flex>
+      </Card>
+    </Box>
+  )
+}

package/src/core/components/menu/__workshop__/customMenuItem.tsx

@@ -0,0 +1,45 @@
+import {Box, Card, LayerProvider, Menu, MenuDivider, MenuItem, Stack, Text} from '@bettercms-ai/kit'
+
+export default function CustomMenuItemStory() {
+  return (
+    <Box padding={[4, 5, 6]}>
+      <Card radius={3} shadow={2}>
+        <LayerProvider>
+          <Menu>
+            <MenuItem padding={3}>
+              <Stack space={3}>
+                <Text weight="medium" size={1}>
+                  First option
+                </Text>
+                <Text muted size={1}>
+                  Description
+                </Text>
+              </Stack>
+            </MenuItem>
+            <MenuItem padding={3}>
+              <Stack space={3}>
+                <Text weight="medium" size={1}>
+                  Second option
+                </Text>
+                <Text muted size={1}>
+                  Description
+                </Text>
+              </Stack>
+            </MenuItem>
+            <MenuDivider />
+            <MenuItem padding={3} tone="critical">
+              <Stack space={3}>
+                <Text weight="medium" size={1}>
+                  Dangerous option
+                </Text>
+                <Text muted size={1}>
+                  Description
+                </Text>
+              </Stack>
+            </MenuItem>
+          </Menu>
+        </LayerProvider>
+      </Card>
+    </Box>
+  )
+}

package/src/core/components/menu/__workshop__/customSelectedState.tsx

@@ -0,0 +1,39 @@
+import {ChevronDownIcon} from '@bettercms-ai/icons'
+import {useSelect} from '@bettercms-ai/kit-workshop'
+
+import {Box, Button} from '../../../primitives'
+import {Menu} from '../menu'
+import {MenuButton} from '../menuButton'
+import {MenuItem} from '../menuItem'
+
+const selectedOptions = {
+  undefined: 'undefined',
+  true: true,
+  false: false,
+} as const
+
+export default function CustomSelectedStateStory() {
+  const selected = useSelect('Selected', selectedOptions, false)
+
+  return (
+    <Box padding={4}>
+      <MenuButton
+        button={
+          <Button
+            icon={ChevronDownIcon}
+            mode="bleed"
+            selected={selected === 'undefined' ? undefined : selected}
+            text="Menu"
+          />
+        }
+        id="test-menu"
+        menu={
+          <Menu>
+            <MenuItem text="Item 1" />
+            <MenuItem text="Item 2" />
+          </Menu>
+        }
+      />
+    </Box>
+  )
+}

package/src/core/components/menu/__workshop__/disableFocusOnClose.tsx

@@ -0,0 +1,40 @@
+import {ChevronDownIcon} from '@bettercms-ai/icons'
+import {Button, Flex, Menu, MenuButton, MenuButtonProps, MenuItem} from '@bettercms-ai/kit'
+import {useBoolean} from '@bettercms-ai/kit-workshop'
+
+const POPOVER_PROPS: MenuButtonProps['popover'] = {
+  constrainSize: true,
+  matchReferenceWidth: true,
+}
+
+export default function DisableFocusOnCloseStory() {
+  const disableRestoreFocusOnClose = useBoolean('Disable restore focus on close', false)
+
+  return (
+    <Flex align="center" height="fill" justify="center" padding={4} sizing="border">
+      <MenuButton
+        __unstable_disableRestoreFocusOnClose={disableRestoreFocusOnClose}
+        button={
+          <Button
+            iconRight={ChevronDownIcon}
+            mode="ghost"
+            text={
+              disableRestoreFocusOnClose
+                ? 'Should not focus after close'
+                : 'Should focus after close'
+            }
+          />
+        }
+        id="example"
+        menu={
+          <Menu>
+            <MenuItem text="Test 1" />
+            <MenuItem text="Test 2" />
+            <MenuItem text="Test 3" />
+          </Menu>
+        }
+        popover={POPOVER_PROPS}
+      />
+    </Flex>
+  )
+}

package/src/core/components/menu/__workshop__/groups.tsx

@@ -0,0 +1,156 @@
+import {
+  Box,
+  Button,
+  Card,
+  Inline,
+  LayerProvider,
+  Menu,
+  MenuButton,
+  MenuButtonProps,
+  MenuDivider,
+  MenuGroup,
+  MenuItem,
+} from '@bettercms-ai/kit'
+import {useAction} from '@bettercms-ai/kit-workshop'
+
+const POPOVER_PROPS: MenuButtonProps['popover'] = {
+  placement: 'bottom',
+  portal: true,
+  preventOverflow: true,
+}
+
+const NESTED_POPOVER_PROPS: MenuButtonProps['popover'] = {
+  placement: 'right-start',
+  portal: true,
+  preventOverflow: true,
+}
+
+export default function GroupsStory() {
+  return (
+    <Box padding={[4, 5, 6]}>
+      <Card padding={1} radius={3} shadow={1}>
+        <Inline space={1}>
+          <LayerProvider>
+            <MenuButton
+              button={<Button fontSize={1} mode="bleed" padding={2} text="File" />}
+              id="example"
+              menu={
+                <Menu>
+                  <MenuItem
+                    fontSize={1}
+                    hotkeys={['⌘', 'T']}
+                    onClick={useAction('New tab')}
+                    padding={2}
+                    text="New tab"
+                  />
+                  <MenuItem
+                    fontSize={1}
+                    hotkeys={['⌘', 'N']}
+                    onClick={useAction('New window')}
+                    padding={2}
+                    text="New window"
+                  />
+                  <MenuItem
+                    fontSize={1}
+                    hotkeys={['⇧', '⌘', 'T']}
+                    onClick={useAction('Reopen closed tab')}
+                    padding={2}
+                    text="Reopen closed tab"
+                  />
+                  <MenuItem
+                    fontSize={1}
+                    hotkeys={['⌘', 'O']}
+                    onClick={useAction('Open file…')}
+                    padding={2}
+                    text="Open file…"
+                  />
+                  <MenuItem
+                    fontSize={1}
+                    hotkeys={['⌘', 'L']}
+                    onClick={useAction('Open location…')}
+                    padding={2}
+                    text="Open location…"
+                  />
+                  <MenuDivider />
+                  <MenuGroup
+                    fontSize={1}
+                    onClick={useAction('Share')}
+                    padding={2}
+                    popover={NESTED_POPOVER_PROPS}
+                    text="Share"
+                  >
+                    <MenuItem
+                      fontSize={1}
+                      onClick={useAction('Share / Email link')}
+                      padding={2}
+                      text="Email link"
+                    />
+                    <MenuItem
+                      fontSize={1}
+                      onClick={useAction('Share / Messages')}
+                      padding={2}
+                      text="Messages"
+                    />
+                    <MenuItem
+                      fontSize={1}
+                      onClick={useAction('Share / Airdrop')}
+                      padding={2}
+                      text="Airdrop"
+                    />
+                    <MenuItem fontSize={1} onClick={useAction('Notes')} padding={2} text="Notes" />
+                    <MenuGroup
+                      fontSize={1}
+                      onClick={useAction('Share / More')}
+                      padding={2}
+                      popover={NESTED_POPOVER_PROPS}
+                      text="More"
+                    >
+                      <MenuItem
+                        fontSize={1}
+                        onClick={useAction('Share / More / Email link')}
+                        padding={2}
+                        text="Email link"
+                      />
+                      <MenuItem
+                        fontSize={1}
+                        onClick={useAction('Share / More / Messages')}
+                        padding={2}
+                        text="Messages"
+                      />
+                      <MenuItem
+                        fontSize={1}
+                        onClick={useAction('Share / More / Airdrop')}
+                        padding={2}
+                        text="Airdrop"
+                      />
+                      <MenuItem
+                        fontSize={1}
+                        onClick={useAction('Share / More / Notes')}
+                        padding={2}
+                        text="Notes"
+                      />
+                    </MenuGroup>
+                  </MenuGroup>
+                  <MenuDivider />
+                  <MenuItem
+                    fontSize={1}
+                    hotkeys={['⌘', 'P']}
+                    onClick={useAction('Print…')}
+                    padding={2}
+                    text="Print…"
+                  />
+                </Menu>
+              }
+              popover={POPOVER_PROPS}
+            />
+          </LayerProvider>
+
+          <Button disabled fontSize={1} mode="bleed" padding={2} text="Edit" />
+          <Button disabled fontSize={1} mode="bleed" padding={2} text="View" />
+          <Button disabled fontSize={1} mode="bleed" padding={2} text="Window" />
+          <Button disabled fontSize={1} mode="bleed" padding={2} text="Help" />
+        </Inline>
+      </Card>
+    </Box>
+  )
+}