@nordcraft/core 1.0.0

package/src/styling/className.ts

@@ -0,0 +1,73 @@
+// cSpell: ignore phash
+const SEED = 5381
+
+// When we have separate strings it's useful to run a progressive
+// version of djb2 where we pretend that we're still looping over
+// the same string
+const phash = (h: number, x: string) => {
+  let i = x.length
+
+  while (i) {
+    h = (h * 33) ^ x.charCodeAt(--i)
+  }
+
+  return h
+}
+
+// This is a djb2 hashing function
+const hash = (x: string) => {
+  return phash(SEED, x)
+}
+
+const AD_REPLACER_R = /(a)(d)/gi
+
+/* This is the "capacity" of our alphabet i.e. 2x26 for all letters plus their capitalized
+ * counterparts */
+const charsLength = 52
+
+/* start at 75 for 'a' until 'z' (25) and then start at 65 for capitalized letters */
+const getAlphabeticChar = (code: number) =>
+  String.fromCharCode(code + (code > 25 ? 39 : 97))
+
+/* input a number, usually a hash and convert it to base-52 */
+function generateAlphabeticName(code: number) {
+  let name = ''
+  let x
+
+  /* get a char and divide by alphabet-length */
+  for (x = Math.abs(code); x > charsLength; x = (x / charsLength) | 0) {
+    name = getAlphabeticChar(x % charsLength) + name
+  }
+
+  return (getAlphabeticChar(x % charsLength) + name).replace(
+    AD_REPLACER_R,
+    '$1-$2',
+  )
+}
+
+export const getClassName = (object: any) => {
+  return generateAlphabeticName(hash(JSON.stringify(object)))
+}
+
+export const toValidClassName = (
+  input: string,
+  escapeSpecialCharacters = false,
+) => {
+  // Replace invalid characters with hyphens
+  let className = input
+    // Remove leading and trailing whitespace
+    .trim()
+    // Replace whitespace with hyphens
+    .replace(/\s+/g, '-')
+
+  if (escapeSpecialCharacters) {
+    className = className.replace(/[^a-zA-Z0-9-_]/g, (match) => `\\${match}`)
+  }
+
+  // Ensure the class name doesn't start with a number or special character
+  if (/^[^a-zA-Z]/.test(className)) {
+    className = `_${className}`
+  }
+
+  return className
+}

package/src/styling/style.css.ts

