@codeleap/styles 4.0.1

package/dist/types/style.d.ts

@@ -0,0 +1,13 @@
+import { DynamicVariants } from '../lib/dynamicVariants';
+import { DefaultVariants } from '../lib/defaultVariants';
+import { AnyRecord, IAppVariants, IBreakpoints, ICSS, IEffects } from './core';
+import { Multiplier, Spacing } from './spacing';
+type Inset = `top:${Multiplier}` | `bottom:${Multiplier}` | `left:${Multiplier}` | `right:${Multiplier}`;
+export type CommonVariants = Spacing | Inset | DynamicVariants | keyof DefaultVariants | keyof IAppVariants | `effect:${keyof IEffects}`;
+type StyleAtom<Composition = AnyRecord, Variants = string, HasBreakpoints = string, HasComposition = string> = ICSS | Variants | CommonVariants | boolean | null | '' | (HasBreakpoints extends string ? {
+    'breakpoints': Partial<Record<keyof IBreakpoints, StyleAtom<Composition, Variants, boolean, string> | StyleAtom<Composition, Variants, boolean, string>[]>>;
+} : null) | (HasComposition extends string ? Partial<Record<keyof Composition, StyleAtom<AnyRecord, Variants, boolean, boolean> | StyleAtom<AnyRecord, Variants, boolean, boolean>[]>> : null);
+export type StyleProp<Composition = AnyRecord, Variants = string> = StyleAtom<Composition, Variants> | StyleAtom<Composition, Variants>[];
+export type VariantStyleSheet = Record<string, any>;
+export type StyledProp<T extends string> = StyleProp<Record<T, ICSS>>;
+export {};

package/dist/types/style.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/types/theme.d.ts

@@ -0,0 +1,62 @@
+import { BorderCreator } from '../lib/borderCreator';
+import { MediaQueries } from '../lib/mediaQuery';
+import type { DefaultVariants } from '../lib/defaultVariants';
+import { MultiplierFunction, Spacings } from '../lib/spacing';
+import { ICSS, IEffect } from './core';
+type AnyMap = {
+    [key: string]: any;
+};
+type ColorMap = {
+    [key: string]: string;
+};
+type BreakpointMap = {
+    [key: string]: number;
+};
+type EffectsMap = {
+    [key: string]: IEffect;
+};
+export type SpacingMap = Spacings<'margin'> & Spacings<'padding'> & Spacings<'m', string> & Spacings<'p', string> & {
+    gap: MultiplierFunction;
+};
+export type InsetMap = {
+    bottom: MultiplierFunction;
+    top: MultiplierFunction;
+    left: MultiplierFunction;
+    right: MultiplierFunction;
+};
+export type Theme = {
+    colors: ColorMap;
+    alternateColors?: {
+        [key: string]: ColorMap;
+    };
+    breakpoints?: BreakpointMap;
+    baseSpacing?: number;
+    presets?: AnyMap;
+    borderRadius?: AnyMap;
+    effects?: EffectsMap;
+    typography: AnyMap;
+    icons: AnyMap;
+    values?: AnyMap;
+};
+export type DefaultColorSchemeName = 'default';
+export type ColorScheme<T extends Theme = Theme> = DefaultColorSchemeName | keyof T['alternateColors'];
+export type AppTheme<T extends Theme> = {
+    colors: T['colors'];
+    breakpoints: T['breakpoints'];
+    setColorScheme: (colorScheme: ColorScheme<T>) => void;
+    currentColorScheme: ColorScheme<T>;
+    spacing: SpacingMap;
+    presets: DefaultVariants & T['presets'];
+    borderRadius: T['borderRadius'];
+    media: MediaQueries;
+    effects: T['effects'];
+    border: BorderCreator;
+    typography: T['typography'];
+    icons: T['icons'];
+    values: T['values'];
+    inset: InsetMap;
+    baseSpacing: number;
+    value: (multiplier: number) => number;
+    sized: (size: number | string) => ICSS;
+};
+export {};

