aleleba/create-react-component-library
1
0
Fork 0
mirror of https://github.com/aleleba/create-react-component-library.git synced 2025-01-09 05:06:53 -06:00
Code Issues Actions Packages Projects 1 Releases Wiki Activity

Merge pull request #44 from aleleba/PR-202408

Browse Source 
PR-202408: updating packages and fixing mdx files.
This commit is contained in:
Alejandro Lembke Barrientos 2024-08-28 23:31:12 -06:00 committed by GitHub
commit bc85fdc380
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 7559 additions and 11035 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
.storybook/main.js
View File

@ -22,6 +22,19 @@ module.exports = {
} }
], ],
"webpackFinal": async config => { "webpackFinal": async config => {
config.module.rules.push(
{
test: /\.(ts|tsx)$/,
use: [
{
loader: 'ts-loader',
options: {
transpileOnly: true,
},
},
],
}
);
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")) {
return `${require.resolve('webpack-hot-middleware/client')}?path=${prefixUrl}__webpack_hmr&reload=true`; return `${require.resolve('webpack-hot-middleware/client')}?path=${prefixUrl}__webpack_hmr&reload=true`;
@ -48,9 +61,6 @@ module.exports = {
} }
} }
}, },
features: {
previewMdx2: true
},
docs: { docs: {
autodocs: true autodocs: true
} }

18288
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

76
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "@aleleba/create-react-component-library", "name": "@aleleba/create-react-component-library",
"version": "1.2.21", "version": "1.2.22",
"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",
@ -35,60 +35,62 @@
}, },
"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.23.9", "@babel/core": "^7.25.2",
"@babel/preset-env": "^7.23.9", "@babel/preset-env": "^7.25.4",
"@babel/preset-react": "^7.23.3", "@babel/preset-react": "^7.24.7",
"@babel/preset-typescript": "^7.23.3", "@babel/preset-typescript": "^7.24.7",
"@babel/register": "^7.23.7", "@babel/register": "^7.24.6",
"@mdx-js/react": "^3.0.1", "@mdx-js/react": "^3.0.1",
"@storybook/addon-actions": "^7.6.15", "@storybook/addon-actions": "^8.2.9",
"@storybook/addon-docs": "^7.6.15", "@storybook/addon-docs": "^8.2.9",
"@storybook/addon-essentials": "^7.6.15", "@storybook/addon-essentials": "^8.2.9",
"@storybook/addon-interactions": "^7.6.15", "@storybook/addon-interactions": "^8.2.9",
"@storybook/addon-links": "^7.6.15", "@storybook/addon-links": "^8.2.9",
"@storybook/cli": "^7.6.15", "@storybook/blocks": "^8.2.9",
"@storybook/cli": "^8.2.9",
"@storybook/mdx2-csf": "^1.1.0", "@storybook/mdx2-csf": "^1.1.0",
"@storybook/preset-scss": "^1.0.3", "@storybook/preset-scss": "^1.0.3",
"@storybook/react": "^7.6.15", "@storybook/react": "^8.2.9",
"@storybook/react-webpack5": "^7.6.15", "@storybook/react-webpack5": "^8.2.9",
"@storybook/testing-library": "^0.2.2", "@storybook/testing-library": "^0.2.2",
"@testing-library/jest-dom": "^6.4.2", "@testing-library/jest-dom": "^6.5.0",
"@testing-library/react": "^14.2.1", "@testing-library/react": "^16.0.0",
"@testing-library/user-event": "^14.5.2", "@testing-library/user-event": "^14.5.2",
"@types/jest": "^29.5.12", "@types/jest": "^29.5.12",
"@types/node": "^20.11.17", "@types/node": "^22.5.1",
"@types/react": "^18.2.55", "@types/react": "^18.3.4",
"@types/react-dom": "^18.2.19", "@types/react-dom": "^18.3.0",
"@types/webpack": "^5.28.5", "@types/webpack": "^5.28.5",
"babel-loader": "^9.1.3", "babel-loader": "^9.1.3",
"clean-webpack-plugin": "^4.0.0", "clean-webpack-plugin": "^4.0.0",
"css-loader": "^6.10.0", "css-loader": "^7.1.2",
"css-minimizer-webpack-plugin": "^6.0.0", "css-minimizer-webpack-plugin": "^7.0.0",
"cypress": "^13.6.4", "cypress": "^13.14.0",
"dotenv": "^16.4.4", "dotenv": "^16.4.5",
"eslint": "^8.56.0", "eslint": "^9.9.1",
"eslint-plugin-react": "^7.33.2", "eslint-plugin-react": "^7.35.0",
"eslint-plugin-storybook": "^0.6.15", "eslint-plugin-storybook": "^0.8.0",
"eslint-webpack-plugin": "^4.0.1", "eslint-webpack-plugin": "^4.2.0",
"html-webpack-plugin": "^5.6.0", "html-webpack-plugin": "^5.6.0",
"identity-obj-proxy": "^3.0.0", "identity-obj-proxy": "^3.0.0",
"jest": "^29.7.0", "jest": "^29.7.0",
"jest-environment-jsdom": "^29.7.0", "jest-environment-jsdom": "^29.7.0",
"jest-fetch-mock": "^3.0.3", "jest-fetch-mock": "^3.0.3",
"mini-css-extract-plugin": "^2.8.0", "mini-css-extract-plugin": "^2.9.1",
"react": "^18.2.0", "react": "^18.3.1",
"react-dom": "^18.2.0", "react-dom": "^18.3.1",
"resolve-ts-aliases": "^1.0.1", "resolve-ts-aliases": "^1.0.1",
"sass": "^1.70.0", "sass": "^1.77.8",
"sass-loader": "^14.1.0", "sass-loader": "^16.0.1",
"storybook": "^7.6.15", "storybook": "^8.2.9",
"style-loader": "^3.3.4", "style-loader": "^4.0.0",
"terser-webpack-plugin": "^5.3.10", "terser-webpack-plugin": "^5.3.10",
"ts-jest": "^29.1.2", "ts-jest": "^29.2.5",
"ts-loader": "^9.5.1",
"tsconfig-paths-webpack-plugin": "^4.1.0", "tsconfig-paths-webpack-plugin": "^4.1.0",
"typescript": "^5.3.3", "typescript": "^5.5.4",
"url-loader": "^4.1.1", "url-loader": "^4.1.1",
"webpack": "^5.90.1", "webpack": "^5.94.0",
"webpack-cli": "^5.1.4", "webpack-cli": "^5.1.4",
"webpack-node-externals": "^3.0.0" "webpack-node-externals": "^3.0.0"
}, },

