diff --git a/.eslintcache b/.eslintcache deleted file mode 100644 index adc3e82c..00000000 --- a/.eslintcache +++ /dev/null @@ -1 +0,0 @@ -[{"/Users/eugene/github/wow-design-system/packages/theme/src/radius.ts":"1","/Users/eugene/github/wow-design-system/packages/wow-tokens/src/radius.ts":"2","/Users/eugene/github/wow-design-system/packages/wow-tokens/src/space.ts":"3","/Users/eugene/github/wow-design-system/packages/wow-tokens/src/stroke.ts":"4","/Users/eugene/github/wow-design-system/packages/wow-tokens/src/index.ts":"5","/Users/eugene/github/wow-design-system/apps/wow-docs/app/page.tsx":"6","/Users/eugene/github/wow-design-system/packages/theme/src/color.ts":"7","/Users/eugene/github/wow-design-system/packages/theme/src/index.ts":"8","/Users/eugene/github/wow-design-system/packages/theme/src/space.ts":"9","/Users/eugene/github/wow-design-system/packages/theme/src/stroke.ts":"10"},{"size":265,"mtime":1716905895550,"results":"11","hashOfConfig":"12"},{"size":138,"mtime":1716308900598,"results":"13","hashOfConfig":"12"},{"size":329,"mtime":1716309048289,"results":"14","hashOfConfig":"12"},{"size":127,"mtime":1716441452591,"results":"15","hashOfConfig":"12"},{"size":199,"mtime":1716309348694,"results":"16","hashOfConfig":"12"},{"size":438,"mtime":1716445270763,"results":"17","hashOfConfig":"12"},{"size":4454,"mtime":1716439721653,"results":"18","hashOfConfig":"12"},{"size":376,"mtime":1716444728791,"results":"19","hashOfConfig":"12"},{"size":395,"mtime":1716905910282,"results":"20","hashOfConfig":"12"},{"size":357,"mtime":1716444790902,"results":"21","hashOfConfig":"12"},{"filePath":"22","messages":"23","suppressedMessages":"24","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"8oyd96",{"filePath":"25","messages":"26","suppressedMessages":"27","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"28","messages":"29","suppressedMessages":"30","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"31","messages":"32","suppressedMessages":"33","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"34","messages":"35","suppressedMessages":"36","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"37","messages":"38","suppressedMessages":"39","errorCount":0,"fatalErrorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"40","messages":"41","suppressedMessages":"42","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"43","messages":"44","suppressedMessages":"45","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"46","messages":"47","suppressedMessages":"48","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"49","messages":"50","suppressedMessages":"51","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/Users/eugene/github/wow-design-system/packages/theme/src/radius.ts",[],[],"/Users/eugene/github/wow-design-system/packages/wow-tokens/src/radius.ts",[],[],"/Users/eugene/github/wow-design-system/packages/wow-tokens/src/space.ts",[],[],"/Users/eugene/github/wow-design-system/packages/wow-tokens/src/stroke.ts",[],[],"/Users/eugene/github/wow-design-system/packages/wow-tokens/src/index.ts",[],[],"/Users/eugene/github/wow-design-system/apps/wow-docs/app/page.tsx",["52"],[],"/Users/eugene/github/wow-design-system/packages/theme/src/color.ts",[],[],"/Users/eugene/github/wow-design-system/packages/theme/src/index.ts",[],[],"/Users/eugene/github/wow-design-system/packages/theme/src/space.ts",[],[],"/Users/eugene/github/wow-design-system/packages/theme/src/stroke.ts",[],[],{"ruleId":"53","severity":1,"message":"54","line":1,"column":21,"nodeType":"55","endLine":1,"endColumn":45},"import/no-unresolved","Unable to resolve path to module '@styled-system/css/css'.","Literal"] \ No newline at end of file diff --git a/.eslintrc.js b/.eslintrc.js index f65e8150..d8858f34 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -28,6 +28,7 @@ module.exports = { globals: { React: true, JSX: true, + console: true, }, env: { browser: true, diff --git a/package.json b/package.json index 148fb3b0..0d29aa39 100644 --- a/package.json +++ b/package.json @@ -26,13 +26,13 @@ "@changesets/changelog-git": "^0.2.0", "@changesets/cli": "^2.27.1", "@pandacss/dev": "^0.39.0", + "@rollup/plugin-alias": "^5.1.0", "@rollup/plugin-babel": "^6.0.4", "@rollup/plugin-commonjs": "^25.0.7", "@rollup/plugin-json": "^6.1.0", "@rollup/plugin-node-resolve": "^15.2.3", "@rollup/plugin-terser": "^0.4.4", "@rollup/plugin-url": "^8.0.2", - "@svgr/rollup": "^8.1.0", "@testing-library/jest-dom": "^6.4.5", "@testing-library/react": "^15.0.7", "@testing-library/user-event": "^14.5.2", @@ -69,11 +69,13 @@ "rollup-plugin-peer-deps-external": "^2.2.4", "rollup-plugin-preserve-directives": "^0.4.0", "shared-config": "workspace:^", - "theme": "workspace:*", + "theme": "workspace:^", "ts-jest": "^29.1.2", "ts-node": "^10.9.2", + "tsx": "^4.11.0", "turbo": "latest", - "typescript": "^5.3.3" + "typescript": "^5.3.3", + "wowds-tokens": "workspace:^" }, "packageManager": "pnpm@8.9.0", "engines": { diff --git a/packages/wow-ui/src/scripts/generateBuildConfig.ts b/packages/scripts/generateBuildConfig.ts similarity index 93% rename from packages/wow-ui/src/scripts/generateBuildConfig.ts rename to packages/scripts/generateBuildConfig.ts index 01528600..55749eb9 100644 --- a/packages/wow-ui/src/scripts/generateBuildConfig.ts +++ b/packages/scripts/generateBuildConfig.ts @@ -1,7 +1,8 @@ import { promises as fs } from "fs"; -import packageJSON from "package.json"; import path from "path"; +import packageJSON from "../wow-ui/package.json"; + type ExportItem = | { types: string; @@ -13,8 +14,6 @@ type ExportObject = { [key: string]: ExportItem }; type EntryFileObject = { [key: string]: string }; const COMPONENT_PATH = "./src/components"; -const ROLLUP_CONFIG_PATH = "rollup.config.js"; -const PACKAGEJSON_PATH = "package.json"; const generateExports = (files: string[]) => { const exportsObj: ExportObject = { @@ -36,6 +35,8 @@ const generateExports = (files: string[]) => { }; const applyExportsToPackageJSON = async (exportsObj: ExportObject) => { + const PACKAGEJSON_PATH = "package.json"; + packageJSON.exports = packageJSON.exports || {}; Object.assign(packageJSON.exports, exportsObj); @@ -53,6 +54,8 @@ const generateRollupEntryFiles = (files: string[]) => { }; const applyEntryFilesToRollupConfig = async (entryFileObj: EntryFileObject) => { + const ROLLUP_CONFIG_PATH = "rollup.config.js"; + const dirname = path.resolve(); const rollupConfigPath = path.join(dirname, ROLLUP_CONFIG_PATH); let rollupConfigContent = await fs.readFile(rollupConfigPath, "utf-8"); diff --git a/packages/scripts/generateReactComponentFromSvg.ts b/packages/scripts/generateReactComponentFromSvg.ts new file mode 100644 index 00000000..0c88b161 --- /dev/null +++ b/packages/scripts/generateReactComponentFromSvg.ts @@ -0,0 +1,140 @@ +import { existsSync, promises as fs } from "fs"; +import path from "path"; + +const SVG_DIR = "../wow-icons/src/svg"; +const COMPONENT_DIR = "../wow-icons/src/react"; + +type SvgComponentMap = { [key: string]: string }; + +const generateSvgComponentMap = async () => { + const svgFiles = (await fs.readdir(SVG_DIR)).reduce( + (map, svgFile) => { + const componentName = path + .basename(svgFile, ".svg") + .replace(/(^\w|-\w)/g, (match) => match.replace("-", "").toUpperCase()); + map[componentName] = svgFile; + + return map; + }, + {} + ); + + return svgFiles; +}; + +const deleteUnusedComponentFiles = async (svgComponentMap: SvgComponentMap) => { + if (!existsSync(COMPONENT_DIR)) { + fs.mkdir(COMPONENT_DIR); + return; + } + + const componentFiles = await fs.readdir(COMPONENT_DIR); + const componentFilesToDelete = componentFiles.filter((componentFile) => { + const componentName = path.basename(componentFile, ".tsx"); + return !(componentName in svgComponentMap); + }); + + await Promise.all( + componentFilesToDelete.map((file) => { + const componentFilePath = path.resolve(COMPONENT_DIR, file); + return fs.unlink(componentFilePath); + }) + ); +}; + +const createComponentContent = ( + componentName: string, + svgContent: string, + svgFile: string +): string => { + const iconName = path.basename(svgFile, ".svg"); + const hasStroke = svgContent.includes("stroke="); + const fillAttributes = (svgContent.match(/fill="([^"]*)"/g) || []).filter( + (attr) => attr !== 'fill="none"' + ); + const hasFill = fillAttributes.length; + const propsString = `{ className, width = 24, height = 24, viewBox = "0 0 24 24"${hasStroke || hasFill ? ` ${hasStroke ? ', stroke = "white"' : ""}${hasFill ? ', fill = "white"' : ""}` : ""}, ...rest }`; + const modifiedSvgContent = svgContent + .replace(/-(\w)/g, (_, letter) => letter.toUpperCase()) + .replace(/width="(\d+)"/g, `width={width}`) + .replace(/height="(\d+)"/g, `height={height}`) + .replace(/viewBox="(.*?)"/g, `viewBox={viewBox}`) + .replace(/]*)fill="[^"]*"([^>]*)>/, "") + .replace(/fill="([^"]+)"/g, `fill={color[fill]}`) + .replace(/stroke="([^"]+)"/g, `stroke={color[stroke]}`) + .replace( + /]*)>/, + `` + ); + + return ` + import { forwardRef } from 'react'; + import { color } from "wowds-tokens"; + + import type { IconProps } from "../types/Icon.ts"; + + const ${componentName} = forwardRef( + (${propsString}, ref) => { + return ( + ${modifiedSvgContent} + ); + } + ); + + ${componentName}.displayName = '${componentName}'; + export default ${componentName}; + `; +}; + +const generateComponentFiles = async (svgComponentMap: SvgComponentMap) => { + const components: string[] = []; + + for (const [componentName, svgFile] of Object.entries(svgComponentMap)) { + const componentFilePath = path.resolve( + COMPONENT_DIR, + `${componentName}.tsx` + ); + + if (existsSync(componentFilePath)) { + components.push(componentName); + continue; + } + + const svgFilePath = path.resolve(SVG_DIR, svgFile); + const svgContent = (await fs.readFile(svgFilePath)).toString(); + + const componentContent = createComponentContent( + componentName, + svgContent, + svgFile + ); + + await fs.writeFile(componentFilePath, componentContent); + components.push(componentName); + } + + return components; +}; + +const generateExportFile = async (components: string[]) => { + const EXPORT_FILE_PATH = "../wow-icons/src/react/index.ts"; + const exportFileContent = components + .map( + (component) => + `export { default as ${component} } from "./${component}.tsx";` + ) + .join("\n"); + + await fs.writeFile(EXPORT_FILE_PATH, exportFileContent); +}; + +(async () => { + try { + const svgComponentMap = await generateSvgComponentMap(); + await deleteUnusedComponentFiles(svgComponentMap); + const components = await generateComponentFiles(svgComponentMap); + await generateExportFile(components); + } catch (error) { + console.log("Error generating components:", error); + } +})(); diff --git a/packages/shared-config/rollup.config.js b/packages/shared-config/rollup.config.js index 3ff38c31..90e71521 100644 --- a/packages/shared-config/rollup.config.js +++ b/packages/shared-config/rollup.config.js @@ -20,7 +20,7 @@ const baseConfig = { format: "cjs", }, ], - external: ["react/jsx-runtime"], + external: ["react", "react-dom", "react/jsx-runtime"], plugins: [ peerDepsExternal(), resolve({ extensions }), diff --git a/packages/theme/package.json b/packages/theme/package.json index f15d57c6..03645cdd 100644 --- a/packages/theme/package.json +++ b/packages/theme/package.json @@ -4,8 +4,9 @@ "private": true, "type": "module", "exports": { - ".": "./src/index.ts", - "./utils": "./utils/index.ts" + ".": "./src/tokens/index.ts", + "./utils": "./src/utils/index.ts", + "./types": "./src/types/index.ts" }, "devDependencies": { "@pandacss/dev": "^0.39.0" diff --git a/packages/theme/src/color.ts b/packages/theme/src/tokens/color.ts similarity index 100% rename from packages/theme/src/color.ts rename to packages/theme/src/tokens/color.ts diff --git a/packages/theme/src/index.ts b/packages/theme/src/tokens/index.ts similarity index 100% rename from packages/theme/src/index.ts rename to packages/theme/src/tokens/index.ts diff --git a/packages/theme/src/radius.ts b/packages/theme/src/tokens/radius.ts similarity index 100% rename from packages/theme/src/radius.ts rename to packages/theme/src/tokens/radius.ts diff --git a/packages/theme/src/space.ts b/packages/theme/src/tokens/space.ts similarity index 100% rename from packages/theme/src/space.ts rename to packages/theme/src/tokens/space.ts diff --git a/packages/theme/src/stroke.ts b/packages/theme/src/tokens/stroke.ts similarity index 100% rename from packages/theme/src/stroke.ts rename to packages/theme/src/tokens/stroke.ts diff --git a/packages/theme/src/typography.ts b/packages/theme/src/tokens/typography.ts similarity index 100% rename from packages/theme/src/typography.ts rename to packages/theme/src/tokens/typography.ts diff --git a/packages/theme/src/types/Color.ts b/packages/theme/src/types/Color.ts new file mode 100644 index 00000000..f31a2f88 --- /dev/null +++ b/packages/theme/src/types/Color.ts @@ -0,0 +1,99 @@ +export type ColorToken = + | "red50" + | "red100" + | "red150" + | "red200" + | "red300" + | "red400" + | "red500" + | "red600" + | "red700" + | "red800" + | "red850" + | "red900" + | "red950" + | "blue50" + | "blue100" + | "blue150" + | "blue200" + | "blue300" + | "blue400" + | "blue500" + | "blue600" + | "blue700" + | "blue800" + | "blue850" + | "blue900" + | "blue950" + | "yellow50" + | "yellow100" + | "yellow150" + | "yellow200" + | "yellow300" + | "yellow400" + | "yellow500" + | "yellow600" + | "yellow700" + | "yellow800" + | "yellow850" + | "yellow900" + | "yellow950" + | "green50" + | "green100" + | "green150" + | "green200" + | "green300" + | "green400" + | "green500" + | "green600" + | "green700" + | "green800" + | "green850" + | "green900" + | "green950" + | "mono50" + | "mono100" + | "mono150" + | "mono200" + | "mono300" + | "mono400" + | "mono500" + | "mono600" + | "mono700" + | "mono800" + | "mono850" + | "mono900" + | "mono950" + | "white" + | "black" + | "whiteOpacity20" + | "whiteOpacity40" + | "whiteOpacity60" + | "whiteOpacity80" + | "blackOpacity20" + | "blackOpacity40" + | "blackOpacity60" + | "blackOpacity80" + | "primary" + | "success" + | "error" + | "backgroundNormal" + | "backgroundAlternative" + | "backgroundDimmer" + | "sub" + | "outline" + | "textBlack" + | "textWhite" + | "darkDisabled" + | "lightDisabled" + | "blueHover" + | "monoHover" + | "elevatedHover" + | "bluePressed" + | "blueBackgroundPressed" + | "monoBackgroundPressed" + | "shadowSmall" + | "shadowMedium" + | "blueShadow" + | "discord" + | "github"; diff --git a/packages/theme/src/types/index.ts b/packages/theme/src/types/index.ts new file mode 100644 index 00000000..21460562 --- /dev/null +++ b/packages/theme/src/types/index.ts @@ -0,0 +1 @@ +export * from "./Color.ts"; diff --git a/packages/theme/utils/index.ts b/packages/theme/src/utils/index.ts similarity index 100% rename from packages/theme/utils/index.ts rename to packages/theme/src/utils/index.ts diff --git a/packages/theme/utils/remove-unused-css-vars.ts b/packages/theme/src/utils/remove-unused-css-vars.ts similarity index 100% rename from packages/theme/utils/remove-unused-css-vars.ts rename to packages/theme/src/utils/remove-unused-css-vars.ts diff --git a/packages/theme/utils/remove-unused-keyframes.ts b/packages/theme/src/utils/remove-unused-keyframes.ts similarity index 100% rename from packages/theme/utils/remove-unused-keyframes.ts rename to packages/theme/src/utils/remove-unused-keyframes.ts diff --git a/packages/theme/tsconfig.json b/packages/theme/tsconfig.json index 72ee3985..18fbad2e 100644 --- a/packages/theme/tsconfig.json +++ b/packages/theme/tsconfig.json @@ -21,6 +21,6 @@ "allowImportingTsExtensions": true, "jsx": "react-jsx" }, - "include": ["src", "utils"], + "include": ["src"], "exclude": ["node_modules"] } diff --git a/packages/wow-icons/package.json b/packages/wow-icons/package.json index 746bdc71..ec4a9de7 100644 --- a/packages/wow-icons/package.json +++ b/packages/wow-icons/package.json @@ -19,14 +19,17 @@ "types": "./dist/index.d.ts", "exports": { ".": { - "types": "./dist/index.d.ts", + "types": "./dist/react/index.d.ts", "require": "./dist/index.cjs", "import": "./dist/index.js", "default": "./dist/index.js" } }, "scripts": { - "build": "rm -rf dist && rollup -c --bundleConfigAsCjs && tsc --emitDeclarationOnly" + "build": "pnpm generate:icons && rm -rf dist && rollup -c --bundleConfigAsCjs && tsc --emitDeclarationOnly", + "generate:icons": "tsx ../scripts/generateReactComponentFromSvg.ts && pnpm format && pnpm lint", + "lint": "eslint --fix ./src/react/**/*.tsx", + "format": "prettier --write ./src/react/**/*" }, "keywords": [], "author": "gdsc-hongik", diff --git a/packages/wow-icons/rollup.config.js b/packages/wow-icons/rollup.config.js index 32bedf70..a5fd4e57 100644 --- a/packages/wow-icons/rollup.config.js +++ b/packages/wow-icons/rollup.config.js @@ -1,12 +1,13 @@ import baseConfig from "../shared-config/rollup.config.js"; import babel from "@rollup/plugin-babel"; -import svgr from "@svgr/rollup"; import url from "@rollup/plugin-url"; +import typescript from "@rollup/plugin-typescript"; const extensions = [".ts", ".tsx", ".js", ".jsx"]; export default { ...baseConfig, + input: "./src/react/index.ts", plugins: [ ...baseConfig.plugins, babel({ @@ -15,6 +16,6 @@ export default { babelHelpers: "runtime", }), url(), - svgr(), + typescript(), ], }; diff --git a/packages/wow-icons/src/UpArrow.tsx b/packages/wow-icons/src/UpArrow.tsx deleted file mode 100644 index de6fa083..00000000 --- a/packages/wow-icons/src/UpArrow.tsx +++ /dev/null @@ -1,40 +0,0 @@ -const UpArrow = () => ( - - - - - - - - - - - - -); - -export default UpArrow; diff --git a/packages/wow-icons/src/react/UpArrow.tsx b/packages/wow-icons/src/react/UpArrow.tsx new file mode 100644 index 00000000..3a3de5e3 --- /dev/null +++ b/packages/wow-icons/src/react/UpArrow.tsx @@ -0,0 +1,65 @@ +import { forwardRef } from "react"; +import { color } from "wowds-tokens"; + +import type { IconProps } from "../types/Icon.ts"; + +const UpArrow = forwardRef( + ( + { + className, + width = 24, + height = 24, + viewBox = "0 0 24 24", + stroke = "white", + fill = "white", + ...rest + }, + ref + ) => { + return ( + + + + + + + + + + + + + ); + } +); + +UpArrow.displayName = "UpArrow"; +export default UpArrow; diff --git a/packages/wow-icons/src/index.ts b/packages/wow-icons/src/react/index.ts similarity index 100% rename from packages/wow-icons/src/index.ts rename to packages/wow-icons/src/react/index.ts diff --git a/packages/wow-icons/src/svg/up-arrow.svg b/packages/wow-icons/src/svg/up-arrow.svg new file mode 100644 index 00000000..b3221b73 --- /dev/null +++ b/packages/wow-icons/src/svg/up-arrow.svg @@ -0,0 +1,36 @@ + + + + + + + + + + + + diff --git a/packages/wow-icons/src/types/Icon.ts b/packages/wow-icons/src/types/Icon.ts new file mode 100644 index 00000000..9718bcb1 --- /dev/null +++ b/packages/wow-icons/src/types/Icon.ts @@ -0,0 +1,11 @@ +import type { HTMLAttributes } from "react"; +import type { ColorToken } from "theme/types"; + +export interface IconProps extends HTMLAttributes { + className?: string; + width?: number | string; + height?: number | string; + viewBox?: string; + fill?: ColorToken; + stroke?: ColorToken; +} diff --git a/packages/wow-icons/tsconfig.json b/packages/wow-icons/tsconfig.json index 55468894..623cf111 100644 --- a/packages/wow-icons/tsconfig.json +++ b/packages/wow-icons/tsconfig.json @@ -17,7 +17,11 @@ "jsx": "react-jsx", "outDir": "dist", "emitDeclarationOnly": true, - "allowImportingTsExtensions": true + "allowImportingTsExtensions": true, + "baseUrl": ".", + "paths": { + "@/*": ["src/*"] + } }, "include": ["src", "svg.d.ts"], "exclude": ["node_modules", "dist"] diff --git a/packages/wow-ui/package.json b/packages/wow-ui/package.json index daf1ff48..920f10dd 100644 --- a/packages/wow-ui/package.json +++ b/packages/wow-ui/package.json @@ -48,13 +48,12 @@ "lint": "eslint . --max-warnings 0", "storybook": "storybook dev -p 6006", "build-storybook": "storybook build", - "generate:build-config": "tsx ./src/scripts/generateBuildConfig.ts && prettier --write ./rollup.config.js ./package.json", + "generate:build-config": "tsx ../scripts/generateBuildConfig.ts && prettier --write ./rollup.config.js ./package.json", "test-storybook": "test-storybook --browsers firefox chromium webkit", "test": "jest" }, "devDependencies": { "@chromatic-com/storybook": "^1.3.3", - "@rollup/plugin-alias": "^5.1.0", "@rollup/plugin-typescript": "^11.1.6", "@storybook/addon-a11y": "^7.5.3", "@storybook/addon-essentials": "^7.5.3", @@ -77,7 +76,6 @@ "eslint-plugin-storybook": "^0.6.15", "rollup-plugin-peer-deps-external": "^2.2.4", "storybook": "^7.5.3", - "tsx": "^4.9.3", "typescript": "^5.3.3" }, "peerDependencies": { diff --git a/packages/wow-ui/rollup.config.js b/packages/wow-ui/rollup.config.js index 400d5c93..04df3ac6 100644 --- a/packages/wow-ui/rollup.config.js +++ b/packages/wow-ui/rollup.config.js @@ -1,7 +1,6 @@ import alias from "@rollup/plugin-alias"; import json from "@rollup/plugin-json"; import terser from "@rollup/plugin-terser"; -import svgr from "@svgr/rollup"; import path from "path"; import commonjs from "@rollup/plugin-commonjs"; import resolve from "@rollup/plugin-node-resolve"; @@ -37,7 +36,7 @@ export default { entryFileNames: "[name].cjs", }, ], - external: ["react/jsx-runtime"], + external: ["react/jsx-runtime", /@babel\/runtime/], plugins: [ alias({ entries: [ @@ -68,7 +67,6 @@ export default { babelHelpers: "runtime", }), url(), - svgr(), terser(), json(), preserveDirectives.default(), diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index e0a2829c..574d2686 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -30,6 +30,9 @@ importers: '@pandacss/dev': specifier: ^0.39.0 version: 0.39.0(typescript@5.3.3) + '@rollup/plugin-alias': + specifier: ^5.1.0 + version: 5.1.0(rollup@4.17.2) '@rollup/plugin-babel': specifier: ^6.0.4 version: 6.0.4(@babel/core@7.24.5)(rollup@4.17.2) @@ -48,9 +51,6 @@ importers: '@rollup/plugin-url': specifier: ^8.0.2 version: 8.0.2(rollup@4.17.2) - '@svgr/rollup': - specifier: ^8.1.0 - version: 8.1.0(rollup@4.17.2)(typescript@5.3.3) '@testing-library/jest-dom': specifier: ^6.4.5 version: 6.4.5(@types/jest@29.5.12)(jest@29.7.0) @@ -160,7 +160,7 @@ importers: specifier: workspace:^ version: link:packages/shared-config theme: - specifier: workspace:* + specifier: workspace:^ version: link:packages/theme ts-jest: specifier: ^29.1.2 @@ -168,12 +168,18 @@ importers: ts-node: specifier: ^10.9.2 version: 10.9.2(@types/node@20.11.24)(typescript@5.3.3) + tsx: + specifier: ^4.11.0 + version: 4.11.0 turbo: specifier: latest version: 1.13.3 typescript: specifier: ^5.3.3 version: 5.3.3 + wowds-tokens: + specifier: workspace:^ + version: link:packages/wow-tokens apps/wow-docs: dependencies: @@ -249,9 +255,6 @@ importers: '@chromatic-com/storybook': specifier: ^1.3.3 version: 1.3.3(react@18.2.0) - '@rollup/plugin-alias': - specifier: ^5.1.0 - version: 5.1.0(rollup@4.17.2) '@rollup/plugin-typescript': specifier: ^11.1.6 version: 11.1.6(rollup@4.17.2)(typescript@5.3.3) @@ -318,9 +321,6 @@ importers: storybook: specifier: ^7.5.3 version: 7.6.19 - tsx: - specifier: ^4.9.3 - version: 4.9.3 typescript: specifier: ^5.3.3 version: 5.3.3 @@ -1391,16 +1391,6 @@ packages: '@babel/helper-plugin-utils': 7.24.5 dev: true - /@babel/plugin-transform-react-constant-elements@7.24.1(@babel/core@7.24.5): - resolution: {integrity: sha512-QXp1U9x0R7tkiGB0FOk8o74jhnap0FlZ5gNkRIWdG3eP+SvMFg118e1zaWewDzgABb106QSKpVsD3Wgd8t6ifA==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0-0 - dependencies: - '@babel/core': 7.24.5 - '@babel/helper-plugin-utils': 7.24.5 - dev: true - /@babel/plugin-transform-react-display-name@7.24.1(@babel/core@7.24.5): resolution: {integrity: sha512-mvoQg2f9p2qlpDQRBC7M3c3XTr0k7cp/0+kFKKO/7Gtu0LSw16eKB+Fabe2bDT/UpsyasTBBkAnbdsLrkD5XMw==} engines: {node: '>=6.9.0'} @@ -5199,165 +5189,6 @@ packages: file-system-cache: 2.3.0 dev: true - /@svgr/babel-plugin-add-jsx-attribute@8.0.0(@babel/core@7.24.5): - resolution: {integrity: sha512-b9MIk7yhdS1pMCZM8VeNfUlSKVRhsHZNMl5O9SfaX0l0t5wjdgu4IDzGB8bpnGBBOjGST3rRFVsaaEtI4W6f7g==} - engines: {node: '>=14'} - peerDependencies: - '@babel/core': ^7.0.0-0 - dependencies: - '@babel/core': 7.24.5 - dev: true - - /@svgr/babel-plugin-remove-jsx-attribute@8.0.0(@babel/core@7.24.5): - resolution: {integrity: sha512-BcCkm/STipKvbCl6b7QFrMh/vx00vIP63k2eM66MfHJzPr6O2U0jYEViXkHJWqXqQYjdeA9cuCl5KWmlwjDvbA==} - engines: {node: '>=14'} - peerDependencies: - '@babel/core': ^7.0.0-0 - dependencies: - '@babel/core': 7.24.5 - dev: true - - /@svgr/babel-plugin-remove-jsx-empty-expression@8.0.0(@babel/core@7.24.5): - resolution: {integrity: sha512-5BcGCBfBxB5+XSDSWnhTThfI9jcO5f0Ai2V24gZpG+wXF14BzwxxdDb4g6trdOux0rhibGs385BeFMSmxtS3uA==} - engines: {node: '>=14'} - peerDependencies: - '@babel/core': ^7.0.0-0 - dependencies: - '@babel/core': 7.24.5 - dev: true - - /@svgr/babel-plugin-replace-jsx-attribute-value@8.0.0(@babel/core@7.24.5): - resolution: {integrity: sha512-KVQ+PtIjb1BuYT3ht8M5KbzWBhdAjjUPdlMtpuw/VjT8coTrItWX6Qafl9+ji831JaJcu6PJNKCV0bp01lBNzQ==} - engines: {node: '>=14'} - peerDependencies: - '@babel/core': ^7.0.0-0 - dependencies: - '@babel/core': 7.24.5 - dev: true - - /@svgr/babel-plugin-svg-dynamic-title@8.0.0(@babel/core@7.24.5): - resolution: {integrity: sha512-omNiKqwjNmOQJ2v6ge4SErBbkooV2aAWwaPFs2vUY7p7GhVkzRkJ00kILXQvRhA6miHnNpXv7MRnnSjdRjK8og==} - engines: {node: '>=14'} - peerDependencies: - '@babel/core': ^7.0.0-0 - dependencies: - '@babel/core': 7.24.5 - dev: true - - /@svgr/babel-plugin-svg-em-dimensions@8.0.0(@babel/core@7.24.5): - resolution: {integrity: sha512-mURHYnu6Iw3UBTbhGwE/vsngtCIbHE43xCRK7kCw4t01xyGqb2Pd+WXekRRoFOBIY29ZoOhUCTEweDMdrjfi9g==} - engines: {node: '>=14'} - peerDependencies: - '@babel/core': ^7.0.0-0 - dependencies: - '@babel/core': 7.24.5 - dev: true - - /@svgr/babel-plugin-transform-react-native-svg@8.1.0(@babel/core@7.24.5): - resolution: {integrity: sha512-Tx8T58CHo+7nwJ+EhUwx3LfdNSG9R2OKfaIXXs5soiy5HtgoAEkDay9LIimLOcG8dJQH1wPZp/cnAv6S9CrR1Q==} - engines: {node: '>=14'} - peerDependencies: - '@babel/core': ^7.0.0-0 - dependencies: - '@babel/core': 7.24.5 - dev: true - - /@svgr/babel-plugin-transform-svg-component@8.0.0(@babel/core@7.24.5): - resolution: {integrity: sha512-DFx8xa3cZXTdb/k3kfPeaixecQLgKh5NVBMwD0AQxOzcZawK4oo1Jh9LbrcACUivsCA7TLG8eeWgrDXjTMhRmw==} - engines: {node: '>=12'} - peerDependencies: - '@babel/core': ^7.0.0-0 - dependencies: - '@babel/core': 7.24.5 - dev: true - - /@svgr/babel-preset@8.1.0(@babel/core@7.24.5): - resolution: {integrity: sha512-7EYDbHE7MxHpv4sxvnVPngw5fuR6pw79SkcrILHJ/iMpuKySNCl5W1qcwPEpU+LgyRXOaAFgH0KhwD18wwg6ug==} - engines: {node: '>=14'} - peerDependencies: - '@babel/core': ^7.0.0-0 - dependencies: - '@babel/core': 7.24.5 - '@svgr/babel-plugin-add-jsx-attribute': 8.0.0(@babel/core@7.24.5) - '@svgr/babel-plugin-remove-jsx-attribute': 8.0.0(@babel/core@7.24.5) - '@svgr/babel-plugin-remove-jsx-empty-expression': 8.0.0(@babel/core@7.24.5) - '@svgr/babel-plugin-replace-jsx-attribute-value': 8.0.0(@babel/core@7.24.5) - '@svgr/babel-plugin-svg-dynamic-title': 8.0.0(@babel/core@7.24.5) - '@svgr/babel-plugin-svg-em-dimensions': 8.0.0(@babel/core@7.24.5) - '@svgr/babel-plugin-transform-react-native-svg': 8.1.0(@babel/core@7.24.5) - '@svgr/babel-plugin-transform-svg-component': 8.0.0(@babel/core@7.24.5) - dev: true - - /@svgr/core@8.1.0(typescript@5.3.3): - resolution: {integrity: sha512-8QqtOQT5ACVlmsvKOJNEaWmRPmcojMOzCz4Hs2BGG/toAp/K38LcsMRyLp349glq5AzJbCEeimEoxaX6v/fLrA==} - engines: {node: '>=14'} - dependencies: - '@babel/core': 7.24.5 - '@svgr/babel-preset': 8.1.0(@babel/core@7.24.5) - camelcase: 6.3.0 - cosmiconfig: 8.3.6(typescript@5.3.3) - snake-case: 3.0.4 - transitivePeerDependencies: - - supports-color - - typescript - dev: true - - /@svgr/hast-util-to-babel-ast@8.0.0: - resolution: {integrity: sha512-EbDKwO9GpfWP4jN9sGdYwPBU0kdomaPIL2Eu4YwmgP+sJeXT+L7bMwJUBnhzfH8Q2qMBqZ4fJwpCyYsAN3mt2Q==} - engines: {node: '>=14'} - dependencies: - '@babel/types': 7.24.5 - entities: 4.5.0 - dev: true - - /@svgr/plugin-jsx@8.1.0(@svgr/core@8.1.0): - resolution: {integrity: sha512-0xiIyBsLlr8quN+WyuxooNW9RJ0Dpr8uOnH/xrCVO8GLUcwHISwj1AG0k+LFzteTkAA0GbX0kj9q6Dk70PTiPA==} - engines: {node: '>=14'} - peerDependencies: - '@svgr/core': '*' - dependencies: - '@babel/core': 7.24.5 - '@svgr/babel-preset': 8.1.0(@babel/core@7.24.5) - '@svgr/core': 8.1.0(typescript@5.3.3) - '@svgr/hast-util-to-babel-ast': 8.0.0 - svg-parser: 2.0.4 - transitivePeerDependencies: - - supports-color - dev: true - - /@svgr/plugin-svgo@8.1.0(@svgr/core@8.1.0)(typescript@5.3.3): - resolution: {integrity: sha512-Ywtl837OGO9pTLIN/onoWLmDQ4zFUycI1g76vuKGEz6evR/ZTJlJuz3G/fIkb6OVBJ2g0o6CGJzaEjfmEo3AHA==} - engines: {node: '>=14'} - peerDependencies: - '@svgr/core': '*' - dependencies: - '@svgr/core': 8.1.0(typescript@5.3.3) - cosmiconfig: 8.3.6(typescript@5.3.3) - deepmerge: 4.3.1 - svgo: 3.2.0 - transitivePeerDependencies: - - typescript - dev: true - - /@svgr/rollup@8.1.0(rollup@4.17.2)(typescript@5.3.3): - resolution: {integrity: sha512-0XR1poYvPQoPpmfDYLEqUGu5ePAQ4pdgN3VFsZBNAeze7qubVpsIY1o1R6PZpKep/DKu33GSm2NhwpCLkMs2Cw==} - engines: {node: '>=14'} - dependencies: - '@babel/core': 7.24.5 - '@babel/plugin-transform-react-constant-elements': 7.24.1(@babel/core@7.24.5) - '@babel/preset-env': 7.24.5(@babel/core@7.24.5) - '@babel/preset-react': 7.24.1(@babel/core@7.24.5) - '@babel/preset-typescript': 7.24.1(@babel/core@7.24.5) - '@rollup/pluginutils': 5.1.0(rollup@4.17.2) - '@svgr/core': 8.1.0(typescript@5.3.3) - '@svgr/plugin-jsx': 8.1.0(@svgr/core@8.1.0) - '@svgr/plugin-svgo': 8.1.0(@svgr/core@8.1.0)(typescript@5.3.3) - transitivePeerDependencies: - - rollup - - supports-color - - typescript - dev: true - /@swc/core-darwin-arm64@1.4.17: resolution: {integrity: sha512-HVl+W4LezoqHBAYg2JCqR+s9ife9yPfgWSj37iIawLWzOmuuJ7jVdIB7Ee2B75bEisSEKyxRlTl6Y1Oq3owBgw==} engines: {node: '>=10'} @@ -5616,11 +5447,6 @@ packages: resolution: {integrity: sha512-C5Mc6rdnsaJDjO3UpGW/CQTHtCKaYlScZTly4JIu97Jxo/odCiH0ITnDXSJPTOrEKk/ycSZ0AOgTmkDtkOsvIA==} dev: true - /@trysound/sax@0.2.0: - resolution: {integrity: sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==} - engines: {node: '>=10.13.0'} - dev: true - /@ts-morph/common@0.22.0: resolution: {integrity: sha512-HqNBuV/oIlMKdkLshXd1zKBqNQCsuPEsgQOkfFQ/eUKjRlwndXW1AjN9LVkBEIukm00gGXSRmfkl0Wv5VXLnlw==} dependencies: @@ -7927,11 +7753,6 @@ packages: engines: {node: '>= 6'} dev: true - /commander@7.2.0: - resolution: {integrity: sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==} - engines: {node: '>= 10'} - dev: true - /commander@8.3.0: resolution: {integrity: sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==} engines: {node: '>= 12'} @@ -8208,32 +8029,6 @@ packages: nth-check: 2.1.1 dev: true - /css-select@5.1.0: - resolution: {integrity: sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==} - dependencies: - boolbase: 1.0.0 - css-what: 6.1.0 - domhandler: 5.0.3 - domutils: 3.1.0 - nth-check: 2.1.1 - dev: true - - /css-tree@2.2.1: - resolution: {integrity: sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==} - engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0, npm: '>=7.0.0'} - dependencies: - mdn-data: 2.0.28 - source-map-js: 1.0.2 - dev: true - - /css-tree@2.3.1: - resolution: {integrity: sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==} - engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0} - dependencies: - mdn-data: 2.0.30 - source-map-js: 1.0.2 - dev: true - /css-what@6.1.0: resolution: {integrity: sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==} engines: {node: '>= 6'} @@ -8258,13 +8053,6 @@ packages: postcss: 8.4.35 dev: true - /csso@5.0.5: - resolution: {integrity: sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==} - engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0, npm: '>=7.0.0'} - dependencies: - css-tree: 2.2.1 - dev: true - /cssom@0.3.8: resolution: {integrity: sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==} dev: true @@ -8717,14 +8505,6 @@ packages: entities: 2.2.0 dev: true - /dom-serializer@2.0.0: - resolution: {integrity: sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==} - dependencies: - domelementtype: 2.3.0 - domhandler: 5.0.3 - entities: 4.5.0 - dev: true - /domain-browser@4.23.0: resolution: {integrity: sha512-ArzcM/II1wCCujdCNyQjXrAFwS4mrLh4C7DZWlaI8mdh7h3BfKdNd3bKXITfl2PT9FtfQqaGvhi1vPRQPimjGA==} engines: {node: '>=10'} @@ -8759,13 +8539,6 @@ packages: domelementtype: 2.3.0 dev: true - /domhandler@5.0.3: - resolution: {integrity: sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==} - engines: {node: '>= 4'} - dependencies: - domelementtype: 2.3.0 - dev: true - /domutils@1.7.0: resolution: {integrity: sha512-Lgd2XcJ/NjEw+7tFvfKxOzCYKZsdct5lczQ2ZaQY8Djz7pfAD3Gbp8ySJWtreII/vDlMVmxwa6pHmdxIYgttDg==} dependencies: @@ -8781,14 +8554,6 @@ packages: domhandler: 4.3.1 dev: true - /domutils@3.1.0: - resolution: {integrity: sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==} - dependencies: - dom-serializer: 2.0.0 - domelementtype: 2.3.0 - domhandler: 5.0.3 - dev: true - /dot-case@2.1.1: resolution: {integrity: sha512-HnM6ZlFqcajLsyudHq7LeeLDr2rFAVYtDv/hV5qchQEidSck8j9OPUsXY9KwJv/lHMtYlX4DjRQqwFYa+0r8Ug==} dependencies: @@ -12626,14 +12391,6 @@ packages: resolution: {integrity: sha512-jVU0Nr2B9X3MU4tSK7JP1CMkSvOj7X5l/GboG1tKRw52lLF1x2Ju92Ms9tNetCcbfX3hzlM73zYo2NKkWSfF/A==} dev: true - /mdn-data@2.0.28: - resolution: {integrity: sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==} - dev: true - - /mdn-data@2.0.30: - resolution: {integrity: sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==} - dev: true - /media-typer@0.3.0: resolution: {integrity: sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==} engines: {node: '>= 0.6'} @@ -15178,13 +14935,6 @@ packages: no-case: 2.3.2 dev: true - /snake-case@3.0.4: - resolution: {integrity: sha512-LAOh4z89bGQvl9pFfNF8V146i7o7/CqFPbqzYgP+yYzDIDeS9HaNFtXABamRW+AQzEVODcvE79ljJ+8a9YSdMg==} - dependencies: - dot-case: 3.0.4 - tslib: 2.6.2 - dev: true - /socks-proxy-agent@8.0.1: resolution: {integrity: sha512-59EjPbbgg8U3x62hhKOFVAmySQUcfRQ4C7Q/D5sEHnZTQRrQlNKINks44DMR1gwXp0p4LaVIeccX2KHTTcHVqQ==} engines: {node: '>= 14'} @@ -15610,24 +15360,6 @@ packages: engines: {node: '>= 0.4'} dev: true - /svg-parser@2.0.4: - resolution: {integrity: sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ==} - dev: true - - /svgo@3.2.0: - resolution: {integrity: sha512-4PP6CMW/V7l/GmKRKzsLR8xxjdHTV4IMvhTnpuHwwBazSIlw5W/5SmPjN8Dwyt7lKbSJrRDgp4t9ph0HgChFBQ==} - engines: {node: '>=14.0.0'} - hasBin: true - dependencies: - '@trysound/sax': 0.2.0 - commander: 7.2.0 - css-select: 5.1.0 - css-tree: 2.3.1 - css-what: 6.1.0 - csso: 5.0.5 - picocolors: 1.0.0 - dev: true - /swap-case@1.1.2: resolution: {integrity: sha512-BAmWG6/bx8syfc6qXPprof3Mn5vQgf5dwdUNJhsNqU9WdPt5P+ES/wQ5bxfijy8zwZgZZHslC3iAsxsuQMCzJQ==} dependencies: @@ -16125,8 +15857,8 @@ packages: typescript: 5.3.3 dev: true - /tsx@4.9.3: - resolution: {integrity: sha512-czVbetlILiyJZI5zGlj2kw9vFiSeyra9liPD4nG+Thh4pKTi0AmMEQ8zdV/L2xbIVKrIqif4sUNrsMAOksx9Zg==} + /tsx@4.11.0: + resolution: {integrity: sha512-vzGGELOgAupsNVssAmZjbUDfdm/pWP4R+Kg8TVdsonxbXk0bEpE1qh0yV6/QxUVXaVlNemgcPajGdJJ82n3stg==} engines: {node: '>=18.0.0'} hasBin: true dependencies: