norma-library 0.5.130 → 0.5.131

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 (159) 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/RadioGroup.js +1 -1
  9. package/dist/esm/components/RadioGroup.js.map +1 -1
  10. package/docs/index.md +118 -118
  11. package/package.json +136 -136
  12. package/src/components/Accordion.tsx +39 -39
  13. package/src/components/Avatar.tsx +17 -17
  14. package/src/components/Badge.tsx +14 -14
  15. package/src/components/Box/index.tsx +12 -12
  16. package/src/components/Box/interfaces.ts +3 -3
  17. package/src/components/Box/styles.tsx +22 -22
  18. package/src/components/Breadcrumb/index.tsx +27 -27
  19. package/src/components/Breadcrumb/interface.ts +8 -8
  20. package/src/components/Breadcrumb/styles.tsx +32 -32
  21. package/src/components/Button.tsx +26 -26
  22. package/src/components/Card.tsx +37 -37
  23. package/src/components/ChatMessage.tsx +87 -87
  24. package/src/components/ChatMessageBalloon/ChatMessageBalloon.style.ts +56 -56
  25. package/src/components/ChatMessageBalloon/ChatMessageBalloon.tsx +55 -55
  26. package/src/components/CheckBox.tsx +21 -21
  27. package/src/components/DateInput/index.tsx +34 -34
  28. package/src/components/DateInput/interface.ts +13 -13
  29. package/src/components/DateInput/styles.tsx +27 -27
  30. package/src/components/DatePicker.tsx +67 -67
  31. package/src/components/DropDown.tsx +24 -24
  32. package/src/components/IconButton.tsx +37 -37
  33. package/src/components/Icons.tsx +82 -82
  34. package/src/components/Modal.tsx +113 -113
  35. package/src/components/MultiSelectInput/components/MultiValue/index.tsx +44 -44
  36. package/src/components/MultiSelectInput/components/Option/index.tsx +62 -62
  37. package/src/components/MultiSelectInput/components/Option/styles.tsx +8 -8
  38. package/src/components/MultiSelectInput/index.tsx +60 -60
  39. package/src/components/MultiSelectInput/interfaces.ts +15 -15
  40. package/src/components/MultiSelectInput/styles.tsx +43 -43
  41. package/src/components/Paper.tsx +12 -12
  42. package/src/components/ProgressBar.tsx +50 -50
  43. package/src/components/RadioGroup.tsx +43 -43
  44. package/src/components/RangerSlider.tsx +65 -65
  45. package/src/components/Select.tsx +74 -74
  46. package/src/components/SelectInput/components/Option/index.tsx +61 -61
  47. package/src/components/SelectInput/components/Option/styles.tsx +8 -8
  48. package/src/components/SelectInput/index.tsx +45 -45
  49. package/src/components/SelectInput/interfaces.ts +15 -15
  50. package/src/components/SelectInput/styles.tsx +31 -31
  51. package/src/components/Svgs.tsx +506 -506
  52. package/src/components/Table/components/header/index.tsx +86 -86
  53. package/src/components/Table/components/header/styles.tsx +59 -59
  54. package/src/components/Table/components/index.tsx +8 -8
  55. package/src/components/Table/components/pagination/index.tsx +39 -39
  56. package/src/components/Table/components/pagination/styles.tsx +28 -28
  57. package/src/components/Table/components/tbody/index.tsx +30 -30
  58. package/src/components/Table/components/tbody/styles.tsx +4 -4
  59. package/src/components/Table/index.tsx +317 -317
  60. package/src/components/Table/interface.ts +23 -23
  61. package/src/components/Table/styles.tsx +117 -117
  62. package/src/components/Tabs.tsx +105 -105
  63. package/src/components/Tag.tsx +33 -33
  64. package/src/components/TextField.tsx +19 -19
  65. package/src/components/TextInput/index.tsx +37 -37
  66. package/src/components/TextInput/interface.ts +9 -9
  67. package/src/components/TextInput/styles.tsx +23 -23
  68. package/src/components/TimeLine.tsx +89 -89
  69. package/src/components/TimePicker.tsx +78 -78
  70. package/src/components/Typography/Text/index.tsx +20 -20
  71. package/src/components/Typography/Text/interfaces.ts +5 -5
  72. package/src/components/Typography/Text/styles.tsx +40 -40
  73. package/src/components/Typography/Title/index.tsx +22 -22
  74. package/src/components/Typography/Title/interfaces.ts +6 -6
  75. package/src/components/Typography/Title/styles.tsx +40 -40
  76. package/src/components/Typography/index.tsx +6 -6
  77. package/src/components/UncontrolledTable/components/header/index.tsx +63 -63
  78. package/src/components/UncontrolledTable/components/header/styles.tsx +59 -59
  79. package/src/components/UncontrolledTable/components/index.tsx +8 -8
  80. package/src/components/UncontrolledTable/components/pagination/index.tsx +43 -43
  81. package/src/components/UncontrolledTable/components/pagination/styles.tsx +28 -28
  82. package/src/components/UncontrolledTable/components/tbody/index.tsx +30 -30
  83. package/src/components/UncontrolledTable/components/tbody/styles.tsx +4 -4
  84. package/src/components/UncontrolledTable/index.tsx +226 -226
  85. package/src/components/UncontrolledTable/interface.ts +42 -42
  86. package/src/components/UncontrolledTable/styles.tsx +120 -120
  87. package/src/components/UncontrolledTabs/UncontrolledTabs.style.tsx +51 -51
  88. package/src/components/UncontrolledTabs/UncontrolledTabs.tsx +68 -68
  89. package/src/components/index.ts +24 -24
  90. package/src/helpers/alignments.ts +14 -14
  91. package/src/helpers/borders.ts +18 -18
  92. package/src/helpers/colors.ts +206 -206
  93. package/src/helpers/index.ts +5 -5
  94. package/src/helpers/radios.ts +24 -24
  95. package/src/helpers/sizes.ts +72 -72
  96. package/src/index.ts +66 -66
  97. package/src/interfaces/Accordion.ts +12 -12
  98. package/src/interfaces/Avatar.tsx +15 -15
  99. package/src/interfaces/Badge.ts +19 -19
  100. package/src/interfaces/Button.ts +22 -22
  101. package/src/interfaces/Card.ts +11 -11
  102. package/src/interfaces/ChatMessage.ts +12 -12
  103. package/src/interfaces/ChatMessageBalloon.ts +17 -17
  104. package/src/interfaces/CheckBox.ts +27 -27
  105. package/src/interfaces/DatePicker.ts +13 -13
  106. package/src/interfaces/DropDown.ts +14 -14
  107. package/src/interfaces/IconButton.ts +22 -22
  108. package/src/interfaces/Icons.ts +17 -17
  109. package/src/interfaces/Modal.ts +16 -16
  110. package/src/interfaces/Paper.ts +12 -12
  111. package/src/interfaces/ProgressBar.ts +19 -19
  112. package/src/interfaces/RadioGroup.ts +23 -23
  113. package/src/interfaces/RangerSlider.ts +21 -21
  114. package/src/interfaces/Select.ts +17 -17
  115. package/src/interfaces/Tabs.ts +19 -19
  116. package/src/interfaces/Tag.ts +17 -17
  117. package/src/interfaces/TextField.ts +44 -44
  118. package/src/interfaces/TimeLine.ts +11 -11
  119. package/src/interfaces/TimePicker.ts +13 -13
  120. package/src/interfaces/index.ts +23 -23
  121. package/src/providers/NormaProvider.tsx +13 -13
  122. package/src/sample-data-2.json +178 -178
  123. package/src/sample-data.json +177 -177
  124. package/src/stories/Accordion.stories.tsx +65 -65
  125. package/src/stories/Avatar.stories.tsx +123 -123
  126. package/src/stories/Badge.stories.tsx +39 -39
  127. package/src/stories/Box.stories.tsx +35 -35
  128. package/src/stories/Breadcrumb.stories.tsx +44 -44
  129. package/src/stories/Button.stories.tsx +93 -93
  130. package/src/stories/Card.stories.tsx +39 -39
  131. package/src/stories/ChatMessage.stories.tsx +84 -84
  132. package/src/stories/ChatMessageBalloon.stories.tsx +108 -108
  133. package/src/stories/CheckBox.stories.tsx +88 -88
  134. package/src/stories/DateInput.stories.tsx +51 -51
  135. package/src/stories/DatePicker.stories.tsx +50 -50
  136. package/src/stories/DropDown.stories.tsx +57 -57
  137. package/src/stories/IconButton.stories.tsx +78 -78
  138. package/src/stories/Modal.stories.tsx +195 -195
  139. package/src/stories/MultiSelectInput.stories.tsx +90 -90
  140. package/src/stories/Paper.stories.tsx +53 -53
  141. package/src/stories/ProgressBar.stories.tsx +95 -95
  142. package/src/stories/RadioGroup.stories.tsx +87 -87
  143. package/src/stories/RangerSlider.stories.tsx +58 -58
  144. package/src/stories/Select.stories.tsx +100 -100
  145. package/src/stories/SelectInput.stories.tsx +78 -78
  146. package/src/stories/Table.stories.tsx +372 -372
  147. package/src/stories/Tabs.stories.tsx +61 -61
  148. package/src/stories/Tag.stories.tsx +56 -56
  149. package/src/stories/Text.stories.tsx +37 -37
  150. package/src/stories/TextField.stories.tsx +310 -310
  151. package/src/stories/TextInput.stories.tsx +52 -52
  152. package/src/stories/TimeLine.stories.tsx +35 -35
  153. package/src/stories/TimePicker.stories.tsx +87 -87
  154. package/src/stories/Title.stories.tsx +43 -43
  155. package/src/stories/UncontrolledTable.stories.tsx +337 -337
  156. package/src/stories/UncontrolledTabs.stories.tsx +63 -63
  157. package/src/styles/globals.scss +17 -17
  158. package/src/types/index.ts +204 -204
  159. package/vite.config.ts +15 -15
