eddev 0.3.35 → 2.0.0-beta.1

package/dist/app/lib/legacy-stitches/createStitches.js

@@ -0,0 +1,439 @@
+import { createStitches as createBaseStitches } from "../../../../stitches-archive";
+const typeKeyMap = {
+    fontSize: "fontSizes",
+    fontFamily: "fonts",
+    lineHeight: "lineHeights",
+    letterSpacing: "letterSpacings",
+    fontWeight: "fontWeights",
+};
+export function parseBreakpoints(names, medias) {
+    const breakpoints = [];
+    // Add an initial breakpoint
+    breakpoints.push({ key: "initial", min: "0px", max: null });
+    // Parse each breakpoint
+    for (const key in medias) {
+        if (!names.includes(key))
+            continue;
+        const media = medias[key];
+        const minMatch = media.match(/min-width: ([0-9]+[a-z]+)/);
+        const maxMatch = media.match(/max-width: ([0-9]+[a-z]+)/);
+        if (!minMatch && !maxMatch)
+            continue;
+        breakpoints.push({
+            key,
+            min: minMatch ? minMatch[1] : null,
+            max: maxMatch ? maxMatch[1] : null,
+        });
+    }
+    // Ensure each breakpoint has a min/max value (except for first and last)
+    for (let i = 0; i < breakpoints.length; i++) {
+        const bp = breakpoints[i];
+        const prev = breakpoints[i - 1];
+        const next = breakpoints[i + 1];
+        if (bp.min === null && prev && prev.max) {
+            bp.min = prev.max;
+        }
+        if (bp.max === null && next && next.min) {
+            bp.max = next.min;
+        }
+    }
+    return breakpoints;
+}
+const unitless = (value) => parseFloat(value);
+function parseTypography(theme, breakpoints, typography) {
+    const globals = {};
+    const typeVariants = {};
+    breakpoints.forEach((bp) => (globals["@" + bp.key] = {}));
+    globals["@editor"] = {};
+    const resolveValue = (scale, value) => {
+        if (typeof value === "string" && value.match(/^\$[a-z0-9\-\_]+$/)) {
+            // Single scale
+            return theme[scale][value.replace("$", "")];
+        }
+        else {
+            return value;
+        }
+    };
+    const resolveThemeVar = (scale, value) => {
+        if (typeof value === "string" && value.match(/^\$[a-z0-9\-\_]+$/)) {
+            // Single scale
+            return "$" + scale + value;
+        }
+        else {
+            return value;
+        }
+    };
+    for (const name in typography) {
+        const style = typography[name];
+        const variant = {};
+        typeVariants[name] = variant;
+        for (const key in style) {
+            const value = style[key];
+            const varName = `--type-${name}-${key}`;
+            variant[key] = `var(${varName})`;
+            const tokenPrefix = typeKeyMap[key];
+            if (typeof value === "string" || typeof value === "number") {
+                // A simple string or number value is used
+                globals["@initial"][varName] = resolveThemeVar(tokenPrefix, value);
+            }
+            else if (value && typeof value === "object") {
+                // A responsive object value
+                const unit = key === "lineHeight" ? "%" : "px";
+                const [tokenGlobals, initial] = getResponsiveObjectStyles(breakpoints, value, varName, unit);
+                for (const key in tokenGlobals) {
+                    globals[key] = { ...globals[key], ...tokenGlobals[key] };
+                }
+                // const entries = Object.entries(value)
+                // entries.forEach(([bpName, responsiveValue], i) => {
+                //   if (Array.isArray(responsiveValue)) {
+                //     responsiveValue = responsiveValue[0]
+                //     // An array in the format [value] signifies font locking between the current breakpoint and the next defined one
+                //     const minSize = breakpoints.find((bp) => "@" + bp.key === bpName)?.min
+                //     const nextBreakpoint = breakpoints.find((bp) => "@" + bp.key === entries[i + 1]?.[0])
+                //     if (!nextBreakpoint)
+                //       throw new Error(
+                //         `Cannot create responsive '${key}' for '${name}' at breakpoint '${bpName}', since it is the last-defined breakpoint. Your last size should be a string/number/token.`
+                //       )
+                //     const maxSize = nextBreakpoint.min
+                //     let responsiveValue2 = (value as any)["@" + nextBreakpoint.key]
+                //     if (Array.isArray(responsiveValue2)) responsiveValue2 = responsiveValue2[0]
+                //     let size1 = resolveValue(tokenPrefix, responsiveValue)
+                //     let size2 = resolveValue(tokenPrefix, responsiveValue2)
+                //     responsiveValue = `calc(${size1} + (100vw - ${minSize}) / (${unitless(maxSize)} - ${unitless(
+                //       minSize
+                //     )}) * (${unitless(size2)} - ${unitless(size1)}))`
+                //   }
+                //   globals[bpName][varName] = responsiveValue
+                // })
+            }
+        }
+    }
+    return { globalTypography: globals, typeVariants };
+}
+function parseGrid(theme, media, grid) {
+    const globalGrid = {};
+    const resolveThemeVar = (scale, value) => {
+        if (typeof value === "string" && value.match(/^\$[a-z0-9\-\_]+$/)) {
+            // Single scale
+            return "$" + scale + value;
+        }
+        else {
+            return value;
+        }
+    };
+    for (let [bpName, breakpoint] of Object.entries(grid.breakpoints)) {
+        globalGrid[bpName] = {
+            "--grid-columns": grid.columns,
+            "--grid-outer-width": breakpoint.container,
+            "--grid-inner-width": `calc(${breakpoint.container} - ${resolveThemeVar("spaces", breakpoint.margin)} * 2)`,
+            "--grid-gutter": breakpoint.gutter,
+            "--grid-margin": breakpoint.margin,
+            "--grid-col-width": `calc((var(--grid-inner-width) - (${grid.columns - 1} * var(--grid-gutter))) / ${grid.columns})`,
+        };
+    }
+    return { gridVariants: {}, globalGrid };
+}
+function parseResponsiveValue(val) {
+    if (Array.isArray(val)) {
+        return {
+            ...parseResponsiveValue(val[0]),
+            lerpStart: true,
+        };
+    }
+    else if (typeof val === "string") {
+        if (val.match(/^x[0-9\.]+$/)) {
+            return {
+                lerpStart: false,
+                type: "multiplier",
+                value: parseFloat(val.replace(/^x/, "")),
+            };
+        }
+        else if (val.match(/^[0-9\.]+%$/)) {
+            return {
+                lerpStart: false,
+                type: "percent",
+                value: parseFloat(val.replace(/^x/, "")),
+            };
+        }
+        else if (val.match(/^[0-9\.]+px$/)) {
+            return {
+                lerpStart: false,
+                type: "px",
+                value: parseFloat(val.replace(/px$/, "")),
+            };
+        }
+    }
+    else if (typeof val === "number") {
+        return {
+            lerpStart: false,
+            type: "number",
+            value: val,
+        };
+    }
+    else if (val === undefined || val === null) {
+        return {
+            lerpStart: false,
+            type: "undefined",
+        };
+    }
+    return {
+        lerpStart: false,
+        type: "unknown",
+        value: val,
+    };
+}
+export function parseResponsiveObject(breakpoints, object) {
+    // Breakpoint hash
+    const breakpointHash = {};
+    for (let bp of breakpoints) {
+        breakpointHash[bp.key] = {
+            min: bp.min ? parseFloat(bp.min) : null,
+            max: bp.max ? parseFloat(bp.max) : null,
+        };
+    }
+    const result = [];
+    let lerpStart = "initial";
+    let lastDefined = "initial";
+    let concreteValues = {};
+    for (let bp of breakpoints) {
+        const value = parseResponsiveValue(object["@" + bp.key]);
+        const defined = value.type !== "undefined";
+        let base = !defined || value.type === "multiplier" ? lastDefined : bp.key;
+        lerpStart = value.lerpStart ? bp.key : lerpStart && !defined ? lerpStart : null;
+        if (value.type === "px" || value.type === "number") {
+            concreteValues[bp.key] = value.value;
+        }
+        else if (value.type === "multiplier") {
+            concreteValues[bp.key] = value.value * concreteValues[base];
+        }
+        else if (value.type === "percent") {
+            concreteValues[bp.key] = value.value;
+        }
+        result.push({
+            ...value,
+            defined: defined,
+            breakpoint: bp.key,
+            lastBreakpoint: lastDefined,
+            baseBreakpoint: base,
+            lerping: lerpStart
+                ? {
+                    fromBP: lerpStart,
+                    toBP: null,
+                    minMedia: 0,
+                    maxMedia: 0,
+                    minValue: 0,
+                    maxValue: 0,
+                }
+                : undefined,
+            concreteValue: concreteValues[bp.key],
+        });
+        if (defined) {
+            lastDefined = bp.key;
+        }
+    }
+    let nextBreakpoints = [];
+    let lastBreakpoint = null;
+    for (let i = breakpoints.length - 1; i >= 0; i--) {
+        const bp = breakpoints[i];
+        nextBreakpoints[i] = lastBreakpoint;
+        if (result[i].defined) {
+            lastBreakpoint = bp.key;
+        }
+    }
+    result.forEach((item, i) => {
+        if (item.lerping) {
+            item.lerping.toBP = nextBreakpoints[i];
+        }
+    });
+    result.forEach((item, i) => {
+        const lerp = item.lerping;
+        if (lerp) {
+            const fromBP = lerp.fromBP ? breakpointHash[lerp.fromBP] : null;
+            const toBP = lerp.toBP ? breakpointHash[lerp.toBP] : null;
+            if (!fromBP || fromBP.min === null) {
+                throw new Error(`Cannot create responsive style for first breakpoint`);
+            }
+            if (!toBP || toBP.min === null) {
+                throw new Error(`Cannot create responsive style for last breakpoint`);
+            }
+            lerp.minMedia = fromBP.min;
+            lerp.maxMedia = toBP.min;
+            lerp.minValue = item.concreteValue;
+            lerp.maxValue = result.find((o) => o.breakpoint === lerp.toBP).concreteValue;
+        }
+    });
+    return result;
+}
+export function getResponsiveObjectStyles(breakpoints, object, varName, unit = "px") {
+    // Prescale object
+    object = { ...object };
+    const parsed = parseResponsiveObject(breakpoints, object);
+    const globals = {};
+    for (let atom of parsed) {
+        if (atom.lerpStart && atom.lerping) {
+            const lerp = atom.lerping;
+            globals["@" + atom.breakpoint] = {
+                [varName]: `calc(${lerp.minValue}${unit} + (100vw - ${lerp.minMedia}${unit}) / (${lerp.maxMedia} - ${lerp.minMedia}) * (${lerp.maxValue} - ${lerp.minValue}))`,
+            };
+        }
+        else if (atom.concreteValue) {
+            globals["@" + atom.breakpoint] = {
+                [varName]: atom.concreteValue + unit,
+            };
+        }
+        else if (atom.defined) {
+            globals["@" + atom.breakpoint] = {
+                [varName]: atom.value,
+            };
+        }
+    }
+    return [globals, globals["@initial"]?.[varName]];
+}
+// parseResponsiveTokens({'@initial': blah, '@desktop': blah}, breakpoints, )
+export function parseResponsiveTokens(theme, breakpoints) {
+    const globalResponsive = {
+        "@initial": {},
+    };
+    const initialResponsive = {};
+    for (const scale in theme) {
+        const initials = {};
+        initialResponsive[scale] = initials;
+        for (const key in theme[scale]) {
+            const val = theme[scale][key];
+            if (val && typeof val === "object") {
+                const [tokenGlobals, initial] = getResponsiveObjectStyles(breakpoints, val, "--" + scale + "-" + key);
+                for (const bp in tokenGlobals) {
+                    globalResponsive[bp] = {
+                        ...globalResponsive[bp],
+                        ...tokenGlobals[bp],
+                    };
+                }
+                initials[key] = initial;
+            }
+            else {
+                initials[key] = val;
+            }
+        }
+    }
+    return { initialResponsive, globalResponsive };
+}
+export function createStitches(config) {
+    const breakpoints = parseBreakpoints(config.breakpoints, config.media);
+    const { typeVariants, globalTypography } = parseTypography(config.theme, breakpoints, config.typography);
+    const { gridVariants, globalGrid } = parseGrid(config.theme, config.media, config.grid);
+    const { initialResponsive, globalResponsive } = parseResponsiveTokens(config.responsive, breakpoints);
+    const stitches = createBaseStitches({
+        // prefix: config.prefix,
+        media: {
+            initial: "",
+            ...config.media,
+        },
+        theme: { ...config.theme, ...initialResponsive },
+        themeMap: config.themeMap,
+        utils: {
+            ...(config.utils || {}),
+            typography: (key) => typeVariants[key],
+            m: (value) => ({
+                margin: value,
+            }),
+            mt: (value) => ({
+                marginTop: value,
+            }),
+            mr: (value) => ({
+                marginRight: value,
+            }),
+            mb: (value) => ({
+                marginBottom: value,
+            }),
+            ml: (value) => ({
+                marginLeft: value,
+            }),
+            mx: (value) => ({
+                marginLeft: value,
+                marginRight: value,
+            }),
+            my: (value) => ({
+                marginTop: value,
+                marginBottom: value,
+            }),
+            p: (value) => ({
+                padding: value,
+            }),
+            pt: (value) => ({
+                paddingTop: value,
+            }),
+            pr: (value) => ({
+                paddingRight: value,
+            }),
+            pb: (value) => ({
+                paddingBottom: value,
+            }),
+            pl: (value) => ({
+                paddingLeft: value,
+            }),
+            px: (value) => ({
+                paddingLeft: value,
+                paddingRight: value,
+            }),
+            py: (value) => ({
+                paddingTop: value,
+                paddingBottom: value,
+            }),
+            cols: (value) => ({
+                gridColumn: `auto / span ${value}`,
+                "--grid-columns": value,
+            }),
+        },
+    });
+    // Typography globals
+    const typeGlobals = {};
+    Object.entries(globalTypography).forEach(([key, styles]) => {
+        if (key === "@initial") {
+            typeGlobals[":root"] = styles;
+        }
+        else if (key === "@editor") {
+            typeGlobals[":root body.block-editor-page"] = styles;
+        }
+        else {
+            typeGlobals[key] = { ":root": styles };
+        }
+    });
+    stitches.globalCss(typeGlobals)();
+    // Grid globals
+    const gridGlobals = {};
+    Object.entries(globalGrid).forEach(([key, styles]) => {
+        if (key === "@initial") {
+            gridGlobals[":root"] = styles;
+        }
+        else if (key === "@editor") {
+            gridGlobals[":root body.block-editor-page"] = styles;
+        }
+        else {
+            gridGlobals[key] = { ":root": styles };
+        }
+    });
+    stitches.globalCss(gridGlobals)();
+    const responsiveGlobals = {};
+    Object.entries(globalResponsive).forEach(([key, styles]) => {
+        if (key === "@initial") {
+            responsiveGlobals[":root"] = styles;
+        }
+        else if (key === "@editor") {
+            responsiveGlobals[":root body.block-editor-page"] = styles;
+        }
+        else {
+            responsiveGlobals[key] = { ":root": styles };
+        }
+    });
+    stitches.globalCss(responsiveGlobals)();
+    const responsiveTokens = {};
+    return {
+        ...stitches,
+        originalConfig: config,
+        breakpoints,
+        typeVariants,
+        gridVariants,
+        responsiveTokens,
+        responsiveGlobals,
+    };
+}

package/dist/app/lib/legacy-stitches/index.js

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

package/{components → dist/app/lib/routing/components}/BrowserRouter.d.ts

@@ -1,6 +1,4 @@
-import { ReactNode } from "react";
-declare type Props = {
-    children: ReactNode;
-};
+import { PropsWithChildren } from "react";
+type Props = PropsWithChildren<{}>;
 export declare function BrowserRouter(props: Props): import("react/jsx-runtime").JSX.Element;
 export {};