@paganaye/stylets 0.1.0

package/dist/State.test.js

@@ -0,0 +1,41 @@
+import { describe, it } from 'vitest';
+// TODO: Update imports once State is fully integrated
+// import { computed, createState } from './State';
+describe('State', () => {
+    it.skip('returns initial value and emits on set', async () => {
+        // const s = createState<string>("A");
+        // expect(await s.value).toBe("A");
+        // let calls = 0;
+        // let expectedValue = "A";
+        // s.subscribe((v) => {
+        //   calls++;
+        //   expect(v).toBe(expectedValue);
+        // });
+        // expectedValue = "B";
+        // s.setValue("B");
+        // expect(calls).toBe(2);
+    });
+    it.skip('emits when initialized with a resolving promise', async () => {
+        // const s = createState<number>();
+        // s.setValue(5);
+        // expect(s.value).toBe(5);
+    });
+    it.skip('recomputes when dependency changes', () => {
+        // const a = createState(100);
+        // const c = computed([a], () => {
+        //   return (a.value) + 1;
+        // }, 0);
+        // expect(c.value).toBe(101);
+        // a.setValue(200);
+        // expect(c.value).toBe(201);
+    });
+    it.skip('recomputes when dependency changes II', () => {
+        // const a = createState(100);
+        // const c = computed([a], () => {
+        //   return (a.value) + 1;
+        // });
+        // expect(c.value).toBe(101);
+        // a.setValue(200);
+        // expect(c.value).toBe(201);
+    });
+});

package/dist/StyleWriter.d.ts

@@ -0,0 +1,25 @@
+import { CssProperties, ITheme } from "./types";
+export declare function toKebabCase(str: string): string;
+export declare class StyleWriter {
+    readonly name: string;
+    readonly element: HTMLStyleElement;
+    readonly lines: string[];
+    static readonly builders: Map<string, StyleWriter>;
+    private indentString;
+    private _indentLevel;
+    get indentLevel(): number;
+    set indentLevel(value: number);
+    private constructor();
+    static byName(name: string): StyleWriter;
+    render(): void;
+    clear(): void;
+    addLines(lines: string[]): void;
+    addLine(line: string | undefined): void;
+    addRule(selector: string, styles: CssProperties | string): void;
+    protected addCssProperties(properties: CssProperties): void;
+    static stringifyStyle(key: string, value: CssProperties, theme?: ITheme): string | undefined;
+    static spacingProps: Set<string>;
+    static unitlessProps: Set<string>;
+    static convertNumberToCssValue(prop: string, value: number): string;
+}
+export declare function addStyles(section: string, callback: (builder: StyleWriter) => void, thisArg?: any): void;

package/dist/StyleWriter.js

