pixel-react 1.5.5 → 1.5.7

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 (97) hide show
  1. package/.storybook/main.ts +7 -1
  2. package/lib/components/Charts/LineChart/types.d.ts +3 -0
  3. package/lib/components/DatePicker/types.d.ts +4 -0
  4. package/lib/components/Excel/ExcelContextMenu/ExcelContextMenu.d.ts +1 -7
  5. package/lib/components/Excel/ExcelFile/ExcelFileComponents/DataViewer.d.ts +1 -1
  6. package/lib/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.d.ts +1 -0
  7. package/lib/components/Excel/ExcelFile/ExcelFileComponents/reducerFunctions.d.ts +1 -0
  8. package/lib/components/Excel/ExcelFile/ExcelFileComponents/types.d.ts +5 -0
  9. package/lib/components/FileDropzone/types.d.ts +3 -0
  10. package/lib/components/LabelEditTextField/LabelEditTextField.stories.d.ts +0 -2
  11. package/lib/components/MultiSelect/MultiSelect.stories.d.ts +0 -1
  12. package/lib/components/Select/Select.stories.d.ts +0 -1
  13. package/lib/components/StateDropdown/StateDropdown.d.ts +1 -1
  14. package/lib/components/StateDropdown/StateDropdownTypes.d.ts +3 -0
  15. package/lib/index.d.ts +52 -2
  16. package/lib/index.esm.js +950 -581
  17. package/lib/index.esm.js.map +1 -1
  18. package/lib/index.js +950 -580
  19. package/lib/index.js.map +1 -1
  20. package/package.json +1 -1
  21. package/src/assets/icons/approval_pending.svg +8 -8
  22. package/src/assets/icons/configuration.svg +3 -3
  23. package/src/assets/icons/dashboard_icon.svg +31 -0
  24. package/src/assets/icons/defects.svg +8 -8
  25. package/src/assets/icons/element.svg +4 -4
  26. package/src/assets/icons/info_user.svg +5 -0
  27. package/src/assets/icons/project_element.svg +4 -4
  28. package/src/assets/icons/step_group.svg +10 -10
  29. package/src/assets/icons/variable.svg +3 -3
  30. package/src/assets/styles/_colors.scss +1 -0
  31. package/src/components/AllProjectsDropdown/AllProjectsDropdown.scss +1 -1
  32. package/src/components/Charts/LineChart/LineChart.scss +8 -7
  33. package/src/components/Charts/LineChart/LineChart.stories.tsx +170 -51
  34. package/src/components/Charts/LineChart/LineChart.tsx +30 -27
  35. package/src/components/Charts/LineChart/types.ts +22 -20
  36. package/src/components/DatePicker/DatePicker.scss +4 -3
  37. package/src/components/DatePicker/DatePicker.stories.tsx +27 -14
  38. package/src/components/DatePicker/DatePicker.tsx +62 -49
  39. package/src/components/DatePicker/types.ts +5 -0
  40. package/src/components/Excel/ColorBarSelector/ColorBarSelector.scss +8 -4
  41. package/src/components/Excel/ColorBarSelector/ColorBarSelector.tsx +2 -2
  42. package/src/components/Excel/ExcelContextMenu/ExcelContextMenu.scss +23 -35
  43. package/src/components/Excel/ExcelContextMenu/ExcelContextMenu.tsx +3 -12
  44. package/src/components/Excel/ExcelFile/ExcelFile.scss +31 -25
  45. package/src/components/Excel/ExcelFile/ExcelFile.tsx +157 -47
  46. package/src/components/Excel/ExcelFile/ExcelFileComponents/Cell.tsx +5 -4
  47. package/src/components/Excel/ExcelFile/ExcelFileComponents/ColumnIndicator.tsx +3 -3
  48. package/src/components/Excel/ExcelFile/ExcelFileComponents/DataViewer.tsx +40 -1
  49. package/src/components/Excel/ExcelFile/ExcelFileComponents/RowIndicator.tsx +3 -3
  50. package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.scss +10 -0
  51. package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.tsx +9 -45
  52. package/src/components/Excel/ExcelFile/ExcelFileComponents/reducer.ts +43 -2
  53. package/src/components/Excel/ExcelFile/ExcelFileComponents/reducerFunctions.ts +40 -5
  54. package/src/components/Excel/ExcelFile/ExcelFileComponents/types.ts +3 -1
  55. package/src/components/Excel/ExcelFile.stories.tsx +42 -43
  56. package/src/components/Excel/ExcelToolBar/ExcelToolBar.scss +80 -20
  57. package/src/components/Excel/ExcelToolBar/ExcelToolBar.tsx +171 -159
  58. package/src/components/FileDropzone/Dropzone.tsx +2 -0
  59. package/src/components/FileDropzone/FileDropzone.scss +1 -2
  60. package/src/components/FileDropzone/FileDropzone.stories.tsx +3 -0
  61. package/src/components/FileDropzone/FileDropzone.tsx +11 -3
  62. package/src/components/FileDropzone/types.ts +5 -0
  63. package/src/components/Icon/Icon.stories.tsx +5 -4
  64. package/src/components/Icon/iconList.ts +4 -0
  65. package/src/components/MultiSelect/MultiSelect.scss +41 -50
  66. package/src/components/MultiSelect/MultiSelect.tsx +48 -48
  67. package/src/components/Select/Select.scss +11 -1
  68. package/src/components/Select/Select.tsx +2 -2
  69. package/src/components/StateDropdown/StateDropdown.stories.tsx +5 -0
  70. package/src/components/StateDropdown/StateDropdown.tsx +27 -12
  71. package/src/components/StateDropdown/StateDropdownTypes.tsx +6 -0
  72. package/src/components/TableTree/TableTree.scss +17 -15
  73. package/src/components/TableTree/TableTree.tsx +42 -40
  74. package/src/index.ts +2 -0
  75. package/lib/assets/fonts/Poppins-Bold.ttf +0 -0
  76. package/lib/assets/fonts/Poppins-Medium.ttf +0 -0
  77. package/lib/assets/fonts/Poppins-Regular.ttf +0 -0
  78. package/lib/assets/fonts/Poppins-SemiBold.ttf +0 -0
  79. package/lib/components/AddButton/AddButton.d.ts +0 -5
  80. package/lib/components/AddButton/AddButton.stories.d.ts +0 -6
  81. package/lib/components/AddButton/index.d.ts +0 -1
  82. package/lib/components/AddButton/types.d.ts +0 -4
  83. package/lib/components/AttachImage/AttachImage.stories.d.ts +0 -7
  84. package/lib/components/Charts/BarChart/BarChart.stories.d.ts +0 -6
  85. package/lib/components/Charts/IconRadialChart/IconRadialChart.stories.d.ts +0 -8
  86. package/lib/components/Charts/LineChart/LineChart.stories.d.ts +0 -7
  87. package/lib/components/Charts/MultiRadialChart/MultiRadialChart.stories.d.ts +0 -8
  88. package/lib/components/ConnectingBranch/ConnectingBranch.stories.d.ts +0 -6
  89. package/lib/components/EditTextField/EditTextField.stories.d.ts +0 -10
  90. package/lib/components/Editor/Editor.stories.d.ts +0 -6
  91. package/lib/components/Excel/ContextMenu/ContextMenu.d.ts +0 -4
  92. package/lib/components/Excel/ExcelFile.stories.d.ts +0 -6
  93. package/lib/components/ExcelFile/ChangeExcelStyles.d.ts +0 -14
  94. package/lib/components/ExcelFile/ImportExcelStyles.d.ts +0 -24
  95. package/lib/components/StatusCard/StatusCard.stories.d.ts +0 -11
  96. package/lib/utils/getSequentialPayload/getSequentialPayload.stories.d.ts +0 -10
  97. /package/lib/components/ExcelFile/{ColorBarSelector → ColorBarselector}/ColorBarSelector.d.ts +0 -0
