@bettercms-ai/kit 0.1.0

package/src/core/utils/portal/usePortal.ts

@@ -0,0 +1,25 @@
+import {useContext} from 'react'
+
+import {isRecord} from '../../lib/isRecord'
+import {PortalContext} from './portalContext'
+import {PortalContextValue} from './types'
+
+/**
+ * @public
+ */
+export function usePortal(): PortalContextValue {
+  const value = useContext(PortalContext)
+
+  if (!value) {
+    throw new Error('usePortal(): missing context value')
+  }
+
+  // NOTE: This check is for future-compatiblity
+  // - If the value is not an object, it’s not compatible with the current version
+  // - If the value is an object, but doesn’t have `version: 0.0`, it’s not compatible with the current version
+  if (!isRecord(value) || value.version !== 0.0) {
+    throw new Error('usePortal(): the context value is not compatible')
+  }
+
+  return value
+}

package/src/core/utils/spanWithTextOverflow.tsx

@@ -0,0 +1,10 @@
+import {styled} from 'styled-components'
+
+/** @internal */
+export const SpanWithTextOverflow = styled.span`
+  display: block;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  overflow: clip;
+`

package/src/core/utils/srOnly/index.ts

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

package/src/core/utils/srOnly/srOnly.tsx

@@ -0,0 +1,36 @@
+import {forwardRef} from 'react'
+import {styled} from 'styled-components'
+
+/**
+ * @public
+ */
+export interface SrOnlyProps {
+  as?: React.ElementType | keyof React.JSX.IntrinsicElements
+  children?: React.ReactNode
+}
+
+const StyledSrOnly = styled.div`
+  display: block;
+  width: 0;
+  height: 0;
+  position: absolute;
+  overflow: hidden;
+  overflow: clip;
+`
+
+/**
+ * @public
+ */
+export const SrOnly = forwardRef(function SrOnly(
+  props: SrOnlyProps & Omit<React.HTMLProps<HTMLDivElement>, 'aria-hidden' | 'as'>,
+  ref: React.Ref<HTMLDivElement>,
+) {
+  const {as, children} = props
+
+  return (
+    <StyledSrOnly aria-hidden as={as} data-ui="SrOnly" ref={ref}>
+      {children}
+    </StyledSrOnly>
+  )
+})
+SrOnly.displayName = 'ForwardRef(SrOnly)'

package/src/core/utils/virtualList/__workshop__/changingProps.tsx

@@ -0,0 +1,36 @@
+import {Box, Card, Text, VirtualList} from '@bettercms-ai/kit'
+import {useCallback, useState} from 'react'
+
+const data = Array.from(new Array(1000)).map((_, key) => ({key}))
+
+export default function ChangingProps() {
+  const [expanded, setExpanded] = useState(false)
+
+  const toggleExpand = useCallback(() => setExpanded((v) => !v), [])
+
+  const renderItem = useCallback(
+    (item: {key: number}) => (
+      <Card
+        as="button"
+        onClick={toggleExpand}
+        paddingX={4}
+        paddingY={expanded ? 5 : 4}
+        radius={2}
+        tone="primary"
+      >
+        <Text>Item #{item.key}</Text>
+      </Card>
+    ),
+    [expanded, toggleExpand],
+  )
+
+  return (
+    <Box padding={4}>
+      <Box marginBottom={5}>
+        <Text size={1}>Click any item to toggle expanded view</Text>
+      </Box>
+
+      <VirtualList gap={expanded ? 4 : 2} items={data} renderItem={renderItem} />
+    </Box>
+  )
+}

package/src/core/utils/virtualList/__workshop__/elementScroll.tsx

@@ -0,0 +1,24 @@
+import {Box, Card, Container, Text, VirtualList} from '@bettercms-ai/kit'
+import {useCallback} from 'react'
+
+const data = Array.from(new Array(1000)).map((_, key) => ({key}))
+
+export default function ElementScroll() {
+  const renderItem = useCallback((item: {key: number}) => {
+    return (
+      <Card padding={3} radius={2} shadow={1}>
+        <Text>Item #{item.key}</Text>
+      </Card>
+    )
+  }, [])
+
+  return (
+    <Box height="fill" padding={4} sizing="border">
+      <Card height="fill" overflow="auto" padding={4} shadow={1} sizing="border">
+        <Container width={1}>
+          <VirtualList gap={2} items={data} renderItem={renderItem} />
+        </Container>
+      </Card>
+    </Box>
+  )
+}

