pixel-react 1.6.7 → 1.6.8

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 (73) hide show
  1. package/lib/components/AppHeader/types.d.ts +2 -0
  2. package/lib/components/Charts/BarChart/BarChart.d.ts +1 -0
  3. package/lib/components/Charts/DashboardDonutChart/types.d.ts +6 -0
  4. package/lib/components/FileDropzone/RadioFilePreview.d.ts +4 -0
  5. package/lib/components/FileDropzone/types.d.ts +61 -0
  6. package/lib/components/MenuOption/types.d.ts +3 -2
  7. package/lib/components/Search/Search.d.ts +1 -1
  8. package/lib/components/Search/types.d.ts +4 -0
  9. package/lib/components/Table/Types.d.ts +1 -1
  10. package/lib/components/Tabs/types.d.ts +1 -0
  11. package/lib/index.d.ts +95 -23
  12. package/lib/index.esm.js +513 -294
  13. package/lib/index.esm.js.map +1 -1
  14. package/lib/index.js +514 -293
  15. package/lib/index.js.map +1 -1
  16. package/lib/tsconfig.tsbuildinfo +1 -1
  17. package/lib/utils/FormatString/FormatString.d.ts +1 -0
  18. package/package.json +1 -1
  19. package/src/StyleGuide/ColorPalette/colorPaletteList.ts +15 -0
  20. package/src/assets/Themes/BaseTheme.scss +5 -3
  21. package/src/assets/Themes/DarkTheme.scss +5 -3
  22. package/src/assets/icons/window_maximize.svg +1 -2
  23. package/src/assets/icons/window_restore.svg +4 -0
  24. package/src/components/AppHeader/AppHeader.scss +33 -0
  25. package/src/components/AppHeader/AppHeader.stories.tsx +133 -5
  26. package/src/components/AppHeader/AppHeader.tsx +111 -112
  27. package/src/components/AppHeader/types.ts +2 -0
  28. package/src/components/Charts/BarChart/BarChart.scss +4 -1
  29. package/src/components/Charts/BarChart/BarChart.tsx +23 -9
  30. package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.scss +10 -3
  31. package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.stories.tsx +2 -1
  32. package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.tsx +54 -25
  33. package/src/components/Charts/DashboardDonutChart/types.ts +7 -1
  34. package/src/components/Charts/LineChart/LineChart.scss +13 -9
  35. package/src/components/Charts/LineChart/LineChart.tsx +6 -2
  36. package/src/components/DatePicker/DatePicker.scss +11 -0
  37. package/src/components/DatePicker/DatePicker.stories.tsx +19 -0
  38. package/src/components/DatePicker/DatePicker.tsx +73 -22
  39. package/src/components/FileDropzone/Dropzone.tsx +76 -28
  40. package/src/components/FileDropzone/FileDropzone.scss +30 -2
  41. package/src/components/FileDropzone/FileDropzone.stories.tsx +125 -4
  42. package/src/components/FileDropzone/FileDropzone.tsx +46 -13
  43. package/src/components/FileDropzone/RadioFilePreview.tsx +76 -0
  44. package/src/components/FileDropzone/types.ts +73 -0
  45. package/src/components/Icon/iconList.ts +2 -0
  46. package/src/components/Input/Input.scss +137 -125
  47. package/src/components/Input/Input.tsx +69 -63
  48. package/src/components/InputWithDropdown/InputWithDropdown.scss +9 -2
  49. package/src/components/InputWithDropdown/types.ts +3 -3
  50. package/src/components/MenuOption/MenuOption.stories.tsx +4 -3
  51. package/src/components/MenuOption/MenuOption.tsx +1 -1
  52. package/src/components/MenuOption/types.ts +4 -2
  53. package/src/components/ModulesChip/ModuleChip.scss +21 -8
  54. package/src/components/ModulesChip/ModuleChip.stories.tsx +2 -2
  55. package/src/components/ModulesChip/ModuleChip.tsx +6 -9
  56. package/src/components/MultiSelect/Dropdown.tsx +12 -5
  57. package/src/components/MultiSelect/MultiSelect.stories.tsx +12 -9
  58. package/src/components/MultiSelect/MultiSelect.tsx +10 -9
  59. package/src/components/PopUpModal/PopUpModal.stories.tsx +1 -1
  60. package/src/components/Search/Search.stories.tsx +28 -9
  61. package/src/components/Search/Search.tsx +32 -29
  62. package/src/components/Search/types.ts +4 -0
  63. package/src/components/Table/Table.scss +6 -5
  64. package/src/components/Table/Types.ts +1 -1
  65. package/src/components/Tabs/Tabs.scss +58 -4
  66. package/src/components/Tabs/Tabs.stories.tsx +31 -12
  67. package/src/components/Tabs/Tabs.tsx +27 -18
  68. package/src/components/Tabs/types.ts +1 -1
  69. package/src/components/TextArea/Textarea.stories.tsx +1 -1
  70. package/src/hooks/useFileDropzone.tsx +2 -1
  71. package/src/index.ts +4 -0
  72. package/src/utils/FormatString/FormatString.stories.tsx +58 -0
  73. package/src/utils/FormatString/FormatString.tsx +41 -0
