@bettercms-ai/kit 0.1.0

package/src/core/theme/themeProvider.tsx

@@ -0,0 +1,62 @@
+import {
+  getScopedTheme,
+  type RootTheme,
+  type Theme,
+  type ThemeColorCardToneKey,
+  type ThemeColorSchemeKey,
+} from '@bettercms-ai/kit/theme'
+import {useContext, useMemo} from 'react'
+import {ThemeProvider as StyledThemeProvider} from 'styled-components'
+
+import {ThemeContext} from './themeContext'
+import {ThemeContextValue} from './types'
+
+/**
+ * @public
+ */
+export interface ThemeProviderProps {
+  children?: React.ReactNode
+  scheme?: ThemeColorSchemeKey
+  theme?: RootTheme
+  tone?: ThemeColorCardToneKey
+}
+
+/**
+ * @public
+ */
+export function ThemeProvider(props: ThemeProviderProps): React.JSX.Element {
+  const parentTheme = useContext(ThemeContext)
+  const {children} = props
+  const scheme = props.scheme ?? (parentTheme?.scheme || 'light')
+  const rootTheme = props.theme ?? (parentTheme?.theme || null)
+  const tone = props.tone ?? (parentTheme?.tone || 'default')
+
+  const themeContext: ThemeContextValue | null = useMemo(() => {
+    if (!rootTheme) return null
+
+    return {
+      version: 0.0,
+      theme: rootTheme,
+      scheme,
+      tone,
+    }
+  }, [rootTheme, scheme, tone])
+
+  const theme: Theme | null = useMemo(() => {
+    if (!rootTheme) return null
+
+    return getScopedTheme(rootTheme, scheme, tone)
+  }, [scheme, rootTheme, tone])
+
+  if (!theme) {
+    return <pre>ThemeProvider: no "theme" property provided</pre>
+  }
+
+  return (
+    <ThemeContext.Provider value={themeContext}>
+      <StyledThemeProvider theme={theme}>{children}</StyledThemeProvider>
+    </ThemeContext.Provider>
+  )
+}
+
+ThemeProvider.displayName = 'ThemeProvider'

package/src/core/theme/types.ts

@@ -0,0 +1,12 @@
+import {RootTheme, ThemeColorCardToneKey, ThemeColorSchemeKey} from '@bettercms-ai/kit/theme'
+
+/**
+ * @public
+ */
+export interface ThemeContextValue {
+  /** @deprecated No longer used */
+  version: 0.0
+  scheme: ThemeColorSchemeKey
+  theme: RootTheme
+  tone: ThemeColorCardToneKey
+}

package/src/core/theme/useRootTheme.ts

@@ -0,0 +1,17 @@
+import {useContext} from 'react'
+
+import {ThemeContext} from './themeContext'
+import {ThemeContextValue} from './types'
+
+/**
+ * @public
+ */
+export function useRootTheme(): ThemeContextValue {
+  const value = useContext(ThemeContext)
+
+  if (!value) {
+    throw new Error('useRootTheme(): missing context value')
+  }
+
+  return value as unknown as ThemeContextValue
+}

package/src/core/theme/useTheme.ts

@@ -0,0 +1,16 @@
+import {getTheme_v2, Theme, Theme_v2} from '@bettercms-ai/kit/theme'
+import {useTheme as useStyledTheme} from 'styled-components'
+
+/**
+ * @public
+ */
+export function useTheme(): Theme {
+  return useStyledTheme() as Theme
+}
+
+/**
+ * @public
+ */
+export function useTheme_v2(): Theme_v2 {
+  return getTheme_v2(useStyledTheme() as Theme)
+}

package/src/core/types/avatar.ts

@@ -0,0 +1,14 @@
+/**
+ * @public
+ */
+export type AvatarPosition = 'top' | 'bottom' | 'inside'
+
+/**
+ * @public
+ */
+export type AvatarSize = 0 | 1 | 2 | 3
+
+/**
+ * @public
+ */
+export type AvatarStatus = 'online' | 'editing' | 'inactive'

package/src/core/types/badge.ts

@@ -0,0 +1,12 @@
+import {ThemeColorStateToneKey} from '@bettercms-ai/kit/theme'
+
+/**
+ * @public
+ * @deprecated No longer used
+ */
+export type BadgeMode = 'default' | 'outline'
+
+/**
+ * @public
+ */
+export type BadgeTone = ThemeColorStateToneKey

package/src/core/types/box.ts