package/src/core/utils/virtualList/__workshop__/index.ts

@@ -0,0 +1,29 @@
+import {defineScope} from '@bettercms-ai/kit-workshop'
+import {lazy} from 'react'
+
+export default defineScope({
+  name: 'utils/virtual-list',
+  title: 'VirtualList',
+  stories: [
+    {
+      name: 'window-scroll',
+      title: 'Window scroll',
+      component: lazy(() => import('./windowScrolll')),
+    },
+    {
+      name: 'element-scroll',
+      title: 'Element scroll',
+      component: lazy(() => import('./elementScroll')),
+    },
+    {
+      name: 'infinite-list',
+      title: 'Infinite list',
+      component: lazy(() => import('./infiniteList')),
+    },
+    {
+      name: 'changing-props',
+      title: 'Changing props',
+      component: lazy(() => import('./changingProps')),
+    },
+  ],
+})

package/src/core/utils/virtualList/__workshop__/infiniteList.tsx

@@ -0,0 +1,48 @@
+import {Box, Card, Text, VirtualList, VirtualListChangeOpts} from '@bettercms-ai/kit'
+import {useCallback, useRef, useState} from 'react'
+
+interface Item {
+  key: string
+}
+
+function getData(len: number, offsetIndex = 0): Item[] {
+  return Array.from(new Array(len)).map((_, index) => ({key: String(offsetIndex + index)}))
+}
+
+const ITEMS_PER_PAGE = 1000
+
+export default function InfiniteList() {
+  const [data, setData] = useState<Item[]>(() => getData(ITEMS_PER_PAGE))
+  const offsetRef = useRef(0)
+
+  const getItemKey = useCallback((item: Item) => `item-${item.key}`, [])
+
+  const handleChange = useCallback((opts: VirtualListChangeOpts) => {
+    const maxIndex = (offsetRef.current + 1) * ITEMS_PER_PAGE
+
+    if (opts.toIndex >= maxIndex - 50) {
+      offsetRef.current += 1
+      setData((d) => d.concat(getData(ITEMS_PER_PAGE, offsetRef.current * ITEMS_PER_PAGE)))
+    }
+  }, [])
+
+  const renderItem = useCallback((item: Item) => {
+    return (
+      <Card padding={3} shadow={1}>
+        <Text align="center">Item #{item.key}</Text>
+      </Card>
+    )
+  }, [])
+
+  return (
+    <Box padding={4}>
+      <VirtualList
+        gap={3}
+        getItemKey={getItemKey}
+        items={data}
+        onChange={handleChange}
+        renderItem={renderItem}
+      />
+    </Box>
+  )
+}

package/src/core/utils/virtualList/__workshop__/windowScrolll.tsx

@@ -0,0 +1,22 @@
+import {Box, Card, Container, Text, VirtualList} from '@bettercms-ai/kit'
+import {useCallback} from 'react'
+
+const data = Array.from(new Array(1000)).map((_, key) => ({key}))
+
+export default function Example() {
+  const renderItem = useCallback((item: {key: number}) => {
+    return (
+      <Card padding={3} radius={2} shadow={1}>
+        <Text>Item #{item.key}</Text>
+      </Card>
+    )
+  }, [])
+
+  return (
+    <Box padding={4}>
+      <Container width={1}>
+        <VirtualList gap={2} items={data} renderItem={renderItem} />
+      </Container>
+    </Box>
+  )
+}

package/src/core/utils/virtualList/index.ts

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

package/src/core/utils/virtualList/virtualList.tsx

