@bettercms-ai/kit 0.1.0

package/src/core/__workshop__/constants.ts

@@ -0,0 +1,293 @@
+import {icons, IconSymbol} from '@bettercms-ai/icons/map'
+import {
+  AvatarSize,
+  BadgeMode,
+  BadgeTone,
+  ButtonMode,
+  ButtonTextAlign,
+  ButtonTone,
+  CardTone,
+  DialogPosition,
+  FlexAlign,
+  FlexJustify,
+  Placement,
+  TextAlign,
+  TextInputType,
+} from '@bettercms-ai/kit'
+import {ThemeColorAvatarColorKey, ThemeFontWeightKey} from '@bettercms-ai/kit/theme'
+
+export const WORKSHOP_AVATAR_SIZE_OPTIONS: {[key: string]: AvatarSize} = {
+  '0': 0,
+  '1': 1,
+  '2': 2,
+  '3': 3,
+}
+
+export const WORKSHOP_BADGE_MODE_OPTIONS: {[key: string]: BadgeMode} = {
+  Default: 'default',
+  Outline: 'outline',
+}
+
+export const WORKSHOP_BADGE_TONE_OPTIONS: {[key: string]: BadgeTone} = {
+  Default: 'default',
+  Primary: 'primary',
+  Suggest: 'suggest',
+  Positive: 'positive',
+  Caution: 'caution',
+  Critical: 'critical',
+}
+
+export const WORKSHOP_BUTTON_MODE_OPTIONS: {[key: string]: ButtonMode} = {
+  Default: 'default',
+  Ghost: 'ghost',
+  Bleed: 'bleed',
+}
+
+export const WORKSHOP_BUTTON_TEXT_ALIGN_OPTIONS: {[key: string]: ButtonTextAlign | ''} = {
+  '(none)': '',
+  'Left': 'left',
+  'Right': 'right',
+  'Center': 'center',
+}
+
+export const WORKSHOP_BUTTON_TONE_OPTIONS: {[key: string]: ButtonTone} = {
+  Default: 'default',
+  Neutral: 'neutral',
+  Primary: 'primary',
+  Suggest: 'suggest',
+  Positive: 'positive',
+  Caution: 'caution',
+  Critical: 'critical',
+}
+
+export const WORKSHOP_CARD_AS_OPTIONS: {
+  [key: string]: 'div' | 'button' | 'span' | 'ol' | 'pre' | 'ul'
+} = {
+  DIV: 'div',
+  BUTTON: 'button',
+  SPAN: 'span',
+  OL: 'ol',
+  PRE: 'pre',
+  UL: 'ul',
+}
+
+export const WORKSHOP_CARD_TONE_OPTIONS: {[key: string]: CardTone} = {
+  'Inherit': 'inherit',
+  'Transparent': 'transparent',
+  'Default': 'default',
+  'Neutral': 'neutral',
+  'Primary (deprecated)': 'primary',
+  'Suggest': 'suggest',
+  'Positive': 'positive',
+  'Caution': 'caution',
+  'Critical': 'critical',
+}
+
+export const WORKSHOP_CODE_LANGUAGE_OPTIONS = {
+  JavaScript: 'javascript',
+  JSON: 'json',
+  JSX: 'jsx',
+  TypeScript: 'typescript',
+}
+
+export const WORKSHOP_CONTAINER_WIDTH_OPTIONS: {[key: string]: number | 'auto'} = {
+  '0': 0,
+  '1': 1,
+  '2': 2,
+  '3': 3,
+  '4': 4,
+  '5': 5,
+  'auto': 'auto',
+}
+
+export const WORKSHOP_DIALOG_POSITION_OPTIONS: {[key: string]: DialogPosition} = {
+  Fixed: 'fixed',
+  Absolute: 'absolute',
+}
+
+export const WORKSHOP_FLEX_DIRECTION_OPTIONS: {[key: string]: 'row' | 'column'} = {
+  Row: 'row',
+  Column: 'column',
+}
+
+export const WORKSHOP_FLEX_ALIGN_OPTIONS: Record<FlexAlign, FlexAlign> = {
+  'baseline': 'baseline',
+  'center': 'center',
+  'flex-end': 'flex-end',
+  'flex-start': 'flex-start',
+  'stretch': 'stretch',
+}
+
+export const WORKSHOP_FLEX_JUSTIFY_OPTIONS: Record<FlexJustify, FlexJustify> = {
+  'center': 'center',
+  'flex-end': 'flex-end',
+  'flex-start': 'flex-start',
+  'space-around': 'space-around',
+  'space-between': 'space-between',
+  'space-evenly': 'space-evenly',
+}
+
+export const WORKSHOP_FONT_WEIGHT_OPTIONS: {[key: string]: ThemeFontWeightKey} = {
+  Regular: 'regular',
+  Medium: 'medium',
+  Semibold: 'semibold',
+  Bold: 'bold',
+}
+
+export const WORKSHOP_HEADING_FONT_SIZE_OPTIONS = {
+  '0': 0,
+  '1': 1,
+  '2': 2,
+  '3': 3,
+  '4': 4,
+}
+
+export const WORKSHOP_ICON_SYMBOL_OPTIONS: {[key: string]: IconSymbol | ''} = Object.keys(
+  icons,
+).reduce(
+  (acc: {[key: string]: IconSymbol | ''}, key) => {
+    acc[key] = key as IconSymbol
+
+    return acc
+  },
+  {'(none)': ''},
+)
+
+export const WORKSHOP_LABEL_FONT_SIZE_OPTIONS = {
+  '0': 0,
+  '1': 1,
+  '2': 2,
+  '3': 3,
+  '4': 4,
+}
+
+export const WORKSHOP_PLACEMENT_OPTIONS: Record<Placement, Placement> = {
+  'top': 'top',
+  'top-start': 'top-start',
+  'top-end': 'top-end',
+  'right': 'right',
+  'right-start': 'right-start',
+  'right-end': 'right-end',
+  'left': 'left',
+  'left-start': 'left-start',
+  'left-end': 'left-end',
+  'bottom': 'bottom',
+  'bottom-start': 'bottom-start',
+  'bottom-end': 'bottom-end',
+}
+
+export const WORKSHOP_RADIUS_OPTIONS = {
+  '0': 0,
+  '1': 1,
+  '2': 2,
+  '3': 3,
+  '4': 4,
+  '5': 5,
+  '6': 6,
+}
+
+export const WORKSHOP_SHADOW_OPTIONS = {
+  '0': 0,
+  '1': 1,
+  '2': 2,
+  '3': 3,
+  '4': 4,
+  '5': 5,
+}
+
+export const WORKSHOP_SPACE_OPTIONS = {
+  '0': 0,
+  '1': 1,
+  '2': 2,
+  '3': 3,
+  '4': 4,
+  '5': 5,
+  '6': 6,
+  '7': 7,
+  '8': 8,
+  '9': 9,
+}
+
+export const WORKSHOP_SPOT_COLOR_OPTIONS: {[key: string]: ThemeColorAvatarColorKey} = {
+  Gray: 'gray',
+  Blue: 'blue',
+  Purple: 'purple',
+  Magenta: 'magenta',
+  Red: 'red',
+  Orange: 'orange',
+  Yellow: 'yellow',
+  Green: 'green',
+  Cyan: 'cyan',
+}
+
+export const WORKSHOP_TEXT_ALIGN_OPTIONS: {[key: string]: TextAlign | ''} = {
+  '(none)': '',
+  'Initial': 'initial',
+  'Left': 'left',
+  'Right': 'right',
+  'Center': 'center',
+  'Justify': 'justify',
+}
+
+export const WORKSHOP_TEXT_FONT_SIZE_OPTIONS = {
+  '0': 0,
+  '1': 1,
+  '2': 2,
+  '3': 3,
+  '4': 4,
+}
+
+export const WORKSHOP_TEXT_INPUT_TYPE_OPTIONS: {[key: string]: TextInputType} = {
+  'date': 'date',
+  'datetime-local': 'datetime-local',
+  'email': 'email',
+  'month': 'month',
+  'number': 'number',
+  'password': 'password',
+  'tel': 'tel',
+  'time': 'time',
+  'text': 'text',
+  'week': 'week',
+  'color': 'color',
+}
+
+export const WORKSHOP_TEXT_OVERFLOW_OPTIONS: {[key: string]: 'ellipsis' | ''} = {
+  None: '',
+  Ellipsis: 'ellipsis',
+}
+
+export const WORKSHOP_TEXT_SIZE_OPTIONS = {
+  '0': 0,
+  '1': 1,
+  '2': 2,
+  '3': 3,
+  '4': 4,
+}
+
+export const WORKSHOP_TEXT_WEIGHT_OPTIONS: {[key: string]: ThemeFontWeightKey | ''} = {
+  '(none)': '',
+  'Regular': 'regular',
+  'Medium': 'medium',
+  'Semibold': 'semibold',
+  'Bold': 'bold',
+}
+
+export const WORKSHOP_TOAST_STATUS_OPTIONS: {
+  [key: string]: 'error' | 'success' | 'warning' | 'info' | ''
+} = {
+  None: '',
+  Info: 'info',
+  Success: 'success',
+  Warning: 'warning',
+  Error: 'error',
+}
+
+export const WORKSHOP_WIDTH_OPTIONS: {[key: string]: number | 'auto'} = {
+  'Auto': 'auto',
+  '0': 0,
+  '1': 1,
+  '2': 2,
+  '3': 3,
+  '4': 4,
+  '5': 5,
+}

