@nordcraft/core 1.0.0

package/src/styling/theme.ts

@@ -0,0 +1,339 @@
+import { RESET_STYLES } from './theme.const'
+
+export interface ThemeOptions {
+  includeResetStyle: boolean
+  createFontFaces: boolean
+}
+
+export type StyleToken = {
+  name: string
+  type: 'value' | 'variable'
+  value: string
+}
+
+export type StyleTokenGroup = {
+  name: string
+  tokens: StyleToken[]
+}
+
+export type StyleTokenCategory =
+  | 'spacing'
+  | 'color'
+  | 'font-size'
+  | 'font-weight'
+  | 'z-index'
+  | 'border-radius'
+  | 'shadow'
+
+export type FontFamily = {
+  name: string
+  family: string
+  provider: 'google' | 'upload'
+  type: 'serif' | 'sans-serif' | 'monospace' | 'cursive'
+  variants: Array<{
+    name: string
+    weight:
+      | '100'
+      | '200'
+      | '300'
+      | '400'
+      | '500'
+      | '600'
+      | '700'
+      | '800'
+      | '900'
+
+    italic: boolean
+    url: string
+  }>
+}
+
+export type OldTheme = {
+  spacing: number
+  colors: Record<
+    string,
+    {
+      order: number
+      variants: Record<string, { value: string; order: number }>
+    }
+  >
+  fontFamily: Record<
+    string,
+    { value: string[]; order: number; default?: boolean }
+  >
+  fontWeight: Record<
+    string,
+    { value: string; order: number; default?: boolean }
+  >
+  fontSize: Record<string, { value: string; order: number; default?: boolean }>
+  shadow: Record<string, { value: string; order: number }>
+  breakpoints: Record<string, { value: number; order: number }>
+}
+export type Theme = {
+  scheme?: 'dark' | 'light'
+  color: StyleTokenGroup[]
+  fonts: FontFamily[]
+  'font-size': StyleTokenGroup[]
+  'font-weight': StyleTokenGroup[]
+  spacing: StyleTokenGroup[]
+  'border-radius': StyleTokenGroup[]
+  shadow: StyleTokenGroup[]
+  'z-index': StyleTokenGroup[]
+}
+
+export const getThemeCss = (theme: Theme | OldTheme, options: ThemeOptions) => {
+  if ('breakpoints' in theme) {
+    return getOldThemeCss(theme)
+  }
+  return `${options.includeResetStyle ? RESET_STYLES : ''}
+@layer base {
+  ${
+    options.createFontFaces
+      ? theme.fonts
+          .map(
+            (font) => `
+    ${font.variants
+      .map(
+        (variant) => `
+    @font-face {
+      font-family: "${font.family}";
+      font-style: ${variant.italic ? 'italic' : 'normal'};
+      font-weight: ${variant.weight};
+      font-display: auto;
+      src: local("${variant.url.substring(
+        variant.url.lastIndexOf('/') + 1,
+      )}"), url("${variant.url.replace(
+        'https://fonts.gstatic.com',
+        '/.toddle/fonts/font',
+      )}") format("woff2");
+    }
+    `,
+      )
+      .join('\n')}
+    `,
+          )
+          .join('\n')
+      : ''
+  }
+  body, :host {
+    /* Color */
+      ${theme.color
+        .flatMap((group) =>
+          group.tokens.map((color) => `--${color.name}: ${color.value};`),
+        )
+        .join('\n')}
+  /* Fonts */
+    ${theme.fonts
+      .map((font) => `--font-${font.name}: '${font.family}',${font.type};`)
+      .join('\n')}
+
+    /* Font size */
+    ${theme['font-size']
+      .flatMap((group) =>
+        group.tokens.map(
+          (variable) =>
+            `--${variable.name}: ${
+              variable.type === 'variable'
+                ? `var(--${variable.value})`
+                : variable.value
+            };`,
+        ),
+      )
+      .join('\n')}
+    /* Font weight */
+    ${theme['font-weight']
+      .flatMap((group) => {
+        return group.tokens.map(
+          (variable) =>
+            `--${variable.name}: ${
+              variable.type === 'variable'
+                ? `var(--${variable.value})`
+                : variable.value
+            };`,
+        )
+      })
+      .join('\n')}
+    /* Shadows */
+    ${theme.shadow
+      .flatMap((group) => {
+        return group.tokens.map(
+          (variable) =>
+            `--${variable.name}: ${
+              variable.type === 'variable'
+                ? `var(--${variable.value})`
+                : variable.value
+            };`,
+        )
+      })
+      .join('\n')}
+    /* Border radius */
+    ${theme['border-radius']
+      .flatMap((group) => {
+        return group.tokens.map(
+          (token) =>
+            `--${token.name}: ${
+              token.type === 'variable' ? `var(--${token.value})` : token.value
+            };`,
+        )
+      })
+      .join('\n')}
+    /* Spacing */
+    ${theme.spacing
+      .map((group) => {
+        return group.tokens
+          .map(
+            (token) =>
+              `--${token.name}: ${
+                token.type === 'variable'
+                  ? `var(--${token.value})`
+                  : token.value
+              };`,
+          )
+          .join('\n')
+      })
+      .join('\n')}
+    /* Z-index */
+    ${theme['z-index']
+      .map((group) => {
+        return group.tokens
+          .map(
+            (token) =>
+              `--${token.name}: ${
+                token.type === 'variable'
+                  ? `var(--${token.value})`
+                  : token.value
+              };`,
+          )
+          .join('\n')
+      })
+      .join('\n')}
+  }
+  @keyframes animation-spin {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+  @keyframes animation-fade-in {
+    from {
+      opacity:0;
+    }
+    to {
+      opacity:1;
+    }
+  }
+  @keyframes animation-fade-out {
+    from {
+      opacity:1;
+    }
+    to {
+      opacity:0;
+    }
+  }
+}
+`
+}
+
+export const getOldThemeCss = (theme: OldTheme) => {
+  const colorVars = Object.entries(theme.colors).flatMap(
+    ([color, { variants }]) =>
+      Object.entries(variants).map(
+        ([variant, { value }]) => `--${color}-${variant}:${value}`,
+      ),
+  )
+  return `
+
+
+
+
+body, :host {
+  ${Object.entries(theme.fontFamily)
+    .map(
+      ([
+        name,
+        {
+          value: [family, ...fallback],
+        },
+      ]) => `--font-${name}: '${family}',${fallback.join(',')};`,
+    )
+    .join('\n')}
+
+  ${Object.entries(theme.fontWeight)
+    .map(([name, { value }]) => `--font-weight-${name}: ${value};`)
+    .join('\n')}
+
+  ${Object.entries(theme.fontSize)
+    .map(([name, { value }]) => `--font-size-${name}: ${value};`)
+    .join('\n')}
+
+  --spacing:${theme.spacing}rem;
+    ${colorVars.join(';\n')};
+
+
+  --text-xxs:0.625rem;
+  --line-height-xxs:0.9rem;
+
+  --text-xs:0.75rem;
+  --line-height-xs:1rem;
+
+  --text-sm:0.875rem;
+  --line-height-sm:1.25rem;
+
+  --text-base:1rem;
+  --line-height-base:1.5rem;
+
+  --text-lg:1.125rem;
+  --line-height-lg:1.75rem;
+
+  --text-xl:1.25rem;
+  --line-height-xl:1.75rem;
+
+  --text-2xl:1.5rem;
+  --line-height-2xl:2rem;
+
+  --text-3xl:1.875rem;
+  --line-height-3xl:2.25rem;
+
+  --text-4xl:2.25rem;
+  --line-height-4xl:2.5rem;
+
+  --text-5xl:3rem;
+  --line-height-5xl:3rem;
+
+  ${Object.entries(theme.shadow)
+    .map(([name, { value }]) => `--shadow-${name}:${value};`)
+    .join('\n')}
+}
+
+${RESET_STYLES}
+
+@keyframes animation-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes animation-fade-in {
+  from {
+    opacity:0;
+  }
+  to {
+    opacity:1;
+  }
+}
+
+
+@keyframes animation-fade-out {
+  from {
+    opacity:1;
+  }
+  to {
+    opacity:0;
+  }
+}`
+}