@@ -0,0 +1,200 @@
+import {forwardRef, useEffect, useImperativeHandle, useRef, useState} from 'react'
+import {styled} from 'styled-components'
+
+import {_isScrollable} from '../../helpers'
+import {_ResizeObserver} from '../../observers'
+import {StackOwnProps} from '../../primitives'
+import {useTheme_v2} from '../../theme'
+
+/**
+ * @beta
+ */
+export interface VirtualListChangeOpts {
+  fromIndex: number
+  gap: number
+  itemHeight: number
+  scrollHeight: number
+  scrollTop: number
+  toIndex: number
+}
+
+/**
+ * @beta
+ */
+export interface VirtualListProps<Item = any> {
+  as?: React.ElementType | keyof React.JSX.IntrinsicElements
+  gap?: number
+  getItemKey?: (item: Item, itemIndex: number) => string
+  items?: Item[]
+  onChange?: (opts: VirtualListChangeOpts) => void
+  renderItem?: (item: Item) => React.ReactNode
+}
+
+const StyledVirtualList = styled.div`
+  position: relative;
+`
+
+const ItemWrapper = styled.div`
+  position: absolute;
+  left: 0;
+  right: 0;
+`
+
+/**
+ * @beta
+ */
+export const VirtualList = forwardRef(function VirtualList(
+  props: VirtualListProps &
+    StackOwnProps &
+    Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'children' | 'onChange' | 'ref'>,
+  forwardedRef: React.ForwardedRef<HTMLDivElement>,
+): React.JSX.Element {
+  const {as = 'div', gap = 0, getItemKey, items = [], onChange, renderItem, ...restProps} = props
+  const {space} = useTheme_v2()
+  const ref = useRef<HTMLDivElement | null>(null)
+  const wrapperRef = useRef<HTMLDivElement | null>(null)
+  const [scrollTop, setScrollTop] = useState(0)
+  const [scrollHeight, setScrollHeight] = useState(0)
+  const [itemHeight, setItemHeight] = useState(-1)
+
+  // Sync ref to parent
+  useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(forwardedRef, () => ref.current)
+
+  useEffect(() => {
+    if (!wrapperRef.current) return
+
+    const firstElement = wrapperRef.current.firstChild
+
+    if (firstElement instanceof HTMLElement) {
+      setItemHeight(firstElement.offsetHeight)
+    }
+  }, [renderItem])
+
+  useEffect((): (() => void) | undefined => {
+    if (!ref.current) return
+
+    const scrollEl = findScrollable(ref.current.parentNode)
+
+    if (scrollEl) {
+      if (!(scrollEl instanceof HTMLElement)) return
+
+      const handleScroll = () => {
+        setScrollTop(scrollEl.scrollTop)
+      }
+
+      scrollEl.addEventListener('scroll', handleScroll, {passive: true})
+
+      const ro = new _ResizeObserver((entries) => {
+        setScrollHeight(entries[0].contentRect.height)
+      })
+
+      ro.observe(scrollEl)
+
+      handleScroll()
+
+      return () => {
+        scrollEl.removeEventListener('scroll', handleScroll)
+
+        ro.unobserve(scrollEl)
+        ro.disconnect()
+      }
+    }
+
+    const handleScroll = () => {
+      setScrollTop(window.scrollY)
+    }
+
+    const handleResize = () => {
+      setScrollHeight(window.innerHeight)
+    }
+
+    window.addEventListener('scroll', handleScroll, {passive: true})
+    window.addEventListener('resize', handleResize)
+
+    // eslint-disable-next-line react-hooks/set-state-in-effect
+    setScrollHeight(window.innerHeight)
+
+    handleScroll()
+
+    return () => {
+      window.removeEventListener('scroll', handleScroll)
+      window.removeEventListener('resize', handleResize)
+    }
+  }, [])
+
+  const len = items.length
+  const height = itemHeight ? len * (itemHeight + space[gap]) - space[gap] : 0
+  const fromIndex = height ? Math.max(Math.floor((scrollTop / height) * len) - 2, 0) : 0
+  const toIndex = height ? Math.ceil(((scrollTop + scrollHeight) / height) * len) + 1 : 0
+
+  useEffect(() => {
+    if (!onChange) return
+    onChange({fromIndex, gap: space[gap], itemHeight, scrollHeight, scrollTop, toIndex})
+  }, [fromIndex, gap, itemHeight, onChange, scrollHeight, scrollTop, space, toIndex])
+
+  const children = useChildren({
+    fromIndex,
+    gap,
+    itemHeight,
+    space,
+    toIndex,
+    getItemKey,
+    items,
+    renderItem,
+  })
+
+  return (
+    <StyledVirtualList as={as} data-ui="VirtualList" {...restProps} ref={ref}>
+      <div ref={wrapperRef} style={{height}}>
+        {children}
+      </div>
+    </StyledVirtualList>
+  )
+})
+VirtualList.displayName = 'ForwardRef(VirtualList)'
+
+function useChildren({
+  fromIndex,
+  gap,
+  getItemKey,
+  itemHeight,
+  items,
+  renderItem,
+  space,
+  toIndex,
+}: Pick<VirtualListProps, 'getItemKey' | 'renderItem'> &
+  Required<Pick<VirtualListProps, 'items'>> & {
+    fromIndex: number
+    gap: number
+    itemHeight: number
+    space: number[]
+    toIndex: number
+  }) {
+  if (!renderItem || items.length === 0) return null
+
+  if (itemHeight === -1) {
+    return [<ItemWrapper key={0}>{renderItem(items[0])}</ItemWrapper>]
+  }
+
+  return items.slice(fromIndex, toIndex).map((item, _itemIndex) => {
+    const itemIndex = fromIndex + _itemIndex
+    const node = renderItem(item)
+    const key = getItemKey ? getItemKey(item, itemIndex) : itemIndex
+
+    return (
+      <ItemWrapper key={key} style={{top: itemIndex * (itemHeight + space[gap])}}>
+        {node}
+      </ItemWrapper>
+    )
+  })
+}
+
+function findScrollable(parentNode: ParentNode | null) {
+  let _scrollEl = parentNode
+
+  while (_scrollEl && !_isScrollable(_scrollEl)) {
+    _scrollEl = _scrollEl.parentNode
+  }
+
+  return _scrollEl
+}

