unframer 2.2.2 → 2.4.0

package/esm/react.d.ts

@@ -1,6 +1,6 @@
 import { ComponentType } from 'react';
-import { breakpointSizes } from './css.js';
-export type UnframerBreakpoint = keyof typeof breakpointSizes;
+import { defaultBreakpointSizes } from './css.js';
+export type UnframerBreakpoint = keyof typeof defaultBreakpointSizes;
 /**
  * @deprecated Use styles.css import instead
  */

package/esm/react.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../src/react.tsx"],"names":[],"mappings":"AAGA,OAAO,EAEH,aAAa,EAKhB,MAAM,OAAO,CAAA;AACd,OAAO,EAAE,eAAe,EAAqC,MAAM,UAAU,CAAA;AAW7E,MAAM,MAAM,kBAAkB,GAAG,MAAM,OAAO,eAAe,CAAA;AA+B7D;;GAEG;AACH,wBAAgB,YAAY,CAAC,EAAE,UAAwB,EAAE;;CAAA,GAAG,GAAG,CAiD9D;AAED,eAAO,MAAM,qBAAqB;;kBACM,GAAG;;;;;cAAH,GAAG;;uDA2EzC,CAAA"}
+{"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../src/react.tsx"],"names":[],"mappings":"AAGA,OAAO,EAEH,aAAa,EAKhB,MAAM,OAAO,CAAA;AACd,OAAO,EAEH,sBAAsB,EAEzB,MAAM,UAAU,CAAA;AAWjB,MAAM,MAAM,kBAAkB,GAAG,MAAM,OAAO,sBAAsB,CAAA;AA8BpE;;GAEG;AACH,wBAAgB,YAAY,CAAC,EAAE,UAAwB,EAAE;;CAAA,GAAG,GAAG,CAmD9D;AAED,eAAO,MAAM,qBAAqB;;kBACM,GAAG;;;;;cAAH,GAAG;;uDA2EzC,CAAA"}

package/esm/react.js

@@ -13,14 +13,14 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { combinedCSSRules } from './framer';
 import { forwardRef, useId, useMemo, useSyncExternalStore, } from 'react';
-import { breakpointSizes, breakpointsStyles, getFontsStyles } from './css.js';
+import { breakpointsStyles, defaultBreakpointSizes, getFontsStyles, } from './css.js';
 function classNames(...args) {
     return args.filter(Boolean).join(' ');
 }
 // breakpoints from the higher to the lower
