create-rslib 0.12.0 → 0.12.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +117 -20
- package/package.json +5 -5
- package/template-[node-dual]-[]-ts/package.json +1 -1
- package/template-[node-dual]-[rstest]-js/package.json +24 -0
- package/template-[node-dual]-[rstest]-js/rslib.config.mjs +14 -0
- package/template-[node-dual]-[rstest]-js/rstest.config.js +3 -0
- package/template-[node-dual]-[rstest]-js/src/index.js +1 -0
- package/template-[node-dual]-[rstest]-js/tests/index.test.js +7 -0
- package/template-[node-dual]-[rstest]-ts/package.json +28 -0
- package/template-[node-dual]-[rstest]-ts/rslib.config.ts +15 -0
- package/template-[node-dual]-[rstest]-ts/rstest.config.ts +3 -0
- package/template-[node-dual]-[rstest]-ts/src/index.ts +1 -0
- package/template-[node-dual]-[rstest]-ts/tests/index.test.ts +7 -0
- package/template-[node-dual]-[rstest]-ts/tsconfig.json +15 -0
- package/template-[node-dual]-[vitest]-ts/package.json +1 -1
- package/template-[node-esm]-[]-ts/package.json +1 -1
- package/template-[node-esm]-[rstest]-js/package.json +22 -0
- package/template-[node-esm]-[rstest]-js/rslib.config.mjs +10 -0
- package/template-[node-esm]-[rstest]-js/rstest.config.js +3 -0
- package/template-[node-esm]-[rstest]-js/src/index.js +1 -0
- package/template-[node-esm]-[rstest]-js/tests/index.test.js +7 -0
- package/template-[node-esm]-[rstest]-ts/package.json +26 -0
- package/template-[node-esm]-[rstest]-ts/rslib.config.ts +11 -0
- package/template-[node-esm]-[rstest]-ts/rstest.config.ts +3 -0
- package/template-[node-esm]-[rstest]-ts/src/index.ts +1 -0
- package/template-[node-esm]-[rstest]-ts/tests/index.test.ts +7 -0
- package/template-[node-esm]-[rstest]-ts/tsconfig.json +15 -0
- package/template-[node-esm]-[vitest]-ts/package.json +1 -1
- package/template-[react]-[]-ts/package.json +1 -1
- package/template-[react]-[rstest,storybook]-js/.storybook/main.js +36 -0
- package/template-[react]-[rstest,storybook]-js/.storybook/preview.js +12 -0
- package/template-[react]-[rstest,storybook]-js/package.json +45 -0
- package/template-[react]-[rstest,storybook]-js/rslib.config.mjs +20 -0
- package/template-[react]-[rstest,storybook]-js/rstest.config.js +8 -0
- package/template-[react]-[rstest,storybook]-js/rstest.setup.js +4 -0
- package/template-[react]-[rstest,storybook]-js/src/Button.jsx +21 -0
- package/template-[react]-[rstest,storybook]-js/src/button.css +34 -0
- package/template-[react]-[rstest,storybook]-js/src/index.jsx +1 -0
- package/template-[react]-[rstest,storybook]-js/stories/Button.stories.jsx +50 -0
- package/template-[react]-[rstest,storybook]-js/tests/index.test.jsx +11 -0
- package/template-[react]-[rstest,storybook]-ts/.storybook/main.ts +37 -0
- package/template-[react]-[rstest,storybook]-ts/.storybook/preview.ts +14 -0
- package/template-[react]-[rstest,storybook]-ts/package.json +49 -0
- package/template-[react]-[rstest,storybook]-ts/rslib.config.ts +21 -0
- package/template-[react]-[rstest,storybook]-ts/rstest.config.ts +8 -0
- package/template-[react]-[rstest,storybook]-ts/rstest.setup.ts +4 -0
- package/template-[react]-[rstest,storybook]-ts/src/Button.tsx +29 -0
- package/template-[react]-[rstest,storybook]-ts/src/button.css +34 -0
- package/template-[react]-[rstest,storybook]-ts/src/index.tsx +1 -0
- package/template-[react]-[rstest,storybook]-ts/stories/Button.stories.ts +52 -0
- package/template-[react]-[rstest,storybook]-ts/tests/index.test.tsx +11 -0
- package/template-[react]-[rstest,storybook]-ts/tests/test.d.ts +1 -0
- package/template-[react]-[rstest,storybook]-ts/tests/tsconfig.json +4 -0
- package/template-[react]-[rstest,storybook]-ts/tsconfig.json +14 -0
- package/template-[react]-[rstest]-js/package.json +31 -0
- package/template-[react]-[rstest]-js/rslib.config.mjs +20 -0
- package/template-[react]-[rstest]-js/rstest.config.js +8 -0
- package/template-[react]-[rstest]-js/rstest.setup.js +4 -0
- package/template-[react]-[rstest]-js/src/Button.jsx +21 -0
- package/template-[react]-[rstest]-js/src/button.css +34 -0
- package/template-[react]-[rstest]-js/src/index.jsx +1 -0
- package/template-[react]-[rstest]-js/tests/index.test.jsx +11 -0
- package/template-[react]-[rstest]-ts/package.json +35 -0
- package/template-[react]-[rstest]-ts/rslib.config.ts +21 -0
- package/template-[react]-[rstest]-ts/rstest.config.ts +8 -0
- package/template-[react]-[rstest]-ts/rstest.setup.ts +4 -0
- package/template-[react]-[rstest]-ts/src/Button.tsx +29 -0
- package/template-[react]-[rstest]-ts/src/button.css +34 -0
- package/template-[react]-[rstest]-ts/src/index.tsx +1 -0
- package/template-[react]-[rstest]-ts/tests/index.test.tsx +11 -0
- package/template-[react]-[rstest]-ts/tests/test.d.ts +1 -0
- package/template-[react]-[rstest]-ts/tests/tsconfig.json +4 -0
- package/template-[react]-[rstest]-ts/tsconfig.json +14 -0
- package/template-[react]-[storybook,vitest]-js/package.json +9 -9
- package/template-[react]-[storybook,vitest]-ts/package.json +10 -10
- package/template-[react]-[storybook]-js/package.json +8 -8
- package/template-[react]-[storybook]-ts/package.json +9 -9
- package/template-[react]-[vitest]-js/package.json +1 -1
- package/template-[react]-[vitest]-ts/package.json +2 -2
- package/template-[vue]-[rstest,storybook]-js/.storybook/main.js +35 -0
- package/template-[vue]-[rstest,storybook]-js/.storybook/preview.js +12 -0
- package/template-[vue]-[rstest,storybook]-js/package.json +47 -0
- package/template-[vue]-[rstest,storybook]-js/rslib.config.ts +15 -0
- package/template-[vue]-[rstest,storybook]-js/rstest.config.js +8 -0
- package/template-[vue]-[rstest,storybook]-js/rstest.setup.js +4 -0
- package/template-[vue]-[rstest,storybook]-js/src/Button.vue +43 -0
- package/template-[vue]-[rstest,storybook]-js/src/index.js +1 -0
- package/template-[vue]-[rstest,storybook]-js/src/style.css +34 -0
- package/template-[vue]-[rstest,storybook]-js/stories/Button.stories.js +50 -0
- package/template-[vue]-[rstest,storybook]-js/tests/index.test.js +16 -0
- package/template-[vue]-[rstest,storybook]-ts/.storybook/main.ts +36 -0
- package/template-[vue]-[rstest,storybook]-ts/.storybook/preview.ts +12 -0
- package/template-[vue]-[rstest,storybook]-ts/package.json +49 -0
- package/template-[vue]-[rstest,storybook]-ts/rslib.config.ts +15 -0
- package/template-[vue]-[rstest,storybook]-ts/rstest.config.ts +8 -0
- package/template-[vue]-[rstest,storybook]-ts/rstest.setup.ts +4 -0
- package/template-[vue]-[rstest,storybook]-ts/src/Button.vue +35 -0
- package/template-[vue]-[rstest,storybook]-ts/src/index.ts +1 -0
- package/template-[vue]-[rstest,storybook]-ts/src/style.css +34 -0
- package/template-[vue]-[rstest,storybook]-ts/stories/Button.stories.js +50 -0
- package/template-[vue]-[rstest,storybook]-ts/tests/index.test.ts +16 -0
- package/template-[vue]-[rstest,storybook]-ts/tests/test.d.ts +1 -0
- package/template-[vue]-[rstest,storybook]-ts/tests/tsconfig.json +4 -0
- package/template-[vue]-[rstest,storybook]-ts/tsconfig.json +24 -0
- package/template-[vue]-[rstest]-js/package.json +33 -0
- package/template-[vue]-[rstest]-js/rslib.config.ts +15 -0
- package/template-[vue]-[rstest]-js/rstest.config.js +8 -0
- package/template-[vue]-[rstest]-js/rstest.setup.js +4 -0
- package/template-[vue]-[rstest]-js/src/Button.vue +43 -0
- package/template-[vue]-[rstest]-js/src/index.js +1 -0
- package/template-[vue]-[rstest]-js/src/style.css +34 -0
- package/template-[vue]-[rstest]-js/tests/index.test.js +16 -0
- package/template-[vue]-[rstest]-ts/package.json +35 -0
- package/template-[vue]-[rstest]-ts/rslib.config.ts +15 -0
- package/template-[vue]-[rstest]-ts/rstest.config.ts +8 -0
- package/template-[vue]-[rstest]-ts/rstest.setup.ts +4 -0
- package/template-[vue]-[rstest]-ts/src/Button.vue +35 -0
- package/template-[vue]-[rstest]-ts/src/index.ts +1 -0
- package/template-[vue]-[rstest]-ts/src/style.css +34 -0
- package/template-[vue]-[rstest]-ts/tests/index.test.ts +16 -0
- package/template-[vue]-[rstest]-ts/tests/test.d.ts +1 -0
- package/template-[vue]-[rstest]-ts/tests/tsconfig.json +4 -0
- package/template-[vue]-[rstest]-ts/tsconfig.json +24 -0
- package/template-[vue]-[storybook,vitest]-js/package.json +9 -9
- package/template-[vue]-[storybook,vitest]-ts/package.json +9 -9
- package/template-[vue]-[storybook]-js/package.json +8 -8
- package/template-[vue]-[storybook]-ts/package.json +8 -8
- package/template-[vue]-[vitest]-js/package.json +1 -1
- package/template-[vue]-[vitest]-ts/package.json +1 -1
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { defineConfig } from '@rslib/core';
|
|
2
|
+
import { pluginUnpluginVue } from 'rsbuild-plugin-unplugin-vue';
|
|
3
|
+
|
|
4
|
+
export default defineConfig({
|
|
5
|
+
lib: [
|
|
6
|
+
{
|
|
7
|
+
bundle: false,
|
|
8
|
+
format: 'esm',
|
|
9
|
+
},
|
|
10
|
+
],
|
|
11
|
+
output: {
|
|
12
|
+
target: 'web',
|
|
13
|
+
},
|
|
14
|
+
plugins: [pluginUnpluginVue()],
|
|
15
|
+
});
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
<script setup lang="ts">
|
|
2
|
+
import { computed } from 'vue';
|
|
3
|
+
import './style.css';
|
|
4
|
+
|
|
5
|
+
interface Props {
|
|
6
|
+
primary?: boolean;
|
|
7
|
+
backgroundColor?: string;
|
|
8
|
+
size?: 'small' | 'medium' | 'large';
|
|
9
|
+
label: string;
|
|
10
|
+
onClick?: () => void;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
const {
|
|
14
|
+
primary = false,
|
|
15
|
+
backgroundColor = undefined,
|
|
16
|
+
size = 'medium',
|
|
17
|
+
label,
|
|
18
|
+
onClick = undefined,
|
|
19
|
+
} = defineProps<Props>();
|
|
20
|
+
|
|
21
|
+
const mode = computed(() =>
|
|
22
|
+
primary ? 'demo-button--primary' : 'demo-button--secondary',
|
|
23
|
+
);
|
|
24
|
+
</script>
|
|
25
|
+
|
|
26
|
+
<template>
|
|
27
|
+
<button
|
|
28
|
+
type="button"
|
|
29
|
+
:class="['demo-button', `demo-button--${size}`, mode]"
|
|
30
|
+
:style="{ backgroundColor }"
|
|
31
|
+
@click="onClick"
|
|
32
|
+
>
|
|
33
|
+
{{ label }}
|
|
34
|
+
</button>
|
|
35
|
+
</template>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as Button } from './Button.vue';
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
.demo-button {
|
|
2
|
+
font-weight: 700;
|
|
3
|
+
border: 0;
|
|
4
|
+
border-radius: 3em;
|
|
5
|
+
cursor: pointer;
|
|
6
|
+
display: inline-block;
|
|
7
|
+
line-height: 1;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.demo-button--primary {
|
|
11
|
+
color: white;
|
|
12
|
+
background-color: #1ea7fd;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.demo-button--secondary {
|
|
16
|
+
color: #333;
|
|
17
|
+
background-color: transparent;
|
|
18
|
+
box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.demo-button--small {
|
|
22
|
+
font-size: 12px;
|
|
23
|
+
padding: 10px 16px;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.demo-button--medium {
|
|
27
|
+
font-size: 14px;
|
|
28
|
+
padding: 11px 20px;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.demo-button--large {
|
|
32
|
+
font-size: 16px;
|
|
33
|
+
padding: 12px 24px;
|
|
34
|
+
}
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
import { fn } from '@storybook/test';
|
|
2
|
+
import Button from '../src/Button';
|
|
3
|
+
|
|
4
|
+
// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
|
|
5
|
+
const meta = {
|
|
6
|
+
title: 'Example/Button',
|
|
7
|
+
component: Button,
|
|
8
|
+
parameters: {
|
|
9
|
+
// Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
|
|
10
|
+
layout: 'centered',
|
|
11
|
+
},
|
|
12
|
+
// This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
|
|
13
|
+
tags: ['autodocs'],
|
|
14
|
+
// More on argTypes: https://storybook.js.org/docs/api/argtypes
|
|
15
|
+
argTypes: {
|
|
16
|
+
backgroundColor: { control: 'color' },
|
|
17
|
+
},
|
|
18
|
+
// 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
|
|
19
|
+
args: { onClick: fn() },
|
|
20
|
+
};
|
|
21
|
+
|
|
22
|
+
export default meta;
|
|
23
|
+
|
|
24
|
+
// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
|
|
25
|
+
export const Primary = {
|
|
26
|
+
args: {
|
|
27
|
+
primary: true,
|
|
28
|
+
label: 'Button',
|
|
29
|
+
},
|
|
30
|
+
};
|
|
31
|
+
|
|
32
|
+
export const Secondary = {
|
|
33
|
+
args: {
|
|
34
|
+
label: 'Button',
|
|
35
|
+
},
|
|
36
|
+
};
|
|
37
|
+
|
|
38
|
+
export const Large = {
|
|
39
|
+
args: {
|
|
40
|
+
size: 'large',
|
|
41
|
+
label: 'Button',
|
|
42
|
+
},
|
|
43
|
+
};
|
|
44
|
+
|
|
45
|
+
export const Small = {
|
|
46
|
+
args: {
|
|
47
|
+
size: 'small',
|
|
48
|
+
label: 'Button',
|
|
49
|
+
},
|
|
50
|
+
};
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { expect, test } from '@rstest/core';
|
|
2
|
+
import { render, screen } from '@testing-library/vue';
|
|
3
|
+
import Button from '../src/Button.vue';
|
|
4
|
+
|
|
5
|
+
test('The button should have correct background color', async () => {
|
|
6
|
+
render(Button, {
|
|
7
|
+
props: {
|
|
8
|
+
backgroundColor: '#ccc',
|
|
9
|
+
label: 'Demo Button',
|
|
10
|
+
},
|
|
11
|
+
});
|
|
12
|
+
const button = screen.getByText('Demo Button');
|
|
13
|
+
expect(button).toHaveStyle({
|
|
14
|
+
backgroundColor: '#ccc',
|
|
15
|
+
});
|
|
16
|
+
});
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
/// <reference types="@testing-library/jest-dom" />
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
{
|
|
2
|
+
"compilerOptions": {
|
|
3
|
+
"lib": ["DOM", "ES2022"],
|
|
4
|
+
"jsx": "preserve",
|
|
5
|
+
"skipLibCheck": true,
|
|
6
|
+
"jsxImportSource": "vue",
|
|
7
|
+
"useDefineForClassFields": true,
|
|
8
|
+
"declaration": true,
|
|
9
|
+
"outDir": "dist",
|
|
10
|
+
"emitDeclarationOnly": true,
|
|
11
|
+
|
|
12
|
+
/* modules */
|
|
13
|
+
"module": "ESNext",
|
|
14
|
+
"isolatedModules": true,
|
|
15
|
+
"resolveJsonModule": true,
|
|
16
|
+
"moduleResolution": "bundler",
|
|
17
|
+
|
|
18
|
+
/* type checking */
|
|
19
|
+
"strict": true,
|
|
20
|
+
"noUnusedLocals": true,
|
|
21
|
+
"noUnusedParameters": true
|
|
22
|
+
},
|
|
23
|
+
"include": ["src"]
|
|
24
|
+
}
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "rslib-vue-js",
|
|
3
|
+
"version": "0.0.0",
|
|
4
|
+
"type": "module",
|
|
5
|
+
"exports": {
|
|
6
|
+
".": {
|
|
7
|
+
"types": "./dist/index.d.ts",
|
|
8
|
+
"import": "./dist/index.js"
|
|
9
|
+
}
|
|
10
|
+
},
|
|
11
|
+
"types": "./dist/index.d.ts",
|
|
12
|
+
"files": [
|
|
13
|
+
"dist"
|
|
14
|
+
],
|
|
15
|
+
"scripts": {
|
|
16
|
+
"build": "rslib build",
|
|
17
|
+
"dev": "rslib build --watch",
|
|
18
|
+
"test": "rstest"
|
|
19
|
+
},
|
|
20
|
+
"devDependencies": {
|
|
21
|
+
"@rslib/core": "workspace:*",
|
|
22
|
+
"@rstest/core": "^0.2.1",
|
|
23
|
+
"@testing-library/jest-dom": "^6.7.0",
|
|
24
|
+
"@testing-library/vue": "^8.1.0",
|
|
25
|
+
"@vue/test-utils": "^2.4.6",
|
|
26
|
+
"jsdom": "^26.1.0",
|
|
27
|
+
"rsbuild-plugin-unplugin-vue": "^0.1.0",
|
|
28
|
+
"vue": "^3.5.18"
|
|
29
|
+
},
|
|
30
|
+
"peerDependencies": {
|
|
31
|
+
"vue": "^3.2.0"
|
|
32
|
+
}
|
|
33
|
+
}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { defineConfig } from '@rslib/core';
|
|
2
|
+
import { pluginUnpluginVue } from 'rsbuild-plugin-unplugin-vue';
|
|
3
|
+
|
|
4
|
+
export default defineConfig({
|
|
5
|
+
lib: [
|
|
6
|
+
{
|
|
7
|
+
bundle: false,
|
|
8
|
+
format: 'esm',
|
|
9
|
+
},
|
|
10
|
+
],
|
|
11
|
+
output: {
|
|
12
|
+
target: 'web',
|
|
13
|
+
},
|
|
14
|
+
plugins: [pluginUnpluginVue()],
|
|
15
|
+
});
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
<script setup>
|
|
2
|
+
import { computed } from 'vue';
|
|
3
|
+
import './style.css';
|
|
4
|
+
|
|
5
|
+
const {
|
|
6
|
+
primary = false,
|
|
7
|
+
backgroundColor,
|
|
8
|
+
size = 'medium',
|
|
9
|
+
label,
|
|
10
|
+
onClick,
|
|
11
|
+
} = defineProps({
|
|
12
|
+
primary: {
|
|
13
|
+
type: Boolean,
|
|
14
|
+
},
|
|
15
|
+
backgroundColor: {
|
|
16
|
+
type: String,
|
|
17
|
+
},
|
|
18
|
+
size: {
|
|
19
|
+
type: String,
|
|
20
|
+
},
|
|
21
|
+
label: {
|
|
22
|
+
type: String,
|
|
23
|
+
},
|
|
24
|
+
onClick: {
|
|
25
|
+
type: Function,
|
|
26
|
+
},
|
|
27
|
+
});
|
|
28
|
+
|
|
29
|
+
const mode = computed(() =>
|
|
30
|
+
primary ? 'demo-button--primary' : 'demo-button--secondary',
|
|
31
|
+
);
|
|
32
|
+
</script>
|
|
33
|
+
|
|
34
|
+
<template>
|
|
35
|
+
<button
|
|
36
|
+
type="button"
|
|
37
|
+
:class="['demo-button', `demo-button--${size}`, mode]"
|
|
38
|
+
:style="{ backgroundColor }"
|
|
39
|
+
@click="onClick"
|
|
40
|
+
>
|
|
41
|
+
{{ label }}
|
|
42
|
+
</button>
|
|
43
|
+
</template>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as Button } from './Button.vue';
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
.demo-button {
|
|
2
|
+
font-weight: 700;
|
|
3
|
+
border: 0;
|
|
4
|
+
border-radius: 3em;
|
|
5
|
+
cursor: pointer;
|
|
6
|
+
display: inline-block;
|
|
7
|
+
line-height: 1;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.demo-button--primary {
|
|
11
|
+
color: white;
|
|
12
|
+
background-color: #1ea7fd;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.demo-button--secondary {
|
|
16
|
+
color: #333;
|
|
17
|
+
background-color: transparent;
|
|
18
|
+
box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.demo-button--small {
|
|
22
|
+
font-size: 12px;
|
|
23
|
+
padding: 10px 16px;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.demo-button--medium {
|
|
27
|
+
font-size: 14px;
|
|
28
|
+
padding: 11px 20px;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.demo-button--large {
|
|
32
|
+
font-size: 16px;
|
|
33
|
+
padding: 12px 24px;
|
|
34
|
+
}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { expect, test } from '@rstest/core';
|
|
2
|
+
import { render, screen } from '@testing-library/vue';
|
|
3
|
+
import Button from '../src/Button.vue';
|
|
4
|
+
|
|
5
|
+
test('The button should have correct background color', async () => {
|
|
6
|
+
render(Button, {
|
|
7
|
+
props: {
|
|
8
|
+
backgroundColor: '#ccc',
|
|
9
|
+
label: 'Demo Button',
|
|
10
|
+
},
|
|
11
|
+
});
|
|
12
|
+
const button = screen.getByText('Demo Button');
|
|
13
|
+
expect(button).toHaveStyle({
|
|
14
|
+
backgroundColor: '#ccc',
|
|
15
|
+
});
|
|
16
|
+
});
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "rslib-vue-ts",
|
|
3
|
+
"version": "0.0.0",
|
|
4
|
+
"type": "module",
|
|
5
|
+
"exports": {
|
|
6
|
+
".": {
|
|
7
|
+
"types": "./dist/index.d.ts",
|
|
8
|
+
"import": "./dist/index.js"
|
|
9
|
+
}
|
|
10
|
+
},
|
|
11
|
+
"types": "./dist/index.d.ts",
|
|
12
|
+
"files": [
|
|
13
|
+
"dist"
|
|
14
|
+
],
|
|
15
|
+
"scripts": {
|
|
16
|
+
"build": "rslib build && vue-tsc",
|
|
17
|
+
"dev": "rslib build --watch",
|
|
18
|
+
"test": "rstest"
|
|
19
|
+
},
|
|
20
|
+
"devDependencies": {
|
|
21
|
+
"@rslib/core": "workspace:*",
|
|
22
|
+
"@rstest/core": "^0.2.1",
|
|
23
|
+
"@testing-library/jest-dom": "^6.7.0",
|
|
24
|
+
"@testing-library/vue": "^8.1.0",
|
|
25
|
+
"@vue/test-utils": "^2.4.6",
|
|
26
|
+
"jsdom": "^26.1.0",
|
|
27
|
+
"rsbuild-plugin-unplugin-vue": "^0.1.0",
|
|
28
|
+
"typescript": "^5.9.2",
|
|
29
|
+
"vue": "^3.5.18",
|
|
30
|
+
"vue-tsc": "^3.0.5"
|
|
31
|
+
},
|
|
32
|
+
"peerDependencies": {
|
|
33
|
+
"vue": "^3.2.0"
|
|
34
|
+
}
|
|
35
|
+
}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { defineConfig } from '@rslib/core';
|
|
2
|
+
import { pluginUnpluginVue } from 'rsbuild-plugin-unplugin-vue';
|
|
3
|
+
|
|
4
|
+
export default defineConfig({
|
|
5
|
+
lib: [
|
|
6
|
+
{
|
|
7
|
+
bundle: false,
|
|
8
|
+
format: 'esm',
|
|
9
|
+
},
|
|
10
|
+
],
|
|
11
|
+
output: {
|
|
12
|
+
target: 'web',
|
|
13
|
+
},
|
|
14
|
+
plugins: [pluginUnpluginVue()],
|
|
15
|
+
});
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
<script setup lang="ts">
|
|
2
|
+
import { computed } from 'vue';
|
|
3
|
+
import './style.css';
|
|
4
|
+
|
|
5
|
+
interface Props {
|
|
6
|
+
primary?: boolean;
|
|
7
|
+
backgroundColor?: string;
|
|
8
|
+
size?: 'small' | 'medium' | 'large';
|
|
9
|
+
label: string;
|
|
10
|
+
onClick?: () => void;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
const {
|
|
14
|
+
primary = false,
|
|
15
|
+
backgroundColor = undefined,
|
|
16
|
+
size = 'medium',
|
|
17
|
+
label,
|
|
18
|
+
onClick = undefined,
|
|
19
|
+
} = defineProps<Props>();
|
|
20
|
+
|
|
21
|
+
const mode = computed(() =>
|
|
22
|
+
primary ? 'demo-button--primary' : 'demo-button--secondary',
|
|
23
|
+
);
|
|
24
|
+
</script>
|
|
25
|
+
|
|
26
|
+
<template>
|
|
27
|
+
<button
|
|
28
|
+
type="button"
|
|
29
|
+
:class="['demo-button', `demo-button--${size}`, mode]"
|
|
30
|
+
:style="{ backgroundColor }"
|
|
31
|
+
@click="onClick"
|
|
32
|
+
>
|
|
33
|
+
{{ label }}
|
|
34
|
+
</button>
|
|
35
|
+
</template>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as Button } from './Button.vue';
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
.demo-button {
|
|
2
|
+
font-weight: 700;
|
|
3
|
+
border: 0;
|
|
4
|
+
border-radius: 3em;
|
|
5
|
+
cursor: pointer;
|
|
6
|
+
display: inline-block;
|
|
7
|
+
line-height: 1;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.demo-button--primary {
|
|
11
|
+
color: white;
|
|
12
|
+
background-color: #1ea7fd;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.demo-button--secondary {
|
|
16
|
+
color: #333;
|
|
17
|
+
background-color: transparent;
|
|
18
|
+
box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.demo-button--small {
|
|
22
|
+
font-size: 12px;
|
|
23
|
+
padding: 10px 16px;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.demo-button--medium {
|
|
27
|
+
font-size: 14px;
|
|
28
|
+
padding: 11px 20px;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.demo-button--large {
|
|
32
|
+
font-size: 16px;
|
|
33
|
+
padding: 12px 24px;
|
|
34
|
+
}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { expect, test } from '@rstest/core';
|
|
2
|
+
import { render, screen } from '@testing-library/vue';
|
|
3
|
+
import Button from '../src/Button.vue';
|
|
4
|
+
|
|
5
|
+
test('The button should have correct background color', async () => {
|
|
6
|
+
render(Button, {
|
|
7
|
+
props: {
|
|
8
|
+
backgroundColor: '#ccc',
|
|
9
|
+
label: 'Demo Button',
|
|
10
|
+
},
|
|
11
|
+
});
|
|
12
|
+
const button = screen.getByText('Demo Button');
|
|
13
|
+
expect(button).toHaveStyle({
|
|
14
|
+
backgroundColor: '#ccc',
|
|
15
|
+
});
|
|
16
|
+
});
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
/// <reference types="@testing-library/jest-dom" />
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
{
|
|
2
|
+
"compilerOptions": {
|
|
3
|
+
"lib": ["DOM", "ES2022"],
|
|
4
|
+
"jsx": "preserve",
|
|
5
|
+
"skipLibCheck": true,
|
|
6
|
+
"jsxImportSource": "vue",
|
|
7
|
+
"useDefineForClassFields": true,
|
|
8
|
+
"declaration": true,
|
|
9
|
+
"outDir": "dist",
|
|
10
|
+
"emitDeclarationOnly": true,
|
|
11
|
+
|
|
12
|
+
/* modules */
|
|
13
|
+
"module": "ESNext",
|
|
14
|
+
"isolatedModules": true,
|
|
15
|
+
"resolveJsonModule": true,
|
|
16
|
+
"moduleResolution": "bundler",
|
|
17
|
+
|
|
18
|
+
/* type checking */
|
|
19
|
+
"strict": true,
|
|
20
|
+
"noUnusedLocals": true,
|
|
21
|
+
"noUnusedParameters": true
|
|
22
|
+
},
|
|
23
|
+
"include": ["src"]
|
|
24
|
+
}
|
|
@@ -20,24 +20,24 @@
|
|
|
20
20
|
"test": "vitest run"
|
|
21
21
|
},
|
|
22
22
|
"devDependencies": {
|
|
23
|
-
"@rsbuild/core": "1.5.0-beta.
|
|
23
|
+
"@rsbuild/core": "1.5.0-beta.4",
|
|
24
24
|
"@rslib/core": "workspace:*",
|
|
25
|
-
"@storybook/addon-docs": "^9.1.
|
|
25
|
+
"@storybook/addon-docs": "^9.1.2",
|
|
26
26
|
"@storybook/addon-essentials": "^9.0.0-alpha.12",
|
|
27
27
|
"@storybook/addon-interactions": "^9.0.0-alpha.10",
|
|
28
|
-
"@storybook/addon-links": "^9.1.
|
|
29
|
-
"@storybook/addon-onboarding": "^9.1.
|
|
28
|
+
"@storybook/addon-links": "^9.1.2",
|
|
29
|
+
"@storybook/addon-onboarding": "^9.1.2",
|
|
30
30
|
"@storybook/blocks": "^9.0.0-alpha.17",
|
|
31
31
|
"@storybook/test": "^9.0.0-alpha.2",
|
|
32
|
-
"@storybook/vue3": "^9.1.
|
|
33
|
-
"@testing-library/jest-dom": "^6.
|
|
32
|
+
"@storybook/vue3": "^9.1.2",
|
|
33
|
+
"@testing-library/jest-dom": "^6.7.0",
|
|
34
34
|
"@testing-library/vue": "^8.1.0",
|
|
35
35
|
"@vitejs/plugin-vue": "^6.0.1",
|
|
36
36
|
"jsdom": "^26.1.0",
|
|
37
37
|
"rsbuild-plugin-unplugin-vue": "^0.1.0",
|
|
38
|
-
"storybook": "^9.1.
|
|
39
|
-
"storybook-addon-rslib": "^2.0.
|
|
40
|
-
"storybook-vue3-rsbuild": "^2.0.
|
|
38
|
+
"storybook": "^9.1.2",
|
|
39
|
+
"storybook-addon-rslib": "^2.0.4",
|
|
40
|
+
"storybook-vue3-rsbuild": "^2.0.4",
|
|
41
41
|
"vitest": "^3.2.4",
|
|
42
42
|
"vue": "^3.5.18"
|
|
43
43
|
},
|
|
@@ -20,24 +20,24 @@
|
|
|
20
20
|
"test": "vitest run"
|
|
21
21
|
},
|
|
22
22
|
"devDependencies": {
|
|
23
|
-
"@rsbuild/core": "1.5.0-beta.
|
|
23
|
+
"@rsbuild/core": "1.5.0-beta.4",
|
|
24
24
|
"@rslib/core": "workspace:*",
|
|
25
|
-
"@storybook/addon-docs": "^9.1.
|
|
25
|
+
"@storybook/addon-docs": "^9.1.2",
|
|
26
26
|
"@storybook/addon-essentials": "^9.0.0-alpha.12",
|
|
27
27
|
"@storybook/addon-interactions": "^9.0.0-alpha.10",
|
|
28
|
-
"@storybook/addon-links": "^9.1.
|
|
29
|
-
"@storybook/addon-onboarding": "^9.1.
|
|
28
|
+
"@storybook/addon-links": "^9.1.2",
|
|
29
|
+
"@storybook/addon-onboarding": "^9.1.2",
|
|
30
30
|
"@storybook/blocks": "^9.0.0-alpha.17",
|
|
31
31
|
"@storybook/test": "^9.0.0-alpha.2",
|
|
32
|
-
"@storybook/vue3": "^9.1.
|
|
33
|
-
"@testing-library/jest-dom": "^6.
|
|
32
|
+
"@storybook/vue3": "^9.1.2",
|
|
33
|
+
"@testing-library/jest-dom": "^6.7.0",
|
|
34
34
|
"@testing-library/vue": "^8.1.0",
|
|
35
35
|
"@vitejs/plugin-vue": "^6.0.1",
|
|
36
36
|
"jsdom": "^26.1.0",
|
|
37
37
|
"rsbuild-plugin-unplugin-vue": "^0.1.0",
|
|
38
|
-
"storybook": "^9.1.
|
|
39
|
-
"storybook-addon-rslib": "^2.0.
|
|
40
|
-
"storybook-vue3-rsbuild": "^2.0.
|
|
38
|
+
"storybook": "^9.1.2",
|
|
39
|
+
"storybook-addon-rslib": "^2.0.4",
|
|
40
|
+
"storybook-vue3-rsbuild": "^2.0.4",
|
|
41
41
|
"typescript": "^5.9.2",
|
|
42
42
|
"vitest": "^3.2.4",
|
|
43
43
|
"vue": "^3.5.18",
|
|
@@ -19,20 +19,20 @@
|
|
|
19
19
|
"storybook": "storybook dev"
|
|
20
20
|
},
|
|
21
21
|
"devDependencies": {
|
|
22
|
-
"@rsbuild/core": "1.5.0-beta.
|
|
22
|
+
"@rsbuild/core": "1.5.0-beta.4",
|
|
23
23
|
"@rslib/core": "workspace:*",
|
|
24
|
-
"@storybook/addon-docs": "^9.1.
|
|
24
|
+
"@storybook/addon-docs": "^9.1.2",
|
|
25
25
|
"@storybook/addon-essentials": "^9.0.0-alpha.12",
|
|
26
26
|
"@storybook/addon-interactions": "^9.0.0-alpha.10",
|
|
27
|
-
"@storybook/addon-links": "^9.1.
|
|
28
|
-
"@storybook/addon-onboarding": "^9.1.
|
|
27
|
+
"@storybook/addon-links": "^9.1.2",
|
|
28
|
+
"@storybook/addon-onboarding": "^9.1.2",
|
|
29
29
|
"@storybook/blocks": "^9.0.0-alpha.17",
|
|
30
30
|
"@storybook/test": "^9.0.0-alpha.2",
|
|
31
|
-
"@storybook/vue3": "^9.1.
|
|
31
|
+
"@storybook/vue3": "^9.1.2",
|
|
32
32
|
"rsbuild-plugin-unplugin-vue": "^0.1.0",
|
|
33
|
-
"storybook": "^9.1.
|
|
34
|
-
"storybook-addon-rslib": "^2.0.
|
|
35
|
-
"storybook-vue3-rsbuild": "^2.0.
|
|
33
|
+
"storybook": "^9.1.2",
|
|
34
|
+
"storybook-addon-rslib": "^2.0.4",
|
|
35
|
+
"storybook-vue3-rsbuild": "^2.0.4",
|
|
36
36
|
"vue": "^3.5.18"
|
|
37
37
|
},
|
|
38
38
|
"peerDependencies": {
|