package/src/styling/variantSelector.ts

@@ -0,0 +1,168 @@
+import type { CSSProperties } from 'react'
+import type {
+  AnimationKeyframe,
+  EventModel,
+} from '../component/component.types'
+import type { Formula } from '../formula/formula'
+
+export type Shadow = {
+  x: number
+  y: number
+  blur: number
+  spread: number
+  color: string
+  inset: boolean
+}
+
+export type Filter =
+  | {
+      name: 'Blur'
+      radius: number
+    }
+  | {
+      name: 'Opacity'
+      percent: number
+    }
+
+export interface StyleDeclarationBlock extends CSSProperties {
+  filters?: Filter[]
+  shadows?: Shadow[]
+}
+
+type MediaQuery = {
+  'min-width'?: string
+  'max-width'?: string
+  'min-height'?: string
+  'max-height'?: string
+}
+
+export interface StyleVariant {
+  autofill?: boolean
+  'even-child'?: boolean
+  'first-child'?: boolean
+  'first-of-type'?: boolean
+  'focus-visible'?: boolean
+  'focus-within'?: boolean
+  'last-child'?: boolean
+  'last-of-type'?: boolean
+  'popover-open'?: boolean
+  active?: boolean
+  breakpoint: 'small' | 'medium' | 'large'
+  checked?: boolean
+  class?: string
+  className?: string
+  disabled?: boolean
+  empty?: boolean
+  evenChild?: boolean
+  firstChild?: boolean
+  focus?: boolean
+  focusWithin?: boolean
+  hover?: boolean
+  id?: string
+  invalid?: boolean
+  lastChild?: boolean
+  link?: boolean
+  mediaQuery?: MediaQuery
+  pseudoElement?: string
+  startingStyle?: boolean
+  style: StyleDeclarationBlock
+  visited?: boolean
+}
+
+export interface NodeStyleModel extends StyleDeclarationBlock {
+  variants?: StyleVariant[]
+  breakpoints?: {
+    small?: NodeStyleModel
+    medium?: NodeStyleModel
+    large?: NodeStyleModel
+  }
+  mediaQuery?: MediaQuery
+}
+
+export type NodeClass = {
+  name: string
+  formula?: Formula
+}
+
+export type NodeModel =
+  | ElementNodeModel
+  | TextNodeModel
+  | ComponentNodeModel
+  | SlotNodeModel
+
+export type ElementNodeModel = {
+  id: string
+  type: 'element'
+  condition?: Formula
+  repeat?: Formula
+  repeatKey?: Formula
+  tag: string
+  classList: NodeClass[]
+  attrs: Record<string, Formula>
+  style: NodeStyleModel
+  variants?: StyleVariant[]
+  animations?: Record<string, Record<string, AnimationKeyframe>>
+  children: NodeModel[]
+  events: EventModel[]
+}
+
+export type ComponentNodeModel = {
+  id: string
+  type: 'component'
+  path?: string
+  name: string
+  condition?: Formula
+  repeat?: Formula
+  repeatKey?: Formula
+  style?: NodeStyleModel
+  variants?: StyleVariant[]
+  animations?: Record<string, Record<string, AnimationKeyframe>>
+  attrs: Record<string, Formula>
+  children: NodeModel[]
+  events: EventModel[]
+}
+
+export type TextNodeModel = {
+  id: string
+  type: 'text'
+  condition?: Formula
+  repeat?: Formula
+  repeatKey?: Formula
+  value: Formula
+  children?: undefined
+}
+
+export type SlotNodeModel = {
+  id: string
+  type: 'slot'
+  condition?: Formula
+  repeat?: undefined
+  repeatKey?: Formula
+  children: NodeModel[]
+}
+
+export const variantSelector = (variant: StyleVariant) =>
+  [
+    (variant.className ?? variant['class']) && `.${variant.className}`,
+    (variant.evenChild ?? variant['even-child']) && ':nth-child(even)',
+    (variant.firstChild ?? variant['first-child']) && ':first-child',
+    (variant.focusWithin ?? variant['focus-within']) && ':focus-within',
+    (variant.lastChild ?? variant['last-child']) && ':last-child',
+    variant.active && ':active',
+    variant.autofill && ':is(:-webkit-autofill, :autofill)',
+    variant.checked && ':checked',
+    variant.disabled && ':disabled',
+    variant.empty && ':empty',
+    variant.focus && ':focus',
+    variant.hover && ':hover',
+    variant.invalid && ':invalid',
+    variant.link && ':link',
+    variant.visited && ':visited',
+    variant['first-of-type'] && ':first-of-type',
+    variant['focus-visible'] && ':focus-visible',
+    variant['last-of-type'] && ':last-of-type',
+    variant['popover-open'] && ':popover-open',
+    variant.pseudoElement && `::${variant.pseudoElement}`,
+  ]
+    .filter(Boolean)
+    .join('')