-const defaultBreakpoints = Object.keys(breakpointSizes).reverse();
+const defaultBreakpoints = Object.keys(defaultBreakpointSizes).reverse();
 function getBreakpointNameFromWindowWidth(windowWidth) {
-    return defaultBreakpoints.find((name) => windowWidth >= breakpointSizes[name]);
+    return defaultBreakpoints.find((name) => windowWidth >= defaultBreakpointSizes[name]);
 }
 function fillBreakpoints(breakpoints) {
     const breakpointsOrder = ['base', 'sm', 'md', 'lg', 'xl', '2xl'];
@@ -43,7 +43,9 @@ const nothing = () => {
  */
 export function FramerStyles({ Components = [] }) {
     const isClient = useSyncExternalStore(nothing, () => true, () => false);
-    const breakpoints = (_jsx("style", { dangerouslySetInnerHTML: { __html: breakpointsStyles }, suppressHydrationWarning: true, hidden: true }, 'breakpointsStyles'));
+    const breakpoints = (_jsx("style", { dangerouslySetInnerHTML: {
+            __html: breakpointsStyles(defaultBreakpointSizes),
+        }, suppressHydrationWarning: true, hidden: true }, 'breakpointsStyles'));
     const fonts = (_jsx("style", { dangerouslySetInnerHTML: {
             __html: getFontsStyles(Components.map((x) => x.fonts || []).flat()),
         }, suppressHydrationWarning: true, hidden: true }, 'fonts'));

package/esm/react.js.map

@@ -1 +1 @@
-{"version":3,"file":"react.js","sourceRoot":"","sources":["../src/react.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"react.js","sourceRoot":"","sources":["../src/react.tsx"],"names":[],"mappings":"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"}

package/esm/utils.d.ts

@@ -1,5 +1,6 @@
 export declare const logger: {
     log(...args: any[]): void;
+    green(...args: any[]): void;
     error(...args: any[]): void;
 };
 //# sourceMappingURL=utils.d.ts.map

package/esm/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,MAAM;;;CAOlB,CAAA"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,MAAM;;;;CAUlB,CAAA"}

package/esm/utils.js

@@ -4,6 +4,9 @@ export const logger = {
     log(...args) {
         console.log(prefix, ...args);
     },
+    green(...args) {
+        console.log([prefix, ...args].map((x) => pico.green(x)).join(' '));
+    },
     error(...args) {
         console.error([prefix, ...args].map((x) => pico.red(x)).join(' '));
     },

package/esm/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,YAAY,CAAA;AAE7B,MAAM,MAAM,GAAG,YAAY,CAAA;AAC3B,MAAM,CAAC,MAAM,MAAM,GAAG;IAClB,GAAG,CAAC,GAAG,IAAI;QACP,OAAO,CAAC,GAAG,CAAC,MAAM,EAAE,GAAG,IAAI,CAAC,CAAA;IAChC,CAAC;IACD,KAAK,CAAC,GAAG,IAAI;QACT,OAAO,CAAC,KAAK,CAAC,CAAC,MAAM,EAAE,GAAG,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAA;IACtE,CAAC;CACJ,CAAA"}
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,YAAY,CAAA;AAE7B,MAAM,MAAM,GAAG,YAAY,CAAA;AAC3B,MAAM,CAAC,MAAM,MAAM,GAAG;IAClB,GAAG,CAAC,GAAG,IAAI;QACP,OAAO,CAAC,GAAG,CAAC,MAAM,EAAE,GAAG,IAAI,CAAC,CAAA;IAChC,CAAC;IACD,KAAK,CAAC,GAAG,IAAI;QACT,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,GAAG,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAA;IACtE,CAAC;IACD,KAAK,CAAC,GAAG,IAAI;QACT,OAAO,CAAC,KAAK,CAAC,CAAC,MAAM,EAAE,GAAG,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAA;IACtE,CAAC;CACJ,CAAA"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "unframer",
-  "version": "2.2.2",
-  "description": "",
+  "version": "2.4.0",
+  "description": "Import Framer components directly in your React app, type safe and customizable",
   "sideEffects": false,
   "repository": "https://github.com/remorses/unframer",
   "bin": "bin.js",
@@ -44,16 +44,27 @@
     "json5": "^2.2.3",
     "native-fetch": "^4.0.2",
     "picocolors": "^1.0.0",
-    "real-framer-motion": "npm:framer-motion@11.0.14",
+    "real-framer-motion": "npm:framer-motion@11.1.7",
     "tmp": "^0.2.1"
   },
   "devDependencies": {
+    "@babel/core": "^7.24.5",
+    "@babel/helper-annotate-as-pure": "^7.22.5",
+    "@babel/helper-environment-visitor": "^7.22.20",
+    "@babel/helper-split-export-declaration": "^7.24.5",
+    "@babel/plugin-transform-react-pure-annotations": "^7.24.1",
+    "@babel/traverse": "^7.24.5",
+    "@babel/types": "^7.24.5",
+    "@types/babel__core": "^7.20.5",
+    "@types/babel__traverse": "^7.20.5",
     "@types/fs-extra": "^11.0.1",
     "@types/node": "^20.5.7",
     "@xmorse/deployment-utils": "^0.1.0",
+    "openai": "^4.40.2",
     "posthtml": "^0.16.6",
     "react": "^18.3.0",
-    "react-dom": "^18.3.0"
+    "react-dom": "^18.3.0",
+    "tiktoken": "^1.0.14"
   },
   "scripts": {
     "build": "rm -rf dist && tsc -m esnext --outDir esm && tsc && cp ../README.md ./README.md && cp ./src/framer.d.ts ./dist/framer.d.ts && cp ./src/framer.d.ts ./esm/framer.d.ts",

package/src/cli.tsx

@@ -6,34 +6,42 @@ import chokidar from 'chokidar'
 import fs from 'fs-extra'
 import findUp from 'find-up'
 import tmp from 'tmp'
-import path from 'path'
-const configName = 'unframer.json'
+import path, { basename } from 'path'
+const configNames = ['unframer.config.json', 'unframer.json']
 import { cac } from 'cac'
 import { logger } from './utils.js'
+import { BreakpointSizes } from './css.js'
 
 export const cli = cac()
 
 cli.command('', 'Run unframer')
-    .option('--watch', 'Watch for Framer and unframer.json changes')
+    .option('--watch', 'Watch for Framer and unframer.config.json changes')
     .action(async function main(options) {
+        fixOldUnframerPath()
         const cwd = process.cwd()
         const watch = process.argv.includes('--watch')
-        logger.log(`Looking for ${configName} in ${cwd}`)
-        const configPath = await findUp([configName], { cwd })
+        logger.log(`Looking for ${configNames.join(', ')} in ${cwd}`)
+        const configPath = await findUp(configNames, { cwd })
         if (!configPath) {
-            logger.log(`No ${configName} found`)
+            logger.log(`No ${configNames.join(', ')} found`)
             return
         }
+        let configBasename = basename(configPath!)
         const configContent = fs.readFileSync(configPath, 'utf8')
         if (!configContent) {
-            logger.log(`No ${configName} contents found`)
+            logger.log(`No ${configBasename} contents found`)
             return
         }
         let config = JSON.parse(configContent)
 
         let controller = new AbortController()
         setMaxListeners(0, controller.signal)
-        processConfig({ config, watch, signal: controller.signal })
+        processConfig({
+            config,
+            watch,
+            signal: controller.signal,
+            configBasename,
+        })
         if (!watch) {
             return
         }
@@ -43,7 +51,7 @@ cli.command('', 'Run unframer')
         })
 
         watcher.on('change', async (path) => {
-            logger.log(`${configName} changed`)
+            logger.log(`${configBasename} changed`)
             console.log()
             controller.abort()
 
@@ -54,7 +62,7 @@ cli.command('', 'Run unframer')
                 fs.readFileSync(configPath!, 'utf8'),
             )
             if (!newConfig) {
-                logger.log(`Invalid ${configName} file`)
+                logger.log(`Invalid ${configBasename} file`)
                 return
             }
             const newNames = getNewNames(config, newConfig)
@@ -66,6 +74,7 @@ cli.command('', 'Run unframer')
                         components: pluck(newConfig.components, newNames),
                     },
                     watch,
+                    configBasename,
                     // signal: controller.signal,
                 })
             }
@@ -83,11 +92,29 @@ const defaultConfig = `{
 }
 `
 
-cli.command('init', 'Init the unframer.json config').action(async (options) => {
-    fs.writeFileSync(`unframer.json`, defaultConfig)
-    const p = path.resolve(process.cwd(), 'unframer.json')
-    console.log(`${p} file created`)
-})
+function fixOldUnframerPath() {
+    // if unframer.json exists, rename it to unframer.config.json
+
+    const oldConfigPath = fs.existsSync('unframer.json')
+    if (oldConfigPath) {
+        fs.renameSync('unframer.json', 'unframer.config.json')
+        logger.green('legacy unframer.json config renamed to unframer.config.json')
+        return true
+    }
+    return false
+}
+
+cli.command('init', 'Init the unframer.config.json config').action(
+    async (options) => {
+        let fixed = fixOldUnframerPath()
+        if (fixed) {
+            return
+        }
+        fs.writeFileSync(`unframer.config.json`, defaultConfig)
+        const p = path.resolve(process.cwd(), 'unframer.config.json')
+        console.log(`${p} file created`)
+    },
+)
 
 cli.help()
 
@@ -123,27 +150,31 @@ type Config = {
     components: {
         [name: string]: string
     }
+    breakpoints?: BreakpointSizes
     outDir?: string
 }
 async function processConfig({
     config,
     watch,
     signal,
+    configBasename,
 }: {
     config: Config
     watch: boolean
+    configBasename: string
     signal?: AbortSignal
 }) {
     try {
-        const { components, outDir } = config || {}
+        const { components, breakpoints, outDir } = config || {}
         const installDir = path.resolve(process.cwd(), outDir || 'framer')
         if (!components) {
-            logger.log(`No components found in ${configName}`)
+            logger.log(`No components found in ${configBasename}`)
             return
         }
 
         await bundle({
             components,
+            breakpoints,
             cwd: installDir,
             watch,
             signal,

package/src/css.ts

@@ -1,15 +1,6 @@
 import dedent from 'dedent'
 import { ComponentFont } from './framer.js'
 
-export const breakpointSizes = {
-    base: 0,
-    sm: 320,
-    md: 768,
-    lg: 960,
-    xl: 1200,
-    '2xl': 1536,
-} as const
-
 function deduplicateByKey<T>(arr: T[], key: (k: T) => string): T[] {
     let map = new Map()
     for (let item of arr) {
@@ -121,11 +112,24 @@ export function getFontsStyles(_fontsDefs: ComponentFontBundle[]) {
     return str
 }
 
-export const breakpointsStyles = /* css */ `
+export const defaultBreakpointSizes = {
+    base: 0,
+    sm: 320,
+    md: 768,
+    lg: 960,
+    xl: 1200,
+    '2xl': 1536,
+} as const
+
+export type BreakpointSizes = typeof defaultBreakpointSizes
+
+export const breakpointsStyles = (breakpointSizes?: BreakpointSizes) => {
+    breakpointSizes = { ...defaultBreakpointSizes, ...breakpointSizes }
+    return /* css */ `
 /* Base */
 @media (min-width: ${breakpointSizes.base}px) and (max-width: ${
-    breakpointSizes.sm - 1
-}px) {
+        breakpointSizes.sm - 1
+    }px) {
     .unframer-hidden.unframer-base { 
         display: contents;
     }
@@ -133,8 +137,8 @@ export const breakpointsStyles = /* css */ `
 
 /* Small */
 @media (min-width: ${breakpointSizes.sm}px) and (max-width: ${
-    breakpointSizes.md - 1
-}px) {
+        breakpointSizes.md - 1
+    }px) {
     .unframer-hidden.unframer-sm { 
         display: contents;
     }
@@ -142,8 +146,8 @@ export const breakpointsStyles = /* css */ `
 
 /* Medium */
 @media (min-width: ${breakpointSizes.md}px) and (max-width: ${
-    breakpointSizes.lg - 1
-}px) {
+        breakpointSizes.lg - 1
+    }px) {
     .unframer-hidden.unframer-md { 
         display: contents;
     }
@@ -151,8 +155,8 @@ export const breakpointsStyles = /* css */ `
 
 /* Large */
 @media (min-width: ${breakpointSizes.lg}px) and (max-width: ${
-    breakpointSizes.xl - 1
-}px) {
+        breakpointSizes.xl - 1
+    }px) {
     .unframer-hidden.unframer-lg { 
         display: contents;
     }
@@ -160,8 +164,8 @@ export const breakpointsStyles = /* css */ `
 
 /* Extra Large */
 @media (min-width: ${breakpointSizes.xl}px) and (max-width: ${
-    breakpointSizes['2xl'] - 1
-}px) {
+        breakpointSizes['2xl'] - 1
+    }px) {
     .unframer-hidden.unframer-xl { 
         display: contents;
     }
@@ -178,6 +182,7 @@ export const breakpointsStyles = /* css */ `
     display: none;
 }
 `
+}
 
 export function groupBy<T>(arr: T[], key: (x: T) => string) {
     const map = new Map<string, T[]>()

package/src/exporter.ts

@@ -19,6 +19,7 @@ import fs from 'fs'
 import path from 'path'
 import { exec, execSync } from 'child_process'
 import {
+    BreakpointSizes,
     ComponentFontBundle,
     breakpointsStyles,
     getFontsStyles,
@@ -45,6 +46,7 @@ export async function bundle({
     cwd: out = '',
     watch = false,
     components = {} as Record<string, string>,
+    breakpoints = {} as BreakpointSizes,
     signal = undefined as AbortSignal | undefined,
 }) {
     out ||= path.resolve(process.cwd(), 'example')
@@ -220,7 +222,7 @@ export async function bundle({
 
         const cssString =
             '/* This css file has all the necessary styles to run all your components */\n' +
-            breakpointsStyles +
+            breakpointsStyles(breakpoints) +
             '\n\n' +
             combinedCSSRules
                 .map((x) => (x?.startsWith('  ') ? dedent(x) : x))