aleleba/create-react-component-library
1
0
Fork 0
mirror of https://github.com/aleleba/create-react-component-library.git synced 2025-07-19 11:08:18 -06:00
Code Issues Actions Packages Projects 1 Releases Wiki Activity

Merge pull request #50 from aleleba/PR-342468
Some checks failed
Testing package / cypress-components-testing (push) Failing after 2m42s
Details
Testing package / unit-front-end-testing (20.x) (push) Failing after 4m27s
Details
Testing package / test-build-package (push) Has been skipped
Details
Testing package / publish-npm (push) Has been skipped
Details

Browse Source 
PR-342468: updating packages.
This commit is contained in:
Alejandro Lembke Barrientos
2025-07-16 12:40:32 -06:00
committed by GitHub
parent 4a4e743b9d b1ef41f175
commit e1617cde03
14 changed files with 6869 additions and 20530 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
.github/workflows/main-workflow.yml vendored
View File

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

64
.storybook/main.js
View File

@ -7,36 +7,32 @@ const prefixUrl = process.env.PREFIX_URL ? process.env.PREFIX_URL : deFaultValue
module.exports = { module.exports = {
stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"], 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", name: '@storybook/addon-styling-webpack',
"@storybook/addon-essentials", options: {
"@storybook/addon-interactions", rules: [
{ {
name: '@storybook/addon-styling-webpack', test: /\.(css|sass|scss)$/,
options: { use: [
rules: [ 'style-loader',
{ {
test: /\.(css|sass|scss)$/, loader: 'css-loader',
use: [ options: {
'style-loader', modules: {
{ namedExport: false,
loader: 'css-loader', exportLocalsConvention: 'as-is',
options: { auto: /\.module\.\w+$/i,
modules: { }
namedExport: false,
exportLocalsConvention: 'as-is',
auto: /\.module\.\w+$/i,
}
},
}, },
'sass-loader', },
], 'sass-loader',
} ],
] }
}, ]
} },
], }, "@storybook/addon-docs"],
webpackFinal: async config => { webpackFinal: async config => {
config.entry = config.entry.map(function(entry) { config.entry = config.entry.map(function(entry) {
if (entry.includes("webpack-hot-middleware")) { if (entry.includes("webpack-hot-middleware")) {
@ -51,10 +47,12 @@ module.exports = {
config.resolve.plugins = [new TsconfigPathsPlugin()]; config.resolve.plugins = [new TsconfigPathsPlugin()];
return config; return config;
}, },
framework: { framework: {
name: "@storybook/react-webpack5", name: "@storybook/react-webpack5",
options: {} options: {}
}, },
typescript: { typescript: {
reactDocgenTypescriptOptions: { reactDocgenTypescriptOptions: {
compilerOptions: { compilerOptions: {
@ -63,11 +61,5 @@ module.exports = {
} }
} }
} }
},
features: {
previewMdx2: true
},
docs: {
autodocs: true
} }
}; };

3
.storybook/preview.js
View File

@ -6,4 +6,5 @@ export const parameters = {
date: /Date$/, date: /Date$/,
}, },
}, },
} }
export const tags = ["autodocs"];

2
bin/cli.js
View File

@ -67,7 +67,7 @@ if(!checkedOut) process.exit(-1);
const actualVersion = runCommandWithOutput(`cd ${repoName} && node -p "require('./package.json').version"`).toString().trim() 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 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 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` const deleteFoldersCommand = `cd ${repoName} && rm -rf .github && rm -rf bin`

8
cypress/support/component.ts
View File

@ -1,3 +1,4 @@
// *********************************************************** // ***********************************************************
// This example support/component.ts is processed and // This example support/component.ts is processed and
// loaded automatically before your test files. // loaded automatically before your test files.
@ -19,12 +20,10 @@ import './commands'
// Alternatively you can use CommonJS syntax: // Alternatively you can use CommonJS syntax:
// require('./commands') // require('./commands')
import { mount } from 'cypress/react18' import { mount } from 'cypress/react'
// Augment the Cypress namespace to include type definitions for // Augment the Cypress namespace to include type definitions for
// your custom command. // 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 { declare global {
namespace Cypress { namespace Cypress {
interface Chainable { interface Chainable {
@ -33,8 +32,7 @@ declare global {
} }
} }
// @ts-ignore
Cypress.Commands.add('mount', mount) Cypress.Commands.add('mount', mount)
// Example use: // Example use:
// cy.mount(<MyComponent />) // cy.mount(<MyComponent />)

4
jest.config.js
View File

@ -1,5 +1,5 @@
const { pathsToModuleNameMapper } = require('ts-jest'); const { pathsToModuleNameMapper } = require('ts-jest');
const { compilerOptions } = require('./tsconfig'); const { compilerOptions } = require('./tsconfig.json');
const aliases = pathsToModuleNameMapper(compilerOptions.paths, { const aliases = pathsToModuleNameMapper(compilerOptions.paths, {
prefix: '<rootDir>' 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', '\\.(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' '\\.(css|sass|scss|less)$': 'identity-obj-proxy'
}, },
}; };

27141
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

108
package.json
View File

@ -1,9 +1,18 @@
{ {
"name": "@aleleba/create-react-component-library", "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", "description": "A starter kit for create a React component Library with storybook",
"bin": "./bin/cli.js", "bin": "./bin/cli.js",
"main": "dist/index.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": { "scripts": {
"start": "npm run storybook", "start": "npm run storybook",
"build": "webpack", "build": "webpack",
@ -13,7 +22,7 @@
"test:watch": "jest --watch", "test:watch": "jest --watch",
"storybook": "storybook dev -p 3000", "storybook": "storybook dev -p 3000",
"build-storybook": "storybook build", "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:open": "npx cypress open",
"cy:run": "npx cypress run --headless --component" "cy:run": "npx cypress run --headless --component"
}, },
@ -35,71 +44,64 @@
}, },
"homepage": "https://github.com/aleleba/create-react-component-library#readme", "homepage": "https://github.com/aleleba/create-react-component-library#readme",
"devDependencies": { "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", "@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/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", "@types/webpack": "^5.28.5",
"babel-loader": "^9.2.1", "babel-loader": "^10.0.0",
"clean-webpack-plugin": "^4.0.0", "clean-webpack-plugin": "^4.0.0",
"css-loader": "^7.1.2", "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", "html-webpack-plugin": "^5.6.3",
"identity-obj-proxy": "^3.0.0", "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", "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", "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", "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", "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" "webpack-node-externals": "^3.0.0"
}, },
"peerDependencies": { "peerDependencies": {
"react": "^18.2.0", "react": "^19.1.0",
"react-dom": "^18.2.0" "react-dom": "^19.1.0"
}, },
"files": [ "files": [
"./dist" "./dist"

2
src/components/Card/Card.stories.tsx
View File

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

4
src/components/Card/index.tsx
View File

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

6
src/components/__tests__/Card.test.tsx
View File

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

2
src/stories/Introduction.mdx
View File

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

5
tsconfig.json
View File

@ -25,8 +25,7 @@
"types": [ "types": [
"react", "react",
"react-dom", "react-dom",
"node", "node"
"cypress"
], ],
"sourceMap": true, "sourceMap": true,
"baseUrl": ".", "baseUrl": ".",
@ -47,4 +46,4 @@
"PRNameGenerator.ts", "PRNameGenerator.ts",
"cypress.config.ts" "cypress.config.ts"
] ]
} }

16
webpack.config.ts
View File

@ -46,8 +46,18 @@ export default {
rules: [ rules: [
{ {
test: /\.(ts|tsx)$/, 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)$/, test: /\.(js|jsx)$/,
@ -88,4 +98,4 @@ export default {
new TerserPlugin(), new TerserPlugin(),
], ],
}, },
} }