pixel-react 1.1.0 → 1.1.2

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 (75) hide show
  1. package/.yarn/install-state.gz +0 -0
  2. package/lib/components/Charts/DashboardDonutChart/DashboardDonutChart.d.ts +5 -0
  3. package/lib/components/Charts/DashboardDonutChart/DashboardDonutChart.stories.d.ts +7 -0
  4. package/lib/components/Charts/DashboardDonutChart/index.d.ts +1 -0
  5. package/lib/components/Charts/DashboardDonutChart/types.d.ts +21 -0
  6. package/lib/components/Charts/PieChart/PieChart.d.ts +5 -0
  7. package/lib/components/Charts/PieChart/PieChart.stories.d.ts +7 -0
  8. package/lib/components/Charts/PieChart/index.d.ts +1 -0
  9. package/lib/components/Charts/PieChart/types.d.ts +27 -0
  10. package/lib/components/FF_Captcha/Recaptcha.d.ts +5 -0
  11. package/lib/components/FF_Captcha/captcha.stories.d.ts +8 -0
  12. package/lib/components/FF_Captcha/types.d.ts +20 -0
  13. package/lib/components/MultiSelect/MultiSelect.d.ts +1 -1
  14. package/lib/components/MultiSelect/MultiSelectTypes.d.ts +1 -1
  15. package/lib/components/NLPInput/NlpInput.d.ts +4 -0
  16. package/lib/components/NLPInput/NlpInput.stories.d.ts +7 -0
  17. package/lib/components/NLPInput/components/NlpDropDown/NlpDropDownType.d.ts +19 -0
  18. package/lib/components/NLPInput/components/NlpDropDown/NlpDropdown.d.ts +4 -0
  19. package/lib/components/NLPInput/index.d.ts +1 -0
  20. package/lib/components/NLPInput/type.d.ts +70 -0
  21. package/lib/components/Table/Table.d.ts +1 -1
  22. package/lib/index.d.ts +96 -19
  23. package/lib/index.esm.js +2951 -249
  24. package/lib/index.esm.js.map +1 -1
  25. package/lib/index.js +2953 -247
  26. package/lib/index.js.map +1 -1
  27. package/lib/tsconfig.tsbuildinfo +1 -1
  28. package/lib/utils/getEncryptedData/getEncryptedData.d.ts +2 -0
  29. package/lib/utils/getEncryptedData/getEncryptedData.stories.d.ts +6 -0
  30. package/package.json +6 -2
  31. package/src/StyleGuide/ColorPalette/ColorPalette.tsx +2 -4
  32. package/src/StyleGuide/ColorPalette/colorPaletteList.ts +95 -20
  33. package/src/assets/Themes/BaseTheme.scss +2 -3
  34. package/src/assets/Themes/DarkTheme.scss +9 -8
  35. package/src/assets/icons/wswb_delete_icon.svg +4 -0
  36. package/src/assets/icons/wswb_plus_icon.svg +5 -0
  37. package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.scss +145 -0
  38. package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.stories.tsx +52 -0
  39. package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.tsx +335 -0
  40. package/src/components/Charts/DashboardDonutChart/index.ts +1 -0
  41. package/src/components/Charts/DashboardDonutChart/types.ts +33 -0
  42. package/src/components/Charts/PieChart/PieChart.scss +39 -0
  43. package/src/components/Charts/PieChart/PieChart.stories.tsx +46 -0
  44. package/src/components/Charts/PieChart/PieChart.tsx +193 -0
  45. package/src/components/Charts/PieChart/index.ts +1 -0
  46. package/src/components/Charts/PieChart/types.ts +28 -0
  47. package/src/components/FF_Captcha/Recaptcha.scss +11 -0
  48. package/src/components/FF_Captcha/Recaptcha.tsx +41 -0
  49. package/src/components/FF_Captcha/captcha.stories.tsx +40 -0
  50. package/src/components/FF_Captcha/index.ts +0 -0
  51. package/src/components/FF_Captcha/types.ts +22 -0
  52. package/src/components/Icon/iconList.ts +6 -0
  53. package/src/components/Modal/modal.scss +1 -1
  54. package/src/components/MultiSelect/MultiSelect.stories.tsx +2 -3
  55. package/src/components/MultiSelect/MultiSelect.tsx +35 -23
  56. package/src/components/MultiSelect/MultiSelectTypes.ts +1 -1
  57. package/src/components/NLPInput/NLPInput.scss +246 -0
  58. package/src/components/NLPInput/NlpInput.stories.tsx +136 -0
  59. package/src/components/NLPInput/NlpInput.tsx +374 -0
  60. package/src/components/NLPInput/components/NlpDropDown/NlpDropDownType.ts +60 -0
  61. package/src/components/NLPInput/components/NlpDropDown/NlpDropdown.scss +83 -0
  62. package/src/components/NLPInput/components/NlpDropDown/NlpDropdown.tsx +180 -0
  63. package/src/components/NLPInput/index.ts +1 -0
  64. package/src/components/NLPInput/type.tsx +124 -0
  65. package/src/components/Table/Table.scss +5 -0
  66. package/src/components/Table/Table.stories.tsx +12 -0
  67. package/src/components/Table/Table.tsx +25 -14
  68. package/src/components/TextArea/Textarea.scss +1 -1
  69. package/src/index.ts +8 -1
  70. package/src/utils/getEncryptedData/getEncryptedData.stories.tsx +55 -0
  71. package/src/utils/getEncryptedData/getEncryptedData.ts +10 -0
  72. package/lib/components/AddButton/AddButton.d.ts +0 -5
  73. package/lib/components/AddButton/AddButton.stories.d.ts +0 -6
  74. package/lib/components/AddButton/index.d.ts +0 -1
  75. package/lib/components/AddButton/types.d.ts +0 -4
