norma-library 0.6.86 → 0.6.87

package/src/stories/Title.stories.tsx

@@ -1,5 +1,5 @@
-import React from "react"
-import Title from '../components/Typography/Title';
+import React from 'react'
+import Title from '../components/Typography/Title'
 
 export default {
   title: 'Tipografia/Title',
@@ -12,10 +12,10 @@ export default {
     as: {
       description: 'Adiciona a tag do titulo.',
       options: ['h1', 'h2', 'h3', 'h4', 'h5'],
-      control: { type: 'radio' }
+      control: { type: 'radio' },
     },
     children: {
-      description: 'Adiciona um children.'
+      description: 'Adiciona um children.',
     },
     className: {
       description: 'Adicione uma classe.',
@@ -23,14 +23,14 @@ export default {
     size: {
       description: 'Adicione um tamanho.',
       options: ['small', 'medium', 'large'],
-      control: { type: 'radio' }
+      control: { type: 'radio' },
     },
     type: {
       description: 'Adicione um tipo.',
       options: ['default', 'secondary', 'success', 'warning', 'danger', 'info'],
-      control: { type: 'radio' }
+      control: { type: 'radio' },
     },
-  }
+  },
 }
 
 export const Default = (args) => <Title {...args} />
@@ -40,5 +40,5 @@ Default.args = {
   children: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.',
   className: '',
   size: 'default',
-  type: ''
-}
+  type: '',
+}

package/src/stories/UncontrolledTable.stories.tsx

@@ -1,13 +1,13 @@
-import React, { useEffect, useState } from 'react';
-import UncontrolledTable from '../components/UncontrolledTable';
-import { Button } from '../components/Button';
-import { format } from 'date-fns';
-import CodeIcon from '@mui/icons-material/Code';
-import CreateIcon from '@mui/icons-material/Create';
+import React, { useEffect, useState } from 'react'
+import UncontrolledTable from '../components/UncontrolledTable'
+import { Button } from '../components/Button'
+import { format } from 'date-fns'
+import CodeIcon from '@mui/icons-material/Code'
+import CreateIcon from '@mui/icons-material/Create'
 
-const Template = args => {
-  return <UncontrolledTable {...args} />;
-};
+const Template = (args) => {
+  return <UncontrolledTable {...args} />
+}
 
 export default {
   title: 'Uncontrolled/Table',
@@ -26,7 +26,7 @@ export default {
     },
   },
   argTypes: {},
-};
+}
 
 const columns = [
   {
@@ -58,7 +58,7 @@ const columns = [
     filterFn: 'customFilterText',
     disableMenu: true,
   },
-];
+]
 
 const dnd_columns = [
   {
@@ -89,9 +89,9 @@ const dnd_columns = [
     enableColumnFilter: false,
     filterFn: 'customFilterText',
   },
-];
+]
 