@@ -0,0 +1,19 @@
+/**
+ * @public
+ */
+export type BoxSizing = 'content' | 'border'
+
+/**
+ * @public
+ */
+export type BoxDisplay = 'none' | 'block' | 'grid' | 'flex' | 'inline-block'
+
+/**
+ * @public
+ */
+export type BoxHeight = 'stretch' | 'fill'
+
+/**
+ * @public
+ */
+export type BoxOverflow = 'visible' | 'hidden' | 'auto'

package/src/core/types/button.ts

@@ -0,0 +1,21 @@
+import {ThemeColorButtonModeKey, ThemeColorStateToneKey} from '@bettercms-ai/kit/theme'
+
+/**
+ * @public
+ */
+export type ButtonMode = ThemeColorButtonModeKey
+
+/**
+ * @public
+ */
+export type ButtonTextAlign = 'left' | 'right' | 'center'
+
+/**
+ * @public
+ */
+export type ButtonTone = ThemeColorStateToneKey
+
+/**
+ * @public
+ */
+export type ButtonWidth = 'fill'

package/src/core/types/card.ts

@@ -0,0 +1,6 @@
+import {ThemeColorCardToneKey} from '@bettercms-ai/kit/theme'
+
+/**
+ * @public
+ */
+export type CardTone = ThemeColorCardToneKey | 'inherit'

package/src/core/types/component.ts

@@ -0,0 +1,32 @@
+/**
+ * Assign properties from `U` to `T`, excluding properties that already exist in `T`.
+ *
+ * @public
+ */
+export type Assign<T extends object, U extends object> = Omit<T, keyof U> & U
+
+/** @public */
+export type EmptyProps = object
+
+/** @public */
+export type TagType = keyof React.JSX.IntrinsicElements
+
+/** @public */
+export type ComponentType<P = any> =
+  | React.FunctionComponent<P>
+  | React.ComponentClass<P>
+  | React.ExoticComponent<P>
+
+/** @public */
+export type ElementType<P = any> = TagType | ComponentType<P>
+
+/**
+ * Resolves the props of a polymorphic component: the props of the element/component passed to `as`
+ * (defaulting to the component's own element), with the component's own props assigned on top.
+ *
+ * @public
+ */
+export type Props<P extends EmptyProps, E extends ElementType<P>> = Assign<
+  E extends TagType ? React.JSX.IntrinsicElements[E] : React.ComponentProps<E>,
+  P & {as?: E}
+>

package/src/core/types/dialog.ts

@@ -0,0 +1,4 @@
+/**
+ * @public
+ */
+export type DialogPosition = 'absolute' | 'fixed'

package/src/core/types/flex.ts

@@ -0,0 +1,30 @@
+/**
+ * @public
+ */
+export type FlexAlign = 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch'
+
+/**
+ * @public
+ */
+export type FlexDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse'
+
+/**
+ * @public
+ */
+export type FlexJustify =
+  | 'flex-start'
+  | 'flex-end'
+  | 'center'
+  | 'space-between'
+  | 'space-around'
+  | 'space-evenly'
+
+/**
+ * @public
+ */
+export type FlexValue = number | 'none' | 'auto' | 'initial'
+
+/**
+ * @public
+ */
+export type FlexWrap = 'wrap' | 'wrap-reverse' | 'nowrap'

package/src/core/types/grid.ts

@@ -0,0 +1,14 @@
+/**
+ * @public
+ */
+export type GridAutoRows = 'auto' | 'min' | 'max' | 'fr'
+
+/**
+ * @public
+ */
+export type GridAutoCols = 'auto' | 'min' | 'max' | 'fr'
+
+/**
+ * @public
+ */
+export type GridAutoFlow = 'row' | 'column' | 'row dense' | 'column dense'

package/src/core/types/gridItem.ts

@@ -0,0 +1,29 @@
+/**
+ * @public
+ */
+export type GridItemColumn = 'auto' | 'full' | number
+
+/**
+ * @public
+ */
+export type GridItemColumnStart = 'auto' | number
+
+/**
+ * @public
+ */
+export type GridItemColumnEnd = 'auto' | number
+
+/**
+ * @public
+ */
+export type GridItemRow = 'auto' | 'full' | number
+
+/**
+ * @public
+ */
+export type GridItemRowStart = 'auto' | number
+
+/**
+ * @public
+ */
+export type GridItemRowEnd = 'auto' | number

package/src/core/types/index.ts