@@ -0,0 +1,180 @@
1
+ import { ReactNode, useContext, useRef, useState } from 'react';
2
+ import {
3
+ NlpDropDownListProps,
4
+ nlpDropdownDefaultCSSData,
5
+ } from './NlpDropDownType';
6
+ import useClickOutside from '../../../../hooks/useClickOutside';
7
+ import { checkEmpty } from '../../../../utils/checkEmpty/checkEmpty';
8
+ import './NlpDropdown.scss';
9
+ import Typography from '../../../Typography';
10
+ import ffid from '../../../../utils/ffID/ffid';
11
+ import { ThemeContext } from '../../../ThemeProvider/ThemeProvider';
12
+ import classNames from 'classnames';
13
+
14
+ type OptionType = {
15
+ label: ReactNode;
16
+ value: string;
17
+ displayName?: string;
18
+ description?: string;
19
+ nlpType?: string;
20
+ path?: string;
21
+ stepInputs?: { type?: string; name?: string }[];
22
+ returnType?: string;
23
+ };
24
+
25
+ const NlpDropdown = ({
26
+ onSelectBlur,
27
+ onSelectOptionSelector,
28
+ dropdownPosition,
29
+ options = [],
30
+ optionZIndex = 100,
31
+ inputRef,
32
+ }: NlpDropDownListProps) => {
33
+ // const [nlpData, setNlpData] = useState<OptionType | null>(null); need to add setNlpData
34
+ const [nlpData] = useState<OptionType | null>(null);
35
+ const themeContext = useContext(ThemeContext);
36
+ const currentTheme = themeContext?.currentTheme;
37
+ const optionsWrapperRef = useRef<HTMLDivElement>(null);
38
+ useClickOutside(optionsWrapperRef, onSelectBlur, [inputRef]);
39
+
40
+ const { positionX, positionY, width, fromBottom } = dropdownPosition;
41
+ const { margin, optionHeight, selectInputHeight, dropDownWrapperPadding } =
42
+ nlpDropdownDefaultCSSData;
43
+
44
+ const updateDropdownPosition = () => {
45
+ let dropdownContainerHeight;
46
+
47
+ if (checkEmpty(options)) {
48
+ dropdownContainerHeight = optionHeight + 2 * dropDownWrapperPadding;
49
+ } else if (options.length > 5) {
50
+ dropdownContainerHeight = 5 * optionHeight + 2 * dropDownWrapperPadding;
51
+ } else {
52
+ dropdownContainerHeight =
53
+ options.length * optionHeight + 2 * dropDownWrapperPadding;
54
+ }
55
+
56
+ if (fromBottom > dropdownContainerHeight + margin) {
57
+ return {
58
+ left: positionX,
59
+ top: positionY,
60
+ width: width,
61
+ zIndex: optionZIndex,
62
+ };
63
+ }
64
+ return {
65
+ zIndex: optionZIndex,
66
+ left: positionX,
67
+ width: width,
68
+ top: positionY - selectInputHeight - dropdownContainerHeight - margin,
69
+ };
70
+ };
71
+
72
+ return (
73
+ <div className="ff-nlp-dropdown-wrapper">
74
+ <div
75
+ ref={optionsWrapperRef}
76
+ style={updateDropdownPosition()}
77
+ className={classNames('ff-nlp-options-wrapper', currentTheme)}
78
+ >
79
+ <div className="ff-nlp-options-wrapper1">
80
+ {!checkEmpty(options) ? (
81
+ options.map((option) => (
82
+ // <div key={ffid()} onMouseEnter={() => setNlpData(option)}> need to add onMouseEnter
83
+ <div key={ffid()}>
84
+ <Typography
85
+ as="div"
86
+ lineHeight="30px"
87
+ className={classNames('ff-nlp-option', currentTheme)}
88
+ color="var(--ff-nlp-text-color)"
89
+ onClick={() => onSelectOptionSelector(option)}
90
+ >
91
+ <span className="mr-2 fontPoppinsRegularMd">
92
+ {option?.nlpType === 'NLP' ? (
93
+ <b className="nlp-type-NLP">NLP</b>
94
+ ) : option?.nlpType === 'STEP_GROUP' ? (
95
+ <b className="nlp-type-step-group">SG</b>
96
+ ) : option?.nlpType === 'PROGRAM_ELEMENTS' ? (
97
+ <b className="nlp-type-program-elements">PE</b>
98
+ ) : (
99
+ '--'
100
+ )}
101
+ </span>
102
+ <span className="mr-2 fontPoppinsRegularMd">
103
+ {option?.platform === 'web' ? (
104
+ <b className="platform-web">Web</b>
105
+ ) : option?.platform === 'android' ? (
106
+ <b className="platform-android">Android</b>
107
+ ) : option?.platform === 'ios' ? (
108
+ <b className="platform-ios">iOS</b>
109
+ ) : option?.platform === 'Generic' ? (
110
+ <b className="platform-ios">Generic</b>
111
+ ) : (
112
+ '--'
113
+ )}
114
+ </span>
115
+ {option?.displayName}
116
+ </Typography>
117
+ </div>
118
+ ))
119
+ ) : (
120
+ <Typography
121
+ textAlign="center"
122
+ lineHeight="32px"
123
+ as="p"
124
+ color="var(--ff-nlp-text-color)"
125
+ className="ff-nlp-no-option"
126
+ >
127
+ No Results Found
128
+ </Typography>
129
+ )}
130
+ <button>+ Web Services</button>
131
+ </div>
132
+ <div className="ff-nlp-data">
133
+ <div>
134
+ <div className="nlp-details-header mt-4">Name:</div>
135
+ <div className="nlp-details nlpdiv-check">
136
+ {nlpData?.displayName || '--'}
137
+ </div>
138
+ <div className="nlp-details-header mt-4">Description:</div>
139
+ <div className="nlp-details nlpdiv-check">
140
+ {nlpData?.description || '--'}
141
+ </div>
142
+ {nlpData?.nlpType === 'STEP_GROUP' && (
143
+ <>
144
+ <div className="nlp-details-header mt-4">Path:</div>
145
+ <div className="nlp-details nlpdiv-check">
146
+ {nlpData?.path ? nlpData?.path.slice(6) : '--'}
147
+ </div>
148
+ </>
149
+ )}
150
+ <div className="nlp-details-header mt-4">Inputs:</div>
151
+ {nlpData?.stepInputs?.length ? (
152
+ nlpData.stepInputs.map((stepInput, index) => {
153
+ const stepInputType = stepInput.type
154
+ ? stepInput.type.split('.').pop()
155
+ : '--';
156
+ return (
157
+ <div key={index}>
158
+ <div className="nlp-details-header">Input{index + 1}:</div>
159
+ <div className="nlp-details">type: {stepInputType}</div>
160
+ <div className="nlp-details mb-4">
161
+ name: {stepInput.name || '--'}
162
+ </div>
163
+ </div>
164
+ );
165
+ })
166
+ ) : (
167
+ <div className="nlp-details mb-4">--</div>
168
+ )}
169
+ <div className="nlp-details-header">Output:</div>
170
+ <div className="nlp-details mb-4">
171
+ {nlpData?.returnType || '--'}
172
+ </div>
173
+ </div>
174
+ </div>
175
+ </div>
176
+ </div>
177
+ );
178
+ };
179
+
180
+ export default NlpDropdown;
@@ -0,0 +1 @@
1
+ export { default } from './NlpInput';
@@ -0,0 +1,124 @@
1
+ import { ReactNode } from 'react';
2
+
3
+ export interface SelectProps {
4
+ /*
5
+ * Label for the NLP NLP select dropdown
6
+ */
7
+ label?: string;
8
+
9
+ /*
10
+ * If true, the NLP select dropdown will have a label
11
+ */
12
+ showLabel?: boolean;
13
+
14
+ /*
15
+ * Options for the NLP select dropdown
16
+ */
17
+ optionsList: any[];
18
+
19
+ /*
20
+ * Selected option for the NLP select dropdown
21
+ */
22
+ selectedOption?: Option;
23
+
24
+ /*
25
+ * onChange callback function for handling selected option changes
26
+ */
27
+ onChange: (option: Option) => void;
28
+
29
+ /*
30
+ * If error is true, this message will be displayed
31
+ */
32
+ errorMsg?: string;
33
+
34
+ /*
35
+ * provide the className for the NLP select dropdown
36
+ */
37
+ className?: string;
38
+
39
+ /*
40
+ * Providing the z-index for dropdown and select
41
+ */
42
+ optionZIndex?: number;
43
+
44
+ /*
45
+ * Provide disable prop for the disabling the select component
46
+ */
47
+ disabled?: boolean;
48
+
49
+ /*
50
+ * Provide disable prop for the providing border radius at right side
51
+ */
52
+ borderRadius?: boolean;
53
+
54
+ /*
55
+ * Provide boolean value to show border or not
56
+ */
57
+ showBorder?: boolean;
58
+
59
+ /*
60
+ * Provide the boolean value if the select component is required or not
61
+ */
62
+ required?: boolean;
63
+ }
64
+
65
+ export interface DrowdownPosition {
66
+ positionX: number;
67
+ positionY: number;
68
+ width: number;
69
+ fromBottom: number;
70
+ }
71
+
72
+ export interface SelectState {
73
+ isInputFocused: boolean;
74
+ iconColor: string;
75
+ isIconClick: boolean;
76
+ showOptions: boolean;
77
+ options: any[];
78
+ option: string;
79
+ dropdownPosition: DrowdownPosition;
80
+ }
81
+
82
+ export type SelectAction =
83
+ | { type: 'FOCUS_INPUT' }
84
+ | {
85
+ type: 'BLUR_INPUT';
86
+ payload: {
87
+ optionsList: Option[];
88
+ option: Option['projectId'];
89
+ };
90
+ }
91
+ | { type: 'MOUSE_ENTER' }
92
+ | { type: 'MOUSE_LEAVE' }
93
+ | {
94
+ type: 'UPDATE_DROPDOWN_POSITION';
95
+ payload: {
96
+ positionX: number;
97
+ positionY: number;
98
+ width: number;
99
+ fromBottom: number;
100
+ };
101
+ }
102
+ | {
103
+ type: 'UPDATE_OPTION';
104
+ payload: string;
105
+ }
106
+ | {
107
+ type: 'UPDATE_OPTION_LIST';
108
+ payload: any[];
109
+ }
110
+ | {
111
+ type: 'SHOW_ERROR';
112
+ payload: {
113
+ optionsList: any[];
114
+ option: Option['projectId'];
115
+ };
116
+ };
117
+
118
+ export interface Option {
119
+ displayName: string | ReactNode;
120
+ projectId: string;
121
+ nlpType: string;
122
+ platform:string;
123
+ disabled?: boolean;
124
+ }
@@ -99,3 +99,8 @@
99
99
  justify-content: center;
