norma-library 0.6.3 → 0.6.4

package/src/stories/RadioGroup.stories.tsx

@@ -1,87 +1,87 @@
-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',
-  component: RadioGroup,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-  argTypes: {},
-} satisfies Meta<typeof RadioGroup>;
-
-export default 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: {
-    color: 'primary',
-    options: genderOptions,
-    name: 'gender',
-    label: 'Gender',
-    checked: 'F',
-  },
-};
-
-export const RadioboxVertical = () => {
-  return (
-    <>
-      <RadioGroup name="gender" options={genderOptions} label="Gender" color="primary" checked="M" id="gender" />
-    </>
-  );
-};
-RadioboxVertical.storyName = 'RadioGroup Vertical';
-
-export const RadioHorizontal = () => {
-  return (
-    <>
-      <RadioGroup
-        name="gender"
-        options={genderOptions}
-        label="Gender"
-        color="primary"
-        checked="M"
-        id="gender"
-        direction="horizontal"
-      />
-    </>
-  );
-};
-RadioHorizontal.storyName = 'RadioGroup Horizontal';
-
-export const RadioSizes = () => {
-  return (
-    <>
-      <RadioGroup
-        name="size"
-        options={sizeOptions}
-        label="Sizes"
-        color="primary"
-        checked="M"
-        id="size"
-        direction="horizontal"
-      />
-    </>
-  );
-};
-RadioSizes.storyName = 'RadioGroup Sizes';
+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',
+  component: RadioGroup,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {},
+} satisfies Meta<typeof RadioGroup>;
+
+export default 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: {
+    color: 'primary',
+    options: genderOptions,
+    name: 'gender',
+    label: 'Gender',
+    checked: 'F',
+  },
+};
+
+export const RadioboxVertical = () => {
+  return (
+    <>
+      <RadioGroup name="gender" options={genderOptions} label="Gender" color="primary" checked="M" id="gender" />
+    </>
+  );
+};
+RadioboxVertical.storyName = 'RadioGroup Vertical';
+
+export const RadioHorizontal = () => {
+  return (
+    <>
+      <RadioGroup
+        name="gender"
+        options={genderOptions}
+        label="Gender"
+        color="primary"
+        checked="M"
+        id="gender"
+        direction="horizontal"
+      />
+    </>
+  );
+};
+RadioHorizontal.storyName = 'RadioGroup Horizontal';
+
+export const RadioSizes = () => {
+  return (
+    <>
+      <RadioGroup
+        name="size"
+        options={sizeOptions}
+        label="Sizes"
+        color="primary"
+        checked="M"
+        id="size"
+        direction="horizontal"
+      />
+    </>
+  );
+};
+RadioSizes.storyName = 'RadioGroup Sizes';

package/src/stories/RangerSlider.stories.tsx