@@ -0,0 +1,15 @@
+export * from './avatar'
+export * from './badge'
+export * from './box'
+export * from './button'
+export * from './card'
+export * from './component'
+export * from './dialog'
+export * from './flex'
+export * from './grid'
+export * from './gridItem'
+export * from './placement'
+export * from './popover'
+export * from './radius'
+export * from './selectable'
+export * from './text'

package/src/core/types/placement.ts

@@ -0,0 +1,18 @@
+/**
+ * Placement of floating UI elements.
+ *
+ * @public
+ */
+export type Placement =
+  | 'top'
+  | 'top-start'
+  | 'top-end'
+  | 'right'
+  | 'right-start'
+  | 'right-end'
+  | 'bottom'
+  | 'bottom-start'
+  | 'bottom-end'
+  | 'left'
+  | 'left-start'
+  | 'left-end'

package/src/core/types/popover.ts

@@ -0,0 +1,4 @@
+/**
+ * @beta
+ */
+export type PopoverMargins = [number, number, number, number]

package/src/core/types/radius.ts

@@ -0,0 +1,4 @@
+/**
+ * @public
+ */
+export type Radius = number | 'full'

package/src/core/types/selectable.ts

@@ -0,0 +1,6 @@
+import {ThemeColorStateToneKey} from '@bettercms-ai/kit/theme'
+
+/**
+ * @public
+ */
+export type SelectableTone = ThemeColorStateToneKey

package/src/core/types/text.ts

@@ -0,0 +1,4 @@
+/**
+ * @public
+ */
+export type TextAlign = 'left' | 'right' | 'center' | 'justify' | 'initial'

package/src/core/utils/arrow/arrow.tsx

@@ -0,0 +1,123 @@
+import {ForwardedRef, forwardRef, HTMLProps} from 'react'
+import {css, styled} from 'styled-components'
+
+import {useTheme_v2} from '../../theme'
+import {compileCommands, getRoundedCommands, Point} from './cmds'
+
+const StyledArrow = styled.div<{$w: number}>(
+  ({$w: w}) => css`
+    position: absolute;
+    width: ${w}px;
+    height: ${w}px;
+
+    :empty + & {
+      display: none;
+    }
+
+    & > svg {
+      display: block;
+      line-height: 0;
+      transform-origin: ${w / 2}px ${w / 2}px;
+    }
+
+    [data-placement^='top'] > & {
+      bottom: -${w}px;
+
+      & > svg {
+        transform: rotate(0);
+      }
+    }
+
+    [data-placement^='right'] > & {
+      left: -${w}px;
+
+      & > svg {
+        transform: rotate(90deg);
+      }
+    }
+
+    [data-placement^='left'] > & {
+      right: -${w}px;
+
+      & > svg {
+        transform: rotate(-90deg);
+      }
+    }
+
+    [data-placement^='bottom'] > & {
+      top: -${w}px;
+
+      & > svg {
+        transform: rotate(180deg);
+      }
+    }
+  `,
+)
+
+const StrokePath = styled.path`
+  stroke: var(--card-shadow-outline-color);
+`
+
+const ShapePath = styled.path`
+  fill: var(--card-bg-color);
+`
+
+/** @internal */
+export const Arrow = forwardRef(function Arrow(
+  props: {width: number; height: number; radius?: number} & Omit<
+    HTMLProps<HTMLDivElement>,
+    'width' | 'height'
+  >,
+  ref: ForwardedRef<HTMLDivElement>,
+): React.JSX.Element {
+  const {width: w, height: h, radius = 0, ...restProps} = props
+  const {card} = useTheme_v2()
+  const strokeWidth = card.shadow.outline
+
+  const center = w / 2
+
+  const points: Point[] = [
+    {
+      x: 0,
+      y: 0,
+    },
+    {
+      x: radius,
+      y: 0,
+      radius,
+    },
+    {
+      x: center,
+      y: h - 1,
+      radius,
+    },
+    {
+      x: w - radius,
+      y: 0,
+      radius,
+    },
+    {
+      x: w,
+      y: 0,
+    },
+  ]
+
+  const cmds = getRoundedCommands(points)
+  const path = compileCommands(cmds)
+
+  const strokePath = `${path}`
+  const fillPath = `${path} M ${w} -1 M 0 -1 Z`
+
+  return (
+    <StyledArrow {...restProps} $w={w} ref={ref}>
+      <svg width={w} height={w} viewBox={`0 0 ${w} ${w}`}>
+        <mask id="stroke-mask">
+          <rect x={0} y={strokeWidth} width={w} height={w} fill="white" />
+        </mask>
+        <StrokePath d={strokePath} mask="url(#stroke-mask)" strokeWidth={strokeWidth * 2} />
+        <ShapePath d={fillPath} />
+      </svg>
+    </StyledArrow>
+  )
+})
+Arrow.displayName = 'ForwardRef(Arrow)'

