norma-library 0.6.85 → 0.6.87

package/src/stories/ProgressBar.stories.tsx

@@ -1,9 +1,17 @@
-import React from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-import { ProgressBar } from '../components';
-import { ColorVariant } from '../types';
+import React from 'react'
+import type { Meta, StoryObj } from '@storybook/react'
+import { ProgressBar } from '../components'
+import { ColorVariant } from '../types'
 
-const colors: ColorVariant[] = ['inherit', 'primary', 'secondary', 'success', 'error', 'info', 'warning'];
+const colors: ColorVariant[] = [
+  'inherit',
+  'primary',
+  'secondary',
+  'success',
+  'error',
+  'info',
+  'warning',
+]
 
 const meta = {
   title: 'Display/ProgressBar',
@@ -13,15 +21,15 @@ const meta = {
   },
   tags: ['autodocs'],
   argTypes: {},
-} satisfies Meta<typeof ProgressBar>;
+} satisfies Meta<typeof ProgressBar>
 
-export default meta;
+export default meta
 
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof meta>
 
 const defaultArgs = {
   disabled: false,
-};
+}
 
 export const Playground: Story = {
   args: {
@@ -30,7 +38,7 @@ export const Playground: Story = {
     color: 'primary',
     value: 10,
   },
-};
+}
 
 export const ProgressBarBasic = () => (
   <div style={{ display: 'flex', gap: '1rem', width: '320px' }}>
@@ -38,9 +46,9 @@ export const ProgressBarBasic = () => (
       <ProgressBar value={40} total={100} color="primary" />
     </div>
   </div>
-);
+)
 
-ProgressBarBasic.storyName = 'ProgressBar Basic';
+ProgressBarBasic.storyName = 'ProgressBar Basic'
 
 export const ProgressBarTitle: Story = () => (
   <div style={{ display: 'flex', gap: '1rem', width: '320px' }}>
@@ -48,9 +56,9 @@ export const ProgressBarTitle: Story = () => (
       <ProgressBar value={10} label="Progress" total={100} />
     </div>
   </div>
-);
+)
 
-ProgressBarTitle.storyName = 'ProgressBar With Title';
+ProgressBarTitle.storyName = 'ProgressBar With Title'
 
 export const ProgressBarColors: Story = () => (
   <>
@@ -81,9 +89,9 @@ export const ProgressBarColors: Story = () => (
       </div>
     </div>
   </>
-);
+)
 
-ProgressBarColors.storyName = 'ProgressBar Colors';
+ProgressBarColors.storyName = 'ProgressBar Colors'
 
 export const ProgressBarCustomColors: Story = () => (
   <>
@@ -106,11 +114,11 @@ export const ProgressBarCustomColors: Story = () => (
           label="Custom Color Blue"
           h={5}
           hideValue
-          fSize='12px'
+          fSize="12px"
         />
       </div>
     </div>
   </>
-);
+)
 
-ProgressBarCustomColors.storyName = 'ProgressBar Custom Colors';
+ProgressBarCustomColors.storyName = 'ProgressBar Custom Colors'

package/src/stories/RadioGroup.stories.tsx

@@ -1,7 +1,7 @@
-import React from 'react';
-import { RadioGroup } from '../components/RadioGroup';
-import type { Meta, StoryObj } from '@storybook/react';
-import { SizeVariant } from '../types';
+import React from 'react'
+import { RadioGroup } from '../components/RadioGroup'
+import type { Meta, StoryObj } from '@storybook/react'
+import { SizeVariant } from '../types'
 
 const meta = {
   title: 'Form/RadioGroup',
@@ -11,27 +11,27 @@ const meta = {
   },
   tags: ['autodocs'],
   argTypes: {},
-} satisfies Meta<typeof RadioGroup>;
+} satisfies Meta<typeof RadioGroup>
 