@@ -0,0 +1,156 @@
+import { CssExpr } from "./CssExpr";
+export function toKebabCase(str) {
+    if (str.startsWith('--'))
+        return str;
+    return str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
+}
+export class StyleWriter {
+    name;
+    element;
+    lines = [];
+    static builders = new Map;
+    indentString = '';
+    _indentLevel = 0;
+    get indentLevel() {
+        return this._indentLevel;
+    }
+    set indentLevel(value) {
+        this._indentLevel = value;
+        this.indentString = '  '.repeat(this._indentLevel);
+    }
+    constructor(name) {
+        this.name = name;
+        this.element = document.createElement('style');
+        this.element.setAttribute("data-section", name);
+        document.head.appendChild(this.element);
+    }
+    static byName(name) {
+        let existing = StyleWriter.builders.get(name);
+        if (existing)
+            return existing;
+        let newBuilder = new StyleWriter(name);
+        StyleWriter.builders.set(name, newBuilder);
+        return newBuilder;
+    }
+    render() {
+        this.element.innerHTML = this.lines.join("\n");
+        this.clear();
+    }
+    clear() {
+        this.lines.length = 0;
+    }
+    addLines(lines) {
+        lines.forEach(s => this.addLine(s));
+    }
+    addLine(line) {
+        if (line === undefined)
+            return;
+        this.lines.push(this.indentString + line);
+    }
+    addRule(selector, styles) {
+        this.addLine(`${selector} {`);
+        this.indentLevel += 1;
+        if (typeof styles === 'string') {
+            this.addLine(styles);
+        }
+        else if (Array.isArray(styles)) {
+            this.addLines(styles);
+        }
+        else {
+            this.addCssProperties(styles);
+        }
+        this.indentLevel -= 1;
+        this.addLine(`}`);
+    }
+    addCssProperties(properties) {
+        if (properties == null)
+            return;
+        let entries = Object.entries(properties);
+        if (entries.length === 0)
+            return;
+        let stringifyValue = (key, v) => {
+            if (v === null || v === undefined)
+                return undefined;
+            if (typeof v === 'string' || typeof v === 'number') {
+                return StyleWriter.stringifyStyle(key, v);
+            }
+            else if (v instanceof CssExpr) {
+                let s = v.toString();
+                return s;
+            }
+            else if (Array.isArray(v)) {
+                let s = v.map(i => stringifyValue(key, i)).join(', ');
+                return s;
+            }
+            else {
+                throw Error("Unexpected type in style value");
+            }
+        };
+        for (let [k, v] of entries) {
+            if (!k.startsWith('--')) {
+                k = toKebabCase(k);
+            }
+            v = stringifyValue(k, v);
+            if (v === undefined || v === null)
+                continue;
+            this.addLine(`${k}: ${v};`);
+        }
+    }
+    static stringifyStyle(key, value, theme) {
+        if (value === null || value === undefined)
+            return undefined;
+        if (key === 'content' && typeof value === 'string') {
+            return `content: ${value};`;
+        }
+        let result;
+        switch (typeof value) {
+            case "number":
+                result = StyleWriter.convertNumberToCssValue(key, value);
+                break;
+            case "function":
+                result = value(theme);
+                break;
+            default:
+                result = String(value);
+                break;
+        }
+        return result;
+    }
+    static spacingProps = new Set([
+        'width', 'height', 'max-width', 'min-width', 'max-height', 'min-height',
+        'padding', 'padding-top', 'padding-bottom', 'padding-left', 'padding-right',
+        'margin', 'margin-top', 'margin-bottom', 'margin-left', 'margin-right',
+        'gap', 'row-gap', 'column-gap',
+        'top', 'right', 'bottom', 'left',
+        'inset', 'inset-top', 'inset-right', 'inset-bottom', 'inset-left',
+        'border', 'border-radius', 'border-top-left-radius', 'border-top-right-radius', 'border-bottom-left-radius', 'border-bottom-right-radius'
+    ]);
+    // Properties that are unitless in CSS
+    static unitlessProps = new Set([
+        'line-height', 'z-index', 'opacity', 'font-weight', 'order', 'flex', 'flex-grow', 'flex-shrink', 'flex-basis'
+    ]);
+    static convertNumberToCssValue(prop, value) {
+        // normalize prop name to kebab-case as used in spacingPropsSet
+        const p = prop.toLowerCase();
+        if (StyleWriter.unitlessProps.has(p))
+            return String(value);
+        if (StyleWriter.spacingProps && StyleWriter.spacingProps.has(p)) {
+            // default conversion: treat number as rem with one decimal (value * 0.25 -> 0.25 increments?)
+            // original behaviour used Math.round(value * 2.5) / 10 to produce tenths
+            return `${Math.round(value * 2.5) / 10}rem`;
+        }
+        // fallback: return numeric as-is
+        return String(value);
+    }
+}
+export function addStyles(section, callback, thisArg) {
+    let builder = StyleWriter.byName(section);
+    try {
+        callback.call(thisArg, builder);
+    }
+    finally {
+        if (typeof document === 'undefined')
+            return;
+        builder.render();
+    }
+}

package/dist/Theme.d.ts

