@bettercms-ai/kit 0.1.0

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

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

package/src/core/primitives/label/label.tsx

@@ -0,0 +1,87 @@
+import {ThemeFontWeightKey} from '@bettercms-ai/kit/theme'
+import {forwardRef} from 'react'
+import {styled} from 'styled-components'
+
+import {_getArrayProp} from '../../styles'
+import {responsiveLabelFont, responsiveTextAlignStyle} from '../../styles/internal'
+import {ElementType, Props, TextAlign} from '../../types'
+import {SpanWithTextOverflow} from '../../utils/spanWithTextOverflow'
+import {labelBaseStyle} from './styles'
+
+/**
+ * @public
+ */
+export interface LabelOwnProps {
+  accent?: boolean
+  align?: TextAlign | TextAlign[]
+  muted?: boolean
+  size?: number | number[]
+  /**
+   * Controls how overflowing text is treated.
+   * Use `textOverflow="ellipsis"` to render text as a single line which is concatenated with a `…` symbol.
+   * @beta
+   */
+  textOverflow?: 'ellipsis'
+  weight?: ThemeFontWeightKey
+}
+
+/**
+ * @public
+ */
+export type LabelProps<E extends ElementType = 'div'> = Props<LabelOwnProps, E>
+
+const StyledLabel = styled.div<{
+  $accent?: boolean
+  $align: TextAlign[]
+  $muted: boolean
+  $size: number[]
+}>(responsiveLabelFont, responsiveTextAlignStyle, labelBaseStyle)
+
+const LabelComponent = forwardRef(function Label(
+  props: LabelOwnProps & {as?: ElementType} & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'size'>,
+  ref: React.ForwardedRef<HTMLDivElement>,
+) {
+  const {
+    accent,
+    align,
+    children: childrenProp,
+    muted = false,
+    size = 2,
+    textOverflow,
+    weight,
+    ...restProps
+  } = props
+
+  let children = childrenProp
+
+  if (textOverflow === 'ellipsis') {
+    children = <SpanWithTextOverflow>{children}</SpanWithTextOverflow>
+  } else {
+    children = <span>{children}</span>
+  }
+
+  return (
+    <StyledLabel
+      data-ui="Label"
+      {...restProps}
+      $accent={accent}
+      $align={_getArrayProp(align)}
+      $muted={muted}
+      $size={_getArrayProp(size)}
+      $weight={weight}
+      ref={ref}
+    >
+      {children}
+    </StyledLabel>
+  )
+})
+LabelComponent.displayName = 'ForwardRef(Label)'
+
+/**
+ * Typographic labels.
+ *
+ * @public
+ */
+export const Label = LabelComponent as unknown as <E extends ElementType = 'div'>(
+  props: LabelProps<E>,
+) => React.JSX.Element

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

