Merge pull request #51 from aleleba/PR-500824

PR-500824: updating packages.

.github/workflows/main-workflow.yml

@@ -41,7 +41,7 @@ jobs:
           cache: 'npm'
           registry-url: https://registry.npmjs.org/
       - name: Cypress install
-        run: npm install
+        run: npm i
       - name: Cypress run
         uses: cypress-io/github-action@v6
         with:
@@ -59,7 +59,7 @@ jobs:
         with:
           node-version: 20
           registry-url: https://registry.npmjs.org/
-      - run: npm ci --legacy-peer-deps
+      - run: npm ci
       - run: npm run build
   
   # Job to publish the package to npm

.storybook/main.js

@@ -59,7 +59,23 @@ module.exports = {
         "paths": {
           "@Components/*": ["Components/*"]
         }
+      },
+      propFilter: (prop) => {
+        // Filter out props that might contain Symbol values
+        if (prop.name && typeof prop.name === 'symbol') {
+          return false;
+        }
+        // Filter out React internal props that might cause issues
+        if (prop.name && prop.name.startsWith('$$')) {
+          return false;
+        }
+        return true;
       }
     }
+  },
+
+  docs: {
+    autodocs: 'tag',
+    defaultName: 'Docs',
   }
 };

.storybook/preview.js

@@ -6,5 +6,24 @@ export const parameters = {
       date: /Date$/,
     },
   },
+  docs: {
+    extractArgTypes: (component) => {
+      // Filter out Symbol values to prevent serialization errors
+      const argTypes = {};
+      if (component && component.propTypes) {
+        Object.keys(component.propTypes).forEach(key => {
+          const propType = component.propTypes[key];
+          // Only include non-Symbol values
+          if (typeof propType !== 'symbol') {
+            argTypes[key] = propType;
+          }
+        });
+      }
+      return argTypes;
+    },
+    source: {
+      excludeDecorators: true,
+    },
+  },
 }
-export const tags = ["autodocs"];
+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 --legacy-peer-deps`;
+const installDepsCommand = `cd ${repoName} && npm i`;
 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`

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aleleba/create-react-component-library",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "description": "A starter kit for create a React component Library with storybook",
   "bin": "./bin/cli.js",
   "main": "dist/index.js",
@@ -22,7 +22,7 @@
     "test:watch": "jest --watch",
     "storybook": "storybook dev -p 3000",
     "build-storybook": "storybook build",
-    "check-updates": "npx npm-check-updates -u && npm i --legacy-peer-deps",
+    "check-updates": "npx npm-check-updates -u && npm i",
     "cy:open": "npx cypress open",
     "cy:run": "npx cypress run --headless --component"
   },
@@ -50,52 +50,52 @@
     "@babel/preset-typescript": "^7.27.1",
     "@babel/register": "^7.27.1",
     "@mdx-js/react": "^3.1.0",
-    "@storybook/addon-docs": "^9.0.17",
-    "@storybook/addon-links": "^9.0.17",
+    "@storybook/addon-docs": "^9.1.1",
+    "@storybook/addon-links": "^9.1.1",
     "@storybook/addon-styling-webpack": "^2.0.0",
     "@storybook/addon-webpack5-compiler-babel": "^3.0.6",
-    "@storybook/cli": "^9.0.17",
+    "@storybook/cli": "^9.1.1",
     "@storybook/preset-scss": "^1.0.3",
-    "@storybook/react-webpack5": "^9.0.17",
-    "@testing-library/dom": "^10.4.0",
-    "@testing-library/jest-dom": "^6.6.3",
+    "@storybook/react-webpack5": "^9.1.1",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6.6.4",
     "@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/node": "^24.2.1",
+    "@types/react": "^19.1.9",
+    "@types/react-dom": "^19.1.7",
     "@types/webpack": "^5.28.5",
     "babel-loader": "^10.0.0",
     "clean-webpack-plugin": "^4.0.0",
     "css-loader": "^7.1.2",
     "css-minimizer-webpack-plugin": "^7.0.2",
-    "cypress": "^14.5.2",
-    "dotenv": "^17.2.0",
-    "eslint": "^9.31.0",
+    "cypress": "^14.5.4",
+    "dotenv": "^17.2.1",
+    "eslint": "^9.33.0",
     "eslint-plugin-react": "^7.37.5",
-    "eslint-plugin-storybook": "^9.0.17",
+    "eslint-plugin-storybook": "^9.1.1",
     "eslint-webpack-plugin": "^5.0.2",
     "html-webpack-plugin": "^5.6.3",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^30.0.4",
-    "jest-environment-jsdom": "^30.0.4",
+    "jest": "^30.0.5",
+    "jest-environment-jsdom": "^30.0.5",
     "jest-fetch-mock": "^3.0.3",
-    "mini-css-extract-plugin": "^2.9.2",
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0",
+    "mini-css-extract-plugin": "^2.9.3",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
     "resolve-ts-aliases": "^1.0.1",
-    "sass": "^1.89.2",
+    "sass": "^1.90.0",
     "sass-loader": "^16.0.5",
-    "storybook": "^9.0.17",
+    "storybook": "^9.1.1",
     "style-loader": "^4.0.0",
     "terser-webpack-plugin": "^5.3.14",
-    "ts-jest": "^29.4.0",
+    "ts-jest": "^29.4.1",
     "ts-loader": "^9.5.2",
     "tsconfig-paths-webpack-plugin": "^4.2.0",
-    "typescript": "^5.8.3",
+    "typescript": "^5.9.2",
     "url-loader": "^4.1.1",
-    "webpack": "^5.100.2",
+    "webpack": "^5.101.0",
     "webpack-cli": "^6.0.1",
     "webpack-node-externals": "^3.0.0"
   },

src/components/Card/Card.stories.tsx

@@ -1,19 +1,37 @@
 import React from 'react';
-import { StoryFn, Meta } from '@storybook/react-webpack5';
+import type { Meta, StoryObj } from '@storybook/react';
 import { Card } from '@components';
 
 // More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
+const meta: Meta<typeof Card> = {
   title: 'Example/Card',
   component: Card,
-} as Meta<typeof Card>;
-
-// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Template: StoryFn<typeof Card> = (args) => <Card {...args} />;
-
-export const Basic = Template.bind({});
-// More on args: https://storybook.js.org/docs/react/writing-stories/args
-Basic.args = {
-  title: 'Test Title',
-  children: <p>Test Content</p>,
+  parameters: {
+    docs: {
+      description: {
+        component: 'A reusable Card component for displaying content with an optional title.',
+      },
+    },
+  },
+  argTypes: {
+    title: {
+      control: 'text',
+      description: 'The title of the card',
+    },
+    children: {
+      control: false,
+      description: 'The content to display inside the card',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// More on args: https://storybook.js.org/docs/react/writing-stories/args
+export const Basic: Story = {
+  args: {
+    title: 'Test Title',
+    children: <p>Test Content</p>,
+  },
 };