pixel-react 1.5.9 → 1.6.1

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 (110) hide show
  1. package/.yarn/install-state.gz +0 -0
  2. package/lib/components/AppHeader/AppHeader.d.ts +1 -0
  3. package/lib/components/AppHeader/types.d.ts +18 -6
  4. package/lib/components/Charts/BarChart/BarChart.d.ts +1 -0
  5. package/lib/components/Charts/DashboardDonutChart/types.d.ts +2 -0
  6. package/lib/components/Excel/ExcelToolBar/ExcelToolBar.d.ts +0 -1
  7. package/lib/components/FieldSet/FieldSet.d.ts +5 -0
  8. package/lib/components/FieldSet/index.d.ts +1 -0
  9. package/lib/components/FieldSet/types.d.ts +7 -0
  10. package/lib/components/FileDropzone/types.d.ts +8 -0
  11. package/lib/components/MachineInputField/types.d.ts +1 -1
  12. package/lib/components/MultiSelect/MultiSelect.d.ts +1 -1
  13. package/lib/components/MultiSelect/MultiSelectTypes.d.ts +1 -0
  14. package/lib/components/PopUpModal/PopUpModal.d.ts +5 -0
  15. package/lib/components/PopUpModal/types.d.ts +14 -0
  16. package/lib/components/RadioGroup/radioGroupTypes.d.ts +20 -0
  17. package/lib/components/SequentialConnectingBranch/SequentialConnectingBranch.d.ts +2 -1
  18. package/lib/components/SequentialConnectingBranch/components/Branches/Branches.d.ts +1 -1
  19. package/lib/components/SequentialConnectingBranch/components/Branches/types.d.ts +3 -2
  20. package/lib/components/SequentialConnectingBranch/components/ConnectingBranches/ConnectingBranches.d.ts +1 -1
  21. package/lib/components/SequentialConnectingBranch/components/ConnectingBranches/types.d.ts +3 -2
  22. package/lib/components/SequentialConnectingBranch/types.d.ts +11 -3
  23. package/lib/components/TableTree/TableTree.d.ts +4 -24
  24. package/lib/components/TableTree/data.d.ts +112 -273
  25. package/lib/components/TableTree/types.d.ts +28 -0
  26. package/lib/index.d.ts +149 -32
  27. package/lib/index.esm.js +1104 -742
  28. package/lib/index.esm.js.map +1 -1
  29. package/lib/index.js +1109 -742
  30. package/lib/index.js.map +1 -1
  31. package/lib/tsconfig.tsbuildinfo +1 -1
  32. package/package.json +2 -2
  33. package/src/assets/Themes/BaseTheme.scss +5 -14
  34. package/src/assets/Themes/DarkTheme.scss +5 -2
  35. package/src/assets/icons/arrow_up.svg +1 -1
  36. package/src/assets/icons/export.svg +5 -0
  37. package/src/assets/icons/import.svg +5 -0
  38. package/src/assets/icons/info_icon.svg +4 -16
  39. package/src/assets/icons/replace_file.svg +14 -0
  40. package/src/assets/icons/web_service_icon.svg +3 -0
  41. package/src/assets/styles/_fonts.scss +4 -2
  42. package/src/components/AppHeader/AppHeader.stories.tsx +242 -39
  43. package/src/components/AppHeader/AppHeader.tsx +158 -139
  44. package/src/components/AppHeader/types.ts +19 -6
  45. package/src/components/Charts/BarChart/BarChart.scss +34 -34
  46. package/src/components/Charts/BarChart/BarChart.stories.tsx +3 -2
  47. package/src/components/Charts/BarChart/BarChart.tsx +79 -55
  48. package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.scss +25 -18
  49. package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.tsx +31 -11
  50. package/src/components/Charts/DashboardDonutChart/types.ts +2 -0
  51. package/src/components/Charts/IconRadialChart/IconRadialChart.tsx +3 -0
  52. package/src/components/Charts/LineChart/LineChart.scss +13 -4
  53. package/src/components/Charts/LineChart/LineChart.stories.tsx +100 -102
  54. package/src/components/Charts/LineChart/LineChart.tsx +143 -131
  55. package/src/components/Charts/MultiRadialChart/MultiRadialChart.scss +23 -2
  56. package/src/components/Charts/MultiRadialChart/MultiRadialChart.tsx +109 -24
  57. package/src/components/Charts/PieChart/PieChart.scss +5 -3
  58. package/src/components/Charts/PieChart/PieChart.tsx +1 -2
  59. package/src/components/Checkbox/Checkbox.tsx +1 -7
  60. package/src/components/DatePicker/DatePicker.scss +15 -1
  61. package/src/components/DragAndDrop/DragAndDropList.tsx +5 -4
  62. package/src/components/Excel/ExcelFile/ExcelFile.scss +1 -1
  63. package/src/components/Excel/ExcelFile/ExcelFile.tsx +34 -20
  64. package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.tsx +0 -1
  65. package/src/components/Excel/ExcelFile/ExcelFileComponents/reducerFunctions.ts +44 -15
  66. package/src/components/Excel/ExcelToolBar/ExcelToolBar.tsx +47 -4
  67. package/src/components/FieldSet/FieldSet.scss +9 -0
  68. package/src/components/FieldSet/FieldSet.stories.tsx +103 -0
  69. package/src/components/FieldSet/FieldSet.tsx +29 -0
  70. package/src/components/FieldSet/index.ts +1 -0
  71. package/src/components/FieldSet/types.ts +8 -0
  72. package/src/components/FileDropzone/FileDropzone.scss +1 -1
  73. package/src/components/FileDropzone/FileDropzone.stories.tsx +15 -3
  74. package/src/components/FileDropzone/FileDropzone.tsx +5 -0
  75. package/src/components/FileDropzone/FilePreview.tsx +1 -1
  76. package/src/components/FileDropzone/types.ts +8 -0
  77. package/src/components/Icon/Icons.scss +1 -1
  78. package/src/components/Icon/iconList.ts +11 -7
  79. package/src/components/MachineInputField/MachineInputField.scss +15 -2
  80. package/src/components/MachineInputField/MachineInputField.tsx +17 -3
  81. package/src/components/MachineInputField/types.ts +1 -1
  82. package/src/components/MultiSelect/Dropdown.tsx +7 -3
  83. package/src/components/MultiSelect/MultiSelect.stories.tsx +6 -1
  84. package/src/components/MultiSelect/MultiSelect.tsx +4 -20
  85. package/src/components/MultiSelect/MultiSelectTypes.ts +2 -0
  86. package/src/components/PopUpModal/PopUpModal.scss +36 -0
  87. package/src/components/PopUpModal/PopUpModal.stories.tsx +61 -0
  88. package/src/components/PopUpModal/PopUpModal.tsx +85 -0
  89. package/src/components/PopUpModal/types.ts +14 -0
  90. package/src/components/RadioGroup/RadioGroup.scss +7 -0
  91. package/src/components/RadioGroup/RadioGroup.stories.tsx +26 -0
  92. package/src/components/RadioGroup/RadioGroup.tsx +16 -0
  93. package/src/components/RadioGroup/radioGroupTypes.tsx +24 -0
  94. package/src/components/Select/Select.tsx +3 -4
  95. package/src/components/Select/components/Dropdown.tsx +34 -34
  96. package/src/components/SequentialConnectingBranch/SequentialConnectingBranch.scss +9 -0
  97. package/src/components/SequentialConnectingBranch/SequentialConnectingBranch.tsx +74 -43
  98. package/src/components/SequentialConnectingBranch/components/Branches/Branches.scss +9 -3
  99. package/src/components/SequentialConnectingBranch/components/Branches/Branches.tsx +45 -14
  100. package/src/components/SequentialConnectingBranch/components/Branches/types.ts +9 -2
  101. package/src/components/SequentialConnectingBranch/components/ConnectingBranches/ConnectingBranches.tsx +3 -1
  102. package/src/components/SequentialConnectingBranch/components/ConnectingBranches/types.ts +9 -2
  103. package/src/components/SequentialConnectingBranch/types.ts +18 -3
  104. package/src/components/TableTree/TableTree.scss +154 -123
  105. package/src/components/TableTree/TableTree.stories.tsx +148 -96
  106. package/src/components/TableTree/TableTree.tsx +250 -282
  107. package/src/components/TableTree/data.ts +318 -569
  108. package/src/components/TableTree/types.ts +30 -0
  109. package/src/components/Toast/Toast.tsx +1 -1
  110. package/src/index.ts +11 -0