package/src/core/_compat.ts

@@ -0,0 +1,264 @@
+// This file re-exports API members which existed in the `@bettercms-ai/kit` export in v1.
+
+import {
+  type BaseTheme as _BaseTheme,
+  buildTheme,
+  type HSL as _HSL,
+  type PartialThemeColorBuilderOpts,
+  type RGB as _RGB,
+  type RootTheme as _RootTheme,
+  type Theme as _Theme,
+  type ThemeAvatar,
+  type ThemeBoxShadow,
+  type ThemeColor,
+  type ThemeColorBase,
+  type ThemeColorBuilderOpts,
+  type ThemeColorButton,
+  type ThemeColorButtonModeKey as _ThemeColorButtonModeKey,
+  type ThemeColorButtonState,
+  type ThemeColorButtonStates,
+  type ThemeColorButtonTones,
+  type ThemeColorCard,
+  type ThemeColorCardState,
+  type ThemeColorGenericState,
+  type ThemeColorInput,
+  type ThemeColorInputState,
+  type ThemeColorInputStates,
+  type ThemeColorMuted,
+  type ThemeColorMutedTone,
+  type ThemeColorName,
+  type ThemeColorScheme,
+  type ThemeColorSchemeKey as _ThemeColorSchemeKey,
+  type ThemeColorSchemes,
+  type ThemeColorSelectable,
+  type ThemeColorSelectableState,
+  type ThemeColorSelectableStates,
+  type ThemeColorSolid,
+  type ThemeColorSolidTone,
+  type ThemeColorSpot,
+  type ThemeColorSpotKey,
+  type ThemeColorSyntax as _ThemeColorSyntax,
+  type ThemeColorToneKey,
+  type ThemeFont as _ThemeFont,
+  type ThemeFontKey as _ThemeFontKey,
+  type ThemeFonts as _ThemeFonts,
+  type ThemeFontSize as _ThemeFontSize,
+  type ThemeFontWeight as _ThemeFontWeight,
+  type ThemeFontWeightKey as _ThemeFontWeightKey,
+  type ThemeInput,
+  type ThemeLayer as _ThemeLayer,
+  type ThemeShadow as _ThemeShadow,
+  type ThemeStyles,
+} from '@bettercms-ai/kit/theme'
+
+/**
+ * @public
+ * @deprecated Use `BaseTheme` from `@bettercms-ai/kit/theme` instead.
+ */
+export type BaseTheme = _BaseTheme
+
+/**
+ * @public
+ * @deprecated Use `ThemeBoxShadow` from `@bettercms-ai/kit/theme` instead.
+ */
+export type BoxShadow = ThemeBoxShadow
+
+/**
+ * @public
+ * @deprecated Use `HSL` from `@bettercms-ai/kit/theme` instead.
+ */
+export type HSL = _HSL
+
+/**
+ * @public
+ * @deprecated Use `RGB` from `@bettercms-ai/kit/theme` instead.
+ */
+export type RGB = _RGB
+
+/**
+ * @public
+ * @deprecated Use `RootTheme` from `@bettercms-ai/kit/theme` instead.
+ */
+export type RootTheme = _RootTheme
+
+/**
+ * @public
+ * @deprecated Use `ThemeStyles` from `@bettercms-ai/kit/theme` instead.
+ */
+export type Styles = ThemeStyles
+
+/**
+ * @public
+ * @deprecated Use `Theme` from `@bettercms-ai/kit/theme` instead.
+ */
+export type Theme = _Theme
+
+/**
+ * @public
+ * @deprecated Use `ThemeColorButtonModeKey` from `@bettercms-ai/kit/theme` instead.
+ */
+export type ThemeColorButtonModeKey = _ThemeColorButtonModeKey
+
+/**
+ * @public
+ * @deprecated Use `ThemeColorSchemeKey` from `@bettercms-ai/kit/theme` instead.
+ */
+export type ThemeColorSchemeKey = _ThemeColorSchemeKey
+
+/**
+ * @public
+ * @deprecated Use `ThemeColorSyntax` from `@bettercms-ai/kit/theme` instead.
+ */
+export type ThemeColorSyntax = _ThemeColorSyntax
+
+/**
+ * @public
+ * @deprecated Use `ThemeFont` from `@bettercms-ai/kit/theme` instead.
+ */
+export type ThemeFont = _ThemeFont
+
+/**
+ * @public
+ * @deprecated Use `ThemeFontKey` from `@bettercms-ai/kit/theme` instead.
+ */
+export type ThemeFontKey = _ThemeFontKey
+
+/**
+ * @public
+ * @deprecated Use `ThemeFontSize` from `@bettercms-ai/kit/theme` instead.
+ */
+export type ThemeFontSize = _ThemeFontSize
+
+/**
+ * @public
+ * @deprecated Use `ThemeFontWeight` from `@bettercms-ai/kit/theme` instead.
+ */
+export type ThemeFontWeight = _ThemeFontWeight
+
+/**
+ * @public
+ * @deprecated Use `ThemeFontWeightKey` from `@bettercms-ai/kit/theme` instead.
+ */
+export type ThemeFontWeightKey = _ThemeFontWeightKey
+
+/**
+ * @public
+ * @deprecated Use `ThemeFonts` from `@bettercms-ai/kit/theme` instead.
+ */
+export type ThemeFonts = _ThemeFonts
+
+/**
+ * @public
+ * @deprecated Use `ThemeLayer` from `@bettercms-ai/kit/theme` instead.
+ */
+export type ThemeLayer = _ThemeLayer
+
+/**
+ * @public
+ * @deprecated Use `ThemeShadow` from `@bettercms-ai/kit/theme` instead.
+ */
+export type ThemeShadow = _ThemeShadow
+
+export {
+  type PartialThemeColorBuilderOpts,
+  type ThemeAvatar,
+  type ThemeColor,
+  type ThemeColorBase,
+  type ThemeColorBuilderOpts,
+  type ThemeColorButton,
+  type ThemeColorButtonState,
+  type ThemeColorButtonStates,
+  type ThemeColorButtonTones,
+  type ThemeColorCard,
+  type ThemeColorCardState,
+  type ThemeColorGenericState,
+  type ThemeColorInput,
+  type ThemeColorInputState,
+  type ThemeColorInputStates,
+  type ThemeColorMuted,
+  type ThemeColorMutedTone,
+  type ThemeColorName,
+  type ThemeColorScheme,
+  type ThemeColorSchemes,
+  type ThemeColorSelectable,
+  type ThemeColorSelectableState,
+  type ThemeColorSelectableStates,
+  type ThemeColorSolid,
+  type ThemeColorSolidTone,
+  type ThemeColorSpot,
+  type ThemeColorSpotKey,
+  type ThemeColorToneKey,
+  type ThemeInput,
+}
+
+import {
+  createColorTheme as _createColorTheme,
+  hexToRgb as _hexToRgb,
+  hslToRgb as _hslToRgb,
+  multiply as _multiply,
+  parseColor as _parseColor,
+  rgba as _rgba,
+  rgbToHex as _rgbToHex,
+  rgbToHsl as _rgbToHsl,
+  screen as _screen,
+} from '@bettercms-ai/kit/theme'
+
+/**
+ * @public
+ * @deprecated Use `createColorTheme` from `@bettercms-ai/kit/theme` instead.
+ */
+export const createColorTheme = _createColorTheme
+
+/**
+ * @public
+ * @deprecated Use `hexToRgb` from `@bettercms-ai/kit/theme` instead.
+ */
+export const hexToRgb = _hexToRgb
+
+/**
+ * @public
+ * @deprecated Use `hslToRgb` from `@bettercms-ai/kit/theme` instead.
+ */
+export const hslToRgb = _hslToRgb
+
+/**
+ * @public
+ * @deprecated Use `multiply` from `@bettercms-ai/kit/theme` instead.
+ */
+export const multiply = _multiply
+
+/**
+ * @public
+ * @deprecated Use `parseColor` from `@bettercms-ai/kit/theme` instead.
+ */
+export const parseColor = _parseColor
+
+/**
+ * @public
+ * @deprecated Use `rgbToHex` from `@bettercms-ai/kit/theme` instead.
+ */
+export const rgbToHex = _rgbToHex
+
+/**
+ * @public
+ * @deprecated Use `rgbToHsl` from `@bettercms-ai/kit/theme` instead.
+ */
+export const rgbToHsl = _rgbToHsl
+
+/**
+ * @public
+ * @deprecated Use `rgba` from `@bettercms-ai/kit/theme` instead.
+ */
+export const rgba = _rgba
+
+/**
+ * @public
+ * @deprecated Use `screen` from `@bettercms-ai/kit/theme` instead.
+ */
+export const screen = _screen
+
+/**
+ * @public
+ * @deprecated Use `buildTheme` from `@bettercms-ai/kit/theme` instead.
+ */
+export const studioTheme = buildTheme()

