Merge pull request #398 from uxshop/feat/index-table

[4.x] - IndexTable novo componente de listagem de itens

.prettierignore

@@ -1,6 +1,9 @@
 # Files
 *.md
+*.mdx
 
 # Folders
 .husky/*
 .vscode/*
+
+*.yml

.storybook/preview.ts

@@ -18,6 +18,7 @@ const preview: Preview = {
     schema,
     brand,
   },
+  tags: ['autodocs'],
 };
 
 export default preview;

.vscode/extensions.json

@@ -1,8 +1,9 @@
 {
   "recommendations": [
-    "Vue.volar", 
+    "Vue.volar",
     "dbaeumer.vscode-eslint",
     "esbenp.prettier-vscode",
-    "EditorConfig.EditorConfig"
-  ]  
+    "EditorConfig.EditorConfig",
+    "Tobermory.es6-string-html"
+  ]
 }

eslint.config.js

@@ -1,9 +1,9 @@
 import eslint from '@eslint/js';
-import tseslint from 'typescript-eslint';
 import vitest from '@vitest/eslint-plugin';
 import prettierSkipFormattingConfig from '@vue/eslint-config-prettier/skip-formatting';
 import pluginVue from 'eslint-plugin-vue';
 import globals from 'globals';
+import tseslint from 'typescript-eslint';
 
 const globalFiles = ['**/*.{vue,js,mjs,cjs,ts}'];
 
@@ -108,10 +108,11 @@ export default [
           memberSyntaxSortOrder: ['none', 'all', 'multiple', 'single'],
         },
       ],
+      '@typescript-eslint/no-empty-object-type': 'off', // Permite interfaces com uso de extends apenas
     },
   },
   {
-    files: ['**/*.spec.ts'],
+    files: ['**/*.{test,spec}.ts'],
     plugins: {
       vitest,
     },
@@ -123,6 +124,7 @@ export default [
       'vitest/valid-title': 'off',
       '@typescript-eslint/no-explicit-any': 'off',
       '@typescript-eslint/naming-convention': 'off',
+      '@typescript-eslint/no-explicit-any': 'off',
     },
   },
   ...pluginVue.configs['flat/recommended'],
@@ -160,7 +162,7 @@ export default [
           order: ['script', 'template', 'style'],
         },
       ],
-      'vue/multi-word-component-names': 'warn',
+      'vue/multi-word-component-names': 'off', // Desabilitada devido ao padrão do DS em que os componentes ao serem usados em outros projetos podem conter um nome composto
       'vue/block-tag-newline': 'error',
       'vue/component-api-style': ['error', ['script-setup']],
       'vue/no-setup-props-reactivity-loss': 'error',
@@ -170,4 +172,11 @@ export default [
       'vue/padding-line-between-blocks': ['error', 'always'],
     },
   },
+  {
+    files: ['**/*.stories.ts'],
+    name: 'ds/docs',
+    rules: {
+      '@typescript-eslint/no-explicit-any': 'off',
+    },
+  },
 ];

package.json