@@ -9,7 +9,7 @@
9
9
  display: flex;
10
10
  gap: 8px;
11
11
  border-radius: 8px 8px 0 0;
12
- padding: 7px 8px 0;
12
+ padding: 6px 8px 0;
13
13
 
14
14
  .ff-tab-button {
15
15
  &--default {
@@ -18,21 +18,64 @@
18
18
  padding: 0 4px;
19
19
  display: flex;
20
20
  flex-direction: column;
21
+ gap: 4px;
21
22
  cursor: pointer;
22
23
 
23
- .ff-tab-label {
24
- padding-bottom: 4px;
25
- }
24
+ .label-count-section {
25
+ display: flex;
26
+ align-items: center;
27
+ gap: 5px;
26
28
 
29
+ .tab-count {
30
+ background-color: var(--input-default-label-color);
31
+ color: var(--tab-bg-color);
32
+ height: 12px;
33
+ border-radius: 4px;
34
+ display: flex;
35
+ align-items: center;
36
+ justify-content: center;
37
+ font-size: 8px;
38
+ font-weight: 600;
39
+ padding: 0 2px;
40
+ &--active {
41
+ background-color: var(--tabs-label-active-color);
42
+ }
43
+ }
44
+ }
27
45
  .ff-tab-bar {
28
46
  width: 100%;
29
47
  border-radius: 2px 2px 0 0;
48
+ border-color: var(--input-default-label-color);
30
49
 
31
50
  &--active {
32
51
  border-top: 2px solid var(--tabs-label-active-color);
33
52
  }
34
53
  }
35
54
 
55
+ &:hover {
56
+ .ff-tab-bar {
57
+ border-top: 2px solid var(--input-hover-border-color);
58
+
59
+ &--active {
60
+ border-top: 2px solid var(--tabs-label-active-color);
61
+ }
62
+ }
63
+
64
+ .ff-tab-label {
65
+ color: var(--input-hover-border-color) !important;
66
+
67
+ &--active {
68
+ color: var(--tabs-label-active-color) !important;
69
+ }
70
+ }
71
+ .tab-count {
72
+ background-color: var(--input-hover-border-color);
73
+ &--active {
74
+ background-color: var(--tabs-label-active-color);
75
+ }
76
+ }
77
+ }
78
+
36
79
  &.disabled {
37
80
  opacity: 0.5;
38
81
  cursor: not-allowed;
@@ -57,6 +100,16 @@
57
100
  border-radius: 4px;
58
101
  cursor: pointer;
59
102
 
103
+ &:hover {
104
+ .ff-tab-label {
105
+ color: var(--input-hover-border-color) !important;
106
+
107
+ &--active {
108
+ color: var(--tabs-label-active-color) !important;
109
+ }
110
+ }
111
+ }
112
+
60
113
  &.active {
61
114
  background-color: var(--tab-bg-color);
62
115
  }
@@ -67,6 +120,7 @@
67
120
  }
68
121
  }
69
122
  }
123
+
70
124
  &--no-border {
71
125
  border: none;
72
126
  }