-export default meta;
+export default meta
 
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof meta>
 
 const defaultArgs = {
   disabled: false,
-};
+}
 
 const sizeOptions = [
   { label: 'Small', value: 'S', size: 'small' },
   { label: 'Medium', value: 'M', size: 'medium' },
   { label: 'Large', value: 'L', size: 'large' },
-];
+]
 
 const genderOptions = [
   { label: 'Male', value: 'M' },
   { label: 'Female', value: 'F' },
   { label: 'Other', value: 'O' },
-];
+]
 
 export const Playground: Story = {
   args: {
@@ -41,16 +41,23 @@ export const Playground: Story = {
     label: 'Gender',
     checked: 'F',
   },
-};
+}
 
 export const RadioboxVertical = () => {
   return (
     <>
-      <RadioGroup name="gender" options={genderOptions} label="Gender" color="primary" checked="M" id="gender" />
+      <RadioGroup
+        name="gender"
+        options={genderOptions}
+        label="Gender"
+        color="primary"
+        checked="M"
+        id="gender"
+      />
     </>
-  );
-};
-RadioboxVertical.storyName = 'RadioGroup Vertical';
+  )
+}
+RadioboxVertical.storyName = 'RadioGroup Vertical'
 
 export const RadioHorizontal = () => {
   return (
@@ -65,9 +72,9 @@ export const RadioHorizontal = () => {
         direction="horizontal"
       />
     </>
-  );
-};
-RadioHorizontal.storyName = 'RadioGroup Horizontal';
+  )
+}
+RadioHorizontal.storyName = 'RadioGroup Horizontal'
 
 export const RadioSizes = () => {
   return (
@@ -82,6 +89,6 @@ export const RadioSizes = () => {
         direction="horizontal"
       />
     </>
-  );
-};
-RadioSizes.storyName = 'RadioGroup Sizes';
+  )
+}
+RadioSizes.storyName = 'RadioGroup Sizes'

package/src/stories/RangerSlider.stories.tsx

@@ -1,11 +1,19 @@
-import React from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-import { RangerSlider } from '../components';
-import { ColorVariant, TextFieldSizeVariant } from '../types';
-import { TextField } from '@mui/material';
+import React from 'react'
+import type { Meta, StoryObj } from '@storybook/react'
+import { RangerSlider } from '../components'
+import { ColorVariant, TextFieldSizeVariant } from '../types'
+import { TextField } from '@mui/material'
 
-const colors: ColorVariant[] = ['inherit', 'primary', 'secondary', 'success', 'error', 'info', 'warning'];
-const sizes: TextFieldSizeVariant[] = ['small', 'medium'];
+const colors: ColorVariant[] = [
+  'inherit',
+  'primary',
+  'secondary',
+  'success',
+  'error',
+  'info',
+  'warning',
+]
+const sizes: TextFieldSizeVariant[] = ['small', 'medium']
 
 const meta: Meta<typeof RangerSlider> = {
   title: 'Display/RangerSlider',
@@ -60,11 +68,11 @@ const meta: Meta<typeof RangerSlider> = {
       description: 'Função callback que é disparada quando o valor do slider é alterado.',
     },
   },
-};
+}
 
-export default meta;
+export default meta
 
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof meta>
 
 export const RangerSliderBasic: Story = {
   args: {
@@ -79,22 +87,22 @@ export const RangerSliderBasic: Story = {
       control: { type: 'array' },
     },
   },
-  render: args => {
-    const [value, setValue] = React.useState<number[]>(args.value);
+  render: (args) => {
+    const [value, setValue] = React.useState<number[]>(args.value)
 
     const handleChange = (event: Event, newValue: number | number[]) => {
-      setValue(newValue as number[]);
-      args.onChange?.(event, newValue, 0);
-    };
+      setValue(newValue as number[])
+      args.onChange?.(event, newValue, 0)
+    }
 
     return (
       <div style={{ display: 'flex', gap: '1rem', width: '480px', marginBottom: 30 }}>
         <RangerSlider {...args} value={value} onChange={handleChange} />
       </div>
-    );
+    )
   },
   name: 'RangerSlider Básico',
