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.
- package/lib/components/AppHeader/types.d.ts +2 -0
- package/lib/components/Charts/BarChart/BarChart.d.ts +1 -0
- package/lib/components/Charts/DashboardDonutChart/types.d.ts +6 -0
- package/lib/components/FileDropzone/RadioFilePreview.d.ts +4 -0
- package/lib/components/FileDropzone/types.d.ts +61 -0
- package/lib/components/MenuOption/types.d.ts +3 -2
- package/lib/components/Search/Search.d.ts +1 -1
- package/lib/components/Search/types.d.ts +4 -0
- package/lib/components/Table/Types.d.ts +1 -1
- package/lib/components/Tabs/types.d.ts +1 -0
- package/lib/index.d.ts +95 -23
- package/lib/index.esm.js +513 -294
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +514 -293
- package/lib/index.js.map +1 -1
- package/lib/tsconfig.tsbuildinfo +1 -1
- package/lib/utils/FormatString/FormatString.d.ts +1 -0
- package/package.json +1 -1
- package/src/StyleGuide/ColorPalette/colorPaletteList.ts +15 -0
- package/src/assets/Themes/BaseTheme.scss +5 -3
- package/src/assets/Themes/DarkTheme.scss +5 -3
- package/src/assets/icons/window_maximize.svg +1 -2
- package/src/assets/icons/window_restore.svg +4 -0
- package/src/components/AppHeader/AppHeader.scss +33 -0
- package/src/components/AppHeader/AppHeader.stories.tsx +133 -5
- package/src/components/AppHeader/AppHeader.tsx +111 -112
- package/src/components/AppHeader/types.ts +2 -0
- package/src/components/Charts/BarChart/BarChart.scss +4 -1
- package/src/components/Charts/BarChart/BarChart.tsx +23 -9
- package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.scss +10 -3
- package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.stories.tsx +2 -1
- package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.tsx +54 -25
- package/src/components/Charts/DashboardDonutChart/types.ts +7 -1
- package/src/components/Charts/LineChart/LineChart.scss +13 -9
- package/src/components/Charts/LineChart/LineChart.tsx +6 -2
- package/src/components/DatePicker/DatePicker.scss +11 -0
- package/src/components/DatePicker/DatePicker.stories.tsx +19 -0
- package/src/components/DatePicker/DatePicker.tsx +73 -22
- package/src/components/FileDropzone/Dropzone.tsx +76 -28
- package/src/components/FileDropzone/FileDropzone.scss +30 -2
- package/src/components/FileDropzone/FileDropzone.stories.tsx +125 -4
- package/src/components/FileDropzone/FileDropzone.tsx +46 -13
- package/src/components/FileDropzone/RadioFilePreview.tsx +76 -0
- package/src/components/FileDropzone/types.ts +73 -0
- package/src/components/Icon/iconList.ts +2 -0
- package/src/components/Input/Input.scss +137 -125
- package/src/components/Input/Input.tsx +69 -63
- package/src/components/InputWithDropdown/InputWithDropdown.scss +9 -2
- package/src/components/InputWithDropdown/types.ts +3 -3
- package/src/components/MenuOption/MenuOption.stories.tsx +4 -3
- package/src/components/MenuOption/MenuOption.tsx +1 -1
- package/src/components/MenuOption/types.ts +4 -2
- package/src/components/ModulesChip/ModuleChip.scss +21 -8
- package/src/components/ModulesChip/ModuleChip.stories.tsx +2 -2
- package/src/components/ModulesChip/ModuleChip.tsx +6 -9
- package/src/components/MultiSelect/Dropdown.tsx +12 -5
- package/src/components/MultiSelect/MultiSelect.stories.tsx +12 -9
- package/src/components/MultiSelect/MultiSelect.tsx +10 -9
- package/src/components/PopUpModal/PopUpModal.stories.tsx +1 -1
- package/src/components/Search/Search.stories.tsx +28 -9
- package/src/components/Search/Search.tsx +32 -29
- package/src/components/Search/types.ts +4 -0
- package/src/components/Table/Table.scss +6 -5
- package/src/components/Table/Types.ts +1 -1
- package/src/components/Tabs/Tabs.scss +58 -4
- package/src/components/Tabs/Tabs.stories.tsx +31 -12
- package/src/components/Tabs/Tabs.tsx +27 -18
- package/src/components/Tabs/types.ts +1 -1
- package/src/components/TextArea/Textarea.stories.tsx +1 -1
- package/src/hooks/useFileDropzone.tsx +2 -1
- package/src/index.ts +4 -0
- package/src/utils/FormatString/FormatString.stories.tsx +58 -0
- 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:
|
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
|
-
.
|
24
|
-
|
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] =
|
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] =
|
64
|
+
const [activeTabIdCapsule, setActiveTabIdCapsule] =
|
65
|
+
useState<string>('tab-1');
|
64
66
|
|
65
67
|
const tabsDataForCapsule = [
|
66
|
-
{
|
67
|
-
|
68
|
-
|
69
|
-
|
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] =
|
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
|
-
<
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
'ff-tab-label
|
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
|
-
<
|
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
|
+
}
|