214
src/stories/Introduction.stories.mdx → src/stories/Introduction.mdx
View File

@ -1,4 +1,4 @@
import { Meta } from '@storybook/addon-docs'; import { Meta } from '@storybook/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';
@ -12,106 +12,106 @@ import StackAlt from './assets/stackalt.svg';
<style> <style>
{` {`
.subheading { .subheading {
--mediumdark: '#999999'; --mediumdark: '#999999';
font-weight: 900; font-weight: 900;
font-size: 13px; font-size: 13px;
color: #999; color: #999;
letter-spacing: 6px; letter-spacing: 6px;
line-height: 24px; line-height: 24px;
text-transform: uppercase; text-transform: uppercase;
margin-bottom: 12px; margin-bottom: 12px;
margin-top: 40px; margin-top: 40px;
} }
.link-list {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr;
row-gap: 10px;
}
@media (min-width: 620px) {
.link-list { .link-list {
row-gap: 20px; display: grid;
column-gap: 20px; grid-template-columns: 1fr;
grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr;
row-gap: 10px;
} }
}
@media all and (-ms-high-contrast:none) { @media (min-width: 620px) {
.link-list { .link-list {
display: -ms-grid; row-gap: 20px;
-ms-grid-columns: 1fr 1fr; column-gap: 20px;
-ms-grid-rows: 1fr 1fr; grid-template-columns: 1fr 1fr;
}
} }
}
.link-item { @media all and (-ms-high-contrast:none) {
display: block; .link-list {
padding: 20px 30px 20px 15px; display: -ms-grid;
border: 1px solid #00000010; -ms-grid-columns: 1fr 1fr;
border-radius: 5px; -ms-grid-rows: 1fr 1fr;
transition: background 150ms ease-out, border 150ms ease-out, transform 150ms ease-out; }
color: #333333; }
display: flex;
align-items: flex-start;
}
.link-item:hover { .link-item {
border-color: #1EA7FD50; display: block;
transform: translate3d(0, -3px, 0); padding: 20px 30px 20px 15px;
box-shadow: rgba(0, 0, 0, 0.08) 0 3px 10px 0; border: 1px solid #00000010;
} border-radius: 5px;
transition: background 150ms ease-out, border 150ms ease-out, transform 150ms ease-out;
color: #333333;
display: flex;
align-items: flex-start;
}
.link-item:active { .link-item:hover {
border-color: #1EA7FD; border-color: #1EA7FD50;
transform: translate3d(0, 0, 0); transform: translate3d(0, -3px, 0);
} box-shadow: rgba(0, 0, 0, 0.08) 0 3px 10px 0;
}
.link-item strong { .link-item:active {
font-weight: 700; border-color: #1EA7FD;
display: block; transform: translate3d(0, 0, 0);
margin-bottom: 2px; }
}
.link-item img { .link-item strong {
height: 40px; font-weight: 700;
width: 40px; display: block;
margin-right: 15px; margin-bottom: 2px;
flex: none; }
}
.link-item span { .link-item img {
font-size: 14px; height: 40px;
line-height: 20px; width: 40px;
} margin-right: 15px;
flex: none;
}
.tip { .link-item span {
display: inline-block; font-size: 14px;
border-radius: 1em; line-height: 20px;
font-size: 11px; }
line-height: 12px;
font-weight: 700;
background: #E7FDD8;
color: #66BF3C;
padding: 4px 12px;
margin-right: 10px;
vertical-align: top;
}
.tip-wrapper { .tip {
font-size: 13px; display: inline-block;
line-height: 20px; border-radius: 1em;
margin-top: 40px; font-size: 11px;
margin-bottom: 40px; line-height: 12px;
} font-weight: 700;
background: #E7FDD8;
color: #66BF3C;
padding: 4px 12px;
margin-right: 10px;
vertical-align: top;
}
.tip-wrapper code { .tip-wrapper {
font-size: 12px; font-size: 13px;
display: inline-block; line-height: 20px;
} margin-top: 40px;
`} margin-bottom: 40px;
}
.tip-wrapper code {
font-size: 12px;
display: inline-block;
}
`}
</style> </style>
# Welcome to Storybook # Welcome to Storybook
@ -126,45 +126,36 @@ We recommend building UIs with a [**component-driven**](https://componentdriven.
<div className="subheading">Configure</div> <div className="subheading">Configure</div>
<div className="link-list"> <div className="link-list">
<a <a className="link-item" href="https://storybook.js.org/docs/react/addons/addon-types" target="_blank">
className="link-item"
href="https://storybook.js.org/docs/react/addons/addon-types"
target="_blank"
>
<img src={Plugin} alt="plugin" /> <img src={Plugin} alt="plugin" />
<span> <span>
<strong>Presets for popular tools</strong> <strong>Presets for popular tools</strong>
Easy setup for TypeScript, SCSS and more. Easy setup for TypeScript, SCSS and more.
</span> </span>
</a> </a>
<a
className="link-item" <a className="link-item" href="https://storybook.js.org/docs/react/configure/webpack" target="_blank">
href="https://storybook.js.org/docs/react/configure/webpack"
target="_blank"
>
<img src={StackAlt} alt="Build" /> <img src={StackAlt} alt="Build" />
<span> <span>
<strong>Build configuration</strong> <strong>Build configuration</strong>
How to customize webpack and Babel How to customize webpack and Babel
</span> </span>
</a> </a>
<a
className="link-item" <a className="link-item" href="https://storybook.js.org/docs/react/configure/styling-and-css" target="_blank">
href="https://storybook.js.org/docs/react/configure/styling-and-css"
target="_blank"
>
<img src={Colors} alt="colors" /> <img src={Colors} alt="colors" />
<span> <span>
<strong>Styling</strong> <strong>Styling</strong>
How to load and configure CSS libraries How to load and configure CSS libraries
</span> </span>
</a> </a>
<a
className="link-item" <a className="link-item" href="https://storybook.js.org/docs/react/get-started/setup#configure-storybook-for-your-stack" target="_blank">
href="https://storybook.js.org/docs/react/get-started/setup#configure-storybook-for-your-stack"
target="_blank"
>
<img src={Flow} alt="flow" /> <img src={Flow} alt="flow" />
<span> <span>
<strong>Data</strong> <strong>Data</strong>
Providers and mocking for data libraries Providers and mocking for data libraries
@ -177,27 +168,34 @@ We recommend building UIs with a [**component-driven**](https://componentdriven.
<div className="link-list"> <div className="link-list">
<a className="link-item" href="https://storybook.js.org/docs" target="_blank"> <a className="link-item" href="https://storybook.js.org/docs" target="_blank">
<img src={Repo} alt="repo" /> <img src={Repo} alt="repo" />
<span> <span>
<strong>Storybook documentation</strong> <strong>Storybook documentation</strong>
Configure, customize, and extend Configure, customize, and extend
</span> </span>
</a> </a>
<a className="link-item" href="https://storybook.js.org/tutorials/" target="_blank"> <a className="link-item" href="https://storybook.js.org/tutorials/" target="_blank">
<img src={Direction} alt="direction" /> <img src={Direction} alt="direction" />
<span> <span>
<strong>In-depth guides</strong> <strong>In-depth guides</strong>
Best practices from leading teams Best practices from leading teams
</span> </span>
</a> </a>
<a className="link-item" href="https://github.com/storybookjs/storybook" target="_blank"> <a className="link-item" href="https://github.com/storybookjs/storybook" target="_blank">
<img src={Code} alt="code" /> <img src={Code} alt="code" />
<span> <span>
<strong>GitHub project</strong> <strong>GitHub project</strong>
View the source and add issues View the source and add issues
</span> </span>
</a> </a>
<a className="link-item" href="https://discord.gg/storybook" target="_blank"> <a className="link-item" href="https://discord.gg/storybook" target="_blank">
<img src={Comments} alt="comments" /> <img src={Comments} alt="comments" />
<span> <span>
<strong>Discord chat</strong> <strong>Discord chat</strong>
Chat with maintainers and the community Chat with maintainers and the community
@ -207,5 +205,5 @@ We recommend building UIs with a [**component-driven**](https://componentdriven.
<div className="tip-wrapper"> <div className="tip-wrapper">
<span className="tip">Tip</span>Edit the Markdown in{' '} <span className="tip">Tip</span>Edit the Markdown in{' '}
<code>stories/Introduction.stories.mdx</code> <code>stories/Introduction.mdx</code>
</div> </div>