@@ -4,7 +4,7 @@ import Button from '../Button';
4
4
  import treeData from './data';
5
5
  import Icon from '../Icon/Icon';
6
6
  import './TableTreeStories.scss';
7
- import React from 'react';
7
+ import React, { useState } from 'react';
8
8
 
9
9
  const meta: Meta<typeof TableTree> = {
10
10
  title: 'Components/Table tree',
@@ -14,114 +14,166 @@ const meta: Meta<typeof TableTree> = {
14
14
 
15
15
  type Story = StoryObj<typeof TableTree>;
16
16
 
17
- // NOTE :: For Action section use ff-action-section classname
17
+ const colData = [
18
+ {
19
+ name: 'Script Name',
20
+ accessor: 'title',
21
+ width: '400px',
22
+ isClickable: true,
23
+ actions: (row) => {
24
+ console.log('🚀 ~ row:', row);
25
+ return [
26
+ <Icon hoverEffect name="file" />,
27
+ <Icon hoverEffect name="manage_apps" />,
28
+ <Icon hoverEffect name="dropzone_icon" />,
29
+ <Icon hoverEffect name="more" />,
30
+ ];
31
+ },
32
+ isTree: true,
33
+ defaultValue: 'Project name',
34
+ defaultActions: () => [],
35
+ },
18
36
 
19
- // TODO :: below code is a temporary will Modify later
37
+ {
38
+ name: 'Module Path',
39
+ accessor: 'id',
40
+ width: '200px',
41
+ isClickable: true,
42
+ },
43
+
44
+ {
45
+ name: 'Module Path',
46
+ accessor: 'path',
47
+ width: '200px',
48
+ isClickable: true,
49
+ },
50
+ {
51
+ name: 'Module Path',
52
+ accessor: 'path',
53
+ width: '200px',
54
+ isClickable: true,
55
+ },
56
+ {
57
+ name: 'Module Path',
58
+ accessor: 'path',
59
+ width: '200px',
60
+ isClickable: true,
61
+ },
62
+ {
63
+ name: 'Module Path',
64
+ accessor: 'path',
65
+ width: '200px',
66
+ isClickable: true,
67
+ },
68
+ {
69
+ name: 'Module Path',
70
+ accessor: 'path',
71
+ width: '200px',
72
+ isClickable: true,
73
+ },
74
+ {
75
+ name: 'Module Path',
76
+ accessor: 'path',
77
+ width: '200px',
78
+ isClickable: true,
79
+ },
80
+ { name: 'Created By', accessor: 'createdByUname', width: '200px' },
81
+ {
82
+ name: 'Script Count',
83
+ accessor: 'moduleLevelScriptCount',
84
+ width: '200px',
85
+ },
86
+ {
87
+ name: 'state',
88
+ accessor: 'state',
89
+ width: '100px',
90
+ cell: ({ value }) => {
91
+ return (
92
+ value && (
93
+ <Button
94
+ variant="secondary"
95
+ onClick={() => {
96
+ console.log('====', value); //Todo:need to remove
97
+ }}
98
+ >
99
+ {value}
100
+ </Button>
101
+ )
102
+ );
103
+ },
104
+ },
105
+ ];
20
106
 
21
107
  export const Default: Story = {
22
108
  args: {
23
109
  onPagination: (node) => {
24
110
  console.log(node);
25
111
  },
26
- select: 'radio',
27
- onChange: (e: any, node: any) => {
28
- e.preventDefault();
29
- e.stopPropagation();
30
-
31
- console.log(node, '------------', e.target.value);
112
+ expandedNodes: ['MOD1102'],
113
+ onExpand: (isExpand, node) => {
114
+ console.log(isExpand, node);
32
115
  },
33
- selected: ['MOD1003'],
116
+ select: 'checkbox',
117
+ onChange: (node: string[]) => {
118
+ console.log('-------------------', node);
119
+ },
120
+ selected: ['MOD1102'],
34
121
  treeData,
35
- columnsData: [
36
- {
37
- name: 'Script Name',
38
- accessor: 'title',
39
- width: '400px',
40
- isClickable: true,
41
- actions: (row) => {
42
- console.log('🚀 ~ row:', row);
43
- return [
44
- <Icon hoverEffect name="file" />,
45
- <Icon hoverEffect name="manage_apps" />,
46
- <Icon hoverEffect name="dropzone_icon" />,
47
- <Icon hoverEffect name="more" />,
48
- ];
49
- },
50
- },
51
-
52
- {
53
- name: 'Module Path',
54
- accessor: 'path',
55
- width: '200px',
56
- isClickable: true,
57
- },
58
-
59
- {
60
- name: 'Module Path',
61
- accessor: 'path',
62
- width: '200px',
63
- isClickable: true,
64
- },
65
- {
66
- name: 'Module Path',
67
- accessor: 'path',
68
- width: '200px',
69
- isClickable: true,
70
- },
71
- {
72
- name: 'Module Path',
73
- accessor: 'path',
74
- width: '200px',
75
- isClickable: true,
76
- },
77
- {
78
- name: 'Module Path',
79
- accessor: 'path',
80
- width: '200px',
81
- isClickable: true,
82
- },
83
- {
84
- name: 'Module Path',
85
- accessor: 'path',
86
- width: '200px',
87
- isClickable: true,
88
- },
89
- {
90
- name: 'Module Path',
91
- accessor: 'path',
92
- width: '200px',
93
- isClickable: true,
94
- },
95
- { name: 'Created By', accessor: 'createdByUname', width: '200px' },
96
- {
97
- name: 'Script Count',
98
- accessor: 'moduleLevelScriptCount',
99
- width: '200px',
100
- },
101
- {
102
- name: 'state',
103
- accessor: 'state',
104
- width: '100px',
105
- cell: ({ value }) => {
106
- return (
107
- value && (
108
- <Button
109
- variant="secondary"
110
- onClick={() => {
111
- console.log('====', value); //Todo:need to remove
112
- }}
113
- >
114
- {value}
115
- </Button>
116
- )
117
- );
118
- },
119
- },
120
- ],
122
+ columnsData: colData,
121
123
  onClick: (e, data) => {
122
124
  console.log('🚀 ~ e, data:', e, data); //Todo:need to remove
123
125
  },
124
126
  },
125
127
  };
126
128
 
129
+ export const ControlledCheckBox: Story = {
130
+ render: () => {
131
+ const [selected, setSelected] = useState<string[]>([]);
132
+ return (
133
+ <TableTree
134
+ expandedNodes={['MOD1102']}
135
+ onExpand={(isExpand, node) => {
136
+ console.log(isExpand, node);
137
+ }}
138
+ select="checkbox"
139
+ onChange={(nodes: string[]) => {
140
+ setSelected(nodes);
141
+ }}
142
+ selected={selected}
143
+ treeData={treeData}
144
+ columnsData={colData}
145
+ onClick={(e, data) => {
146
+ console.log('🚀 ~ e, data:', e, data); //Todo:need to remove
147
+ }}
148
+ onPagination={(direction) => {
149
+ console.log(direction,'-------------------');
150
+ }}
151
+ />
152
+ );
153
+ },
154
+ };
155
+ export const ControlledRadio: Story = {
156
+ render: () => {
157
+ const [selected, setSelected] = useState<string[]>([]);
158
+ return (
159
+ <TableTree
160
+ expandedNodes={['MOD1102']}
161
+ onExpand={(isExpand, node) => {
162
+ console.log(isExpand, node);
163
+ }}
164
+ select="radio"
165
+ onChange={(nodes: string[]) => {
166
+ setSelected(nodes);
167
+ }}
168
+ selected={selected}
169
+ treeData={treeData}
170
+ columnsData={colData}
171
+ onClick={(e, data) => {
172
+ console.log('🚀 ~ e, data:', e, data); //Todo:need to remove
173
+ }}
174
+ />
175
+ );
176
+ },
177
+ };
178
+
127
179
  export default meta;