@bettercms-ai/kit 0.1.1 → 2.0.0-next.0

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

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

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

@@ -1,87 +0,0 @@
-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

@@ -1,45 +0,0 @@
-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

@@ -1,77 +0,0 @@
-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

@@ -1,31 +0,0 @@
-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

@@ -1,32 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

@@ -1,71 +0,0 @@
-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

@@ -1,71 +0,0 @@
-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

@@ -1,89 +0,0 @@
-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

@@ -1,97 +0,0 @@
-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

@@ -1,49 +0,0 @@
-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')),
-    },
-  ],
-})