-};
+}
 
 export const RangerSliderFormatter: Story = {
   args: {
@@ -104,23 +112,23 @@ export const RangerSliderFormatter: Story = {
     showValueInline: true,
     valueLabelFormat: (value: number) => {
       if (value < 60) {
-        return `${value}s`;
+        return `${value}s`
       } else if (value < 3600) {
-        const minutes = Math.floor(value / 60);
-        const seconds = value % 60;
-        return seconds === 0 ? `${minutes}min` : `${minutes}min ${seconds}s`;
+        const minutes = Math.floor(value / 60)
+        const seconds = value % 60
+        return seconds === 0 ? `${minutes}min` : `${minutes}min ${seconds}s`
       } else {
-        const hours = Math.floor(value / 3600);
-        const minutes = Math.floor((value % 3600) / 60);
-        const seconds = value % 60;
+        const hours = Math.floor(value / 3600)
+        const minutes = Math.floor((value % 3600) / 60)
+        const seconds = value % 60
         if (minutes === 0 && seconds === 0) {
-          return `${hours}h`;
+          return `${hours}h`
         } else if (minutes === 0) {
-          return `${hours}h ${seconds}s`;
+          return `${hours}h ${seconds}s`
         } else if (seconds === 0) {
-          return `${hours}h ${minutes}min`;
+          return `${hours}h ${minutes}min`
         } else {
-          return `${hours}h ${minutes}min ${seconds}s`;
+          return `${hours}h ${minutes}min ${seconds}s`
         }
       }
     },
@@ -133,13 +141,13 @@ export const RangerSliderFormatter: Story = {
       control: { type: 'array' },
     },
   },
-  render: args => {
-    const [value, setValue] = React.useState<number[]>(args.value);
+  render: (args) => {
+    const [value, setValue] = React.useState<number[]>(args.value)
 
     const handleChange = (event: Event, newValue: number | number[]) => {
-      setValue(newValue as number[]);
-      args.onChange?.(event, newValue, 0);
-    };
+      setValue(newValue as number[])
+      args.onChange?.(event, newValue, 0)
+    }
 
     return (
       <div style={{ display: 'flex', gap: '1rem', width: '480px', marginBottom: 30 }}>
@@ -147,7 +155,7 @@ export const RangerSliderFormatter: Story = {
         <RangerSlider {...args} value={value} onChange={handleChange} />
         {/* <TextField size="small" variant='standard' /> */}
       </div>
-    );
+    )
   },
   name: 'RangerSlider com Formatter',
-};
+}

package/src/stories/Select.stories.tsx

@@ -1,11 +1,11 @@
-import React from 'react';
+import React from 'react'
 
-import type { Meta, StoryObj } from '@storybook/react';
-import { Select } from '../components';
-import { DataSelect, TextFieldSizeVariant } from '../types';
-import { SelectChangeEvent } from '@mui/material';
+import type { Meta, StoryObj } from '@storybook/react'
+import { Select } from '../components'
+import { DataSelect, TextFieldSizeVariant } from '../types'
+import { SelectChangeEvent } from '@mui/material'
 
-const sizes: TextFieldSizeVariant[] = ['small', 'medium'];
+const sizes: TextFieldSizeVariant[] = ['small', 'medium']
 
 const data: DataSelect[] = [
   { label: 'Oliver Hansen', value: 'oliver-hansen' },
@@ -18,7 +18,7 @@ const data: DataSelect[] = [
   { label: 'Bradley Wilkerson', value: 'bradley-wilkerson' },
   { label: 'Virginia Andrews', value: 'virginia-andrews' },
   { label: 'Kelly Snyder', value: 'kelly-snyder' },
-];
+]
 
 const meta = {
   title: 'Form/Select',
@@ -28,59 +28,87 @@ const meta = {
   },
   tags: ['autodocs'],
   argTypes: {},
-} satisfies Meta<typeof Select>;
+} satisfies Meta<typeof Select>
 