package/src/core/utils/arrow/cmds.ts

@@ -0,0 +1,91 @@
+export interface PointCmd {
+  type: 'point'
+  x: number
+  y: number
+  radius?: number
+}
+
+export interface CurveCmd {
+  type: 'curve'
+  startControl: Point
+  endControl: Point
+  curveEnd: Point
+}
+
+export type Cmd = PointCmd | CurveCmd
+
+export interface Point {
+  x: number
+  y: number
+  radius?: number
+}
+
+function moveTowardsLength(movingPoint: Point, targetPoint: Point, amount: number) {
+  const width = targetPoint.x - movingPoint.x
+  const height = targetPoint.y - movingPoint.y
+
+  const distance = Math.sqrt(width * width + height * height)
+
+  return moveTowardsFractional(movingPoint, targetPoint, Math.min(1, amount / distance))
+}
+
+function moveTowardsFractional(movingPoint: Point, targetPoint: Point, fraction: number): Point {
+  return {
+    x: movingPoint.x + (targetPoint.x - movingPoint.x) * fraction,
+    y: movingPoint.y + (targetPoint.y - movingPoint.y) * fraction,
+  }
+}
+
+export function getRoundedCommands(points: Point[]): Cmd[] {
+  const len = points.length
+
+  const cmds: Cmd[] = []
+
+  for (let i = 0; i < len; i += 1) {
+    const point = points[i]
+    const prevPoint = points[i - 1]
+    const nextPoint = points[i + 1]
+
+    if (prevPoint && point.radius) {
+      const curveStart = moveTowardsLength(point, prevPoint, point.radius)
+      const curveEnd = moveTowardsLength(point, nextPoint, point.radius)
+      const startControl = moveTowardsFractional(curveStart, point, 0.5)
+      const endControl = moveTowardsFractional(point, curveEnd, 0.5)
+
+      cmds.push({
+        type: 'point',
+        ...curveStart,
+      })
+
+      cmds.push({
+        type: 'curve',
+        curveEnd,
+        startControl,
+        endControl,
+      })
+    } else {
+      cmds.push({
+        type: 'point',
+        ...point,
+      })
+    }
+  }
+
+  return cmds
+}
+
+export function compileCommands(cmds: Cmd[]): string {
+  return cmds
+    .map((n, idx) => {
+      if (n.type === 'point') {
+        return `${idx === 0 ? 'M' : 'L'} ${n.x} ${n.y}`
+      }
+
+      if (n.type === 'curve') {
+        return `C ${n.startControl.x} ${n.startControl.y} ${n.endControl.x} ${n.endControl.y} ${n.curveEnd.x} ${n.curveEnd.y}`
+      }
+
+      return ``
+    })
+    .join(' ')
+}

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

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

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

@@ -0,0 +1,14 @@
+import {defineScope} from '@bettercms-ai/kit-workshop'
+import {lazy} from 'react'
+
+export default defineScope({
+  name: 'utils/boundaryElement',
+  title: 'BoundaryElement',
+  stories: [
+    {
+      name: 'plain',
+      title: 'Plain',
+      component: lazy(() => import('./plain')),
+    },
+  ],
+})

package/src/core/utils/boundaryElement/__workshop__/plain.tsx

@@ -0,0 +1,19 @@
+import {BoundaryElementProvider, Button, Card, Text, Tooltip} from '@bettercms-ai/kit'
+import {useState} from 'react'
+
+export default function PlainStory() {
+  const [boundaryElement, setBoundaryElement] = useState<HTMLDivElement | null>(null)
+
+  return (
+    <Card padding={7} ref={setBoundaryElement}>
+      <BoundaryElementProvider element={boundaryElement}>
+        <Tooltip
+          content={<Text size={1}>Test aldsakm alkdmal dmalskdm alkdmlakds</Text>}
+          placement="top"
+        >
+          <Button text={<>Hover me</>} />
+        </Tooltip>
+      </BoundaryElementProvider>
+    </Card>
+  )
+}