create-rslib 0.8.0 → 0.9.0

package/template-[vue]-[storybook,vitest]-js/src/style.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;
+}

package/template-[vue]-[storybook,vitest]-js/stories/Button.stories.js

@@ -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',
+  },
+};

package/template-[vue]-[storybook,vitest]-js/tests/index.test.js

@@ -0,0 +1,16 @@
+import { render, screen } from '@testing-library/vue';
+import { expect, test } from 'vitest';
+import Button from '../src/Button.vue';
+
+test('The button should have correct background color', async () => {
+  render(Button, {
+    props: {
+      backgroundColor: '#ccc',
+      label: 'Demo Button',
+    },
+  });
+  const button = screen.getByText('Demo Button');
+  expect(button).toHaveStyle({
+    backgroundColor: '#ccc',
+  });
+});

package/template-[vue]-[storybook,vitest]-js/vitest.config.js

@@ -0,0 +1,13 @@
+/// <reference types="vitest/config" />
+
+import pluginVue from '@vitejs/plugin-vue';
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  // Configure Vitest (https://vitest.dev/config/)
+  test: {
+    environment: 'jsdom',
+    setupFiles: './vitest.setup.js',
+  },
+  plugins: [pluginVue()],
+});

package/template-[vue]-[storybook,vitest]-js/vitest.setup.js

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/vitest';

package/template-[vue]-[storybook,vitest]-ts/.storybook/main.ts

@@ -0,0 +1,38 @@
+import { dirname, join } from 'node:path';
+import type { StorybookConfig } from 'storybook-vue3-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) {
+  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',
+    {
+      name: getAbsolutePath('storybook-addon-rslib'),
+    },
+  ],
+  framework: {
+    name: getAbsolutePath('storybook-vue3-rsbuild'),
+    options: {},
+  },
+  docs: {
+    autodocs: 'tag',
+  },
+  typescript: {
+    check: true,
+  },
+};
+
+export default config;

package/template-[vue]-[storybook,vitest]-ts/.storybook/preview.ts

@@ -0,0 +1,12 @@
+const preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

package/template-[vue]-[storybook,vitest]-ts/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "rslib-vue-ts",
+  "version": "0.0.0",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "rslib build && vue-tsc",
+    "build:storybook": "storybook build",
+    "dev": "rslib build --watch",
+    "storybook": "storybook dev",
+    "test": "vitest run"
+  },
+  "devDependencies": {
+    "@rsbuild/core": "1.3.14",
+    "@rslib/core": "workspace:*",
+    "@storybook/addon-essentials": "^8.6.12",
+    "@storybook/addon-interactions": "^8.6.12",
+    "@storybook/addon-links": "^8.6.12",
+    "@storybook/addon-onboarding": "^8.6.12",
+    "@storybook/blocks": "^8.6.12",
+    "@storybook/test": "^8.6.12",
+    "@storybook/vue3": "^8.6.12",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/vue": "^8.1.0",
+    "@vitejs/plugin-vue": "^5.2.3",
+    "jsdom": "^26.1.0",
+    "rsbuild-plugin-unplugin-vue": "^0.1.0",
+    "storybook": "^8.6.12",
+    "storybook-addon-rslib": "^1.0.1",
+    "storybook-vue3-rsbuild": "^1.0.1",
+    "typescript": "^5.8.3",
+    "vitest": "^3.1.2",
+    "vue": "^3.2.0",
+    "vue-tsc": "^2.2.10"
+  },
+  "peerDependencies": {
+    "vue": "^3.2.0"
+  }
+}

package/template-[vue]-[storybook,vitest]-ts/rslib.config.ts

@@ -0,0 +1,15 @@
+import { defineConfig } from '@rslib/core';
+import { pluginUnpluginVue } from 'rsbuild-plugin-unplugin-vue';
+
+export default defineConfig({
+  lib: [
+    {
+      bundle: false,
+      format: 'esm',
+    },
+  ],
+  output: {
+    target: 'web',
+  },
+  plugins: [pluginUnpluginVue()],
+});

package/template-[vue]-[storybook,vitest]-ts/src/Button.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import './style.css';
+
+interface Props {
+  primary?: boolean;
+  backgroundColor?: string;
+  size?: 'small' | 'medium' | 'large';
+  label: string;
+  onClick?: () => void;
+}
+
+const {
+  primary = false,
+  backgroundColor = undefined,
+  size = 'medium',
+  label,
+  onClick = undefined,
+} = defineProps<Props>();
+
+const mode = computed(() =>
+  primary ? 'demo-button--primary' : 'demo-button--secondary',
+);
+</script>
+
+<template>
+  <button
+    type="button"
+    :class="['demo-button', `demo-button--${size}`, mode]"
+    :style="{ backgroundColor }"
+    @click="onClick"
+  >
+    {{ label }}
+  </button>
+</template>

package/template-[vue]-[storybook,vitest]-ts/src/index.ts

@@ -0,0 +1 @@
+export { default as Button } from './Button.vue';

package/template-[vue]-[storybook,vitest]-ts/src/style.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;
+}

