Merge pull request #50 from aleleba/PR-342468

PR-342468: updating packages.

.github/workflows/main-workflow.yml

@@ -16,14 +16,14 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [16.x]
+        node-version: [20.x]
         # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
     steps:
-    - uses: actions/checkout@v3
+    - uses: actions/checkout@v4
-    - name: Use Node.js 16
+    - name: Use Node.js 20
-      uses: actions/setup-node@v3
+      uses: actions/setup-node@v4
       with:
-        node-version: 16
+        node-version: 20
         cache: 'npm'
         registry-url: https://registry.npmjs.org/
     - run: npm ci
@@ -33,17 +33,17 @@ jobs:
   cypress-components-testing:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
-      - name: Use Node.js 16
+      - name: Use Node.js 20
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
-          node-version: 16
+          node-version: 20
           cache: 'npm'
           registry-url: https://registry.npmjs.org/
       - name: Cypress install
         run: npm install
       - name: Cypress run
-        uses: cypress-io/github-action@v5
+        uses: cypress-io/github-action@v6
         with:
           install: false
           component: true
@@ -54,10 +54,10 @@ jobs:
     needs: [ unit-front-end-testing, cypress-components-testing ]
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
-          node-version: 16
+          node-version: 20
           registry-url: https://registry.npmjs.org/
       - run: npm ci --legacy-peer-deps
       - run: npm run build
@@ -68,10 +68,10 @@ jobs:
     needs: [ unit-front-end-testing, cypress-components-testing ]
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
-          node-version: 16
+          node-version: 20
           registry-url: https://registry.npmjs.org/
       - run: npm ci
       - run: npm publish --access=public

.storybook/main.js

