norma-library 0.5.9 → 0.5.11

package/src/stories/Select.stories.tsx

@@ -1,100 +1,100 @@
-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';
-
-const sizes: TextFieldSizeVariant[] = ['small', 'medium'];
-
-const data: DataSelect[] = [
-  { label: 'Oliver Hansen', value: 'oliver-hansen' },
-  { label: 'Van Henry', value: 'van-henry' },
-  { label: 'April Tucker', value: 'april-tucker' },
-  { label: 'Ralph Hubbard', value: 'ralph-hubbard' },
-  { label: 'Omar Alexander', value: 'omar-alexander' },
-  { label: 'Carlos Abbott', value: 'carlos-abbott' },
-  { label: 'Miriam Wagner', value: 'miriam-wagner' },
-  { label: 'Bradley Wilkerson', value: 'bradley-wilkerson' },
-  { label: 'Virginia Andrews', value: 'virginia-andrews' },
-  { label: 'Kelly Snyder', value: 'kelly-snyder' },
-];
-
-const meta = {
-  title: 'Form/Select',
-  component: Select,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-  argTypes: {},
-} satisfies Meta<typeof Select>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const SelectBasic = () => {
-  const [value, setValue] = React.useState('');
-
-  const handleChange = (event: SelectChangeEvent) => {
-    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} />
-    </div>
-  );
-};
-
-SelectBasic.storyName = 'Select Basic';
-
-export const SelectVariants = () => {
-  const [value, setValue] = React.useState('');
-
-  const handleChange = (event: SelectChangeEvent) => {
-    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} />
-      </div>
-      <div style={{ width: '480px', marginBottom: 30 }}>
-        <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} />
-      </div>
-    </>
-  );
-};
-
-SelectVariants.storyName = 'Select Variantes';
-
-export const SelectMultiple = () => {
-  const [value, setValue] = React.useState<string[]>([]);
-
-  const handleChange = (event: SelectChangeEvent<typeof value>) => {
-    const {
-      target: { value },
-    } = event;
-    setValue(typeof value === 'string' ? value.split(',') : value);
-  };
-
-  return (
-    <div style={{ width: '480px', marginBottom: 30 }}>
-      <Select
-        id="select-demo"
-        value={value}
-        onChange={handleChange}
-        label="Members"
-        multiple={true}
-        data={data}
-        variant="standard"
-      />
-    </div>
-  );
-};
-
-SelectMultiple.storyName = 'Select Multiples';
+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';
+
+const sizes: TextFieldSizeVariant[] = ['small', 'medium'];
+
+const data: DataSelect[] = [
+  { label: 'Oliver Hansen', value: 'oliver-hansen' },
+  { label: 'Van Henry', value: 'van-henry' },
+  { label: 'April Tucker', value: 'april-tucker' },
+  { label: 'Ralph Hubbard', value: 'ralph-hubbard' },
+  { label: 'Omar Alexander', value: 'omar-alexander' },
+  { label: 'Carlos Abbott', value: 'carlos-abbott' },
+  { label: 'Miriam Wagner', value: 'miriam-wagner' },
+  { label: 'Bradley Wilkerson', value: 'bradley-wilkerson' },
+  { label: 'Virginia Andrews', value: 'virginia-andrews' },
+  { label: 'Kelly Snyder', value: 'kelly-snyder' },
+];
+
+const meta = {
+  title: 'Form/Select',
+  component: Select,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {},
+} satisfies Meta<typeof Select>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const SelectBasic = () => {
+  const [value, setValue] = React.useState('');
+
+  const handleChange = (event: SelectChangeEvent) => {
+    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} />
+    </div>
+  );
+};
+
+SelectBasic.storyName = 'Select Basic';
+
+export const SelectVariants = () => {
+  const [value, setValue] = React.useState('');
+
+  const handleChange = (event: SelectChangeEvent) => {
+    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} />
+      </div>
+      <div style={{ width: '480px', marginBottom: 30 }}>
+        <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} />
+      </div>
+    </>
+  );
+};
+
+SelectVariants.storyName = 'Select Variantes';
+
+export const SelectMultiple = () => {
+  const [value, setValue] = React.useState<string[]>([]);
+
+  const handleChange = (event: SelectChangeEvent<typeof value>) => {
+    const {
+      target: { value },
+    } = event;
+    setValue(typeof value === 'string' ? value.split(',') : value);
+  };
+
+  return (
+    <div style={{ width: '480px', marginBottom: 30 }}>
+      <Select
+        id="select-demo"
+        value={value}
+        onChange={handleChange}
+        label="Members"
+        multiple={true}
+        data={data}
+        variant="standard"
+      />
+    </div>
+  );
+};
+
+SelectMultiple.storyName = 'Select Multiples';

package/src/stories/SelectInput.stories.tsx

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