Rebuild UI architecture

.github/workflows/publish.yml

@@ -37,16 +37,11 @@ jobs:
                   echo "//npm.pkg.github.com/:_authToken=${{ secrets.GITHUB_TOKEN }}" >> ~/.npmrc
                   echo "@miksrv:registry=https://npm.pkg.github.com/" >> ~/.npmrc
 
-            - name: Create Release Pull Request or Publish to npm
+            - name: Create Release and Publish to npm
               id: changesets
               uses: changesets/action@v1
               with:
                   publish: yarn release
               env:
                   GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
                   NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
-
-            - name: Publish to GitHub Packages
-              run: npm publish
-              env:
-                  NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/storybook.yml

@@ -5,7 +5,7 @@ on:
         branches:
             - main
         paths:
-             - 'storybook/**'
+            - 'storybook/**'
 
 jobs:
     build-storybook:

.prettierignore

@@ -4,6 +4,7 @@
 *.css
 README.md
 eslint.config.mjs
+rollup.config.js
 site.webmanifest
 node_modules
 dist

CHANGELOG.md

@@ -1,5 +1,14 @@
 # simple-react-ui-kit
 
+## 1.0.3
+
+### Patch Changes
+
+-   Rebuild UI architecture
+-   Fixed Button component styles
+-   Added story for Button component
+-   Rename concat class names functions (cn)
+
 ## 1.0.2
 
 ### Patch Changes

eslint.config.mjs

@@ -34,17 +34,22 @@ export default [
             '**/.yarn/**',
             '**/eslint.config.mjs',
             '**/eslint.config.js',
+            '**/eslint.config.cjs',
             '**/jest.config.ts',
+            '**/declarations.d.ts',
             '**/node_modules/**',
+            '**/build/**',
             '**/dist/**',
             '**/fixtures/**',
             '**/coverage/**',
             '**/__snapshots__/**',
             '**/.docusaurus/**',
-            '**/build/**',
 
             // WebPack
-            '**/webpack.config.js',
+            // '**/webpack.config.js',
+
+            // RollUp
+            '**/rollup.config.js',
 
             // PM2 Server
             // '**/ecosystem.config.js',
@@ -84,7 +89,7 @@ export default [
                     // in the rare case that we do - just need to manually restart their IDE.
                     glob: 'Infinity'
                 },
-                project: ['tsconfig.json'],
+                project: ['eslint.tsconfig.json'],
                 warnOnUnsupportedTypeScriptVersion: false
             }
         },

eslint.tsconfig.json

@@ -0,0 +1,26 @@
+{
+    "compilerOptions": {
+        "baseUrl": "src",
+
+        "target": "es2022",
+        "module": "es2020",
+        "lib": ["dom", "dom.iterable", "esnext", "es2018"],
+
+        "strict": true,
+        "allowJs": false,
+        "skipLibCheck": true,
+        "esModuleInterop": true,
+        "allowSyntheticDefaultImports": true,
+        "forceConsistentCasingInFileNames": true,
+        "noFallthroughCasesInSwitch": true,
+        "moduleResolution": "node",
+        "resolveJsonModule": true,
+        "isolatedModules": true,
+        "jsx": "react-jsx",
+        "downlevelIteration": true,
+        "declaration": true,
+        "declarationDir": "dist"
+    },
+    "include": ["src", "storybook"],
+    "exclude": ["node_modules", "dist"]
+}

package.json

@@ -1,10 +1,10 @@
 {
     "name": "simple-react-ui-kit",
-    "version": "1.0.2",
+    "version": "1.0.3",
     "description": "My small UI framework for projects",
     "repository": "https://github.com/miksrv/simple-react-ui-kit.git",
     "scripts": {
-        "build": "webpack",
+        "build": "rollup -c",
         "changeset": "npx changeset",
         "changeversion": "npx changeset version",
         "release": "changeset publish",
@@ -17,8 +17,10 @@
     "publishConfig": {
         "access": "public"
     },
+    "type": "module",
     "access": "public",
-    "main": "dist/index.js",
+    "main": "dist/index.cjs.js",
+    "module": "dist/index.esm.js",
     "types": "dist/index.d.ts",
     "files": [
         "dist",
@@ -29,18 +31,15 @@
     "author": "Misha Topchilo <20854498+miksrv@users.noreply.github.com>",
     "license": "ISC",
     "devDependencies": {
-        "@babel/core": "^7.25.2",
-        "@babel/preset-env": "^7.25.4",
-        "@babel/preset-react": "^7.24.7",
-        "@babel/preset-typescript": "^7.24.7",
         "@changesets/cli": "^2.27.8",
         "@eslint/compat": "^1.1.1",
         "@eslint/js": "^9.11.1",
+        "@rollup/plugin-commonjs": "^28.0.0",
+        "@rollup/plugin-node-resolve": "^15.3.0",
+        "@rollup/plugin-terser": "^0.4.4",
         "@types/lodash-es": "^4.17.12",
         "@types/react": "^18.3.10",
         "@types/react-dom": "^18.3.0",
-        "babel-loader": "^9.2.1",
-        "css-loader": "^7.1.2",
         "eslint": "^9.11.1",
         "eslint-plugin-eslint-comments": "^3.2.0",
         "eslint-plugin-eslint-plugin": "^6.2.0",
@@ -49,19 +48,18 @@
         "eslint-plugin-react": "^7.37.1",
         "eslint-plugin-simple-import-sort": "^12.1.1",
         "globals": "^15.10.0",
-        "html-webpack-plugin": "^5.6.0",
         "jest": "^29.7.0",
+        "postcss-sass": "^0.5.0",
         "prettier": "^3.3.3",
+        "rollup": "^4.24.0",
+        "rollup-plugin-postcss": "^4.0.2",
+        "rollup-plugin-terser": "^7.0.2",
+        "rollup-plugin-typescript2": "^0.36.0",
         "sass": "^1.79.4",
         "sass-loader": "^16.0.2",
         "style-loader": "^4.0.0",
-        "ts-loader": "^9.5.1",
-        "tsconfig-paths-webpack-plugin": "^4.1.0",
         "typescript": "^5.6.2",
-        "typescript-eslint": "^8.8.0",
-        "webpack": "^5.95.0",
-        "webpack-cli": "^5.1.4",
-        "webpack-dev-server": "^5.1.0"
+        "typescript-eslint": "^8.8.0"
     },
     "dependencies": {
         "embla-carousel-react": "^8.3.0",

rollup.config.js

@@ -0,0 +1,35 @@
+import typescript from 'rollup-plugin-typescript2';
+import resolve from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
+import postcss from 'rollup-plugin-postcss';
+import { terser } from 'rollup-plugin-terser';
+
+export default {
+    input: 'src/index.ts',
+    output: [
+        {
+            file: 'dist/index.esm.js',
+            format: 'esm',
+            sourcemap: false
+        }
+    ],
+    plugins: [
+        resolve(),
+        commonjs(),
+        terser(), // Минификация
+        typescript({
+            tsconfig: './tsconfig.json',
+            useTsconfigDeclarationDir: true,
+            clean: true
+        }),
+        postcss({
+            extensions: ['.sass', '.scss'],
+            extract: false,
+            modules: true,
+            use: [
+                ['sass', { includePaths: ['./src/styles'] }]
+            ]
+        })
+    ],
+    external: ['react', 'react-dom']
+};