From fedef4b0deda9939b82c9735e72b96416687e607 Mon Sep 17 00:00:00 2001 From: Sven van de Scheur Date: Tue, 30 Jan 2024 13:42:11 +0100 Subject: [PATCH] :package: #23 - build: fix project build structure --- .storybook/preview.tsx | 2 + package-lock.json | 59 ------------------------ package.json | 1 - rollup.config.mjs | 5 +- src/components/boolean/boolean.scss | 2 - src/components/button/button.scss | 2 - src/components/dropdown/dropdown.scss | 8 ++-- src/components/form/select/select.scss | 2 - src/components/layout/column/column.scss | 7 ++- src/components/layout/grid/grid.scss | 4 +- src/components/page/page.scss | 4 +- src/components/paginator/paginator.scss | 4 +- src/components/toolbar/toolbar.scss | 6 +-- src/components/typography/body/body.scss | 2 - src/components/typography/h1/h1.scss | 2 - src/components/typography/h2/h2.scss | 2 - src/components/typography/h3/h3.scss | 2 - src/components/typography/hr/hr.scss | 2 - src/components/typography/li/li.scss | 5 +- src/components/typography/ol/ol.scss | 6 +-- src/components/typography/p/p.scss | 2 - src/components/typography/ul/ul.scss | 3 +- src/index.tsx | 2 + src/settings/_constants.scss | 1 + src/settings/{_style.scss => tokens.css} | 14 ++---- 25 files changed, 34 insertions(+), 115 deletions(-) create mode 100644 src/settings/_constants.scss rename src/settings/{_style.scss => tokens.css} (92%) diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx index d1a5386b..8028159e 100644 --- a/.storybook/preview.tsx +++ b/.storybook/preview.tsx @@ -1,6 +1,8 @@ import type { Preview } from "@storybook/react"; import * as React from "react"; +import "../src/settings/tokens.css"; + const preview: Preview = { parameters: { actions: { argTypesRegex: "^on[A-Z].*" }, diff --git a/package-lock.json b/package-lock.json index 8d83344d..b2e30343 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,7 +16,6 @@ "devDependencies": { "@commitlint/cli": "^18.4.4", "@rollup/plugin-commonjs": "^25.0.7", - "@rollup/plugin-node-resolve": "^15.2.3", "@rollup/plugin-terser": "^0.4.4", "@rollup/plugin-typescript": "^11.1.5", "@storybook/addon-essentials": "^7.6.7", @@ -4690,31 +4689,6 @@ } } }, - "node_modules/@rollup/plugin-node-resolve": { - "version": "15.2.3", - "resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-15.2.3.tgz", - "integrity": "sha512-j/lym8nf5E21LwBT4Df1VD6hRO2L2iwUeUmP7litikRsVp1H6NWx20NEp0Y7su+7XGc476GnXXc4kFeZNGmaSQ==", - "dev": true, - "dependencies": { - "@rollup/pluginutils": "^5.0.1", - "@types/resolve": "1.20.2", - "deepmerge": "^4.2.2", - "is-builtin-module": "^3.2.1", - "is-module": "^1.0.0", - "resolve": "^1.22.1" - }, - "engines": { - "node": ">=14.0.0" - }, - "peerDependencies": { - "rollup": "^2.78.0||^3.0.0||^4.0.0" - }, - "peerDependenciesMeta": { - "rollup": { - "optional": true - } - } - }, "node_modules/@rollup/plugin-terser": { "version": "0.4.4", "resolved": "https://registry.npmjs.org/@rollup/plugin-terser/-/plugin-terser-0.4.4.tgz", @@ -8706,18 +8680,6 @@ "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==", "dev": true }, - "node_modules/builtin-modules": { - "version": "3.3.0", - "resolved": "https://registry.npmjs.org/builtin-modules/-/builtin-modules-3.3.0.tgz", - "integrity": "sha512-zhaCDicdLuWN5UbN5IMnFqNMhNfo919sH85y2/ea+5Yg9TsTkeZxpL+JLbp6cgYFS4sRLp3YV4S6yDuqVWHYOw==", - "dev": true, - "engines": { - "node": ">=6" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, "node_modules/bytes": { "version": "3.1.2", "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz", @@ -13587,21 +13549,6 @@ "url": "https://github.com/sponsors/ljharb" } }, - "node_modules/is-builtin-module": { - "version": "3.2.1", - "resolved": "https://registry.npmjs.org/is-builtin-module/-/is-builtin-module-3.2.1.tgz", - "integrity": "sha512-BSLE3HnV2syZ0FK0iMA/yUGplUeMmNz4AW5fnTunbCIqZi4vG3WjJT9FHMy5D69xmAYBHXQhJdALdpwVxV501A==", - "dev": true, - "dependencies": { - "builtin-modules": "^3.3.0" - }, - "engines": { - "node": ">=6" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, "node_modules/is-callable": { "version": "1.2.7", "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.7.tgz", @@ -13758,12 +13705,6 @@ "url": "https://github.com/sponsors/ljharb" } }, - "node_modules/is-module": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/is-module/-/is-module-1.0.0.tgz", - "integrity": "sha512-51ypPSPCoTEIN9dy5Oy+h4pShgJmPCygKfyRCISBI+JoWT/2oJvK8QPxmwv7b/p239jXrm9M1mlQbyKJ5A152g==", - "dev": true - }, "node_modules/is-nan": { "version": "1.3.2", "resolved": "https://registry.npmjs.org/is-nan/-/is-nan-1.3.2.tgz", diff --git a/package.json b/package.json index 4465870a..459e2b17 100644 --- a/package.json +++ b/package.json @@ -39,7 +39,6 @@ "devDependencies": { "@commitlint/cli": "^18.4.4", "@rollup/plugin-commonjs": "^25.0.7", - "@rollup/plugin-node-resolve": "^15.2.3", "@rollup/plugin-terser": "^0.4.4", "@rollup/plugin-typescript": "^11.1.5", "@storybook/addon-essentials": "^7.6.7", diff --git a/rollup.config.mjs b/rollup.config.mjs index 0de34551..b1fff4b0 100644 --- a/rollup.config.mjs +++ b/rollup.config.mjs @@ -1,5 +1,4 @@ import commonjs from "@rollup/plugin-commonjs"; -import resolve from "@rollup/plugin-node-resolve"; import terser from "@rollup/plugin-terser"; import typescript from "@rollup/plugin-typescript"; import peerDepsExternal from "rollup-plugin-peer-deps-external"; @@ -8,17 +7,17 @@ import postcss_url from "postcss-url"; export default [ { + external: ["@floating-ui/react", "@heroicons/react/24/outline", "@heroicons/react/24/solid", "clsx"], input: "src/index.tsx", output: { dir: "dist", - format: "esm", + format: "cjs", sourcemap: true, preserveModules: true, }, plugins: [ peerDepsExternal(), commonjs(), - resolve(), typescript({ tsconfig: "./tsconfig.json" }), postcss({ autoModules: true, diff --git a/src/components/boolean/boolean.scss b/src/components/boolean/boolean.scss index 332fc815..2bf1e7c5 100644 --- a/src/components/boolean/boolean.scss +++ b/src/components/boolean/boolean.scss @@ -1,5 +1,3 @@ -@import "../../settings/style"; - .mykn-boolean { align-items: center; border-radius: var(--border-radus-m); diff --git a/src/components/button/button.scss b/src/components/button/button.scss index c3e89c3f..657660f6 100644 --- a/src/components/button/button.scss +++ b/src/components/button/button.scss @@ -1,5 +1,3 @@ -@use "../../settings/style"; - .mykn-button { --mykn-button-color-background: var(--theme-color-primary-800); --mykn-button-color-shadow: var(--theme-shade-1000); diff --git a/src/components/dropdown/dropdown.scss b/src/components/dropdown/dropdown.scss index c1353ca6..82ad49a0 100644 --- a/src/components/dropdown/dropdown.scss +++ b/src/components/dropdown/dropdown.scss @@ -1,4 +1,4 @@ -@use "../../settings/style"; +@use "../../settings/constants"; .mykn-dropdown { display: inline-flex; @@ -24,20 +24,20 @@ z-index: 1000; } - @media screen and (max-width: style.$breakpoint-desktop - 1px) { + @media screen and (max-width: constants.$breakpoint-desktop - 1px) { &__dropdown { width: 100%; // Fallback. width: min(100%, max(calc(100vw - 2 * var(--spacing-h-xl)), 100cqw)); } } - @media screen and (min-width: style.$breakpoint-desktop) { + @media screen and (min-width: constants.$breakpoint-desktop) { &__dropdown .mykn-toolbar--direction-horizontal { width: min-content; } } - @media screen and (min-width: style.$breakpoint-desktop) { + @media screen and (min-width: constants.$breakpoint-desktop) { &__dropdown .mykn-toolbar--direction-vertical { width: max-content; } diff --git a/src/components/form/select/select.scss b/src/components/form/select/select.scss index 21780acf..28a55bdc 100644 --- a/src/components/form/select/select.scss +++ b/src/components/form/select/select.scss @@ -1,5 +1,3 @@ -@use "../../../settings/style"; - .mykn-select { align-items: center; background: var(--typography-color-background); diff --git a/src/components/layout/column/column.scss b/src/components/layout/column/column.scss index 01aabd7e..3528cd3e 100644 --- a/src/components/layout/column/column.scss +++ b/src/components/layout/column/column.scss @@ -1,4 +1,4 @@ -@use "../../../settings/style"; +@use "../../../settings/constants"; .mykn-column { grid-column: auto / 6 span; @@ -16,10 +16,10 @@ } &--debug[data-testid]:before { - content: attr(data-testid)!important; + content: attr(data-testid) !important; } - @media screen and (min-width: style.$breakpoint-desktop) { + @media screen and (min-width: constants.$breakpoint-desktop) { @for $i from 1 through 12 { &--span-#{$i} { grid-column: auto / span #{$i}; @@ -31,4 +31,3 @@ } } } - diff --git a/src/components/layout/grid/grid.scss b/src/components/layout/grid/grid.scss index ddec0ede..c8c676a7 100644 --- a/src/components/layout/grid/grid.scss +++ b/src/components/layout/grid/grid.scss @@ -1,4 +1,4 @@ -@use "../../../settings/style"; +@use "../../../settings/constants"; .mykn-grid { display: grid; @@ -23,7 +23,7 @@ content: attr(data-testid); } - @media screen and (min-width: style.$breakpoint-desktop) { + @media screen and (min-width: constants.$breakpoint-desktop) { & { grid-template-columns: repeat(12, auto); gap: var(--gutter-v-desktop) var(--gutter-h-desktop); diff --git a/src/components/page/page.scss b/src/components/page/page.scss index c6aad0f8..57fd9f02 100644 --- a/src/components/page/page.scss +++ b/src/components/page/page.scss @@ -1,4 +1,4 @@ -@use '../../settings/style'; +@use "../../settings/constants"; .mykn-page { background-color: var(--theme-color-primary-200); @@ -9,7 +9,7 @@ width: 100%; height: 100%; - @media screen and (min-width: style.$breakpoint-desktop) { + @media screen and (min-width: constants.$breakpoint-desktop) { padding: var(--spacing-v-xl) var(--spacing-h-xl); } } diff --git a/src/components/paginator/paginator.scss b/src/components/paginator/paginator.scss index 2912da29..df0746cb 100644 --- a/src/components/paginator/paginator.scss +++ b/src/components/paginator/paginator.scss @@ -1,4 +1,4 @@ -@use "../../settings/style"; +@use "../../settings/constants"; .mykn-paginator { display: flex; @@ -11,7 +11,7 @@ gap: var(--spacing-h-m); } - @media screen and (max-width: style.$breakpoint-desktop - 1px) { + @media screen and (max-width: constants.$breakpoint-desktop - 1px) { &__section { width: 100%; diff --git a/src/components/toolbar/toolbar.scss b/src/components/toolbar/toolbar.scss index 4cb030b4..7b7a3de9 100644 --- a/src/components/toolbar/toolbar.scss +++ b/src/components/toolbar/toolbar.scss @@ -1,4 +1,4 @@ -@use "../../settings/style"; +@use "../../settings/constants"; .mykn-toolbar { $self: &; @@ -15,7 +15,7 @@ background-color: transparent; } - @media screen and (max-width: style.$breakpoint-desktop - 1px) { + @media screen and (max-width: constants.$breakpoint-desktop - 1px) { .mykn-a, .mykn-button, .mykn-dropdown { @@ -23,7 +23,7 @@ } } - @media screen and (min-width: style.$breakpoint-desktop) { + @media screen and (min-width: constants.$breakpoint-desktop) { &--align-start { align-items: start; justify-content: start; diff --git a/src/components/typography/body/body.scss b/src/components/typography/body/body.scss index 3ebe1e3b..3812deea 100644 --- a/src/components/typography/body/body.scss +++ b/src/components/typography/body/body.scss @@ -1,5 +1,3 @@ -@use "../../../settings/style"; - .mykn-body { .mykn-h1, .mykn-h2, diff --git a/src/components/typography/h1/h1.scss b/src/components/typography/h1/h1.scss index 971368dd..428e1050 100644 --- a/src/components/typography/h1/h1.scss +++ b/src/components/typography/h1/h1.scss @@ -1,5 +1,3 @@ -@use "../../../settings/style"; - .mykn-h1 { color: var(--typography-color-h); font-family: Inter, sans-serif; diff --git a/src/components/typography/h2/h2.scss b/src/components/typography/h2/h2.scss index 24f068d8..a5c177b8 100644 --- a/src/components/typography/h2/h2.scss +++ b/src/components/typography/h2/h2.scss @@ -1,5 +1,3 @@ -@use "../../../settings/style"; - .mykn-h2 { color: var(--typography-color-h); font-family: Inter, sans-serif; diff --git a/src/components/typography/h3/h3.scss b/src/components/typography/h3/h3.scss index 212af7c0..578cac83 100644 --- a/src/components/typography/h3/h3.scss +++ b/src/components/typography/h3/h3.scss @@ -1,5 +1,3 @@ -@use "../../../settings/style"; - .mykn-h3 { color: var(--typography-color-h); font-family: Inter, sans-serif; diff --git a/src/components/typography/hr/hr.scss b/src/components/typography/hr/hr.scss index 3d3aeed7..b2199a1f 100644 --- a/src/components/typography/hr/hr.scss +++ b/src/components/typography/hr/hr.scss @@ -1,5 +1,3 @@ -@use '../../../settings/style'; - .mykn-hr { border: 0; border-bottom: 1px solid var(--theme-shade-300); diff --git a/src/components/typography/li/li.scss b/src/components/typography/li/li.scss index b99004f0..c064b327 100644 --- a/src/components/typography/li/li.scss +++ b/src/components/typography/li/li.scss @@ -1,6 +1,5 @@ -@use "../../../settings/style"; -@use '../p/p'; +@use "../p/p"; .mykn-li { - @extend .mykn-p + @extend .mykn-p; } diff --git a/src/components/typography/ol/ol.scss b/src/components/typography/ol/ol.scss index 32d59c9d..a94f796d 100644 --- a/src/components/typography/ol/ol.scss +++ b/src/components/typography/ol/ol.scss @@ -1,5 +1,4 @@ -@use "../../../settings/style"; -@use '../p/p'; +@use "../p/p"; .mykn-ol { @extend .mykn-p; @@ -8,4 +7,5 @@ .mykn-ol { padding-inline-start: var(--spacing-h-xl); - }} + } +} diff --git a/src/components/typography/p/p.scss b/src/components/typography/p/p.scss index ea630d15..63ad0565 100644 --- a/src/components/typography/p/p.scss +++ b/src/components/typography/p/p.scss @@ -1,5 +1,3 @@ -@use "../../../settings/style"; - .mykn-p { color: var(--typography-color-body); font-family: Inter, sans-serif; diff --git a/src/components/typography/ul/ul.scss b/src/components/typography/ul/ul.scss index 82056e6d..fd53d202 100644 --- a/src/components/typography/ul/ul.scss +++ b/src/components/typography/ul/ul.scss @@ -1,5 +1,4 @@ -@use "../../../settings/style"; -@use '../p/p'; +@use "../p/p"; .mykn-ul { @extend .mykn-p; diff --git a/src/index.tsx b/src/index.tsx index 40b494c5..eab77fc4 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1 +1,3 @@ +import "./settings/tokens.css"; + export * from "./components"; diff --git a/src/settings/_constants.scss b/src/settings/_constants.scss new file mode 100644 index 00000000..2c21e9a7 --- /dev/null +++ b/src/settings/_constants.scss @@ -0,0 +1 @@ +$breakpoint-desktop: 768px; diff --git a/src/settings/_style.scss b/src/settings/tokens.css similarity index 92% rename from src/settings/_style.scss rename to src/settings/tokens.css index 1cbe3c95..b1e264b2 100644 --- a/src/settings/_style.scss +++ b/src/settings/tokens.css @@ -1,12 +1,11 @@ -/// USE CSS VARIABLES WHERE POSSIBLE :root { - /// ANIMATION + /* ANIMATION */ --animation-timing-function: ease-in-out; --animation-duration-fast: 0.1s; --animation-duration-medium: 0.3s; --animation-duration-slow: 1s; - /// THEME + /* THEME */ --theme-color-primary-800: #341a90; --theme-color-primary-700: #5422b9; --theme-color-primary-600: #8d75e6; @@ -31,7 +30,7 @@ --theme-color-danger-body: #ff4545; --theme-color-danger-background: #{rgba(#ff4545, 0.1)}; - /// SPACING + /* SPACING */ --border-radus-l: 12px; --border-radus-m: 6px; @@ -53,7 +52,7 @@ --spacing-h-xxl: 32px; --spacing-v-xxl: 32px; - /// TYPOGRAPHY + /* TYPOGRAPHY */ --typography-color-background: var(--theme-shade-0); --typography-color-h: var(--theme-shade-900); --typography-color-body: var(--theme-shade-700); @@ -75,10 +74,7 @@ --typography-line-height-body-xs: 24px; } -/// SASS CONSTANTS AS FALLBACK -$breakpoint-desktop: 768px; - -/// ASSETS +/* ASSETS */ @font-face { font-family: "Inter"; font-style: normal;