Merge pull request #50 from aleleba/PR-342468

PR-342468: updating packages.
2025-07-19 11:08:18 -06:00 · 2025-07-16 12:40:32 -06:00
parent 4a4e743b9d b1ef41f175
commit e1617cde03
14 changed files with 6869 additions and 20530 deletions
--- a/.github/workflows/main-workflow.yml
+++ b/.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
-    - name: Use Node.js 16
-      uses: actions/setup-node@v3
+    - uses: actions/checkout@v4
+    - name: Use Node.js 20
+      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
-      - name: Use Node.js 16
-        uses: actions/setup-node@v3
+      - uses: actions/checkout@v4
+      - name: Use Node.js 20
+        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/setup-node@v3
+      - uses: actions/checkout@v4
+      - 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,12 +68,12 @@ jobs:
    needs: [ unit-front-end-testing, cypress-components-testing ]
    runs-on: ubuntu-latest
    steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+      - uses: actions/checkout@v4
+      - 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
        env:
-          NPM_PERSONAL_TOKEN: ${{secrets.npm_token}}
+          NPM_PERSONAL_TOKEN: ${{secrets.npm_token}}
--- a/.storybook/main.js
+++ b/.storybook/main.js
@ -7,36 +7,32 @@ 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",
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@storybook/addon-interactions",
-    {
-      name: '@storybook/addon-styling-webpack',
-      options: {
-        rules: [
-          {
-            test: /\.(css|sass|scss)$/,
-            use: [
-              'style-loader',
-              {
-                loader: 'css-loader',
-                options: {
-                  modules: {
-                    namedExport: false,
-                    exportLocalsConvention: 'as-is',
-                    auto: /\.module\.\w+$/i,
-                  }
-                },
+
+  addons: ["@storybook/addon-webpack5-compiler-babel", "@storybook/addon-links", {
+    name: '@storybook/addon-styling-webpack',
+    options: {
+      rules: [
+        {
+          test: /\.(css|sass|scss)$/,
+          use: [
+            'style-loader',
+            {
+              loader: 'css-loader',
+              options: {
+                modules: {
+                  namedExport: false,
+                  exportLocalsConvention: 'as-is',
+                  auto: /\.module\.\w+$/i,
+                }
              },
-              'sass-loader',
-            ],
-          }
-        ]
-      },
-    }
-  ],
+            },
+            'sass-loader',
+          ],
+        }
+      ]
+    },
+  }, "@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
  }
-};
+};
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@ -6,4 +6,5 @@ export const parameters = {
      date: /Date$/,
    },
  },
