norma-library 0.6.64 → 0.6.66
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.babelrc.json +18 -18
- package/.prettierignore +10 -10
- package/.prettierrc.json +20 -20
- package/.storybook/main.ts +20 -20
- package/.storybook/preview.ts +15 -15
- package/README.md +43 -43
- package/commitlint.config.js +1 -1
- package/dist/esm/components/Card.js +3 -3
- package/dist/esm/components/Card.js.map +1 -1
- package/dist/esm/helpers/colors.js +6 -0
- package/dist/esm/helpers/colors.js.map +1 -1
- package/docs/index.md +118 -118
- package/package.json +136 -136
- package/src/components/Accordion.tsx +39 -39
- package/src/components/Avatar.tsx +17 -17
- package/src/components/Badge.tsx +14 -14
- package/src/components/Box/index.tsx +12 -12
- package/src/components/Box/interfaces.ts +3 -3
- package/src/components/Box/styles.tsx +22 -22
- package/src/components/Breadcrumb/index.tsx +27 -27
- package/src/components/Breadcrumb/interface.ts +8 -8
- package/src/components/Breadcrumb/styles.tsx +32 -32
- package/src/components/Button.tsx +26 -26
- package/src/components/Card.tsx +38 -38
- package/src/components/ChatMessage.tsx +87 -87
- package/src/components/ChatMessageBalloon/ChatMessageBalloon.style.ts +56 -56
- package/src/components/ChatMessageBalloon/ChatMessageBalloon.tsx +55 -55
- package/src/components/CheckBox.tsx +21 -21
- package/src/components/DateInput/index.tsx +34 -34
- package/src/components/DateInput/interface.ts +13 -13
- package/src/components/DateInput/styles.tsx +27 -27
- package/src/components/DatePicker.tsx +67 -67
- package/src/components/DropDown.tsx +24 -24
- package/src/components/IconButton.tsx +37 -37
- package/src/components/Icons.tsx +82 -82
- package/src/components/Modal.tsx +103 -103
- package/src/components/MultiSelectInput/components/MultiValue/index.tsx +44 -44
- package/src/components/MultiSelectInput/components/Option/index.tsx +62 -62
- package/src/components/MultiSelectInput/components/Option/styles.tsx +8 -8
- package/src/components/MultiSelectInput/index.tsx +60 -60
- package/src/components/MultiSelectInput/interfaces.ts +15 -15
- package/src/components/MultiSelectInput/styles.tsx +43 -43
- package/src/components/Paper.tsx +12 -12
- package/src/components/ProgressBar.tsx +71 -71
- package/src/components/RadioGroup.tsx +43 -43
- package/src/components/RangerSlider.tsx +65 -65
- package/src/components/Select.tsx +74 -74
- package/src/components/SelectInput/components/Option/index.tsx +61 -61
- package/src/components/SelectInput/components/Option/styles.tsx +8 -8
- package/src/components/SelectInput/index.tsx +45 -45
- package/src/components/SelectInput/interfaces.ts +15 -15
- package/src/components/SelectInput/styles.tsx +31 -31
- package/src/components/StatusModal/StatusModal.style.tsx +75 -75
- package/src/components/StatusModal/StatusModal.tsx +58 -58
- package/src/components/Svgs.tsx +506 -506
- package/src/components/Table/components/header/index.tsx +86 -86
- package/src/components/Table/components/header/styles.tsx +59 -59
- package/src/components/Table/components/index.tsx +8 -8
- package/src/components/Table/components/pagination/index.tsx +39 -39
- package/src/components/Table/components/pagination/styles.tsx +28 -28
- package/src/components/Table/components/tbody/index.tsx +30 -30
- package/src/components/Table/components/tbody/styles.tsx +4 -4
- package/src/components/Table/index.tsx +317 -317
- package/src/components/Table/interface.ts +23 -23
- package/src/components/Table/styles.tsx +117 -117
- package/src/components/Tabs.tsx +105 -105
- package/src/components/Tag.tsx +33 -33
- package/src/components/TextField.tsx +19 -19
- package/src/components/TextInput/index.tsx +37 -37
- package/src/components/TextInput/interface.ts +9 -9
- package/src/components/TextInput/styles.tsx +23 -23
- package/src/components/TimeLine.tsx +89 -89
- package/src/components/TimePicker.tsx +78 -78
- package/src/components/Typography/Text/index.tsx +20 -20
- package/src/components/Typography/Text/interfaces.ts +5 -5
- package/src/components/Typography/Text/styles.tsx +40 -40
- package/src/components/Typography/Title/index.tsx +22 -22
- package/src/components/Typography/Title/interfaces.ts +6 -6
- package/src/components/Typography/Title/styles.tsx +40 -40
- package/src/components/Typography/index.tsx +6 -6
- package/src/components/UncontrolledTable/components/header/index.tsx +72 -72
- package/src/components/UncontrolledTable/components/header/styles.tsx +66 -66
- package/src/components/UncontrolledTable/components/index.tsx +8 -8
- package/src/components/UncontrolledTable/components/pagination/index.tsx +43 -43
- package/src/components/UncontrolledTable/components/pagination/styles.tsx +28 -28
- package/src/components/UncontrolledTable/components/tbody/index.tsx +33 -33
- package/src/components/UncontrolledTable/components/tbody/styles.tsx +32 -32
- package/src/components/UncontrolledTable/index.tsx +223 -223
- package/src/components/UncontrolledTable/interface.ts +46 -46
- package/src/components/UncontrolledTable/styles.tsx +123 -123
- package/src/components/UncontrolledTabs/UncontrolledTabs.style.tsx +58 -58
- package/src/components/UncontrolledTabs/UncontrolledTabs.tsx +71 -71
- package/src/components/UncontrolledTabs/UncontrolledTabsInfo.style.ts +8 -8
- package/src/components/index.ts +24 -24
- package/src/helpers/alignments.ts +14 -14
- package/src/helpers/borders.ts +18 -18
- package/src/helpers/colors.ts +264 -258
- package/src/helpers/index.ts +5 -5
- package/src/helpers/radios.ts +24 -24
- package/src/helpers/sizes.ts +72 -72
- package/src/hooks/useClickOutside.tsx +18 -18
- package/src/index.ts +70 -70
- package/src/interfaces/Accordion.ts +12 -12
- package/src/interfaces/Avatar.tsx +15 -15
- package/src/interfaces/Badge.ts +19 -19
- package/src/interfaces/Button.ts +19 -19
- package/src/interfaces/Card.ts +11 -11
- package/src/interfaces/ChatMessage.ts +12 -12
- package/src/interfaces/ChatMessageBalloon.ts +17 -17
- package/src/interfaces/CheckBox.ts +27 -27
- package/src/interfaces/DatePicker.ts +13 -13
- package/src/interfaces/DropDown.ts +14 -14
- package/src/interfaces/IconButton.ts +22 -22
- package/src/interfaces/Icons.ts +17 -17
- package/src/interfaces/Modal.ts +18 -18
- package/src/interfaces/Paper.ts +12 -12
- package/src/interfaces/ProgressBar.ts +29 -29
- package/src/interfaces/RadioGroup.ts +23 -23
- package/src/interfaces/RangerSlider.ts +21 -21
- package/src/interfaces/Select.ts +17 -17
- package/src/interfaces/Tabs.ts +19 -19
- package/src/interfaces/Tag.ts +17 -17
- package/src/interfaces/TextField.ts +44 -44
- package/src/interfaces/TimeLine.ts +11 -11
- package/src/interfaces/TimePicker.ts +13 -13
- package/src/interfaces/index.ts +23 -23
- package/src/providers/NormaProvider.tsx +13 -13
- package/src/sample-data-2.json +178 -178
- package/src/sample-data.json +177 -177
- package/src/stories/Accordion.stories.tsx +65 -65
- package/src/stories/Avatar.stories.tsx +123 -123
- package/src/stories/Badge.stories.tsx +39 -39
- package/src/stories/Box.stories.tsx +35 -35
- package/src/stories/Breadcrumb.stories.tsx +44 -44
- package/src/stories/Button.stories.tsx +93 -93
- package/src/stories/Card.stories.tsx +39 -39
- package/src/stories/ChatMessage.stories.tsx +84 -84
- package/src/stories/ChatMessageBalloon.stories.tsx +108 -108
- package/src/stories/CheckBox.stories.tsx +88 -88
- package/src/stories/DateInput.stories.tsx +51 -51
- package/src/stories/DatePicker.stories.tsx +50 -50
- package/src/stories/DropDown.stories.tsx +57 -57
- package/src/stories/IconButton.stories.tsx +78 -78
- package/src/stories/Modal.stories.tsx +246 -246
- package/src/stories/ModalStatus.stories.tsx +46 -46
- package/src/stories/MultiSelectInput.stories.tsx +90 -90
- package/src/stories/Paper.stories.tsx +53 -53
- package/src/stories/ProgressBar.stories.tsx +116 -116
- package/src/stories/RadioGroup.stories.tsx +87 -87
- package/src/stories/RangerSlider.stories.tsx +149 -149
- package/src/stories/Select.stories.tsx +100 -100
- package/src/stories/SelectInput.stories.tsx +78 -78
- package/src/stories/Table.stories.tsx +372 -372
- package/src/stories/Tabs.stories.tsx +61 -61
- package/src/stories/Tag.stories.tsx +56 -56
- package/src/stories/Text.stories.tsx +37 -37
- package/src/stories/TextField.stories.tsx +310 -310
- package/src/stories/TextInput.stories.tsx +52 -52
- package/src/stories/TimeLine.stories.tsx +35 -35
- package/src/stories/TimePicker.stories.tsx +87 -87
- package/src/stories/Title.stories.tsx +43 -43
- package/src/stories/UncontrolledTable.stories.tsx +315 -315
- package/src/stories/UncontrolledTabs.stories.tsx +74 -74
- package/src/styles/globals.scss +17 -17
- package/src/types/index.ts +207 -207
- package/src/utils/styledBreakpoints.ts +25 -25
- package/vite.config.ts +15 -15
|
@@ -1,53 +1,53 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import TextInput from '../components/TextInput';
|
|
3
|
-
|
|
4
|
-
export default {
|
|
5
|
-
title: 'Form/TextInput',
|
|
6
|
-
component: TextInput,
|
|
7
|
-
tags: ['autodocs'],
|
|
8
|
-
parameters: {
|
|
9
|
-
layout: 'centered',
|
|
10
|
-
},
|
|
11
|
-
argTypes: {
|
|
12
|
-
className: {
|
|
13
|
-
description: 'Adicione uma classe.',
|
|
14
|
-
},
|
|
15
|
-
label: {
|
|
16
|
-
description: 'Adicione uma label.'
|
|
17
|
-
},
|
|
18
|
-
value: {
|
|
19
|
-
description: 'Adicione um valor.'
|
|
20
|
-
},
|
|
21
|
-
onChange: {
|
|
22
|
-
description: 'Função para capturar o valor quando alterado.'
|
|
23
|
-
},
|
|
24
|
-
disabled: {
|
|
25
|
-
description: 'Habilita ou desabilita.'
|
|
26
|
-
},
|
|
27
|
-
placeholder: {
|
|
28
|
-
description: 'Adicione um placeholder.'
|
|
29
|
-
},
|
|
30
|
-
name: {
|
|
31
|
-
description: 'Adiciona um name'
|
|
32
|
-
},
|
|
33
|
-
type: {
|
|
34
|
-
description: 'Adiciona um type',
|
|
35
|
-
options: ['text', 'password'],
|
|
36
|
-
control: { type: 'radio' }
|
|
37
|
-
}
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
export const Default = (args) => <TextInput {...args} />
|
|
43
|
-
|
|
44
|
-
Default.args = {
|
|
45
|
-
className: '',
|
|
46
|
-
label: 'Data:',
|
|
47
|
-
onChange: '',
|
|
48
|
-
disabled: false,
|
|
49
|
-
value: 'Valor do input',
|
|
50
|
-
placeholder: 'Digite algo...',
|
|
51
|
-
name: '',
|
|
52
|
-
type: ''
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import TextInput from '../components/TextInput';
|
|
3
|
+
|
|
4
|
+
export default {
|
|
5
|
+
title: 'Form/TextInput',
|
|
6
|
+
component: TextInput,
|
|
7
|
+
tags: ['autodocs'],
|
|
8
|
+
parameters: {
|
|
9
|
+
layout: 'centered',
|
|
10
|
+
},
|
|
11
|
+
argTypes: {
|
|
12
|
+
className: {
|
|
13
|
+
description: 'Adicione uma classe.',
|
|
14
|
+
},
|
|
15
|
+
label: {
|
|
16
|
+
description: 'Adicione uma label.'
|
|
17
|
+
},
|
|
18
|
+
value: {
|
|
19
|
+
description: 'Adicione um valor.'
|
|
20
|
+
},
|
|
21
|
+
onChange: {
|
|
22
|
+
description: 'Função para capturar o valor quando alterado.'
|
|
23
|
+
},
|
|
24
|
+
disabled: {
|
|
25
|
+
description: 'Habilita ou desabilita.'
|
|
26
|
+
},
|
|
27
|
+
placeholder: {
|
|
28
|
+
description: 'Adicione um placeholder.'
|
|
29
|
+
},
|
|
30
|
+
name: {
|
|
31
|
+
description: 'Adiciona um name'
|
|
32
|
+
},
|
|
33
|
+
type: {
|
|
34
|
+
description: 'Adiciona um type',
|
|
35
|
+
options: ['text', 'password'],
|
|
36
|
+
control: { type: 'radio' }
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
export const Default = (args) => <TextInput {...args} />
|
|
43
|
+
|
|
44
|
+
Default.args = {
|
|
45
|
+
className: '',
|
|
46
|
+
label: 'Data:',
|
|
47
|
+
onChange: '',
|
|
48
|
+
disabled: false,
|
|
49
|
+
value: 'Valor do input',
|
|
50
|
+
placeholder: 'Digite algo...',
|
|
51
|
+
name: '',
|
|
52
|
+
type: ''
|
|
53
53
|
}
|
|
@@ -1,35 +1,35 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
|
|
3
|
-
import type { Meta } from '@storybook/react';
|
|
4
|
-
import { TimeLine } from '../components';
|
|
5
|
-
import { Stack } from '@mui/material';
|
|
6
|
-
|
|
7
|
-
const meta = {
|
|
8
|
-
title: 'Display/TimeLine',
|
|
9
|
-
component: TimeLine,
|
|
10
|
-
parameters: {
|
|
11
|
-
layout: 'centered',
|
|
12
|
-
},
|
|
13
|
-
tags: ['autodocs'],
|
|
14
|
-
argTypes: {},
|
|
15
|
-
} satisfies Meta<typeof TimeLine>;
|
|
16
|
-
|
|
17
|
-
export default meta;
|
|
18
|
-
|
|
19
|
-
export const TimeLineBasic = () => {
|
|
20
|
-
return (
|
|
21
|
-
<>
|
|
22
|
-
<TimeLine />
|
|
23
|
-
</>
|
|
24
|
-
);
|
|
25
|
-
};
|
|
26
|
-
|
|
27
|
-
export const TimeLineColors = () => {
|
|
28
|
-
return (
|
|
29
|
-
<Stack direction="row" spacing={2}>
|
|
30
|
-
{['primary', 'secondary', 'inherit', 'error', 'info', 'success', 'warning'].map((color, key) => (
|
|
31
|
-
<TimeLine color={color} key={key} />
|
|
32
|
-
))}
|
|
33
|
-
</Stack>
|
|
34
|
-
);
|
|
35
|
-
};
|
|
1
|
+
import React from 'react';
|
|
2
|
+
|
|
3
|
+
import type { Meta } from '@storybook/react';
|
|
4
|
+
import { TimeLine } from '../components';
|
|
5
|
+
import { Stack } from '@mui/material';
|
|
6
|
+
|
|
7
|
+
const meta = {
|
|
8
|
+
title: 'Display/TimeLine',
|
|
9
|
+
component: TimeLine,
|
|
10
|
+
parameters: {
|
|
11
|
+
layout: 'centered',
|
|
12
|
+
},
|
|
13
|
+
tags: ['autodocs'],
|
|
14
|
+
argTypes: {},
|
|
15
|
+
} satisfies Meta<typeof TimeLine>;
|
|
16
|
+
|
|
17
|
+
export default meta;
|
|
18
|
+
|
|
19
|
+
export const TimeLineBasic = () => {
|
|
20
|
+
return (
|
|
21
|
+
<>
|
|
22
|
+
<TimeLine />
|
|
23
|
+
</>
|
|
24
|
+
);
|
|
25
|
+
};
|
|
26
|
+
|
|
27
|
+
export const TimeLineColors = () => {
|
|
28
|
+
return (
|
|
29
|
+
<Stack direction="row" spacing={2}>
|
|
30
|
+
{['primary', 'secondary', 'inherit', 'error', 'info', 'success', 'warning'].map((color, key) => (
|
|
31
|
+
<TimeLine color={color} key={key} />
|
|
32
|
+
))}
|
|
33
|
+
</Stack>
|
|
34
|
+
);
|
|
35
|
+
};
|
|
@@ -1,87 +1,87 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
|
|
3
|
-
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
|
|
4
|
-
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
|
|
5
|
-
import { TimePicker } from '@mui/x-date-pickers/TimePicker';
|
|
6
|
-
import { MobileTimePicker } from '@mui/x-date-pickers/MobileTimePicker';
|
|
7
|
-
import { DesktopTimePicker } from '@mui/x-date-pickers/DesktopTimePicker';
|
|
8
|
-
import type { Meta } from '@storybook/react';
|
|
9
|
-
import dayjs, { Dayjs } from 'dayjs';
|
|
10
|
-
import utc from 'dayjs/plugin/utc';
|
|
11
|
-
import timezone from 'dayjs/plugin/timezone';
|
|
12
|
-
|
|
13
|
-
import 'dayjs/locale/pt-br';
|
|
14
|
-
import 'dayjs/locale/en';
|
|
15
|
-
import 'dayjs/locale/es';
|
|
16
|
-
|
|
17
|
-
dayjs.extend(utc);
|
|
18
|
-
dayjs.extend(timezone);
|
|
19
|
-
|
|
20
|
-
const meta = {
|
|
21
|
-
title: 'Form/TimePicker',
|
|
22
|
-
component: TimePicker,
|
|
23
|
-
parameters: {
|
|
24
|
-
layout: 'centered',
|
|
25
|
-
},
|
|
26
|
-
tags: ['autodocs'],
|
|
27
|
-
argTypes: {},
|
|
28
|
-
} satisfies Meta<typeof TimePicker>;
|
|
29
|
-
|
|
30
|
-
export default meta;
|
|
31
|
-
|
|
32
|
-
export const BasicDatePicker = () => (
|
|
33
|
-
<LocalizationProvider dateAdapter={AdapterDayjs}>
|
|
34
|
-
<DemoContainer components={['TimePicker']}>
|
|
35
|
-
<TimePicker label="TimePicker" />
|
|
36
|
-
</DemoContainer>
|
|
37
|
-
</LocalizationProvider>
|
|
38
|
-
);
|
|
39
|
-
|
|
40
|
-
BasicDatePicker.storyName = 'TimePicker Basic';
|
|
41
|
-
|
|
42
|
-
export const TimePickerVariants = () => (
|
|
43
|
-
<LocalizationProvider dateAdapter={AdapterDayjs}>
|
|
44
|
-
<DemoContainer components={['TimePicker', 'MobileTimePicker', 'DesktopTimePicker']}>
|
|
45
|
-
<div style={{ width: '480px', marginBottom: 30 }}>
|
|
46
|
-
<TimePicker sx={{ minWidth: 275 }} label="TimePicker Responsive" timezone="America/Sao_Paulo" />
|
|
47
|
-
</div>
|
|
48
|
-
<div style={{ width: '480px', marginBottom: 30 }}>
|
|
49
|
-
<MobileTimePicker sx={{ minWidth: 275 }} label="TimePicker Mobile" timezone="America/Sao_Paulo" />
|
|
50
|
-
</div>
|
|
51
|
-
<div style={{ width: '480px', marginBottom: 30 }}>
|
|
52
|
-
<DesktopTimePicker sx={{ minWidth: 275 }} label="TimePicker Desktop" timezone="America/Sao_Paulo" />
|
|
53
|
-
</div>
|
|
54
|
-
</DemoContainer>
|
|
55
|
-
</LocalizationProvider>
|
|
56
|
-
);
|
|
57
|
-
|
|
58
|
-
TimePickerVariants.storyName = 'TimePicker Variants';
|
|
59
|
-
|
|
60
|
-
export const TimePickerLanguage = () => (
|
|
61
|
-
<>
|
|
62
|
-
<div style={{ width: '480px', marginBottom: 30 }}>
|
|
63
|
-
<LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale={'pt-br'}>
|
|
64
|
-
<DemoContainer components={['TimePicker']}>
|
|
65
|
-
<TimePicker sx={{ minWidth: 275 }} label="TimePicker Brazil" timezone="America/Sao_Paulo" />
|
|
66
|
-
</DemoContainer>
|
|
67
|
-
</LocalizationProvider>
|
|
68
|
-
</div>
|
|
69
|
-
|
|
70
|
-
<div style={{ width: '480px', marginBottom: 30 }}>
|
|
71
|
-
<LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale={'en'}>
|
|
72
|
-
<DemoContainer components={['TimePicker']}>
|
|
73
|
-
<TimePicker sx={{ minWidth: 275 }} label="TimePicker English" timezone="America/Sao_Paulo" />
|
|
74
|
-
</DemoContainer>
|
|
75
|
-
</LocalizationProvider>
|
|
76
|
-
</div>
|
|
77
|
-
<div style={{ width: '480px', marginBottom: 30 }}>
|
|
78
|
-
<LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale={'es'}>
|
|
79
|
-
<DemoContainer components={['TimePicker']}>
|
|
80
|
-
<TimePicker sx={{ minWidth: 275 }} label="TimePicker Spain" timezone="America/Sao_Paulo" />
|
|
81
|
-
</DemoContainer>
|
|
82
|
-
</LocalizationProvider>
|
|
83
|
-
</div>
|
|
84
|
-
</>
|
|
85
|
-
);
|
|
86
|
-
|
|
87
|
-
TimePickerLanguage.storyName = 'TimePicker Languages';
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
|
|
3
|
+
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
|
|
4
|
+
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
|
|
5
|
+
import { TimePicker } from '@mui/x-date-pickers/TimePicker';
|
|
6
|
+
import { MobileTimePicker } from '@mui/x-date-pickers/MobileTimePicker';
|
|
7
|
+
import { DesktopTimePicker } from '@mui/x-date-pickers/DesktopTimePicker';
|
|
8
|
+
import type { Meta } from '@storybook/react';
|
|
9
|
+
import dayjs, { Dayjs } from 'dayjs';
|
|
10
|
+
import utc from 'dayjs/plugin/utc';
|
|
11
|
+
import timezone from 'dayjs/plugin/timezone';
|
|
12
|
+
|
|
13
|
+
import 'dayjs/locale/pt-br';
|
|
14
|
+
import 'dayjs/locale/en';
|
|
15
|
+
import 'dayjs/locale/es';
|
|
16
|
+
|
|
17
|
+
dayjs.extend(utc);
|
|
18
|
+
dayjs.extend(timezone);
|
|
19
|
+
|
|
20
|
+
const meta = {
|
|
21
|
+
title: 'Form/TimePicker',
|
|
22
|
+
component: TimePicker,
|
|
23
|
+
parameters: {
|
|
24
|
+
layout: 'centered',
|
|
25
|
+
},
|
|
26
|
+
tags: ['autodocs'],
|
|
27
|
+
argTypes: {},
|
|
28
|
+
} satisfies Meta<typeof TimePicker>;
|
|
29
|
+
|
|
30
|
+
export default meta;
|
|
31
|
+
|
|
32
|
+
export const BasicDatePicker = () => (
|
|
33
|
+
<LocalizationProvider dateAdapter={AdapterDayjs}>
|
|
34
|
+
<DemoContainer components={['TimePicker']}>
|
|
35
|
+
<TimePicker label="TimePicker" />
|
|
36
|
+
</DemoContainer>
|
|
37
|
+
</LocalizationProvider>
|
|
38
|
+
);
|
|
39
|
+
|
|
40
|
+
BasicDatePicker.storyName = 'TimePicker Basic';
|
|
41
|
+
|
|
42
|
+
export const TimePickerVariants = () => (
|
|
43
|
+
<LocalizationProvider dateAdapter={AdapterDayjs}>
|
|
44
|
+
<DemoContainer components={['TimePicker', 'MobileTimePicker', 'DesktopTimePicker']}>
|
|
45
|
+
<div style={{ width: '480px', marginBottom: 30 }}>
|
|
46
|
+
<TimePicker sx={{ minWidth: 275 }} label="TimePicker Responsive" timezone="America/Sao_Paulo" />
|
|
47
|
+
</div>
|
|
48
|
+
<div style={{ width: '480px', marginBottom: 30 }}>
|
|
49
|
+
<MobileTimePicker sx={{ minWidth: 275 }} label="TimePicker Mobile" timezone="America/Sao_Paulo" />
|
|
50
|
+
</div>
|
|
51
|
+
<div style={{ width: '480px', marginBottom: 30 }}>
|
|
52
|
+
<DesktopTimePicker sx={{ minWidth: 275 }} label="TimePicker Desktop" timezone="America/Sao_Paulo" />
|
|
53
|
+
</div>
|
|
54
|
+
</DemoContainer>
|
|
55
|
+
</LocalizationProvider>
|
|
56
|
+
);
|
|
57
|
+
|
|
58
|
+
TimePickerVariants.storyName = 'TimePicker Variants';
|
|
59
|
+
|
|
60
|
+
export const TimePickerLanguage = () => (
|
|
61
|
+
<>
|
|
62
|
+
<div style={{ width: '480px', marginBottom: 30 }}>
|
|
63
|
+
<LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale={'pt-br'}>
|
|
64
|
+
<DemoContainer components={['TimePicker']}>
|
|
65
|
+
<TimePicker sx={{ minWidth: 275 }} label="TimePicker Brazil" timezone="America/Sao_Paulo" />
|
|
66
|
+
</DemoContainer>
|
|
67
|
+
</LocalizationProvider>
|
|
68
|
+
</div>
|
|
69
|
+
|
|
70
|
+
<div style={{ width: '480px', marginBottom: 30 }}>
|
|
71
|
+
<LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale={'en'}>
|
|
72
|
+
<DemoContainer components={['TimePicker']}>
|
|
73
|
+
<TimePicker sx={{ minWidth: 275 }} label="TimePicker English" timezone="America/Sao_Paulo" />
|
|
74
|
+
</DemoContainer>
|
|
75
|
+
</LocalizationProvider>
|
|
76
|
+
</div>
|
|
77
|
+
<div style={{ width: '480px', marginBottom: 30 }}>
|
|
78
|
+
<LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale={'es'}>
|
|
79
|
+
<DemoContainer components={['TimePicker']}>
|
|
80
|
+
<TimePicker sx={{ minWidth: 275 }} label="TimePicker Spain" timezone="America/Sao_Paulo" />
|
|
81
|
+
</DemoContainer>
|
|
82
|
+
</LocalizationProvider>
|
|
83
|
+
</div>
|
|
84
|
+
</>
|
|
85
|
+
);
|
|
86
|
+
|
|
87
|
+
TimePickerLanguage.storyName = 'TimePicker Languages';
|
|
@@ -1,44 +1,44 @@
|
|
|
1
|
-
import React from "react"
|
|
2
|
-
import Title from '../components/Typography/Title';
|
|
3
|
-
|
|
4
|
-
export default {
|
|
5
|
-
title: 'Tipografia/Title',
|
|
6
|
-
component: Title,
|
|
7
|
-
tags: ['autodocs'],
|
|
8
|
-
parameters: {
|
|
9
|
-
layout: 'centered',
|
|
10
|
-
},
|
|
11
|
-
argTypes: {
|
|
12
|
-
as: {
|
|
13
|
-
description: 'Adiciona a tag do titulo.',
|
|
14
|
-
options: ['h1', 'h2', 'h3', 'h4', 'h5'],
|
|
15
|
-
control: { type: 'radio' }
|
|
16
|
-
},
|
|
17
|
-
children: {
|
|
18
|
-
description: 'Adiciona um children.'
|
|
19
|
-
},
|
|
20
|
-
className: {
|
|
21
|
-
description: 'Adicione uma classe.',
|
|
22
|
-
},
|
|
23
|
-
size: {
|
|
24
|
-
description: 'Adicione um tamanho.',
|
|
25
|
-
options: ['small', 'medium', 'large'],
|
|
26
|
-
control: { type: 'radio' }
|
|
27
|
-
},
|
|
28
|
-
type: {
|
|
29
|
-
description: 'Adicione um tipo.',
|
|
30
|
-
options: ['default', 'secondary', 'success', 'warning', 'danger', 'info'],
|
|
31
|
-
control: { type: 'radio' }
|
|
32
|
-
},
|
|
33
|
-
}
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
export const Default = (args) => <Title {...args} />
|
|
37
|
-
|
|
38
|
-
Default.args = {
|
|
39
|
-
as: 'h1',
|
|
40
|
-
children: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.',
|
|
41
|
-
className: '',
|
|
42
|
-
size: 'default',
|
|
43
|
-
type: ''
|
|
1
|
+
import React from "react"
|
|
2
|
+
import Title from '../components/Typography/Title';
|
|
3
|
+
|
|
4
|
+
export default {
|
|
5
|
+
title: 'Tipografia/Title',
|
|
6
|
+
component: Title,
|
|
7
|
+
tags: ['autodocs'],
|
|
8
|
+
parameters: {
|
|
9
|
+
layout: 'centered',
|
|
10
|
+
},
|
|
11
|
+
argTypes: {
|
|
12
|
+
as: {
|
|
13
|
+
description: 'Adiciona a tag do titulo.',
|
|
14
|
+
options: ['h1', 'h2', 'h3', 'h4', 'h5'],
|
|
15
|
+
control: { type: 'radio' }
|
|
16
|
+
},
|
|
17
|
+
children: {
|
|
18
|
+
description: 'Adiciona um children.'
|
|
19
|
+
},
|
|
20
|
+
className: {
|
|
21
|
+
description: 'Adicione uma classe.',
|
|
22
|
+
},
|
|
23
|
+
size: {
|
|
24
|
+
description: 'Adicione um tamanho.',
|
|
25
|
+
options: ['small', 'medium', 'large'],
|
|
26
|
+
control: { type: 'radio' }
|
|
27
|
+
},
|
|
28
|
+
type: {
|
|
29
|
+
description: 'Adicione um tipo.',
|
|
30
|
+
options: ['default', 'secondary', 'success', 'warning', 'danger', 'info'],
|
|
31
|
+
control: { type: 'radio' }
|
|
32
|
+
},
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
export const Default = (args) => <Title {...args} />
|
|
37
|
+
|
|
38
|
+
Default.args = {
|
|
39
|
+
as: 'h1',
|
|
40
|
+
children: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.',
|
|
41
|
+
className: '',
|
|
42
|
+
size: 'default',
|
|
43
|
+
type: ''
|
|
44
44
|
}
|