create-rslib 0.11.2 → 0.12.1

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.
Files changed (136) hide show
  1. package/dist/index.js +117 -20
  2. package/package.json +5 -5
  3. package/template-[node-dual]-[]-ts/package.json +1 -1
  4. package/template-[node-dual]-[]-ts/tsconfig.json +1 -1
  5. package/template-[node-dual]-[rstest]-js/package.json +24 -0
  6. package/template-[node-dual]-[rstest]-js/rslib.config.mjs +14 -0
  7. package/template-[node-dual]-[rstest]-js/rstest.config.js +3 -0
  8. package/template-[node-dual]-[rstest]-js/src/index.js +1 -0
  9. package/template-[node-dual]-[rstest]-js/tests/index.test.js +7 -0
  10. package/template-[node-dual]-[rstest]-ts/package.json +28 -0
  11. package/template-[node-dual]-[rstest]-ts/rslib.config.ts +15 -0
  12. package/template-[node-dual]-[rstest]-ts/rstest.config.ts +3 -0
  13. package/template-[node-dual]-[rstest]-ts/src/index.ts +1 -0
  14. package/template-[node-dual]-[rstest]-ts/tests/index.test.ts +7 -0
  15. package/template-[node-dual]-[rstest]-ts/tsconfig.json +15 -0
  16. package/template-[node-dual]-[vitest]-ts/package.json +1 -1
  17. package/template-[node-dual]-[vitest]-ts/tsconfig.json +1 -1
  18. package/template-[node-esm]-[]-ts/package.json +1 -1
  19. package/template-[node-esm]-[]-ts/tsconfig.json +1 -1
  20. package/template-[node-esm]-[rstest]-js/package.json +22 -0
  21. package/template-[node-esm]-[rstest]-js/rslib.config.mjs +10 -0
  22. package/template-[node-esm]-[rstest]-js/rstest.config.js +3 -0
  23. package/template-[node-esm]-[rstest]-js/src/index.js +1 -0
  24. package/template-[node-esm]-[rstest]-js/tests/index.test.js +7 -0
  25. package/template-[node-esm]-[rstest]-ts/package.json +26 -0
  26. package/template-[node-esm]-[rstest]-ts/rslib.config.ts +11 -0
  27. package/template-[node-esm]-[rstest]-ts/rstest.config.ts +3 -0
  28. package/template-[node-esm]-[rstest]-ts/src/index.ts +1 -0
  29. package/template-[node-esm]-[rstest]-ts/tests/index.test.ts +7 -0
  30. package/template-[node-esm]-[rstest]-ts/tsconfig.json +15 -0
  31. package/template-[node-esm]-[vitest]-ts/package.json +1 -1
  32. package/template-[node-esm]-[vitest]-ts/tsconfig.json +1 -1
  33. package/template-[react]-[]-ts/tsconfig.json +1 -1
  34. package/template-[react]-[rstest,storybook]-js/.storybook/main.js +36 -0
  35. package/template-[react]-[rstest,storybook]-js/.storybook/preview.js +12 -0
  36. package/template-[react]-[rstest,storybook]-js/package.json +45 -0
  37. package/template-[react]-[rstest,storybook]-js/rslib.config.mjs +20 -0
  38. package/template-[react]-[rstest,storybook]-js/rstest.config.js +8 -0
  39. package/template-[react]-[rstest,storybook]-js/rstest.setup.js +4 -0
  40. package/template-[react]-[rstest,storybook]-js/src/Button.jsx +21 -0
  41. package/template-[react]-[rstest,storybook]-js/src/button.css +34 -0
  42. package/template-[react]-[rstest,storybook]-js/src/index.jsx +1 -0
  43. package/template-[react]-[rstest,storybook]-js/stories/Button.stories.jsx +50 -0
  44. package/template-[react]-[rstest,storybook]-js/tests/index.test.jsx +11 -0
  45. package/template-[react]-[rstest,storybook]-ts/.storybook/main.ts +37 -0
  46. package/template-[react]-[rstest,storybook]-ts/.storybook/preview.ts +14 -0
  47. package/template-[react]-[rstest,storybook]-ts/package.json +49 -0
  48. package/template-[react]-[rstest,storybook]-ts/rslib.config.ts +21 -0
  49. package/template-[react]-[rstest,storybook]-ts/rstest.config.ts +8 -0
  50. package/template-[react]-[rstest,storybook]-ts/rstest.setup.ts +4 -0
  51. package/template-[react]-[rstest,storybook]-ts/src/Button.tsx +29 -0
  52. package/template-[react]-[rstest,storybook]-ts/src/button.css +34 -0
  53. package/template-[react]-[rstest,storybook]-ts/src/index.tsx +1 -0
  54. package/template-[react]-[rstest,storybook]-ts/stories/Button.stories.ts +52 -0
  55. package/template-[react]-[rstest,storybook]-ts/tests/index.test.tsx +11 -0
  56. package/template-[react]-[rstest,storybook]-ts/tests/test.d.ts +1 -0
  57. package/template-[react]-[rstest,storybook]-ts/tests/tsconfig.json +4 -0
  58. package/template-[react]-[rstest,storybook]-ts/tsconfig.json +14 -0
  59. package/template-[react]-[rstest]-js/package.json +31 -0
  60. package/template-[react]-[rstest]-js/rslib.config.mjs +20 -0
  61. package/template-[react]-[rstest]-js/rstest.config.js +8 -0
  62. package/template-[react]-[rstest]-js/rstest.setup.js +4 -0
  63. package/template-[react]-[rstest]-js/src/Button.jsx +21 -0
  64. package/template-[react]-[rstest]-js/src/button.css +34 -0
  65. package/template-[react]-[rstest]-js/src/index.jsx +1 -0
  66. package/template-[react]-[rstest]-js/tests/index.test.jsx +11 -0
  67. package/template-[react]-[rstest]-ts/package.json +35 -0
  68. package/template-[react]-[rstest]-ts/rslib.config.ts +21 -0
  69. package/template-[react]-[rstest]-ts/rstest.config.ts +8 -0
  70. package/template-[react]-[rstest]-ts/rstest.setup.ts +4 -0
  71. package/template-[react]-[rstest]-ts/src/Button.tsx +29 -0
  72. package/template-[react]-[rstest]-ts/src/button.css +34 -0
  73. package/template-[react]-[rstest]-ts/src/index.tsx +1 -0
  74. package/template-[react]-[rstest]-ts/tests/index.test.tsx +11 -0
  75. package/template-[react]-[rstest]-ts/tests/test.d.ts +1 -0
  76. package/template-[react]-[rstest]-ts/tests/tsconfig.json +4 -0
  77. package/template-[react]-[rstest]-ts/tsconfig.json +14 -0
  78. package/template-[react]-[storybook,vitest]-js/package.json +1 -1
  79. package/template-[react]-[storybook,vitest]-ts/package.json +1 -1
  80. package/template-[react]-[storybook,vitest]-ts/tsconfig.json +1 -1
  81. package/template-[react]-[storybook]-js/package.json +1 -1
  82. package/template-[react]-[storybook]-ts/package.json +1 -1
  83. package/template-[react]-[storybook]-ts/tsconfig.json +1 -1
  84. package/template-[react]-[vitest]-ts/tsconfig.json +1 -1
  85. package/template-[vue]-[]-ts/tsconfig.json +1 -2
  86. package/template-[vue]-[rstest,storybook]-js/.storybook/main.js +35 -0
  87. package/template-[vue]-[rstest,storybook]-js/.storybook/preview.js +12 -0
  88. package/template-[vue]-[rstest,storybook]-js/package.json +47 -0
  89. package/template-[vue]-[rstest,storybook]-js/rslib.config.ts +15 -0
  90. package/template-[vue]-[rstest,storybook]-js/rstest.config.js +8 -0
  91. package/template-[vue]-[rstest,storybook]-js/rstest.setup.js +4 -0
  92. package/template-[vue]-[rstest,storybook]-js/src/Button.vue +43 -0
  93. package/template-[vue]-[rstest,storybook]-js/src/index.js +1 -0
  94. package/template-[vue]-[rstest,storybook]-js/src/style.css +34 -0
  95. package/template-[vue]-[rstest,storybook]-js/stories/Button.stories.js +50 -0
  96. package/template-[vue]-[rstest,storybook]-js/tests/index.test.js +16 -0
  97. package/template-[vue]-[rstest,storybook]-ts/.storybook/main.ts +36 -0
  98. package/template-[vue]-[rstest,storybook]-ts/.storybook/preview.ts +12 -0
  99. package/template-[vue]-[rstest,storybook]-ts/package.json +49 -0
  100. package/template-[vue]-[rstest,storybook]-ts/rslib.config.ts +15 -0
  101. package/template-[vue]-[rstest,storybook]-ts/rstest.config.ts +8 -0
  102. package/template-[vue]-[rstest,storybook]-ts/rstest.setup.ts +4 -0
  103. package/template-[vue]-[rstest,storybook]-ts/src/Button.vue +35 -0
  104. package/template-[vue]-[rstest,storybook]-ts/src/index.ts +1 -0
  105. package/template-[vue]-[rstest,storybook]-ts/src/style.css +34 -0
  106. package/template-[vue]-[rstest,storybook]-ts/stories/Button.stories.js +50 -0
  107. package/template-[vue]-[rstest,storybook]-ts/tests/index.test.ts +16 -0
  108. package/template-[vue]-[rstest,storybook]-ts/tests/test.d.ts +1 -0
  109. package/template-[vue]-[rstest,storybook]-ts/tests/tsconfig.json +4 -0
  110. package/template-[vue]-[rstest,storybook]-ts/tsconfig.json +24 -0
  111. package/template-[vue]-[rstest]-js/package.json +33 -0
  112. package/template-[vue]-[rstest]-js/rslib.config.ts +15 -0
  113. package/template-[vue]-[rstest]-js/rstest.config.js +8 -0
  114. package/template-[vue]-[rstest]-js/rstest.setup.js +4 -0
  115. package/template-[vue]-[rstest]-js/src/Button.vue +43 -0
  116. package/template-[vue]-[rstest]-js/src/index.js +1 -0
  117. package/template-[vue]-[rstest]-js/src/style.css +34 -0
  118. package/template-[vue]-[rstest]-js/tests/index.test.js +16 -0
  119. package/template-[vue]-[rstest]-ts/package.json +35 -0
  120. package/template-[vue]-[rstest]-ts/rslib.config.ts +15 -0
  121. package/template-[vue]-[rstest]-ts/rstest.config.ts +8 -0
  122. package/template-[vue]-[rstest]-ts/rstest.setup.ts +4 -0
  123. package/template-[vue]-[rstest]-ts/src/Button.vue +35 -0
  124. package/template-[vue]-[rstest]-ts/src/index.ts +1 -0
  125. package/template-[vue]-[rstest]-ts/src/style.css +34 -0
  126. package/template-[vue]-[rstest]-ts/tests/index.test.ts +16 -0
  127. package/template-[vue]-[rstest]-ts/tests/test.d.ts +1 -0
  128. package/template-[vue]-[rstest]-ts/tests/tsconfig.json +4 -0
  129. package/template-[vue]-[rstest]-ts/tsconfig.json +24 -0
  130. package/template-[vue]-[storybook,vitest]-js/package.json +1 -1
  131. package/template-[vue]-[storybook,vitest]-ts/package.json +1 -1
  132. package/template-[vue]-[storybook,vitest]-ts/tsconfig.json +1 -2
  133. package/template-[vue]-[storybook]-js/package.json +1 -1
  134. package/template-[vue]-[storybook]-ts/package.json +1 -1
  135. package/template-[vue]-[storybook]-ts/tsconfig.json +1 -2
  136. package/template-[vue]-[vitest]-ts/tsconfig.json +1 -2
