norma-library 0.5.131 → 0.5.133

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.
Files changed (184) hide show
  1. package/.babelrc.json +18 -18
  2. package/.prettierignore +10 -10
  3. package/.prettierrc.json +20 -20
  4. package/.storybook/main.ts +20 -20
  5. package/.storybook/preview.ts +15 -15
  6. package/README.md +43 -43
  7. package/commitlint.config.js +1 -1
  8. package/dist/esm/components/Box/styles.d.ts +1 -1
  9. package/dist/esm/components/Breadcrumb/styles.d.ts +4 -4
  10. package/dist/esm/components/ChatMessageBalloon/ChatMessageBalloon.style.d.ts +1 -1
  11. package/dist/esm/components/DateInput/styles.d.ts +2 -2
  12. package/dist/esm/components/Icons.d.ts +1 -1
  13. package/dist/esm/components/Modal.js +4 -4
  14. package/dist/esm/components/Modal.js.map +1 -1
  15. package/dist/esm/components/MultiSelectInput/components/Option/styles.d.ts +1 -1
  16. package/dist/esm/components/MultiSelectInput/styles.d.ts +2 -2
  17. package/dist/esm/components/ProgressBar.d.ts +1 -1
  18. package/dist/esm/components/ProgressBar.js +19 -8
  19. package/dist/esm/components/ProgressBar.js.map +1 -1
  20. package/dist/esm/components/SelectInput/components/Option/styles.d.ts +1 -1
  21. package/dist/esm/components/SelectInput/styles.d.ts +2 -2
  22. package/dist/esm/components/Table/components/header/styles.d.ts +8 -8
  23. package/dist/esm/components/Table/components/pagination/styles.d.ts +1 -1
  24. package/dist/esm/components/Table/components/tbody/styles.d.ts +1 -1
  25. package/dist/esm/components/Table/styles.d.ts +10 -10
  26. package/dist/esm/components/TextInput/styles.d.ts +3 -3
  27. package/dist/esm/components/Typography/Text/styles.d.ts +1 -1
  28. package/dist/esm/components/Typography/Title/styles.d.ts +1 -1
  29. package/dist/esm/components/UncontrolledTable/components/header/styles.d.ts +8 -8
  30. package/dist/esm/components/UncontrolledTable/components/pagination/styles.d.ts +1 -1
  31. package/dist/esm/components/UncontrolledTable/components/tbody/styles.d.ts +1 -1
  32. package/dist/esm/components/UncontrolledTable/styles.d.ts +10 -10
  33. package/dist/esm/components/UncontrolledTabs/UncontrolledTabs.style.d.ts +1 -1
  34. package/dist/esm/interfaces/ProgressBar.d.ts +5 -1
  35. package/docs/index.md +118 -118
  36. package/package.json +136 -136
  37. package/src/components/Accordion.tsx +39 -39
  38. package/src/components/Avatar.tsx +17 -17
  39. package/src/components/Badge.tsx +14 -14
  40. package/src/components/Box/index.tsx +12 -12
  41. package/src/components/Box/interfaces.ts +3 -3
  42. package/src/components/Box/styles.tsx +22 -22
  43. package/src/components/Breadcrumb/index.tsx +27 -27
  44. package/src/components/Breadcrumb/interface.ts +8 -8
  45. package/src/components/Breadcrumb/styles.tsx +32 -32
  46. package/src/components/Button.tsx +26 -26
  47. package/src/components/Card.tsx +37 -37
  48. package/src/components/ChatMessage.tsx +87 -87
  49. package/src/components/ChatMessageBalloon/ChatMessageBalloon.style.ts +56 -56
  50. package/src/components/ChatMessageBalloon/ChatMessageBalloon.tsx +55 -55
  51. package/src/components/CheckBox.tsx +21 -21
  52. package/src/components/DateInput/index.tsx +34 -34
  53. package/src/components/DateInput/interface.ts +13 -13
  54. package/src/components/DateInput/styles.tsx +27 -27
  55. package/src/components/DatePicker.tsx +67 -67
  56. package/src/components/DropDown.tsx +24 -24
  57. package/src/components/IconButton.tsx +37 -37
  58. package/src/components/Icons.tsx +82 -82
  59. package/src/components/Modal.tsx +103 -113
  60. package/src/components/MultiSelectInput/components/MultiValue/index.tsx +44 -44
  61. package/src/components/MultiSelectInput/components/Option/index.tsx +62 -62
  62. package/src/components/MultiSelectInput/components/Option/styles.tsx +8 -8
  63. package/src/components/MultiSelectInput/index.tsx +60 -60
  64. package/src/components/MultiSelectInput/interfaces.ts +15 -15
  65. package/src/components/MultiSelectInput/styles.tsx +43 -43
  66. package/src/components/Paper.tsx +12 -12
  67. package/src/components/ProgressBar.tsx +63 -50
  68. package/src/components/RadioGroup.tsx +43 -43
  69. package/src/components/RangerSlider.tsx +65 -65
  70. package/src/components/Select.tsx +74 -74
  71. package/src/components/SelectInput/components/Option/index.tsx +61 -61
  72. package/src/components/SelectInput/components/Option/styles.tsx +8 -8
  73. package/src/components/SelectInput/index.tsx +45 -45
  74. package/src/components/SelectInput/interfaces.ts +15 -15
  75. package/src/components/SelectInput/styles.tsx +31 -31
  76. package/src/components/Svgs.tsx +506 -506
  77. package/src/components/Table/components/header/index.tsx +86 -86
  78. package/src/components/Table/components/header/styles.tsx +59 -59
  79. package/src/components/Table/components/index.tsx +8 -8
  80. package/src/components/Table/components/pagination/index.tsx +39 -39
  81. package/src/components/Table/components/pagination/styles.tsx +28 -28
  82. package/src/components/Table/components/tbody/index.tsx +30 -30
  83. package/src/components/Table/components/tbody/styles.tsx +4 -4
  84. package/src/components/Table/index.tsx +317 -317
  85. package/src/components/Table/interface.ts +23 -23
  86. package/src/components/Table/styles.tsx +117 -117
  87. package/src/components/Tabs.tsx +105 -105
  88. package/src/components/Tag.tsx +33 -33
  89. package/src/components/TextField.tsx +19 -19
  90. package/src/components/TextInput/index.tsx +37 -37
  91. package/src/components/TextInput/interface.ts +9 -9
  92. package/src/components/TextInput/styles.tsx +23 -23
  93. package/src/components/TimeLine.tsx +89 -89
  94. package/src/components/TimePicker.tsx +78 -78
  95. package/src/components/Typography/Text/index.tsx +20 -20
  96. package/src/components/Typography/Text/interfaces.ts +5 -5
  97. package/src/components/Typography/Text/styles.tsx +40 -40
  98. package/src/components/Typography/Title/index.tsx +22 -22
  99. package/src/components/Typography/Title/interfaces.ts +6 -6
  100. package/src/components/Typography/Title/styles.tsx +40 -40
  101. package/src/components/Typography/index.tsx +6 -6
  102. package/src/components/UncontrolledTable/components/header/index.tsx +63 -63
  103. package/src/components/UncontrolledTable/components/header/styles.tsx +59 -59
  104. package/src/components/UncontrolledTable/components/index.tsx +8 -8
  105. package/src/components/UncontrolledTable/components/pagination/index.tsx +43 -43
  106. package/src/components/UncontrolledTable/components/pagination/styles.tsx +28 -28
  107. package/src/components/UncontrolledTable/components/tbody/index.tsx +30 -30
  108. package/src/components/UncontrolledTable/components/tbody/styles.tsx +4 -4
  109. package/src/components/UncontrolledTable/index.tsx +226 -226
  110. package/src/components/UncontrolledTable/interface.ts +42 -42
  111. package/src/components/UncontrolledTable/styles.tsx +120 -120
  112. package/src/components/UncontrolledTabs/UncontrolledTabs.style.tsx +51 -51
  113. package/src/components/UncontrolledTabs/UncontrolledTabs.tsx +68 -68
  114. package/src/components/index.ts +24 -24
  115. package/src/helpers/alignments.ts +14 -14
  116. package/src/helpers/borders.ts +18 -18
  117. package/src/helpers/colors.ts +206 -206
  118. package/src/helpers/index.ts +5 -5
  119. package/src/helpers/radios.ts +24 -24
  120. package/src/helpers/sizes.ts +72 -72
  121. package/src/index.ts +66 -66
  122. package/src/interfaces/Accordion.ts +12 -12
  123. package/src/interfaces/Avatar.tsx +15 -15
  124. package/src/interfaces/Badge.ts +19 -19
  125. package/src/interfaces/Button.ts +22 -22
  126. package/src/interfaces/Card.ts +11 -11
  127. package/src/interfaces/ChatMessage.ts +12 -12
  128. package/src/interfaces/ChatMessageBalloon.ts +17 -17
  129. package/src/interfaces/CheckBox.ts +27 -27
  130. package/src/interfaces/DatePicker.ts +13 -13
  131. package/src/interfaces/DropDown.ts +14 -14
  132. package/src/interfaces/IconButton.ts +22 -22
  133. package/src/interfaces/Icons.ts +17 -17
  134. package/src/interfaces/Modal.ts +16 -16
  135. package/src/interfaces/Paper.ts +12 -12
  136. package/src/interfaces/ProgressBar.ts +25 -19
  137. package/src/interfaces/RadioGroup.ts +23 -23
  138. package/src/interfaces/RangerSlider.ts +21 -21
  139. package/src/interfaces/Select.ts +17 -17
  140. package/src/interfaces/Tabs.ts +19 -19
  141. package/src/interfaces/Tag.ts +17 -17
  142. package/src/interfaces/TextField.ts +44 -44
  143. package/src/interfaces/TimeLine.ts +11 -11
  144. package/src/interfaces/TimePicker.ts +13 -13
  145. package/src/interfaces/index.ts +23 -23
  146. package/src/providers/NormaProvider.tsx +13 -13
  147. package/src/sample-data-2.json +178 -178
  148. package/src/sample-data.json +177 -177
  149. package/src/stories/Accordion.stories.tsx +65 -65
  150. package/src/stories/Avatar.stories.tsx +123 -123
  151. package/src/stories/Badge.stories.tsx +39 -39
  152. package/src/stories/Box.stories.tsx +35 -35
  153. package/src/stories/Breadcrumb.stories.tsx +44 -44
  154. package/src/stories/Button.stories.tsx +93 -93
  155. package/src/stories/Card.stories.tsx +39 -39
  156. package/src/stories/ChatMessage.stories.tsx +84 -84
  157. package/src/stories/ChatMessageBalloon.stories.tsx +108 -108
  158. package/src/stories/CheckBox.stories.tsx +88 -88
  159. package/src/stories/DateInput.stories.tsx +51 -51
  160. package/src/stories/DatePicker.stories.tsx +50 -50
  161. package/src/stories/DropDown.stories.tsx +57 -57
  162. package/src/stories/IconButton.stories.tsx +78 -78
  163. package/src/stories/Modal.stories.tsx +195 -195
  164. package/src/stories/MultiSelectInput.stories.tsx +90 -90
  165. package/src/stories/Paper.stories.tsx +53 -53
  166. package/src/stories/ProgressBar.stories.tsx +113 -95
  167. package/src/stories/RadioGroup.stories.tsx +87 -87
  168. package/src/stories/RangerSlider.stories.tsx +158 -58
  169. package/src/stories/Select.stories.tsx +100 -100
  170. package/src/stories/SelectInput.stories.tsx +78 -78
  171. package/src/stories/Table.stories.tsx +372 -372
  172. package/src/stories/Tabs.stories.tsx +61 -61
  173. package/src/stories/Tag.stories.tsx +56 -56
  174. package/src/stories/Text.stories.tsx +37 -37
  175. package/src/stories/TextField.stories.tsx +310 -310
  176. package/src/stories/TextInput.stories.tsx +52 -52
  177. package/src/stories/TimeLine.stories.tsx +35 -35
  178. package/src/stories/TimePicker.stories.tsx +87 -87
  179. package/src/stories/Title.stories.tsx +43 -43
  180. package/src/stories/UncontrolledTable.stories.tsx +337 -337
  181. package/src/stories/UncontrolledTabs.stories.tsx +63 -63
  182. package/src/styles/globals.scss +17 -17
  183. package/src/types/index.ts +204 -204
  184. package/vite.config.ts +15 -15
