react-restyle-components 0.1.59 → 0.1.60

package/src/core-components/atoms/input/input.styles.css

@@ -0,0 +1,35 @@
+.-z-1 {
+  z-index: -1;
+}
+
+.origin-0 {
+  transform-origin: 0%;
+}
+
+input:focus ~ label,
+input:not(:placeholder-shown) ~ label,
+textarea:focus ~ label,
+textarea:not(:placeholder-shown) ~ label,
+select:focus ~ label,
+select:not([value=""]):valid ~ label {
+  /* @apply transform; scale-75; -translate-y-6; */
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y))
+    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
+    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+  --tw-scale-x: 0.75;
+  --tw-scale-y: 0.75;
+  --tw-translate-y: -1.5rem;
+}
+
+input:focus ~ label,
+select:focus ~ label {
+  /* @apply text-black; left-0; */
+  --tw-text-opacity: 1;
+  color: "#696969";
+  left: 0px;
+}

package/src/core-components/atoms/input/input.test.tsx

@@ -0,0 +1,32 @@
+/* eslint-disable testing-library/render-result-naming-convention */
+import React from 'react';
+import {render} from '@core-utils';
+import {Input} from './input.component';
+
+it('render Input correctly without error', () => {
+  const input = render(
+    <Input
+      className="h-1 relative top-1 border-red-600 border-b-0 dummy"
+      title={'input'}
+      hasError={false}
+      defaultValue={''}
+      inputStyle=" border-b-0 invisible "
+      onChange={() => jest.fn()}
+    />
+  );
+  expect(input).toMatchSnapshot();
+});
+
+it('render Input correctly with error', () => {
+  const input = render(
+    <Input
+      className="h-1 relative top-1 border-red-600 border-b-0 dummy"
+      title={'input'}
+      hasError={true}
+      defaultValue={''}
+      inputStyle=" border-b-0 invisible "
+      onChange={() => jest.fn()}
+    />
+  );
+  expect(input).toMatchSnapshot();
+});

package/src/core-components/atoms/input-dropdown/input-dropdown.component.tsx