@@ -7,12 +7,8 @@ const prefixUrl = process.env.PREFIX_URL ? process.env.PREFIX_URL : deFaultValue
 
 module.exports = {
   stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
-  addons: [
+
-    "@storybook/addon-webpack5-compiler-babel",
+  addons: ["@storybook/addon-webpack5-compiler-babel", "@storybook/addon-links", {
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@storybook/addon-interactions",
-    {
     name: '@storybook/addon-styling-webpack',
     options: {
       rules: [
@@ -35,8 +31,8 @@ module.exports = {
         }
       ]
     },
-    }
+  }, "@storybook/addon-docs"],
-  ],
+
   webpackFinal: async config => {
     config.entry = config.entry.map(function(entry) {
       if (entry.includes("webpack-hot-middleware")) {
@@ -51,10 +47,12 @@ module.exports = {
     config.resolve.plugins = [new TsconfigPathsPlugin()];
     return config;
   },
+
   framework: {
     name: "@storybook/react-webpack5",
     options: {}
   },
+
   typescript: {
     reactDocgenTypescriptOptions: {
       compilerOptions: {
@@ -63,11 +61,5 @@ module.exports = {
         }
       }
     }
-  },
-  features: {
-    previewMdx2: true
-  },
-  docs: {
-    autodocs: true
   }
 };

.storybook/preview.js

@@ -7,3 +7,4 @@ export const parameters = {
     },
   },
 }
+export const tags = ["autodocs"];

bin/cli.js

@@ -67,7 +67,7 @@ if(!checkedOut) process.exit(-1);
 
 const actualVersion = runCommandWithOutput(`cd ${repoName} && node -p "require('./package.json').version"`).toString().trim()
 
-const installDepsCommand = `cd ${repoName} && npm install`;
+const installDepsCommand = `cd ${repoName} && npm install --legacy-peer-deps`;
 const cleanGitHistoryCommand = `cd ${repoName} && rm -rf .git && git init && git add --all -- ":!.github" ":!bin" && git commit -m "Initial commit"`
 const cleanGitHistoryCommandWindows = `cd ${repoName} && rmdir .git /s /q && git init && git add --all -- ":!.github" ":!bin" && git commit -m "Initial commit"`
 const deleteFoldersCommand = `cd ${repoName} && rm -rf .github && rm -rf bin`

cypress/support/component.ts

@@ -1,3 +1,4 @@
+
 // ***********************************************************
 // This example support/component.ts is processed and
 // loaded automatically before your test files.
@@ -19,12 +20,10 @@ import './commands'
 // Alternatively you can use CommonJS syntax:
 // require('./commands')
 
-import { mount } from 'cypress/react18'
+import { mount } from 'cypress/react'
 
 // Augment the Cypress namespace to include type definitions for
 // your custom command.
-// Alternatively, can be defined in cypress/support/component.d.ts
-// with a <reference path="./component" /> at the top of your spec.
 declare global {
   namespace Cypress {
     interface Chainable {
@@ -33,7 +32,6 @@ declare global {
   }
 }
 
-// @ts-ignore
 Cypress.Commands.add('mount', mount)
 
 // Example use:

jest.config.js

@@ -1,5 +1,5 @@
 const { pathsToModuleNameMapper } = require('ts-jest');
-const { compilerOptions } = require('./tsconfig');
+const { compilerOptions } = require('./tsconfig.json');
 
 const aliases = pathsToModuleNameMapper(compilerOptions.paths, {
 	prefix: '<rootDir>'

package.json

@@ -1,9 +1,18 @@
 {
   "name": "@aleleba/create-react-component-library",
-  "version": "1.2.27",
+  "version": "1.3.0",
   "description": "A starter kit for create a React component Library with storybook",
   "bin": "./bin/cli.js",
   "main": "dist/index.js",
+  "types": "dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.js"
+    },
+    "./dist/index.css": "./dist/index.css"
+  },
   "scripts": {
     "start": "npm run storybook",
     "build": "webpack",
@@ -13,7 +22,7 @@
     "test:watch": "jest --watch",
     "storybook": "storybook dev -p 3000",
     "build-storybook": "storybook build",
-    "check-updates": "npx npm-check-updates -u --reject @types/cypress && npm i",
+    "check-updates": "npx npm-check-updates -u && npm i --legacy-peer-deps",
     "cy:open": "npx cypress open",
     "cy:run": "npx cypress run --headless --component"
   },
@@ -35,71 +44,64 @@
   },
   "homepage": "https://github.com/aleleba/create-react-component-library#readme",
   "devDependencies": {
-    "@babel/core": "^7.26.0",
+    "@babel/core": "^7.28.0",
-    "@babel/preset-env": "^7.26.0",
+    "@babel/preset-env": "^7.28.0",
-    "@babel/preset-react": "^7.25.9",
+    "@babel/preset-react": "^7.27.1",
-    "@babel/preset-typescript": "^7.26.0",
+    "@babel/preset-typescript": "^7.27.1",
-    "@babel/register": "^7.25.9",
+    "@babel/register": "^7.27.1",
     "@mdx-js/react": "^3.1.0",
-    "@storybook/addon-actions": "^8.3.6",
+    "@storybook/addon-docs": "^9.0.17",
-    "@storybook/addon-docs": "^8.3.6",
+    "@storybook/addon-links": "^9.0.17",
-    "@storybook/addon-essentials": "^8.3.6",
+    "@storybook/addon-styling-webpack": "^2.0.0",
-    "@storybook/addon-interactions": "^8.3.6",
+    "@storybook/addon-webpack5-compiler-babel": "^3.0.6",
-    "@storybook/addon-links": "^8.3.6",
+    "@storybook/cli": "^9.0.17",
-    "@storybook/addon-styling-webpack": "^1.0.0",
-    "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
-    "@storybook/blocks": "^8.3.6",
-    "@storybook/cli": "^8.3.6",
-    "@storybook/mdx2-csf": "^1.1.0",
     "@storybook/preset-scss": "^1.0.3",
-    "@storybook/react": "^8.3.6",
+    "@storybook/react-webpack5": "^9.0.17",
-    "@storybook/react-webpack5": "^8.3.6",
+    "@testing-library/dom": "^10.4.0",
-    "@storybook/testing-library": "^0.2.2",
+    "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/jest-dom": "^6.6.2",
+    "@testing-library/react": "^16.3.0",
-    "@testing-library/react": "^16.0.1",
+    "@testing-library/user-event": "^14.6.1",
-    "@testing-library/user-event": "^14.5.2",
+    "@types/jest": "^30.0.0",
-    "@types/cypress": "^0.1.6",
+    "@types/node": "^24.0.14",
-    "@types/jest": "^29.5.14",
+    "@types/react": "^19.1.8",
-    "@types/node": "^22.8.4",
+    "@types/react-dom": "^19.1.6",
-    "@types/react": "^18.3.12",
-    "@types/react-dom": "^18.3.1",
     "@types/webpack": "^5.28.5",
-    "babel-loader": "^9.2.1",
+    "babel-loader": "^10.0.0",
     "clean-webpack-plugin": "^4.0.0",
     "css-loader": "^7.1.2",
-    "css-minimizer-webpack-plugin": "^7.0.0",
+    "css-minimizer-webpack-plugin": "^7.0.2",
-    "cypress": "^13.15.1",
+    "cypress": "^14.5.2",
-    "dotenv": "^16.4.5",
+    "dotenv": "^17.2.0",
-    "eslint": "^9.13.0",
+    "eslint": "^9.31.0",
-    "eslint-plugin-react": "^7.37.2",
+    "eslint-plugin-react": "^7.37.5",
-    "eslint-plugin-storybook": "^0.10.1",
+    "eslint-plugin-storybook": "^9.0.17",
-    "eslint-webpack-plugin": "^4.2.0",
+    "eslint-webpack-plugin": "^5.0.2",
     "html-webpack-plugin": "^5.6.3",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^29.7.0",
+    "jest": "^30.0.4",
-    "jest-environment-jsdom": "^29.7.0",
+    "jest-environment-jsdom": "^30.0.4",
     "jest-fetch-mock": "^3.0.3",
-    "mini-css-extract-plugin": "^2.9.1",
+    "mini-css-extract-plugin": "^2.9.2",
-    "react": "^18.3.1",
+    "react": "^19.1.0",
-    "react-dom": "^18.3.1",
+    "react-dom": "^19.1.0",
     "resolve-ts-aliases": "^1.0.1",
-    "sass": "^1.80.5",
+    "sass": "^1.89.2",
-    "sass-loader": "^16.0.2",
+    "sass-loader": "^16.0.5",
-    "storybook": "^8.3.6",
+    "storybook": "^9.0.17",
     "style-loader": "^4.0.0",
-    "terser-webpack-plugin": "^5.3.10",
+    "terser-webpack-plugin": "^5.3.14",
-    "ts-jest": "^29.2.5",
+    "ts-jest": "^29.4.0",
-    "ts-loader": "^9.5.1",
+    "ts-loader": "^9.5.2",
-    "tsconfig-paths-webpack-plugin": "^4.1.0",
+    "tsconfig-paths-webpack-plugin": "^4.2.0",
-    "typescript": "^5.6.3",
+    "typescript": "^5.8.3",
     "url-loader": "^4.1.1",
-    "webpack": "^5.95.0",
+    "webpack": "^5.100.2",
-    "webpack-cli": "^5.1.4",
+    "webpack-cli": "^6.0.1",
     "webpack-node-externals": "^3.0.0"
   },
   "peerDependencies": {
-    "react": "^18.2.0",
+    "react": "^19.1.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^19.1.0"
   },
   "files": [
     "./dist"

src/components/Card/Card.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { StoryFn, Meta } from '@storybook/react';
+import { StoryFn, Meta } from '@storybook/react-webpack5';
 import { Card } from '@components';
 
 // More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export

src/components/Card/index.tsx

@@ -9,7 +9,7 @@ type TCardProps = {
   /**
    * Is this the child component of the card. (The content)
    */
-  children?: JSX.Element,
+  children?: React.ReactNode,
 };
 
 const Card: FC<TCardProps> = ({ title, children}) => {

src/components/__tests__/Card.test.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { Card } from '@components';
 
-describe('<App/> Component', () => {
+describe('<Card/> Component', () => {
     beforeEach(() => {
         // fetchMock.resetMocks();
         render(<Card title='Test Title'><p>Test Content</p></Card>)
@@ -12,13 +12,13 @@ describe('<App/> Component', () => {
             //First Data Fetch
             data: 'data'
         })); */
-        screen.getByText('Test Title')
+        expect(screen.getByText('Test Title')).toBeInTheDocument();
     })
     it('Show Child Component', async () => {
         /* fetchMock.mockResponseOnce(JSON.stringify({
             //First Data Fetch
             data: 'data'
         })); */
-        screen.getByText('Test Content')
+        expect(screen.getByText('Test Content')).toBeInTheDocument();
     })
 })

src/stories/Introduction.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/blocks';
+import { Meta } from '@storybook/addon-docs/blocks';
 import Code from './assets/code-brackets.svg';
 import Colors from './assets/colors.svg';
 import Comments from './assets/comments.svg';

tsconfig.json

@@ -25,8 +25,7 @@
       "types": [
         "react", 
         "react-dom", 
-        "node",
+        "node"
-        "cypress"
       ],
       "sourceMap": true,
       "baseUrl": ".",

webpack.config.ts

@@ -46,8 +46,18 @@ export default {
     rules: [
     {
       test: /\.(ts|tsx)$/,
-      exclude: /node_modules/,
+      exclude: [/node_modules/, /\.test\.(ts|tsx)$/, /\.cy\.(ts|tsx)$/],
-      use: 'ts-loader',
+      use: {
+        loader: 'ts-loader',
+        options: {
+          onlyCompileBundledFiles: true,
+          compilerOptions: {
+            noEmit: false,
+            declaration: true,
+            declarationDir: './dist/types'
+          }
+        }
+      },
     },
     {
       test: /\.(js|jsx)$/,