-export const Default = args => {
+export const Default = (args) => {
   const data = [
     {
       date: format(new Date('8-14-2023 21:29'), 'dd/MM/yyyy'),
@@ -103,7 +103,12 @@ export const Default = args => {
       origin: 'origin',
       id: '1',
       action: (
-        <Button color="primary" disableElevation variant="text" onClick={() => console.log('click')}>
+        <Button
+          color="primary"
+          disableElevation
+          variant="text"
+          onClick={() => console.log('click')}
+        >
           Editar
         </Button>
       ),
@@ -119,7 +124,12 @@ export const Default = args => {
       origin: 'origin',
       id: '2',
       action: (
-        <Button color="primary" disableElevation variant="text" onClick={() => console.log('click')}>
+        <Button
+          color="primary"
+          disableElevation
+          variant="text"
+          onClick={() => console.log('click')}
+        >
           Editar
         </Button>
       ),
@@ -135,7 +145,12 @@ export const Default = args => {
       origin: 'origin',
       id: '3',
       action: (
-        <Button color="primary" disableElevation variant="text" onClick={() => console.log('click')}>
+        <Button
+          color="primary"
+          disableElevation
+          variant="text"
+          onClick={() => console.log('click')}
+        >
           Editar
         </Button>
       ),
@@ -151,7 +166,12 @@ export const Default = args => {
       origin: 'origin',
       id: '4',
       action: (
-        <Button color="primary" disableElevation variant="text" onClick={() => console.log('click')}>
+        <Button
+          color="primary"
+          disableElevation
+          variant="text"
+          onClick={() => console.log('click')}
+        >
           Editar
         </Button>
       ),
@@ -167,7 +187,12 @@ export const Default = args => {
       origin: 'origin',
       id: '5',
       action: (
-        <Button color="primary" disableElevation variant="text" onClick={() => console.log('click')}>
+        <Button
+          color="primary"
+          disableElevation
+          variant="text"
+          onClick={() => console.log('click')}
+        >
           Editar
         </Button>
       ),
@@ -183,7 +208,12 @@ export const Default = args => {
       origin: 'origin',
       id: '6',
       action: (
-        <Button color="primary" disableElevation variant="text" onClick={() => console.log('click')}>
+        <Button
+          color="primary"
+          disableElevation
+          variant="text"
+          onClick={() => console.log('click')}
+        >
           Editar
         </Button>
       ),
@@ -199,7 +229,12 @@ export const Default = args => {
       origin: 'origin',
       id: '7',
       action: (
-        <Button color="primary" disableElevation variant="text" onClick={() => console.log('click')}>
+        <Button
+          color="primary"
+          disableElevation
+          variant="text"
+          onClick={() => console.log('click')}
+        >
           Editar
         </Button>
       ),
@@ -215,7 +250,12 @@ export const Default = args => {
       origin: 'origin',
       id: '8',
       action: (
-        <Button color="primary" disableElevation variant="text" onClick={() => console.log('click')}>
+        <Button
+          color="primary"
+          disableElevation
+          variant="text"
+          onClick={() => console.log('click')}
+        >
           Editar
         </Button>
       ),
@@ -231,7 +271,12 @@ export const Default = args => {
       origin: 'origin',
       id: '8',
       action: (
-        <Button color="primary" disableElevation variant="text" onClick={() => console.log('click')}>
+        <Button
+          color="primary"
+          disableElevation
+          variant="text"
+          onClick={() => console.log('click')}
+        >
           Editar
         </Button>
       ),
@@ -247,7 +292,12 @@ export const Default = args => {
       origin: 'origin',
       id: '8',
       action: (
-        <Button color="primary" disableElevation variant="text" onClick={() => console.log('click')}>
+        <Button
+          color="primary"
+          disableElevation
+          variant="text"
+          onClick={() => console.log('click')}
+        >
           Editar
         </Button>
       ),
@@ -263,7 +313,12 @@ export const Default = args => {
       origin: 'origin',
       id: '8',
       action: (
-        <Button color="primary" disableElevation variant="text" onClick={() => console.log('click')}>
+        <Button
+          color="primary"
+          disableElevation
+          variant="text"
+          onClick={() => console.log('click')}
+        >
           Editar
         </Button>
       ),
@@ -279,7 +334,12 @@ export const Default = args => {
       origin: 'origin',
       id: '8',
       action: (
-        <Button color="primary" disableElevation variant="text" onClick={() => console.log('click')}>
+        <Button
+          color="primary"
+          disableElevation
+          variant="text"
+          onClick={() => console.log('click')}
+        >
           Editar
         </Button>
       ),
@@ -295,33 +355,38 @@ export const Default = args => {
       origin: 'origin',
       id: '8',
       action: (
-        <Button color="primary" disableElevation variant="text" onClick={() => console.log('click')}>
+        <Button
+          color="primary"
+          disableElevation
+          variant="text"
+          onClick={() => console.log('click')}
+        >
           Editar
         </Button>
       ),
     },
-  ];
-  
+  ]
+
   const [hiddenColumns, setHiddenColumns] = useState<string[]>(() =>
     JSON.parse(localStorage.getItem('hiddenColumns') || '[]'),
-  );
+  )
 
   const handleColumnVisibilityChange = (columnId: string, isVisible: boolean) => {
-    setHiddenColumns(prevHiddenColumns => {
+    setHiddenColumns((prevHiddenColumns) => {
       const updatedHiddenColumns = isVisible
-        ? prevHiddenColumns.filter(col => col !== columnId)
-        : [...prevHiddenColumns, columnId];
+        ? prevHiddenColumns.filter((col) => col !== columnId)
+        : [...prevHiddenColumns, columnId]
 
-      localStorage.setItem('hiddenColumns', JSON.stringify(updatedHiddenColumns));
+      localStorage.setItem('hiddenColumns', JSON.stringify(updatedHiddenColumns))
 
-      console.log('Colunas escondidas:::', updatedHiddenColumns);
-      return updatedHiddenColumns;
-    });
-  };
+      console.log('Colunas escondidas:::', updatedHiddenColumns)
+      return updatedHiddenColumns
+    })
+  }
 
   useEffect(() => {
-    console.info('Colunas escondidas ao carregar:::', hiddenColumns);
-  }, [hiddenColumns]);
+    console.info('Colunas escondidas ao carregar:::', hiddenColumns)
+  }, [hiddenColumns])
 
   return (
     <>
@@ -338,12 +403,12 @@ export const Default = args => {
             <CreateIcon sx={{ fontSize: 18, color: '#DE8B50' }} />
           </div>,
         ]}
-        onClick={value => console.log('onClick line:', value)}
-        onMouseOver={value => console.log('onMouseOver line:', value)}
-        onMouseOut={value => console.log('onMouseOut line:', value)}
+        onClick={(value) => console.log('onClick line:', value)}
+        onMouseOver={(value) => console.log('onMouseOver line:', value)}
+        onMouseOut={(value) => console.log('onMouseOut line:', value)}
         onClearFieldsClick={() => console.log('onClearFieldsClick')}
-        onFilterClick={column => console.log('onFilterClick', column)}
-        onChangePage={pagination => console.log('onChangePage', pagination)}
+        onFilterClick={(column) => console.log('onFilterClick', column)}
+        onChangePage={(pagination) => console.log('onChangePage', pagination)}
         onSortClick={(column, direction) => console.log('onSortClick', column, direction)}
         pagination={{
           pageIndex: 1,
@@ -363,12 +428,12 @@ export const Default = args => {
         {...args}
       />
     </>
-  );
-};
+  )
+}
 
-Default.args = {};
+Default.args = {}
 
-export const RowDnd = args => {
+export const RowDnd = (args) => {
   const [data, setData] = useState([
     {
       date: format(new Date('8-14-2023 21:29'), 'dd/MM/yyyy'),
@@ -380,7 +445,12 @@ export const RowDnd = args => {
       origin: 'origin',
       id: '1',
       action: (
-        <Button color="primary" disableElevation variant="text" onClick={() => console.log('click')}>
+        <Button
+          color="primary"
+          disableElevation
+          variant="text"
+          onClick={() => console.log('click')}
+        >
           Editar
         </Button>
       ),
@@ -396,7 +466,12 @@ export const RowDnd = args => {
       origin: 'origin',
       id: '2',
       action: (
-        <Button color="primary" disableElevation variant="text" onClick={() => console.log('click')}>
+        <Button
+          color="primary"
+          disableElevation
+          variant="text"
+          onClick={() => console.log('click')}
+        >
           Editar
         </Button>
       ),
@@ -412,7 +487,12 @@ export const RowDnd = args => {
       origin: 'origin',
       id: '3',
       action: (
-        <Button color="primary" disableElevation variant="text" onClick={() => console.log('click')}>
+        <Button
+          color="primary"
+          disableElevation
+          variant="text"
+          onClick={() => console.log('click')}
+        >
           Editar
         </Button>
       ),
@@ -428,7 +508,12 @@ export const RowDnd = args => {
       origin: 'origin',
       id: '4',
       action: (
-        <Button color="primary" disableElevation variant="text" onClick={() => console.log('click')}>
+        <Button
+          color="primary"
+          disableElevation
+          variant="text"
+          onClick={() => console.log('click')}
+        >
           Editar
         </Button>
       ),
@@ -444,7 +529,12 @@ export const RowDnd = args => {
       origin: 'origin',
       id: '5',
       action: (
-        <Button color="primary" disableElevation variant="text" onClick={() => console.log('click')}>
+        <Button
+          color="primary"
+          disableElevation
+          variant="text"
+          onClick={() => console.log('click')}
+        >
           Editar
         </Button>
       ),
@@ -460,7 +550,12 @@ export const RowDnd = args => {
       origin: 'origin',
       id: '6',
       action: (
-        <Button color="primary" disableElevation variant="text" onClick={() => console.log('click')}>
+        <Button
+          color="primary"
+          disableElevation
+          variant="text"
+          onClick={() => console.log('click')}
+        >
           Editar
         </Button>
       ),
@@ -476,7 +571,12 @@ export const RowDnd = args => {
       origin: 'origin',
       id: '7',
       action: (
-        <Button color="primary" disableElevation variant="text" onClick={() => console.log('click')}>
+        <Button
+          color="primary"
+          disableElevation
+          variant="text"
+          onClick={() => console.log('click')}
+        >
           Editar
         </Button>
       ),
@@ -492,7 +592,12 @@ export const RowDnd = args => {
       origin: 'origin',
       id: '55',
       action: (
-        <Button color="primary" disableElevation variant="text" onClick={() => console.log('click')}>
+        <Button
+          color="primary"
+          disableElevation
+          variant="text"
+          onClick={() => console.log('click')}
+        >
           Editar
         </Button>
       ),
@@ -508,7 +613,12 @@ export const RowDnd = args => {
       origin: 'origin',
       id: '8',
       action: (
-        <Button color="primary" disableElevation variant="text" onClick={() => console.log('click')}>
+        <Button
+          color="primary"
+          disableElevation
+          variant="text"
+          onClick={() => console.log('click')}
+        >
           Editar
         </Button>
       ),
@@ -524,7 +634,12 @@ export const RowDnd = args => {
       origin: 'origin',
       id: '9',
       action: (
-        <Button color="primary" disableElevation variant="text" onClick={() => console.log('click')}>
+        <Button
+          color="primary"
+          disableElevation
+          variant="text"
+          onClick={() => console.log('click')}
+        >
           Editar
         </Button>
       ),
@@ -540,7 +655,12 @@ export const RowDnd = args => {
       origin: 'origin',
       id: '10',
       action: (
-        <Button color="primary" disableElevation variant="text" onClick={() => console.log('click')}>
+        <Button
+          color="primary"
+          disableElevation
+          variant="text"
+          onClick={() => console.log('click')}
+        >
           Editar
         </Button>
       ),
@@ -556,7 +676,12 @@ export const RowDnd = args => {
       origin: 'origin',
       id: '11',
       action: (
-        <Button color="primary" disableElevation variant="text" onClick={() => console.log('click')}>
+        <Button
+          color="primary"
+          disableElevation
+          variant="text"
+          onClick={() => console.log('click')}
+        >
           Editar
         </Button>
       ),
@@ -572,12 +697,17 @@ export const RowDnd = args => {
       origin: 'origin',
       id: '12',
       action: (
-        <Button color="primary" disableElevation variant="text" onClick={() => console.log('click')}>
+        <Button
+          color="primary"
+          disableElevation
+          variant="text"
+          onClick={() => console.log('click')}
+        >
           Editar
         </Button>
       ),
     },
-  ]);
+  ])
 
   return (
     <>
@@ -586,11 +716,11 @@ export const RowDnd = args => {
         columns={dnd_columns}
         stickyHeader
         draggable
-        onDragEnd={data => setData(data)}
+        onDragEnd={(data) => setData(data)}
         {...args}
       />
     </>
-  );
-};
+  )
+}
 
-RowDnd.args = {};
+RowDnd.args = {}

package/src/stories/UncontrolledTabs.stories.tsx

@@ -1,9 +1,9 @@
-import React, { useState } from 'react';
+import React, { useState } from 'react'
 
-import type { Meta, StoryObj } from '@storybook/react';
-import UncontrolledTabs from '../components/UncontrolledTabs/UncontrolledTabs';
-import { DataTabs } from '../types';
-import { Typography } from '@mui/material';
+import type { Meta, StoryObj } from '@storybook/react'
+import UncontrolledTabs from '../components/UncontrolledTabs/UncontrolledTabs'
+import { DataTabs } from '../types'
+import { Typography } from '@mui/material'
 
 const data: DataTabs[] = [
   {
@@ -11,8 +11,8 @@ const data: DataTabs[] = [
     id: 'panel-1',
     children: (
       <Typography>
-        Tab 1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet
-        blandit leo lobortis eget.
+        Tab 1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus
+        ex, sit amet blandit leo lobortis eget.
       </Typography>
     ),
   },
@@ -21,12 +21,12 @@ const data: DataTabs[] = [
     id: 'panel-2',
     children: (
       <Typography>
-        Tab 2 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet
-        blandit leo lobortis eget.
+        Tab 2 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus
+        ex, sit amet blandit leo lobortis eget.
       </Typography>
     ),
   },
-];
+]
 
 const meta = {
   title: 'Uncontrolled/Tabs',
@@ -38,37 +38,42 @@ const meta = {
   argTypes: {
     tabs: data,
   },
-} satisfies Meta<typeof UncontrolledTabs>;
+} satisfies Meta<typeof UncontrolledTabs>
 
-export default meta;
+export default meta
 
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof meta>
 
 export const Playground: Story = {
   args: {
     tab: 0,
     tabs: data,
   },
-};
+}
 
 export const UncontrolledTabsBasic = () => {
-  const [tab, setTab] = useState(0);
+  const [tab, setTab] = useState(0)
   return (
     <div style={{ width: '480px', marginBottom: 30 }}>
       <UncontrolledTabs tab={tab} tabs={data} onTabChange={(evt, tab) => setTab(tab)} />
     </div>
-  );
-};
+  )
+}
 
-UncontrolledTabsBasic.storyName = 'Uncontrolled Tabs';
+UncontrolledTabsBasic.storyName = 'Uncontrolled Tabs'
 
 export const UncontrolledTabsInfo = () => {
-  const [tab, setTab] = useState(0);
+  const [tab, setTab] = useState(0)
   return (
     <div style={{ width: '480px', marginBottom: 30 }}>
-      <UncontrolledTabs info={<div>Informação dentro da tab</div>} tab={tab} tabs={data} onTabChange={(evt, tab) => setTab(tab)} />
+      <UncontrolledTabs
+        info={<div>Informação dentro da tab</div>}
+        tab={tab}
+        tabs={data}
+        onTabChange={(evt, tab) => setTab(tab)}
+      />
     </div>
-  );
-};
+  )
+}
 
-UncontrolledTabsInfo.storyName = 'Uncontrolled Tabs With  Info';
+UncontrolledTabsInfo.storyName = 'Uncontrolled Tabs With  Info'