From 8bca8f55cc063cc2390ac7195cc58b4d5f6f6c5f Mon Sep 17 00:00:00 2001 From: Federico Luzzi Date: Mon, 14 Aug 2023 14:27:28 +0100 Subject: [PATCH] feat(ui): export both cjs and mjs (#345) * feat(ui): export both cjs and mjs * fix(ui): micro fixes to rollup scripts * fix(ui): micro fixes to rollup scripts * fix(ui): fix storybook build script * chore(ui): add to prettierignore --------- Co-authored-by: luzzifoss --- .changeset/chilly-chicken-reply.md | 5 + packages/sdk/rollup.config.mjs | 2 +- packages/ui/.prettierignore | 4 +- packages/ui/.size-limit.json | 8 +- packages/ui/.storybook/main.js | 2 +- packages/ui/package.json | 224 ++++++++++-------- packages/ui/rollup.config.mjs | 38 +-- ...{tailwind.config.js => tailwind-config.js} | 2 +- ....theme.d.ts => tailwind-preset-theme.d.ts} | 0 ...eset.theme.js => tailwind-preset-theme.js} | 0 ...{tailwind.preset.js => tailwind-preset.js} | 2 +- packages/ui/src/utils/components.tsx | 2 +- packages/ui/tsconfig.build.json | 5 +- 13 files changed, 173 insertions(+), 121 deletions(-) create mode 100644 .changeset/chilly-chicken-reply.md rename packages/ui/src/{tailwind.config.js => tailwind-config.js} (73%) rename packages/ui/src/{tailwind.preset.theme.d.ts => tailwind-preset-theme.d.ts} (100%) rename packages/ui/src/{tailwind.preset.theme.js => tailwind-preset-theme.js} (100%) rename packages/ui/src/{tailwind.preset.js => tailwind-preset.js} (81%) diff --git a/.changeset/chilly-chicken-reply.md b/.changeset/chilly-chicken-reply.md new file mode 100644 index 000000000..ce4778b53 --- /dev/null +++ b/.changeset/chilly-chicken-reply.md @@ -0,0 +1,5 @@ +--- +"@carrot-kpi/ui": minor +--- + +Export both mjs and cjs versions of the package diff --git a/packages/sdk/rollup.config.mjs b/packages/sdk/rollup.config.mjs index 5d52b9a27..ebf9e4793 100644 --- a/packages/sdk/rollup.config.mjs +++ b/packages/sdk/rollup.config.mjs @@ -23,7 +23,7 @@ export default [ peerDepsExternal(), nodeResolve({ preferBuiltins: true }), commonjs(), - esbuild({ target: "es2022", tsconfig: "./tsconfig.build.json" }), + esbuild({ target: "es2020", tsconfig: "./tsconfig.build.json" }), ], output: [ { diff --git a/packages/ui/.prettierignore b/packages/ui/.prettierignore index a86d6eef2..4b6d58186 100644 --- a/packages/ui/.prettierignore +++ b/packages/ui/.prettierignore @@ -154,4 +154,6 @@ build # Generated code about Fathom events /packages/frontend/src/out -CHANGELOG.md \ No newline at end of file +CHANGELOG.md + +storybook-static \ No newline at end of file diff --git a/packages/ui/.size-limit.json b/packages/ui/.size-limit.json index 697752247..335deaaea 100644 --- a/packages/ui/.size-limit.json +++ b/packages/ui/.size-limit.json @@ -1,7 +1,11 @@ [ { - "path": "./dist/**/*.js", - "limit": "660 KB" + "path": "./dist/es/**/*.mjs", + "limit": "700 KB" + }, + { + "path": "./dist/cjs/**/*.cjs", + "limit": "700 KB" }, { "path": "./dist/styles.css", diff --git a/packages/ui/.storybook/main.js b/packages/ui/.storybook/main.js index f6d79f060..58628a280 100644 --- a/packages/ui/.storybook/main.js +++ b/packages/ui/.storybook/main.js @@ -34,7 +34,7 @@ module.exports = { tailwindcss: { config: path.resolve( __dirname, - "../src/tailwind.config.js", + "../src/tailwind-config.js", ), }, autoprefixer: {}, diff --git a/packages/ui/package.json b/packages/ui/package.json index a4067c617..be809f363 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -3,228 +3,260 @@ "license": "GPL-3.0-or-later", "author": "Federico Luzzi ", "version": "0.52.1", - "main": "./dist/index.js", - "module": "./dist/index.js", - "types": "./dist/index.d.ts", - "typings": "./dist/index.d.ts", + "main": "./dist/cjs/index.cjs", + "module": "./dist/es/index.mjs", + "types": "./dist/types/index.d.ts", + "typings": "./dist/types/index.d.ts", "sideEffects": false, "exports": { ".": { "types": "./dist/index.d.ts", - "import": "./dist/index.js" + "import": "./dist/es/index.mjs", + "default": "./dist/cjs/index.cjs" }, "./accordion": { - "types": "./dist/components/accordion/index.d.ts", - "import": "./dist/components/accordion/index.js" + "types": "./dist/types/components/accordion/index.d.ts", + "import": "./dist/es/components/accordion/index.mjs", + "default": "./dist/cjs/components/accordion/index.cjs" }, "./card": { - "types": "./dist/components/card/index.d.ts", - "import": "./dist/components/card/index.js" + "types": "./dist/types/components/card/index.d.ts", + "import": "./dist/es/components/card/index.mjs", + "default": "./dist/cjs/components/card/index.cjs" }, "./date-input": { - "types": "./dist/components/date-input/index.d.ts", - "import": "./dist/components/date-input/index.js" + "types": "./dist/types/components/date-input/index.d.ts", + "import": "./dist/es/components/date-input/index.mjs", + "default": "./dist/cjs/components/date-input/index.cjs" }, "./date-time-input": { - "types": "./dist/components/date-time-input/index.d.ts", - "import": "./dist/components/date-time-input/index.js" + "types": "./dist/types/components/date-time-input/index.d.ts", + "import": "./dist/es/components/date-time-input/index.mjs", + "default": "./dist/cjs/components/date-time-input/index.cjs" }, "./erc20-token-picker": { - "types": "./dist/components/erc20-token-picker/index.d.ts", - "import": "./dist/components/erc20-token-picker/index.js" + "types": "./dist/types/components/erc20-token-picker/index.d.ts", + "import": "./dist/es/components/erc20-token-picker/index.mjs", + "default": "./dist/cjs/components/erc20-token-picker/index.cjs" }, "./markdown-input": { - "types": "./dist/components/markdown-input/index.d.ts", - "import": "./dist/components/markdown-input/index.js" + "types": "./dist/types/components/markdown-input/index.d.ts", + "import": "./dist/es/components/markdown-input/index.mjs", + "default": "./dist/cjs/components/markdown-input/index.cjs" }, "./multi-step-cards": { - "types": "./dist/components/multi-step-cards/index.d.ts", - "import": "./dist/components/multi-step-cards/index.js" + "types": "./dist/types/components/multi-step-cards/index.d.ts", + "import": "./dist/es/components/multi-step-cards/index.mjs", + "default": "./dist/cjs/components/multi-step-cards/index.cjs" }, "./button": { - "types": "./dist/components/button.d.ts", - "import": "./dist/components/button.js" + "types": "./dist/types/components/button.d.ts", + "import": "./dist/es/components/button.mjs", + "default": "./dist/cjs/components/button.cjs" }, "./checkbox": { - "types": "./dist/components/checkbox.d.ts", - "import": "./dist/components/checkbox.js" + "types": "./dist/types/components/checkbox.d.ts", + "import": "./dist/es/components/checkbox.mjs", + "default": "./dist/cjs/components/checkbox.cjs" }, "./chip": { - "types": "./dist/components/chip.d.ts", - "import": "./dist/components/chip.js" + "types": "./dist/types/components/chip.d.ts", + "import": "./dist/es/components/chip.mjs", + "default": "./dist/cjs/components/chip.cjs" }, "./erc20-token-logo": { - "types": "./dist/components/erc20-token-logo.d.ts", - "import": "./dist/components/erc20-token-logo.js" + "types": "./dist/types/components/erc20-token-logo.d.ts", + "import": "./dist/es/components/erc20-token-logo.mjs", + "default": "./dist/cjs/components/erc20-token-logo.cjs" }, "./error-feedback": { - "types": "./dist/components/error-feedback.d.ts", - "import": "./dist/components/error-feedback.js" + "types": "./dist/types/components/error-feedback.d.ts", + "import": "./dist/es/components/error-feedback.mjs", + "default": "./dist/cjs/components/error-feedback.cjs" }, "./error-text": { - "types": "./dist/components/error-text.d.ts", - "import": "./dist/components/error-text.js" + "types": "./dist/types/components/error-text.d.ts", + "import": "./dist/es/components/error-text.mjs", + "default": "./dist/cjs/components/error-text.cjs" }, "./loader": { - "types": "./dist/components/loader.d.ts", - "import": "./dist/components/loader.js" + "types": "./dist/types/components/loader.d.ts", + "import": "./dist/es/components/loader.mjs", + "default": "./dist/cjs/components/loader.cjs" }, "./markdown": { - "types": "./dist/components/markdown.d.ts", - "import": "./dist/components/markdown.js" + "types": "./dist/types/components/markdown.d.ts", + "import": "./dist/es/components/markdown.mjs", + "default": "./dist/cjs/components/markdown.cjs" }, "./modal": { - "types": "./dist/components/modal.d.ts", - "import": "./dist/components/modal.js" + "types": "./dist/types/components/modal.d.ts", + "import": "./dist/es/components/modal.mjs", + "default": "./dist/cjs/components/modal.cjs" }, "./number-input": { - "types": "./dist/components/number-input.d.ts", - "import": "./dist/components/number-input.js" + "types": "./dist/types/components/number-input.d.ts", + "import": "./dist/es/components/number-input.mjs", + "default": "./dist/cjs/components/number-input.cjs" }, "./popover": { - "types": "./dist/components/popover.d.ts", - "import": "./dist/components/popover.js" + "types": "./dist/types/components/popover.d.ts", + "import": "./dist/es/components/popover.mjs", + "default": "./dist/cjs/components/popover.cjs" }, "./radio-group": { - "types": "./dist/components/radio-group.d.ts", - "import": "./dist/components/radio-group.js" + "types": "./dist/types/components/radio-group.d.ts", + "import": "./dist/es/components/radio-group.mjs", + "default": "./dist/cjs/components/radio-group.cjs" }, "./radio": { - "types": "./dist/components/radio.d.ts", - "import": "./dist/components/radio.js" + "types": "./dist/types/components/radio.d.ts", + "import": "./dist/es/components/radio.mjs", + "default": "./dist/cjs/components/radio.cjs" }, "./remote-logo": { - "types": "./dist/components/remote-logo.d.ts", - "import": "./dist/components/remote-logo.js" + "types": "./dist/types/components/remote-logo.d.ts", + "import": "./dist/es/components/remote-logo.mjs", + "default": "./dist/cjs/components/remote-logo.cjs" }, "./select": { - "types": "./dist/components/select.d.ts", - "import": "./dist/components/select.js" + "types": "./dist/types/components/select.d.ts", + "import": "./dist/es/components/select.mjs", + "default": "./dist/cjs/components/select.cjs" }, "./skeleton": { - "types": "./dist/components/skeleton.d.ts", - "import": "./dist/components/skeleton.js" + "types": "./dist/types/components/skeleton.d.ts", + "import": "./dist/es/components/skeleton.mjs", + "default": "./dist/cjs/components/skeleton.cjs" }, "./stepper": { - "types": "./dist/components/stepper.d.ts", - "import": "./dist/components/stepper.js" + "types": "./dist/types/components/stepper.d.ts", + "import": "./dist/es/components/stepper.mjs", + "default": "./dist/cjs/components/stepper.cjs" }, "./switch": { - "types": "./dist/components/switch.d.ts", - "import": "./dist/components/switch.js" + "types": "./dist/types/components/switch.d.ts", + "import": "./dist/es/components/switch.mjs", + "default": "./dist/cjs/components/switch.cjs" }, "./tags-input": { - "types": "./dist/components/tags-input.d.ts", - "import": "./dist/components/tags-input.js" + "types": "./dist/types/components/tags-input.d.ts", + "import": "./dist/es/components/tags-input.mjs", + "default": "./dist/cjs/components/tags-input.cjs" }, "./text-input": { - "types": "./dist/components/text-input.d.ts", - "import": "./dist/components/text-input.js" + "types": "./dist/types/components/text-input.d.ts", + "import": "./dist/es/components/text-input.mjs", + "default": "./dist/cjs/components/text-input.cjs" }, "./timer": { - "types": "./dist/components/timer.d.ts", - "import": "./dist/components/timer.js" + "types": "./dist/types/components/timer.d.ts", + "import": "./dist/es/components/timer.mjs", + "default": "./dist/cjs/components/timer.cjs" }, "./typography": { - "types": "./dist/components/typography.d.ts", - "import": "./dist/components/typography.js" + "types": "./dist/types/components/typography.d.ts", + "import": "./dist/es/components/typography.mjs", + "default": "./dist/cjs/components/typography.cjs" }, "./styles.css": { - "import": "./dist/styles.css" + "import": "./dist/styles.css", + "default": "./dist/styles.css" }, "./tailwind-preset": { - "import": "./dist/tailwind.preset.js", - "require": "./dist/tailwind.preset.cjs" + "types": "./dist/types/tailwind-preset.d.ts", + "import": "./dist/es/tailwind-preset.mjs", + "default": "./dist/cjs/tailwind-preset.cjs" } }, "typesVersions": { "*": { "accordion": [ - "./dist/components/accordion/index.d.ts" + "./dist/types/components/accordion/index.d.ts" ], "card": [ - "./dist/components/card/index.d.ts" + "./dist/types/components/card/index.d.ts" ], "date-input": [ - "./dist/components/date-input/index.d.ts" + "./dist/types/components/date-input/index.d.ts" ], "date-time-input": [ - "./dist/components/date-time-input/index.d.ts" + "./dist/types/components/date-time-input/index.d.ts" ], "erc20-token-picker": [ - "./dist/components/erc20-token-picker/index.d.ts" + "./dist/types/components/erc20-token-picker/index.d.ts" ], "markdown-input": [ - "./dist/components/markdown-input/index.d.ts" + "./dist/types/components/markdown-input/index.d.ts" ], "multi-step-cards": [ - "./dist/components/multi-step-cards/index.d.ts" + "./dist/types/components/multi-step-cards/index.d.ts" ], "button": [ - "./dist/components/button.d.ts" + "./dist/types/components/button.d.ts" ], "checkbox": [ - "./dist/components/checkbox.d.ts" + "./dist/types/components/checkbox.d.ts" ], "chip": [ - "./dist/components/chip.d.ts" + "./dist/types/components/chip.d.ts" ], "erc20-token-logo": [ - "./dist/components/erc20-token-logo.d.ts" + "./dist/types/components/erc20-token-logo.d.ts" ], "error-feedback": [ - "./dist/components/error-feedback.d.ts" + "./dist/types/components/error-feedback.d.ts" ], "error-text": [ - "./dist/components/error-text.d.ts" + "./dist/types/components/error-text.d.ts" ], "loader": [ - "./dist/components/loader.d.ts" + "./dist/types/components/loader.d.ts" ], "markdown": [ - "./dist/components/markdown.d.ts" + "./dist/types/components/markdown.d.ts" ], "modal": [ - "./dist/components/modal.d.ts" + "./dist/types/components/modal.d.ts" ], "number-input": [ - "./dist/components/number-input.d.ts" + "./dist/types/components/number-input.d.ts" ], "popover": [ - "./dist/components/popover.d.ts" + "./dist/types/components/popover.d.ts" ], "radio-group": [ - "./dist/components/radio-group.d.ts" + "./dist/types/components/radio-group.d.ts" ], "radio": [ - "./dist/components/radio.d.ts" + "./dist/types/components/radio.d.ts" ], "remote-logo": [ - "./dist/components/remote-logo.d.ts" + "./dist/types/components/remote-logo.d.ts" ], "select": [ - "./dist/components/select.d.ts" + "./dist/types/components/select.d.ts" ], "skeleton": [ - "./dist/components/skeleton.d.ts" + "./dist/types/components/skeleton.d.ts" ], "stepper": [ - "./dist/components/stepper.d.ts" + "./dist/types/components/stepper.d.ts" ], "switch": [ - "./dist/components/switch.d.ts" + "./dist/types/components/switch.d.ts" ], "tags-input": [ - "./dist/components/tags-input.d.ts" + "./dist/types/components/tags-input.d.ts" ], "text-input": [ - "./dist/components/text-input.d.ts" + "./dist/types/components/text-input.d.ts" ], "timer": [ - "./dist/components/timer.d.ts" + "./dist/types/components/timer.d.ts" ], "typography": [ - "./dist/components/typography.d.ts" + "./dist/types/components/typography.d.ts" ] } }, @@ -234,7 +266,7 @@ "scripts": { "lint": "eslint --ext .tsx,.ts ./src && prettier --check './**/*.{json,md}'", "format": "eslint --fix --ext .tsx,.ts,.js ./ && prettier --write './**/*.{json,md}'", - "build": "yarn clean && rollup -c rollup.config.mjs && tsc --project ./tsconfig.build.json", + "build": "yarn clean && rollup -c rollup.config.mjs && tsc --project ./tsconfig.build.json && rimraf ./dist/global.js", "clean": "rimraf ./dist", "test": "echo 'No tests' && exit 0", "size-limit": "size-limit", diff --git a/packages/ui/rollup.config.mjs b/packages/ui/rollup.config.mjs index 84a702e7b..36a18bbf1 100644 --- a/packages/ui/rollup.config.mjs +++ b/packages/ui/rollup.config.mjs @@ -1,4 +1,3 @@ -import { resolve } from "path"; import peerDepsExternal from "rollup-plugin-peer-deps-external"; import { nodeResolve } from "@rollup/plugin-node-resolve"; import commonjs from "@rollup/plugin-commonjs"; @@ -6,11 +5,12 @@ import esbuild from "rollup-plugin-esbuild"; import postcss from "rollup-plugin-postcss"; import tailwindcss from "tailwindcss"; import autoprefixer from "autoprefixer"; +import { resolve } from "path"; export default [ { input: [ - "src/global.css", + "src/tailwind-preset.js", "src/index.ts", "src/components/index.ts", "src/components/accordion/index.tsx", @@ -48,7 +48,7 @@ export default [ commonjs(), postcss({ plugins: [ - tailwindcss({ config: resolve("src/tailwind.config.js") }), + tailwindcss({ config: resolve("src/tailwind-config.js") }), autoprefixer, ], extract: resolve("dist/styles.css"), @@ -60,31 +60,37 @@ export default [ ], output: [ { - dir: resolve("./dist"), + dir: resolve("./dist/es"), preserveModules: true, preserveModulesRoot: "src", format: "es", sourcemap: true, + entryFileNames: "[name].mjs", + }, + { + dir: resolve("./dist/cjs"), + preserveModules: true, + preserveModulesRoot: "src", + format: "cjs", + sourcemap: true, + entryFileNames: "[name].cjs", }, ], }, { - input: [resolve("./src/tailwind.preset.js")], + input: resolve("./src/global.css"), plugins: [ - peerDepsExternal(), - nodeResolve({ preferBuiltins: true, rootDir: resolve("../..") }), - commonjs(), + postcss({ + plugins: [ + tailwindcss({ config: "src/tailwind-config.js" }), + autoprefixer, + ], + extract: "styles.css", + }), ], output: [ { - file: resolve("dist/tailwind.preset.js"), - format: "es", - exports: "auto", - }, - { - file: resolve("dist/tailwind.preset.cjs"), - format: "cjs", - exports: "auto", + dir: resolve("./dist"), }, ], }, diff --git a/packages/ui/src/tailwind.config.js b/packages/ui/src/tailwind-config.js similarity index 73% rename from packages/ui/src/tailwind.config.js rename to packages/ui/src/tailwind-config.js index 637c3e42d..3ec4a560c 100644 --- a/packages/ui/src/tailwind.config.js +++ b/packages/ui/src/tailwind-config.js @@ -1,6 +1,6 @@ /** @type {import('tailwindcss').Config} */ module.exports = { content: ["./src/**/*.{js,jsx,ts,tsx}"], - presets: [require("./tailwind.preset.js")], + presets: [require("./tailwind-preset.js")], prefix: "cui-", }; diff --git a/packages/ui/src/tailwind.preset.theme.d.ts b/packages/ui/src/tailwind-preset-theme.d.ts similarity index 100% rename from packages/ui/src/tailwind.preset.theme.d.ts rename to packages/ui/src/tailwind-preset-theme.d.ts diff --git a/packages/ui/src/tailwind.preset.theme.js b/packages/ui/src/tailwind-preset-theme.js similarity index 100% rename from packages/ui/src/tailwind.preset.theme.js rename to packages/ui/src/tailwind-preset-theme.js diff --git a/packages/ui/src/tailwind.preset.js b/packages/ui/src/tailwind-preset.js similarity index 81% rename from packages/ui/src/tailwind.preset.js rename to packages/ui/src/tailwind-preset.js index 6a653c694..822b11b5e 100644 --- a/packages/ui/src/tailwind.preset.js +++ b/packages/ui/src/tailwind-preset.js @@ -1,5 +1,5 @@ // eslint-disable-next-line @typescript-eslint/no-var-requires -const { theme } = require("./tailwind.preset.theme"); +const { theme } = require("./tailwind-preset-theme"); /** @type {import('tailwindcss').Config} */ module.exports = { diff --git a/packages/ui/src/utils/components.tsx b/packages/ui/src/utils/components.tsx index cd3222b6a..81402e99f 100644 --- a/packages/ui/src/utils/components.tsx +++ b/packages/ui/src/utils/components.tsx @@ -1,7 +1,7 @@ import React, { type FC, type ReactNode } from "react"; import { cva, cx } from "class-variance-authority"; import { extendTailwindMerge } from "tailwind-merge"; -import { theme } from "../tailwind.preset.theme"; +import { theme } from "../tailwind-preset-theme"; // eslint-disable-next-line @typescript-eslint/no-explicit-any const classGroups: { [key: string]: any } = {}; diff --git a/packages/ui/tsconfig.build.json b/packages/ui/tsconfig.build.json index 351ec5617..0345629aa 100644 --- a/packages/ui/tsconfig.build.json +++ b/packages/ui/tsconfig.build.json @@ -2,8 +2,11 @@ "extends": "tsconfig/ui.json", "include": ["./src/**/*", "./custom.d.ts"], "compilerOptions": { - "outDir": "./dist", "declaration": true, + "emitDeclarationOnly": true, + "declarationDir": "./dist/types", + "allowJs": true, + "outDir": "./dist", "rootDir": "./src" } }