100
100
  align-items: center;
101
101
  }
102
+
103
+ tbody tr.disabled-row {
104
+ opacity: 0.5;
105
+ cursor: not-allowed;
106
+ }
@@ -26,6 +26,7 @@ const sampleData = [
26
26
  type: 'Web',
27
27
  status: 'Open',
28
28
  checked: false,
29
+ disabled:true
29
30
  },
30
31
  },
31
32
  {
@@ -36,6 +37,7 @@ const sampleData = [
36
37
  type: 'Mobile',
37
38
  status: 'Close',
38
39
  checked: true,
40
+ disabled:true
39
41
  },
40
42
  },
41
43
  {
@@ -46,6 +48,7 @@ const sampleData = [
46
48
  type: 'Web',
47
49
  status: 'Close',
48
50
  checked: true,
51
+ disabled:true
49
52
  },
50
53
  },
51
54
  {
@@ -56,6 +59,7 @@ const sampleData = [
56
59
  type: 'Web & Mobile',
57
60
  status: 'Open',
58
61
  checked: false,
62
+ disabled:false
59
63
  },
60
64
  },
61
65
  {
@@ -66,6 +70,7 @@ const sampleData = [
66
70
  type: 'Web',
67
71
  status: 'Open',
68
72
  checked: false,
73
+ disabled:true
69
74
  },
70
75
  },
