react-restyle-components 0.1.60 → 0.1.62

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

@@ -1,35 +0,0 @@
-.-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

@@ -1,32 +0,0 @@
-/* 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

@@ -1,91 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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

@@ -1,16 +0,0 @@
-/* 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

@@ -1,78 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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

@@ -1,9 +0,0 @@
-/* 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

@@ -1,48 +0,0 @@
-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

@@ -1,27 +0,0 @@
-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

@@ -1,11 +0,0 @@
-/* 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

@@ -1,72 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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

@@ -1,41 +0,0 @@
-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

@@ -1,27 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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();
-});