package/template-[vue]-[storybook,vitest]-ts/stories/Button.stories.js

@@ -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',
+  },
+};

package/template-[vue]-[storybook,vitest]-ts/tests/index.test.ts

@@ -0,0 +1,16 @@
+import { render, screen } from '@testing-library/vue';
+import { expect, test } from 'vitest';
+import Button from '../src/Button.vue';
+
+test('The button should have correct background color', async () => {
+  render(Button, {
+    props: {
+      backgroundColor: '#ccc',
+      label: 'Demo Button',
+    },
+  });
+  const button = screen.getByText('Demo Button');
+  expect(button).toHaveStyle({
+    backgroundColor: '#ccc',
+  });
+});

package/template-[vue]-[storybook,vitest]-ts/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "lib": ["DOM", "ES2020"],
+    "jsx": "preserve",
+    "target": "ES2020",
+    "skipLibCheck": true,
+    "jsxImportSource": "vue",
+    "useDefineForClassFields": true,
+    "declaration": true,
+    "outDir": "dist",
+    "emitDeclarationOnly": true,
+
+    /* modules */
+    "module": "ESNext",
+    "isolatedModules": true,
+    "resolveJsonModule": true,
+    "moduleResolution": "bundler",
+
+    /* type checking */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true
+  },
+  "include": ["src"]
+}

package/template-[vue]-[storybook,vitest]-ts/vitest.config.js

@@ -0,0 +1,13 @@
+/// <reference types="vitest/config" />
+
+import pluginVue from '@vitejs/plugin-vue';
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  // Configure Vitest (https://vitest.dev/config/)
+  test: {
+    environment: 'jsdom',
+    setupFiles: './vitest.setup.js',
+  },
+  plugins: [pluginVue()],
+});

package/template-[vue]-[storybook,vitest]-ts/vitest.setup.js

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/vitest';

package/template-[vue]-[storybook]-js/.storybook/main.js

@@ -0,0 +1,37 @@
+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',
+    {
+      name: getAbsolutePath('storybook-addon-rslib'),
+    },
+  ],
+  framework: {
+    name: getAbsolutePath('storybook-vue3-rsbuild'),
+    options: {},
+  },
+  docs: {
+    autodocs: 'tag',
+  },
+  typescript: {
+    check: true,
+  },
+};
+
+export default config;

package/template-[vue]-[storybook]-js/.storybook/preview.js

@@ -0,0 +1,12 @@
+const preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

package/template-[vue]-[storybook]-js/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "rslib-vue-js",
+  "version": "0.0.0",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./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.3.14",
+    "@rslib/core": "workspace:*",
+    "@storybook/addon-essentials": "^8.6.12",
+    "@storybook/addon-interactions": "^8.6.12",
+    "@storybook/addon-links": "^8.6.12",
+    "@storybook/addon-onboarding": "^8.6.12",
+    "@storybook/blocks": "^8.6.12",
+    "@storybook/test": "^8.6.12",
+    "@storybook/vue3": "^8.6.12",
+    "rsbuild-plugin-unplugin-vue": "^0.1.0",
+    "storybook": "^8.6.12",
+    "storybook-addon-rslib": "^1.0.1",
+    "storybook-vue3-rsbuild": "^1.0.1",
+    "vue": "^3.2.0"
+  },
+  "peerDependencies": {
+    "vue": "^3.2.0"
+  }
+}

package/template-[vue]-[storybook]-js/rslib.config.ts

@@ -0,0 +1,15 @@
+import { defineConfig } from '@rslib/core';
+import { pluginUnpluginVue } from 'rsbuild-plugin-unplugin-vue';
+
+export default defineConfig({
+  lib: [
+    {
+      bundle: false,
+      format: 'esm',
+    },
+  ],
+  output: {
+    target: 'web',
+  },
+  plugins: [pluginUnpluginVue()],
+});

package/template-[vue]-[storybook]-js/src/Button.vue

@@ -0,0 +1,43 @@
+<script setup>
+import { computed } from 'vue';
+import './style.css';
+
+const {
+  primary = false,
+  backgroundColor,
+  size = 'medium',
+  label,
+  onClick,
+} = defineProps({
+  primary: {
+    type: Boolean,
+  },
+  backgroundColor: {
+    type: String,
+  },
+  size: {
+    type: String,
+  },
+  label: {
+    type: String,
+  },
+  onClick: {
+    type: Function,
+  },
+});
+
+const mode = computed(() =>
+  primary ? 'demo-button--primary' : 'demo-button--secondary',
+);
+</script>
+
+<template>
+  <button
+    type="button"
+    :class="['demo-button', `demo-button--${size}`, mode]"
+    :style="{ backgroundColor }"
+    @click="onClick"
+  >
+    {{ label }}
+  </button>
+</template>

package/template-[vue]-[storybook]-js/src/index.js

@@ -0,0 +1 @@
+export { default as Button } from './Button.vue';

package/template-[vue]-[storybook]-js/src/style.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;
+}

package/template-[vue]-[storybook]-js/stories/Button.stories.js

@@ -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',
+  },
+};