@@ -0,0 +1,56 @@
+import { ITheme, IThemeParts, IScopeStylesParts, MergeThemeArgs, ThemeArgs } from "./types";
+import { ScopeStylesBuilder } from "./ScopeStyles";
+import { BaseStyles } from "./BaseStyles";
+export type ThemeCSSClass = keyof ITheme['classes'];
+export type ThemeClassList = Partial<Record<ThemeCSSClass, boolean | undefined>>;
+export declare function createTheme<Colors extends string = never, Sizes extends string = never, Paddings extends string = never, Margins extends string = never, Borders extends string = never, Layouts extends string = never, Backgrounds extends string = never, Typography extends string = never, Shadows extends string = never, Vars extends string = never, Classes extends string = never, Variants extends Record<string, Record<string, any>> = Record<string, never>>(themeParts: IThemeParts<{
+    colors: Colors;
+    sizes: Sizes;
+    paddings: Paddings;
+    margins: Margins;
+    borders: Borders;
+    backgrounds: Backgrounds;
+    layouts: Layouts;
+    typography: Typography;
+    shadows: Shadows;
+    vars: Vars;
+    classes: Classes;
+    variants: Variants;
+}>): ThemeBuilder<{
+    colors: Colors;
+    sizes: Sizes;
+    paddings: Paddings;
+    margins: Margins;
+    borders: Borders;
+    backgrounds: Backgrounds;
+    layouts: Layouts;
+    typography: Typography;
+    shadows: Shadows;
+    vars: Vars;
+    classes: Classes;
+    variants: Variants;
+}>;
+export declare class ThemeBuilder<A extends ThemeArgs> extends BaseStyles<A> {
+    constructor(themeParts: IThemeParts<A>);
+    declareScope<P extends IScopeStylesParts<any> & {
+        class: string;
+        scopeStart?: string;
+        scopeEnd?: string;
+    }>(parts: P): ScopeStylesBuilder<MergeThemeArgs<A, P>, MergeThemeArgs<A, P>['variants']>;
+    declareScope<P extends (theme: ThemeBuilder<A>) => IScopeStylesParts<any> & {
+        scopeStart: string;
+        scopeEnd?: string;
+    }>(parts: P): ScopeStylesBuilder<MergeThemeArgs<A, ReturnType<P>>, MergeThemeArgs<A, ReturnType<P>>['variants']>;
+    add<P extends IThemeParts<any>>(parts: P): ThemeBuilder<MergeThemeArgs<A, P>>;
+    add<P extends (theme: ThemeBuilder<A>) => IThemeParts<any>>(parts: P): ThemeBuilder<MergeThemeArgs<A, ReturnType<P>>>;
+    render(): ThemePublic<A>;
+}
+export type ThemePublic<A extends ThemeArgs> = {
+    declareScope: ThemeBuilder<A>['declareScope'];
+    colors: A['colors'] extends string ? Record<A['colors'], string> : Record<string, string>;
+    vars: A['vars'] extends string ? Record<A['vars'], string> : Record<string, string>;
+    classes: A['classes'] extends string ? Record<A['classes'], string> : Record<string, string>;
+};
+export declare class Theme<A extends ThemeArgs> extends BaseStyles<A> {
+    declareScope: ThemeBuilder<A>['declareScope'];
+}

package/dist/Theme.js

@@ -0,0 +1,29 @@
+import { ScopeStylesBuilder } from "./ScopeStyles";
+import { BaseStyles } from "./BaseStyles";
+export function createTheme(themeParts) {
+    let theme = new ThemeBuilder(themeParts);
+    return theme;
+}
+export class ThemeBuilder extends BaseStyles {
+    constructor(themeParts) {
+        super({ ...themeParts });
+    }
+    declareScope(partsOrLambda) {
+        const resolved = (typeof partsOrLambda === 'function') ? partsOrLambda(this) : partsOrLambda;
+        return new ScopeStylesBuilder(this, { ...resolved });
+    }
+    add(parts) {
+        if (typeof parts === 'function')
+            parts = parts(this);
+        super.add(parts);
+        return this;
+    }
+    render() {
+        super.render();
+        let result = this;
+        return result;
+    }
+}
+export class Theme extends BaseStyles {
+    declareScope;
+}

package/dist/Tone.d.ts

@@ -0,0 +1 @@
+export type Tone = 'primary' | 'secondary' | 'accent' | 'success' | 'warning' | 'danger' | 'info';

package/dist/Tone.js

@@ -0,0 +1 @@
+export {};

package/dist/index.d.ts

@@ -0,0 +1 @@
+export * from "./Theme";

package/dist/index.js

@@ -0,0 +1 @@
+export * from "./Theme";