@@ -1,6 +1,7 @@
1
1
  import { Meta, StoryObj } from '@storybook/react';
2
2
  import LineChart from './LineChart';
3
3
  import { LineChartProps } from './types';
4
+ import React from 'react';
4
5
 
5
6
  const meta: Meta<typeof LineChart> = {
6
7
  title: 'Components/LineChart',
@@ -19,24 +20,49 @@ export const DefaultLineChart: StoryObj<LineChartProps> = {
19
20
  color: '#4C90FF',
20
21
  name: 'default',
21
22
  data: [
22
- { date: '1 oct', totalMemory: 0 },
23
- { date: '2 oct', totalMemory: 9 },
24
- { date: '3 oct', totalMemory: 0 },
25
- { date: '4 oct', totalMemory: 0 },
26
- { date: '5 oct', totalMemory: 0 },
27
- { date: '6 oct', totalMemory: 0 },
28
- { date: '7 oct', totalMemory: 0 },
23
+ {
24
+ date: '25 Oct',
25
+ totalMemory: 9.86,
26
+ },
27
+ {
28
+ date: '26 Oct',
29
+ totalMemory: 9.86,
30
+ },
31
+ {
32
+ date: '27 Oct',
33
+ totalMemory: 9.86,
34
+ },
35
+ {
36
+ date: '28 Oct',
37
+ totalMemory: 9.9,
38
+ },
39
+ {
40
+ date: '29 Oct',
41
+ totalMemory: 100,
42
+ },
43
+ {
44
+ date: '30 Oct',
45
+ totalMemory: 10.12,
46
+ },
47
+ {
48
+ date: '31 Oct',
49
+ totalMemory: 10.1,
50
+ }, {
51
+ date: '1 nov',
52
+ totalMemory: 10.1,
53
+ },
29
54
  ],
30
55
  },
31
56
  ],