package/src/theme/build/_deprecated/color/_selectable/createSelectableTones.ts

@@ -0,0 +1,76 @@
+import {
+  ThemeColorBase,
+  ThemeColorMuted,
+  ThemeColorSelectable,
+  ThemeColorSelectableStates,
+  ThemeColorSolid,
+} from '../../../../system'
+import {ThemeColorBuilderOpts} from '../factory'
+
+export function createSelectableTones(
+  opts: ThemeColorBuilderOpts,
+  base: ThemeColorBase,
+  dark: boolean,
+  solid: ThemeColorSolid,
+  muted: ThemeColorMuted,
+): ThemeColorSelectable {
+  return {
+    default: _createSelectableStates(opts, base, dark, solid, muted, 'default'),
+    primary: _createSelectableStates(opts, base, dark, solid, muted, 'primary'),
+    positive: _createSelectableStates(opts, base, dark, solid, muted, 'positive'),
+    caution: _createSelectableStates(opts, base, dark, solid, muted, 'caution'),
+    critical: _createSelectableStates(opts, base, dark, solid, muted, 'critical'),
+  }
+}
+
+function _createSelectableStates(
+  opts: ThemeColorBuilderOpts,
+  base: ThemeColorBase,
+  dark: boolean,
+  solid: ThemeColorSolid,
+  muted: ThemeColorMuted,
+  tone: 'default' | 'primary' | 'positive' | 'caution' | 'critical',
+): ThemeColorSelectableStates {
+  return {
+    enabled: opts.selectable({
+      base,
+      dark,
+      solid,
+      muted,
+      state: 'enabled',
+      tone,
+    }),
+    hovered: opts.selectable({
+      base,
+      dark,
+      solid,
+      muted,
+      state: 'hovered',
+      tone,
+    }),
+    pressed: opts.selectable({
+      base,
+      dark,
+      solid,
+      muted,
+      state: 'pressed',
+      tone,
+    }),
+    selected: opts.selectable({
+      base,
+      dark,
+      solid,
+      muted,
+      state: 'selected',
+      tone,
+    }),
+    disabled: opts.selectable({
+      base,
+      dark,
+      solid,
+      muted,
+      state: 'disabled',
+      tone,
+    }),
+  }
+}

package/src/theme/build/_deprecated/color/_solid/createSolidTones.ts