71
76
  {
@@ -76,6 +81,7 @@ const sampleData = [
76
81
  type: 'Mobile',
77
82
  status: 'Close',
78
83
  checked: true,
84
+ disabled:true
79
85
  },
80
86
  },
81
87
  {
@@ -86,6 +92,7 @@ const sampleData = [
86
92
  type: 'Web',
87
93
  status: 'Close',
88
94
  checked: true,
95
+ disabled:true
89
96
  },
90
97
  },
91
98
  {
@@ -96,6 +103,7 @@ const sampleData = [
96
103
  type: 'Web & Mobile',
97
104
  status: 'Open',
98
105
  checked: false,
106
+ disabled:false
99
107
  },
100
108
  },
101
109
  {
@@ -106,6 +114,7 @@ const sampleData = [
106
114
  type: 'Web',
107
115
  status: 'Open',
108
116
  checked: false,
117
+ disabled:false
109
118
  },
110
119
  },
111
120
  {
@@ -116,6 +125,7 @@ const sampleData = [
116
125
  type: 'Mobile',
117
126
  status: 'Close',
118
127
  checked: true,
128
+ disabled:false
119
129
  },
120
130
  },
121
131
  {
@@ -126,6 +136,7 @@ const sampleData = [
126
136
  type: 'Web',
127
137
  status: 'Close',
128
138
  checked: true,
139
+ disabled:false
129
140
  },
130
141
  },
