norma-library 0.6.6 → 0.6.62

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 (164) 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/helpers/colors.js +1 -1
  9. package/docs/index.md +118 -118
  10. package/package.json +136 -136
  11. package/src/components/Accordion.tsx +39 -39
  12. package/src/components/Avatar.tsx +17 -17
  13. package/src/components/Badge.tsx +14 -14
  14. package/src/components/Box/index.tsx +12 -12
  15. package/src/components/Box/interfaces.ts +3 -3
  16. package/src/components/Box/styles.tsx +22 -22
  17. package/src/components/Breadcrumb/index.tsx +27 -27
  18. package/src/components/Breadcrumb/interface.ts +8 -8
  19. package/src/components/Breadcrumb/styles.tsx +32 -32
  20. package/src/components/Button.tsx +26 -26
  21. package/src/components/Card.tsx +37 -37
  22. package/src/components/ChatMessage.tsx +87 -87
  23. package/src/components/ChatMessageBalloon/ChatMessageBalloon.style.ts +56 -56
  24. package/src/components/ChatMessageBalloon/ChatMessageBalloon.tsx +55 -55
  25. package/src/components/CheckBox.tsx +21 -21
  26. package/src/components/DateInput/index.tsx +34 -34
  27. package/src/components/DateInput/interface.ts +13 -13
  28. package/src/components/DateInput/styles.tsx +27 -27
  29. package/src/components/DatePicker.tsx +67 -67
  30. package/src/components/DropDown.tsx +24 -24
  31. package/src/components/IconButton.tsx +37 -37
  32. package/src/components/Icons.tsx +82 -82
  33. package/src/components/Modal.tsx +103 -103
  34. package/src/components/MultiSelectInput/components/MultiValue/index.tsx +44 -44
  35. package/src/components/MultiSelectInput/components/Option/index.tsx +62 -62
  36. package/src/components/MultiSelectInput/components/Option/styles.tsx +8 -8
  37. package/src/components/MultiSelectInput/index.tsx +60 -60
  38. package/src/components/MultiSelectInput/interfaces.ts +15 -15
  39. package/src/components/MultiSelectInput/styles.tsx +43 -43
  40. package/src/components/Paper.tsx +12 -12
  41. package/src/components/ProgressBar.tsx +71 -71
  42. package/src/components/RadioGroup.tsx +43 -43
  43. package/src/components/RangerSlider.tsx +65 -65
  44. package/src/components/Select.tsx +74 -74
  45. package/src/components/SelectInput/components/Option/index.tsx +61 -61
  46. package/src/components/SelectInput/components/Option/styles.tsx +8 -8
  47. package/src/components/SelectInput/index.tsx +45 -45
  48. package/src/components/SelectInput/interfaces.ts +15 -15
  49. package/src/components/SelectInput/styles.tsx +31 -31
  50. package/src/components/StatusModal/StatusModal.style.tsx +75 -75
  51. package/src/components/StatusModal/StatusModal.tsx +58 -58
  52. package/src/components/Svgs.tsx +506 -506
  53. package/src/components/Table/components/header/index.tsx +86 -86
  54. package/src/components/Table/components/header/styles.tsx +59 -59
  55. package/src/components/Table/components/index.tsx +8 -8
  56. package/src/components/Table/components/pagination/index.tsx +39 -39
  57. package/src/components/Table/components/pagination/styles.tsx +28 -28
  58. package/src/components/Table/components/tbody/index.tsx +30 -30
  59. package/src/components/Table/components/tbody/styles.tsx +4 -4
  60. package/src/components/Table/index.tsx +317 -317
  61. package/src/components/Table/interface.ts +23 -23
  62. package/src/components/Table/styles.tsx +117 -117
  63. package/src/components/Tabs.tsx +105 -105
  64. package/src/components/Tag.tsx +33 -33
  65. package/src/components/TextField.tsx +19 -19
  66. package/src/components/TextInput/index.tsx +37 -37
  67. package/src/components/TextInput/interface.ts +9 -9
  68. package/src/components/TextInput/styles.tsx +23 -23
  69. package/src/components/TimeLine.tsx +89 -89
  70. package/src/components/TimePicker.tsx +78 -78
  71. package/src/components/Typography/Text/index.tsx +20 -20
  72. package/src/components/Typography/Text/interfaces.ts +5 -5
  73. package/src/components/Typography/Text/styles.tsx +40 -40
  74. package/src/components/Typography/Title/index.tsx +22 -22
  75. package/src/components/Typography/Title/interfaces.ts +6 -6
  76. package/src/components/Typography/Title/styles.tsx +40 -40
  77. package/src/components/Typography/index.tsx +6 -6
  78. package/src/components/UncontrolledTable/components/header/index.tsx +72 -72
  79. package/src/components/UncontrolledTable/components/header/styles.tsx +66 -66
  80. package/src/components/UncontrolledTable/components/index.tsx +8 -8
  81. package/src/components/UncontrolledTable/components/pagination/index.tsx +43 -43
  82. package/src/components/UncontrolledTable/components/pagination/styles.tsx +28 -28
  83. package/src/components/UncontrolledTable/components/tbody/index.tsx +33 -33
  84. package/src/components/UncontrolledTable/components/tbody/styles.tsx +32 -32
  85. package/src/components/UncontrolledTable/index.tsx +223 -223
  86. package/src/components/UncontrolledTable/interface.ts +46 -46
  87. package/src/components/UncontrolledTable/styles.tsx +123 -123
  88. package/src/components/UncontrolledTabs/UncontrolledTabs.style.tsx +58 -58
  89. package/src/components/UncontrolledTabs/UncontrolledTabs.tsx +71 -71
  90. package/src/components/UncontrolledTabs/UncontrolledTabsInfo.style.ts +8 -8
  91. package/src/components/index.ts +24 -24
  92. package/src/helpers/alignments.ts +14 -14
  93. package/src/helpers/borders.ts +18 -18
  94. package/src/helpers/colors.ts +258 -258
  95. package/src/helpers/index.ts +5 -5
  96. package/src/helpers/radios.ts +24 -24
  97. package/src/helpers/sizes.ts +72 -72
  98. package/src/hooks/useClickOutside.tsx +18 -18
  99. package/src/index.ts +70 -70
  100. package/src/interfaces/Accordion.ts +12 -12
  101. package/src/interfaces/Avatar.tsx +15 -15
  102. package/src/interfaces/Badge.ts +19 -19
  103. package/src/interfaces/Button.ts +22 -22
  104. package/src/interfaces/Card.ts +11 -11
  105. package/src/interfaces/ChatMessage.ts +12 -12
  106. package/src/interfaces/ChatMessageBalloon.ts +17 -17
  107. package/src/interfaces/CheckBox.ts +27 -27
  108. package/src/interfaces/DatePicker.ts +13 -13
  109. package/src/interfaces/DropDown.ts +14 -14
  110. package/src/interfaces/IconButton.ts +22 -22
  111. package/src/interfaces/Icons.ts +17 -17
  112. package/src/interfaces/Modal.ts +18 -18
  113. package/src/interfaces/Paper.ts +12 -12
  114. package/src/interfaces/ProgressBar.ts +29 -29
  115. package/src/interfaces/RadioGroup.ts +23 -23
  116. package/src/interfaces/RangerSlider.ts +21 -21
  117. package/src/interfaces/Select.ts +17 -17
  118. package/src/interfaces/Tabs.ts +19 -19
  119. package/src/interfaces/Tag.ts +17 -17
  120. package/src/interfaces/TextField.ts +44 -44
  121. package/src/interfaces/TimeLine.ts +11 -11
  122. package/src/interfaces/TimePicker.ts +13 -13
  123. package/src/interfaces/index.ts +23 -23
  124. package/src/providers/NormaProvider.tsx +13 -13
  125. package/src/sample-data-2.json +178 -178
  126. package/src/sample-data.json +177 -177
  127. package/src/stories/Accordion.stories.tsx +65 -65
  128. package/src/stories/Avatar.stories.tsx +123 -123
  129. package/src/stories/Badge.stories.tsx +39 -39
  130. package/src/stories/Box.stories.tsx +35 -35
  131. package/src/stories/Breadcrumb.stories.tsx +44 -44
  132. package/src/stories/Button.stories.tsx +93 -93
  133. package/src/stories/Card.stories.tsx +39 -39
  134. package/src/stories/ChatMessage.stories.tsx +84 -84
  135. package/src/stories/ChatMessageBalloon.stories.tsx +108 -108
  136. package/src/stories/CheckBox.stories.tsx +88 -88
  137. package/src/stories/DateInput.stories.tsx +51 -51
  138. package/src/stories/DatePicker.stories.tsx +50 -50
  139. package/src/stories/DropDown.stories.tsx +57 -57
  140. package/src/stories/IconButton.stories.tsx +78 -78
  141. package/src/stories/Modal.stories.tsx +246 -246
  142. package/src/stories/ModalStatus.stories.tsx +46 -46
  143. package/src/stories/MultiSelectInput.stories.tsx +90 -90
  144. package/src/stories/Paper.stories.tsx +53 -53
  145. package/src/stories/ProgressBar.stories.tsx +116 -116
  146. package/src/stories/RadioGroup.stories.tsx +87 -87
  147. package/src/stories/RangerSlider.stories.tsx +149 -149
  148. package/src/stories/Select.stories.tsx +100 -100
  149. package/src/stories/SelectInput.stories.tsx +78 -78
  150. package/src/stories/Table.stories.tsx +372 -372
  151. package/src/stories/Tabs.stories.tsx +61 -61
  152. package/src/stories/Tag.stories.tsx +56 -56
  153. package/src/stories/Text.stories.tsx +37 -37
  154. package/src/stories/TextField.stories.tsx +310 -310
  155. package/src/stories/TextInput.stories.tsx +52 -52
  156. package/src/stories/TimeLine.stories.tsx +35 -35
  157. package/src/stories/TimePicker.stories.tsx +87 -87
  158. package/src/stories/Title.stories.tsx +43 -43
  159. package/src/stories/UncontrolledTable.stories.tsx +315 -315
  160. package/src/stories/UncontrolledTabs.stories.tsx +74 -74
  161. package/src/styles/globals.scss +17 -17
  162. package/src/types/index.ts +207 -207
  163. package/src/utils/styledBreakpoints.ts +25 -25
  164. package/vite.config.ts +15 -15