@@ -0,0 +1,309 @@
+// cSpell:ignore thinn, ABCDEFGHIJKLMNOPQRSTYVWXYZ
+import type { Component } from '../component/component.types'
+import { omitKeys } from '../utils/collections'
+import { isDefined } from '../utils/util'
+import { getClassName, toValidClassName } from './className'
+import type { OldTheme, Theme, ThemeOptions } from './theme'
+import { getThemeCss } from './theme'
+import type {
+  ComponentNodeModel,
+  ElementNodeModel,
+  StyleDeclarationBlock,
+} from './variantSelector'
+import { variantSelector } from './variantSelector'
+
+const LEGACY_BREAKPOINTS = {
+  large: 1440,
+  small: 576,
+  medium: 960,
+}
+
+export function kebabCase(string: string) {
+  return string
+    .split('')
+    .map((char) => {
+      return 'ABCDEFGHIJKLMNOPQRSTYVWXYZ'.includes(char)
+        ? '-' + char.toLocaleLowerCase()
+        : char
+    })
+    .join('')
+}
+
+const SIZE_PROPERTIES = new Set([
+  'width',
+  'min-width',
+  'max-width',
+  'height',
+  'min-height',
+  'max-height',
+  'margin',
+  'margin-top',
+  'margin-left',
+  'margin-bottom',
+  'margin-right',
+  'padding',
+  'padding-top',
+  'padding-left',
+  'padding-bottom',
+  'padding-right',
+  'gap',
+  'gap-x',
+  'gap-y',
+  'border-radius',
+  'border-bottom-left-radius',
+  'border-bottom-right-radius',
+  'border-top-left-radius',
+  'border-top-right-radius',
+  'border-width',
+  'border-top-width',
+  'border-left-width',
+  'border-bottom-width',
+  'border-right-width',
+  'font-size',
+  'top',
+  'right',
+  'bottom',
+  'left',
+  'outline-width',
+])
+
+export const createStylesheet = (
+  root: Component,
+  components: Component[],
+  theme: Theme | OldTheme,
+  options: ThemeOptions,
+  // eslint-disable-next-line max-params
+) => {
+  const hashes = new Set<string>()
+
+  // Get fonts used on the page
+  const fonts = getAllFonts(components)
+
+  //Exclude fonts that are not used on this page.
+  let stylesheet = getThemeCss(
+    'breakpoints' in theme
+      ? {
+          ...theme,
+          fontFamily: Object.fromEntries(
+            Object.entries(theme.fontFamily).filter(
+              ([key, value]) => value.default ?? fonts.has('--font-' + key),
+            ),
+          ),
+        }
+      : {
+          ...theme,
+          fonts: theme.fonts,
+        },
+    options,
+  )
+  const styleToCss = (style: StyleDeclarationBlock) => {
+    return Object.entries(style)
+      .map(([property, value]) => {
+        if (!isDefined(value)) {
+          // ignore undefined/null values
+          return
+        }
+        const propertyName = kebabCase(property)
+        const propertyValue =
+          String(Number(value)) === String(value) &&
+          SIZE_PROPERTIES.has(propertyName)
+            ? `${Number(value) * 4}px`
+            : value
+        return `${propertyName}:${propertyValue};`
+      })
+      .filter(Boolean)
+      .join('\n  ')
+  }
+  const getNodeStyles = (
+    node: ElementNodeModel | ComponentNodeModel,
+    classHash: string,
+  ) => {
+    try {
+      const style = omitKeys(node.style ?? {}, [
+        'variants',
+        'breakpoints',
+        'shadows',
+      ])
+      const styleVariants = node.variants ?? node.style?.variants
+      const renderVariant = (
+        selector: string,
+        style: StyleDeclarationBlock,
+        options?: { startingStyle?: boolean },
+      ) => {
+        const scrollbarStyles = Object.entries(style).filter(
+          ([key]) => key == 'scrollbar-width',
+        )
+        // If selectorCss is empty, we don't need to render the selector
+        let styles = styleToCss(style)
+        if (options?.startingStyle) {
+          styles = `@starting-style {
+            ${styles}
+          }`
+        }
+
+        return `
+  ${
+    styles.length > 0
+      ? `${selector} {
+    ${styles}
+  }`
+      : ''
+  }
+      ${
+        scrollbarStyles.length > 0
+          ? `
+${selector}::-webkit-scrollbar {
+  ${scrollbarStyles
+    .map(([_, value]) => {
+      switch (value) {
+        case 'none':
+          return 'width: 0;'
+        case 'thinn':
+        case 'thin':
+          return 'width: 4px;'
+        default:
+          return ''
+      }
+    })
+    .join('\n')}
+}
+`
+          : ''
+      }
+`
+      }
+
+      return `
+      ${renderVariant('.' + classHash, style)}
+      ${(styleVariants ?? [])
+        .map((variant) => {
+          const renderedVariant = renderVariant(
+            `.${classHash}${variantSelector(variant)}`,
+            variant.style,
+            {
+              startingStyle: variant.startingStyle,
+            },
+          )
+
+          if (variant.mediaQuery) {
+            return `
+          @media (${Object.entries(variant.mediaQuery)
+            .map(([key, value]) => `${key}: ${value}`)
+            .filter(Boolean)
+            .join(') and (')}) {
+            ${renderedVariant}
+          }
+          `
+          }
+
+          if (variant.breakpoint) {
+            return `
+          @media (min-width: ${LEGACY_BREAKPOINTS[variant.breakpoint]}px) {
+            ${renderedVariant}
+          }
+          `
+          }
+
+          return renderedVariant
+        })
+        .join('\n')}
+        ${
+          node.animations
+            ? Object.entries(node.animations)
+                .map(([animationName, keyframes]) => {
+                  return `
+                  @keyframes ${animationName} {
+                    ${Object.values(keyframes)
+                      .sort((a, b) => a.position - b.position)
+                      .map(({ key, position, value }) => {
+                        return `
+                        ${position * 100}% {
+                          ${key}: ${value};
+                        }
+                        `
+                      })
+                      .join('\n')}
+                  }
+                  `
+                })
+                .join('\n')
+            : ''
+        }
+      `
+    } catch (e) {
+      // eslint-disable-next-line no-console
+      console.error(e)
+      return ''
+    }
+  }
+
+  // Make sure that CSS for dependencies are rendered first so that instance styles can override
+  const visitedComponents = new Set<string>()
+  function insertComponentStyles(
+    component: Component,
+    package_name?: string,
+  ): string | undefined {
+    if (visitedComponents.has(component.name)) {
+      return
+    }
+    visitedComponents.add(component.name)
+    if (!component.nodes) {
+      // eslint-disable-next-line no-console
+      console.warn('Unable to find nodes for component', component.name)
+      return
+    }
+    Object.entries(component.nodes).forEach(([id, node]) => {
+      if (node.type === 'component') {
+        const childComponent = components.find(
+          (c) =>
+            c.name ===
+            [node.package ?? package_name, node.name]
+              .filter((c) => c)
+              .join('/'),
+        )
+        if (childComponent) {
+          insertComponentStyles(childComponent, node.package ?? package_name)
+          stylesheet += getNodeStyles(
+            node as any,
+            toValidClassName(`${component.name}:${id}`, true),
+          )
+
+          return
+        }
+      }
+      if (node.type !== 'element') {
+        return
+      }
+      const classHash = getClassName([node.style, node.variants])
+      if (hashes.has(classHash)) {
+        return ''
+      }
+      hashes.add(classHash)
+      stylesheet += getNodeStyles(node as any, classHash)
+    })
+  }
+  insertComponentStyles(root)
+
+  return stylesheet
+}
+
+export const getAllFonts = (components: Component[]) => {
+  return new Set(
+    components
+      .flatMap((component) => {
+        return Object.values(component.nodes).flatMap((node) => {
+          if (node.type === 'element') {
+            return [
+              node.style.fontFamily,
+              node.style['font-family'],
+              ...(node.variants?.map(
+                (v) => v.style.fontFamily ?? v.style['font-family'],
+              ) ?? []),
+            ].filter(isDefined)
+          }
+          return []
+        })
+      })
+      .map((f) => f.replace('var(', '').replace(')', '').replace(/'/g, '')),
+  )
+}