@@ -0,0 +1,4 @@
1
+ import { expect } from '@rstest/core';
2
+ import * as jestDomMatchers from '@testing-library/jest-dom/matchers';
3
+
4
+ expect.extend(jestDomMatchers);
@@ -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,4 @@
1
+ {
2
+ "extends": "../tsconfig.json",
3
+ "include": [".", "../rstest.setup.ts"]
4
+ }
@@ -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.1.3",
23
+ "@testing-library/jest-dom": "^6.6.4",
24
+ "@testing-library/vue": "^8.0.0",
25
+ "@vue/test-utils": "^2.4.0",
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,8 @@
1
+ import { defineConfig } from '@rstest/core';
2
+ import { pluginUnpluginVue } from 'rsbuild-plugin-unplugin-vue';
3
+
4
+ export default defineConfig({
5
+ testEnvironment: 'jsdom',
6
+ setupFiles: ['./rstest.setup.js'],
7
+ plugins: [pluginUnpluginVue()],
8
+ });
@@ -0,0 +1,4 @@
1
+ import { expect } from '@rstest/core';
2
+ import * as jestDomMatchers from '@testing-library/jest-dom/matchers';
3
+
4
+ expect.extend(jestDomMatchers);
@@ -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.1.3",
23
+ "@testing-library/jest-dom": "^6.6.4",
24
+ "@testing-library/vue": "^8.0.0",
25
+ "@vue/test-utils": "^2.4.0",
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,8 @@
1
+ import { defineConfig } from '@rstest/core';
2
+ import { pluginUnpluginVue } from 'rsbuild-plugin-unplugin-vue';
3
+
4
+ export default defineConfig({
5
+ testEnvironment: 'jsdom',
6
+ setupFiles: ['./rstest.setup.ts'],
7
+ plugins: [pluginUnpluginVue()],
8
+ });
@@ -0,0 +1,4 @@
1
+ import { expect } from '@rstest/core';
2
+ import * as jestDomMatchers from '@testing-library/jest-dom/matchers';
3
+
4
+ expect.extend(jestDomMatchers);
@@ -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,4 @@
1
+ {
2
+ "extends": "../tsconfig.json",
3
+ "include": [".", "../rstest.setup.ts"]
4
+ }
@@ -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,7 +20,7 @@
20
20
  "test": "vitest run"
