feat: Atualiza para storybook 8

devix-tecnologia · May 29, 2024 · 48c08c8 · 48c08c8
1 parent 50b4ef2
commit 48c08c8
Show file tree

Hide file tree

Showing 29 changed files with 2,519 additions and 3,345 deletions.
diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -12,8 +12,6 @@ const config: StorybookConfig = {
     name: "@storybook/vue3-vite",
     options: {},
   },
-  docs: {
-    autodocs: true,
-  },
+  docs: {},
 };
 export default config;
diff --git a/.storybook/preview.ts b/.storybook/preview.ts
@@ -18,6 +18,8 @@ const preview: Preview = {
       },
     },
   },
+
+  tags: ['autodocs']
 };
 
 export default preview;
diff --git a/package.json b/package.json
@@ -13,45 +13,41 @@
     "semantic-release": "semantic-release"
   },
   "dependencies": {
-    "@fontsource/material-icons": "^4.5.4",
-    "date-fns": "^2.30.0",
-    "material-symbols": "^0.5.5",
-    "storybook": "^7.6.4",
+    "@fontsource/material-icons": "^5.0.18",
+    "date-fns": "^3.6.0",
+    "material-symbols": "^0.18.0",
+    "storybook": "^8.1.4",
     "vue": "^3.0.0",
-    "wrap-ansi": "npm:wrap-ansi@^7.0.0"
+    "wrap-ansi": "^9.0.0"
   },
   "devDependencies": {
     "@semantic-release/git": "^10.0.1",
-    "@semantic-release/github": "^8.0.7",
-    "@semantic-release/npm": "^9.0.1",
-    "@storybook/addon-a11y": "^7.5.3",
-    "@storybook/addon-designs": "^7.0.5",
-    "@storybook/addon-essentials": "^7.0.7",
-    "@storybook/addon-interactions": "^7.0.7",
-    "@storybook/addon-links": "^7.0.7",
-    "@storybook/addon-styling": "^1.0.1",
-    "@storybook/blocks": "^7.0.7",
-    "@storybook/testing-library": "^0.0.14-next.2",
-    "@storybook/vue3": "^7.6.4",
-    "@storybook/vue3-vite": "^7.0.7",
-    "@testing-library/vue": "^7.0.0",
-    "@vitejs/plugin-vue": "^4.1.0",
-    "@vitest/coverage-v8": "^0.34.6",
+    "@semantic-release/github": "^10.0.5",
+    "@semantic-release/npm": "^12.0.1",
+    "@storybook/addon-a11y": "^8.1.4",
+    "@storybook/addon-designs": "^8.0.2",
+    "@storybook/addon-essentials": "^8.1.4",
+    "@storybook/addon-interactions": "^8.1.4",
+    "@storybook/addon-links": "^8.1.4",
+    "@storybook/blocks": "^8.1.4",
+    "@storybook/test": "^8.1.4",
+    "@storybook/vue3": "^8.1.4",
+    "@storybook/vue3-vite": "^8.1.4",
+    "@testing-library/vue": "^8.1.0",
+    "@vitejs/plugin-vue": "^5.0.4",
+    "@vitest/coverage-v8": "^1.6.0",
     "@vue/test-utils": "^2.4.1",
     "add": "^2.0.6",
-    "happy-dom": "^12.10.2",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "semantic-release": "^19.0.5",
+    "happy-dom": "^14.11.2",
+    "semantic-release": "^23.1.1",
     "typescript": "^5.0.2",
-    "vite": "^4.3.0",
+    "vite": "^5.2.12",
     "vite-plugin-dts": "^3.6.4",
-    "vitest": "^0.34.6",
-    "vue-tsc": "^1.8.22",
-    "yarn": "^1.22.19"
+    "vitest": "^1.6.0",
+    "vue-tsc": "^2.0.19"
   },
   "resolutions": {
-    "wrap-ansi": "npm:wrap-ansi@^7.0.0"
+    "wrap-ansi": "npm:wrap-ansi@^9.0.0"
   },
   "files": [
     "dist"

diff --git a/src/components/timeline/atomos/AvatarTimeline.stories.ts b/src/components/timeline/atomos/AvatarTimeline.stories.ts
@@ -1,11 +1,11 @@
-import AvatarTimeline from "./AvatarTimeline.vue";
-import { Meta, StoryFn } from "@storybook/vue3";
+import AvatarTimeline from './AvatarTimeline.vue';
+import { Meta, StoryFn } from '@storybook/vue3';
 
 export default {
-  title: "Devix/Eventos/Atomos/AvatarTimeline",
+  title: 'Devix/Eventos/Atomos/AvatarTimeline',
   component: AvatarTimeline,
   parameters: {
-    componentSubtitle: "Imagem ou ícones do Materials Symbols do Google",
+    componentSubtitle: 'Imagem ou ícones do Materials Symbols do Google',
   },
   argTypes: {},
 } as Meta<typeof AvatarTimeline>;
@@ -19,7 +19,7 @@ const Template: StoryFn<typeof AvatarTimeline> = (args) => ({
 });
 
 const avatar =
-  "https://images.unsplash.com/photo-1526080652727-5b77f74eacd2?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1752&q=80";
+  'https://images.unsplash.com/photo-1526080652727-5b77f74eacd2?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1752&q=80';
 
 export const Imagem = Template.bind({});
 Imagem.args = {
@@ -28,7 +28,7 @@ Imagem.args = {
 
 export const Icone = Template.bind({});
 Icone.args = {
-  icone: "person",
+  icone: 'person',
 };
 
 export const Padrao = Template.bind({});
diff --git a/src/components/timeline/atomos/BoxData.stories.ts b/src/components/timeline/atomos/BoxData.stories.ts
@@ -1,15 +1,15 @@
-import "@fontsource/material-icons";
-import BoxData from "./BoxData.vue";
-import { Meta, StoryFn } from "@storybook/vue3";
+import '@fontsource/material-icons';
+import BoxData from './BoxData.vue';
+import { Meta, StoryFn } from '@storybook/vue3';
 
 export default {
-  title: "Devix/Eventos/Atomos/BoxData",
+  title: 'Devix/Eventos/Atomos/BoxData',
   component: BoxData,
   argTypes: {
     // dataBox: { control: { type: String } },
     aparencia: {
-      control: { type: "select" },
-      options: ["padrao", "escuro", "claro"],
+      control: { type: 'select' },
+      options: ['padrao', 'escuro', 'claro'],
     },
   },
 } as Meta<typeof BoxData>;
@@ -24,18 +24,18 @@ const Template: StoryFn<typeof BoxData> = (args) => ({
 
 export const Padrao = Template.bind({});
 Padrao.args = {
-  dataNumero: "01",
-  aparencia: "padrao",
+  dataNumero: '01',
+  aparencia: 'padrao',
 };
 
 export const Escuro = Template.bind({});
 Escuro.args = {
-  dataNumero: "01",
-  aparencia: "escuro",
+  dataNumero: '01',
+  aparencia: 'escuro',
 };
 
 export const Claro = Template.bind({});
 Claro.args = {
-  dataNumero: "01",
-  aparencia: "claro",
+  dataNumero: '01',
+  aparencia: 'claro',
 };
diff --git a/src/components/timeline/atomos/Destaque.stories.ts b/src/components/timeline/atomos/Destaque.stories.ts
@@ -1,16 +1,16 @@
-import "@fontsource/material-icons";
-import Destaque from "./Destaque.vue";
-import { Meta, StoryFn } from "@storybook/vue3";
+import '@fontsource/material-icons';
+import Destaque from './Destaque.vue';
+import { Meta, StoryFn } from '@storybook/vue3';
 
 export default {
-  title: "Devix/Eventos/Atomos/Destaque",
+  title: 'Devix/Eventos/Atomos/Destaque',
   component: Destaque,
   argTypes: {
     // subtitulo: { control: { type: String } },
   },
 } as Meta<typeof Destaque>;
 
-const DestaqueoMock = "Texto alinhado a direita";
+const DestaqueoMock = 'Texto alinhado a direita';
 
 const Template: StoryFn<typeof Destaque> = (args) => ({
   components: { Destaque },

diff --git a/src/components/timeline/atomos/Hora.stories.ts b/src/components/timeline/atomos/Hora.stories.ts
@@ -1,14 +1,14 @@
-import Hora from "./Hora.vue";
-import { Meta, StoryFn } from "@storybook/vue3";
+import Hora from './Hora.vue';
+import { Meta, StoryFn } from '@storybook/vue3';
 
 export default {
-  title: "Devix/Eventos/Atomos/Hora",
+  title: 'Devix/Eventos/Atomos/Hora',
   component: Hora,
   argTypes: {
-    hora: { control: { type: "date" } },
+    hora: { control: { type: 'date' } },
     aparencia: {
-      control: { type: "select" },
-      options: ["padrao", "riscada"],
+      control: { type: 'select' },
+      options: ['padrao', 'riscada'],
     },
   },
 } as Meta<typeof Hora>;
@@ -26,11 +26,11 @@ const Template: StoryFn<typeof Hora> = (args) => ({
 export const Padrao = Template.bind({});
 Padrao.args = {
   hora: horaMock,
-  aparencia: "padrao",
+  aparencia: 'padrao',
 };
 
 export const Riscada = Template.bind({});
 Riscada.args = {
   hora: horaMock,
-  aparencia: "riscada",
+  aparencia: 'riscada',
 };
diff --git a/src/components/timeline/atomos/IconeCategoria.stories.ts b/src/components/timeline/atomos/IconeCategoria.stories.ts
@@ -1,20 +1,20 @@
-import "@fontsource/material-icons";
-import IconeCategoria from "./IconeCategoria.vue";
-import { Meta, StoryFn } from "@storybook/vue3";
+import '@fontsource/material-icons';
+import IconeCategoria from './IconeCategoria.vue';
+import { Meta, StoryFn } from '@storybook/vue3';
 
 export default {
-  title: "Devix/Eventos/Atomos/IconeCategoria",
+  title: 'Devix/Eventos/Atomos/IconeCategoria',
   component: IconeCategoria,
   argTypes: {
     // categoria: { control: { type: String } },
     tipo: {
-      control: { type: "select" },
-      options: ["padrao", "importante", "alerta", "sucesso"],
+      control: { type: 'select' },
+      options: ['padrao', 'importante', 'alerta', 'sucesso'],
     },
   },
 } as Meta<typeof IconeCategoria>;
 
-const categoriaMock = "call";
+const categoriaMock = 'call';
 
 const Template: StoryFn<typeof IconeCategoria> = (args) => ({
   components: { IconeCategoria },
@@ -28,33 +28,33 @@ export const Escuro = Template.bind({});
 Escuro.args = {
   iconeCategoria: categoriaMock,
   escuro: true,
-  tipo: "padrao",
+  tipo: 'padrao',
 };
 
 export const Claro = Template.bind({});
 Claro.args = {
   iconeCategoria: categoriaMock,
   escuro: false,
-  tipo: "padrao",
+  tipo: 'padrao',
 };
 
 export const Importante = Template.bind({});
 Importante.args = {
   iconeCategoria: categoriaMock,
   escuro: true,
-  tipo: "importante",
+  tipo: 'importante',
 };
 
 export const Alerta = Template.bind({});
 Alerta.args = {
   iconeCategoria: categoriaMock,
   escuro: true,
-  tipo: "alerta",
+  tipo: 'alerta',
 };
 
 export const Sucesso = Template.bind({});
 Sucesso.args = {
   iconeCategoria: categoriaMock,
   escuro: true,
-  tipo: "sucesso",
+  tipo: 'sucesso',
 };
diff --git a/src/components/timeline/atomos/IconeStatus.stories.ts b/src/components/timeline/atomos/IconeStatus.stories.ts
@@ -1,15 +1,15 @@
-import "@fontsource/material-icons";
-import IconeStatus from "./IconeStatus.vue";
-import { Meta, StoryFn } from "@storybook/vue3";
+import '@fontsource/material-icons';
+import IconeStatus from './IconeStatus.vue';
+import { Meta, StoryFn } from '@storybook/vue3';
 
 export default {
-  title: "Devix/Eventos/Atomos/IconeStatus",
+  title: 'Devix/Eventos/Atomos/IconeStatus',
   component: IconeStatus,
   argTypes: {
     // status: { control: { type: String } },
     status: {
-      control: { type: "select" },
-      options: ["planejado", "realizado", "cancelado", "adiado", "atrasado"],
+      control: { type: 'select' },
+      options: ['planejado', 'realizado', 'cancelado', 'adiado', 'atrasado'],
     },
   },
 } as Meta<typeof IconeStatus>;
@@ -23,16 +23,16 @@ const Template: StoryFn<typeof IconeStatus> = (args) => ({
 });
 
 export const Planejado = Template.bind({});
-Planejado.args = { status: "planejado" };
+Planejado.args = { status: 'planejado' };
 
 export const Realizado = Template.bind({});
-Realizado.args = { status: "realizado" };
+Realizado.args = { status: 'realizado' };
 
 export const Cancelado = Template.bind({});
-Cancelado.args = { status: "cancelado" };
+Cancelado.args = { status: 'cancelado' };
 
 export const Adiado = Template.bind({});
-Adiado.args = { status: "adiado" };
+Adiado.args = { status: 'adiado' };
 
 export const Atrasado = Template.bind({});
-Atrasado.args = { status: "atrasado" };
+Atrasado.args = { status: 'atrasado' };
diff --git a/src/components/timeline/atomos/SubtituloEvento.stories.ts b/src/components/timeline/atomos/SubtituloEvento.stories.ts
@@ -1,16 +1,16 @@
-import "@fontsource/material-icons";
-import SubtituloEvento from "./SubtituloEvento.vue";
-import { Meta, StoryFn } from "@storybook/vue3";
+import '@fontsource/material-icons';
+import SubtituloEvento from './SubtituloEvento.vue';
+import { Meta, StoryFn } from '@storybook/vue3';
 
 export default {
-  title: "Devix/Eventos/Atomos/SubtituloEvento",
+  title: 'Devix/Eventos/Atomos/SubtituloEvento',
   component: SubtituloEvento,
   argTypes: {
     // subtitulo: { control: { type: String } },
   },
 } as Meta<typeof SubtituloEvento>;
 
-const subtituloEventooMock = "subtitulo";
+const subtituloEventooMock = 'subtitulo';
 
 const Template: StoryFn<typeof SubtituloEvento> = (args) => ({
   components: { SubtituloEvento },

diff --git a/src/components/timeline/atomos/TituloEvento.stories.ts b/src/components/timeline/atomos/TituloEvento.stories.ts
@@ -1,16 +1,16 @@
-import "@fontsource/material-icons";
-import TituloEvento from "./TituloEvento.vue";
-import { Meta, StoryFn } from "@storybook/vue3";
+import '@fontsource/material-icons';
+import TituloEvento from './TituloEvento.vue';
+import { Meta, StoryFn } from '@storybook/vue3';
 
 export default {
-  title: "Devix/Eventos/Atomos/TituloEvento",
+  title: 'Devix/Eventos/Atomos/TituloEvento',
   component: TituloEvento,
   argTypes: {
     // titulo: { control: { type: String } },
   },
 } as Meta<typeof TituloEvento>;
 
-const tituloEventoMock = "titulo";
+const tituloEventoMock = 'titulo';
 
 const Template: StoryFn<typeof TituloEvento> = (args) => ({
   components: { TituloEvento },

diff --git a/src/components/timeline/moleculas/Botao.stories.ts b/src/components/timeline/moleculas/Botao.stories.ts
@@ -29,8 +29,7 @@ const Template: StoryFn<typeof Botao> = (args) => ({
 
     return { args, handleClick };
   },
-  template:
-    '<Botao v-bind="args" @click="handleClick" />',
+  template: '<Botao v-bind="args" @click="handleClick" />',
 });
 
 export const outline = Template.bind({});