-export default meta;
+export default meta
 
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof meta>
 
 export const SelectBasic = () => {
-  const [value, setValue] = React.useState('');
+  const [value, setValue] = React.useState('')
 
   const handleChange = (event: SelectChangeEvent) => {
-    setValue(event.target.value as string);
-  };
+    setValue(event.target.value as string)
+  }
   return (
     <div style={{ width: '480px', marginBottom: 30 }}>
-      <Select id="select-demo" value={value} onChange={handleChange} label="Members" variant="standard" data={data} />
+      <Select
+        id="select-demo"
+        value={value}
+        onChange={handleChange}
+        label="Members"
+        variant="standard"
+        data={data}
+      />
     </div>
-  );
-};
+  )
+}
 
-SelectBasic.storyName = 'Select Basic';
+SelectBasic.storyName = 'Select Basic'
 
 export const SelectVariants = () => {
-  const [value, setValue] = React.useState('');
+  const [value, setValue] = React.useState('')
 
   const handleChange = (event: SelectChangeEvent) => {
-    setValue(event.target.value as string);
-  };
+    setValue(event.target.value as string)
+  }
   return (
     <>
       <div style={{ width: '480px', marginBottom: 30 }}>
-        <Select id="select-demo" value={value} onChange={handleChange} label="Members" variant="standard" data={data} />
+        <Select
+          id="select-demo"
+          value={value}
+          onChange={handleChange}
+          label="Members"
+          variant="standard"
+          data={data}
+        />
       </div>
       <div style={{ width: '480px', marginBottom: 30 }}>
-        <Select id="select-demo" value={value} onChange={handleChange} label="Members" variant="filled" data={data} />
+        <Select
+          id="select-demo"
+          value={value}
+          onChange={handleChange}
+          label="Members"
+          variant="filled"
+          data={data}
+        />
       </div>
       <div style={{ width: '480px', marginBottom: 30 }}>
-        <Select id="select-demo" value={value} onChange={handleChange} label="Members" variant="outlined" data={data} />
+        <Select
+          id="select-demo"
+          value={value}
+          onChange={handleChange}
+          label="Members"
+          variant="outlined"
+          data={data}
+        />
       </div>
     </>
-  );
-};
+  )
+}
 
-SelectVariants.storyName = 'Select Variantes';
+SelectVariants.storyName = 'Select Variantes'
 
 export const SelectMultiple = () => {
-  const [value, setValue] = React.useState<string[]>([]);
+  const [value, setValue] = React.useState<string[]>([])
 
   const handleChange = (event: SelectChangeEvent<typeof value>) => {
     const {
       target: { value },
-    } = event;
-    setValue(typeof value === 'string' ? value.split(',') : value);
-  };
+    } = event
+    setValue(typeof value === 'string' ? value.split(',') : value)
+  }
 
   return (
     <div style={{ width: '480px', marginBottom: 30 }}>
@@ -94,7 +122,7 @@ export const SelectMultiple = () => {
         variant="standard"
       />
     </div>
-  );
-};
+  )
+}
 
-SelectMultiple.storyName = 'Select Multiples';
+SelectMultiple.storyName = 'Select Multiples'

package/src/stories/SelectInput.stories.tsx