21
21
  },
22
22
  "devDependencies": {
23
- "@rsbuild/core": "~1.4.14",
23
+ "@rsbuild/core": "1.5.0-beta.3",
24
24
  "@rslib/core": "workspace:*",
25
25
  "@storybook/addon-docs": "^9.1.1",
26
26
  "@storybook/addon-essentials": "^9.0.0-alpha.12",
@@ -20,7 +20,7 @@
20
20
  "test": "vitest run"
21
21
  },
22
22
  "devDependencies": {
23
- "@rsbuild/core": "~1.4.14",
23
+ "@rsbuild/core": "1.5.0-beta.3",
24
24
  "@rslib/core": "workspace:*",
25
25
  "@storybook/addon-docs": "^9.1.1",
26
26
  "@storybook/addon-essentials": "^9.0.0-alpha.12",
@@ -1,8 +1,7 @@
1
1
  {
2
2
  "compilerOptions": {
3
- "lib": ["DOM", "ES2020"],
3
+ "lib": ["DOM", "ES2022"],
4
4
  "jsx": "preserve",
5
- "target": "ES2020",
6
5
  "skipLibCheck": true,
7
6
  "jsxImportSource": "vue",
8
7
  "useDefineForClassFields": true,
@@ -19,7 +19,7 @@
19
19
  "storybook": "storybook dev"
20
20
  },
21
21
  "devDependencies": {
22
- "@rsbuild/core": "~1.4.14",
22
+ "@rsbuild/core": "1.5.0-beta.3",
23
23
  "@rslib/core": "workspace:*",
24
24
  "@storybook/addon-docs": "^9.1.1",
25
25
  "@storybook/addon-essentials": "^9.0.0-alpha.12",
@@ -19,7 +19,7 @@
19
19
  "storybook": "storybook dev"
20
20
  },
21
21
  "devDependencies": {
22
- "@rsbuild/core": "~1.4.14",
22
+ "@rsbuild/core": "1.5.0-beta.3",
23
23
  "@rslib/core": "workspace:*",
24
24
  "@storybook/addon-docs": "^9.1.1",
25
25
  "@storybook/addon-essentials": "^9.0.0-alpha.12",
@@ -1,8 +1,7 @@
1
1
  {
2
2
  "compilerOptions": {
3
- "lib": ["DOM", "ES2020"],
3
+ "lib": ["DOM", "ES2022"],
4
4
  "jsx": "preserve",
5
- "target": "ES2020",
6
5
  "skipLibCheck": true,
7
6
  "jsxImportSource": "vue",
8
7
  "useDefineForClassFields": true,
@@ -1,8 +1,7 @@
1
1
  {
2
2
  "compilerOptions": {
3
- "lib": ["DOM", "ES2020"],
3
+ "lib": ["DOM", "ES2022"],
4
4
  "jsx": "preserve",
5
- "target": "ES2020",
6
5
  "skipLibCheck": true,
7
6
  "jsxImportSource": "vue",
8
7
  "useDefineForClassFields": true,