From d2443db78cd51350b55a74d2336d55c0a622a346 Mon Sep 17 00:00:00 2001 From: fi3ework Date: Thu, 17 Oct 2024 03:04:58 +0800 Subject: [PATCH] feat(create-rslib): react template --- .github/ISSUE_TEMPLATE/1-bug-report.en-US.yml | 8 +- .../2-feature-request.en-US.yml | 6 +- .github/workflows/pr-label.yaml | 2 +- .nvmrc | 2 +- package.json | 10 +- .../base/node-dual-js}/package.json | 0 .../base/node-dual-js}/rslib.config.mjs | 0 .../fragments/base/node-dual-js/src/index.js | 1 + .../base/node-dual-ts}/package.json | 1 + .../base/node-dual-ts}/rslib.config.ts | 0 .../fragments/base/node-dual-ts/src/index.ts | 1 + .../base/node-dual-ts}/tsconfig.json | 3 +- .../base/node-esm-js}/package.json | 0 .../base/node-esm-js}/rslib.config.mjs | 0 .../fragments/base/node-esm-js/src/index.js | 1 + .../base/node-esm-ts}/package.json | 1 + .../base/node-esm-ts}/rslib.config.ts | 0 .../fragments/base/node-esm-ts/src/index.ts | 1 + .../base/node-esm-ts}/tsconfig.json | 3 +- .../fragments/base/react-js/package.json | 27 ++ .../fragments/base/react-js/rslib.config.mjs | 23 + .../fragments/base/react-js/src/Button.jsx | 22 + .../fragments/base/react-js/src/button.css | 34 ++ .../fragments/base/react-js/src/index.jsx | 1 + .../fragments/base/react-ts/package.json | 31 ++ .../fragments/base/react-ts/rslib.config.ts | 24 ++ .../fragments/base/react-ts/src/Button.tsx | 30 ++ .../fragments/base/react-ts/src/button.css | 34 ++ .../fragments/base/react-ts/src/index.tsx | 1 + .../fragments/base/react-ts/tsconfig.json | 14 + .../storybook-react-js/.storybook/main.js | 36 ++ .../storybook-react-js/.storybook/preview.js | 12 + .../tools/storybook-react-js/package.json | 19 + .../stories/Button.stories.jsx | 50 +++ .../storybook-react-ts/.storybook/main.ts | 37 ++ .../storybook-react-ts/.storybook/preview.ts | 14 + .../tools/storybook-react-ts/package.json | 19 + .../stories/Button.stories.ts | 52 +++ .../tools/vitest-node-js/package.json | 8 + .../tools/vitest-node-js/tests/index.test.js | 7 + .../tools/vitest-node-js/vitest.config.js | 8 + .../tools/vitest-node-ts/package.json | 8 + .../tools/vitest-node-ts/tests/index.test.ts | 7 + .../tools/vitest-node-ts/vitest.config.ts | 6 + .../tools/vitest-react-js/package.json | 11 + .../vitest-react-js/tests/index.test.jsx | 12 + .../tools/vitest-react-js/vitest.config.js | 11 + .../tools/vitest-react-js/vitest.setup.js | 1 + .../tools/vitest-react-ts/package.json | 11 + .../vitest-react-ts/tests/index.test.tsx | 12 + .../tools/vitest-react-ts/vitest.config.ts | 9 + .../tools/vitest-react-ts/vitest.setup.ts | 1 + packages/create-rslib/package.json | 9 +- packages/create-rslib/src/genTemplates.ts | 11 + packages/create-rslib/src/helpers.ts | 124 ++++++ packages/create-rslib/src/index.ts | 41 +- .../template-[node-dual]-[]-js/package.json | 23 + .../rslib.config.mjs | 15 + .../template-[node-dual]-[]-js/src/index.js | 1 + .../template-[node-dual]-[]-ts/package.json | 27 ++ .../rslib.config.ts | 16 + .../template-[node-dual]-[]-ts/src/index.ts | 1 + .../template-[node-dual]-[]-ts/tsconfig.json | 15 + .../package.json | 25 ++ .../rslib.config.mjs | 15 + .../src/index.js | 1 + .../tests/index.test.js | 7 + .../vitest.config.js | 8 + .../package.json | 29 ++ .../rslib.config.ts | 16 + .../src/index.ts | 1 + .../tests/index.test.ts | 7 + .../tsconfig.json | 15 + .../vitest.config.ts | 6 + .../template-[node-esm]-[]-js/package.json | 21 + .../rslib.config.mjs | 11 + .../template-[node-esm]-[]-js/src/index.js | 1 + .../template-[node-esm]-[]-ts/package.json | 25 ++ .../template-[node-esm]-[]-ts/rslib.config.ts | 12 + .../template-[node-esm]-[]-ts/src/index.ts | 1 + .../template-[node-esm]-[]-ts/tsconfig.json | 15 + .../package.json | 23 + .../rslib.config.mjs | 11 + .../src/index.js | 1 + .../tests/index.test.js | 7 + .../vitest.config.js | 8 + .../package.json | 27 ++ .../rslib.config.ts | 12 + .../src/index.ts | 1 + .../tests/index.test.ts | 7 + .../tsconfig.json | 15 + .../vitest.config.ts | 6 + .../template-[react]-[]-js/package.json | 27 ++ .../template-[react]-[]-js/rslib.config.mjs | 23 + .../template-[react]-[]-js/src/Button.jsx | 22 + .../template-[react]-[]-js/src/button.css | 34 ++ .../template-[react]-[]-js/src/index.jsx | 1 + .../template-[react]-[]-ts/package.json | 31 ++ .../template-[react]-[]-ts/rslib.config.ts | 24 ++ .../template-[react]-[]-ts/src/Button.tsx | 30 ++ .../template-[react]-[]-ts/src/button.css | 34 ++ .../template-[react]-[]-ts/src/index.tsx | 1 + .../template-[react]-[]-ts/tsconfig.json | 14 + .../.storybook/main.js | 36 ++ .../.storybook/preview.js | 12 + .../package.json | 45 ++ .../rslib.config.mjs | 23 + .../src/Button.jsx | 22 + .../src/button.css | 34 ++ .../src/index.jsx | 1 + .../stories/Button.stories.jsx | 50 +++ .../tests/index.test.jsx | 12 + .../vitest.config.js | 11 + .../vitest.setup.js | 1 + .../.storybook/main.ts | 37 ++ .../.storybook/preview.ts | 14 + .../package.json | 49 +++ .../rslib.config.ts | 24 ++ .../src/Button.tsx | 30 ++ .../src/button.css | 34 ++ .../src/index.tsx | 1 + .../stories/Button.stories.ts | 52 +++ .../tests/index.test.tsx | 12 + .../tsconfig.json | 14 + .../vitest.config.ts | 9 + .../vitest.setup.ts | 1 + .../.storybook/main.js | 36 ++ .../.storybook/preview.js | 12 + .../package.json | 40 ++ .../rslib.config.mjs | 23 + .../src/Button.jsx | 22 + .../src/button.css | 34 ++ .../src/index.jsx | 1 + .../stories/Button.stories.jsx | 50 +++ .../.storybook/main.ts | 37 ++ .../.storybook/preview.ts | 14 + .../package.json | 44 ++ .../rslib.config.ts | 24 ++ .../src/Button.tsx | 30 ++ .../src/button.css | 34 ++ .../src/index.tsx | 1 + .../stories/Button.stories.ts | 52 +++ .../tsconfig.json | 14 + .../template-[react]-[vitest]-js/package.json | 32 ++ .../rslib.config.mjs | 23 + .../src/Button.jsx | 22 + .../src/button.css | 34 ++ .../src/index.jsx | 1 + .../tests/index.test.jsx | 12 + .../vitest.config.js | 11 + .../vitest.setup.js | 1 + .../template-[react]-[vitest]-ts/package.json | 36 ++ .../rslib.config.ts | 24 ++ .../src/Button.tsx | 30 ++ .../src/button.css | 34 ++ .../src/index.tsx | 1 + .../tests/index.test.tsx | 12 + .../tsconfig.json | 14 + .../vitest.config.ts | 9 + .../vitest.setup.ts | 1 + .../create-rslib/template-common/README.md | 2 +- .../template-node-dual-js/src/index.js | 3 - .../template-node-dual-ts/src/index.ts | 3 - .../template-node-esm-js/src/index.js | 3 - .../template-node-esm-ts/src/index.ts | 3 - packages/create-rslib/test/helper.ts | 53 ++- packages/create-rslib/test/index.test.ts | 166 +++++--- packages/create-rslib/vitest.config.ts | 1 + pnpm-lock.yaml | 401 +++++++++++++++--- scripts/dictionary.txt | 1 + tests/package.json | 2 +- website/package.json | 2 +- 172 files changed, 3264 insertions(+), 155 deletions(-) rename packages/create-rslib/{template-node-dual-js => fragments/base/node-dual-js}/package.json (100%) rename packages/create-rslib/{template-node-dual-js => fragments/base/node-dual-js}/rslib.config.mjs (100%) create mode 100644 packages/create-rslib/fragments/base/node-dual-js/src/index.js rename packages/create-rslib/{template-node-dual-ts => fragments/base/node-dual-ts}/package.json (94%) rename packages/create-rslib/{template-node-dual-ts => fragments/base/node-dual-ts}/rslib.config.ts (100%) create mode 100644 packages/create-rslib/fragments/base/node-dual-ts/src/index.ts rename packages/create-rslib/{template-node-esm-ts => fragments/base/node-dual-ts}/tsconfig.json (85%) rename packages/create-rslib/{template-node-esm-js => fragments/base/node-esm-js}/package.json (100%) rename packages/create-rslib/{template-node-esm-js => fragments/base/node-esm-js}/rslib.config.mjs (100%) create mode 100644 packages/create-rslib/fragments/base/node-esm-js/src/index.js rename packages/create-rslib/{template-node-esm-ts => fragments/base/node-esm-ts}/package.json (93%) rename packages/create-rslib/{template-node-esm-ts => fragments/base/node-esm-ts}/rslib.config.ts (100%) create mode 100644 packages/create-rslib/fragments/base/node-esm-ts/src/index.ts rename packages/create-rslib/{template-node-dual-ts => fragments/base/node-esm-ts}/tsconfig.json (85%) create mode 100644 packages/create-rslib/fragments/base/react-js/package.json create mode 100644 packages/create-rslib/fragments/base/react-js/rslib.config.mjs create mode 100644 packages/create-rslib/fragments/base/react-js/src/Button.jsx create mode 100644 packages/create-rslib/fragments/base/react-js/src/button.css create mode 100644 packages/create-rslib/fragments/base/react-js/src/index.jsx create mode 100644 packages/create-rslib/fragments/base/react-ts/package.json create mode 100644 packages/create-rslib/fragments/base/react-ts/rslib.config.ts create mode 100644 packages/create-rslib/fragments/base/react-ts/src/Button.tsx create mode 100644 packages/create-rslib/fragments/base/react-ts/src/button.css create mode 100644 packages/create-rslib/fragments/base/react-ts/src/index.tsx create mode 100644 packages/create-rslib/fragments/base/react-ts/tsconfig.json create mode 100644 packages/create-rslib/fragments/tools/storybook-react-js/.storybook/main.js create mode 100644 packages/create-rslib/fragments/tools/storybook-react-js/.storybook/preview.js create mode 100644 packages/create-rslib/fragments/tools/storybook-react-js/package.json create mode 100644 packages/create-rslib/fragments/tools/storybook-react-js/stories/Button.stories.jsx create mode 100644 packages/create-rslib/fragments/tools/storybook-react-ts/.storybook/main.ts create mode 100644 packages/create-rslib/fragments/tools/storybook-react-ts/.storybook/preview.ts create mode 100644 packages/create-rslib/fragments/tools/storybook-react-ts/package.json create mode 100644 packages/create-rslib/fragments/tools/storybook-react-ts/stories/Button.stories.ts create mode 100644 packages/create-rslib/fragments/tools/vitest-node-js/package.json create mode 100644 packages/create-rslib/fragments/tools/vitest-node-js/tests/index.test.js create mode 100644 packages/create-rslib/fragments/tools/vitest-node-js/vitest.config.js create mode 100644 packages/create-rslib/fragments/tools/vitest-node-ts/package.json create mode 100644 packages/create-rslib/fragments/tools/vitest-node-ts/tests/index.test.ts create mode 100644 packages/create-rslib/fragments/tools/vitest-node-ts/vitest.config.ts create mode 100644 packages/create-rslib/fragments/tools/vitest-react-js/package.json create mode 100644 packages/create-rslib/fragments/tools/vitest-react-js/tests/index.test.jsx create mode 100644 packages/create-rslib/fragments/tools/vitest-react-js/vitest.config.js create mode 100644 packages/create-rslib/fragments/tools/vitest-react-js/vitest.setup.js create mode 100644 packages/create-rslib/fragments/tools/vitest-react-ts/package.json create mode 100644 packages/create-rslib/fragments/tools/vitest-react-ts/tests/index.test.tsx create mode 100644 packages/create-rslib/fragments/tools/vitest-react-ts/vitest.config.ts create mode 100644 packages/create-rslib/fragments/tools/vitest-react-ts/vitest.setup.ts create mode 100644 packages/create-rslib/src/genTemplates.ts create mode 100644 packages/create-rslib/src/helpers.ts create mode 100644 packages/create-rslib/template-[node-dual]-[]-js/package.json create mode 100644 packages/create-rslib/template-[node-dual]-[]-js/rslib.config.mjs create mode 100644 packages/create-rslib/template-[node-dual]-[]-js/src/index.js create mode 100644 packages/create-rslib/template-[node-dual]-[]-ts/package.json create mode 100644 packages/create-rslib/template-[node-dual]-[]-ts/rslib.config.ts create mode 100644 packages/create-rslib/template-[node-dual]-[]-ts/src/index.ts create mode 100644 packages/create-rslib/template-[node-dual]-[]-ts/tsconfig.json create mode 100644 packages/create-rslib/template-[node-dual]-[vitest]-js/package.json create mode 100644 packages/create-rslib/template-[node-dual]-[vitest]-js/rslib.config.mjs create mode 100644 packages/create-rslib/template-[node-dual]-[vitest]-js/src/index.js create mode 100644 packages/create-rslib/template-[node-dual]-[vitest]-js/tests/index.test.js create mode 100644 packages/create-rslib/template-[node-dual]-[vitest]-js/vitest.config.js create mode 100644 packages/create-rslib/template-[node-dual]-[vitest]-ts/package.json create mode 100644 packages/create-rslib/template-[node-dual]-[vitest]-ts/rslib.config.ts create mode 100644 packages/create-rslib/template-[node-dual]-[vitest]-ts/src/index.ts create mode 100644 packages/create-rslib/template-[node-dual]-[vitest]-ts/tests/index.test.ts create mode 100644 packages/create-rslib/template-[node-dual]-[vitest]-ts/tsconfig.json create mode 100644 packages/create-rslib/template-[node-dual]-[vitest]-ts/vitest.config.ts create mode 100644 packages/create-rslib/template-[node-esm]-[]-js/package.json create mode 100644 packages/create-rslib/template-[node-esm]-[]-js/rslib.config.mjs create mode 100644 packages/create-rslib/template-[node-esm]-[]-js/src/index.js create mode 100644 packages/create-rslib/template-[node-esm]-[]-ts/package.json create mode 100644 packages/create-rslib/template-[node-esm]-[]-ts/rslib.config.ts create mode 100644 packages/create-rslib/template-[node-esm]-[]-ts/src/index.ts create mode 100644 packages/create-rslib/template-[node-esm]-[]-ts/tsconfig.json create mode 100644 packages/create-rslib/template-[node-esm]-[vitest]-js/package.json create mode 100644 packages/create-rslib/template-[node-esm]-[vitest]-js/rslib.config.mjs create mode 100644 packages/create-rslib/template-[node-esm]-[vitest]-js/src/index.js create mode 100644 packages/create-rslib/template-[node-esm]-[vitest]-js/tests/index.test.js create mode 100644 packages/create-rslib/template-[node-esm]-[vitest]-js/vitest.config.js create mode 100644 packages/create-rslib/template-[node-esm]-[vitest]-ts/package.json create mode 100644 packages/create-rslib/template-[node-esm]-[vitest]-ts/rslib.config.ts create mode 100644 packages/create-rslib/template-[node-esm]-[vitest]-ts/src/index.ts create mode 100644 packages/create-rslib/template-[node-esm]-[vitest]-ts/tests/index.test.ts create mode 100644 packages/create-rslib/template-[node-esm]-[vitest]-ts/tsconfig.json create mode 100644 packages/create-rslib/template-[node-esm]-[vitest]-ts/vitest.config.ts create mode 100644 packages/create-rslib/template-[react]-[]-js/package.json create mode 100644 packages/create-rslib/template-[react]-[]-js/rslib.config.mjs create mode 100644 packages/create-rslib/template-[react]-[]-js/src/Button.jsx create mode 100644 packages/create-rslib/template-[react]-[]-js/src/button.css create mode 100644 packages/create-rslib/template-[react]-[]-js/src/index.jsx create mode 100644 packages/create-rslib/template-[react]-[]-ts/package.json create mode 100644 packages/create-rslib/template-[react]-[]-ts/rslib.config.ts create mode 100644 packages/create-rslib/template-[react]-[]-ts/src/Button.tsx create mode 100644 packages/create-rslib/template-[react]-[]-ts/src/button.css create mode 100644 packages/create-rslib/template-[react]-[]-ts/src/index.tsx create mode 100644 packages/create-rslib/template-[react]-[]-ts/tsconfig.json create mode 100644 packages/create-rslib/template-[react]-[storybook,vitest]-js/.storybook/main.js create mode 100644 packages/create-rslib/template-[react]-[storybook,vitest]-js/.storybook/preview.js create mode 100644 packages/create-rslib/template-[react]-[storybook,vitest]-js/package.json create mode 100644 packages/create-rslib/template-[react]-[storybook,vitest]-js/rslib.config.mjs create mode 100644 packages/create-rslib/template-[react]-[storybook,vitest]-js/src/Button.jsx create mode 100644 packages/create-rslib/template-[react]-[storybook,vitest]-js/src/button.css create mode 100644 packages/create-rslib/template-[react]-[storybook,vitest]-js/src/index.jsx create mode 100644 packages/create-rslib/template-[react]-[storybook,vitest]-js/stories/Button.stories.jsx create mode 100644 packages/create-rslib/template-[react]-[storybook,vitest]-js/tests/index.test.jsx create mode 100644 packages/create-rslib/template-[react]-[storybook,vitest]-js/vitest.config.js create mode 100644 packages/create-rslib/template-[react]-[storybook,vitest]-js/vitest.setup.js create mode 100644 packages/create-rslib/template-[react]-[storybook,vitest]-ts/.storybook/main.ts create mode 100644 packages/create-rslib/template-[react]-[storybook,vitest]-ts/.storybook/preview.ts create mode 100644 packages/create-rslib/template-[react]-[storybook,vitest]-ts/package.json create mode 100644 packages/create-rslib/template-[react]-[storybook,vitest]-ts/rslib.config.ts create mode 100644 packages/create-rslib/template-[react]-[storybook,vitest]-ts/src/Button.tsx create mode 100644 packages/create-rslib/template-[react]-[storybook,vitest]-ts/src/button.css create mode 100644 packages/create-rslib/template-[react]-[storybook,vitest]-ts/src/index.tsx create mode 100644 packages/create-rslib/template-[react]-[storybook,vitest]-ts/stories/Button.stories.ts create mode 100644 packages/create-rslib/template-[react]-[storybook,vitest]-ts/tests/index.test.tsx create mode 100644 packages/create-rslib/template-[react]-[storybook,vitest]-ts/tsconfig.json create mode 100644 packages/create-rslib/template-[react]-[storybook,vitest]-ts/vitest.config.ts create mode 100644 packages/create-rslib/template-[react]-[storybook,vitest]-ts/vitest.setup.ts create mode 100644 packages/create-rslib/template-[react]-[storybook]-js/.storybook/main.js create mode 100644 packages/create-rslib/template-[react]-[storybook]-js/.storybook/preview.js create mode 100644 packages/create-rslib/template-[react]-[storybook]-js/package.json create mode 100644 packages/create-rslib/template-[react]-[storybook]-js/rslib.config.mjs create mode 100644 packages/create-rslib/template-[react]-[storybook]-js/src/Button.jsx create mode 100644 packages/create-rslib/template-[react]-[storybook]-js/src/button.css create mode 100644 packages/create-rslib/template-[react]-[storybook]-js/src/index.jsx create mode 100644 packages/create-rslib/template-[react]-[storybook]-js/stories/Button.stories.jsx create mode 100644 packages/create-rslib/template-[react]-[storybook]-ts/.storybook/main.ts create mode 100644 packages/create-rslib/template-[react]-[storybook]-ts/.storybook/preview.ts create mode 100644 packages/create-rslib/template-[react]-[storybook]-ts/package.json create mode 100644 packages/create-rslib/template-[react]-[storybook]-ts/rslib.config.ts create mode 100644 packages/create-rslib/template-[react]-[storybook]-ts/src/Button.tsx create mode 100644 packages/create-rslib/template-[react]-[storybook]-ts/src/button.css create mode 100644 packages/create-rslib/template-[react]-[storybook]-ts/src/index.tsx create mode 100644 packages/create-rslib/template-[react]-[storybook]-ts/stories/Button.stories.ts create mode 100644 packages/create-rslib/template-[react]-[storybook]-ts/tsconfig.json create mode 100644 packages/create-rslib/template-[react]-[vitest]-js/package.json create mode 100644 packages/create-rslib/template-[react]-[vitest]-js/rslib.config.mjs create mode 100644 packages/create-rslib/template-[react]-[vitest]-js/src/Button.jsx create mode 100644 packages/create-rslib/template-[react]-[vitest]-js/src/button.css create mode 100644 packages/create-rslib/template-[react]-[vitest]-js/src/index.jsx create mode 100644 packages/create-rslib/template-[react]-[vitest]-js/tests/index.test.jsx create mode 100644 packages/create-rslib/template-[react]-[vitest]-js/vitest.config.js create mode 100644 packages/create-rslib/template-[react]-[vitest]-js/vitest.setup.js create mode 100644 packages/create-rslib/template-[react]-[vitest]-ts/package.json create mode 100644 packages/create-rslib/template-[react]-[vitest]-ts/rslib.config.ts create mode 100644 packages/create-rslib/template-[react]-[vitest]-ts/src/Button.tsx create mode 100644 packages/create-rslib/template-[react]-[vitest]-ts/src/button.css create mode 100644 packages/create-rslib/template-[react]-[vitest]-ts/src/index.tsx create mode 100644 packages/create-rslib/template-[react]-[vitest]-ts/tests/index.test.tsx create mode 100644 packages/create-rslib/template-[react]-[vitest]-ts/tsconfig.json create mode 100644 packages/create-rslib/template-[react]-[vitest]-ts/vitest.config.ts create mode 100644 packages/create-rslib/template-[react]-[vitest]-ts/vitest.setup.ts delete mode 100644 packages/create-rslib/template-node-dual-js/src/index.js delete mode 100644 packages/create-rslib/template-node-dual-ts/src/index.ts delete mode 100644 packages/create-rslib/template-node-esm-js/src/index.js delete mode 100644 packages/create-rslib/template-node-esm-ts/src/index.ts diff --git a/.github/ISSUE_TEMPLATE/1-bug-report.en-US.yml b/.github/ISSUE_TEMPLATE/1-bug-report.en-US.yml index e42267e65..f77d1f017 100644 --- a/.github/ISSUE_TEMPLATE/1-bug-report.en-US.yml +++ b/.github/ISSUE_TEMPLATE/1-bug-report.en-US.yml @@ -1,7 +1,7 @@ -name: "🐞 Bug Report" +name: '🐞 Bug Report' description: Report a Bug to Rslib -title: "[Bug]: " -labels: ["🐞 bug"] +title: '[Bug]: ' +labels: ['🐞 bug'] body: - type: markdown attributes: @@ -37,7 +37,7 @@ body: id: repro attributes: label: Reproduce link - description: "Please provide a simplest reproduction of the problem (minimal demo without redundant dependencies). You can create it on CodePen ([⌘Click here to open the template](https://codepen.io/Justineo/pen/yLbxxOR)), or provide the URL of the project:" + description: 'Please provide a simplest reproduction of the problem (minimal demo without redundant dependencies). You can create it on CodePen ([⌘Click here to open the template](https://codepen.io/Justineo/pen/yLbxxOR)), or provide the URL of the project:' placeholder: paste link here validations: required: true diff --git a/.github/ISSUE_TEMPLATE/2-feature-request.en-US.yml b/.github/ISSUE_TEMPLATE/2-feature-request.en-US.yml index 662ecd06b..b8cc676fc 100644 --- a/.github/ISSUE_TEMPLATE/2-feature-request.en-US.yml +++ b/.github/ISSUE_TEMPLATE/2-feature-request.en-US.yml @@ -1,7 +1,7 @@ -name: "💡 Feature Request" +name: '💡 Feature Request' description: Submit a new feature request to Rslib -title: "[Feature]: " -labels: ["💡 feature"] +title: '[Feature]: ' +labels: ['💡 feature'] body: - type: markdown attributes: diff --git a/.github/workflows/pr-label.yaml b/.github/workflows/pr-label.yaml index ee526c6c8..1418598be 100644 --- a/.github/workflows/pr-label.yaml +++ b/.github/workflows/pr-label.yaml @@ -14,7 +14,7 @@ jobs: steps: - uses: github/issue-labeler@v3.4 with: - repo-token: "${{ secrets.GITHUB_TOKEN }}" + repo-token: '${{ secrets.GITHUB_TOKEN }}' configuration-path: .github/pr-labeler.yml enable-versioned-regex: 0 include-title: 1 diff --git a/.nvmrc b/.nvmrc index ef65309b0..149eae671 100644 --- a/.nvmrc +++ b/.nvmrc @@ -1 +1 @@ -v18.20.2 \ No newline at end of file +v22.10.0 \ No newline at end of file diff --git a/package.json b/package.json index 31e1997ce..744f562f7 100644 --- a/package.json +++ b/package.json @@ -8,8 +8,9 @@ "changeset": "changeset", "check-dependency-version": "check-dependency-version-consistency .", "check-spell": "pnpx cspell", + "format": "prettier . --write && biome check --write", "generate-release-pr": "zx scripts/generateReleasePr.mjs", - "lint": "biome check . --diagnostic-level=warn && pnpm run check-spell", + "lint": "biome check . --diagnostic-level=warn && prettier . --check && pnpm run check-spell", "prebundle": "nx run-many -t prebundle", "prepare": "pnpm run build && simple-git-hooks", "sort-package-json": "npx sort-package-json \"packages/*/package.json\"", @@ -32,14 +33,17 @@ "*.{js,jsx,ts,tsx,mjs,cjs}": [ "biome check --write" ], - "package.json": "pnpm run check-dependency-version", + "package.json": [ + "pnpm run check-dependency-version", + "prettier --write" + ], "pnpm-lock.yaml": "pnpm dedupe --check" }, "devDependencies": { "@biomejs/biome": "^1.9.4", "@changesets/cli": "^2.27.9", "@types/fs-extra": "^11.0.4", - "@types/node": "~18.19.39", + "@types/node": "^22.8.1", "check-dependency-version-consistency": "^4.1.0", "cross-env": "^7.0.3", "cspell-ban-words": "^0.0.4", diff --git a/packages/create-rslib/template-node-dual-js/package.json b/packages/create-rslib/fragments/base/node-dual-js/package.json similarity index 100% rename from packages/create-rslib/template-node-dual-js/package.json rename to packages/create-rslib/fragments/base/node-dual-js/package.json diff --git a/packages/create-rslib/template-node-dual-js/rslib.config.mjs b/packages/create-rslib/fragments/base/node-dual-js/rslib.config.mjs similarity index 100% rename from packages/create-rslib/template-node-dual-js/rslib.config.mjs rename to packages/create-rslib/fragments/base/node-dual-js/rslib.config.mjs diff --git a/packages/create-rslib/fragments/base/node-dual-js/src/index.js b/packages/create-rslib/fragments/base/node-dual-js/src/index.js new file mode 100644 index 000000000..f8beddf58 --- /dev/null +++ b/packages/create-rslib/fragments/base/node-dual-js/src/index.js @@ -0,0 +1 @@ +export const squared = (n) => n * n; diff --git a/packages/create-rslib/template-node-dual-ts/package.json b/packages/create-rslib/fragments/base/node-dual-ts/package.json similarity index 94% rename from packages/create-rslib/template-node-dual-ts/package.json rename to packages/create-rslib/fragments/base/node-dual-ts/package.json index dc167f993..dd86573c7 100644 --- a/packages/create-rslib/template-node-dual-ts/package.json +++ b/packages/create-rslib/fragments/base/node-dual-ts/package.json @@ -21,6 +21,7 @@ }, "devDependencies": { "@rslib/core": "workspace:*", + "@types/node": "^22.8.1", "typescript": "^5.6.3" } } diff --git a/packages/create-rslib/template-node-dual-ts/rslib.config.ts b/packages/create-rslib/fragments/base/node-dual-ts/rslib.config.ts similarity index 100% rename from packages/create-rslib/template-node-dual-ts/rslib.config.ts rename to packages/create-rslib/fragments/base/node-dual-ts/rslib.config.ts diff --git a/packages/create-rslib/fragments/base/node-dual-ts/src/index.ts b/packages/create-rslib/fragments/base/node-dual-ts/src/index.ts new file mode 100644 index 000000000..fdf0e1164 --- /dev/null +++ b/packages/create-rslib/fragments/base/node-dual-ts/src/index.ts @@ -0,0 +1 @@ +export const squared = (n: number): number => n * n; diff --git a/packages/create-rslib/template-node-esm-ts/tsconfig.json b/packages/create-rslib/fragments/base/node-dual-ts/tsconfig.json similarity index 85% rename from packages/create-rslib/template-node-esm-ts/tsconfig.json rename to packages/create-rslib/fragments/base/node-dual-ts/tsconfig.json index 98e777aad..8c5c4d6d0 100644 --- a/packages/create-rslib/template-node-esm-ts/tsconfig.json +++ b/packages/create-rslib/fragments/base/node-dual-ts/tsconfig.json @@ -1,7 +1,6 @@ { "compilerOptions": { - "target": "ES2021", - "lib": ["DOM", "ES2021"], + "lib": ["ES2021"], "module": "ESNext", "noEmit": true, "strict": true, diff --git a/packages/create-rslib/template-node-esm-js/package.json b/packages/create-rslib/fragments/base/node-esm-js/package.json similarity index 100% rename from packages/create-rslib/template-node-esm-js/package.json rename to packages/create-rslib/fragments/base/node-esm-js/package.json diff --git a/packages/create-rslib/template-node-esm-js/rslib.config.mjs b/packages/create-rslib/fragments/base/node-esm-js/rslib.config.mjs similarity index 100% rename from packages/create-rslib/template-node-esm-js/rslib.config.mjs rename to packages/create-rslib/fragments/base/node-esm-js/rslib.config.mjs diff --git a/packages/create-rslib/fragments/base/node-esm-js/src/index.js b/packages/create-rslib/fragments/base/node-esm-js/src/index.js new file mode 100644 index 000000000..f8beddf58 --- /dev/null +++ b/packages/create-rslib/fragments/base/node-esm-js/src/index.js @@ -0,0 +1 @@ +export const squared = (n) => n * n; diff --git a/packages/create-rslib/template-node-esm-ts/package.json b/packages/create-rslib/fragments/base/node-esm-ts/package.json similarity index 93% rename from packages/create-rslib/template-node-esm-ts/package.json rename to packages/create-rslib/fragments/base/node-esm-ts/package.json index 89f24593b..6cf9c5f61 100644 --- a/packages/create-rslib/template-node-esm-ts/package.json +++ b/packages/create-rslib/fragments/base/node-esm-ts/package.json @@ -19,6 +19,7 @@ }, "devDependencies": { "@rslib/core": "workspace:*", + "@types/node": "^22.8.1", "typescript": "^5.6.3" } } diff --git a/packages/create-rslib/template-node-esm-ts/rslib.config.ts b/packages/create-rslib/fragments/base/node-esm-ts/rslib.config.ts similarity index 100% rename from packages/create-rslib/template-node-esm-ts/rslib.config.ts rename to packages/create-rslib/fragments/base/node-esm-ts/rslib.config.ts diff --git a/packages/create-rslib/fragments/base/node-esm-ts/src/index.ts b/packages/create-rslib/fragments/base/node-esm-ts/src/index.ts new file mode 100644 index 000000000..fdf0e1164 --- /dev/null +++ b/packages/create-rslib/fragments/base/node-esm-ts/src/index.ts @@ -0,0 +1 @@ +export const squared = (n: number): number => n * n; diff --git a/packages/create-rslib/template-node-dual-ts/tsconfig.json b/packages/create-rslib/fragments/base/node-esm-ts/tsconfig.json similarity index 85% rename from packages/create-rslib/template-node-dual-ts/tsconfig.json rename to packages/create-rslib/fragments/base/node-esm-ts/tsconfig.json index 154e7ebc5..8c5c4d6d0 100644 --- a/packages/create-rslib/template-node-dual-ts/tsconfig.json +++ b/packages/create-rslib/fragments/base/node-esm-ts/tsconfig.json @@ -1,7 +1,6 @@ { "compilerOptions": { - "target": "ES2020", - "lib": ["DOM", "ES2020"], + "lib": ["ES2021"], "module": "ESNext", "noEmit": true, "strict": true, diff --git a/packages/create-rslib/fragments/base/react-js/package.json b/packages/create-rslib/fragments/base/react-js/package.json new file mode 100644 index 000000000..2fe94b90e --- /dev/null +++ b/packages/create-rslib/fragments/base/react-js/package.json @@ -0,0 +1,27 @@ +{ + "name": "rslib-react-js", + "version": "0.0.0", + "type": "module", + "exports": { + ".": { + "import": "./dist/index.js" + } + }, + "module": "./dist/index.js", + "files": [ + "dist" + ], + "scripts": { + "build": "rslib build", + "dev": "rslib build --watch" + }, + "devDependencies": { + "@rsbuild/plugin-react": "^1.0.5", + "@rslib/core": "workspace:*", + "react": "^18.3.1" + }, + "peerDependencies": { + "react": ">=16.9.0", + "react-dom": ">=16.9.0" + } +} diff --git a/packages/create-rslib/fragments/base/react-js/rslib.config.mjs b/packages/create-rslib/fragments/base/react-js/rslib.config.mjs new file mode 100644 index 000000000..7717aff12 --- /dev/null +++ b/packages/create-rslib/fragments/base/react-js/rslib.config.mjs @@ -0,0 +1,23 @@ +import { pluginReact } from '@rsbuild/plugin-react'; +import { defineConfig } from '@rslib/core'; + +export default defineConfig({ + source: { + entry: { + index: ['./src/**'], + }, + }, + lib: [ + { + bundle: false, + format: 'esm', + }, + ], + plugins: [ + pluginReact({ + swcReactOptions: { + runtime: 'classic', + }, + }), + ], +}); diff --git a/packages/create-rslib/fragments/base/react-js/src/Button.jsx b/packages/create-rslib/fragments/base/react-js/src/Button.jsx new file mode 100644 index 000000000..38d46813e --- /dev/null +++ b/packages/create-rslib/fragments/base/react-js/src/Button.jsx @@ -0,0 +1,22 @@ +import React from 'react'; +import './button.css'; + +export const Button = ({ + primary = false, + size = 'medium', + backgroundColor, + label, + ...props +}) => { + const mode = primary ? 'demo-button--primary' : 'demo-button--secondary'; + return ( + + ); +}; diff --git a/packages/create-rslib/fragments/base/react-js/src/button.css b/packages/create-rslib/fragments/base/react-js/src/button.css new file mode 100644 index 000000000..b7a36cbde --- /dev/null +++ b/packages/create-rslib/fragments/base/react-js/src/button.css @@ -0,0 +1,34 @@ +.demo-button { + font-weight: 700; + border: 0; + border-radius: 3em; + cursor: pointer; + display: inline-block; + line-height: 1; +} + +.demo-button--primary { + color: white; + background-color: #1ea7fd; +} + +.demo-button--secondary { + color: #333; + background-color: transparent; + box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset; +} + +.demo-button--small { + font-size: 12px; + padding: 10px 16px; +} + +.demo-button--medium { + font-size: 14px; + padding: 11px 20px; +} + +.demo-button--large { + font-size: 16px; + padding: 12px 24px; +} diff --git a/packages/create-rslib/fragments/base/react-js/src/index.jsx b/packages/create-rslib/fragments/base/react-js/src/index.jsx new file mode 100644 index 000000000..fe9c53c51 --- /dev/null +++ b/packages/create-rslib/fragments/base/react-js/src/index.jsx @@ -0,0 +1 @@ +export { Button } from './Button'; diff --git a/packages/create-rslib/fragments/base/react-ts/package.json b/packages/create-rslib/fragments/base/react-ts/package.json new file mode 100644 index 000000000..dc080d96f --- /dev/null +++ b/packages/create-rslib/fragments/base/react-ts/package.json @@ -0,0 +1,31 @@ +{ + "name": "rslib-react-ts", + "version": "0.0.0", + "type": "module", + "exports": { + ".": { + "types": "./dist/index.d.ts", + "import": "./dist/index.js" + } + }, + "module": "./dist/index.js", + "types": "./dist/index.d.ts", + "files": [ + "dist" + ], + "scripts": { + "build": "rslib build", + "dev": "rslib build --watch" + }, + "devDependencies": { + "@rsbuild/plugin-react": "^1.0.5", + "@rslib/core": "workspace:*", + "@types/react": "^18.3.11", + "react": "^18.3.1", + "typescript": "^5.6.3" + }, + "peerDependencies": { + "react": ">=16.9.0", + "react-dom": ">=16.9.0" + } +} diff --git a/packages/create-rslib/fragments/base/react-ts/rslib.config.ts b/packages/create-rslib/fragments/base/react-ts/rslib.config.ts new file mode 100644 index 000000000..5ae8d4675 --- /dev/null +++ b/packages/create-rslib/fragments/base/react-ts/rslib.config.ts @@ -0,0 +1,24 @@ +import { pluginReact } from '@rsbuild/plugin-react'; +import { defineConfig } from '@rslib/core'; + +export default defineConfig({ + source: { + entry: { + index: ['./src/**'], + }, + }, + lib: [ + { + bundle: false, + dts: true, + format: 'esm', + }, + ], + plugins: [ + pluginReact({ + swcReactOptions: { + runtime: 'classic', + }, + }), + ], +}); diff --git a/packages/create-rslib/fragments/base/react-ts/src/Button.tsx b/packages/create-rslib/fragments/base/react-ts/src/Button.tsx new file mode 100644 index 000000000..b3e99514f --- /dev/null +++ b/packages/create-rslib/fragments/base/react-ts/src/Button.tsx @@ -0,0 +1,30 @@ +import React from 'react'; +import './button.css'; + +interface ButtonProps { + primary?: boolean; + backgroundColor?: string; + size?: 'small' | 'medium' | 'large'; + label: string; + onClick?: () => void; +} + +export const Button = ({ + primary = false, + size = 'medium', + backgroundColor, + label, + ...props +}: ButtonProps) => { + const mode = primary ? 'demo-button--primary' : 'demo-button--secondary'; + return ( + + ); +}; diff --git a/packages/create-rslib/fragments/base/react-ts/src/button.css b/packages/create-rslib/fragments/base/react-ts/src/button.css new file mode 100644 index 000000000..b7a36cbde --- /dev/null +++ b/packages/create-rslib/fragments/base/react-ts/src/button.css @@ -0,0 +1,34 @@ +.demo-button { + font-weight: 700; + border: 0; + border-radius: 3em; + cursor: pointer; + display: inline-block; + line-height: 1; +} + +.demo-button--primary { + color: white; + background-color: #1ea7fd; +} + +.demo-button--secondary { + color: #333; + background-color: transparent; + box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset; +} + +.demo-button--small { + font-size: 12px; + padding: 10px 16px; +} + +.demo-button--medium { + font-size: 14px; + padding: 11px 20px; +} + +.demo-button--large { + font-size: 16px; + padding: 12px 24px; +} diff --git a/packages/create-rslib/fragments/base/react-ts/src/index.tsx b/packages/create-rslib/fragments/base/react-ts/src/index.tsx new file mode 100644 index 000000000..fe9c53c51 --- /dev/null +++ b/packages/create-rslib/fragments/base/react-ts/src/index.tsx @@ -0,0 +1 @@ +export { Button } from './Button'; diff --git a/packages/create-rslib/fragments/base/react-ts/tsconfig.json b/packages/create-rslib/fragments/base/react-ts/tsconfig.json new file mode 100644 index 000000000..62f3966cc --- /dev/null +++ b/packages/create-rslib/fragments/base/react-ts/tsconfig.json @@ -0,0 +1,14 @@ +{ + "compilerOptions": { + "lib": ["DOM", "ES2021"], + "module": "ESNext", + "jsx": "react", + "strict": true, + "skipLibCheck": true, + "isolatedModules": true, + "resolveJsonModule": true, + "moduleResolution": "bundler", + "useDefineForClassFields": true + }, + "include": ["src"] +} diff --git a/packages/create-rslib/fragments/tools/storybook-react-js/.storybook/main.js b/packages/create-rslib/fragments/tools/storybook-react-js/.storybook/main.js new file mode 100644 index 000000000..c3259e8af --- /dev/null +++ b/packages/create-rslib/fragments/tools/storybook-react-js/.storybook/main.js @@ -0,0 +1,36 @@ +import { dirname, join } from 'node:path'; + +/** + * This function is used to resolve the absolute path of a package. + * It is needed in projects that use Yarn PnP or are set up within a monorepo. + */ +function getAbsolutePath(value) { + return dirname(require.resolve(join(value, 'package.json'))); +} + +const config = { + stories: [ + '../stories/**/*.mdx', + '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)', + ], + addons: [ + '@storybook/addon-onboarding', + '@storybook/addon-links', + '@storybook/addon-essentials', + '@storybook/addon-interactions', + 'storybook-addon-rslib', + ], + framework: { + name: getAbsolutePath('storybook-react-rsbuild'), + options: {}, + }, + docs: { + autodocs: 'tag', + }, + typescript: { + reactDocgen: 'react-docgen-typescript', + check: true, + }, +}; + +export default config; diff --git a/packages/create-rslib/fragments/tools/storybook-react-js/.storybook/preview.js b/packages/create-rslib/fragments/tools/storybook-react-js/.storybook/preview.js new file mode 100644 index 000000000..0853b53bd --- /dev/null +++ b/packages/create-rslib/fragments/tools/storybook-react-js/.storybook/preview.js @@ -0,0 +1,12 @@ +const preview = { + parameters: { + controls: { + matchers: { + color: /(background|color)$/i, + date: /Date$/i, + }, + }, + }, +}; + +export default preview; diff --git a/packages/create-rslib/fragments/tools/storybook-react-js/package.json b/packages/create-rslib/fragments/tools/storybook-react-js/package.json new file mode 100644 index 000000000..7c1940fb5 --- /dev/null +++ b/packages/create-rslib/fragments/tools/storybook-react-js/package.json @@ -0,0 +1,19 @@ +{ + "scripts": { + "build:storybook": "storybook build", + "storybook": "storybook dev" + }, + "devDependencies": { + "@rsbuild/core": "~1.0.14", + "@storybook/addon-essentials": "^8.3.6", + "@storybook/addon-interactions": "^8.3.6", + "@storybook/addon-links": "^8.3.6", + "@storybook/addon-onboarding": "^8.3.6", + "@storybook/blocks": "^8.3.6", + "@storybook/react": "^8.3.6", + "@storybook/test": "^8.3.6", + "storybook": "^8.3.6", + "storybook-addon-rslib": "^0.1.2", + "storybook-react-rsbuild": "^0.1.2" + } +} diff --git a/packages/create-rslib/fragments/tools/storybook-react-js/stories/Button.stories.jsx b/packages/create-rslib/fragments/tools/storybook-react-js/stories/Button.stories.jsx new file mode 100644 index 000000000..52df85343 --- /dev/null +++ b/packages/create-rslib/fragments/tools/storybook-react-js/stories/Button.stories.jsx @@ -0,0 +1,50 @@ +import { fn } from '@storybook/test'; +import { Button } from '../src/Button'; + +// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export +const meta = { + title: 'Example/Button', + component: Button, + parameters: { + // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout + layout: 'centered', + }, + // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs + tags: ['autodocs'], + // More on argTypes: https://storybook.js.org/docs/api/argtypes + argTypes: { + backgroundColor: { control: 'color' }, + }, + // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args + args: { onClick: fn() }, +}; + +export default meta; + +// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args +export const Primary = { + args: { + primary: true, + label: 'Button', + }, +}; + +export const Secondary = { + args: { + label: 'Button', + }, +}; + +export const Large = { + args: { + size: 'large', + label: 'Button', + }, +}; + +export const Small = { + args: { + size: 'small', + label: 'Button', + }, +}; diff --git a/packages/create-rslib/fragments/tools/storybook-react-ts/.storybook/main.ts b/packages/create-rslib/fragments/tools/storybook-react-ts/.storybook/main.ts new file mode 100644 index 000000000..deedf6ffa --- /dev/null +++ b/packages/create-rslib/fragments/tools/storybook-react-ts/.storybook/main.ts @@ -0,0 +1,37 @@ +import { dirname, join } from 'node:path'; +import type { StorybookConfig } from 'storybook-react-rsbuild'; + +/** + * This function is used to resolve the absolute path of a package. + * It is needed in projects that use Yarn PnP or are set up within a monorepo. + */ +function getAbsolutePath(value: string): any { + return dirname(require.resolve(join(value, 'package.json'))); +} + +const config: StorybookConfig = { + stories: [ + '../stories/**/*.mdx', + '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)', + ], + addons: [ + '@storybook/addon-onboarding', + '@storybook/addon-links', + '@storybook/addon-essentials', + '@storybook/addon-interactions', + 'storybook-addon-rslib', + ], + framework: { + name: getAbsolutePath('storybook-react-rsbuild'), + options: {}, + }, + docs: { + autodocs: 'tag', + }, + typescript: { + reactDocgen: 'react-docgen-typescript', + check: true, + }, +}; + +export default config; diff --git a/packages/create-rslib/fragments/tools/storybook-react-ts/.storybook/preview.ts b/packages/create-rslib/fragments/tools/storybook-react-ts/.storybook/preview.ts new file mode 100644 index 000000000..adcda96bd --- /dev/null +++ b/packages/create-rslib/fragments/tools/storybook-react-ts/.storybook/preview.ts @@ -0,0 +1,14 @@ +import type { Preview } from '@storybook/react'; + +const preview: Preview = { + parameters: { + controls: { + matchers: { + color: /(background|color)$/i, + date: /Date$/i, + }, + }, + }, +}; + +export default preview; diff --git a/packages/create-rslib/fragments/tools/storybook-react-ts/package.json b/packages/create-rslib/fragments/tools/storybook-react-ts/package.json new file mode 100644 index 000000000..7c1940fb5 --- /dev/null +++ b/packages/create-rslib/fragments/tools/storybook-react-ts/package.json @@ -0,0 +1,19 @@ +{ + "scripts": { + "build:storybook": "storybook build", + "storybook": "storybook dev" + }, + "devDependencies": { + "@rsbuild/core": "~1.0.14", + "@storybook/addon-essentials": "^8.3.6", + "@storybook/addon-interactions": "^8.3.6", + "@storybook/addon-links": "^8.3.6", + "@storybook/addon-onboarding": "^8.3.6", + "@storybook/blocks": "^8.3.6", + "@storybook/react": "^8.3.6", + "@storybook/test": "^8.3.6", + "storybook": "^8.3.6", + "storybook-addon-rslib": "^0.1.2", + "storybook-react-rsbuild": "^0.1.2" + } +} diff --git a/packages/create-rslib/fragments/tools/storybook-react-ts/stories/Button.stories.ts b/packages/create-rslib/fragments/tools/storybook-react-ts/stories/Button.stories.ts new file mode 100644 index 000000000..b35a99786 --- /dev/null +++ b/packages/create-rslib/fragments/tools/storybook-react-ts/stories/Button.stories.ts @@ -0,0 +1,52 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { fn } from '@storybook/test'; +import { Button } from '../src/Button'; + +// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export +const meta = { + title: 'Example/Button', + component: Button, + parameters: { + // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout + layout: 'centered', + }, + // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs + tags: ['autodocs'], + // More on argTypes: https://storybook.js.org/docs/api/argtypes + argTypes: { + backgroundColor: { control: 'color' }, + }, + // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args + args: { onClick: fn() }, +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args +export const Primary: Story = { + args: { + primary: true, + label: 'Button', + }, +}; + +export const Secondary: Story = { + args: { + label: 'Button', + }, +}; + +export const Large: Story = { + args: { + size: 'large', + label: 'Button', + }, +}; + +export const Small: Story = { + args: { + size: 'small', + label: 'Button', + }, +}; diff --git a/packages/create-rslib/fragments/tools/vitest-node-js/package.json b/packages/create-rslib/fragments/tools/vitest-node-js/package.json new file mode 100644 index 000000000..9dfd28dee --- /dev/null +++ b/packages/create-rslib/fragments/tools/vitest-node-js/package.json @@ -0,0 +1,8 @@ +{ + "scripts": { + "test": "vitest run" + }, + "devDependencies": { + "vitest": "^2.1.3" + } +} diff --git a/packages/create-rslib/fragments/tools/vitest-node-js/tests/index.test.js b/packages/create-rslib/fragments/tools/vitest-node-js/tests/index.test.js new file mode 100644 index 000000000..9d50ebb64 --- /dev/null +++ b/packages/create-rslib/fragments/tools/vitest-node-js/tests/index.test.js @@ -0,0 +1,7 @@ +import { expect, test } from 'vitest'; +import { squared } from '../src/index'; + +test('squared', () => { + expect(squared(2)).toBe(4); + expect(squared(12)).toBe(144); +}); diff --git a/packages/create-rslib/fragments/tools/vitest-node-js/vitest.config.js b/packages/create-rslib/fragments/tools/vitest-node-js/vitest.config.js new file mode 100644 index 000000000..ea32b860e --- /dev/null +++ b/packages/create-rslib/fragments/tools/vitest-node-js/vitest.config.js @@ -0,0 +1,8 @@ +/// + +import { defineConfig } from 'vitest/config'; + +export default defineConfig({ + // Configure Vitest (https://vitest.dev/config/) + test: {}, +}); diff --git a/packages/create-rslib/fragments/tools/vitest-node-ts/package.json b/packages/create-rslib/fragments/tools/vitest-node-ts/package.json new file mode 100644 index 000000000..9dfd28dee --- /dev/null +++ b/packages/create-rslib/fragments/tools/vitest-node-ts/package.json @@ -0,0 +1,8 @@ +{ + "scripts": { + "test": "vitest run" + }, + "devDependencies": { + "vitest": "^2.1.3" + } +} diff --git a/packages/create-rslib/fragments/tools/vitest-node-ts/tests/index.test.ts b/packages/create-rslib/fragments/tools/vitest-node-ts/tests/index.test.ts new file mode 100644 index 000000000..9d50ebb64 --- /dev/null +++ b/packages/create-rslib/fragments/tools/vitest-node-ts/tests/index.test.ts @@ -0,0 +1,7 @@ +import { expect, test } from 'vitest'; +import { squared } from '../src/index'; + +test('squared', () => { + expect(squared(2)).toBe(4); + expect(squared(12)).toBe(144); +}); diff --git a/packages/create-rslib/fragments/tools/vitest-node-ts/vitest.config.ts b/packages/create-rslib/fragments/tools/vitest-node-ts/vitest.config.ts new file mode 100644 index 000000000..e83eaf4c5 --- /dev/null +++ b/packages/create-rslib/fragments/tools/vitest-node-ts/vitest.config.ts @@ -0,0 +1,6 @@ +import { defineConfig } from 'vitest/config'; + +export default defineConfig({ + // Configure Vitest (https://vitest.dev/config/) + test: {}, +}); diff --git a/packages/create-rslib/fragments/tools/vitest-react-js/package.json b/packages/create-rslib/fragments/tools/vitest-react-js/package.json new file mode 100644 index 000000000..88d95c5c2 --- /dev/null +++ b/packages/create-rslib/fragments/tools/vitest-react-js/package.json @@ -0,0 +1,11 @@ +{ + "scripts": { + "test": "vitest run" + }, + "devDependencies": { + "@testing-library/jest-dom": "^6.4.2", + "@testing-library/react": "^13.2.0", + "jsdom": "^25.0.1", + "vitest": "^2.1.3" + } +} diff --git a/packages/create-rslib/fragments/tools/vitest-react-js/tests/index.test.jsx b/packages/create-rslib/fragments/tools/vitest-react-js/tests/index.test.jsx new file mode 100644 index 000000000..873abfe08 --- /dev/null +++ b/packages/create-rslib/fragments/tools/vitest-react-js/tests/index.test.jsx @@ -0,0 +1,12 @@ +import { render, screen } from '@testing-library/react'; +import React from 'react'; +import { expect, test } from 'vitest'; +import { Button } from '../src/Button'; + +test('The button should have correct background color', async () => { + render( + ); +}; diff --git a/packages/create-rslib/template-[react]-[]-js/src/button.css b/packages/create-rslib/template-[react]-[]-js/src/button.css new file mode 100644 index 000000000..b7a36cbde --- /dev/null +++ b/packages/create-rslib/template-[react]-[]-js/src/button.css @@ -0,0 +1,34 @@ +.demo-button { + font-weight: 700; + border: 0; + border-radius: 3em; + cursor: pointer; + display: inline-block; + line-height: 1; +} + +.demo-button--primary { + color: white; + background-color: #1ea7fd; +} + +.demo-button--secondary { + color: #333; + background-color: transparent; + box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset; +} + +.demo-button--small { + font-size: 12px; + padding: 10px 16px; +} + +.demo-button--medium { + font-size: 14px; + padding: 11px 20px; +} + +.demo-button--large { + font-size: 16px; + padding: 12px 24px; +} diff --git a/packages/create-rslib/template-[react]-[]-js/src/index.jsx b/packages/create-rslib/template-[react]-[]-js/src/index.jsx new file mode 100644 index 000000000..fe9c53c51 --- /dev/null +++ b/packages/create-rslib/template-[react]-[]-js/src/index.jsx @@ -0,0 +1 @@ +export { Button } from './Button'; diff --git a/packages/create-rslib/template-[react]-[]-ts/package.json b/packages/create-rslib/template-[react]-[]-ts/package.json new file mode 100644 index 000000000..4c700526c --- /dev/null +++ b/packages/create-rslib/template-[react]-[]-ts/package.json @@ -0,0 +1,31 @@ +{ + "name": "rslib-react-ts", + "version": "0.0.0", + "type": "module", + "exports": { + ".": { + "types": "./dist/index.d.ts", + "import": "./dist/index.js" + } + }, + "module": "./dist/index.js", + "types": "./dist/index.d.ts", + "files": [ + "dist" + ], + "scripts": { + "build": "rslib build", + "dev": "rslib build --watch" + }, + "devDependencies": { + "@rsbuild/plugin-react": "^1.0.5", + "@rslib/core": "^0.0.14", + "@types/react": "^18.3.11", + "react": "^18.3.1", + "typescript": "^5.6.3" + }, + "peerDependencies": { + "react": ">=16.9.0", + "react-dom": ">=16.9.0" + } +} diff --git a/packages/create-rslib/template-[react]-[]-ts/rslib.config.ts b/packages/create-rslib/template-[react]-[]-ts/rslib.config.ts new file mode 100644 index 000000000..5ae8d4675 --- /dev/null +++ b/packages/create-rslib/template-[react]-[]-ts/rslib.config.ts @@ -0,0 +1,24 @@ +import { pluginReact } from '@rsbuild/plugin-react'; +import { defineConfig } from '@rslib/core'; + +export default defineConfig({ + source: { + entry: { + index: ['./src/**'], + }, + }, + lib: [ + { + bundle: false, + dts: true, + format: 'esm', + }, + ], + plugins: [ + pluginReact({ + swcReactOptions: { + runtime: 'classic', + }, + }), + ], +}); diff --git a/packages/create-rslib/template-[react]-[]-ts/src/Button.tsx b/packages/create-rslib/template-[react]-[]-ts/src/Button.tsx new file mode 100644 index 000000000..b3e99514f --- /dev/null +++ b/packages/create-rslib/template-[react]-[]-ts/src/Button.tsx @@ -0,0 +1,30 @@ +import React from 'react'; +import './button.css'; + +interface ButtonProps { + primary?: boolean; + backgroundColor?: string; + size?: 'small' | 'medium' | 'large'; + label: string; + onClick?: () => void; +} + +export const Button = ({ + primary = false, + size = 'medium', + backgroundColor, + label, + ...props +}: ButtonProps) => { + const mode = primary ? 'demo-button--primary' : 'demo-button--secondary'; + return ( + + ); +}; diff --git a/packages/create-rslib/template-[react]-[]-ts/src/button.css b/packages/create-rslib/template-[react]-[]-ts/src/button.css new file mode 100644 index 000000000..b7a36cbde --- /dev/null +++ b/packages/create-rslib/template-[react]-[]-ts/src/button.css @@ -0,0 +1,34 @@ +.demo-button { + font-weight: 700; + border: 0; + border-radius: 3em; + cursor: pointer; + display: inline-block; + line-height: 1; +} + +.demo-button--primary { + color: white; + background-color: #1ea7fd; +} + +.demo-button--secondary { + color: #333; + background-color: transparent; + box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset; +} + +.demo-button--small { + font-size: 12px; + padding: 10px 16px; +} + +.demo-button--medium { + font-size: 14px; + padding: 11px 20px; +} + +.demo-button--large { + font-size: 16px; + padding: 12px 24px; +} diff --git a/packages/create-rslib/template-[react]-[]-ts/src/index.tsx b/packages/create-rslib/template-[react]-[]-ts/src/index.tsx new file mode 100644 index 000000000..fe9c53c51 --- /dev/null +++ b/packages/create-rslib/template-[react]-[]-ts/src/index.tsx @@ -0,0 +1 @@ +export { Button } from './Button'; diff --git a/packages/create-rslib/template-[react]-[]-ts/tsconfig.json b/packages/create-rslib/template-[react]-[]-ts/tsconfig.json new file mode 100644 index 000000000..62f3966cc --- /dev/null +++ b/packages/create-rslib/template-[react]-[]-ts/tsconfig.json @@ -0,0 +1,14 @@ +{ + "compilerOptions": { + "lib": ["DOM", "ES2021"], + "module": "ESNext", + "jsx": "react", + "strict": true, + "skipLibCheck": true, + "isolatedModules": true, + "resolveJsonModule": true, + "moduleResolution": "bundler", + "useDefineForClassFields": true + }, + "include": ["src"] +} diff --git a/packages/create-rslib/template-[react]-[storybook,vitest]-js/.storybook/main.js b/packages/create-rslib/template-[react]-[storybook,vitest]-js/.storybook/main.js new file mode 100644 index 000000000..c3259e8af --- /dev/null +++ b/packages/create-rslib/template-[react]-[storybook,vitest]-js/.storybook/main.js @@ -0,0 +1,36 @@ +import { dirname, join } from 'node:path'; + +/** + * This function is used to resolve the absolute path of a package. + * It is needed in projects that use Yarn PnP or are set up within a monorepo. + */ +function getAbsolutePath(value) { + return dirname(require.resolve(join(value, 'package.json'))); +} + +const config = { + stories: [ + '../stories/**/*.mdx', + '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)', + ], + addons: [ + '@storybook/addon-onboarding', + '@storybook/addon-links', + '@storybook/addon-essentials', + '@storybook/addon-interactions', + 'storybook-addon-rslib', + ], + framework: { + name: getAbsolutePath('storybook-react-rsbuild'), + options: {}, + }, + docs: { + autodocs: 'tag', + }, + typescript: { + reactDocgen: 'react-docgen-typescript', + check: true, + }, +}; + +export default config; diff --git a/packages/create-rslib/template-[react]-[storybook,vitest]-js/.storybook/preview.js b/packages/create-rslib/template-[react]-[storybook,vitest]-js/.storybook/preview.js new file mode 100644 index 000000000..0853b53bd --- /dev/null +++ b/packages/create-rslib/template-[react]-[storybook,vitest]-js/.storybook/preview.js @@ -0,0 +1,12 @@ +const preview = { + parameters: { + controls: { + matchers: { + color: /(background|color)$/i, + date: /Date$/i, + }, + }, + }, +}; + +export default preview; diff --git a/packages/create-rslib/template-[react]-[storybook,vitest]-js/package.json b/packages/create-rslib/template-[react]-[storybook,vitest]-js/package.json new file mode 100644 index 000000000..df9b24fb1 --- /dev/null +++ b/packages/create-rslib/template-[react]-[storybook,vitest]-js/package.json @@ -0,0 +1,45 @@ +{ + "name": "rslib-react-js", + "version": "0.0.0", + "type": "module", + "exports": { + ".": { + "import": "./dist/index.js" + } + }, + "module": "./dist/index.js", + "files": [ + "dist" + ], + "scripts": { + "build": "rslib build", + "build:storybook": "storybook build", + "dev": "rslib build --watch", + "storybook": "storybook dev", + "test": "vitest run" + }, + "devDependencies": { + "@rsbuild/core": "~1.0.14", + "@rsbuild/plugin-react": "^1.0.5", + "@rslib/core": "^0.0.14", + "@storybook/addon-essentials": "^8.3.6", + "@storybook/addon-interactions": "^8.3.6", + "@storybook/addon-links": "^8.3.6", + "@storybook/addon-onboarding": "^8.3.6", + "@storybook/blocks": "^8.3.6", + "@storybook/react": "^8.3.6", + "@storybook/test": "^8.3.6", + "@testing-library/jest-dom": "^6.4.2", + "@testing-library/react": "^13.2.0", + "jsdom": "^25.0.1", + "react": "^18.3.1", + "storybook": "^8.3.6", + "storybook-addon-rslib": "^0.1.2", + "storybook-react-rsbuild": "^0.1.2", + "vitest": "^2.1.3" + }, + "peerDependencies": { + "react": ">=16.9.0", + "react-dom": ">=16.9.0" + } +} diff --git a/packages/create-rslib/template-[react]-[storybook,vitest]-js/rslib.config.mjs b/packages/create-rslib/template-[react]-[storybook,vitest]-js/rslib.config.mjs new file mode 100644 index 000000000..7717aff12 --- /dev/null +++ b/packages/create-rslib/template-[react]-[storybook,vitest]-js/rslib.config.mjs @@ -0,0 +1,23 @@ +import { pluginReact } from '@rsbuild/plugin-react'; +import { defineConfig } from '@rslib/core'; + +export default defineConfig({ + source: { + entry: { + index: ['./src/**'], + }, + }, + lib: [ + { + bundle: false, + format: 'esm', + }, + ], + plugins: [ + pluginReact({ + swcReactOptions: { + runtime: 'classic', + }, + }), + ], +}); diff --git a/packages/create-rslib/template-[react]-[storybook,vitest]-js/src/Button.jsx b/packages/create-rslib/template-[react]-[storybook,vitest]-js/src/Button.jsx new file mode 100644 index 000000000..38d46813e --- /dev/null +++ b/packages/create-rslib/template-[react]-[storybook,vitest]-js/src/Button.jsx @@ -0,0 +1,22 @@ +import React from 'react'; +import './button.css'; + +export const Button = ({ + primary = false, + size = 'medium', + backgroundColor, + label, + ...props +}) => { + const mode = primary ? 'demo-button--primary' : 'demo-button--secondary'; + return ( + + ); +}; diff --git a/packages/create-rslib/template-[react]-[storybook,vitest]-js/src/button.css b/packages/create-rslib/template-[react]-[storybook,vitest]-js/src/button.css new file mode 100644 index 000000000..b7a36cbde --- /dev/null +++ b/packages/create-rslib/template-[react]-[storybook,vitest]-js/src/button.css @@ -0,0 +1,34 @@ +.demo-button { + font-weight: 700; + border: 0; + border-radius: 3em; + cursor: pointer; + display: inline-block; + line-height: 1; +} + +.demo-button--primary { + color: white; + background-color: #1ea7fd; +} + +.demo-button--secondary { + color: #333; + background-color: transparent; + box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset; +} + +.demo-button--small { + font-size: 12px; + padding: 10px 16px; +} + +.demo-button--medium { + font-size: 14px; + padding: 11px 20px; +} + +.demo-button--large { + font-size: 16px; + padding: 12px 24px; +} diff --git a/packages/create-rslib/template-[react]-[storybook,vitest]-js/src/index.jsx b/packages/create-rslib/template-[react]-[storybook,vitest]-js/src/index.jsx new file mode 100644 index 000000000..fe9c53c51 --- /dev/null +++ b/packages/create-rslib/template-[react]-[storybook,vitest]-js/src/index.jsx @@ -0,0 +1 @@ +export { Button } from './Button'; diff --git a/packages/create-rslib/template-[react]-[storybook,vitest]-js/stories/Button.stories.jsx b/packages/create-rslib/template-[react]-[storybook,vitest]-js/stories/Button.stories.jsx new file mode 100644 index 000000000..52df85343 --- /dev/null +++ b/packages/create-rslib/template-[react]-[storybook,vitest]-js/stories/Button.stories.jsx @@ -0,0 +1,50 @@ +import { fn } from '@storybook/test'; +import { Button } from '../src/Button'; + +// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export +const meta = { + title: 'Example/Button', + component: Button, + parameters: { + // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout + layout: 'centered', + }, + // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs + tags: ['autodocs'], + // More on argTypes: https://storybook.js.org/docs/api/argtypes + argTypes: { + backgroundColor: { control: 'color' }, + }, + // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args + args: { onClick: fn() }, +}; + +export default meta; + +// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args +export const Primary = { + args: { + primary: true, + label: 'Button', + }, +}; + +export const Secondary = { + args: { + label: 'Button', + }, +}; + +export const Large = { + args: { + size: 'large', + label: 'Button', + }, +}; + +export const Small = { + args: { + size: 'small', + label: 'Button', + }, +}; diff --git a/packages/create-rslib/template-[react]-[storybook,vitest]-js/tests/index.test.jsx b/packages/create-rslib/template-[react]-[storybook,vitest]-js/tests/index.test.jsx new file mode 100644 index 000000000..873abfe08 --- /dev/null +++ b/packages/create-rslib/template-[react]-[storybook,vitest]-js/tests/index.test.jsx @@ -0,0 +1,12 @@ +import { render, screen } from '@testing-library/react'; +import React from 'react'; +import { expect, test } from 'vitest'; +import { Button } from '../src/Button'; + +test('The button should have correct background color', async () => { + render( + ); +}; diff --git a/packages/create-rslib/template-[react]-[storybook,vitest]-ts/src/button.css b/packages/create-rslib/template-[react]-[storybook,vitest]-ts/src/button.css new file mode 100644 index 000000000..b7a36cbde --- /dev/null +++ b/packages/create-rslib/template-[react]-[storybook,vitest]-ts/src/button.css @@ -0,0 +1,34 @@ +.demo-button { + font-weight: 700; + border: 0; + border-radius: 3em; + cursor: pointer; + display: inline-block; + line-height: 1; +} + +.demo-button--primary { + color: white; + background-color: #1ea7fd; +} + +.demo-button--secondary { + color: #333; + background-color: transparent; + box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset; +} + +.demo-button--small { + font-size: 12px; + padding: 10px 16px; +} + +.demo-button--medium { + font-size: 14px; + padding: 11px 20px; +} + +.demo-button--large { + font-size: 16px; + padding: 12px 24px; +} diff --git a/packages/create-rslib/template-[react]-[storybook,vitest]-ts/src/index.tsx b/packages/create-rslib/template-[react]-[storybook,vitest]-ts/src/index.tsx new file mode 100644 index 000000000..fe9c53c51 --- /dev/null +++ b/packages/create-rslib/template-[react]-[storybook,vitest]-ts/src/index.tsx @@ -0,0 +1 @@ +export { Button } from './Button'; diff --git a/packages/create-rslib/template-[react]-[storybook,vitest]-ts/stories/Button.stories.ts b/packages/create-rslib/template-[react]-[storybook,vitest]-ts/stories/Button.stories.ts new file mode 100644 index 000000000..b35a99786 --- /dev/null +++ b/packages/create-rslib/template-[react]-[storybook,vitest]-ts/stories/Button.stories.ts @@ -0,0 +1,52 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { fn } from '@storybook/test'; +import { Button } from '../src/Button'; + +// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export +const meta = { + title: 'Example/Button', + component: Button, + parameters: { + // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout + layout: 'centered', + }, + // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs + tags: ['autodocs'], + // More on argTypes: https://storybook.js.org/docs/api/argtypes + argTypes: { + backgroundColor: { control: 'color' }, + }, + // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args + args: { onClick: fn() }, +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args +export const Primary: Story = { + args: { + primary: true, + label: 'Button', + }, +}; + +export const Secondary: Story = { + args: { + label: 'Button', + }, +}; + +export const Large: Story = { + args: { + size: 'large', + label: 'Button', + }, +}; + +export const Small: Story = { + args: { + size: 'small', + label: 'Button', + }, +}; diff --git a/packages/create-rslib/template-[react]-[storybook,vitest]-ts/tests/index.test.tsx b/packages/create-rslib/template-[react]-[storybook,vitest]-ts/tests/index.test.tsx new file mode 100644 index 000000000..873abfe08 --- /dev/null +++ b/packages/create-rslib/template-[react]-[storybook,vitest]-ts/tests/index.test.tsx @@ -0,0 +1,12 @@ +import { render, screen } from '@testing-library/react'; +import React from 'react'; +import { expect, test } from 'vitest'; +import { Button } from '../src/Button'; + +test('The button should have correct background color', async () => { + render( + ); +}; diff --git a/packages/create-rslib/template-[react]-[storybook]-js/src/button.css b/packages/create-rslib/template-[react]-[storybook]-js/src/button.css new file mode 100644 index 000000000..b7a36cbde --- /dev/null +++ b/packages/create-rslib/template-[react]-[storybook]-js/src/button.css @@ -0,0 +1,34 @@ +.demo-button { + font-weight: 700; + border: 0; + border-radius: 3em; + cursor: pointer; + display: inline-block; + line-height: 1; +} + +.demo-button--primary { + color: white; + background-color: #1ea7fd; +} + +.demo-button--secondary { + color: #333; + background-color: transparent; + box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset; +} + +.demo-button--small { + font-size: 12px; + padding: 10px 16px; +} + +.demo-button--medium { + font-size: 14px; + padding: 11px 20px; +} + +.demo-button--large { + font-size: 16px; + padding: 12px 24px; +} diff --git a/packages/create-rslib/template-[react]-[storybook]-js/src/index.jsx b/packages/create-rslib/template-[react]-[storybook]-js/src/index.jsx new file mode 100644 index 000000000..fe9c53c51 --- /dev/null +++ b/packages/create-rslib/template-[react]-[storybook]-js/src/index.jsx @@ -0,0 +1 @@ +export { Button } from './Button'; diff --git a/packages/create-rslib/template-[react]-[storybook]-js/stories/Button.stories.jsx b/packages/create-rslib/template-[react]-[storybook]-js/stories/Button.stories.jsx new file mode 100644 index 000000000..52df85343 --- /dev/null +++ b/packages/create-rslib/template-[react]-[storybook]-js/stories/Button.stories.jsx @@ -0,0 +1,50 @@ +import { fn } from '@storybook/test'; +import { Button } from '../src/Button'; + +// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export +const meta = { + title: 'Example/Button', + component: Button, + parameters: { + // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout + layout: 'centered', + }, + // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs + tags: ['autodocs'], + // More on argTypes: https://storybook.js.org/docs/api/argtypes + argTypes: { + backgroundColor: { control: 'color' }, + }, + // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args + args: { onClick: fn() }, +}; + +export default meta; + +// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args +export const Primary = { + args: { + primary: true, + label: 'Button', + }, +}; + +export const Secondary = { + args: { + label: 'Button', + }, +}; + +export const Large = { + args: { + size: 'large', + label: 'Button', + }, +}; + +export const Small = { + args: { + size: 'small', + label: 'Button', + }, +}; diff --git a/packages/create-rslib/template-[react]-[storybook]-ts/.storybook/main.ts b/packages/create-rslib/template-[react]-[storybook]-ts/.storybook/main.ts new file mode 100644 index 000000000..deedf6ffa --- /dev/null +++ b/packages/create-rslib/template-[react]-[storybook]-ts/.storybook/main.ts @@ -0,0 +1,37 @@ +import { dirname, join } from 'node:path'; +import type { StorybookConfig } from 'storybook-react-rsbuild'; + +/** + * This function is used to resolve the absolute path of a package. + * It is needed in projects that use Yarn PnP or are set up within a monorepo. + */ +function getAbsolutePath(value: string): any { + return dirname(require.resolve(join(value, 'package.json'))); +} + +const config: StorybookConfig = { + stories: [ + '../stories/**/*.mdx', + '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)', + ], + addons: [ + '@storybook/addon-onboarding', + '@storybook/addon-links', + '@storybook/addon-essentials', + '@storybook/addon-interactions', + 'storybook-addon-rslib', + ], + framework: { + name: getAbsolutePath('storybook-react-rsbuild'), + options: {}, + }, + docs: { + autodocs: 'tag', + }, + typescript: { + reactDocgen: 'react-docgen-typescript', + check: true, + }, +}; + +export default config; diff --git a/packages/create-rslib/template-[react]-[storybook]-ts/.storybook/preview.ts b/packages/create-rslib/template-[react]-[storybook]-ts/.storybook/preview.ts new file mode 100644 index 000000000..adcda96bd --- /dev/null +++ b/packages/create-rslib/template-[react]-[storybook]-ts/.storybook/preview.ts @@ -0,0 +1,14 @@ +import type { Preview } from '@storybook/react'; + +const preview: Preview = { + parameters: { + controls: { + matchers: { + color: /(background|color)$/i, + date: /Date$/i, + }, + }, + }, +}; + +export default preview; diff --git a/packages/create-rslib/template-[react]-[storybook]-ts/package.json b/packages/create-rslib/template-[react]-[storybook]-ts/package.json new file mode 100644 index 000000000..ae5952ad9 --- /dev/null +++ b/packages/create-rslib/template-[react]-[storybook]-ts/package.json @@ -0,0 +1,44 @@ +{ + "name": "rslib-react-ts", + "version": "0.0.0", + "type": "module", + "exports": { + ".": { + "types": "./dist/index.d.ts", + "import": "./dist/index.js" + } + }, + "module": "./dist/index.js", + "types": "./dist/index.d.ts", + "files": [ + "dist" + ], + "scripts": { + "build": "rslib build", + "build:storybook": "storybook build", + "dev": "rslib build --watch", + "storybook": "storybook dev" + }, + "devDependencies": { + "@rsbuild/core": "~1.0.14", + "@rsbuild/plugin-react": "^1.0.5", + "@rslib/core": "^0.0.14", + "@storybook/addon-essentials": "^8.3.6", + "@storybook/addon-interactions": "^8.3.6", + "@storybook/addon-links": "^8.3.6", + "@storybook/addon-onboarding": "^8.3.6", + "@storybook/blocks": "^8.3.6", + "@storybook/react": "^8.3.6", + "@storybook/test": "^8.3.6", + "@types/react": "^18.3.11", + "react": "^18.3.1", + "storybook": "^8.3.6", + "storybook-addon-rslib": "^0.1.2", + "storybook-react-rsbuild": "^0.1.2", + "typescript": "^5.6.3" + }, + "peerDependencies": { + "react": ">=16.9.0", + "react-dom": ">=16.9.0" + } +} diff --git a/packages/create-rslib/template-[react]-[storybook]-ts/rslib.config.ts b/packages/create-rslib/template-[react]-[storybook]-ts/rslib.config.ts new file mode 100644 index 000000000..5ae8d4675 --- /dev/null +++ b/packages/create-rslib/template-[react]-[storybook]-ts/rslib.config.ts @@ -0,0 +1,24 @@ +import { pluginReact } from '@rsbuild/plugin-react'; +import { defineConfig } from '@rslib/core'; + +export default defineConfig({ + source: { + entry: { + index: ['./src/**'], + }, + }, + lib: [ + { + bundle: false, + dts: true, + format: 'esm', + }, + ], + plugins: [ + pluginReact({ + swcReactOptions: { + runtime: 'classic', + }, + }), + ], +}); diff --git a/packages/create-rslib/template-[react]-[storybook]-ts/src/Button.tsx b/packages/create-rslib/template-[react]-[storybook]-ts/src/Button.tsx new file mode 100644 index 000000000..b3e99514f --- /dev/null +++ b/packages/create-rslib/template-[react]-[storybook]-ts/src/Button.tsx @@ -0,0 +1,30 @@ +import React from 'react'; +import './button.css'; + +interface ButtonProps { + primary?: boolean; + backgroundColor?: string; + size?: 'small' | 'medium' | 'large'; + label: string; + onClick?: () => void; +} + +export const Button = ({ + primary = false, + size = 'medium', + backgroundColor, + label, + ...props +}: ButtonProps) => { + const mode = primary ? 'demo-button--primary' : 'demo-button--secondary'; + return ( + + ); +}; diff --git a/packages/create-rslib/template-[react]-[storybook]-ts/src/button.css b/packages/create-rslib/template-[react]-[storybook]-ts/src/button.css new file mode 100644 index 000000000..b7a36cbde --- /dev/null +++ b/packages/create-rslib/template-[react]-[storybook]-ts/src/button.css @@ -0,0 +1,34 @@ +.demo-button { + font-weight: 700; + border: 0; + border-radius: 3em; + cursor: pointer; + display: inline-block; + line-height: 1; +} + +.demo-button--primary { + color: white; + background-color: #1ea7fd; +} + +.demo-button--secondary { + color: #333; + background-color: transparent; + box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset; +} + +.demo-button--small { + font-size: 12px; + padding: 10px 16px; +} + +.demo-button--medium { + font-size: 14px; + padding: 11px 20px; +} + +.demo-button--large { + font-size: 16px; + padding: 12px 24px; +} diff --git a/packages/create-rslib/template-[react]-[storybook]-ts/src/index.tsx b/packages/create-rslib/template-[react]-[storybook]-ts/src/index.tsx new file mode 100644 index 000000000..fe9c53c51 --- /dev/null +++ b/packages/create-rslib/template-[react]-[storybook]-ts/src/index.tsx @@ -0,0 +1 @@ +export { Button } from './Button'; diff --git a/packages/create-rslib/template-[react]-[storybook]-ts/stories/Button.stories.ts b/packages/create-rslib/template-[react]-[storybook]-ts/stories/Button.stories.ts new file mode 100644 index 000000000..b35a99786 --- /dev/null +++ b/packages/create-rslib/template-[react]-[storybook]-ts/stories/Button.stories.ts @@ -0,0 +1,52 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { fn } from '@storybook/test'; +import { Button } from '../src/Button'; + +// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export +const meta = { + title: 'Example/Button', + component: Button, + parameters: { + // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout + layout: 'centered', + }, + // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs + tags: ['autodocs'], + // More on argTypes: https://storybook.js.org/docs/api/argtypes + argTypes: { + backgroundColor: { control: 'color' }, + }, + // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args + args: { onClick: fn() }, +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args +export const Primary: Story = { + args: { + primary: true, + label: 'Button', + }, +}; + +export const Secondary: Story = { + args: { + label: 'Button', + }, +}; + +export const Large: Story = { + args: { + size: 'large', + label: 'Button', + }, +}; + +export const Small: Story = { + args: { + size: 'small', + label: 'Button', + }, +}; diff --git a/packages/create-rslib/template-[react]-[storybook]-ts/tsconfig.json b/packages/create-rslib/template-[react]-[storybook]-ts/tsconfig.json new file mode 100644 index 000000000..62f3966cc --- /dev/null +++ b/packages/create-rslib/template-[react]-[storybook]-ts/tsconfig.json @@ -0,0 +1,14 @@ +{ + "compilerOptions": { + "lib": ["DOM", "ES2021"], + "module": "ESNext", + "jsx": "react", + "strict": true, + "skipLibCheck": true, + "isolatedModules": true, + "resolveJsonModule": true, + "moduleResolution": "bundler", + "useDefineForClassFields": true + }, + "include": ["src"] +} diff --git a/packages/create-rslib/template-[react]-[vitest]-js/package.json b/packages/create-rslib/template-[react]-[vitest]-js/package.json new file mode 100644 index 000000000..4462d414a --- /dev/null +++ b/packages/create-rslib/template-[react]-[vitest]-js/package.json @@ -0,0 +1,32 @@ +{ + "name": "rslib-react-js", + "version": "0.0.0", + "type": "module", + "exports": { + ".": { + "import": "./dist/index.js" + } + }, + "module": "./dist/index.js", + "files": [ + "dist" + ], + "scripts": { + "build": "rslib build", + "dev": "rslib build --watch", + "test": "vitest run" + }, + "devDependencies": { + "@rsbuild/plugin-react": "^1.0.5", + "@rslib/core": "^0.0.14", + "@testing-library/jest-dom": "^6.4.2", + "@testing-library/react": "^13.2.0", + "jsdom": "^25.0.1", + "react": "^18.3.1", + "vitest": "^2.1.3" + }, + "peerDependencies": { + "react": ">=16.9.0", + "react-dom": ">=16.9.0" + } +} diff --git a/packages/create-rslib/template-[react]-[vitest]-js/rslib.config.mjs b/packages/create-rslib/template-[react]-[vitest]-js/rslib.config.mjs new file mode 100644 index 000000000..7717aff12 --- /dev/null +++ b/packages/create-rslib/template-[react]-[vitest]-js/rslib.config.mjs @@ -0,0 +1,23 @@ +import { pluginReact } from '@rsbuild/plugin-react'; +import { defineConfig } from '@rslib/core'; + +export default defineConfig({ + source: { + entry: { + index: ['./src/**'], + }, + }, + lib: [ + { + bundle: false, + format: 'esm', + }, + ], + plugins: [ + pluginReact({ + swcReactOptions: { + runtime: 'classic', + }, + }), + ], +}); diff --git a/packages/create-rslib/template-[react]-[vitest]-js/src/Button.jsx b/packages/create-rslib/template-[react]-[vitest]-js/src/Button.jsx new file mode 100644 index 000000000..38d46813e --- /dev/null +++ b/packages/create-rslib/template-[react]-[vitest]-js/src/Button.jsx @@ -0,0 +1,22 @@ +import React from 'react'; +import './button.css'; + +export const Button = ({ + primary = false, + size = 'medium', + backgroundColor, + label, + ...props +}) => { + const mode = primary ? 'demo-button--primary' : 'demo-button--secondary'; + return ( + + ); +}; diff --git a/packages/create-rslib/template-[react]-[vitest]-js/src/button.css b/packages/create-rslib/template-[react]-[vitest]-js/src/button.css new file mode 100644 index 000000000..b7a36cbde --- /dev/null +++ b/packages/create-rslib/template-[react]-[vitest]-js/src/button.css @@ -0,0 +1,34 @@ +.demo-button { + font-weight: 700; + border: 0; + border-radius: 3em; + cursor: pointer; + display: inline-block; + line-height: 1; +} + +.demo-button--primary { + color: white; + background-color: #1ea7fd; +} + +.demo-button--secondary { + color: #333; + background-color: transparent; + box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset; +} + +.demo-button--small { + font-size: 12px; + padding: 10px 16px; +} + +.demo-button--medium { + font-size: 14px; + padding: 11px 20px; +} + +.demo-button--large { + font-size: 16px; + padding: 12px 24px; +} diff --git a/packages/create-rslib/template-[react]-[vitest]-js/src/index.jsx b/packages/create-rslib/template-[react]-[vitest]-js/src/index.jsx new file mode 100644 index 000000000..fe9c53c51 --- /dev/null +++ b/packages/create-rslib/template-[react]-[vitest]-js/src/index.jsx @@ -0,0 +1 @@ +export { Button } from './Button'; diff --git a/packages/create-rslib/template-[react]-[vitest]-js/tests/index.test.jsx b/packages/create-rslib/template-[react]-[vitest]-js/tests/index.test.jsx new file mode 100644 index 000000000..873abfe08 --- /dev/null +++ b/packages/create-rslib/template-[react]-[vitest]-js/tests/index.test.jsx @@ -0,0 +1,12 @@ +import { render, screen } from '@testing-library/react'; +import React from 'react'; +import { expect, test } from 'vitest'; +import { Button } from '../src/Button'; + +test('The button should have correct background color', async () => { + render( + ); +}; diff --git a/packages/create-rslib/template-[react]-[vitest]-ts/src/button.css b/packages/create-rslib/template-[react]-[vitest]-ts/src/button.css new file mode 100644 index 000000000..b7a36cbde --- /dev/null +++ b/packages/create-rslib/template-[react]-[vitest]-ts/src/button.css @@ -0,0 +1,34 @@ +.demo-button { + font-weight: 700; + border: 0; + border-radius: 3em; + cursor: pointer; + display: inline-block; + line-height: 1; +} + +.demo-button--primary { + color: white; + background-color: #1ea7fd; +} + +.demo-button--secondary { + color: #333; + background-color: transparent; + box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset; +} + +.demo-button--small { + font-size: 12px; + padding: 10px 16px; +} + +.demo-button--medium { + font-size: 14px; + padding: 11px 20px; +} + +.demo-button--large { + font-size: 16px; + padding: 12px 24px; +} diff --git a/packages/create-rslib/template-[react]-[vitest]-ts/src/index.tsx b/packages/create-rslib/template-[react]-[vitest]-ts/src/index.tsx new file mode 100644 index 000000000..fe9c53c51 --- /dev/null +++ b/packages/create-rslib/template-[react]-[vitest]-ts/src/index.tsx @@ -0,0 +1 @@ +export { Button } from './Button'; diff --git a/packages/create-rslib/template-[react]-[vitest]-ts/tests/index.test.tsx b/packages/create-rslib/template-[react]-[vitest]-ts/tests/index.test.tsx new file mode 100644 index 000000000..873abfe08 --- /dev/null +++ b/packages/create-rslib/template-[react]-[vitest]-ts/tests/index.test.tsx @@ -0,0 +1,12 @@ +import { render, screen } from '@testing-library/react'; +import React from 'react'; +import { expect, test } from 'vitest'; +import { Button } from '../src/Button'; + +test('The button should have correct background color', async () => { + render(