@@ -0,0 +1,91 @@
+import React, {useState, useEffect, useRef} from 'react';
+import {UpArrow, DownArrow} from '../../../library/assets/svg';
+interface InputDropdownProps {
+  title: string;
+  items: Array<string>;
+  hasError?: boolean;
+  className?: string;
+  onChange?: (item: string) => void;
+}
+
+export const InputDropdown = ({
+  items,
+  className,
+  hasError,
+  title,
+  onChange,
+}: InputDropdownProps) => {
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+  const [value, setValue] = useState<string>('');
+
+  const useOutsideAlerter = (ref) => {
+    useEffect(() => {
+      function handleClickOutside(event) {
+        if (
+          ref.current &&
+          !ref.current.contains(event.target) &&
+          isOpen &&
+          isOpen
+        )
+          setIsOpen(!isOpen);
+      }
+      document.addEventListener('mousedown', handleClickOutside);
+      return () => {
+        document.removeEventListener('mousedown', handleClickOutside);
+      };
+    }, [ref]);
+  };
+
+  const wrapperRef = useRef(null);
+  useOutsideAlerter(wrapperRef);
+  return (
+    <div className={`${className} relative`}>
+      <div className="flex flex-row items-center ">
+        <input
+          type="text"
+          name="name"
+          placeholder={title}
+          value={value}
+          className=" pt-3 pb-2  w-full px-0 mt-0 bg-transparent border-gray-secondary border-0 border-b appearance-none focus:outline-none focus:ring-0 font-nunitoSansRegular text-md"
+          onClick={() => {
+            setIsOpen(!isOpen);
+          }}
+          onChange={(event) => onChange && onChange(event.target.value)}
+        />
+        {!isOpen && (
+          <img src={UpArrow as any} className="absolute h-4 w-4 right-0" />
+        )}
+        {isOpen && (
+          <img src={DownArrow as any} className="absolute h-4 w-4 right-0" />
+        )}
+      </div>
+      {isOpen && (
+        <div
+          className="z-10  w-full absolute text-base list-none bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-700"
+          ref={wrapperRef}
+        >
+          <ul className="py-1">
+            {items.map((item, index) => (
+              <li
+                key={index}
+                className="block py-2 px-4 text-md  hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200   font-nunitoSansRegular"
+                onClick={() => {
+                  setValue(item);
+                  setIsOpen(!isOpen);
+                }}
+              >
+                {item}
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+
+      {hasError && (
+        <span className="text-primaryCharcoal text-4xs" id="error">
+          {`${title} is required`}
+        </span>
+      )}
+    </div>
+  );
+};

package/src/core-components/atoms/input-dropdown/input-dropdown.stories.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import type {Meta, StoryObj} from '@storybook/react';
+import {InputDropdown} from './input-dropdown.component';
+
+const meta: Meta<typeof InputDropdown> = {
+  title: 'Design System/Atoms/InputDropdown',
+  component: InputDropdown,
+  tags: ['autodocs'],
+  parameters: {
+    componentSubtitle: `import { InputDropdown } from 'react-restyle-components'`,
+  },
+};
+export default meta;
+type Story = StoryObj<typeof InputDropdown>;
+
+export const Primary: Story = {
+  args: {
+    title: 'Source of funds',
+    items: ['Bank account', 'UPI', 'Credit Card'],
+    hasError: true,
+  },
+};

package/src/core-components/atoms/input-dropdown/input-dropdown.test.tsx

@@ -0,0 +1,16 @@
+/* eslint-disable testing-library/render-result-naming-convention */
+import React from 'react';
+import {render} from '@core-utils';
+import {InputDropdown} from './input-dropdown.component';
+
+it('render InputDropdown correctly', () => {
+  const inputDropDown = render(
+    <InputDropdown
+      title="Source of funds"
+      items={['Bank account', 'UPI', 'Credit Card']}
+      hasError={true}
+      onChange={() => jest.fn()}
+    />
+  );
+  expect(inputDropDown).toMatchSnapshot();
+});

package/src/core-components/atoms/loader/loader.component.tsx

@@ -0,0 +1,78 @@
+import React from 'react';
+import {Container, Row, Spinner} from 'reactstrap';
+
+export const Loader = () => (
+  <Container fluid className="vh-50 d-flex">
+    <Row className="justify-content-center align-self-center w-100 text-center">
+      <Spinner color="primary" />
+    </Row>
+  </Container>
+);
+
+export const ModalLoader = () => {
+  return (
+    <>
+      <>
+        <div className="justify-center items-center flex overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none focus:outline-none">
+          <div className="relative  mx-auto ">
+            {/*content*/}
+            <div className="border-0 rounded-lg shadow-lg relative flex flex-col w-full bg-white outline-none focus:outline-none">
+              {/*body*/}
+              <div className="relative p-2 flex-auto flex flex-col items-center">
+                <style>
+                  {`
+    .spinner .background {
+      fill: #555;
+    }
+    .spinner .line {
+      animation: PacMan 5s infinite;
+      fill: none;
+      stroke: #d26188;
+      stroke-width: 25;
+    }
+    .spinner .spinner {
+      animation: Spin 2s infinite linear;
+    }
+    @keyframes PacMan {
+      0% {
+        stroke-dasharray: 79px 79;
+      }
+      50% {
+        stroke-dasharray: 1px 79;
+      }
+      100% {
+        stroke-dasharray: 79px 79;
+      }
+    }
+    @keyframes Spin {
+      0% {
+        transform: rotate(0deg);
+      }
+      100% {
+        transform: rotate(360deg);
+      }
+    }
+    `}
+                </style>
+                <svg
+                  className="spinner"
+                  width="100"
+                  height="100"
+                  viewBox="0 0 100 100"
+                >
+                  <circle className="background" cx="0" cy="0"></circle>
+                  <path
+                    className="line"
+                    d="M 37.5,50 C 37.5,43.096441 43.096441,37.5 50,37.5 C 56.903559,37.5 62.5,43.096441 62.5,50 C 62.5,56.903559 56.903559,62.5 50,62.5 C 43.096441,62.5 37.5,56.903559 37.5,50"
+                  ></path>
+                </svg>{' '}
+                <span style={{marginTop: -15}}>loading ...</span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="opacity-25 fixed inset-0 z-40 bg-black"></div>
+      </>
+    </>
+  );
+};

package/src/core-components/atoms/loader/loader.stories.tsx

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

package/src/core-components/atoms/loader/loader.test.tsx

@@ -0,0 +1,9 @@
+/* eslint-disable testing-library/render-result-naming-convention */
+import React from 'react';
+import {render} from '@core-utils';
+import {Loader} from './loader.component';
+
+it('render Loader correctly', () => {
+  const loader = render(<Loader />);
+  expect(loader).toMatchSnapshot();
+});

package/src/core-components/atoms/radio/radio.component.tsx

@@ -0,0 +1,48 @@
+import React, {useState} from 'react';
+import {CheckedRadio, UncheckRadio} from '../../../library/assets/svg';
+import {InputWrapper} from '../form/form.component';
+interface RadioProps {
+  title: string;
+  data: Array<any>;
+  className?: string;
+  onChange: (item) => void;
+}
+
+export const Radio = ({
+  title = 'Source',
+  data = [],
+  className,
+  onChange,
+}: RadioProps) => {
+  const [list, setList] = useState<any>(data);
+  const width = 20;
+  return (
+    <>
+      <InputWrapper label={title}>
+        {list?.map((item, index) => (
+          <div
+            className={`${className} flex items-center mb-1`}
+            onClick={() => {
+              const result = list?.map((e, i) => {
+                if (i == index) return {...e, checked: true};
+                else return {...e, checked: false};
+              });
+              setList(result);
+              onChange(result?.find((item) => item.checked));
+            }}
+            key={index}
+          >
+            <div className="flex flex-row gap-1 items-center">
+              {item.checked ? (
+                <CheckedRadio width={width} height={width} />
+              ) : (
+                <UncheckRadio width={width} height={width} />
+              )}
+              <span className="text-4xs">{item?.title}</span>
+            </div>
+          </div>
+        ))}
+      </InputWrapper>
+    </>
+  );
+};

package/src/core-components/atoms/radio/radio.stories.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import type {Meta, StoryObj} from '@storybook/react';
+import {Radio} from './radio.component';
+
+const meta: Meta<typeof Radio> = {
+  title: 'Design System/Atoms/Radio',
+  component: Radio,
+  tags: ['autodocs'],
+  parameters: {
+    componentSubtitle: `import { Radio } from 'react-restyle-components'`,
+  },
+};
+export default meta;
+type Story = StoryObj<typeof Radio>;
+
+export const Primary: Story = {
+  args: {
+    title: 'Source',
+    data: [
+      {title: 'Salary', checked: false},
+      {title: 'Business', checked: false},
+    ],
+    onChange: (item) => {
+      console.log({item});
+    },
+  },
+};

package/src/core-components/atoms/radio/radio.test.tsx

@@ -0,0 +1,11 @@
+/* eslint-disable testing-library/render-result-naming-convention */
+import React from 'react';
+import {render} from '@core-utils';
+import {Radio} from './radio.component';
+
+it('render Radio correctly', () => {
+  const radio = render(
+    <Radio title="Title" data={[]} onChange={() => jest.fn()} />
+  );
+  expect(radio).toMatchSnapshot();
+});

package/src/core-components/atoms/stepper/stepper.component.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+
+interface StepperProps {
+  className?: string;
+  steps: Array<string>;
+  currentStep: number;
+  onStepClick: (currentStep, index) => void;
+}
+
+export const Stepper = ({
+  className = '',
+  steps,
+  currentStep = 1,
+  onStepClick,
+}: StepperProps) => {
+  const finalClass = `${className} w-full px-4 sm:px-8`;
+  const progressClass =
+    'absolute my-4 top-1/2 left-0 h-0.5  transform -translate-y-1/2 bg-orange transition-width ease-in-out duration-500';
+  const Steps = steps?.map((step, index) => {
+    let stepClass =
+      'inline-block transform -translate-x-1/2 pt-1 w-8 h-8 rounded-full text-center';
+    if (index < currentStep)
+      stepClass +=
+        ' font-medium border border-orange  bg-background-secondary text-gray';
+    else if (index > currentStep)
+      stepClass +=
+        ' font-medium border border-gray-dark-secondary text-gray bg-background-secondary';
+    else if (currentStep === index)
+      stepClass += ' font-medium bg-orange text-white';
+    if (typeof onStepClick === 'function') stepClass += ' cursor-pointer';
+    return (
+      <div
+        key={step}
+        style={{left: `${(index / (steps.length - 1)) * 100}%`}}
+        className="absolute"
+      >
+        <span
+          className={`${stepClass} font-nunitoSansRegular  text-4xs text-center`}
+          onClick={() => {
+            if (typeof onStepClick === 'function') onStepClick(index + 1, step);
+          }}
+        >
+          {step}
+        </span>
+      </div>
+    );
+  });
+  return (
+    <div className={finalClass}>
+      <div className="w-full relative">
+        <div
+          className={progressClass}
+          style={{
+            width: `${(currentStep / (steps.length - 1)) * 100}%`,
+          }}
+        >
+          <div className="w-3 h-3 bg-orange rounded-full absolute right-0 top-1/2 transform translate-x-1/2 -translate-y-1/2" />
+        </div>
+        <div
+          className={
+            'absolute h-0.5 my-4 top-1/2 left-0 transform -translate-y-1/2 bg-gray-dark-secondary transition-width ease-in-out duration-500'
+          }
+          style={{
+            marginLeft: `${(currentStep / (steps.length - 1)) * 100}%`,
+            width: `${100 - (currentStep / (steps.length - 1)) * 100}%`,
+          }}
+        ></div>
+      </div>
+      <div className="relative sm:block">{Steps}</div>
+    </div>
+  );
+};

package/src/core-components/atoms/stepper/stepper.stories.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import type {Meta, StoryObj} from '@storybook/react';
+import {Stepper} from './stepper.component';
+
+const meta: Meta<typeof Stepper> = {
+  title: 'Design System/Atoms/Stepper',
+  component: Stepper,
+  tags: ['autodocs'],
+  parameters: {
+    componentSubtitle: `import { Stepper } from 'react-restyle-components'`,
+  },
+};
+export default meta;
+type Story = StoryObj<typeof Stepper>;
+
+export const Primary: Story = {
+  args: {
+    steps: ['1', '2', '3', '4'],
+    currentStep: 2,
+    onStepClick: (currentStep, step) => {},
+    className: 'mt-4',
+  },
+};

package/src/core-components/atoms/stepper/stepper.test.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import {render} from '@core-utils';
+import {Stepper} from './stepper.component';
+it('render Stepper correctly', () => {
+  const stepper = render(
+    <Stepper
+      steps={['1', '2', '3', '4']}
+      currentStep={3}
+      onStepClick={() => jest.fn()}
+      className="mt-4"
+    />
+  );
+  expect(stepper).toMatchSnapshot();
+});

package/src/core-components/atoms/tabs/tabs.component.tsx

@@ -0,0 +1,41 @@
+import React, {useState} from 'react';
+import {Icon} from '../..';
+
+interface TabsProps {
+  options: Array<{title: string; icon: string}>;
+  onSelect: (item: string) => void;
+}
+
+export const Tabs = ({options, onSelect}: TabsProps) => {
+  const [selected, setSelected] = useState(options[0].title);
+  return (
+    <div className="flex justify-center">
+      <ul className="flex flex-wrap items-center justify-center -mb-px text-sm font-medium text-center text-black cursor-pointer gap-2">
+        {options?.map((item, index) => (
+          <li key={index} className="bg-[#EF4444] rounded-md">
+            <div
+              className={`inline-flex items-center justify-center p-3 border-b-2 gap-1 ${
+                item.title == selected
+                  ? 'text-white font-bold md:text-md  border-primary active'
+                  : ' text-gray-200  md:text-md border-transparent'
+              }`}
+              onClick={() => {
+                setSelected(item.title);
+                onSelect(item.title);
+              }}
+            >
+              <Icon
+                nameIcon={item.icon}
+                propsIcon={{
+                  color: item.title == selected ? '#ffffff' : '#000000',
+                  size: 24,
+                }}
+              />
+              {item.title}
+            </div>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+};

package/src/core-components/atoms/tabs/tabs.stories.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import type {Meta, StoryObj} from '@storybook/react';
+import {Tabs} from './tabs.component';
+
+const meta: Meta<typeof Tabs> = {
+  title: 'Design System/Atoms/Tabs',
+  component: Tabs,
+  tags: ['autodocs'],
+  parameters: {
+    componentSubtitle: `import { Tabs } from 'react-restyle-components'`,
+  },
+};
+export default meta;
+type Story = StoryObj<typeof Tabs>;
+
+export const Primary: Story = {
+  args: {
+    options: [
+      {title: 'Work History', icon: 'FaHistory'},
+      {title: 'Book Order', icon: 'FaBook'},
+      {title: 'Make Frame', icon: 'MdFilterFrames'},
+    ],
+    onSelect: (item) => {
+      console.log({item});
+    },
+  },
+};

package/src/core-components/atoms/tabs/tabs.test.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import {render} from '@core-utils';
+import {Tabs} from './tabs.component';
+it('render Tabs correctly', () => {
+  const tabs = render(
+    <Tabs
+    options={[
+      {title: 'Work History', icon: 'FaHistory'},
+      {title: 'Book Order', icon: 'FaBook'},
+      {title: 'Make Frame', icon: 'MdFilterFrames'},
+    ]}
+    onSelect={(item) => {
+      console.log({item});
+      
+    }}
+    />
+  );
+  expect(tabs).toMatchSnapshot();
+});