131
142
  {
@@ -136,6 +147,7 @@ const sampleData = [
136
147
  type: 'Web & Mobile',
137
148
  status: 'Open',
138
149
  checked: false,
150
+ disabled:false
139
151
  },
140
152
  },
141
153
  ];
@@ -2,8 +2,10 @@ import './Table.scss';
2
2
  // import Checkbox from '../Checkbox';
3
3
  import { isFunction } from '../../assets/utils/functionUtils';
4
4
  import classNames from 'classnames';
5
- import { ColumnsProps, DataProps, TableProps } from './Types';
5
+ import { ColumnsProps, DataProps, TableProps ,SelectedItemProps} from './Types';
6
6
  import { prepareData } from '../../utils/TableCell/TableCell';
7
+ import Checkbox from '../Checkbox';
8
+ import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
7
9
 
8
10
  // import NoData from '../NoData/NoData';
9
11
 
@@ -11,13 +13,13 @@ const Table = ({
11
13
  data = [],
12
14
  columns = [],
13
15
  headerType,
14
- // withCheckbox,
15
- // onSelect,
16
- // allSelected,
17
- // partialSelected = false,
16
+ withCheckbox,
17
+ onSelect,
18
+ allSelected,
19
+ partialSelected = false,
18
20
  withFixedHeader = true,
19
21
  borderWithRadius = false,
20
- // headerCheckboxDisabled = false,
22
+ headerCheckboxDisabled = false,
21
23
  // noDataContent,
22
24
  // noDataImage,
23
25
  // noDataImageSize,
@@ -30,7 +32,13 @@ const Table = ({
30
32
  onClick(accessor, row);
31
33
  }
32
34
  };
33
- if (!(data.length >= 0)) return null;
35
+ const onSelectClick = (e: object, item: SelectedItemProps) => {
36
+ if (onSelect) {
37
+ onSelect(e, item);
38
+ }
39
+ };
40
+ if (checkEmpty(data)) return null;
41
+
34
42
  return (
35
43
  <div
36
44
  style={{ height: height }}
@@ -45,16 +53,16 @@ const Table = ({
45
53
  'ff-fixed-header': withFixedHeader,
46
54
  })}
47
55
  >
48
- <tr>
56
+ <tr >
49
57
  {/* columns.map((column, index) */}
50
- {columns.map((column) => (
58
+ {columns.map((column, index) => (
51
59
  <th
52
60
  className={headerType && `${headerType}-bg`}
53
61
  key={column.header}
54
62
  style={{ width: column?.width }}
55
63
  >
56
64
  <div>
57
- {/* {index === 0 && withCheckbox && (
65
+ {index === 0 && withCheckbox && (
58
66
  <span className="ff-table-checkbox">
59
67
  <Checkbox
60
68
  onChange={(e) => {
@@ -67,7 +75,7 @@ const Table = ({
67
75
  disabled={headerCheckboxDisabled}
68
76
  />
69
77
  </span>
70
- )} */}
78
+ )}
71
79
 
72
80
  {column.header}
73
81
  </div>
@@ -78,7 +86,10 @@ const Table = ({
78
86
  <tbody>
79
87
  {data.length > 0 &&
80
88
  data.map((row: any, index: number) => (
81
- <tr key={row.id || index}>
89
+ <tr key={row.id || index} className={classNames(className,{
90
+ 'disabled-row': row.disabled
91
+ })}
92
+ >
82
93
  {columns.map((column, i) => {
83
94
  return (
84
95
  <td
@@ -89,7 +100,7 @@ const Table = ({
89
100
  })}
90
101
  >
91
102
  <div>
92
- {/* {i === 0 && withCheckbox && (
103
+ {i === 0 && withCheckbox && (
93
104
  <span className="ff-table-checkbox">
94
105
  <Checkbox
95
106
  onChange={(e) => {
@@ -99,7 +110,7 @@ const Table = ({
99
110
  disabled={!!row.disabled}
100
111
  />
101
112
  </span>
102
- )} */}
113
+ )}
103
114
  {prepareData(row, column)}
104
115
  </div>
105
116
  </td>
@@ -14,7 +14,7 @@
14
14
  }
15
15
  .ff-textarea {
16
16
  padding: 8px;
17
- min-width: 428px;
17
+ width: 100%;
18
18
  min-height: 80px;
19
19
  gap: 0px;
20
20
  border: 1px solid var(--default-icon-color);
package/src/index.ts CHANGED
@@ -39,7 +39,11 @@ import IconButton from './components/IconButton';
39
39
  import Modal from './components/Modal';
40
40
  import DragAndDrop from './components/DragAndDrop/DragAndDrop';
41
41
  import AllProjectsDropdown from './components/AllProjectsDropdown';
42
+ import PieChart from './components/Charts/PieChart';
42
43
  import AppHeader from './components/AppHeader';
44
+ import DashboardDonutChart from './components/Charts/DashboardDonutChart'
45
+ import Recaptcha from './components/FF_Captcha/Recaptcha';
46
+ import NLPInput from './components/NLPInput';
43
47
 
44
48
  // Utils imports
45
49
  import { checkEmpty } from './utils/checkEmpty/checkEmpty';
@@ -90,11 +94,14 @@ export {
90
94
  StatusButton,
91
95
  IconButton,
92
96
  Modal,
97
+ PieChart,
98
+ DashboardDonutChart,
93
99
 
94
100
  DragAndDrop,
95
101
  AllProjectsDropdown,
96
102
  AppHeader,
97
-
103
+ Recaptcha,
104
+ NLPInput,
98
105
  // utils exports
99
106
  checkEmpty,
100
107
  getExtension,
@@ -0,0 +1,55 @@
1
+ // getEncryptData.stories.tsx
2
+ import { useState } from 'react';
3
+ import getEncryptData from './getEncryptedData';
4
+
5
+ export default {
6
+ title: 'Utils/getEncryptedData',
7
+ component: getEncryptData,
8
+ };
9
+
10
+ export const InteractivePlayground = () => {
11
+ const [data, setData] = useState<string>('Sensitive information');
12
+ const [publicKey, setPublicKey] = useState<string>(`Add your public key`);
13
+ const [encryptedData, setEncryptedData] = useState<string | null>(null);
14
+
15
+ const handleEncrypt = () => {
16
+ const result = getEncryptData(data, publicKey);
17
+ setEncryptedData(result.toString());
18
+ };
19
+
20
+ return (
21
+ <div>
22
+ <h1>Interactive Playground for getEncryptData</h1>
23
+
24
+ <div>
25
+ <label htmlFor="data">Data to Encrypt:</label>
26
+ <input
27
+ type="text"
28
+ id="data"
29
+ value={data}
30
+ onChange={(e) => setData(e.target.value)}
31
+ />
32
+ </div>
33
+
34
+ <div>
35
+ <label htmlFor="publicKey">Public Key:</label>
36
+ <textarea
37
+ id="publicKey"
38
+ value={publicKey}
39
+ onChange={(e) => setPublicKey(e.target.value)}
40
+ rows={5}
41
+ cols={50}
42
+ />
43
+ </div>
44
+
45
+ <button onClick={handleEncrypt}>Encrypt Data</button>
46
+
47
+ <h2>Encrypted Data:</h2>
48
+ {encryptedData ? (
49
+ <pre>{encryptedData}</pre>
50
+ ) : (
51
+ <p>No encrypted data yet. Click "Encrypt Data" to generate it.</p>
52
+ )}
53
+ </div>
54
+ );
55
+ };
@@ -0,0 +1,10 @@
1
+ import JSEncrypt from 'jsencrypt';
2
+
3
+ const getEncryptedData = (data: string, publicKey: string) => {
4
+ const encrypt = new JSEncrypt();
5
+ encrypt.setPublicKey(publicKey);
6
+ const enData = encrypt.encrypt(data);
7
+ return enData;
8
+ };
9
+
10
+ export default getEncryptedData;
@@ -1,5 +0,0 @@
1
- import React from 'react';
2
- import './AddButton.scss';
3
- import { AddButtonProps } from './types';
4
- declare const AddButton: React.FC<AddButtonProps>;
5
- export default AddButton;
@@ -1,6 +0,0 @@
1
- import type { Meta, StoryObj } from '@storybook/react';
2
- import AddButton from './AddButton';
3
- declare const meta: Meta<typeof AddButton>;
4
- type Story = StoryObj<typeof AddButton>;
5
- export declare const PrimaryAddButton: Story;
6
- export default meta;
@@ -1 +0,0 @@
1
- export { default } from './AddButton';
@@ -1,4 +0,0 @@
1
- export interface AddButtonProps {
2
- name: string;
3
- onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
4
- }