package/src/core/components/autocomplete/__mocks__/apiStore.ts

@@ -0,0 +1,49 @@
+import countries from './countries'
+
+export const countriesStore = {
+  search(
+    query: string,
+    onResults: (results: {value: string}[]) => void,
+    onLoading: (flag: boolean) => void,
+  ): {cancel: () => void} {
+    const fakeDelay = 350 + Math.random() * 800
+
+    onLoading(true)
+
+    const timeout = setTimeout(() => {
+      const results: {value: string}[] = countries
+        .filter((d) => d.name.toLowerCase().includes(query.toLowerCase()))
+        .map((d) => ({value: d.code}))
+
+      onResults(results)
+      onLoading(false)
+    }, fakeDelay)
+
+    return {
+      cancel: () => clearTimeout(timeout),
+    }
+  },
+
+  fetchDocument(
+    id: string,
+    onResult: (value: {code: string; title: string} | null) => void,
+    onLoading: (flag: boolean) => void,
+  ): {cancel: () => void} {
+    const fakeDelay = 50 + Math.random() * 400
+
+    onLoading(true)
+
+    const timeout = setTimeout(() => {
+      const rec = countries.find((c) => c.code === id)
+
+      const doc = rec && {code: rec.code, title: rec.name}
+
+      onResult(doc || null)
+      onLoading(false)
+    }, fakeDelay)
+
+    return {
+      cancel: () => clearTimeout(timeout),
+    }
+  },
+}