react-restyle-components 0.1.58 → 0.1.60

package/src/core-components/molecules/auto-complete-filter-single-select-multiple-fields-display/auto-complete-filter-single-select-multiple-fields-display.stories.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import type {Meta, StoryObj} from '@storybook/react';
+import {AutoCompleteFilterSingleSelectMultiFieldsDisplay} from './auto-complete-filter-single-select-multiple-fields-display.component';
+
+const meta: Meta<typeof AutoCompleteFilterSingleSelectMultiFieldsDisplay> = {
+  title:
+    'Design System/Molecules/AutoCompleteFilterSingleSelectMultiFieldsDisplay',
+  component: AutoCompleteFilterSingleSelectMultiFieldsDisplay,
+  tags: ['autodocs'],
+  parameters: {
+    componentSubtitle: `import { AutoCompleteFilterSingleSelectMultiFieldsDisplay } from 'react-restyle-components'`,
+    // backgrounds: {
+    //   default: 'light-gray',
+    // },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof AutoCompleteFilterSingleSelectMultiFieldsDisplay>;
+
+export const Primary: Story = {
+  args: {
+    data: {
+      list: [
+        {code: 'Code1', name: 'Value1'},
+        {code: 'Code2', name: 'Value2'},
+        {code: 'Code3', name: 'Value3'},
+      ],
+      displayKey: ['name'],
+    },
+    onSelect: (item) => {
+      console.log({item});
+    },
+  },
+};

package/src/core-components/molecules/css-multiline-input/css-multiline-input.component.tsx

@@ -0,0 +1,135 @@
+import React, {useEffect, useState, useRef} from 'react';
+import _ from 'lodash';
+import {Form} from '../..';
+import {properties as propertiesObj} from './css-properties';
+
+interface CSSMultilineProps {
+  label?: string;
+  defaultValue?: string;
+  placeholder?: string;
+  className?: string;
+  style?: any;
+  onChange(item): void;
+}
+const mapToArray = (arr: any) => {
+  const res: any = [];
+  arr.forEach(function (obj, index) {
+    const key = Object.keys(obj)[0];
+    const value = key;
+    res.push([value, obj[key]]);
+  });
+  return res;
+};
+const data = mapToArray(propertiesObj);
+export const CSSMultiline = ({
+  label = 'Main Box CSS',
+  defaultValue = '',
+  className = '',
+  style = {},
+  placeholder = "Like fontSize: 12,backgroundColor:'#000000',",
+  onChange,
+}: CSSMultilineProps) => {
+  const value = useRef('');
+  const [properties, setProperties] = useState<Array<any>>([]);
+  const [isListOpen, setIsListOpen] = useState<boolean>(false);
+  useEffect(() => {
+    value.current = defaultValue;
+    setProperties(data);
+  }, [defaultValue]);
+  const useOutsideAlerter = (ref) => {
+    useEffect(() => {
+      function handleClickOutside(event) {
+        if (ref.current && !ref.current.contains(event.target)) {
+          setIsListOpen(false);
+          onChange(value.current);
+        }
+      }
+      document.addEventListener('mousedown', handleClickOutside);
+      return () => {
+        document.removeEventListener('mousedown', handleClickOutside);
+      };
+    }, [ref]);
+  };
+
+  const wrapperRef = useRef(null);
+  useOutsideAlerter(wrapperRef);
+
+  const list: Array<any> = [];
+  const filter = (css: string) => {
+    let matchString: any = css?.split(',');
+    matchString = matchString[matchString?.length - 1];
+    matchString = matchString?.split(':')[0];
+    matchString = matchString?.split("'")[0];
+    if (css?.length == 0) return setProperties(data);
+    else {
+      data?.map((item) => {
+        const innerItem: Array<any> = [];
+        const isItems = item[0]?.startsWith(matchString);
+        if (isItems) innerItem.push(item[0]);
+        if (innerItem?.length > 0) list.push([item[0], item[1]]);
+      });
+      setProperties(list);
+    }
+  };
+
+  const onKeyUp = (e) => {
+    setIsListOpen(true);
+  };
+
+  return (
+    <div className="flex flex-col w-full" ref={wrapperRef}>
+      <Form.MultilineInput
+        label={label}
+        style={{color: '#ffffff', backgroundColor: '#000000', ...style}}
+        placeholder={placeholder}
+        value={value.current}
+        className={className}
+        onKeyUp={onKeyUp}
+        onChange={(css) => {
+          value.current = css;
+          filter(css);
+        }}
+      />
+      {isListOpen && (
+        <div style={{marginTop: -10}}>
+          <ul className="flex flex-col max-h-40 bg-black  m-2 text-white  overflow-y-scroll  ">
+            {properties?.map((item, index) => (
+              <li key={index} className="flex flex-col gap-4 p-2">
+                <span className="underline">{item[0]}</span>
+                {item[1]?.map((prop) => (
+                  <li
+                    className="flex -mt-2 px-2 h-8 bg-slate-800  rounded-md items-center cursor-pointer"
+                    onClick={() => {
+                      let existsString: any = value.current?.split(',');
+                      if (value.current.includes(',')) {
+                        existsString = existsString.map((item) => {
+                          if (item?.includes(':')) return item;
+                        });
+                        if (prop != 'number')
+                          existsString.push(`${item[0]}:'${prop}',`);
+                        else existsString.push(`${item[0]}:1,`);
+                        value.current = existsString
+                          .join(',')
+                          .replaceAll(',,', ',');
+                      } else {
+                        if (prop != 'number')
+                          value.current = `${item[0]}:'${prop}',`;
+                        else {
+                          value.current = `${item[0]}:1,`;
+                        }
+                      }
+                      filter(existsString.join(''));
+                    }}
+                  >
+                    {' '}
+                    {prop}{' '}
+                  </li>
+                ))}
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+    </div>
+  );
+};

package/src/core-components/molecules/css-multiline-input/css-multiline-input.stories.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import type {Meta, StoryObj} from '@storybook/react';
+import {CSSMultiline} from './css-multiline-input.component';
+
+const meta: Meta<typeof CSSMultiline> = {
+  title: 'Design System/Molecules/CSSMultiline',
+  component: CSSMultiline,
+  tags: ['autodocs'],
+  parameters: {
+    componentSubtitle: `import { CSSMultiline } from 'react-restyle-components'`,
+  },
+};
+export default meta;
+type Story = StoryObj<typeof CSSMultiline>;
+
+export const Primary: Story = {
+  args: {},
+};

package/src/core-components/molecules/css-multiline-input/css-multiline-input.test.tsx

@@ -0,0 +1,11 @@
+/* eslint-disable testing-library/await-async-query */
+/* eslint-disable testing-library/prefer-screen-queries */
+/* eslint-disable testing-library/render-result-naming-convention */
+import React from 'react';
+import {render} from '@core-utils';
+import {CSSMultiline} from './css-multiline-input.component';
+
+it('render CSSMultiline correctly', () => {
+  const result = render(<CSSMultiline onChange={() => {}} />);
+  expect(result).toMatchSnapshot();
+});

package/src/core-components/molecules/css-multiline-input/css-properties.ts

@@ -0,0 +1,177 @@
+/* eslint-disable no-sparse-arrays */
+export const properties = [
+  {
+    alignContent: [
+      'flex-start',
+      'flex-end',
+      'center',
+      'stretch',
+      'space-between',
+      'space-around',
+    ],
+  },
+  { alignItems: ['flex-start', 'flex-end', 'center', 'stretch', 'baseline'] },
+  {
+    alignSelf: [
+      'auto',
+      'flex-start',
+      'flex-end',
+      'center',
+      'baseline',
+      'stretch',
+    ],
+  },
+  { flex: ['number', 'string'] },
+  { flexDirection: ['row', 'row-reverse', 'column', 'column-reverse'] },
+  { flexWrap: ['nowrap', 'wrap', 'wrap-reverse'] },
+  { flexFlow: ['number'] },
+  { flexGrow: ['number'] },
+  { flexShrink: ['number'] },
+  { flexBasis: ['number', 'string'] },
+  {
+    justifyContent: [
+      ,
+      'flex-start',
+      'flex-end',
+      'center',
+      'space-around',
+      'space-between',
+      'space-evenly',
+    ],
+  },
+  { gap: ['number', 'string'] },
+  { rowGap: ['number'] },
+  { columnGap: ['number'] },
+
+  // Layout
+
+  { aspectRatio: ['number', 'string'] },
+  { bottom: ['number', 'string'] },
+  { display: ['flex', 'none'] },
+  { left: ['number', 'string'] },
+  { position: ['absolute', 'relative'] },
+  { right: ['number', 'string'] },
+  { top: ['number', 'string'] },
+  { overflow: ['hidden'] },
+  { zIndex: ['number', 'string'] },
+
+  // Dimension
+
+  { height: ['number', 'string'] },
+  { maxHeight: ['number', 'string'] },
+  { maxWidth: ['number', 'string'] },
+  { minHeight: ['number', 'string'] },
+  { minWidth: ['number', 'string'] },
+  { width: ['number', 'string'] },
+
+  // Color
+
+  { backgroundColor: ['string'] },
+  { color: ['string'] },
+  { opacity: ['number'] },
+
+  // Text
+
+  { fontSize: ['number', 'string'] },
+  { fontFamily: ['string'] },
+  { fontStyle: ['string', 'normal'] },
+  {
+    fontWeight: [
+      ,
+      'number',
+      'thin',
+      'hairline',
+      'ultralight',
+      'extralight',
+      'light',
+      'normal',
+      'medium',
+      'semibold',
+      'demibold',
+      'bold',
+      'ultrabold',
+      'extrabold',
+      'heavy',
+      'black',
+    ],
+  },
+  { letterSpacing: ['number', 'string'] },
+  { lineHeight: ['number', 'string'] },
+  { maxLines: ['number'] }, // ']
+  { textAlign: ['left', 'right', 'center', 'justify'] }, // ']
+  {
+    textDecoration: [
+      ,
+      'line-through',
+      'underline',
+      'none',
+      'line-through underline',
+      'underline line-through',
+    ],
+  },
+  { textDecorationColor: ['string'] },
+  { textDecorationStyle: ['dashed', 'dotted', 'solid', 'string'] }, // ']
+  { textIndent: ['any'] }, // ']
+  { textOverflow: ['ellipsis'] },
+  { textTransform: ['capitalize', 'lowercase', 'uppercase'] },
+  { verticalAlign: ['sub', 'super'] },
+
+  // Sizing/positioning
+
+  { objectFit: ['string'] },
+  { objectPosition: ['number', 'string'] },
+  { objectPositionX: ['number', 'string'] },
+  { objectPositionY: ['number', 'string'] },
+
+  // Margin/padding
+
+  { margin: ['number', 'string'] },
+  { marginHorizontal: ['number', 'string'] },
+  { marginVertical: ['number', 'string'] },
+  { marginTop: ['number', 'string'] },
+  { marginRight: ['number', 'string'] },
+  { marginBottom: ['number', 'string'] },
+  { marginLeft: ['number', 'string'] },
+  { padding: ['number', 'string'] },
+  { paddingHorizontal: ['number', 'string'] },
+  { paddingVertical: ['number', 'string'] },
+  { paddingTop: ['number', 'string'] },
+  { paddingRight: ['number', 'string'] },
+  { paddingBottom: ['number', 'string'] },
+  { paddingLeft: ['number', 'string'] },
+
+  // Transformations
+
+  { transform: ['string'] },
+  { transformOrigin: ['number', 'string'] },
+  { transformOriginX: ['number', 'string'] },
+  { transformOriginY: ['number', 'string'] },
+
+  // Borders
+
+  { border: ['number', 'string'] },
+  { borderWidth: ['number', 'string'] },
+  { borderColor: ['string'] },
+  { borderStyle: ['dashed', 'dotted', 'solid'] },
+  { borderTop: ['number', 'string'] },
+  { borderTopColor: ['string'] },
+  { borderTopStyle: ['dashed', 'dotted', 'solid'] }, // ']
+  { borderTopWidth: ['number', 'string'] },
+  { borderRight: ['number', 'string'] },
+  { borderRightColor: ['string'] },
+  { borderRightStyle: ['dashed', 'dotted', 'solid'] }, // ']
+  { borderRightWidth: ['number', 'string'] },
+  { borderBottom: ['number', 'string'] },
+  { borderBottomColor: ['string'] },
+  { borderBottomStyle: ['dashed', 'dotted', 'solid'] }, // ']
+  { borderBottomWidth: ['number', 'string'] },
+  { borderLeft: ['number', 'string'] },
+  { borderLeftColor: ['string'] },
+  { borderLeftStyle: ['dashed', 'dotted', 'solid'] }, // ']
+  { borderLeftWidth: ['number', 'string'] },
+  { borderTopLeftRadius: ['number', 'string'] },
+  { borderTopRightRadius: ['number', 'string'] },
+  { borderBottomRightRadius: ['number', 'string'] },
+  { borderBottomLeftRadius: ['number', 'string'] },
+  { borderRadius: ['number', 'string'] },
+];

package/src/core-utils/index.ts

@@ -0,0 +1 @@
+export * from './unit-test.utils';

package/src/core-utils/unit-test.utils.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import {render as renderComponent} from '@testing-library/react';
+
+const Providers = ({children}: any) => {
+  return <div>{children}</div>;
+};
+
+const render = (Component: JSX.Element) => {
+  return renderComponent(Component, {wrapper: Providers});
+};
+
+export {render, Providers};

package/src/custom.d.ts

@@ -0,0 +1,4 @@
+declare module '*.svg' {
+  const content: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
+  export default content;
+}

package/src/index.css

@@ -0,0 +1,17 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
+    monospace;
+}

package/src/index.ts

@@ -0,0 +1 @@
+export * from './core-components';

package/src/index.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import App from './App';
+import reportWebVitals from './reportWebVitals';
+
+const root = ReactDOM.createRoot(
+  document.getElementById('root') as HTMLElement
+);
+root.render(
+  <div>
+    <App />
+  </div>
+);
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals();

package/src/library/assets/svg/DownArrow.svg

@@ -0,0 +1,14 @@
+<svg
+          className="ml-2 w-4 h-4 absolute right-0"
+          fill="none"
+          stroke="#E7503E"
+          viewBox="0 -6 20 20"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+  <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="2"
+              d="M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708l6-6z"
+            />
+         </svg>

package/src/library/assets/svg/UpArrow.svg

@@ -0,0 +1,14 @@
+<svg
+          className="ml-2 w-4 h-4 absolute right-0"
+          fill="none"
+          stroke="#E7503E"
+          viewBox="0 -6 20 20"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+ <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="2"
+              d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"
+            />
+        </svg>

package/src/library/assets/svg/checkedBox.svg

@@ -0,0 +1,14 @@
+<svg width="15" height="15" viewBox="0 0 15 15" fill="none" >
+<rect width="15" height="15" fill="#E5E5E5"/>
+<g clip-path="url(#clip0_0_1)">
+<rect width="360" height="640" transform="translate(-20 -399)" fill="white"/>
+<rect x="0.5" y="0.5" width="14" height="14" rx="1.5" fill="white" />
+<rect x="0.5" y="0.5" width="14" height="14" rx="1.5"  />
+<path d="M4 7.33333L6.33333 10L11.6667 5" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_0_1">
+<rect width="360" height="640" fill="white" transform="translate(-20 -399)"/>
+</clipPath>
+</defs>
+</svg>

package/src/library/assets/svg/checkedRadio.svg

@@ -0,0 +1,13 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" >
+<rect width="20" height="20" fill="#E5E5E5"/>
+<g clip-path="url(#clip0_0_1)">
+<rect width="360" height="2645" transform="translate(-253 -1410)" fill="white"/>
+<circle cx="10" cy="10" r="9.5" stroke="#E7503D"/>
+<circle cx="10" cy="10" r="6" fill="#E7503D"/>
+</g>
+<defs>
+<clipPath id="clip0_0_1">
+<rect width="360" height="2645" fill="white" transform="translate(-253 -1410)"/>
+</clipPath>
+</defs>
+</svg>

package/src/library/assets/svg/datePicker.svg

@@ -0,0 +1,3 @@
+<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.4 1.2H11.4V0.3C11.4 0.220435 11.3684 0.144129 11.3121 0.087868C11.2559 0.0316071 11.1796 0 11.1 0C11.0204 0 10.9441 0.0316071 10.8879 0.087868C10.8316 0.144129 10.8 0.220435 10.8 0.3V1.2H4.2V0.3C4.2 0.220435 4.16839 0.144129 4.11213 0.087868C4.05587 0.0316071 3.97957 0 3.9 0C3.82044 0 3.74413 0.0316071 3.68787 0.087868C3.63161 0.144129 3.6 0.220435 3.6 0.3V1.2H0.6C0.44087 1.2 0.288258 1.26321 0.175736 1.37574C0.0632141 1.48826 0 1.64087 0 1.8L0 13.8C0 13.9591 0.0632141 14.1117 0.175736 14.2243C0.288258 14.3368 0.44087 14.4 0.6 14.4H14.4C14.5591 14.4 14.7117 14.3368 14.8243 14.2243C14.9368 14.1117 15 13.9591 15 13.8V1.8C15 1.64087 14.9368 1.48826 14.8243 1.37574C14.7117 1.26321 14.5591 1.2 14.4 1.2ZM14.4 13.8H0.6V4.8H14.4V13.8ZM14.4 4.2H0.6V1.8H14.4V4.2Z" fill="#E7503D" stroke="#E7503D" stroke-width="0.5"/>
+</svg>

package/src/library/assets/svg/index.ts

@@ -0,0 +1,38 @@
+import UnCheckbox from '../../../library/assets/svg/unCheckbox.svg';
+import CheckedBox from '../../../library/assets/svg/checkedBox.svg';
+import DatePickerSvg from '../../../library/assets/svg/datePicker.svg';
+import CheckedRadio from '../../../library/assets/svg/checkedRadio.svg';
+import UncheckRadio from '../../../library/assets/svg/uncheckRadio.svg';
+import TimerSVG from '../../../library/assets/svg/timer.svg';
+import UpArrow from '../../../library/assets/svg/UpArrow.svg';
+import DownArrow from '../../../library/assets/svg/DownArrow.svg';
+
+export {
+  UnCheckbox,
+  CheckedBox,
+  DatePickerSvg,
+  CheckedRadio,
+  UncheckRadio,
+  TimerSVG,
+  UpArrow,
+  DownArrow,
+};
+
+// import {ReactComponent as UnCheckbox} from '../../../library/assets/svg/unCheckbox.svg';
+// import {ReactComponent as CheckedBox} from '../../../library/assets/svg/checkedBox.svg';
+// import {ReactComponent as DatePickerSvg} from '../../../library/assets/svg/datePicker.svg';
+// import {ReactComponent as CheckedRadio} from '../../../library/assets/svg/checkedRadio.svg';
+// import {ReactComponent as UncheckRadio} from '../../../library/assets/svg/uncheckRadio.svg';
+// import {ReactComponent as TimerSVG} from '../../../library/assets/svg/timer.svg';
+// import {ReactComponent as UpArrow} from '../../../library/assets/svg/UpArrow.svg';
+// import {ReactComponent as DownArrow} from '../../../library/assets/svg/DownArrow.svg';
+// export {
+//   UnCheckbox,
+//   CheckedBox,
+//   DatePickerSvg,
+//   CheckedRadio,
+//   UncheckRadio,
+//   TimerSVG,
+//   UpArrow,
+//   DownArrow,
+// };

package/src/library/assets/svg/timer copy.svg

@@ -0,0 +1,3 @@
+<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.0001 8.50005C16.0001 9.73343 15.6959 10.9478 15.1145 12.0355C14.533 13.1233 13.6923 14.0508 12.6668 14.736C11.6413 15.4213 10.4626 15.843 9.23515 15.9639C8.0077 16.0848 6.76939 15.9011 5.62989 15.4291C4.49039 14.9571 3.48489 14.2114 2.70244 13.2579C1.91999 12.3045 1.38474 11.1728 1.14412 9.96316C0.903492 8.75348 0.964912 7.50312 1.32294 6.32285C1.68096 5.14257 2.32454 4.06881 3.19667 3.19667C3.25817 3.13727 3.34054 3.1044 3.42604 3.10514C3.51154 3.10588 3.59332 3.14018 3.65378 3.20064C3.71424 3.2611 3.74854 3.34289 3.74928 3.42838C3.75002 3.51388 3.71716 3.59625 3.65776 3.65776C2.54364 4.76703 1.84472 6.22559 1.67816 7.78893C1.51161 9.35226 1.88754 10.9253 2.74293 12.2444C3.59833 13.5635 4.8812 14.5485 6.37648 15.0342C7.87176 15.5199 9.48855 15.4768 10.9558 14.9121C12.4231 14.3474 13.6517 13.2955 14.4356 11.9327C15.2195 10.5699 15.511 8.97903 15.2614 7.42679C15.0118 5.87456 14.2362 4.45531 13.0645 3.40697C11.8929 2.35863 10.3965 1.74493 8.82614 1.66874V4.58698C8.82614 4.67346 8.79178 4.75641 8.73063 4.81756C8.66947 4.87871 8.58653 4.91307 8.50005 4.91307C8.41356 4.91307 8.33062 4.87871 8.26947 4.81756C8.20831 4.75641 8.17396 4.67346 8.17396 4.58698V1.32609C8.17396 1.23961 8.20831 1.15666 8.26947 1.09551C8.33062 1.03436 8.41356 1 8.50005 1C10.4885 1.00226 12.3948 1.79317 13.8009 3.19921C15.2069 4.60525 15.9978 6.5116 16.0001 8.50005ZM8.26944 8.80977C8.29966 8.84027 8.33562 8.8645 8.37524 8.88107C8.41485 8.89764 8.45735 8.90622 8.5003 8.90632C8.54324 8.90642 8.58578 8.89804 8.62547 8.88165C8.66517 8.86527 8.70123 8.8412 8.7316 8.81084C8.76197 8.78048 8.78605 8.74442 8.80244 8.70473C8.81884 8.66504 8.82723 8.62251 8.82714 8.57956C8.82706 8.53662 8.81849 8.49412 8.80193 8.4545C8.78537 8.41487 8.76115 8.37891 8.73066 8.34868L5.39059 5.00861C5.32919 4.94873 5.24666 4.91546 5.16089 4.916C5.07513 4.91653 4.99303 4.95084 4.93237 5.01148C4.87172 5.07213 4.8374 5.15422 4.83685 5.23999C4.8363 5.32576 4.86957 5.40829 4.92944 5.4697L8.26944 8.80977ZM1.65218 2.30436C1.78117 2.30436 1.90726 2.26611 2.01451 2.19444C2.12176 2.12278 2.20535 2.02093 2.25471 1.90176C2.30407 1.78259 2.31699 1.65145 2.29182 1.52494C2.26666 1.39843 2.20455 1.28223 2.11334 1.19102C2.02213 1.09981 1.90592 1.0377 1.77941 1.01253C1.6529 0.987367 1.52177 1.00028 1.4026 1.04964C1.28343 1.09901 1.18157 1.1826 1.10991 1.28985C1.03825 1.3971 1 1.52319 1 1.65218C1 1.82515 1.06871 1.99103 1.19102 2.11334C1.31333 2.23564 1.47921 2.30436 1.65218 2.30436Z" fill="#212721" stroke="#E7503D"/>
+</svg>

package/src/library/assets/svg/timer.svg

@@ -0,0 +1,3 @@
+<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.0001 8.50005C16.0001 9.73343 15.6959 10.9478 15.1145 12.0355C14.533 13.1233 13.6923 14.0508 12.6668 14.736C11.6413 15.4213 10.4626 15.843 9.23515 15.9639C8.0077 16.0848 6.76939 15.9011 5.62989 15.4291C4.49039 14.9571 3.48489 14.2114 2.70244 13.2579C1.91999 12.3045 1.38474 11.1728 1.14412 9.96316C0.903492 8.75348 0.964912 7.50312 1.32294 6.32285C1.68096 5.14257 2.32454 4.06881 3.19667 3.19667C3.25817 3.13727 3.34054 3.1044 3.42604 3.10514C3.51154 3.10588 3.59332 3.14018 3.65378 3.20064C3.71424 3.2611 3.74854 3.34289 3.74928 3.42838C3.75002 3.51388 3.71716 3.59625 3.65776 3.65776C2.54364 4.76703 1.84472 6.22559 1.67816 7.78893C1.51161 9.35226 1.88754 10.9253 2.74293 12.2444C3.59833 13.5635 4.8812 14.5485 6.37648 15.0342C7.87176 15.5199 9.48855 15.4768 10.9558 14.9121C12.4231 14.3474 13.6517 13.2955 14.4356 11.9327C15.2195 10.5699 15.511 8.97903 15.2614 7.42679C15.0118 5.87456 14.2362 4.45531 13.0645 3.40697C11.8929 2.35863 10.3965 1.74493 8.82614 1.66874V4.58698C8.82614 4.67346 8.79178 4.75641 8.73063 4.81756C8.66947 4.87871 8.58653 4.91307 8.50005 4.91307C8.41356 4.91307 8.33062 4.87871 8.26947 4.81756C8.20831 4.75641 8.17396 4.67346 8.17396 4.58698V1.32609C8.17396 1.23961 8.20831 1.15666 8.26947 1.09551C8.33062 1.03436 8.41356 1 8.50005 1C10.4885 1.00226 12.3948 1.79317 13.8009 3.19921C15.2069 4.60525 15.9978 6.5116 16.0001 8.50005ZM8.26944 8.80977C8.29966 8.84027 8.33562 8.8645 8.37524 8.88107C8.41485 8.89764 8.45735 8.90622 8.5003 8.90632C8.54324 8.90642 8.58578 8.89804 8.62547 8.88165C8.66517 8.86527 8.70123 8.8412 8.7316 8.81084C8.76197 8.78048 8.78605 8.74442 8.80244 8.70473C8.81884 8.66504 8.82723 8.62251 8.82714 8.57956C8.82706 8.53662 8.81849 8.49412 8.80193 8.4545C8.78537 8.41487 8.76115 8.37891 8.73066 8.34868L5.39059 5.00861C5.32919 4.94873 5.24666 4.91546 5.16089 4.916C5.07513 4.91653 4.99303 4.95084 4.93237 5.01148C4.87172 5.07213 4.8374 5.15422 4.83685 5.23999C4.8363 5.32576 4.86957 5.40829 4.92944 5.4697L8.26944 8.80977ZM1.65218 2.30436C1.78117 2.30436 1.90726 2.26611 2.01451 2.19444C2.12176 2.12278 2.20535 2.02093 2.25471 1.90176C2.30407 1.78259 2.31699 1.65145 2.29182 1.52494C2.26666 1.39843 2.20455 1.28223 2.11334 1.19102C2.02213 1.09981 1.90592 1.0377 1.77941 1.01253C1.6529 0.987367 1.52177 1.00028 1.4026 1.04964C1.28343 1.09901 1.18157 1.1826 1.10991 1.28985C1.03825 1.3971 1 1.52319 1 1.65218C1 1.82515 1.06871 1.99103 1.19102 2.11334C1.31333 2.23564 1.47921 2.30436 1.65218 2.30436Z" fill="#212721" stroke="#E7503D"/>
+</svg>

package/src/library/assets/svg/unCheckbox.svg

@@ -0,0 +1,3 @@
+<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.5" y="0.5" width="14" height="14" rx="1.5" fill="white" stroke="#E7503D"/>
+</svg>

package/src/library/assets/svg/uncheckRadio.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="10" cy="10" r="9.5" stroke="#212721"/>
+</svg>

package/src/logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>

package/src/react-app-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="react-scripts" />

package/src/reportWebVitals.ts

@@ -0,0 +1,16 @@
+// import {ReportHandler} from 'web-vitals';
+
+// const reportWebVitals = (onPerfEntry?: ReportHandler) => {
+//   if (onPerfEntry && onPerfEntry instanceof Function) {
+//     import('web-vitals').then(({getCLS, getFID, getFCP, getLCP, getTTFB}) => {
+//       getCLS(onPerfEntry);
+//       getFID(onPerfEntry);
+//       getFCP(onPerfEntry);
+//       getLCP(onPerfEntry);
+//       getTTFB(onPerfEntry);
+//     });
+//   }
+// };
+
+// export default reportWebVitals;
+export {};

package/src/setupTests.ts

@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom';