mirror of
https://github.com/aleleba/create-react-component-library.git
synced 2025-07-19 11:08:18 -06:00
Merge pull request #50 from aleleba/PR-342468
Some checks failed
Some checks failed
PR-342468: updating packages.
This commit is contained in:
32
.github/workflows/main-workflow.yml
vendored
32
.github/workflows/main-workflow.yml
vendored
@ -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,10 +68,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
|
||||
- run: npm publish --access=public
|
||||
|
@ -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",
|
||||
"@storybook/addon-links",
|
||||
"@storybook/addon-essentials",
|
||||
"@storybook/addon-interactions",
|
||||
{
|
||||
|
||||
addons: ["@storybook/addon-webpack5-compiler-babel", "@storybook/addon-links", {
|
||||
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
|
||||
}
|
||||
};
|
@ -7,3 +7,4 @@ export const parameters = {
|
||||
},
|
||||
},
|
||||
}
|
||||
export const tags = ["autodocs"];
|
@ -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`
|
||||
|
@ -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:
|
||||
|
@ -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>'
|
||||
|
27139
package-lock.json
generated
27139
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
108
package.json
108
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"
|
||||
|
@ -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
|
||||
|
@ -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}) => {
|
||||
|
@ -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();
|
||||
})
|
||||
})
|
||||
|
@ -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';
|
||||
|
@ -25,8 +25,7 @@
|
||||
"types": [
|
||||
"react",
|
||||
"react-dom",
|
||||
"node",
|
||||
"cypress"
|
||||
"node"
|
||||
],
|
||||
"sourceMap": true,
|
||||
"baseUrl": ".",
|
||||
|
@ -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)$/,
|
||||
|
Reference in New Issue
Block a user