-}
+}
+export const tags = ["autodocs"];
--- a/bin/cli.js
+++ b/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`
--- a/cypress/support/component.ts
+++ b/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,8 +32,7 @@ declare global {
  }
 }

-// @ts-ignore
 Cypress.Commands.add('mount', mount)

 // Example use:
-// cy.mount(<MyComponent />)
+// cy.mount(<MyComponent />)
--- a/jest.config.js
+++ b/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>'
@ -14,4 +14,4 @@ module.exports = {
    '\\.(jpg|ico|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': '<rootDir>/src/__mocks__/fileMock.ts',
    '\\.(css|sass|scss|less)$': 'identity-obj-proxy'
  },
-};
+};
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/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/preset-env": "^7.26.0",
-    "@babel/preset-react": "^7.25.9",
-    "@babel/preset-typescript": "^7.26.0",
-    "@babel/register": "^7.25.9",
+    "@babel/core": "^7.28.0",
+    "@babel/preset-env": "^7.28.0",
+    "@babel/preset-react": "^7.27.1",
+    "@babel/preset-typescript": "^7.27.1",
+    "@babel/register": "^7.27.1",
    "@mdx-js/react": "^3.1.0",
-    "@storybook/addon-actions": "^8.3.6",
-    "@storybook/addon-docs": "^8.3.6",
-    "@storybook/addon-essentials": "^8.3.6",
-    "@storybook/addon-interactions": "^8.3.6",
-    "@storybook/addon-links": "^8.3.6",
-    "@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/addon-docs": "^9.0.17",
+    "@storybook/addon-links": "^9.0.17",
+    "@storybook/addon-styling-webpack": "^2.0.0",
+    "@storybook/addon-webpack5-compiler-babel": "^3.0.6",
+    "@storybook/cli": "^9.0.17",
    "@storybook/preset-scss": "^1.0.3",
-    "@storybook/react": "^8.3.6",
-    "@storybook/react-webpack5": "^8.3.6",
-    "@storybook/testing-library": "^0.2.2",
-    "@testing-library/jest-dom": "^6.6.2",
-    "@testing-library/react": "^16.0.1",
-    "@testing-library/user-event": "^14.5.2",
-    "@types/cypress": "^0.1.6",
-    "@types/jest": "^29.5.14",
-    "@types/node": "^22.8.4",
-    "@types/react": "^18.3.12",
-    "@types/react-dom": "^18.3.1",
+    "@storybook/react-webpack5": "^9.0.17",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/jest": "^30.0.0",
+    "@types/node": "^24.0.14",
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.6",
    "@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",
-    "cypress": "^13.15.1",
-    "dotenv": "^16.4.5",
-    "eslint": "^9.13.0",
-    "eslint-plugin-react": "^7.37.2",
-    "eslint-plugin-storybook": "^0.10.1",
-    "eslint-webpack-plugin": "^4.2.0",
+    "css-minimizer-webpack-plugin": "^7.0.2",
+    "cypress": "^14.5.2",
+    "dotenv": "^17.2.0",
+    "eslint": "^9.31.0",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-storybook": "^9.0.17",
+    "eslint-webpack-plugin": "^5.0.2",
    "html-webpack-plugin": "^5.6.3",
    "identity-obj-proxy": "^3.0.0",
-    "jest": "^29.7.0",
-    "jest-environment-jsdom": "^29.7.0",
+    "jest": "^30.0.4",
+    "jest-environment-jsdom": "^30.0.4",
    "jest-fetch-mock": "^3.0.3",
-    "mini-css-extract-plugin": "^2.9.1",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "mini-css-extract-plugin": "^2.9.2",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
    "resolve-ts-aliases": "^1.0.1",
-    "sass": "^1.80.5",
-    "sass-loader": "^16.0.2",
-    "storybook": "^8.3.6",
+    "sass": "^1.89.2",
+    "sass-loader": "^16.0.5",
+    "storybook": "^9.0.17",
    "style-loader": "^4.0.0",
-    "terser-webpack-plugin": "^5.3.10",
-    "ts-jest": "^29.2.5",
-    "ts-loader": "^9.5.1",
-    "tsconfig-paths-webpack-plugin": "^4.1.0",
-    "typescript": "^5.6.3",
+    "terser-webpack-plugin": "^5.3.14",
+    "ts-jest": "^29.4.0",
+    "ts-loader": "^9.5.2",
+    "tsconfig-paths-webpack-plugin": "^4.2.0",
+    "typescript": "^5.8.3",
    "url-loader": "^4.1.1",
-    "webpack": "^5.95.0",
-    "webpack-cli": "^5.1.4",
+    "webpack": "^5.100.2",
+    "webpack-cli": "^6.0.1",
    "webpack-node-externals": "^3.0.0"
  },
  "peerDependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0"
  },
  "files": [
    "./dist"
--- a/src/components/Card/Card.stories.tsx
+++ b/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
--- a/src/components/Card/index.tsx
+++ b/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}) => {
@ -22,4 +22,4 @@ const Card: FC<TCardProps> = ({ title, children}) => {
  );
 };

-export { Card, TCardProps }
+export { Card, TCardProps }
--- a/src/components/tests/Card.test.tsx
+++ b/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();
    })
 })
--- a/src/stories/Introduction.mdx
+++ b/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';
--- a/tsconfig.json
+++ b/tsconfig.json
@ -25,8 +25,7 @@
      "types": [
        "react", 
        "react-dom", 
-        "node",
-        "cypress"
+        "node"
      ],
      "sourceMap": true,
      "baseUrl": ".",
@ -47,4 +46,4 @@
     "PRNameGenerator.ts",
     "cypress.config.ts"
    ]
-}
+}
--- a/webpack.config.ts
+++ b/webpack.config.ts
@ -46,8 +46,18 @@ export default {
    rules: [
    {
      test: /\.(ts|tsx)$/,
-      exclude: /node_modules/,
-      use: 'ts-loader',
+      exclude: [/node_modules/, /\.test\.(ts|tsx)$/, /\.cy\.(ts|tsx)$/],
+      use: {
+        loader: 'ts-loader',
+        options: {
+          onlyCompileBundledFiles: true,
+          compilerOptions: {
+            noEmit: false,
+            declaration: true,
+            declarationDir: './dist/types'
+          }
+        }
+      },
    },
    {
      test: /\.(js|jsx)$/,
@ -88,4 +98,4 @@ export default {
 			new TerserPlugin(),
 		],
 	},
-}
+}