package/dist/types/theme.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@codeleap/styles",
+  "version": "4.0.1",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "license": "UNLICENSED",
+  "repository": {
+    "url": "https://github.com/codeleap-uk/internal-libs-monorepo.git",
+    "type": "git",
+    "directory": "packages/styles"
+  },
+  "devDependencies": {
+    "@codeleap/config": "*",
+    "ts-node-dev": "1.1.8"
+  },
+  "scripts": {
+    "build": "tsc --build",
+    "lint": "eslint -c  .eslintrc.js --fix \"./src/**/*.{ts,tsx,js,jsx}\"",
+    "test": "./node_modules/.bin/mocha --require ts-node/register src/tests/**/*.spec.ts",
+    "run-sc": "tsnd --transpile-only",
+    "test:watch": "./node_modules/.bin/mocha --require ts-node/register ./src/tests/**/*.spec.ts -w --watch-files ./src/tests/**/*.spec.ts",
+    "createStyleSheets": "yarn run-sc src/scripts/createStyleSheets.ts"
+  },
+  "peerDependencies": {
+    "typescript": "5.0.4",
+    "react": "18.1.0"
+  },
+  "dependencies": {
+    "@fastify/deepmerge": "1.3.0",
+    "js-sha256": "0.11.0",
+    "lz-string": "^1.5.0",
+    "zustand": "4.5.0"
+  }
+}

package/src/index.ts

@@ -0,0 +1,7 @@
+import './lib/constants'
+import './lib/utils'
+
+export * from './lib'
+export * from './types'
+
+export { default as deepmerge } from '@fastify/deepmerge'

package/src/lib/Cacher.ts

@@ -0,0 +1,131 @@
+import { create } from 'zustand'
+import { createJSONStorage, persist, StateStorage } from 'zustand/middleware'
+import { AnyRecord } from '../types'
+import { CacheType } from '../types/cache'
+import { StyleConstants } from './constants'
+import { hashKey } from './hashKey'
+
+function getStaleTime() {
+  const time = 7
+
+  let currentTime = new Date()
+
+  currentTime.setDate(currentTime.getDate() + time)
+
+  return currentTime
+}
+
+type StorePersistor = {
+  cached: AnyRecord
+  cacheFor: (key: string, value: any) => void
+  staleTime: Date
+  reset: () => void
+}
+
+export class Cache<T extends any = any> {
+  cache: Record<string, T> = {}
+
+  persistor = null
+
+  store: StorePersistor = {
+    cached: {},
+    cacheFor: () => null,
+    reset: () => null,
+    staleTime: null
+  }
+
+  constructor(
+    public registryName: CacheType,
+    private storage: StateStorage = null,
+    public persistCache: boolean = !!storage,
+  ) {
+    if (!persistCache) return
+
+    this.createPersistor(registryName)
+
+    if (!StyleConstants.STORE_CACHE_ENABLED || !this.persistor) return
+
+    const currentTime = new Date()
+    const staleTime = new Date(this.store.staleTime)
+
+    const isStaled = currentTime > staleTime
+
+    if (isStaled) {
+      this.store.reset()
+      return
+    }
+
+    this.setCache(this.store.cached)
+  }
+
+  keyFor(cacheBaseKey: string, data: Array<any> | any) {
+    const values = [cacheBaseKey, data]
+
+    const cacheKey = hashKey(values)
+    const cachedValue = this.cache[cacheKey] ?? null
+
+    return {
+      key: cacheKey,
+      value: cachedValue,
+    }
+  }
+
+  cacheFor(key: string, cache: T) {
+    this.cache[key] = cache
+    if (this.persistCache) this.store.cacheFor(key, cache)
+    return cache
+  }
+
+  setCache(cache: Record<string, T>) {
+    this.cache = cache
+  }
+
+  clear() {
+    this.cache = {}
+    if (this.persistCache) this.persistor.persist.clearStorage()
+  }
+
+  createPersistor(registryName: string) {
+    if (!this.persistCache) return null
+
+    const persistor = create(persist<StorePersistor>(
+      (set, get) => ({
+        staleTime: getStaleTime(),
+        cached: {},
+        cacheFor: (key, value) => set(store => {
+          const cached = store.cached
+
+          cached[key] = value
+    
+          return {
+            cached
+          }
+        }),
+        reset: () => set({
+          cached: {},
+          staleTime: getStaleTime()
+        })
+      }),
+      {
+        name: `@styles.caches.${registryName}`,
+        version: StyleConstants.STORES_PERSIST_VERSION,
+        migrate: (persistedState: StorePersistor, version) => {
+          if (version != StyleConstants.STORES_PERSIST_VERSION) {
+            persistedState.staleTime = getStaleTime()
+            persistedState.cached = {}
+    
+            return persistedState
+          }
+    
+          return persistedState as StorePersistor
+        },
+        storage: createJSONStorage(() => this.storage),
+      }
+    ))
+
+    this.persistor = persistor
+    this.store = persistor.getState()
+
+    return persistor
+  }
+}

package/src/lib/StaleControl.ts