package/dist/index.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/index.test.js

@@ -0,0 +1,9 @@
+import { describe, it, expect } from 'vitest';
+import { createTheme } from './Theme';
+describe('createTheme', () => {
+    it('returns a theme object', () => {
+        const theme = createTheme({}).render();
+        expect(theme).toBeDefined();
+        expect(theme.classes).toStrictEqual({});
+    });
+});

package/dist/props.d.ts

@@ -0,0 +1,7 @@
+import { IDivProps } from "./HTML";
+export declare function prepareProps<T extends IDivProps = IDivProps>(propsIn: T, styles?: {
+    variants?: Record<string, any>;
+    class?: string;
+}): Record<string, any>;
+export declare function completeProps(propsIn: Record<string, any>): Record<string, any>;
+export declare function Elt(tag: string, props: Record<string, any>, children?: any[]): string;

package/dist/props.js

@@ -0,0 +1,104 @@
+function classListToRecord(classList) {
+    const result = {};
+    if (!classList)
+        return result;
+    if (Array.isArray(classList)) {
+        for (const item of classList) {
+            if (!item)
+                continue;
+            if (typeof item === 'string') {
+                result[item] = true;
+            }
+            else if (typeof item === 'object') {
+                Object.assign(result, item);
+            }
+        }
+    }
+    else if (typeof classList === 'string') {
+        result[classList] = true;
+    }
+    else {
+        Object.assign(result, classList);
+    }
+    return result;
+}
+// Normalizes classes and variants. User code can intercept between prepareProps/completeProps to add classes.
+export function prepareProps(propsIn, styles) {
+    const classRecord = classListToRecord(propsIn.class);
+    const dataAttrs = {};
+    if (styles?.class) {
+        classRecord[styles.class] = true;
+    }
+    // Apply variants as attributes, use 'default' value if not provided
+    if (styles?.variants) {
+        for (const variantKey of Object.keys(styles.variants)) {
+            let variantValue = propsIn[variantKey];
+            if (variantValue === undefined) {
+                const variantGroup = styles.variants[variantKey];
+                if (variantGroup && 'default' in variantGroup) {
+                    variantValue = 'default';
+                }
+            }
+            if (variantValue !== undefined) {
+                dataAttrs[variantKey] = variantValue;
+            }
+        }
+    }
+    return {
+        __prepared: true,
+        style: styleToString(propsIn.style),
+        class: classRecord,
+        ...dataAttrs,
+    };
+}
+// Converts classRecord to space-separated string
+export function completeProps(propsIn) {
+    if (!('__prepared' in propsIn)) {
+        propsIn = prepareProps(propsIn);
+    }
+    delete propsIn.__prepared;
+    if (typeof propsIn.class === 'object') {
+        propsIn.class = Object.entries(propsIn.class)
+            .filter(([_, value]) => value)
+            .map(([key]) => key)
+            .join(' ');
+    }
+    return propsIn;
+}
+function styleToString(styles) {
+    if (!styles)
+        return undefined;
+    let result = '';
+    for (const [key, value] of Object.entries(styles)) {
+        if (value !== undefined) {
+            const cssKey = key.replace(/[A-Z]/g, m => '-' + m.toLowerCase());
+            result += `${cssKey}: ${value}; `;
+        }
+    }
+    return result || undefined;
+}
+export function Elt(tag, props, children) {
+    const finalProps = completeProps(props);
+    const escapeAttr = (s) => s.replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+    const attrs = Object.entries(finalProps)
+        .map(([k, v]) => {
+        if (v === undefined || v === null)
+            return '';
+        if (k === 'children')
+            return '';
+        if (typeof v === 'boolean')
+            return v ? `${k}` : '';
+        return `${k}="${escapeAttr(String(v))}"`;
+    })
+        .filter(Boolean)
+        .join(' ');
+    const renderChildren = (c) => {
+        if (c === undefined || c === null)
+            return '';
+        if (Array.isArray(c))
+            return c.map(renderChildren).join('');
+        return String(c);
+    };
+    const childrenStr = renderChildren(children);
+    return `<${tag}${attrs ? ' ' + attrs : ''}>${childrenStr}</${tag}>`;
+}