@@ -1,28 +1,28 @@
1
- import styled from "styled-components";
2
- import "react-datepicker/dist/react-datepicker.css";
3
- import { ContainerStyles } from './interface';
4
-
5
- export const Container = styled.div<ContainerStyles>`
6
- width: 100%;
7
- display: flex;
8
- flex-direction: column;
9
- .react-datepicker-wrapper {
10
- width: 100%;
11
- input {
12
- border: none;
13
- color: #4D4F5C;
14
- border-bottom: 1px solid #00000033;
15
- outline: none;
16
- font-size: 18px;
17
- padding: 8px;
18
- width: 100%;
19
- font-size: 16px;
20
- }
21
- }
22
- `
23
-
24
- export const Label = styled.label`
25
- font-size: 14px;
26
- margin: 0 0 4px 0;
27
- color: #666;
1
+ import styled from "styled-components";
2
+ import "react-datepicker/dist/react-datepicker.css";
3
+ import { ContainerStyles } from './interface';
4
+
5
+ export const Container = styled.div<ContainerStyles>`
6
+ width: 100%;
7
+ display: flex;
8
+ flex-direction: column;
9
+ .react-datepicker-wrapper {
10
+ width: 100%;
11
+ input {
12
+ border: none;
13
+ color: #4D4F5C;
14
+ border-bottom: 1px solid #00000033;
15
+ outline: none;
16
+ font-size: 18px;
17
+ padding: 8px;
18
+ width: 100%;
19
+ font-size: 16px;
20
+ }
21
+ }
22
+ `
23
+
24
+ export const Label = styled.label`
25
+ font-size: 14px;
26
+ margin: 0 0 4px 0;
27
+ color: #666;
28
28
  `
@@ -1,67 +1,67 @@
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 { DatePicker as MuiDatePicker } from '@mui/x-date-pickers/DatePicker';
6
- import { MobileDatePicker as MuiMobileDatePicker } from '@mui/x-date-pickers/MobileDatePicker';
7
- import { DesktopDatePicker as MuiDesktopDatePicker } from '@mui/x-date-pickers/DesktopDatePicker';
8
- import { DatePickerBaseProps } from '../interfaces';
9
- import { styled } from '@mui/material/styles';
10
-
11
- import 'dayjs/locale/pt-br';
12
- import 'dayjs/locale/en';
13
- import 'dayjs/locale/es';
14
-
15
- const MuiDatePickerStyled = styled(MuiDatePicker)({
16
- '& .MuiOutlinedInput-notchedOutline': {
17
- border: 'none',
18
- borderRadius: 0,
19
- borderBottom: '1px solid #666666',
20
- },
21
- '& .MuiFormLabel-root': {
22
- backgroundColor: '#fff',
23
- padding: '0 5px',
24
- },
25
- });
26
-
27
- const MuiMobileDatePickerStyled = styled(MuiMobileDatePicker)({
28
- '& .MuiOutlinedInput-notchedOutline': {
29
- border: 'none',
30
- borderRadius: 0,
31
- borderBottom: '1px solid #666666',
32
- },
33
- '& .MuiFormLabel-root': {
34
- backgroundColor: '#fff',
35
- padding: '0 5px',
36
- },
37
- });
38
-
39
- const MuiDesktopDatePickerStyled = styled(MuiDesktopDatePicker)({
40
- '& .MuiOutlinedInput-notchedOutline': {
41
- border: 'none',
42
- borderRadius: 0,
43
- borderBottom: '1px solid #666666',
44
- },
45
- '& .MuiFormLabel-root': {
46
- backgroundColor: '#fff',
47
- padding: '0 5px',
48
- },
49
- });
50
-
51
- export const DatePicker = ({
52
- label,
53
- format = 'DD/MM/YYYY',
54
- language = 'pt-br',
55
- variant = 'desktop',
56
- }: DatePickerBaseProps) => {
57
-
58
- return (
59
- <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale={language}>
60
- <DemoContainer components={['TimePicker', 'MobileTimePicker', 'DesktopTimePicker']}>
61
- {variant === 'responsive' && <MuiDatePickerStyled label={label} format={format} />}
62
- {variant === 'mobile' && <MuiMobileDatePickerStyled label={label} format={format} />}
63
- {variant === 'desktop' && <MuiDesktopDatePickerStyled label={label} format={format} />}
64
- </DemoContainer>
65
- </LocalizationProvider>
66
- );
67
- };
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 { DatePicker as MuiDatePicker } from '@mui/x-date-pickers/DatePicker';
6
+ import { MobileDatePicker as MuiMobileDatePicker } from '@mui/x-date-pickers/MobileDatePicker';
7
+ import { DesktopDatePicker as MuiDesktopDatePicker } from '@mui/x-date-pickers/DesktopDatePicker';
8
+ import { DatePickerBaseProps } from '../interfaces';
9
+ import { styled } from '@mui/material/styles';
10
+
11
+ import 'dayjs/locale/pt-br';
12
+ import 'dayjs/locale/en';
13
+ import 'dayjs/locale/es';
14
+
15
+ const MuiDatePickerStyled = styled(MuiDatePicker)({
16
+ '& .MuiOutlinedInput-notchedOutline': {
17
+ border: 'none',
18
+ borderRadius: 0,
19
+ borderBottom: '1px solid #666666',
20
+ },
21
+ '& .MuiFormLabel-root': {
22
+ backgroundColor: '#fff',
23
+ padding: '0 5px',
24
+ },
25
+ });
26
+
27
+ const MuiMobileDatePickerStyled = styled(MuiMobileDatePicker)({
28
+ '& .MuiOutlinedInput-notchedOutline': {
29
+ border: 'none',
30
+ borderRadius: 0,
31
+ borderBottom: '1px solid #666666',
32
+ },
33
+ '& .MuiFormLabel-root': {
34
+ backgroundColor: '#fff',
35
+ padding: '0 5px',
36
+ },
37
+ });
38
+
39
+ const MuiDesktopDatePickerStyled = styled(MuiDesktopDatePicker)({
40
+ '& .MuiOutlinedInput-notchedOutline': {
41
+ border: 'none',
42
+ borderRadius: 0,
43
+ borderBottom: '1px solid #666666',
44
+ },
45
+ '& .MuiFormLabel-root': {
46
+ backgroundColor: '#fff',
47
+ padding: '0 5px',
48
+ },
49
+ });
50
+
51
+ export const DatePicker = ({
52
+ label,
53
+ format = 'DD/MM/YYYY',
54
+ language = 'pt-br',
55
+ variant = 'desktop',
56
+ }: DatePickerBaseProps) => {
57
+
58
+ return (
59
+ <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale={language}>
60
+ <DemoContainer components={['TimePicker', 'MobileTimePicker', 'DesktopTimePicker']}>
61
+ {variant === 'responsive' && <MuiDatePickerStyled label={label} format={format} />}
62
+ {variant === 'mobile' && <MuiMobileDatePickerStyled label={label} format={format} />}
63
+ {variant === 'desktop' && <MuiDesktopDatePickerStyled label={label} format={format} />}
64
+ </DemoContainer>
65
+ </LocalizationProvider>
66
+ );
67
+ };
@@ -1,24 +1,24 @@
1
- import React from 'react';
2
- import { Menu as MuiDropDown } from '@mui/material';
3
- import { DropDownBaseProps } from '../interfaces';
4
- import { styled } from '@mui/material/styles';
5
-
6
- const DropDownStyled = styled(MuiDropDown)({});
7
-
8
- export const DropDown = ({ open, children, ...props }: DropDownBaseProps) => {
9
-
10
- return (
11
- <DropDownStyled
12
- open
13
- id="basic-menu"
14
- anchorEl={props.anchorEl}
15
- onClose={props.onClose}
16
- MenuListProps={{
17
- 'aria-labelledby': 'basic-button',
18
- }}
19
- {...props}
20
- >
21
- {children}
22
- </DropDownStyled>
23
- );
24
- };
1
+ import React from 'react';
2
+ import { Menu as MuiDropDown } from '@mui/material';
3
+ import { DropDownBaseProps } from '../interfaces';
4
+ import { styled } from '@mui/material/styles';
5
+
6
+ const DropDownStyled = styled(MuiDropDown)({});
7
+
8
+ export const DropDown = ({ open, children, ...props }: DropDownBaseProps) => {
9
+
10
+ return (
11
+ <DropDownStyled
12
+ open
13
+ id="basic-menu"
14
+ anchorEl={props.anchorEl}
15
+ onClose={props.onClose}
16
+ MenuListProps={{
17
+ 'aria-labelledby': 'basic-button',
18
+ }}
19
+ {...props}
20
+ >
21
+ {children}
22
+ </DropDownStyled>
23
+ );
24
+ };
@@ -1,37 +1,37 @@
1
- import React from 'react';
2
- import { IconButton as MuiIconButton } from '@mui/material';
3
- import { IconButtonBaseProps } from '../interfaces';
4
- import { palette } from '../helpers';
5
- import { styled } from '@mui/material/styles';
6
- import { ButtonVariant, ColorVariant } from '@/types';
7
-
8
- const colorMap: Record<ColorVariant, string> = {
9
- inherit: palette.inherit,
10
- primary: palette.primary,
11
- secondary: palette.secondary,
12
- error: palette.error,
13
- warning: palette.warning,
14
- info: palette.info,
15
- success: palette.success,
16
- };
17
-
18
- const IconButtonStyled = styled(MuiIconButton)<{
19
- circle: boolean;
20
- color: ColorVariant;
21
- variant: ButtonVariant;
22
- cursor: string;
23
- }>(({ circle, color, variant, cursor }) => ({
24
- borderRadius: circle === true ? 99 : 5,
25
- border: variant === 'outlined' ? `1px solid ${colorMap[color]}` : 'none',
26
- backgroundColor: variant === 'contained' ? `${colorMap[color]}` : 'none',
27
- cursor: cursor,
28
- }));
29
-
30
- export const IconButton = ({ circle = false, children, ...props }: IconButtonBaseProps) => {
31
-
32
- return (
33
- <IconButtonStyled circle={circle} color="primary" variant="text" cursor="default" {...props}>
34
- {children}
35
- </IconButtonStyled>
36
- );
37
- };
1
+ import React from 'react';
2
+ import { IconButton as MuiIconButton } from '@mui/material';
3
+ import { IconButtonBaseProps } from '../interfaces';
4
+ import { palette } from '../helpers';
5
+ import { styled } from '@mui/material/styles';
6
+ import { ButtonVariant, ColorVariant } from '@/types';
7
+
8
+ const colorMap: Record<ColorVariant, string> = {
9
+ inherit: palette.inherit,
10
+ primary: palette.primary,
11
+ secondary: palette.secondary,
12
+ error: palette.error,
13
+ warning: palette.warning,
14
+ info: palette.info,
15
+ success: palette.success,
16
+ };
17
+
18
+ const IconButtonStyled = styled(MuiIconButton)<{
19
+ circle: boolean;
20
+ color: ColorVariant;
21
+ variant: ButtonVariant;
22
+ cursor: string;
23
+ }>(({ circle, color, variant, cursor }) => ({
24
+ borderRadius: circle === true ? 99 : 5,
25
+ border: variant === 'outlined' ? `1px solid ${colorMap[color]}` : 'none',
26
+ backgroundColor: variant === 'contained' ? `${colorMap[color]}` : 'none',
27
+ cursor: cursor,
28
+ }));
29
+
30
+ export const IconButton = ({ circle = false, children, ...props }: IconButtonBaseProps) => {
31
+
32
+ return (
33
+ <IconButtonStyled circle={circle} color="primary" variant="text" cursor="default" {...props}>
34
+ {children}
35
+ </IconButtonStyled>
36
+ );
37
+ };
@@ -1,82 +1,82 @@
1
- import React, { FunctionComponent } from 'react';
2
- import { iconsSVG } from './Svgs';
3
- import { IconColors, IconScale } from '../types';
4
- import { IconsProps, SvgProps } from '../interfaces/Icons';
5
- import styled from '@emotion/styled';
6
- import { palette } from '../helpers';
7
-
8
- export const Svg = styled.svg<SvgProps>(
9
- {
10
- shapeRendering: 'inherit',
11
- transform: 'translate3d(0,0,0)',
12
- },
13
- ({ inline }) => (inline ? { display: 'inline-block' } : { display: 'block' }),
14
- );
15
-
16
- const scaleSize: Record<IconScale, number> = {
17
- xsmall: 14,
18
- small: 20,
19
- medium: 24,
20
- large: 28,
21
- xlarge: 32,
22
- '2xlarge': 36,
23
- '3xlarge': 40,
24
- };
25
-
26
- // Definindo um objeto com as cores de preenchimento e traço com base no MUI
27
- const colors: Record<IconColors, string> = {
28
- inherit: palette.inherit,
29
- primary: palette.primary,
30
- secondary: palette.secondary,
31
- error: palette.error,
32
- info: palette.info,
33
- success: palette.success,
34
- warning: palette.warning,
35
- white: palette.white,
36
- black: palette.black,
37
- };
38
-
39
- export const Icons: FunctionComponent<IconsProps> = ({
40
- icon,
41
- scale,
42
- useSymbol,
43
- color = 'inherit',
44
- ...props
45
- }: IconsProps) => {
46
- let width = 24;
47
- let height = 24;
48
- if (scale) {
49
- width = scaleSize[scale];
50
- height = scaleSize[scale];
51
- }
52
-
53
- // Obtém a cor de preenchimento e traço com base no valor da prop 'color'
54
- const fill = colors[color];
55
- const stroke = colors[color];
56
-
57
- const Svg = styled.svg`
58
- display: inline-block;
59
- shape-rendering: inherit;
60
- vertical-align: middle;
61
- fill: ${fill};
62
- path {
63
- stroke: ${stroke};
64
- }
65
- circle {
66
- stroke: ${stroke};
67
- }
68
- rect {
69
- stroke: ${stroke};
70
- }
71
- `;
72
-
73
- return (
74
- <Svg viewBox="0 0 56 56" width={`${width}px`} height={`${height}px`} {...props}>
75
- {useSymbol ? (
76
- <use xlinkHref={`#icon--${icon}`} fill={fill} stroke={stroke} />
77
- ) : (
78
- React.cloneElement(iconsSVG[icon], { fill, stroke })
79
- )}
80
- </Svg>
81
- );
82
- };
1
+ import React, { FunctionComponent } from 'react';
2
+ import { iconsSVG } from './Svgs';
3
+ import { IconColors, IconScale } from '../types';
4
+ import { IconsProps, SvgProps } from '../interfaces/Icons';
5
+ import styled from '@emotion/styled';
6
+ import { palette } from '../helpers';
7
+
8
+ export const Svg = styled.svg<SvgProps>(
9
+ {
10
+ shapeRendering: 'inherit',
11
+ transform: 'translate3d(0,0,0)',
12
+ },
13
+ ({ inline }) => (inline ? { display: 'inline-block' } : { display: 'block' }),
14
+ );
15
+
16
+ const scaleSize: Record<IconScale, number> = {
17
+ xsmall: 14,
18
+ small: 20,
19
+ medium: 24,
20
+ large: 28,
21
+ xlarge: 32,
22
+ '2xlarge': 36,
23
+ '3xlarge': 40,
24
+ };
25
+
26
+ // Definindo um objeto com as cores de preenchimento e traço com base no MUI
27
+ const colors: Record<IconColors, string> = {
28
+ inherit: palette.inherit,
29
+ primary: palette.primary,
30
+ secondary: palette.secondary,
31
+ error: palette.error,
32
+ info: palette.info,
33
+ success: palette.success,
34
+ warning: palette.warning,
35
+ white: palette.white,
36
+ black: palette.black,
37
+ };
38
+
39
+ export const Icons: FunctionComponent<IconsProps> = ({
40
+ icon,
41
+ scale,
42
+ useSymbol,
43
+ color = 'inherit',
44
+ ...props
45
+ }: IconsProps) => {
46
+ let width = 24;
47
+ let height = 24;
48
+ if (scale) {
49
+ width = scaleSize[scale];
50
+ height = scaleSize[scale];
51
+ }
52
+
53
+ // Obtém a cor de preenchimento e traço com base no valor da prop 'color'
54
+ const fill = colors[color];
55
+ const stroke = colors[color];
56
+
57
+ const Svg = styled.svg`
58
+ display: inline-block;
59
+ shape-rendering: inherit;
60
+ vertical-align: middle;
61
+ fill: ${fill};
62
+ path {
63
+ stroke: ${stroke};
64
+ }
65
+ circle {
66
+ stroke: ${stroke};
67
+ }
68
+ rect {
69
+ stroke: ${stroke};
70
+ }
71
+ `;
72
+
73
+ return (
74
+ <Svg viewBox="0 0 56 56" width={`${width}px`} height={`${height}px`} {...props}>
75
+ {useSymbol ? (
76
+ <use xlinkHref={`#icon--${icon}`} fill={fill} stroke={stroke} />
77
+ ) : (
78
+ React.cloneElement(iconsSVG[icon], { fill, stroke })
79
+ )}
80
+ </Svg>
81
+ );
82
+ };