Skip to content

Commit 03f7f05

Browse files
vis97cvis97c
committed
refactor: use storybook
1 parent 18ce372 commit 03f7f05

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

58 files changed

+4846
-324
lines changed

‎.gitignore‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,3 +6,6 @@ package-lock.json
66
*.tsbuildinfo
77
*.log
88
.env
9+
.nuxt
10+
*storybook.log
11+
storybook-static

‎.prettierignore‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,4 +7,5 @@ index.css
77
index.min.css
88
.nuxt
99
*.json
10-
.*rc
10+
.*rc
11+
storybook-static

‎package.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,6 @@
2121
"p:helpers": "yarn workspace @open-xamu-co/ui-common-helpers",
2222
"p:enums": "yarn workspace @open-xamu-co/ui-common-enums",
2323
"p:types": "yarn workspace @open-xamu-co/ui-common-types",
24-
"p:eslint": "yarn workspace @open-xamu-co/eslint-config",
2524
"p:vue": "yarn workspace @open-xamu-co/ui-components-vue",
2625
"p:nuxt": "yarn workspace @open-xamu-co/ui-nuxt",
2726
"dev:vue": "yarn p:vue dev",
@@ -74,6 +73,9 @@
7473
]
7574
},
7675
"lint-staged": {
76+
"*.{mdx}": [
77+
"prettier --write"
78+
],
7779
"*.{js,ts,vue}": [
7880
"eslint --fix",
7981
"prettier --write"

‎packages/components-vue/.gitignore‎

Lines changed: 0 additions & 2 deletions
This file was deleted.

‎packages/components-vue/.storybook/main.ts‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import { join, dirname } from "path";
2+
import type { StorybookConfig } from "@storybook/vue3-vite";
3+
4+
/**
5+
* This function is used to resolve the absolute path of a package.
6+
* It is needed in projects that use Yarn PnP or are set up within a monorepo.
7+
*/
8+
function getAbsolutePath(value) {
9+
return dirname(require.resolve(join(value, "package.json")));
10+
}
11+
12+
const config: StorybookConfig = {
13+
stories: ["../src/**/*.mdx", "../src/components/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
14+
addons: [
15+
getAbsolutePath("@storybook/addon-links"),
16+
getAbsolutePath("@storybook/addon-essentials"),
17+
getAbsolutePath("@chromatic-com/storybook"),
18+
getAbsolutePath("@storybook/addon-interactions"),
19+
],
20+
framework: {
21+
name: getAbsolutePath("@storybook/vue3-vite") as any,
22+
options: {
23+
docgen: "vue-component-meta",
24+
},
25+
},
26+
};
27+
export default config;

‎packages/components-vue/.storybook/preview-head.html‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<link rel="preconnect" href="https://fonts.googleapis.com/" crossorigin="anonymous" />
2+
<link rel="dns-prefetch" href="https://fonts.googleapis.com/" />
3+
<link rel="preconnect" href="https://unpkg.com/" crossorigin="anonymous" />
4+
<link rel="dns-prefetch" href="https://unpkg.com/" />
5+
<link
6+
rel="preload"
7+
as="style"
8+
onload="this.onload=null;this.rel='stylesheet'"
9+
href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500;1,600&display=swap"
10+
/>
11+
<link
12+
rel="preload"
13+
as="style"
14+
onload="this.onload=null;this.rel='stylesheet'"
15+
href="https://unpkg.com/@fortawesome/fontawesome-free@^6/css/all.min.css"
16+
/>
17+
<link
18+
rel="preload"
19+
as="style"
20+
onload="this.onload=null;this.rel='stylesheet'"
21+
href="https://unpkg.com/sweetalert2@^11/dist/sweetalert2.min.css"
22+
/>

‎packages/components-vue/.storybook/preview.ts‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import { createRouter, createWebHistory } from "vue-router";
2+
import { type Preview, setup } from "@storybook/vue3";
3+
4+
import locale from "@open-xamu-co/ui-common-helpers/en";
5+
import "@open-xamu-co/ui-styles/dist/index.min.css";
6+
7+
import { XamuPlugin } from "../src/plugin";
8+
9+
const router = createRouter({ history: createWebHistory(), routes: [] });
10+
11+
setup((app) => {
12+
app.use(router);
13+
app.use(XamuPlugin, {
14+
locale: locale,
15+
lang: "es",
16+
country: "co",
17+
imageHosts: ["picsum.photos"],
18+
});
19+
app.mount("#appex");
20+
});
21+
22+
const preview: Preview = {
23+
parameters: {
24+
controls: {
25+
matchers: {
26+
color: /(background|color)$/i,
27+
date: /Date$/i,
28+
},
29+
},
30+
},
31+
tags: ["autodocs"],
32+
};
33+
34+
export default preview;

‎packages/components-vue/index.html‎

Lines changed: 0 additions & 38 deletions
This file was deleted.

‎packages/components-vue/package.json‎

Lines changed: 100 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -1,92 +1,102 @@
11
{
2-
"name": "@open-xamu-co/ui-components-vue",
3-
"version": "0.0.1",
4-
"description": "Vue component system for the xamu project",
5-
"scripts": {
6-
"i": "yarn --frozen-lockfile",
7-
"build:entries": "rimraf dist && vite build",
8-
"build:types": "vue-tsc --declaration --emitDeclarationOnly",
9-
"build": "yarn build:entries && yarn build:types",
10-
"dev": "vite dev"
11-
},
12-
"repository": {
13-
"type": "git",
14-
"url": "git+https://github.com/xamu-co/ui.git"
15-
},
16-
"keywords": [
17-
"vue",
18-
"component",
19-
"system"
20-
],
21-
"author": "@xamu-co",
22-
"publishConfig": {
23-
"access": "public"
24-
},
25-
"license": "MIT",
26-
"bugs": {
27-
"url": "https://github.com/xamu-co/ui/issues"
28-
},
29-
"homepage": "https://github.com/xamu-co/ui/packages/vue#readme",
30-
"type": "module",
31-
"main": "dist/index.js",
32-
"types": "dist/index.d.ts",
33-
"typings": "dist/index.d.ts",
34-
"module": "dist/index.js",
35-
"files": [
36-
"CHANGELOG.md",
37-
"README.md",
38-
"dist"
39-
],
40-
"exports": {
41-
".": {
42-
"types": "./dist/index.d.ts",
43-
"import": "./dist/index.js",
44-
"require": "./dist/index.cjs"
45-
},
46-
"./plugin": {
47-
"types": "./dist/plugin.d.ts",
48-
"import": "./dist/plugin.js",
49-
"require": "./dist/plugin.cjs"
50-
},
51-
"./theme": {
52-
"types": "./dist/composables/theme.d.ts",
53-
"import": "./dist/theme.js",
54-
"require": "./dist/theme.cjs"
55-
}
56-
},
57-
"dependencies": {
58-
"@fortawesome/fontawesome-common-types": "^6.4.0",
59-
"@open-xamu-co/ui-common-enums": "link:../common-enums",
60-
"@open-xamu-co/ui-common-helpers": "link:../common-helpers",
61-
"@open-xamu-co/ui-common-types": "link:../common-types",
62-
"@types/lodash": "^4.14.192",
63-
"@types/validator": "^13.11.1",
64-
"js-md5": "^0.8.3",
65-
"lodash": "^4.17.21",
66-
"nanoid": "^4.0.2",
67-
"sweetalert2": "^11.7.5",
68-
"validator": "^13.11.0"
69-
},
70-
"devDependencies": {
71-
"@open-xamu-co/ui-styles": "link:../styles",
72-
"@types/node": "^18.17.17",
73-
"@vitejs/plugin-vue": "^4.2.1",
74-
"vite": "^5.0.10",
75-
"vue": "^3.4.18",
76-
"vue-router": "^4.2.5",
77-
"vue-tsc": "^1.8.27"
78-
},
79-
"peerDependencies": {
80-
"vue": "^3.4.18",
81-
"vue-router": "^4.2.5"
82-
},
83-
"peerDependenciesMeta": {
84-
"vue-router": {
85-
"optional": true
86-
}
87-
},
88-
"engines": {
89-
"node": ">=18",
90-
"yarn": ">=1.22.4"
91-
}
2+
"name": "@open-xamu-co/ui-components-vue",
3+
"version": "0.0.1",
4+
"description": "Vue component system for the xamu project",
5+
"scripts": {
6+
"i": "yarn --frozen-lockfile",
7+
"build:entries": "rimraf dist && vite build",
8+
"build:types": "vue-tsc --declaration --emitDeclarationOnly",
9+
"build": "yarn build:entries && yarn build:types",
10+
"dev": "storybook dev",
11+
"storybook:build": "storybook build"
12+
},
13+
"repository": {
14+
"type": "git",
15+
"url": "git+https://github.com/xamu-co/ui.git"
16+
},
17+
"keywords": [
18+
"vue",
19+
"component",
20+
"system"
21+
],
22+
"author": "@xamu-co",
23+
"publishConfig": {
24+
"access": "public"
25+
},
26+
"license": "MIT",
27+
"bugs": {
28+
"url": "https://github.com/xamu-co/ui/issues"
29+
},
30+
"homepage": "https://github.com/xamu-co/ui/packages/vue#readme",
31+
"type": "module",
32+
"main": "dist/index.js",
33+
"types": "dist/index.d.ts",
34+
"typings": "dist/index.d.ts",
35+
"module": "dist/index.js",
36+
"files": [
37+
"CHANGELOG.md",
38+
"README.md",
39+
"dist"
40+
],
41+
"exports": {
42+
".": {
43+
"types": "./dist/index.d.ts",
44+
"import": "./dist/index.js",
45+
"require": "./dist/index.cjs"
46+
},
47+
"./plugin": {
48+
"types": "./dist/plugin.d.ts",
49+
"import": "./dist/plugin.js",
50+
"require": "./dist/plugin.cjs"
51+
},
52+
"./theme": {
53+
"types": "./dist/composables/theme.d.ts",
54+
"import": "./dist/theme.js",
55+
"require": "./dist/theme.cjs"
56+
}
57+
},
58+
"dependencies": {
59+
"@fortawesome/fontawesome-common-types": "^6.4.0",
60+
"@open-xamu-co/ui-common-enums": "link:../common-enums",
61+
"@open-xamu-co/ui-common-helpers": "link:../common-helpers",
62+
"@open-xamu-co/ui-common-types": "link:../common-types",
63+
"@types/lodash": "^4.14.192",
64+
"@types/validator": "^13.11.1",
65+
"js-md5": "^0.8.3",
66+
"lodash": "^4.17.21",
67+
"nanoid": "^4.0.2",
68+
"sweetalert2": "^11.7.5",
69+
"validator": "^13.11.0"
70+
},
71+
"devDependencies": {
72+
"@chromatic-com/storybook": "1.4.0",
73+
"@open-xamu-co/ui-styles": "link:../styles",
74+
"@storybook/addon-essentials": "^8.1.1",
75+
"@storybook/addon-interactions": "^8.1.1",
76+
"@storybook/addon-links": "^8.1.1",
77+
"@storybook/blocks": "^8.1.1",
78+
"@storybook/test": "^8.1.1",
79+
"@storybook/vue3": "^8.1.1",
80+
"@storybook/vue3-vite": "^8.1.1",
81+
"@types/node": "^18.17.17",
82+
"@vitejs/plugin-vue": "^4.2.1",
83+
"storybook": "^8.1.1",
84+
"vite": "^5.0.10",
85+
"vue": "^3.4.18",
86+
"vue-router": "^4.2.5",
87+
"vue-tsc": "^1.8.27"
88+
},
89+
"peerDependencies": {
90+
"vue": "^3.4.18",
91+
"vue-router": "^4.2.5"
92+
},
93+
"peerDependenciesMeta": {
94+
"vue-router": {
95+
"optional": true
96+
}
97+
},
98+
"engines": {
99+
"node": ">=18",
100+
"yarn": ">=1.22.4"
101+
}
92102
}

‎packages/components-vue/src/components/action/Button.stories.ts‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import type { Meta, StoryObj } from "@storybook/vue3";
2+
3+
import Button from "./Button.vue";
4+
5+
const meta = {
6+
title: "Action/Action Button",
7+
component: Button as Record<keyof typeof Button, unknown>,
8+
args: { default: "Action Button" },
9+
} satisfies Meta<typeof Button>;
10+
11+
type Story = StoryObj<typeof Button>;
12+
13+
export const Sample: Story = {
14+
args: { default: "Action Button" },
15+
};
16+
17+
export default meta;

0 commit comments

Comments
 (0)