@@ -1,149 +1,149 @@
-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 meta: Meta<typeof RangerSlider> = {
-  title: 'Display/RangerSlider',
-  component: RangerSlider,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    color: {
-      control: { type: 'select' },
-      options: colors,
-      description: 'Define a cor do slider.',
-    },
-    size: {
-      control: { type: 'select' },
-      options: sizes,
-      description: 'Define o tamanho do slider.',
-    },
-    min: {
-      control: { type: 'number' },
-      defaultValue: 0,
-      description: 'Define o valor mínimo do slider.',
-    },
-    max: {
-      control: { type: 'number' },
-      defaultValue: 100,
-      description: 'Define o valor máximo do slider.',
-    },
-    step: {
-      control: { type: 'number' },
-      defaultValue: 1,
-      description: 'Define o passo do slider.',
-    },
-    valueLabelDisplay: {
-      control: { type: 'select' },
-      options: ['on', 'auto', 'off'],
-      defaultValue: 'auto',
-      description: 'Controla a exibição dos rótulos de valor.',
-    },
-    valueLabelFormat: {
-      control: { type: 'function' },
-      description: 'Função para formatar o rótulo do valor.',
-    },
-    defaultValue: {
-      control: { type: 'number' },
-      defaultValue: 50,
-      description: 'Define o valor padrão do slider.',
-    },
-    onChange: {
-      action: 'changed',
-      description: 'Função callback que é disparada quando o valor do slider é alterado.',
-    },
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const RangerSliderBasic: Story = {
-  args: {
-    value: [20, 37],
-    valueLabelDisplay: 'on',
-    getAriaLabel: () => 'Faixa de temperatura',
-  },
-  argTypes: {
-    value: {
-      control: { type: 'array' },
-    },
-  },
-  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);
-    };
-
-    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: {
-    value: [0, 540],
-    valueLabelDisplay: 'auto',
-    getAriaLabel: () => 'Faixa de tempo',
-    valueLabelFormat: (value: number) => {
-      if (value < 60) {
-        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`;
-      } else {
-        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`;
-        } else if (minutes === 0) {
-          return `${hours}h ${seconds}s`;
-        } else if (seconds === 0) {
-          return `${hours}h ${minutes}min`;
-        } else {
-          return `${hours}h ${minutes}min ${seconds}s`;
-        }
-      }
-    },
-    min: 0,
-    max: 1000,
-  },
-  argTypes: {
-    value: {
-      control: { type: 'array' },
-    },
-  },
-  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);
-    };
-
-    return (
-      <div style={{ display: 'flex', gap: '1rem', width: '480px', marginBottom: 30 }}>
-        {/* <TextField size="small" variant='standard' /> */}
-        <RangerSlider {...args} value={value} onChange={handleChange} />
-        {/* <TextField size="small" variant='standard' /> */}
-      </div>
-    );
-  },
-  name: 'RangerSlider com Formatter',
-};
+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 meta: Meta<typeof RangerSlider> = {
+  title: 'Display/RangerSlider',
+  component: RangerSlider,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    color: {
+      control: { type: 'select' },
+      options: colors,
+      description: 'Define a cor do slider.',
+    },
+    size: {
+      control: { type: 'select' },
+      options: sizes,
+      description: 'Define o tamanho do slider.',
+    },
+    min: {
+      control: { type: 'number' },
+      defaultValue: 0,
+      description: 'Define o valor mínimo do slider.',
+    },
+    max: {
+      control: { type: 'number' },
+      defaultValue: 100,
+      description: 'Define o valor máximo do slider.',
+    },
+    step: {
+      control: { type: 'number' },
+      defaultValue: 1,
+      description: 'Define o passo do slider.',
+    },
+    valueLabelDisplay: {
+      control: { type: 'select' },
+      options: ['on', 'auto', 'off'],
+      defaultValue: 'auto',
+      description: 'Controla a exibição dos rótulos de valor.',
+    },
+    valueLabelFormat: {
+      control: { type: 'function' },
+      description: 'Função para formatar o rótulo do valor.',
+    },
+    defaultValue: {
+      control: { type: 'number' },
+      defaultValue: 50,
+      description: 'Define o valor padrão do slider.',
+    },
+    onChange: {
+      action: 'changed',
+      description: 'Função callback que é disparada quando o valor do slider é alterado.',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const RangerSliderBasic: Story = {
+  args: {
+    value: [20, 37],
+    valueLabelDisplay: 'on',
+    getAriaLabel: () => 'Faixa de temperatura',
+  },
+  argTypes: {
+    value: {
+      control: { type: 'array' },
+    },
+  },
+  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);
+    };
+
+    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: {
+    value: [0, 540],
+    valueLabelDisplay: 'auto',
+    getAriaLabel: () => 'Faixa de tempo',
+    valueLabelFormat: (value: number) => {
+      if (value < 60) {
+        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`;
+      } else {
+        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`;
+        } else if (minutes === 0) {
+          return `${hours}h ${seconds}s`;
+        } else if (seconds === 0) {
+          return `${hours}h ${minutes}min`;
+        } else {
+          return `${hours}h ${minutes}min ${seconds}s`;
+        }
+      }
+    },
+    min: 0,
+    max: 1000,
+  },
+  argTypes: {
+    value: {
+      control: { type: 'array' },
+    },
+  },
+  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);
+    };
+
+    return (
+      <div style={{ display: 'flex', gap: '1rem', width: '480px', marginBottom: 30 }}>
+        {/* <TextField size="small" variant='standard' /> */}
+        <RangerSlider {...args} value={value} onChange={handleChange} />
+        {/* <TextField size="small" variant='standard' /> */}
+      </div>
+    );
+  },
+  name: 'RangerSlider com Formatter',
+};

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';