@@ -0,0 +1,54 @@
+import {ThemeColorBase, ThemeColorName, ThemeColorSolid} from '../../../../system'
+import {ThemeColorBuilderOpts} from '../factory'
+
+export function createSolidTones(
+  opts: ThemeColorBuilderOpts,
+  base: ThemeColorBase,
+  dark: boolean,
+  name: ThemeColorName,
+): ThemeColorSolid {
+  return {
+    default: {
+      enabled: opts.solid({base, dark, tone: 'default', name, state: 'enabled'}),
+      disabled: opts.solid({base, dark, tone: 'default', name, state: 'disabled'}),
+      hovered: opts.solid({base, dark, tone: 'default', name, state: 'hovered'}),
+      pressed: opts.solid({base, dark, tone: 'default', name, state: 'pressed'}),
+      selected: opts.solid({base, dark, tone: 'default', name, state: 'selected'}),
+    },
+    transparent: {
+      enabled: opts.solid({base, dark, tone: 'transparent', name, state: 'enabled'}),
+      disabled: opts.solid({base, dark, tone: 'transparent', name, state: 'disabled'}),
+      hovered: opts.solid({base, dark, tone: 'transparent', name, state: 'hovered'}),
+      pressed: opts.solid({base, dark, tone: 'transparent', name, state: 'pressed'}),
+      selected: opts.solid({base, dark, tone: 'transparent', name, state: 'selected'}),
+    },
+    primary: {
+      enabled: opts.solid({base, dark, tone: 'primary', name, state: 'enabled'}),
+      disabled: opts.solid({base, dark, tone: 'primary', name, state: 'disabled'}),
+      hovered: opts.solid({base, dark, tone: 'primary', name, state: 'hovered'}),
+      pressed: opts.solid({base, dark, tone: 'primary', name, state: 'pressed'}),
+      selected: opts.solid({base, dark, tone: 'primary', name, state: 'selected'}),
+    },
+    positive: {
+      enabled: opts.solid({base, dark, tone: 'positive', name, state: 'enabled'}),
+      disabled: opts.solid({base, dark, tone: 'positive', name, state: 'disabled'}),
+      hovered: opts.solid({base, dark, tone: 'positive', name, state: 'hovered'}),
+      pressed: opts.solid({base, dark, tone: 'positive', name, state: 'pressed'}),
+      selected: opts.solid({base, dark, tone: 'positive', name, state: 'selected'}),
+    },
+    caution: {
+      enabled: opts.solid({base, dark, tone: 'caution', name, state: 'enabled'}),
+      disabled: opts.solid({base, dark, tone: 'caution', name, state: 'disabled'}),
+      hovered: opts.solid({base, dark, tone: 'caution', name, state: 'hovered'}),
+      pressed: opts.solid({base, dark, tone: 'caution', name, state: 'pressed'}),
+      selected: opts.solid({base, dark, tone: 'caution', name, state: 'selected'}),
+    },
+    critical: {
+      enabled: opts.solid({base, dark, tone: 'critical', name, state: 'enabled'}),
+      disabled: opts.solid({base, dark, tone: 'critical', name, state: 'disabled'}),
+      hovered: opts.solid({base, dark, tone: 'critical', name, state: 'hovered'}),
+      pressed: opts.solid({base, dark, tone: 'critical', name, state: 'pressed'}),
+      selected: opts.solid({base, dark, tone: 'critical', name, state: 'selected'}),
+    },
+  }
+}

package/src/theme/build/_deprecated/color/button/createButtonModes.ts

@@ -0,0 +1,22 @@
+import {
+  ThemeColorBase,
+  ThemeColorButton,
+  ThemeColorMuted,
+  ThemeColorSolid,
+} from '../../../../system'
+import {ThemeColorBuilderOpts} from '../factory'
+import {createButtonTones} from './createButtonTones'
+
+export function createButtonModes(
+  opts: ThemeColorBuilderOpts,
+  base: ThemeColorBase,
+  dark: boolean,
+  solid: ThemeColorSolid,
+  muted: ThemeColorMuted,
+): ThemeColorButton {
+  return {
+    default: createButtonTones(opts, base, dark, solid, muted, 'default'),
+    ghost: createButtonTones(opts, base, dark, solid, muted, 'ghost'),
+    bleed: createButtonTones(opts, base, dark, solid, muted, 'bleed'),
+  }
+}

package/src/theme/build/_deprecated/color/button/createButtonTones.ts

@@ -0,0 +1,55 @@
+import {
+  ThemeColorBase,
+  ThemeColorButtonModeKey,
+  ThemeColorButtonTones,
+  ThemeColorMuted,
+  ThemeColorSolid,
+} from '../../../../system'
+import {ThemeColorBuilderOpts} from '../factory'
+
+export function createButtonTones(
+  opts: ThemeColorBuilderOpts,
+  base: ThemeColorBase,
+  dark: boolean,
+  solid: ThemeColorSolid,
+  muted: ThemeColorMuted,
+  mode: ThemeColorButtonModeKey,
+): ThemeColorButtonTones {
+  return {
+    default: opts.button({
+      base,
+      dark,
+      solid: solid.default,
+      muted: muted.default,
+      mode,
+    }),
+    primary: opts.button({
+      base,
+      dark,
+      solid: solid.primary,
+      muted: muted.primary,
+      mode,
+    }),
+    positive: opts.button({
+      base,
+      dark,
+      solid: solid.positive,
+      muted: muted.positive,
+      mode,
+    }),
+    caution: opts.button({
+      base,
+      dark,
+      solid: solid.caution,
+      muted: muted.caution,
+      mode,
+    }),
+    critical: opts.button({
+      base,
+      dark,
+      solid: solid.critical,
+      muted: muted.critical,
+      mode,
+    }),
+  }
+}