@@ -1,61 +1,61 @@
1
- import React from 'react';
2
-
3
- import type { Meta, StoryObj } from '@storybook/react';
4
- import { Tabs } from '../components';
5
- import { DataTabs } from '../types';
6
- import { Typography } from '@mui/material';
7
-
8
- const data: DataTabs[] = [
9
- {
10
- label: 'Tab 1',
11
- id: 'panel-1',
12
- children: (
13
- <Typography>
14
- Tab 1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet
15
- blandit leo lobortis eget.
16
- </Typography>
17
- ),
18
- },
19
- {
20
- label: 'Tab 2',
21
- id: 'panel-2',
22
- children: (
23
- <Typography>
24
- Tab 2 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet
25
- blandit leo lobortis eget.
26
- </Typography>
27
- ),
28
- },
29
- ];
30
-
31
- const meta = {
32
- title: 'Display/Tabs',
33
- component: Tabs,
34
- parameters: {
35
- layout: 'centered',
36
- },
37
- tags: ['autodocs'],
38
- argTypes: {
39
- data: data,
40
- },
41
- } satisfies Meta<typeof Tabs>;
42
-
43
- export default meta;
44
-
45
- type Story = StoryObj<typeof meta>;
46
-
47
- export const Playground: Story = {
48
- args: {
49
- data: data,
50
- },
51
- };
52
-
53
- export const TabsBasic = () => {
54
- return (
55
- <div style={{ width: '480px', marginBottom: 30 }}>
56
- <Tabs data={data} onChange={(e, value) => console.log(e, value)} />
57
- </div>
58
- );
59
- };
60
-
61
- TabsBasic.storyName = 'Tabs Basic';
1
+ import React from 'react';
2
+
3
+ import type { Meta, StoryObj } from '@storybook/react';
4
+ import { Tabs } from '../components';
5
+ import { DataTabs } from '../types';
6
+ import { Typography } from '@mui/material';
7
+
8
+ const data: DataTabs[] = [
9
+ {
10
+ label: 'Tab 1',
11
+ id: 'panel-1',
12
+ children: (
13
+ <Typography>
14
+ Tab 1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet
15
+ blandit leo lobortis eget.
16
+ </Typography>
17
+ ),
18
+ },
19
+ {
20
+ label: 'Tab 2',
21
+ id: 'panel-2',
22
+ children: (
23
+ <Typography>
24
+ Tab 2 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet
25
+ blandit leo lobortis eget.
26
+ </Typography>
27
+ ),
28
+ },
29
+ ];
30
+
31
+ const meta = {
32
+ title: 'Display/Tabs',
33
+ component: Tabs,
34
+ parameters: {
35
+ layout: 'centered',
36
+ },
37
+ tags: ['autodocs'],
38
+ argTypes: {
39
+ data: data,
40
+ },
41
+ } satisfies Meta<typeof Tabs>;
42
+
43
+ export default meta;
44
+
45
+ type Story = StoryObj<typeof meta>;
46
+
47
+ export const Playground: Story = {
48
+ args: {
49
+ data: data,
50
+ },
51
+ };
52
+
53
+ export const TabsBasic = () => {
54
+ return (
55
+ <div style={{ width: '480px', marginBottom: 30 }}>
56
+ <Tabs data={data} onChange={(e, value) => console.log(e, value)} />
57
+ </div>
58
+ );
59
+ };
60
+
61
+ TabsBasic.storyName = 'Tabs Basic';
@@ -1,56 +1,56 @@
1
- import React from 'react';
2
-
3
- import type { Meta } from '@storybook/react';
4
- import { Tag } from '../components';
5
- import { ColorVariant, TextFieldSizeVariant } from '../types';
6
-
7
- const colors: ColorVariant[] = ['inherit', 'primary', 'secondary', 'success', 'error', 'info', 'warning'];
8
-
9
- const sizes: TextFieldSizeVariant[] = ['small', 'medium'];
10
-
11
- const meta = {
12
- title: 'Display/Tag',
13
- component: Tag,
14
- parameters: {
15
- layout: 'centered',
16
- },
17
- tags: ['autodocs'],
18
- argTypes: {},
19
- } satisfies Meta<typeof Tag>;
20
-
21
- export default meta;
22
-
23
- export const TagBasic = () => {
24
- return (
25
- <>
26
- <Tag label="Chip Filled" color="primary" style={{ margin: 5 }} />
27
- <Tag label="Chip Outlined" outlined style={{ margin: 5 }} />
28
- </>
29
- );
30
- };
31
-
32
- export const TagColors = () => {
33
- return (
34
- <>
35
- {colors.map((color, key) => (
36
- <div>
37
- <Tag label="Chip Filled" color={color} style={{ margin: 5 }} />
38
- <Tag label="Chip Outlined" color={color} outlined style={{ margin: 5 }} />
39
- </div>
40
- ))}
41
- </>
42
- );
43
- };
44
-
45
- export const TagSizes = () => {
46
- return (
47
- <>
48
- {sizes.map((size, key) => (
49
- <div>
50
- <Tag label="Chip Filled" size={size} style={{ margin: 5 }} />
51
- <Tag label="Chip Outlined" size={size} outlined={true} style={{ margin: 5 }} />
52
- </div>
53
- ))}
54
- </>
55
- );
56
- };
1
+ import React from 'react';
2
+
3
+ import type { Meta } from '@storybook/react';
4
+ import { Tag } from '../components';
5
+ import { ColorVariant, TextFieldSizeVariant } from '../types';
6
+
7
+ const colors: ColorVariant[] = ['inherit', 'primary', 'secondary', 'success', 'error', 'info', 'warning'];
8
+
9
+ const sizes: TextFieldSizeVariant[] = ['small', 'medium'];
10
+
11
+ const meta = {
12
+ title: 'Display/Tag',
13
+ component: Tag,
14
+ parameters: {
15
+ layout: 'centered',
16
+ },
17
+ tags: ['autodocs'],
18
+ argTypes: {},
19
+ } satisfies Meta<typeof Tag>;
20
+
21
+ export default meta;
22
+
23
+ export const TagBasic = () => {
24
+ return (
25
+ <>
26
+ <Tag label="Chip Filled" color="primary" style={{ margin: 5 }} />
27
+ <Tag label="Chip Outlined" outlined style={{ margin: 5 }} />
28
+ </>
29
+ );
30
+ };
31
+
32
+ export const TagColors = () => {
33
+ return (
34
+ <>
35
+ {colors.map((color, key) => (
36
+ <div>
37
+ <Tag label="Chip Filled" color={color} style={{ margin: 5 }} />
38
+ <Tag label="Chip Outlined" color={color} outlined style={{ margin: 5 }} />
39
+ </div>
40
+ ))}
41
+ </>
42
+ );
43
+ };
44
+
45
+ export const TagSizes = () => {
46
+ return (
47
+ <>
48
+ {sizes.map((size, key) => (
49
+ <div>
50
+ <Tag label="Chip Filled" size={size} style={{ margin: 5 }} />
51
+ <Tag label="Chip Outlined" size={size} outlined={true} style={{ margin: 5 }} />
52
+ </div>
53
+ ))}
54
+ </>
55
+ );
56
+ };
@@ -1,38 +1,38 @@
1
- import React from "react"
2
- import Text from '../components/Typography/Text';
3
-
4
- export default {
5
- title: 'Tipografia/Text',
6
- component: Text,
7
- tags: ['autodocs'],
8
- parameters: {
9
- layout: 'centered',
10
- },
11
- argTypes: {
12
- children: {
13
- description: 'Adiciona um children.'
14
- },
15
- className: {
16
- description: 'Adicione uma classe.',
17
- },
18
- size: {
19
- description: 'Adicione um tamanho.',
20
- options: ['small', 'medium', 'large'],
21
- control: { type: 'radio' }
22
- },
23
- type: {
24
- description: 'Adicione um tipo.',
25
- options: ['default', 'secondary', 'success', 'warning', 'danger', 'info'],
26
- control: { type: 'radio' }
27
- },
28
- }
29
- }
30
-
31
- export const Default = (args) => <Text {...args} />
32
-
33
- Default.args = {
34
- children: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.',
35
- className: '',
36
- size: 'default',
37
- type: ''
1
+ import React from "react"
2
+ import Text from '../components/Typography/Text';
3
+
4
+ export default {
5
+ title: 'Tipografia/Text',
6
+ component: Text,
7
+ tags: ['autodocs'],
8
+ parameters: {
9
+ layout: 'centered',
10
+ },
11
+ argTypes: {
12
+ children: {
13
+ description: 'Adiciona um children.'
14
+ },
15
+ className: {
16
+ description: 'Adicione uma classe.',
17
+ },
18
+ size: {
19
+ description: 'Adicione um tamanho.',
20
+ options: ['small', 'medium', 'large'],
21
+ control: { type: 'radio' }
22
+ },
23
+ type: {
24
+ description: 'Adicione um tipo.',
25
+ options: ['default', 'secondary', 'success', 'warning', 'danger', 'info'],
26
+ control: { type: 'radio' }
27
+ },
28
+ }
29
+ }
30
+
31
+ export const Default = (args) => <Text {...args} />
32
+
33
+ Default.args = {
34
+ children: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.',
35
+ className: '',
36
+ size: 'default',
37
+ type: ''
38
38
  }