@@ -0,0 +1,73 @@
+
+export class StaleControl {
+  private wiperId: NodeJS.Timer = null
+
+  constructor(
+    private staleTime: number = 60, // minutes
+    private staleTimeIdentifier: string = '//:',
+    private wiperInterval: number = 30 * 60 * 1000, // 30 minutes
+  ) {}
+
+  isStaled(value: string) {
+    const { staleTime } = this.extractStaleTime(value)
+
+    const currentTime = new Date()
+
+    const isStaled = currentTime > staleTime
+
+    return isStaled
+  }
+
+  insertStaleTime(value: string) {
+    let currentTime = new Date()
+
+    currentTime.setMinutes(currentTime.getMinutes() + this.staleTime)
+
+    const staleTime = currentTime.toISOString()
+
+    const valueWithStaleTime = `${value}${this.staleTimeIdentifier}${staleTime}`
+
+    return valueWithStaleTime
+  }
+
+  refreshStaleTime(value: string) {
+    const { value: extractedValue } = this.extractStaleTime(value)
+
+    const refreshedValue = this.insertStaleTime(extractedValue)
+
+    return refreshedValue
+  }
+
+  extractStaleTime(value: string) {
+    const [extractedValue, _staleTime] = value?.split(this.staleTimeIdentifier)
+
+    const staleTime = new Date(_staleTime)
+
+    return {
+      staleTime,
+      value: extractedValue,
+    }
+  }
+
+  /**
+   * wipe staled cache; verify isStaled values and remove
+   */
+  cacheWiper() {
+    throw new Error('Cache Wiper not implement')
+  }
+
+  registerCacheWiper() {
+    if (this.wiperId !== null) {
+      this.unregisterCacheWiper()
+    }
+
+    this.wiperId = setInterval(() => {
+      this.cacheWiper()
+    }, this.wiperInterval)
+  }
+
+  unregisterCacheWiper() {
+    clearInterval(this.wiperId)
+    this.wiperId = null
+  }
+}

package/src/lib/StyleCache.ts

@@ -0,0 +1,69 @@
+import { Cache } from './Cacher'
+import { hashKey } from './hashKey'
+import { StyleConstants } from './constants'
+import { CacheType } from '../types/cache'
+import { minifier } from './minifier'
+import { StateStorage } from 'zustand/middleware'
+
+export class StyleCache {
+  baseKey: string
+
+  styles = new Cache('styles')
+  compositions = new Cache('compositions')
+  responsive = new Cache('responsive')
+
+  variants: Cache
+  common: Cache
+  components: Cache
+
+  constructor(storage: StateStorage) {
+    this.variants = new Cache('variants', storage)
+    this.common = new Cache('common', storage)
+    this.components = new Cache('components', storage)
+  }
+
+  registerBaseKey(keys: Array<any>) {
+    keys.push(StyleConstants.STORES_PERSIST_VERSION)
+
+    const baseKey = hashKey(keys)
+
+    this.baseKey = baseKey
+
+    return baseKey
+  }
+
+  wipeCache() {
+    this.components.clear()
+    this.responsive.clear()
+    this.compositions.clear()
+    this.variants.clear()
+    this.common.clear()
+    this.styles.clear()
+  }
+
+  keyFor(type: CacheType, keyData: Array<any> | any) {
+    const cache = this[type]
+
+    const values = [this.baseKey, keyData]
+
+    const cacheKey = hashKey(values)
+    const cachedValue = minifier.decompress(cache.cache[cacheKey] ?? null)
+
+    return {
+      key: cacheKey,
+      value: cachedValue,
+    }
+  }
+
+  cacheFor(type: CacheType, key: string, value: any) {
+    if (!StyleConstants.CACHE_ENABLED) {
+      return value
+    }
+
+    const cache = this[type]
+
+    const minifiedValue = minifier.compress(value)
+
+    return cache.cacheFor(key, minifiedValue)
+  }
+}

package/src/lib/StylePersistor.ts

@@ -0,0 +1,28 @@
+import { StateStorage } from 'zustand/middleware'
+import { minifier } from './minifier'
+
+export type StoragePersistor = {
+  set: (key: string, value: any) => void
+  get: (key: string) => any
+  del: (key: string) => void
+}
+
+export class StylePersistor implements StateStorage {
+  constructor(
+    private storage: StoragePersistor
+  ) {}
+
+  setItem(name: string, value: string): void {
+    return this.storage.set(name, value)
+  }
+
+  getItem(name: string): string | null {
+    const persistedValue = this.storage?.get(name)
+
+    return minifier.decompress(persistedValue ?? null)
+  }
+
+  removeItem(name: string): void {
+    return this.storage.del(name)
+  }
+}