@@ -1,4 +1,4 @@
1
- import { useState } from 'react';
1
+ import React, { useState } from 'react';
2
2
  import { Meta, StoryObj } from '@storybook/react';
3
3
  import Tabs from './Tabs';
4
4
  import Typography from '../Typography';
@@ -40,14 +40,15 @@ const TabContentFour = () => (
40
40
  );
41
41
 
42
42
  const tabsData = [
43
- { id: 'tab-1', label: 'Tab--1', component: <TabContentOne /> },
44
- { id: 'tab-2', label: 'Tab--2', component: <TabContentTwo /> },
45
- { id: 'tab-3', label: 'Tab--3', component: <TabContentThree /> },
43
+ { id: 'tab-1', label: 'Tab--1', component: <TabContentOne />, count: '02' },
44
+ { id: 'tab-2', label: 'Tab--2', component: <TabContentTwo />, count: 35 },
45
+ { id: 'tab-3', label: 'Tab--3', component: <TabContentThree />, count: 205 },
46
46
  ];
47
47
 
48
48
  export const DefaultTabs: Story = {
49
49
  render: () => {
50
- const [activeTabIdDefault, setActiveTabIdDefault] = useState<string>('tab-1');
50
+ const [activeTabIdDefault, setActiveTabIdDefault] =
51
+ useState<string>('tab-1');
51
52
 
52
53
  return (
53
54
  <Tabs
@@ -60,13 +61,30 @@ export const DefaultTabs: Story = {
60
61
  };
61
62
  export const CapsuleTabs: Story = {
62
63
  render: () => {
63
- const [activeTabIdCapsule, setActiveTabIdCapsule] = useState<string>('tab-1');
64
+ const [activeTabIdCapsule, setActiveTabIdCapsule] =
65
+ useState<string>('tab-1');
64
66
 
65
67
  const tabsDataForCapsule = [
66
- { id: 'tab-1', label: 'Loremipsum_1', component: <TabContentOne /> },
67
- { id: 'tab-2', label: 'Loremipsum_2', component: <TabContentTwo /> },
68
- { id: 'tab-3', label: 'Loremipsum_3', component: <TabContentThree /> },
69
- { id: 'tab-4', label: 'Loremipsum_4', component: <TabContentFour /> },
68
+ {
69
+ id: 'tab-1',
70
+ label: 'Loremipsum_1',
71
+ component: <TabContentOne />,
72
+ },
73
+ {
74
+ id: 'tab-2',
75
+ label: 'Loremipsum_2',
76
+ component: <TabContentTwo />,
77
+ },
78
+ {
79
+ id: 'tab-3',
80
+ label: 'Loremipsum_3',
81
+ component: <TabContentThree />,
82
+ },
83
+ {
84
+ id: 'tab-4',
85
+ label: 'Loremipsum_4',
86
+ component: <TabContentFour />,
87
+ },
70
88
  { id: 'tab-5', label: 'Loremipsum_5', component: <TabContentFour /> },
71
89
  ];
72
90
 
@@ -108,7 +126,8 @@ export const TabsWithDisabledTab: Story = {
108
126
 
109
127
  export const WithoutBorder: Story = {
110
128
  render: () => {
111
- const [activeTabIdDefault, setActiveTabIdDefault] = useState<string>('tab-1');
129
+ const [activeTabIdDefault, setActiveTabIdDefault] =
130
+ useState<string>('tab-1');
112
131
 
113
132
  return (
114
133
  <div style={{ display: 'flex', gap: '10px' }}>
@@ -131,4 +150,4 @@ export const WithoutBorder: Story = {
131
150
  },
132
151
  };
133
152
 
134
- export default meta;
153
+ export default meta;
@@ -28,27 +28,36 @@ const Tabs = ({
28
28
  active: activeTabId === tab.id,
29
29
  })}
30
30
  >
31
- <Typography
32
- children={tab.label}
33
- lineHeight="18px"
34
- fontWeight={activeTabId === tab.id ? 'semi-bold' : 'regular'}
35
- color={
36
- activeTabId === tab.id
37
- ? 'var(--tabs-label-active-color)'
38
- : 'var(--tabs-label-default-color)'
39
- }
40
- className={classNames('ff-tab-label', {
41
- 'ff-tab-label--active': activeTabId === tab.id,
42
- })}
43
- />
31
+ <div className="label-count-section">
32
+ <Typography
33
+ children={tab.label}
34
+ lineHeight="18px"
35
+ fontWeight={activeTabId === tab.id ? 'semi-bold' : 'regular'}
36
+ color={
37
+ activeTabId === tab.id
38
+ ? 'var(--tabs-label-active-color)'
39
+ : 'var(--tabs-label-default-color)'
40
+ }
41
+ className={classNames('ff-tab-label', {
42
+ 'ff-tab-label--active': activeTabId === tab.id,
43
+ })}
44
+ />
45
+ {variant === 'default' && tab.count && (
46
+ <span
47
+ className={classNames('tab-count', {
48
+ 'tab-count--active': activeTabId === tab.id,
49
+ })}
50
+ >
51
+ {tab.count}
52
+ </span>
53
+ )}
54
+ </div>
44
55
 
45
- <Typography
46
- children=""
47
- color=""
56
+ <div
48
57
  className={classNames('ff-tab-bar', {
49
58
  'ff-tab-bar--active': activeTabId === tab.id,
50
59
  })}
51
- />
60
+ ></div>
52
61
  </button>
53
62
  ))}
54
63
  </div>
@@ -59,4 +68,4 @@ const Tabs = ({
59
68
  );
60
69
  };
61
70
 
62
- export default Tabs;
71
+ export default Tabs;
@@ -26,6 +26,7 @@ export interface TabsProps {
26
26
  label: string;
27
27
  component?: JSX.Element;
28
28
  disabled?: boolean;
29
+ count?: number | string;
29
30
  }[];
30
31
  /**
31
32
  * Defines the styling variant of the tabs.
@@ -45,4 +46,3 @@ export interface TabsProps {
45
46
  */
46
47
  noBorder?: boolean;
47
48
  }
48
-
@@ -1,6 +1,6 @@
1
1
  import type { Meta, StoryObj } from '@storybook/react';
2
2
  import Textarea from './Textarea';
3
- import { ChangeEvent, useState } from 'react';
3
+ import React ,{ ChangeEvent, useState } from 'react';
4
4
  import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
5
5
  const meta: Meta<typeof Textarea> = {
6
6
  title: 'Components/Textarea',
@@ -21,6 +21,7 @@ const useFileDropzone = (options: DropzoneOptions): DropzoneState => {
21
21
  invalidFileMessage,
22
22
  fileExistMessage,
23
23
  validateMIMEType = false,
24
+ isApiResponseError,
24
25
  } = options;
25
26
 
26
27
  const [files, setFiles] = useState<FileState>({ accepted: [], rejected: [] });
@@ -56,7 +57,7 @@ const useFileDropzone = (options: DropzoneOptions): DropzoneState => {
56
57
  const extensionWithPeriod = getExtensionWithPeriod(file).toLowerCase();
57
58
 
58
59
  if (validateMIMEType) {
59
- if (!validateFileMIMEType(file, extensionWithPeriod)) {
60
+ if (!validateFileMIMEType(file, extensionWithPeriod) || isApiResponseError ) {
60
61
  errors.push({
61
62
  message: invalidFileMessage
62
63
  ? invalidFileMessage
package/src/index.ts CHANGED
@@ -91,9 +91,11 @@ import Editor from './components/Editor/Editor';
91
91
  import { getSequentialPayload } from './utils/getSequentialPayload/getSequentialPayload';
92
92
  import ConnectingBranch from './components/ConnectingBranch/ConnectingBranch';
93
93
  import { saveFileFromBlob } from './utils/downloadFile/saveFileFromBlob';
94
+ import { capitalize } from './utils/capitalize/capitalize';
94
95
  import Comments from './components/Comment/Comments';
95
96
  import useFileDropzone from './hooks/useFileDropzone';
96
97
  import PopUpModal from './components/PopUpModal/PopUpModal';
98
+ import FormatString from './utils/FormatString/FormatString';
97
99
  import AddVariables from './components/AddVariables/AddVariables';
98
100
  import { hasDuplicateFile } from './utils/checkDuplicates/checkDuplicates';
99
101
  import PhoneInputField from './components/PhoneInput';
@@ -195,6 +197,8 @@ export {
195
197
  truncateText,
196
198
  getSequentialPayload,
197
199
  saveFileFromBlob,
200
+ capitalize,
198
201
  useFileDropzone,
202
+ FormatString,
199
203
  hasDuplicateFile,
200
204
  };
@@ -0,0 +1,58 @@
1
+ import React from 'react';
2
+ import formatString from './FormatString';
3
+
4
+ export default {
5
+ title: 'Utils/FormatString',
6
+ component: formatString,
7
+ };
8
+
9
+ export const Default = () => {
10
+ const examples = [
11
+ {
12
+ input: 'webserviceCount',
13
+ output: formatString('webserviceCount', ['count']),
14
+ removeSections: 'count',
15
+ },
16
+ { input: 'PARTIAL_PUBLIC', output: formatString('PARTIAL_PUBLIC') },
17
+ { input: 'assignedMemory', output: formatString('assignedMemory') },
18
+ {
19
+ input: 'webAndMobileCount',
20
+ output: formatString('webAndMobileCount', ['count']),
21
+ removeSections: 'count',
22
+ },
23
+ ];
24
+
25
+ return (
26
+ <div>
27
+ <h3>FormatString Function Examples</h3>
28
+ <table style={{ borderCollapse: 'collapse', width: '100%' }}>
29
+ <thead>
30
+ <tr>
31
+ <th style={{ border: '1px solid black', padding: '8px' }}>Input</th>
32
+ <th style={{ border: '1px solid black', padding: '8px' }}>
33
+ Remove Section
34
+ </th>
35
+ <th style={{ border: '1px solid black', padding: '8px' }}>
36
+ Output
37
+ </th>
38
+ </tr>
39
+ </thead>
40
+ <tbody>
41
+ {examples.map((example, index) => (
42
+ <tr key={index}>
43
+ <td style={{ border: '1px solid black', padding: '8px' }}>
44
+ {example.input}
45
+ </td>
46
+ <td style={{ border: '1px solid black', padding: '8px' }}>
47
+ {example?.removeSections}
48
+ </td>
49
+ <td style={{ border: '1px solid black', padding: '8px' }}>
50
+ {example.output}
51
+ </td>
52
+ </tr>
53
+ ))}
54
+ </tbody>
55
+ </table>
56
+ </div>
57
+ );
58
+ };
@@ -0,0 +1,41 @@
1
+ function formatCamelCaseString(
2
+ input: string,
3
+ removeSections: string[] = []
4
+ ): string {
5
+ // Removed specified sections from the string
6
+ const processedString = removeSections.reduce(
7
+ (str, section) => str.replace(new RegExp(section + '$', 'i'), ''),
8
+ input
9
+ );
10
+
11
+ // Add spaces before capital letters and capitalized the first letter
12
+ const formatted = processedString
13
+ .replace(/([A-Z])/g, ' $1')
14
+ .trim()
15
+ .replace(/^./, (str) => str.toUpperCase());
16
+
17
+ return formatted;
18
+ }
19
+ function formatSnakeOrUppercaseString(input: string): string {
20
+ return input
21
+ .toLowerCase()
22
+ .replace(/_/g, ' ')
23
+ .replace(/^./, (str) => str.toUpperCase());
24
+ }
25
+
26
+ export default function formatString(
27
+ input: string,
28
+ removeSections: string[] = []
29
+ ): string {
30
+ if (input.toUpperCase() === input) {
31
+ // Handled completely uppercase strings
32
+ input = input.toLowerCase();
33
+ }
34
+
35
+ if (input.includes('_')) {
36
+ // Handled snake case or uppercase strings
37
+ return formatSnakeOrUppercaseString(input);
38
+ }
39
+ // Handled camel case strings
40
+ return formatCamelCaseString(input, removeSections);
41
+ }