32
- width: 600,
33
- height: 272,
57
+ width: 604,
58
+ height: 232,
34
59
  axisColor: '#000000',
35
60
  lineChartWidth: 3,
36
61
  yAxisLabel: 'Total Memory (GB)',
37
62
  yAxisValueColor: '#252C37',
38
63
  xAxisColor: '#D9D9D9',
39
64
  yAxisColor: '#252C37',
65
+ numberSize:"10px"
40
66
  },
41
67
  render: (args) => (
42
68
  <div className="linechart-container">
@@ -45,35 +71,35 @@ export const DefaultLineChart: StoryObj<LineChartProps> = {
45
71
  ),
46
72
  };
47
73
 
48
- export const StatusLineChart: StoryObj<LineChartProps> = {
74
+ export const multiLineScriptsChart: StoryObj<LineChartProps> = {
49
75
  args: {
50
76
  data: [
51
77
  {
52
- color: '#179C5F',
78
+ color: '#179C5F',
53
79
  name: 'Success',
54
80
  show: true,
55
81
  data: [
56
- { date: '1 oct', value: 0 },
57
- { date: '2 oct', value: 0 },
58
- { date: '3 oct', value: 0 },
59
- { date: '4 oct', value: 6 },
60
- { date: '5 oct', value: 10 },
61
- { date: '6 oct', value: 11 },
82
+ { date: '1 oct', value: 10 },
83
+ { date: '2 oct', value: 20 },
84
+ { date: '3 oct', value: 30 },
85
+ { date: '4 oct', value: 26 },
86
+ { date: '5 oct', value: 90 },
87
+ { date: '6 oct', value: 10 },
62
88
  { date: '7 oct', value: 12 },
63
89
  ],
64
90
  },
65
91
  {
66
- color: '#9C1732',
92
+ color: '#9C1732',
67
93
  name: 'Failed',
68
94
  show: true,
69
95
  data: [
70
- { date: '1 oct', value: 5 },
71
- { date: '2 oct', value: 3 },
72
- { date: '3 oct', value: 4 },
73
- { date: '4 oct', value: 2 },
74
- { date: '5 oct', value: 6 },
75
- { date: '6 oct', value: 7 },
76
- { date: '7 oct', value: 3 },
96
+ { date: '1 oct', value: 50 },
97
+ { date: '2 oct', value: 30 },
98
+ { date: '3 oct', value: 40 },
99
+ { date: '4 oct', value: 20 },
100
+ { date: '5 oct', value: 90 },
101
+ { date: '6 oct', value: 70 },
102
+ { date: '7 oct', value: 30 },
77
103
  ],
78
104
  },
79
105
  {
@@ -81,46 +107,46 @@ export const StatusLineChart: StoryObj<LineChartProps> = {
81
107
  name: 'Warning',
82
108
  show: true,
83
109
  data: [
84
- { date: '1 oct', value: 1 },
85
- { date: '2 oct', value: 2 },
86
- { date: '3 oct', value: 4 },
87
- { date: '4 oct', value: 2 },
88
- { date: '5 oct', value: 1 },
89
- { date: '6 oct', value: 1 },
90
- { date: '7 oct', value: 0 },
110
+ { date: '1 oct', value: 10 },
111
+ { date: '2 oct', value: 20 },
112
+ { date: '3 oct', value: 99 },
113
+ { date: '4 oct', value: 20},
114
+ { date: '5 oct', value: 10 },
115
+ { date: '6 oct', value: 10 },
116
+ { date: '7 oct', value: 10 },
91
117
  ],
92
118
  },
93
119
  {
94
- color: '#A83FC4',
120
+ color: '#A83FC4',
95
121
  name: 'Skipped',
96
122
  show: true,
97
123
  data: [
98
- { date: '1 oct', value: 4 },
99
- { date: '2 oct', value: 0 },
100
- { date: '3 oct', value: 1 },
101
- { date: '4 oct', value: 2 },
102
- { date: '5 oct', value: 1 },
103
- { date: '6 oct', value: 3 },
104
- { date: '7 oct', value: 0 },
124
+ { date: '1 oct', value: 40 },
125
+ { date: '2 oct', value: 10 },
126
+ { date: '3 oct', value: 10 },
127
+ { date: '4 oct', value: 20 },
128
+ { date: '5 oct', value: 10 },
129
+ { date: '6 oct', value: 30 },
130
+ { date: '7 oct', value: 10 },
105
131
  ],
106
132
  },
107
133
  {
108
- color: '#3F5AC4',
134
+ color: '#3F5AC4',
109
135
  name: 'Flaky',
110
136
  show: true,
111
137
  data: [
112
- { date: '1 oct', value: 2 },
113
- { date: '2 oct', value: 4 },
114
- { date: '3 oct', value: 3 },
115
- { date: '4 oct', value: 0 },
116
- { date: '5 oct', value: 1 },
117
- { date: '6 oct', value: 0 },
118
- { date: '7 oct', value: 2 },
138
+ { date: '1 oct', value: 20 },
139
+ { date: '2 oct', value: 40 },
140
+ { date: '3 oct', value: 30 },
141
+ { date: '4 oct', value: 10 },
142
+ { date: '5 oct', value: 10 },
143
+ { date: '6 oct', value: 20 },
144
+ { date: '7 oct', value: 40 },
119
145
  ],
120
146
  },
121
147
  ],
122
- width: 800,
123
- height: 272,
148
+ width: 441,
149
+ height: 232,
124
150
  axisColor: '#000000',
125
151
  lineChartWidth: 2,
126
152
  yAxisLabel: 'Number Of Defects',
@@ -129,10 +155,103 @@ export const StatusLineChart: StoryObj<LineChartProps> = {
129
155
  xAxisColor: '#D9D9D9',
130
156
  yAxisColor: '#252C37',
131
157
  yAxisLabelColor: '#252C37',
132
- },
158
+ textSize:"12px", },
133
159
  render: (args) => (
134
160
  <div className="linechart-container">
135
161
  <LineChart {...args} />
136
162
  </div>
137
163
  ),
138
164
  };
165
+ export const multiLineDefectsChart: StoryObj<LineChartProps> = {
166
+ args: {
167
+ data: [
168
+ {
169
+ color: '#179C5F',
170
+ name: 'Success',
171
+ show: true,
172
+ data: [
173
+ { date: '1 oct', value: 20 },
174
+ { date: '2 oct', value: 10 },
175
+ { date: '3 oct', value: 30 },
176
+ { date: '4 oct', value: 60 },
177
+ { date: '5 oct', value: 90 },
178
+ { date: '6 oct', value: 10 },
179
+ { date: '7 oct', value: 12 },
180
+ ],
181
+ },
182
+ {
183
+ color: '#9C1732',
184
+ name: 'Failed',
185
+ show: true,
186
+ data: [
187
+ { date: '1 oct', value: 50 },
188
+ { date: '2 oct', value: 30 },
189
+ { date: '3 oct', value: 40 },
190
+ { date: '4 oct', value: 20 },
191
+ { date: '5 oct', value: 90 },
192
+ { date: '6 oct', value: 70 },
193
+ { date: '7 oct', value: 30 },
194
+ ],
195
+ },
196
+ {
197
+ color: '#E2750F',
198
+ name: 'Warning',
199
+ show: true,
200
+ data: [
201
+ { date: '1 oct', value: 10 },
202
+ { date: '2 oct', value: 20 },
203
+ { date: '3 oct', value: 90 },
204
+ { date: '4 oct', value: 20 },
205
+ { date: '5 oct', value: 10 },
206
+ { date: '6 oct', value: 10 },
207
+ { date: '7 oct', value: 10 },
208
+ ],
209
+ },
210
+ {
211
+ color: '#A83FC4',
212
+ name: 'Skipped',
213
+ show: true,
214
+ data: [
215
+ { date: '1 oct', value: 40 },
216
+ { date: '2 oct', value: 20 },
217
+ { date: '3 oct', value: 10 },
218
+ { date: '4 oct', value: 20 },
219
+ { date: '5 oct', value: 10 },
220
+ { date: '6 oct', value: 30 },
221
+ { date: '7 oct', value: 10 },
222
+ ],
223
+ },
224
+ {
225
+ color: '#3F5AC4',
226
+ name: 'Flaky',
227
+ show: true,
228
+ data: [
229
+ { date: '1 oct', value: 20 },
230
+ { date: '2 oct', value: 40 },
231
+ { date: '3 oct', value: 30 },
232
+ { date: '4 oct', value: 20 },
233
+ { date: '5 oct', value: 10 },
234
+ { date: '6 oct', value: 40 },
235
+ { date: '7 oct', value: 20 },
236
+ ],
237
+ },
238
+ ],
239
+ width: 700,
240
+ height: 232,
241
+ axisColor: '#000000',
242
+ lineChartWidth: 2,
243
+ yAxisLabel: 'Number Of script',
244
+ xAxisLabel: 'Number Of Days',
245
+ yAxisValueColor: '#252C37',
246
+ xAxisColor: '#D9D9D9',
247
+ yAxisColor: '#252C37',
248
+ yAxisLabelColor: '#252C37',
249
+ textSize:"12px",
250
+ fontWeight:"semi-bold"
251
+ },
252
+ render: (args) => (
253
+ <div className="linechart-container">
254
+ <LineChart {...args} />
255
+ </div>
256
+ ),
257
+ };
@@ -1,6 +1,7 @@
1
1
  import React, { useState } from 'react';
2
2
  import { LineChartProps } from './types';
3
3
  import './LineChart.scss';
4
+ import Typography from '../../Typography';
4
5
 
5
6
  interface HoverState {
6
7
  cursorX: number | null;
@@ -21,6 +22,9 @@ const LineChart: React.FC<LineChartProps> = ({
21
22
  xAxisColor,
22
23
  yAxisColor,
23
24
  yAxisLabelColor,
25
+ textSize,
26
+ fontWeight,
27
+ numberSize,
24
28
  }) => {
25
29
  const margin = 40;
26
30
  const xMax = width - margin * 2;
@@ -29,29 +33,25 @@ const LineChart: React.FC<LineChartProps> = ({
29
33
  const isDefaultLineChart =
30
34
  data[0]?.data[0]?.hasOwnProperty('date') &&
31
35
  data[0]?.data[0]?.hasOwnProperty('totalMemory');
32
- const xKey = isDefaultLineChart ? 'date' : 'date'; // 'date' for DefaultLineChart, 'x' for StatusLineChart
33
- const yKey = isDefaultLineChart ? 'totalMemory' : 'value'; // 'totalMemory' for DefaultLineChart, 'y' for StatusLineChart
34
-
35
- const allZero = data.every((line) =>
36
- line.data.every((d: { [key: string]: any }) => d[yKey] === 0)
37
- );
38
-
39
- const yMaxExtended = allZero
40
- ? 4
41
- : Math.max(
42
- ...data.flatMap((line) =>
43
- line.data.map((d: { [key: string]: any }) => d[yKey])
44
- )
45
- ) + 3;
46
-
36
+ const xKey = isDefaultLineChart ? 'date' : 'date';
37
+ const yKey = isDefaultLineChart ? 'totalMemory' : 'value';
47
38
  const xScale = (x: string) => {
48
- if (isDefaultLineChart) {
49
- return (parseInt(x) - 0.7) * (xMax / data[0].data.length);
50
- }
51
- return (parseInt(x) - 0.7) * (xMax / data[0].data.length);
39
+ const date = new Date(x);
40
+ const time = date.getTime();
41
+ const minDate = new Date(
42
+ Math.min(...data[0].data.map((d: any) => new Date(d[xKey]).getTime()))
43
+ );
44
+ const maxDate = new Date(
45
+ Math.max(...data[0].data.map((d: any) => new Date(d[xKey]).getTime()))
46
+ );
47
+
48
+ return (
49
+ ((time - minDate.getTime()) / (maxDate.getTime() - minDate.getTime())) *
50
+ xMax
51
+ );
52
52
  };
53
53
 
54
- const yScale = (y: number) => yMax - (y * yMax) / yMaxExtended;
54
+ const yScale = (y: number) => yMax - (y * yMax) / 1024;
55
55
 
56
56
  const generateLinePath = (lineData: { [key: string]: any }[]) =>
57
57
  lineData.reduce((path, point, i) => {
@@ -127,11 +127,11 @@ const LineChart: React.FC<LineChartProps> = ({
127
127
  currentXValue: null,
128
128
  });
129
129
 
130
- const xTickInterval = Math.floor(data[0].data.length / 6);
130
+ const xTickInterval = Math.floor(data[0].data.length / 4);
131
131
 
132
132
  return (
133
133
  <div className="ff-line-chart-text">
134
- <p className="ff-line-chart-text1">{yAxisLabel}</p>
134
+ <Typography className="ff-line-chart-text1" fontSize={textSize} fontWeight="semi-bold">{yAxisLabel}</Typography>
135
135
  <svg
136
136
  width={width}
137
137
  height={height}
@@ -155,6 +155,7 @@ const LineChart: React.FC<LineChartProps> = ({
155
155
  textAnchor="middle"
156
156
  fill={yAxisLabelColor}
157
157
  className="ff-line-chart-x-axis-label"
158
+ style={{fontSize:textSize , fontWeight:fontWeight}}
158
159
  >
159
160
  {xAxisLabel}
160
161
  </text>
@@ -185,7 +186,7 @@ const LineChart: React.FC<LineChartProps> = ({
185
186
  r={5}
186
187
  fill="white"
187
188
  stroke={line.color}
188
- strokeWidth={2}
189
+ strokeWidth={lineChartWidth}
189
190
  style={{ transition: 'cx 0.1s, cy 0.1s' }}
190
191
  />
191
192
  <line
@@ -212,23 +213,25 @@ const LineChart: React.FC<LineChartProps> = ({
212
213
  textAnchor="middle"
213
214
  fill={yAxisColor}
214
215
  className="ff--line-chart-x-line-data"
216
+ style={{ fontSize:numberSize}}
215
217
  >
216
218
  {point[xKey] != null ? String(point[xKey]) : ''}
217
219
  </text>
218
220
  ))}
219
221
 
220
222
  {Array.from({ length: 6 }).map((_, i) => {
221
- const yValue = (i * yMaxExtended) / 5;
223
+ const yValueInGB = i * 0.2;
222
224
  return (
223
225
  <text
224
- key={yValue}
226
+ key={yValueInGB}
225
227
  x={-15}
226
- y={yScale(yValue)}
228
+ y={yScale(yValueInGB * 1024)}
227
229
  textAnchor="middle"
228
230
  fill={yAxisValueColor}
229
231
  className="ff-line-chart-y-axis-text"
232
+ style={{ fontSize:numberSize}}
230
233
  >
231
- {yValue.toFixed(1)}
234
+ {yValueInGB.toFixed(1)}
232
235
  </text>
233
236
  );
234
237
  })}
@@ -1,27 +1,29 @@
1
1
  export interface LineChartDataPoint {
2
- point: any;
3
- x: string;
4
- y: number;
2
+ point: any;
3
+ x: string;
4
+ y: number;
5
5
  }
6
6
 
7
7
  export interface Line {
8
- show: boolean;
9
- color: string;
10
- data: LineChartDataPoint[];
8
+ show: boolean;
9
+ color: string;
10
+ data: LineChartDataPoint[];
11
11
  }
12
12
 
13
13
  export interface LineChartProps {
14
- data: any[];
15
- width: number;
16
- height: number;
17
- axisColor: string;
18
- isStatusVariant?: boolean;
19
- lineChartWidth?:number;
20
- yAxisLabel?:string;
21
- xAxisLabel?:string;
22
- yAxisValueColor?:string;
23
- xAxisColor?:string;
24
- yAxisColor?:string;
25
- yAxisLabelColor?:string;
26
-
27
- }
14
+ data: any[];
15
+ width: number;
16
+ height: number;
17
+ axisColor: string;
18
+ isStatusVariant?: boolean;
19
+ lineChartWidth?: number;
20
+ yAxisLabel?: string;
21
+ xAxisLabel?: string;
22
+ yAxisValueColor?: string;
23
+ xAxisColor?: string;
24
+ yAxisColor?: string;
25
+ yAxisLabelColor?: string;
26
+ textSize?: string | number;
27
+ fontWeight?: string | number;
28
+ numberSize?: string | number;
29
+ }
@@ -9,7 +9,7 @@
9
9
  --rdp-day-height: 24px;
10
10
  --rdp-day-width: 36px;
11
11
  @include fonts.fontPoppins(12px);
12
- --rdp-font-family: 'Poppins';
12
+ --rdp-font-family: 'Poppins', sans-serif;
13
13
  }
14
14
 
15
15
  .ff-cursor-pointer {
@@ -48,7 +48,8 @@
48
48
  .ff-calendar-icon,
49
49
  .ff-clock-icon {
50
50
  position: absolute;
51
- transform: translate(50%, 50%);
51
+ top: 50%;
52
+ transform: translate(25%, -50%);
52
53
  display: flex;
53
54
  align-items: center;
54
55
  pointer-events: none;
@@ -118,7 +119,7 @@
118
119
  border: 1px solid var(--border-color);
119
120
  background-color: var(--toggle-button-bg-color);
120
121
  box-shadow: 0 -2px 2px 0 var(--ff-mini-modal-box-shadow);
121
- padding: 4px;
122
+ padding: 0px;
122
123
  border-radius: 30%;
123
124
  cursor: pointer;
124
125
 
@@ -1,3 +1,4 @@
1
+ import React from 'react';
1
2
  import type { Meta, StoryObj } from '@storybook/react';
2
3
  import CustomDatePicker from './DatePicker';
3
4
  import { useState } from 'react';
@@ -36,7 +37,7 @@ const meta: Meta<typeof CustomDatePicker> = {
36
37
  },
37
38
  onChange: {
38
39
  description: 'Function to handle date selection',
39
- action: 'changed',
40
+ action: 'changed',
40
41
  },
41
42
  placeholder: {
42
43
  description: 'Placeholder text for the input field',
@@ -60,14 +61,15 @@ const meta: Meta<typeof CustomDatePicker> = {
60
61
  },
61
62
  calendarWidth: {
62
63
  description: 'Custom width for the calendar in pixel',
63
- control: "number"
64
+ control: 'number',
64
65
  },
65
66
  error: {
66
67
  description: 'Displays the input field in an error state',
67
68
  control: 'boolean',
68
69
  },
69
70
  helperText: {
70
- description: 'Helper text to show below the input, often used for error messages',
71
+ description:
72
+ 'Helper text to show below the input, often used for error messages',
71
73
  control: 'text',
72
74
  },
73
75
  },
@@ -82,14 +84,8 @@ export const Default: Story = {
82
84
  render: (args) => {
83
85
  const [date, setDate] = useState<Date | undefined>();
84
86
 
85
- return(
86
- <CustomDatePicker
87
- {...args}
88
- value={date}
89
- onChange={setDate}
90
- />
91
- )
92
- }
87
+ return <CustomDatePicker {...args} value={date} onChange={setDate} />;
88
+ },
93
89
  };
94
90
 
95
91
  // Start Date Filter story
@@ -102,7 +98,7 @@ export const StartDateFilter: Story = {
102
98
  {...args}
103
99
  value={startDate}
104
100
  onChange={setStartDate}
105
- calendarWidth = {240}
101
+ calendarWidth={240}
106
102
  maxDate={new Date()} // Disable future dates for start date picker
107
103
  />
108
104
  );
@@ -143,7 +139,7 @@ export const EndDateInput: Story = {
143
139
  export const ScheduleDateInput: Story = {
144
140
  args: {
145
141
  error: false,
146
- helperText: "Error"
142
+ helperText: 'Error',
147
143
  },
148
144
 
149
145
  render: (args) => {
@@ -157,5 +153,22 @@ export const ScheduleDateInput: Story = {
157
153
  minDate={new Date()} // Set minimum date to today
158
154
  />
159
155
  );
160
- }
156
+ },
157
+ };
158
+
159
+ export const Dateonly: Story = {
160
+ render: (args) => {
161
+ const [selectedDate, setSelectDate] = useState<Date | undefined>();
162
+
163
+ console.log(selectedDate);
164
+ return (
165
+ <CustomDatePicker
166
+ {...args}
167
+ value={selectedDate}
168
+ onChange={setSelectDate}
169
+ calendarWidth={240}
170
+ dateOnly
171
+ />
172
+ );
173
+ },
161
174
  };