@@ -1,5 +1,5 @@
-import React, { useState } from 'react';
-import SelectInput from '../components/SelectInput';
+import React, { useState } from 'react'
+import SelectInput from '../components/SelectInput'
 
 export default {
   title: 'Form/SelectInput',
@@ -8,72 +8,74 @@ export default {
   parameters: {
     layout: 'centered',
   },
-  argTypes: { 
+  argTypes: {
     className: {
       description: 'Adicione uma classe.',
     },
     label: {
-      description: 'Adicione uma label.'
+      description: 'Adicione uma label.',
     },
     onChange: {
-      description: 'Função para capturar o valor quando alterado.'
+      description: 'Função para capturar o valor quando alterado.',
     },
     placeholder: {
-      description: 'Adicione um placeholder.'
+      description: 'Adicione um placeholder.',
     },
     options: {
-      description: 'Lista de valores a ser exibido.'
+      description: 'Lista de valores a ser exibido.',
     },
     value: {
-      description: 'Valor selecionado.'
+      description: 'Valor selecionado.',
     },
     isSearchable: {
-      description: 'Habilita a função de buscar um valor.'
+      description: 'Habilita a função de buscar um valor.',
     },
     isClearable: {
-      description: 'Habilita a função de limpar o item selecionado.'
+      description: 'Habilita a função de limpar o item selecionado.',
     },
     disabled: {
-      description: 'Habilita ou desabilita.'
-    }
-  }
+      description: 'Habilita ou desabilita.',
+    },
+  },
 }
 
 export const Default = (args) => {
   const options = [
     {
       label: 'options 1',
-      value: 'value 1'
+      value: 'value 1',
     },
     {
       label: 'options 2',
-      value: 'value 2'
+      value: 'value 2',
     },
     {
       label: 'options 3',
-      value: 'value 3'
-    }
+      value: 'value 3',
+    },
   ]
   const [selectedValue, setSelectedValue] = useState<any>(options[0])
   return (
-    <div style={{
-      width: 300
-    }}>
-      <SelectInput 
+    <div
+      style={{
+        width: 300,
+      }}
+    >
+      <SelectInput
         options={options}
         value={selectedValue}
-        onChange={(value) => setSelectedValue(value)} 
-        {...args} 
+        onChange={(value) => setSelectedValue(value)}
+        {...args}
       />
     </div>
   )
 }
 
-Default.args = { 
+Default.args = {
   className: '',
   label: 'Selecione:',
   placeholder: 'Selecione uma opção',
   disabled: false,
   isSearchable: false,
   isClearable: false,
-}
+}

package/src/stories/ServiceCard.stories.tsx

@@ -1,20 +1,48 @@
-import { Meta } from "@storybook/react";
-import {ServiceCard} from "../components/ServiceCard/ServiceCard";
-import React from "react";
+import { Meta } from '@storybook/react'
+import { ServiceCard } from '../components/ServiceCard/ServiceCard'
+import React from 'react'
+import { Home } from '@mui/icons-material'
 
 const meta = {
-    title: 'Layout/ServiceCard',
-    component: ServiceCard,
-    parameters: {
-      layout: 'centered',
-    },
-    tags: ['autodocs'],
-    argTypes: {},
-  } satisfies Meta<typeof ServiceCard>;
+  title: 'Layout/ServiceCard',
+  component: ServiceCard,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {},
+} satisfies Meta<typeof ServiceCard>
 
-export default meta;
+export default meta
 
-export const BasicServiceCard = () => <ServiceCard title="Financeiro e Jurídico" description="Dados financeiros e legais sobre seus produtos." iconName="ic:baseline-account-balance" iconColor="#247010" color="#F3FCEA"/>;
-BasicServiceCard.storyName = 'Basic Service Card';
+export const BasicServiceCard = () => (
+  <ServiceCard
+    title="Financeiro e Jurídico"
+    description="Dados financeiros e legais sobre seus produtos."
+    icon={{
+      iconName: Home,
+      bgColor: '#F6F07F',
+      iconColor: '#B16E4B',
+      scale: 'medium',
+      iconWidth: '36px',
+      iconHeight: '36px',
+    }}
+  />
+)
+BasicServiceCard.storyName = 'Basic Service Card'
 
-export const DisabledServiceCard = () => <ServiceCard title="Suporte" description="Suporte técnico para seus produtos." iconColor="#6a491d" iconName="ic:baseline-add-photo-alternate" color="#FDF6E3" disabled/>;
+export const DisabledServiceCard = () => (
+  <ServiceCard
+    title="Financeiro e Jurídico"
+    description="Dados financeiros e legais sobre seus produtos."
+    icon={{
+      iconName: 'olosFinancial',
+      bgColor: '#F6F07F',
+      iconColor: '#B16E4B',
+      scale: 'medium',
+      iconWidth: '36px',
+      iconHeight: '36px',
+    }}
+    disabled
+  />
+)