@@ -1,10 +1,10 @@
1
- export interface TextInputProps {
2
- className?: string
3
- label: string
4
- onChange: Function
5
- disabled?: boolean
6
- placeholder?: string
7
- name?: string
8
- type?: string
9
- value: string
1
+ export interface TextInputProps {
2
+ className?: string
3
+ label: string
4
+ onChange: Function
5
+ disabled?: boolean
6
+ placeholder?: string
7
+ name?: string
8
+ type?: string
9
+ value: string
10
10
  }
@@ -1,24 +1,24 @@
1
- import styled from "styled-components"
2
-
3
- export const Container = styled.div`
4
- width: 100%;
5
- display: flex;
6
- flex-direction: column;
7
- `
8
-
9
- export const Label = styled.label`
10
- font-size: 14px;
11
- margin: 0 0 4px 0;
12
- color: #666;
13
- `
14
-
15
- export const Input = styled.input`
16
- border: none;
17
- color: #4D4F5C;
18
- border-bottom: 1px solid #00000033;
19
- outline: none;
20
- font-size: 18px;
21
- padding: 8px;
22
- width: 100%;
23
- font-size: 16px;
1
+ import styled from "styled-components"
2
+
3
+ export const Container = styled.div`
4
+ width: 100%;
5
+ display: flex;
6
+ flex-direction: column;
7
+ `
8
+
9
+ export const Label = styled.label`
10
+ font-size: 14px;
11
+ margin: 0 0 4px 0;
12
+ color: #666;
13
+ `
14
+
15
+ export const Input = styled.input`
16
+ border: none;
17
+ color: #4D4F5C;
18
+ border-bottom: 1px solid #00000033;
19
+ outline: none;
20
+ font-size: 18px;
21
+ padding: 8px;
22
+ width: 100%;
23
+ font-size: 16px;
24
24
  `
@@ -1,89 +1,89 @@
1
- import React from 'react';
2
- import { Typography } from '@mui/material';
3
-
4
- import {
5
- Timeline as MuiTimeLine,
6
- TimelineItem,
7
- timelineItemClasses,
8
- TimelineSeparator,
9
- TimelineConnector,
10
- TimelineContent,
11
- TimelineDot,
12
- } from '@mui/lab';
13
-
14
- import { TimeLineBaseProps } from '@/interfaces/TimeLine';
15
-
16
- import { styled } from '@mui/material/styles';
17
- import { palette, lightenRGB } from '../helpers';
18
- import { ColorVariant, DataTimeLine } from '@/types';
19
-
20
- const colorMap: Record<ColorVariant, string> = {
21
- inherit: palette.inherit,
22
- primary: palette.primary,
23
- secondary: palette.secondary,
24
- error: palette.error,
25
- warning: palette.warning,
26
- info: palette.info,
27
- success: palette.success,
28
- };
29
-
30
- const sampleData: Array<DataTimeLine> = [
31
- {
32
- title: 'imported register',
33
- data: '01/04/2023 at 07h00',
34
- by: 'By IEM',
35
- },
36
- {
37
- title: '80% score applied on register',
38
- data: '01/04/2023 at 07h05',
39
- by: 'By IEM',
40
- },
41
- {
42
- title: 'Registers transfered to campaign ID 10',
43
- data: '',
44
- by: '',
45
- },
46
- ];
47
-
48
- const TimeLineStyled = styled(MuiTimeLine)({
49
- [`& .${timelineItemClasses.root}:before`]: {
50
- flex: 0,
51
- padding: 0,
52
- },
53
- });
54
-
55
- export const TimeLine: React.FC<TimeLineBaseProps> = ({
56
- data = sampleData,
57
- color = 'primary',
58
- position = 'left',
59
- ...props
60
- }) => {
61
-
62
- const renderList = data.map((item, key) => (
63
- <TimelineItem key={key}>
64
- <TimelineSeparator>
65
- <TimelineDot
66
- sx={{
67
- bgcolor: colorMap[color],
68
- p: '6px',
69
- border: `4px solid ${lightenRGB(colorMap[color], 50)}`,
70
- }}
71
- />
72
- {key !== data.length - 1 && <TimelineConnector sx={{ bgcolor: colorMap[color], pt: '55px', pl: '3px' }} />}
73
- </TimelineSeparator>
74
- <TimelineContent>
75
- {item.title}
76
- <Typography sx={{ m: 'auto 0' }} variant="body2" color="text.secondary">
77
- {item.data}
78
- </Typography>
79
- <Typography sx={{ m: 'auto 0', color: colorMap[color] }} variant="body2">
80
- {item.by}
81
- </Typography>
82
- </TimelineContent>
83
- </TimelineItem>
84
- ));
85
-
86
- return (
87
- <TimeLineStyled {...props}>{renderList}</TimeLineStyled>
88
- );
89
- };
1
+ import React from 'react';
2
+ import { Typography } from '@mui/material';
3
+
4
+ import {
5
+ Timeline as MuiTimeLine,
6
+ TimelineItem,
7
+ timelineItemClasses,
8
+ TimelineSeparator,
9
+ TimelineConnector,
10
+ TimelineContent,
11
+ TimelineDot,
12
+ } from '@mui/lab';
13
+
14
+ import { TimeLineBaseProps } from '@/interfaces/TimeLine';
15
+
16
+ import { styled } from '@mui/material/styles';
17
+ import { palette, lightenRGB } from '../helpers';
18
+ import { ColorVariant, DataTimeLine } from '@/types';
19
+
20
+ const colorMap: Record<ColorVariant, string> = {
21
+ inherit: palette.inherit,
22
+ primary: palette.primary,
23
+ secondary: palette.secondary,
24
+ error: palette.error,
25
+ warning: palette.warning,
26
+ info: palette.info,
27
+ success: palette.success,
28
+ };
29
+
30
+ const sampleData: Array<DataTimeLine> = [
31
+ {
32
+ title: 'imported register',
33
+ data: '01/04/2023 at 07h00',
34
+ by: 'By IEM',
35
+ },
36
+ {
37
+ title: '80% score applied on register',
38
+ data: '01/04/2023 at 07h05',
39
+ by: 'By IEM',
40
+ },
41
+ {
42
+ title: 'Registers transfered to campaign ID 10',
43
+ data: '',
44
+ by: '',
45
+ },
46
+ ];
47
+
48
+ const TimeLineStyled = styled(MuiTimeLine)({
49
+ [`& .${timelineItemClasses.root}:before`]: {
50
+ flex: 0,
51
+ padding: 0,
52
+ },
53
+ });
54
+
55
+ export const TimeLine: React.FC<TimeLineBaseProps> = ({
56
+ data = sampleData,
57
+ color = 'primary',
58
+ position = 'left',
59
+ ...props
60
+ }) => {
61
+
62
+ const renderList = data.map((item, key) => (
63
+ <TimelineItem key={key}>
64
+ <TimelineSeparator>
65
+ <TimelineDot
66
+ sx={{
67
+ bgcolor: colorMap[color],
68
+ p: '6px',
69
+ border: `4px solid ${lightenRGB(colorMap[color], 50)}`,
70
+ }}
71
+ />
72
+ {key !== data.length - 1 && <TimelineConnector sx={{ bgcolor: colorMap[color], pt: '55px', pl: '3px' }} />}
73
+ </TimelineSeparator>
74
+ <TimelineContent>
75
+ {item.title}
76
+ <Typography sx={{ m: 'auto 0' }} variant="body2" color="text.secondary">
77
+ {item.data}
78
+ </Typography>
79
+ <Typography sx={{ m: 'auto 0', color: colorMap[color] }} variant="body2">
80
+ {item.by}
81
+ </Typography>
82
+ </TimelineContent>
83
+ </TimelineItem>
84
+ ));
85
+
86
+ return (
87
+ <TimeLineStyled {...props}>{renderList}</TimeLineStyled>
88
+ );
89
+ };
@@ -1,78 +1,78 @@
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 as MuiTimePicker } from '@mui/x-date-pickers/TimePicker';
6
- import { MobileTimePicker as MuiMobileTimePicker } from '@mui/x-date-pickers/MobileTimePicker';
7
- import { DesktopTimePicker as MuiDesktopTimePicker } from '@mui/x-date-pickers/DesktopTimePicker';
8
- import { styled } from '@mui/material/styles';
9
-
10
- import 'dayjs/locale/pt-br';
11
- import 'dayjs/locale/en';
12
- import 'dayjs/locale/es';
13
-
14
- import dayjs from 'dayjs';
15
- import utc from 'dayjs/plugin/utc';
16
- import timezone from 'dayjs/plugin/timezone';
17
-
18
- import 'dayjs/locale/pt-br';
19
- import 'dayjs/locale/en';
20
- import 'dayjs/locale/es';
21
- import { TimePickerBaseProps } from '@/interfaces/TimePicker';
22
-
23
- dayjs.extend(utc);
24
- dayjs.extend(timezone);
25
-
26
- const MuiTimePickerStyled = styled(MuiTimePicker)({
27
- '& .MuiOutlinedInput-notchedOutline': {
28
- border: 'none',
29
- borderRadius: 0,
30
- borderBottom: '1px solid #666666',
31
- },
32
- '& .MuiFormLabel-root': {
33
- backgroundColor: '#fff',
34
- padding: '0 5px',
35
- },
36
- });
37
-
38
- const MuiMobileTimePickerStyled = styled(MuiMobileTimePicker)({
39
- '& .MuiOutlinedInput-notchedOutline': {
40
- border: 'none',
41
- borderRadius: 0,
42
- borderBottom: '1px solid #666666',
43
- },
44
- '& .MuiFormLabel-root': {
45
- backgroundColor: '#fff',
46
- padding: '0 5px',
47
- },
48
- });
49
-
50
- const MuiDesktopTimePickerStyled = styled(MuiDesktopTimePicker)({
51
- '& .MuiOutlinedInput-notchedOutline': {
52
- border: 'none',
53
- borderRadius: 0,
54
- borderBottom: '1px solid #666666',
55
- },
56
- '& .MuiFormLabel-root': {
57
- backgroundColor: '#fff',
58
- padding: '0 5px',
59
- },
60
- });
61
-
62
- export const TimePicker = ({
63
- label,
64
- timezone = 'America/Sao_Paulo',
65
- language = 'pt-br',
66
- variant = 'desktop',
67
- }: TimePickerBaseProps) => {
68
-
69
- return (
70
- <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale={language}>
71
- <DemoContainer components={['TimePicker', 'MobileTimePicker', 'DesktopTimePicker']}>
72
- {variant === 'responsive' && <MuiTimePickerStyled label={label} timezone={timezone} />}
73
- {variant === 'mobile' && <MuiMobileTimePickerStyled label={label} timezone={timezone} />}
74
- {variant === 'desktop' && <MuiDesktopTimePickerStyled label={label} timezone={timezone} />}
75
- </DemoContainer>
76
- </LocalizationProvider>
77
- );
78
- };
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 as MuiTimePicker } from '@mui/x-date-pickers/TimePicker';
6
+ import { MobileTimePicker as MuiMobileTimePicker } from '@mui/x-date-pickers/MobileTimePicker';
7
+ import { DesktopTimePicker as MuiDesktopTimePicker } from '@mui/x-date-pickers/DesktopTimePicker';
8
+ import { styled } from '@mui/material/styles';
9
+
10
+ import 'dayjs/locale/pt-br';
11
+ import 'dayjs/locale/en';
12
+ import 'dayjs/locale/es';
13
+
14
+ import dayjs from 'dayjs';
15
+ import utc from 'dayjs/plugin/utc';
16
+ import timezone from 'dayjs/plugin/timezone';
17
+
18
+ import 'dayjs/locale/pt-br';
19
+ import 'dayjs/locale/en';
20
+ import 'dayjs/locale/es';
21
+ import { TimePickerBaseProps } from '@/interfaces/TimePicker';
22
+
23
+ dayjs.extend(utc);
24
+ dayjs.extend(timezone);
25
+
26
+ const MuiTimePickerStyled = styled(MuiTimePicker)({
27
+ '& .MuiOutlinedInput-notchedOutline': {
28
+ border: 'none',
29
+ borderRadius: 0,
30
+ borderBottom: '1px solid #666666',
31
+ },
32
+ '& .MuiFormLabel-root': {
33
+ backgroundColor: '#fff',
34
+ padding: '0 5px',
35
+ },
36
+ });
37
+
38
+ const MuiMobileTimePickerStyled = styled(MuiMobileTimePicker)({
39
+ '& .MuiOutlinedInput-notchedOutline': {
40
+ border: 'none',
41
+ borderRadius: 0,
42
+ borderBottom: '1px solid #666666',
43
+ },
44
+ '& .MuiFormLabel-root': {
45
+ backgroundColor: '#fff',
46
+ padding: '0 5px',
47
+ },
48
+ });
49
+
50
+ const MuiDesktopTimePickerStyled = styled(MuiDesktopTimePicker)({
51
+ '& .MuiOutlinedInput-notchedOutline': {
52
+ border: 'none',
53
+ borderRadius: 0,
54
+ borderBottom: '1px solid #666666',
55
+ },
56
+ '& .MuiFormLabel-root': {
57
+ backgroundColor: '#fff',
58
+ padding: '0 5px',
59
+ },
60
+ });
61
+
62
+ export const TimePicker = ({
63
+ label,
64
+ timezone = 'America/Sao_Paulo',
65
+ language = 'pt-br',
66
+ variant = 'desktop',
67
+ }: TimePickerBaseProps) => {
68
+
69
+ return (
70
+ <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale={language}>
71
+ <DemoContainer components={['TimePicker', 'MobileTimePicker', 'DesktopTimePicker']}>
72
+ {variant === 'responsive' && <MuiTimePickerStyled label={label} timezone={timezone} />}
73
+ {variant === 'mobile' && <MuiMobileTimePickerStyled label={label} timezone={timezone} />}
74
+ {variant === 'desktop' && <MuiDesktopTimePickerStyled label={label} timezone={timezone} />}
75
+ </DemoContainer>
76
+ </LocalizationProvider>
77
+ );
78
+ };
@@ -1,21 +1,21 @@
1
- import React from "react"
2
- import { TextProps } from "./interfaces"
3
- import * as S from "./styles"
4
-
5
- const Text:React.FC<TextProps> = ({
6
- children,
7
- className,
8
- size,
9
- type
10
- }) => {
11
- return (
12
- <S.Container
13
- className={className}
14
- size={size}
15
- type={type}>
16
- { children }
17
- </S.Container>
18
- )
19
- }
20
-
1
+ import React from "react"
2
+ import { TextProps } from "./interfaces"
3
+ import * as S from "./styles"
4
+
5
+ const Text:React.FC<TextProps> = ({
6
+ children,
7
+ className,
8
+ size,
9
+ type
10
+ }) => {
11
+ return (
12
+ <S.Container
13
+ className={className}
14
+ size={size}
15
+ type={type}>
16
+ { children }
17
+ </S.Container>
18
+ )
19
+ }
20
+
21
21
  export default Text
@@ -1,6 +1,6 @@
1
- export interface TextProps {
2
- children: JSX.Element[] | JSX.Element | string
3
- className?: string
4
- size: string
5
- type: string
1
+ export interface TextProps {
2
+ children: JSX.Element[] | JSX.Element | string
3
+ className?: string
4
+ size: string
5
+ type: string
6
6
  }
@@ -1,41 +1,41 @@
1
- import styled from "styled-components";
2
- import { TextProps } from "./interfaces";
3
-
4
- const setSize = (size: string) => {
5
- switch (size) {
6
- case "small":
7
- return "12px";
8
- case "medium":
9
- return "14px";
10
- case "large":
11
- return "16px"
12
- default:
13
- return "14px";
14
- }
15
- }
16
-
17
- const setColor = (size: string) => {
18
- switch (size) {
19
- case "default":
20
- return "var(--primary-project, var(--secondary, pink));";
21
- case "secondary":
22
- return "#808495";
23
- case "success":
24
- return "#6BC235"
25
- case "warning":
26
- return "#FF7F11"
27
- case "danger":
28
- return "#D63643"
29
- case "info":
30
- return "#43BBF2"
31
- default:
32
- return "#666";
33
- }
34
- }
35
-
36
- export const Container = styled.p<TextProps>`
37
- margin: 0;
38
- padding: 0;
39
- color: ${props => setColor(props.type)};
40
- font-size: ${props => setSize(props.size)};
1
+ import styled from "styled-components";
2
+ import { TextProps } from "./interfaces";
3
+
4
+ const setSize = (size: string) => {
5
+ switch (size) {
6
+ case "small":
7
+ return "12px";
8
+ case "medium":
9
+ return "14px";
10
+ case "large":
11
+ return "16px"
12
+ default:
13
+ return "14px";
14
+ }
15
+ }
16
+
17
+ const setColor = (size: string) => {
18
+ switch (size) {
19
+ case "default":
20
+ return "var(--primary-project, var(--secondary, pink));";
21
+ case "secondary":
22
+ return "#808495";
23
+ case "success":
24
+ return "#6BC235"
25
+ case "warning":
26
+ return "#FF7F11"
27
+ case "danger":
28
+ return "#D63643"
29
+ case "info":
30
+ return "#43BBF2"
31
+ default:
32
+ return "#666";
33
+ }
34
+ }
35
+
36
+ export const Container = styled.p<TextProps>`
37
+ margin: 0;
38
+ padding: 0;
39
+ color: ${props => setColor(props.type)};
40
+ font-size: ${props => setSize(props.size)};
41
41
  `
@@ -1,23 +1,23 @@
1
- import React from "react"
2
- import { TextProps } from "./interfaces"
3
- import * as S from "./styles"
4
-
5
- const Text:React.FC<TextProps> = ({
6
- children,
7
- className,
8
- size,
9
- type,
10
- as
11
- }) => {
12
- return (
13
- <S.Container
14
- as={as}
15
- className={className}
16
- size={size}
17
- type={type}>
18
- { children }
19
- </S.Container>
20
- )
21
- }
22
-
1
+ import React from "react"
2
+ import { TextProps } from "./interfaces"
3
+ import * as S from "./styles"
4
+
5
+ const Text:React.FC<TextProps> = ({
6
+ children,
7
+ className,
8
+ size,
9
+ type,
10
+ as
11
+ }) => {
12
+ return (
13
+ <S.Container
14
+ as={as}
15
+ className={className}
16
+ size={size}
17
+ type={type}>
18
+ { children }
19
+ </S.Container>
20
+ )
21
+ }
22
+
23
23
  export default Text
@@ -1,7 +1,7 @@
1
- export interface TextProps {
2
- children: JSX.Element[] | JSX.Element | string
3
- className?: string
4
- size: string
5
- type: string
6
- as?: string
1
+ export interface TextProps {
2
+ children: JSX.Element[] | JSX.Element | string
3
+ className?: string
4
+ size: string
5
+ type: string
6
+ as?: string
7
7
  }