Skip to content

Commit 5890aea

Browse files
committed
docs: improve storybook examples
1 parent cd3b254 commit 5890aea

29 files changed

+599
-778
lines changed

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

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,7 @@ function getAbsolutePath(value) {
1010
}
1111

1212
const config: StorybookConfig = {
13-
stories: [
14-
"../src/**/*.mdx",
15-
"../src/screens/*.stories.@(js|jsx|mjs|ts|tsx)",
16-
"../src/components/**/*.stories.@(js|jsx|mjs|ts|tsx)",
17-
],
13+
stories: ["../src/**/*.mdx", "../src/components/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
1814
addons: [
1915
getAbsolutePath("@storybook/addon-links"),
2016
getAbsolutePath("@storybook/addon-essentials"),

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,19 +11,19 @@ const meta = {
1111

1212
type Story = StoryObj<typeof ButtonComponent>;
1313

14-
export const Button: Story = {
14+
export const Sample: Story = {
1515
args: { default: "Action Button" },
1616
};
1717

18-
export const ButtonIsActiveWithAlert: Story = {
18+
export const ActiveWithAlert: Story = {
1919
args: { default: "Button with alert", active: true, alert: true },
2020
};
2121

22-
export const ButtonAsY: Story = {
22+
export const Vertical: Story = {
2323
args: { default: "⋮", y: true, theme: eColors.DANGER },
2424
};
2525

26-
export const ButtonAsYIsActiveWithAlert: Story = {
26+
export const VerticalActiveWithAlert: Story = {
2727
args: { default: "⋮", y: true, theme: eColors.DANGER, active: true, alert: true },
2828
};
2929

packages/components-vue/src/components/action/ButtonToggle.stories.ts

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import type { Meta, StoryObj } from "@storybook/vue3";
2+
import { ref } from "vue";
23

34
import ButtonToggle from "./ButtonToggle.vue";
5+
import IconFa from "../icon/Fa.vue";
46

57
const meta = {
68
title: "Action/Action Button Toggle",
@@ -14,4 +16,30 @@ export const Sample: Story = {
1416
args: { default: "Action Button Toggle" },
1517
};
1618

19+
export const Active: Story = {
20+
args: { default: "Active button Toggle", active: true },
21+
};
22+
23+
export const WithIcon: Story = {
24+
render: (args) => ({
25+
components: { ButtonToggle, IconFa },
26+
setup() {
27+
const model = ref(false);
28+
29+
function toggle() {
30+
model.value = !model.value;
31+
}
32+
33+
return { args, model, toggle };
34+
},
35+
template: `
36+
<ButtonToggle v-bind="args" :active="model" @click="toggle">
37+
<IconFa name="eye" force-regular />
38+
<IconFa name="eye" />
39+
</ButtonToggle>
40+
`,
41+
}),
42+
args: { round: true },
43+
};
44+
1745
export default meta;

packages/components-vue/src/components/box/Message.stories.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,13 @@ import Message from "./Message.vue";
55
const meta = {
66
title: "Box/Box Message",
77
component: Message as Record<keyof typeof Message, unknown>,
8-
args: { default: "Box Message" },
8+
args: { text: "Here is a box message" },
99
} satisfies Meta<typeof Message>;
1010

1111
type Story = StoryObj<typeof Message>;
1212

1313
export const Sample: Story = {
14-
args: { default: "Box Message" },
14+
args: {},
1515
};
1616

1717
export default meta;
Lines changed: 29 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,40 @@
11
import type { Meta, StoryObj } from "@storybook/vue3";
22

3-
import Simple from "./Simple.vue";
3+
import DropdownSimple from "./Simple.vue";
4+
import ActionButton from "../action/Button.vue";
45

56
const meta = {
67
title: "Dropdown",
7-
component: Simple as Record<keyof typeof Simple, unknown>,
8-
args: {},
9-
} satisfies Meta<typeof Simple>;
8+
component: DropdownSimple as Record<keyof typeof DropdownSimple, unknown>,
9+
args: {
10+
invertTheme: true,
11+
},
12+
} satisfies Meta<typeof DropdownSimple>;
1013

11-
type Story = StoryObj<typeof Simple>;
14+
type Story = StoryObj<typeof DropdownSimple>;
1215

1316
export const Sample: Story = {
14-
args: {},
17+
render: (args) => ({
18+
components: { DropdownSimple, ActionButton },
19+
setup() {
20+
return { args };
21+
},
22+
template: `
23+
<div class="--minHeightVh-30 --flx --flxColumn --flx-start">
24+
<DropdownSimple v-bind="args">
25+
<template #toggle="{ setModel }">
26+
<ActionButton @click="setModel">Open dropdown</ActionButton>
27+
</template>
28+
<template #default>
29+
<ul class="--txtColor">
30+
<li>First option</li>
31+
<li>Second option</li>
32+
<li>Third option</li>
33+
</ul>
34+
</template>
35+
</DropdownSimple>
36+
</div>`,
37+
}),
1538
};
1639

1740
export default meta;
Lines changed: 161 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -1,84 +1,97 @@
11
import type { Meta, StoryObj } from "@storybook/vue3";
2-
import type { tFormInput } from "@open-xamu-co/ui-common-types";
2+
import type { iInvalidInput, tFormInput } from "@open-xamu-co/ui-common-types";
33

44
import { FormInput } from "@open-xamu-co/ui-common-helpers";
55
import { eFormType } from "@open-xamu-co/ui-common-enums";
66

7-
import FormSimpleComponent from "./Simple.vue";
8-
9-
const inputs: tFormInput[] = [
10-
new FormInput({
11-
values: [""],
12-
name: "firstName",
13-
required: true,
14-
title: "First Name",
15-
placeholder: "What is your first name?",
16-
autocomplete: "name",
17-
icon: "user",
18-
}),
19-
new FormInput({
20-
placeholder: "E.g. Blue",
21-
title: "Possible Value",
22-
icon: ["industry", {}],
23-
name: "offerFieldValues",
24-
multiple: true,
25-
}),
26-
new FormInput({
27-
required: true,
28-
options: [{ value: 1, alias: "Payment on Delivery" }],
29-
type: eFormType.SELECT_FILTER,
30-
placeholder: "Search payment methods",
31-
icon: "credit-card",
32-
autocomplete: "off",
33-
name: "paymentMethodIds",
34-
multiple: true,
35-
min: 0,
36-
title: "Choose one or several payment methods",
37-
}),
38-
new FormInput({
39-
options: [
40-
{ value: "Happy", icon: "face-smile" },
41-
{ value: "Tired", icon: "face-tired" },
42-
{ value: "Sad", icon: "face-sad-tear" },
43-
{ value: "indiferent", icon: "face-meh" },
44-
{ value: "In love", icon: "face-grin-hearts" },
45-
],
46-
type: eFormType.CHOICE,
47-
values: [""],
48-
name: "feeling",
49-
title: "How you feeling today?",
50-
}),
51-
new FormInput({
52-
type: eFormType.BOOLEAN,
53-
placeholder: "Users can skip this field when creating an offer",
54-
name: "nullable",
55-
title: "Is this field optional in the offer?",
56-
}),
57-
new FormInput({
58-
name: "logo",
59-
type: eFormType.FILE,
60-
title: "Business logo",
61-
max: 3,
62-
}),
63-
];
7+
import FormSimple from "./Simple.vue";
8+
import { ref } from "vue";
649

6510
const meta: Meta = {
6611
title: "Form/Form Simple",
67-
component: FormSimpleComponent as any,
68-
args: { modelValue: inputs },
12+
component: FormSimple as any,
13+
args: {},
6914
};
7015

7116
type Story = StoryObj<typeof meta>;
7217

73-
export const Form: Story = {
74-
args: { modelValue: inputs },
18+
export const Sample: Story = {
19+
args: {},
7520
};
7621

77-
export const FormUsingLocationField: Story = {
22+
export const WithInputs: Story = {
23+
render: (args) => ({
24+
components: { FormSimple },
25+
setup() {
26+
const inputs: tFormInput[] = [
27+
new FormInput({
28+
values: [""],
29+
name: "firstName",
30+
required: true,
31+
title: "First Name",
32+
placeholder: "What is your first name?",
33+
autocomplete: "name",
34+
icon: "user",
35+
}),
36+
new FormInput({
37+
placeholder: "E.g. Blue",
38+
title: "Possible Value",
39+
icon: ["industry", {}],
40+
name: "offerFieldValues",
41+
multiple: true,
42+
}),
43+
new FormInput({
44+
required: true,
45+
options: [{ value: 1, alias: "Payment on Delivery" }],
46+
type: eFormType.SELECT_FILTER,
47+
placeholder: "Search payment methods",
48+
icon: "credit-card",
49+
autocomplete: "off",
50+
name: "paymentMethodIds",
51+
multiple: true,
52+
min: 0,
53+
title: "Choose one or several payment methods",
54+
}),
55+
new FormInput({
56+
options: [
57+
{ value: "Happy", icon: "face-smile" },
58+
{ value: "Tired", icon: "face-tired" },
59+
{ value: "Sad", icon: "face-sad-tear" },
60+
{ value: "indiferent", icon: "face-meh" },
61+
{ value: "In love", icon: "face-grin-hearts" },
62+
],
63+
type: eFormType.CHOICE,
64+
values: [""],
65+
name: "feeling",
66+
title: "How you feeling today?",
67+
}),
68+
new FormInput({
69+
type: eFormType.BOOLEAN,
70+
placeholder: "Users can skip this field when creating an offer",
71+
name: "nullable",
72+
title: "Is this field optional in the offer?",
73+
}),
74+
new FormInput({
75+
name: "logo",
76+
type: eFormType.FILE,
77+
title: "Business logo",
78+
max: 3,
79+
}),
80+
];
81+
const invalid = ref<iInvalidInput[]>([]);
82+
83+
return { args, inputs, invalid };
84+
},
85+
template: `<FormSimple v-bind="args" v-model="inputs" v-model:invalid="invalid" />`,
86+
}),
87+
args: {},
88+
};
89+
90+
export const WithLocationField: Story = {
7891
args: {
7992
modelValue: [
8093
new FormInput({
81-
values: [["", "", ""]],
94+
values: [["CO", "VAC", "Cali"]],
8295
name: "location",
8396
type: eFormType.LOCATION,
8497
required: true,
@@ -87,7 +100,7 @@ export const FormUsingLocationField: Story = {
87100
},
88101
};
89102

90-
export const FormUsingPhoneField: Story = {
103+
export const WithPhoneField: Story = {
91104
args: {
92105
modelValue: [
93106
new FormInput({
@@ -100,4 +113,87 @@ export const FormUsingPhoneField: Story = {
100113
},
101114
};
102115

116+
export const Make: Story = {
117+
render: (args) => ({
118+
components: { FormSimple },
119+
setup() {
120+
const inputs = ref<tFormInput[]>([]);
121+
const invalid = ref<iInvalidInput[]>([]);
122+
const sampleInstance = {
123+
locationState: "VAC",
124+
locationCity: "Cali",
125+
whatsappIndicative: "CO+57",
126+
updatedAt: "2024-10-08T15:27:58.220",
127+
address: "",
128+
slogan: "We are yours",
129+
banner: { message: "10% off", url: "https://www.youtube.com/watch?v=dQw4w9WgXcQ" },
130+
locationCountry: "CO",
131+
createdAt: "2024-09-19T18:47:20.000",
132+
whatsappNumber: "0000000000",
133+
name: "Superstore",
134+
id: "localhost",
135+
};
136+
137+
function makeInstanceInputs(instance: typeof sampleInstance): tFormInput[] {
138+
return [
139+
new FormInput({
140+
values: [instance?.name || ""],
141+
name: "name",
142+
required: true,
143+
title: "Nombre de la tienda",
144+
placeholder: "Ej: Mi tienda",
145+
icon: "store",
146+
}),
147+
new FormInput({
148+
values: [instance?.slogan || ""],
149+
name: "slogan",
150+
title: "Eslogan de la tienda",
151+
placeholder: "Ej: La tienda cerca de ti",
152+
icon: "flag",
153+
}),
154+
new FormInput({
155+
values: [
156+
[instance?.whatsappIndicative || "", instance?.whatsappNumber || ""],
157+
],
158+
name: "whatsapp",
159+
title: "Whatsapp",
160+
placeholder: "Whatsapp de la tienda",
161+
icon: ["whatsapp", { brand: true }],
162+
type: eFormType.CELLPHONE,
163+
}),
164+
new FormInput({
165+
values: [
166+
["co", instance?.locationState || "", instance?.locationCity || ""],
167+
],
168+
name: "location",
169+
title: "Ubicacion",
170+
placeholder: "Ubicacion de la tienda",
171+
icon: "city",
172+
type: eFormType.LOCATION,
173+
}),
174+
new FormInput({
175+
values: [instance?.address || ""],
176+
name: "address",
177+
title: "Direccion",
178+
placeholder: "Ej: Cra 123 #45-67 Sur",
179+
icon: "location-dot",
180+
}),
181+
];
182+
}
183+
184+
return { args, inputs, invalid, sampleInstance, makeInstanceInputs };
185+
},
186+
template: `
187+
<FormSimple
188+
v-bind="args"
189+
v-model="inputs"
190+
v-model:invalid="invalid"
191+
:make="makeInstanceInputs"
192+
:payload="[sampleInstance]"
193+
/>
194+
`,
195+
}),
196+
args: {},
197+
};
198+
103199
export default meta;

0 commit comments

Comments
 (0)