package/src/types.ts

@@ -0,0 +1,158 @@
+import type { Component, ComponentData } from './component/component.types'
+import type { Formula, ToddleEnv } from './formula/formula'
+import type { PluginFormula } from './formula/formulaTypes'
+
+export type FormulaHandlerV2<R = unknown> = (
+  // For v2 of formulas
+  args: Record<string, unknown>,
+  ctx: {
+    root: Document | ShadowRoot
+    env: ToddleEnv
+  },
+) => R | null
+
+export type ActionHandlerV2 = (
+  // For v2 of actions
+  args: Record<string, unknown>,
+  ctx: {
+    triggerActionEvent: (trigger: string, data: any, event?: Event) => void
+    root: Document | ShadowRoot
+  },
+  event?: Event,
+  // If the action returns a function, that function will be called
+  // from our abort signal (for cleanup)
+) => void | (() => void) | Promise<void> | Promise<() => void>
+
+export type ActionHandler<Args = unknown[]> = (
+  args: Args,
+  ctx: {
+    triggerActionEvent: (trigger: string, data: any, event?: Event) => void
+    env: ToddleEnv
+    abortSignal: AbortSignal
+  },
+  event?: Event,
+) => void
+
+export type FormulaHandler<T = void> = (
+  args: unknown[],
+  ctx: {
+    component: Component
+    data: ComponentData
+    root: Document | ShadowRoot
+    env: ToddleEnv
+  },
+) => T | null
+
+interface PluginActionBase {
+  name: string
+  description?: string
+  arguments: Array<{
+    name: string
+    formula: Formula
+  }>
+  variableArguments: boolean | null
+}
+
+export interface PluginActionV2 extends PluginActionBase {
+  handler: ActionHandlerV2
+  version: 2
+}
+
+export type ArgumentInputDataFunction = (
+  items: unknown[],
+  index: number,
+  input: any,
+) => ComponentData
+
+export type CustomFormulaHandler = (
+  name: string,
+  packageName: string | undefined,
+) => PluginFormula<FormulaHandlerV2> | undefined
+
+export type FormulaLookup = (name: string) => FormulaHandler | undefined
+
+export interface Toddle<LocationSignal, ShowSignal> {
+  project: string
+  branch: string
+  commit: string
+  errors: Error[]
+  formulas: Record<string, Record<string, PluginFormula<FormulaHandlerV2>>>
+  actions: Record<string, Record<string, PluginActionV2>>
+  isEqual: (a: any, b: any) => boolean
+  registerAction: (name: string, handler: ActionHandler) => void
+  registerFormula: (
+    name: string,
+    handler: FormulaHandler,
+    getArgumentInputData?: ArgumentInputDataFunction,
+  ) => void
+  getAction: (name: string) => ActionHandler | undefined
+  getFormula: FormulaLookup
+  getCustomFormula: CustomFormulaHandler
+  getCustomAction: (
+    name: string,
+    packageName: string | undefined,
+  ) => PluginActionV2 | undefined
+  getArgumentInputData: (
+    name: string,
+    items: unknown[],
+    index: number,
+    input: any,
+  ) => ComponentData
+  data: Record<string, unknown>
+  components: Component[]
+  locationSignal: LocationSignal
+  eventLog: Array<{
+    component: string
+    node: string
+    nodeId: string
+    event: string
+    time: number
+    data: any
+  }>
+  pageState: ComponentData
+  _preview?: {
+    showSignal: ShowSignal
+  }
+  // We temporarily expose the env here until we add a new version of
+  // the APPLY_FORMULA function that can handle the env as an argument
+  env: ToddleEnv
+}
+
+export interface ToddleInternals {
+  project: string
+  branch: string
+  commit: string
+  pageState: ComponentData
+  component: Component
+  components: Component[]
+  // Flag that indicates if the page is done with the createRoot function.
+  isPageLoaded: boolean
+  cookies: string[]
+}
+
+export interface Comment {
+  text: string
+}
+
+export interface ToddleMetadata {
+  '@toddle/metadata'?: {
+    comments: Record<string, Comment & { index: number }> | null
+  } | null
+}
+
+export type RequireFields<T, K extends keyof T> = Omit<T, K> & {
+  [P in K]-?: NonNullable<T[P]>
+}
+
+export type NestedOmit<
+  Schema,
+  Path extends string,
+> = Path extends `${infer Head}.${infer Tail}`
+  ? Head extends keyof Schema
+    ? {
+        [K in keyof Schema]: K extends Head
+          ? NestedOmit<Schema[K], Tail>
+          : Schema[K]
+      }
+    : Schema
+  : Omit<Schema, Path>

