📦 #23 - build: fix project build structure

.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].*" },

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",

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,

src/components/boolean/boolean.scss

@@ -1,5 +1,3 @@
-@import "../../settings/style";
-
 .mykn-boolean {
   align-items: center;
   border-radius: var(--border-radus-m);

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);

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;
     }

src/components/form/select/select.scss

@@ -1,5 +1,3 @@
-@use "../../../settings/style";
-
 .mykn-select {
   align-items: center;
   background: var(--typography-color-background);

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 @@
     }
   }
 }
-

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);

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);
   }
 }

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%;
 

src/components/toolbar/toolbar.scss

@@ -1,4 +1,4 @@
-@use "../../settings/style";
+@use "../../settings/constants";
 
 .mykn-toolbar {
   $self: &;
@@ -15,15 +15,15 @@
     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 {
       justify-content: start;
     }
   }
 
-  @media screen and (min-width: style.$breakpoint-desktop) {
+  @media screen and (min-width: constants.$breakpoint-desktop) {
     &--align-start {
       align-items: start;
       justify-content: start;

src/components/typography/body/body.scss

@@ -1,5 +1,3 @@
-@use "../../../settings/style";
-
 .mykn-body {
   .mykn-h1,
   .mykn-h2,

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;

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;

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;

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);

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;
 }

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);
-  }}
+  }
+}

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;

src/components/typography/ul/ul.scss

@@ -1,5 +1,4 @@
-@use "../../../settings/style";
-@use '../p/p';
+@use "../p/p";
 
 .mykn-ul {
   @extend .mykn-p;

src/index.tsx

@@ -1 +1,3 @@
+import "./settings/tokens.css";
+
 export * from "./components";

src/settings/_constants.scss

@@ -0,0 +1 @@
+$breakpoint-desktop: 768px;

src/settings/_style.scss → 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;