@@ -0,0 +1,45 @@
+import {getTheme_v2} from '@bettercms-ai/kit/theme'
+import {css} from 'styled-components'
+
+import {ThemeProps} from '../../styles'
+
+export function labelBaseStyle(
+  props: {$accent?: boolean; $muted: boolean} & ThemeProps,
+): ReturnType<typeof css> {
+  const {$accent, $muted} = props
+  const {font} = getTheme_v2(props.theme)
+
+  return css`
+    text-transform: uppercase;
+
+    ${$accent &&
+    css`
+      color: var(--card-accent-fg-color);
+    `}
+
+    ${$muted &&
+    css`
+      color: var(--card-muted-fg-color);
+    `}
+
+    & code {
+      font-family: ${font.code.family};
+      border-radius: 1px;
+    }
+
+    & a {
+      text-decoration: none;
+      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/popover/__workshop__/AlignedStory.tsx

@@ -0,0 +1,77 @@
+import {EllipsisVerticalIcon} from '@bettercms-ai/icons'
+import {Button, Card, Flex, Popover, Text, useClickOutsideEvent} from '@bettercms-ai/kit'
+import {useBoolean, useSelect} from '@bettercms-ai/kit-workshop'
+import {useCallback, useRef, useState} from 'react'
+
+import {
+  WORKSHOP_FLEX_ALIGN_OPTIONS,
+  WORKSHOP_FLEX_JUSTIFY_OPTIONS,
+  WORKSHOP_PLACEMENT_OPTIONS,
+  WORKSHOP_WIDTH_OPTIONS,
+} from '../../../__workshop__/constants'
+
+export default function AlignedStory() {
+  const constrainSize = useBoolean('Constrain size', false)
+  const placement = useSelect('Placement', WORKSHOP_PLACEMENT_OPTIONS, 'bottom')
+  const portal = useBoolean('Portal', true)
+  const width = useSelect('Width', WORKSHOP_WIDTH_OPTIONS, 'auto')
+
+  const flexAlign = useSelect('Align', WORKSHOP_FLEX_ALIGN_OPTIONS, 'flex-start')
+  const flexJustify = useSelect('Justify', WORKSHOP_FLEX_JUSTIFY_OPTIONS, 'flex-end')
+
+  const [open, setOpen] = useState(false)
+  const [boundaryElement, setBoundaryElement] = useState<HTMLDivElement | null>(null)
+  const buttonElementRef = useRef<HTMLButtonElement | null>(null)
+  const popoverElementRef = useRef<HTMLDivElement | null>(null)
+
+  const content = (
+    <Text size={1}>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque at nisl at sem tempor
+      hendrerit scelerisque ut libero. Maecenas iaculis efficitur lorem, ac faucibus mi imperdiet
+      quis. Cras a consectetur erat. Fusce imperdiet, dolor et pellentesque iaculis, ex quam luctus
+      felis, non ultrices enim sem vitae quam. Duis lorem velit, lacinia at rhoncus a, tempus vel
+      neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;
+      Sed id mauris quam. Nam finibus sapien non lacinia ultricies. Integer fermentum tortor at
+      pellentesque faucibus. In venenatis commodo placerat. Curabitur commodo tortor libero, vel
+      pellentesque elit luctus sodales. Donec mattis tristique nunc ac lacinia. Vestibulum non
+      pulvinar turpis, posuere consequat arcu. Fusce ut urna blandit, finibus nisi a, molestie elit.
+      Nulla sed eleifend mi.
+    </Text>
+  )
+
+  const handleToggleOpen = useCallback(() => setOpen((v) => !v), [])
+
+  useClickOutsideEvent(
+    () => setOpen(false),
+    () => [buttonElementRef.current, popoverElementRef.current],
+  )
+
+  return (
+    <Card height="fill" padding={[4, 5, 6]} sizing="border" tone="transparent">
+      <Card height="fill" padding={2} ref={setBoundaryElement} shadow={1} sizing="border">
+        <Flex align={flexAlign} height="fill" justify={flexJustify}>
+          <Popover
+            boundaryElement={boundaryElement}
+            constrainSize={constrainSize}
+            content={content}
+            open={open}
+            overflow="auto"
+            padding={3}
+            portal={portal}
+            placement={placement}
+            ref={popoverElementRef}
+            width={width}
+          >
+            <Button
+              icon={EllipsisVerticalIcon}
+              mode="bleed"
+              onClick={handleToggleOpen}
+              ref={buttonElementRef}
+              selected={open}
+            />
+          </Popover>
+        </Flex>
+      </Card>
+    </Card>
+  )
+}

package/src/core/primitives/popover/__workshop__/MarginsStory.tsx

@@ -0,0 +1,31 @@
+import {Box, Card, Container, Flex, Popover, Text} from '@bettercms-ai/kit'
+
+export default function MarginsStory() {
+  return (
+    <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
+      <Popover
+        __unstable_margins={[-8, 8, -8, 8]}
+        arrow={false}
+        content={
+          <Box padding={2}>
+            <Text align="center" muted size={1}>
+              Popover
+            </Text>
+          </Box>
+        }
+        matchReferenceWidth
+        open
+        placement="bottom-start"
+        // radius={0}
+      >
+        <Container width={0}>
+          <Card padding={2} muted shadow={1}>
+            <Text align="center" muted size={1}>
+              Reference
+            </Text>
+          </Card>
+        </Container>
+      </Popover>
+    </Flex>
+  )
+}

package/src/core/primitives/popover/__workshop__/MatchReferenceWidthStory.tsx

@@ -0,0 +1,32 @@
+import {Box, Button, Container, Flex, Popover, Stack, Text} from '@bettercms-ai/kit'
+import {useBoolean, useSelect} from '@bettercms-ai/kit-workshop'
+
+import {WORKSHOP_PLACEMENT_OPTIONS} from '../../../__workshop__/constants'
+
+export default function MatchReferenceWidthStory() {
+  const arrow = useBoolean('Arrow', true, 'Props')
+  const placement = useSelect('Placement', WORKSHOP_PLACEMENT_OPTIONS, 'bottom', 'Props')
+
+  return (
+    <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
+      <Popover
+        arrow={arrow}
+        content={
+          <Box padding={3}>
+            <Text size={1}>Content</Text>
+          </Box>
+        }
+        matchReferenceWidth
+        open
+        placement={placement}
+        radius={2}
+      >
+        <Container width={0}>
+          <Stack>
+            <Button fontSize={1} mode="ghost" selected text="Button" />
+          </Stack>
+        </Container>
+      </Popover>
+    </Flex>
+  )
+}

package/src/core/primitives/popover/__workshop__/OpenOnMountStory.tsx

@@ -0,0 +1,11 @@
+import {Button, Card, Popover, Text} from '@bettercms-ai/kit'
+
+export default function OpenOnMountStory() {
+  return (
+    <Card height="fill" padding={3} sizing="border">
+      <Popover content={<Text size={1}>popover content</Text>} open padding={3}>
+        <Button text="This button is the popover reference" />
+      </Popover>
+    </Card>
+  )
+}

package/src/core/primitives/popover/__workshop__/PlainStory.tsx

@@ -0,0 +1,71 @@
+import {Button, Card, Popover, PortalProvider, Text} from '@bettercms-ai/kit'
+import {useBoolean, useSelect} from '@bettercms-ai/kit-workshop'
+import {useState} from 'react'
+
+import {
+  WORKSHOP_CONTAINER_WIDTH_OPTIONS,
+  WORKSHOP_PLACEMENT_OPTIONS,
+  WORKSHOP_RADIUS_OPTIONS,
+  WORKSHOP_SPACE_OPTIONS,
+} from '../../../__workshop__/constants'
+
+export default function PlainStory() {
+  const arrow = useBoolean('Arrow', true)
+  const boundaryElementFlag = useBoolean('Boundary element', true)
+  const constrainSize = useBoolean('Constrain size', true)
+  const matchReferenceWidth = useBoolean('Match reference width', false)
+  const open = useBoolean('Open', true)
+  const padding = useSelect('Padding', WORKSHOP_SPACE_OPTIONS, 3)
+  const placement = useSelect('Placement', WORKSHOP_PLACEMENT_OPTIONS, 'bottom')
+  const portal = useBoolean('Portal', true)
+  const preventOverflow = useBoolean('Prevent overflow', true)
+  const radius = useSelect('Radius', WORKSHOP_RADIUS_OPTIONS, 2)
+  const width = useSelect('Width', WORKSHOP_CONTAINER_WIDTH_OPTIONS, 'auto')
+  const [portalElement, setPortalElement] = useState<HTMLDivElement | null>(null)
+  const [boundaryElement, setBoundaryElement] = useState<HTMLDivElement | null>(null)
+
+  return (
+    <Card height="fill" padding={3} sizing="border">
+      <PortalProvider element={portalElement}>
+        <Text align="center" muted size={1}>
+          Scroll this box to reveal the popover
+        </Text>
+        <div
+          ref={setBoundaryElement}
+          style={{
+            height: 'calc(100vh - 120px)',
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            margin: 60,
+            overflow: 'auto',
+            outline: '1px solid red',
+            width: 'calc(100vw - 120px)',
+          }}
+        >
+          <div style={{padding: '150vh 0', textAlign: 'center'}}>
+            <Popover
+              __unstable_margins={[1, 1, 1, 1]}
+              arrow={arrow}
+              boundaryElement={boundaryElementFlag ? boundaryElement : undefined}
+              constrainSize={constrainSize}
+              content={<Text size={1}>popover content</Text>}
+              fallbackPlacements={['top', 'bottom']}
+              matchReferenceWidth={matchReferenceWidth}
+              open={open}
+              padding={padding}
+              placement={placement}
+              portal={portal}
+              preventOverflow={preventOverflow}
+              radius={radius}
+              width={width}
+            >
+              <Button text="This button is the popover reference" />
+            </Popover>
+          </div>
+        </div>
+        <div ref={setPortalElement} />
+      </PortalProvider>
+    </Card>
+  )
+}

package/src/core/primitives/popover/__workshop__/RecursiveStory.tsx

@@ -0,0 +1,71 @@
+import {Button, Flex, LayerProvider, Placement, Popover, useLayer} from '@bettercms-ai/kit'
+import {ThemeColorToneKey} from '@bettercms-ai/kit/theme'
+import {useCallback, useEffect, useMemo, useRef, useState} from 'react'
+
+export default function RecursiveStory() {
+  return (
+    <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
+      <LayerProvider>
+        <RecursiveExample />
+      </LayerProvider>
+    </Flex>
+  )
+}
+
+const placements: Placement[] = ['top', 'right', 'bottom', 'left']
+const tones: ThemeColorToneKey[] = ['primary', 'positive', 'caution', 'critical']
+
+function RecursiveExample({onClose}: {onClose?: () => void}) {
+  const [open, setOpen] = useState(false)
+  const buttonRef = useRef<HTMLButtonElement | null>(null)
+  const {isTopLayer} = useLayer()
+  const [seed] = useState(() => Math.floor(Math.random() * 4))
+  const fallbackPlacements = useMemo(() => {
+    const before = placements.slice(seed)
+    const after = placements.slice(0, seed)
+
+    return before.concat(after)
+  }, [seed])
+
+  useEffect(() => {
+    if (open === false) buttonRef.current?.focus()
+  }, [open])
+
+  useEffect(() => {
+    setTimeout(() => {
+      buttonRef.current?.focus()
+    }, 0)
+  }, [])
+
+  const handleOpen = useCallback(() => setOpen(true), [])
+  const handleClose = useCallback(() => setOpen(false), [])
+
+  const handleKeyDown = useCallback(
+    (event: React.KeyboardEvent<HTMLButtonElement>) => {
+      if (!isTopLayer) return
+      if (event.key === 'Escape' && onClose) onClose()
+    },
+    [isTopLayer, onClose],
+  )
+
+  return (
+    <Popover
+      fallbackPlacements={fallbackPlacements}
+      content={<RecursiveExample onClose={handleClose} />}
+      open={open}
+      padding={1}
+      placement={fallbackPlacements[3]}
+      portal
+      tone={tones[seed]}
+    >
+      <Button
+        mode="bleed"
+        onKeyDown={handleKeyDown}
+        onClick={handleOpen}
+        radius={3}
+        ref={buttonRef}
+        text="Open"
+      />
+    </Popover>
+  )
+}

package/src/core/primitives/popover/__workshop__/SidePanelStory.tsx

@@ -0,0 +1,89 @@
+import {useSelect} from '@bettercms-ai/kit-workshop'
+import {useCallback, useEffect, useRef, useState} from 'react'
+
+import {BoundaryElementProvider} from '../../../utils'
+import {Box} from '../../box'
+import {Card} from '../../card'
+import {Flex} from '../../flex'
+import {Stack} from '../../stack'
+import {Text} from '../../text'
+import {Popover, PopoverProps} from '../popover'
+import {PopoverUpdateCallback} from '../types'
+
+const SIDE_PANEL_WIDTH = {
+  sm: 300,
+  md: 400,
+  lg: 500,
+  xl: 600,
+}
+
+export default function SidePanelStory() {
+  const sidePanelWidth = useSelect('Side panel width', SIDE_PANEL_WIDTH, SIDE_PANEL_WIDTH.md)
+  const [sidePanel, setSidePanel] = useState<HTMLDivElement | null>(null)
+  const updateRef = useRef<PopoverUpdateCallback>(undefined)
+
+  useEffect(() => updateRef.current?.(), [sidePanelWidth])
+
+  return (
+    <Flex height="fill">
+      <Card flex={1}>
+        <Box padding={4}>
+          <Text>
+            This story shows that popovers respect their boundary when used in a side panel.
+          </Text>
+        </Box>
+      </Card>
+      <BoundaryElementProvider element={sidePanel}>
+        <Card borderLeft flex="none" ref={setSidePanel} style={{width: sidePanelWidth}}>
+          <Stack padding={4} space={5}>
+            <Text muted size={1}>
+              Click the <code>reference</code> text below to toggle the popover.
+            </Text>
+
+            <Card border padding={3}>
+              <Text size={1}>
+                Some editor <InlineObject updateRef={updateRef} />
+              </Text>
+            </Card>
+          </Stack>
+        </Card>
+      </BoundaryElementProvider>
+    </Flex>
+  )
+}
+
+function InlineObject(props: {updateRef?: PopoverProps['updateRef']}) {
+  const {updateRef} = props
+  const [open, setOpen] = useState(false)
+
+  const handleClick = useCallback(() => {
+    setOpen((prev) => !prev)
+  }, [])
+
+  return (
+    <Popover
+      content={
+        <Box padding={3}>
+          <Text size={1}>
+            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.
+          </Text>
+        </Box>
+      }
+      constrainSize
+      open={open}
+      overflow="auto"
+      portal
+      width={0}
+      updateRef={updateRef}
+    >
+      {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions */}
+      <code onClick={handleClick}>reference</code>
+    </Popover>
+  )
+}

package/src/core/primitives/popover/__workshop__/TestStory.tsx

@@ -0,0 +1,97 @@
+import {useBoolean, useSelect, useText} from '@bettercms-ai/kit-workshop'
+import {useRef, useState} from 'react'
+
+import {
+  WORKSHOP_CONTAINER_WIDTH_OPTIONS,
+  WORKSHOP_PLACEMENT_OPTIONS,
+  WORKSHOP_RADIUS_OPTIONS,
+} from '../../../__workshop__/constants'
+import {BoundaryElementProvider, PortalProvider} from '../../../utils'
+import {Button} from '../../button'
+import {Card} from '../../card'
+import {Text} from '../../text'
+import {Popover} from '../popover'
+import {PopoverUpdateCallback} from '../types'
+
+export default function TestStory(): React.JSX.Element {
+  const [portalElement, setPortalElement] = useState<HTMLDivElement | null>(null)
+  const [boundaryElement, setBoundaryElement] = useState<HTMLDivElement | null>(null)
+
+  const mount = useBoolean('Mount', true)
+  const arrow = useBoolean('Arrow', true)
+  const constrainSize = useBoolean('Constrain size', true)
+  const matchReferenceWidth = useBoolean('Match reference width', false)
+  const open = useBoolean('Open', true)
+  const placement = useSelect('Placement', WORKSHOP_PLACEMENT_OPTIONS, 'bottom')
+  const portal = useBoolean('Render in portal', true)
+  const preventOverflow = useBoolean('Prevent overflow', true)
+  const radius = useSelect('Radius', WORKSHOP_RADIUS_OPTIONS, 2)
+  const referenceWide = useBoolean('Reference wide?', false)
+  const width = useSelect('Width', WORKSHOP_CONTAINER_WIDTH_OPTIONS, 'auto')
+
+  const text = useText('Text', 'Test')
+
+  const updateRef = useRef<PopoverUpdateCallback>(undefined)
+
+  const button = (
+    <Button text="reference" selected style={{width: referenceWide ? 300 : undefined}} />
+  )
+
+  return (
+    <Card
+      ref={setBoundaryElement}
+      shadow={2}
+      style={{
+        position: 'absolute',
+        top: 50,
+        right: 50,
+        bottom: 50,
+        left: 50,
+      }}
+    >
+      <div
+        data-portal=""
+        ref={setPortalElement}
+        style={{
+          position: 'absolute',
+          top: 0,
+          right: 0,
+          bottom: 0,
+          left: 0,
+          overflow: 'hidden',
+          pointerEvents: 'none',
+        }}
+      />
+
+      <div style={{width: '100%', height: '100%', overflow: 'auto'}}>
+        <div style={{padding: '150vh'}}>
+          <PortalProvider element={portalElement}>
+            <BoundaryElementProvider element={boundaryElement}>
+              {!mount && button}
+              {mount && (
+                <Popover
+                  arrow={arrow}
+                  content={<Text size={1}>{text}</Text>}
+                  constrainSize={constrainSize}
+                  fallbackPlacements={['left', 'bottom', 'right', 'top']}
+                  matchReferenceWidth={matchReferenceWidth}
+                  open={open}
+                  overflow="hidden"
+                  padding={3}
+                  placement={placement}
+                  portal={portal}
+                  preventOverflow={preventOverflow}
+                  radius={radius}
+                  updateRef={updateRef}
+                  width={width}
+                >
+                  {button}
+                </Popover>
+              )}
+            </BoundaryElementProvider>
+          </PortalProvider>
+        </div>
+      </div>
+    </Card>
+  )
+}

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

@@ -0,0 +1,49 @@
+import {defineScope} from '@bettercms-ai/kit-workshop'
+import {lazy} from 'react'
+
+export default defineScope({
+  name: 'primitives/popover',
+  title: 'Popover',
+  stories: [
+    {
+      name: 'test',
+      title: 'Test',
+      component: lazy(() => import('./TestStory')),
+    },
+    {
+      name: 'plain',
+      title: 'Plain',
+      component: lazy(() => import('./PlainStory')),
+    },
+    {
+      name: 'recursive',
+      title: 'Recursive',
+      component: lazy(() => import('./RecursiveStory')),
+    },
+    {
+      name: 'match-ref-width',
+      title: 'Match reference width',
+      component: lazy(() => import('./MatchReferenceWidthStory')),
+    },
+    {
+      name: 'margins',
+      title: 'Margins',
+      component: lazy(() => import('./MarginsStory')),
+    },
+    {
+      name: 'aligned',
+      title: 'Aligned',
+      component: lazy(() => import('./AlignedStory')),
+    },
+    {
+      name: 'openOnMountStory',
+      title: 'Open on mount',
+      component: lazy(() => import('./OpenOnMountStory')),
+    },
+    {
+      name: 'side-panel',
+      title: 'Side panel',
+      component: lazy(() => import('./SidePanelStory')),
+    },
+  ],
+})