package/src/utils/collections.test.ts

@@ -0,0 +1,57 @@
+import { omitPaths, sortObjectEntries } from './collections'
+
+describe('sortObjectEntries()', () => {
+  test('it sorts entries in an object based on the callback function', () => {
+    expect(
+      sortObjectEntries(
+        { c: 'hello', a: 'value', b: 'otherValue' },
+        ([key]) => key,
+      ),
+    ).toEqual([
+      ['a', 'value'],
+      ['b', 'otherValue'],
+      ['c', 'hello'],
+    ])
+    expect(
+      sortObjectEntries(
+        { c: 'hello', a: 'value', b: 'otherValue' },
+        ([_, value]) => value,
+      ),
+    ).toEqual([
+      ['c', 'hello'],
+      ['b', 'otherValue'],
+      ['a', 'value'],
+    ])
+  })
+})
+
+describe('omitPaths()', () => {
+  test('it filters out paths from an object', () => {
+    expect(
+      omitPaths(
+        {
+          a: 'value',
+          b: {
+            c: 'hello',
+            d: 'world',
+          },
+          e: {
+            f: {
+              g: 'foo',
+            },
+            h: 'bar',
+          },
+        },
+        [['a'], ['b', 'c'], ['e', 'f', 'g']],
+      ),
+    ).toEqual({
+      b: {
+        d: 'world',
+      },
+      e: {
+        f: {},
+        h: 'bar',
+      },
+    })
+  })
+})