@@ -23,7 +23,7 @@
     "postinstall": "npm run build"
   },
   "peerDependencies": {
-    "typescript": ">= 5.5.0",
+    "typescript": ">= 5.5.0 < 5.7.0",
     "vue": ">= 3.4.29"
   },
   "dependencies": {

src/App.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import Page from './components/admin/page/Page.vue';
-import TextStyle from './components/ui/text-style/TextStyle.vue';
 import type { IAction } from './types';
 
 const action: IAction = {

src/components/admin/button-darkmode/ButtonDarkmode.vue

@@ -10,15 +10,15 @@ const colorSchemeStorageName = 'ds_color_scheme';
 const setColorScheme = (val: any) => {
   document.documentElement.setAttribute('data-theme', val);
 
-  if (val == ColorScheme.dark) {
+  if (val == ColorScheme.DARK) {
     iconMode.value = 'light_mode';
   } else {
     iconMode.value = 'dark_mode';
   }
 };
 
 const toggleDarkmode = () => {
-  const color = ColorSchemeService.get() === ColorScheme.dark ? ColorScheme.light : ColorScheme.dark;
+  const color = ColorSchemeService.get() === ColorScheme.DARK ? ColorScheme.LIGHT : ColorScheme.DARK;
   emit('changeSchemeColor', color);
   localStorage.setItem(colorSchemeStorageName, color);
   setColorScheme(color);

src/components/admin/platform-select/PlatformSelect.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue';
+import { computed, onMounted, ref } from 'vue';
 import Icon from '../../ui/icon/Icon.vue';
 import Tab from '../../ui/tab/Tab.vue';
 import TabItem from '../../ui/tab/TabItem.vue';
@@ -15,7 +15,11 @@ const props = defineProps<PlatformSelectProps>();
 
 const badgeConfigMerged = computed(() => ({ ...badgeConfigDefault, ...(props.badgeConfig ?? {}) }));
 
-const tab = ref(props.platformsList.find((item) => item.active)?.key);
+const tab = ref('');
+
+onMounted(() => {
+  tab.value = props.platformsList.find((item) => item.active)?.key ?? props.platformsList[0].key;
+});
 
 const emits = defineEmits(['change:platform']);
 
@@ -29,14 +33,15 @@ const hasBadge = (platform: IPlatform) => !!platform.badgeStatus;
 <template>
   <Tab v-model="tab" class="tab-container">
     <TabItem
-      v-for="platform in platformsList"
+      v-for="(platform, index) in platformsList"
+      :key="index"
       class="tab-item-btn"
       :class="{ '-item-disabled': platform.disabled }"
       :label="platform.name"
       :index="platform.key"
       @click="onChangeTab(platform)">
       <div class="tab-item-container">
-        <div class="badge-container" v-if="hasBadge(platform)">
+        <div v-if="hasBadge(platform)" class="badge-container">
           <Badge pill v-bind="badgeConfigMerged[platform.badgeStatus!]" />
         </div>
         <Icon :name="platform.icon" />

src/components/admin/table-list/TableList.vue

@@ -1,3 +1,13 @@
+<script lang="ts">
+/**
+ * ### TableList Component
+ *
+ * @deprecated Este componente está depreciado e será removido em versões futuras.
+ * Por favor, use o novo componente `IndexTable` em vez deste.
+ */
+export default {};
+</script>
+
 <script setup lang="ts">
 import { onMounted, watch, ref, reactive, onBeforeMount, computed } from 'vue';
 import { union, clone, omit, concat, isEqual } from 'lodash-es';
@@ -202,6 +212,8 @@ onMounted(() => {
   } else {
     queryParams.value = assignDefaultQueryParams();
   }
+
+  console.warn('ds - TableList is deprecated and will be removed in future versions. Please use IndexTable instead.');
 });
 
 let timerQ: ReturnType<typeof setTimeout>;

src/components/admin/table-list/index.ts

@@ -1,30 +1,29 @@
 export { default as TableListEmptyMessage } from './snippets/TableListEmptyMessage.vue';
 export { default as TableListEmptySearch } from './snippets/TableListEmptySearch.vue';
-export { default as TableListNav } from './table-list-nav/TableListNav.vue';
-export { default as TableListNavCustomFilter } from './table-list-nav/TableListNavCustomFilter.vue';
-export { default as TableListNavRefresh } from './table-list-nav/TableListNavRefresh.vue';
-export { default as TableListNavSearch } from './table-list-nav/TableListNavSearch.vue';
-export { default as TableListNavSortable } from './table-list-nav/TableListNavSortable.vue';
 export { default as TableListNavBulk } from './table-list-nav-bulk/TableListNavBulk.vue';
 export { default as TableListNavFilter } from './table-list-nav-filter/TableListNavFilter.vue';
 export { default as TableListNavFilterSidebar } from './table-list-nav-filter/TableListNavFilterSidebar.vue';
 export { default as TableListNavLoader } from './table-list-nav-loader/TableListNavLoader.vue';
 export { default as TableListNavPagination } from './table-list-nav-pagination/TableListNavPagination.vue';
+export { default as TableListNav } from './table-list-nav/TableListNav.vue';
+export { default as TableListNavCustomFilter } from './table-list-nav/TableListNavCustomFilter.vue';
+export { default as TableListNavRefresh } from './table-list-nav/TableListNavRefresh.vue';
+export { default as TableListNavSearch } from './table-list-nav/TableListNavSearch.vue';
+export { default as TableListNavSortable } from './table-list-nav/TableListNavSortable.vue';
 export { default as TableListTable } from './table-list-table/TableListTable.vue';
 export { default as TableListTabs } from './table-list-tabs/TableListTabs.vue';
 export { default as TableListTags } from './table-list-tags/TableListTags.vue';
-export { default as TableList } from './TableList.vue';
 export { default as TableListHeader } from './TableListHeader.vue';
 export { default as TableListItem } from './TableListItem.vue';
 export { default as TableListRow } from './TableListRow.vue';
+export { default as TableList } from './TableList.vue';
 
 export type {
+  ITableListConfig,
+  ITableListState,
   TBulkActions,
   TDialogDelete,
-  ITableListConfig,
-  TableListProps,
   TableListItemProps,
-  ITableListState,
   TableListNavBulkProps,
   TableListNavCustomFilterProps,
   TableListNavFilterProps,
@@ -35,6 +34,7 @@ export type {
   TableListNavRefreshProps,
   TableListNavSearchProps,
   TableListNavSortableProps,
+  TableListProps,
   TableListTablePros,
   TableListTabsProps,
   TableListTagsProps,

src/components/admin/table/Table.stories.ts

@@ -0,0 +1,45 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+import Table from './Table.vue';
+import TableBody from './TableBody.vue';
+import TableCell from './TableCell.vue';
+import TableHeadCell from './TableHeadCell.vue';
+import TableRow from './TableRow.vue';
+
+const meta: Meta<typeof Table> = {
+  title: 'Components/Table',
+  component: Table,
+  render: (args) => ({
+    components: { Table, TableHeadCell, TableBody, TableRow, TableCell },
+    setup() {
+      const products = [
+        { id: 1, name: 'Product 1', price: '$10' },
+        { id: 2, name: 'Product 2', price: '$20' },
+        { id: 3, name: 'Product 3', price: '$30' },
+      ];
+      return { args, products };
+    },
+    template: `
+    <Table v-bind="args">
+      <template #header>
+        <TableHeadCell>ID</TableHeadCell>
+        <TableHeadCell>Name</TableHeadCell>
+        <TableHeadCell>Price</TableHeadCell>
+      </template>
+      <TableBody>
+        <TableRow v-for="product in products" :key="product.id">
+          <TableCell>{{ product.id }}</TableCell>
+          <TableCell>{{ product.name }}</TableCell>
+          <TableCell>{{ product.price }}</TableCell>
+        </TableRow>
+      </TableBody>
+    </Table>
+  `,
+  }),
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const minimum: Story = {
+  args: {},
+};

src/components/admin/table/Table.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import type { TableProps } from './types';
 
-defineEmits(['click']);
 defineProps<TableProps>();
 </script>
 

src/components/admin/table/TableRow.vue

@@ -9,7 +9,7 @@ const getComponent = () => {
 </script>
 
 <template>
-  <component :is="getComponent()" class="ui-table-row" :to="to" :class="{ '-head': head }">
+  <component :is="getComponent()" class="ui-table-row" :to="to" :class="{ '-head': head }" tabindex="0">
     <slot />
   </component>
 </template>

src/components/ui/feedback-message/FeedbackMessage.mdx

@@ -0,0 +1,15 @@
+import { Controls, Canvas, Meta } from '@storybook/blocks';
+
+import * as FeedbackMessageStories from './FeedbackMessage.stories';
+
+<Meta of={FeedbackMessageStories} />
+
+# FeedbackMessage
+
+O **FeedbackMessage** é um componente utilizado para exibir mensagens de feedback para o usuário. Ele é composto por um ícone, um texto e um botão de ação. É opcional exibir o botão de ação e o ícone.
+
+A sua finalidade é a de fornecer um bloco visual e textual padronizado, que ajude a guiar o usuário sobre o que está acontecendo (por exemplo, não há dados disponíveis ou ocorreu um problema que precisa ser resolvido) e quais próximos passos podem ser tomados. Assim garantimos que o usuário tenha uma experiência familiar e coerente, independentemente de qual produto ou seção esteja utilizando.
+
+<Canvas of={FeedbackMessageStories.minimum} />
+
+<Controls />

src/components/ui/feedback-message/FeedbackMessage.scss

@@ -0,0 +1,36 @@
+.ui-feedback-message {
+  display: grid;
+  text-align: center;
+  justify-content: center;
+  height: 100%;
+  gap: var(--s-spacing-small);
+  transition: all var(--s-motion-ease-linear) var(--s-motion-duration-fast);
+
+  &-content {
+    display: grid;
+    gap: var(--s-spacing-quark);
+  }
+
+  &-icon {
+    color: var(--s-color-content-default);
+  }
+
+  &-title {
+    font: var(--s-typography-heading-medium);
+    color: var(--s-color-content-default);
+    font-weight: var(--s-font-weight-semibold);
+    margin-bottom: 0px;
+  }
+
+  &-text {
+    font: var(--s-typography-paragraph-regular);
+    color: var(--s-color-content-light);
+    margin-bottom: 0px;
+  }
+
+  &-action {
+    width: fit-content;
+    justify-self: center;
+    align-self: center;
+  }
+}

src/components/ui/feedback-message/FeedbackMessage.stories.ts

@@ -0,0 +1,40 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+import FeeedbackMessage from './FeedbackMessage.vue';
+import { fn } from '@storybook/test';
+
+const meta: Meta<typeof FeeedbackMessage> = {
+  title: 'ui/FeeedbackMessage',
+  component: FeeedbackMessage,
+  render: (args) => ({
+    components: { FeeedbackMessage },
+    setup() {
+      return { args };
+    },
+    template: '<FeeedbackMessage v-bind="args" />',
+  }),
+  argTypes: {},
+  parameters: {
+    controls: { expanded: true },
+    docs: {
+      controls: { exclude: '^on.*' },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const minimum: Story = {
+  args: {
+    title: 'Nenhum resultado encontrado',
+    subtitle:
+      'Não encontramos nenhum item que corresponda à sua pesquisa.<br>Verifique o termo digitado ou tente um filtro diferente.',
+    button: {
+      label: 'Limpar filtros',
+      variant: 'primary',
+    },
+    showIcon: true,
+    showButton: true,
+    onAction: fn(),
+  },
+};