react-restyle-components 0.1.58 → 0.1.60

package/lib/package.json

@@ -3,8 +3,8 @@
   "version": "0.1.56",
   "private": false,
   "description": "Easy use restyle components",
-  "main": "lib/cjs/index.js",
-  "module": "lib/esm/index.js",
+  "main": "lib/cjs/core-components/index.js",
+  "types": "lib/cjs/core-components/index.d.ts",
   "author": {
     "email": "onlyappasaheb4@gmail.com",
     "name": "Lakade Appasaheb",
@@ -59,9 +59,8 @@
     "web-vitals": "*"
   },
   "files": [
-    "*.md",
-    "lib",
-    "*.css"
+    "src/",
+    "lib/"
   ],
   "sideEffects": [
     "**/*.css"

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "react-restyle-components",
-  "version": "0.1.58",
+  "version": "0.1.60",
   "private": false,
   "description": "Easy use restyle components",
-  "main": "lib/cjs/index.js",
-  "module": "lib/esm/index.js",
+  "main": "lib/cjs/core-components/index.js",
+  "types": "lib/cjs/core-components/index.d.ts",
   "author": {
     "email": "onlyappasaheb4@gmail.com",
     "name": "Lakade Appasaheb",
@@ -59,9 +59,8 @@
     "web-vitals": "*"
   },
   "files": [
-    "*.md",
-    "lib",
-    "*.css"
+    "src/",
+    "lib/"
   ],
   "sideEffects": [
     "**/*.css"

package/src/App.css

@@ -0,0 +1,38 @@
+.App {
+  text-align: center;
+}
+
+.App-logo {
+  height: 40vmin;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .App-logo {
+    animation: App-logo-spin infinite 20s linear;
+  }
+}
+
+.App-header {
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
+.App-link {
+  color: #61dafb;
+}
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

package/src/App.test.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import App from './App';
+
+test('renders learn react link', () => {
+  render(<App />);
+  const linkElement = screen.getByText(/learn react/i);
+  expect(linkElement).toBeInTheDocument();
+});

package/src/App.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import logo from './logo.svg';
+import './App.css';
+
+function App() {
+  return (
+    <div className="App">
+      <header className="App-header">
+        <img src={logo as any} className="App-logo" alt="logo" />
+        <p>
+          Edit <code>src/App.tsx</code> and save to reload.
+        </p>
+        <a
+          className="App-link"
+          href="https://reactjs.org"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Learn React
+        </a>
+      </header>
+    </div>
+  );
+}
+
+export default App;

package/src/core-components/atoms/buttons/button.stories.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import type {Meta, StoryObj} from '@storybook/react';
+import {Button} from './buttons.component';
+// import {Title, Component, Source, Canvas, ArgTypes} from '@storybook/blocks';
+import {fn} from '@storybook/test';
+
+const meta: Meta<typeof Button> = {
+  title: 'Design System/Atoms/Button',
+  component: Button,
+  tags: ['autodocs'],
+  args: {
+    className: 'w-40',
+  },
+  parameters: {
+    componentSubtitle: `import { Button } from 'react-restyle-components'`,
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Button>;
+
+export const Primary: Story = {
+  // parameters: {
+  //   backgrounds: {
+  //     default: 'dark',
+  //   },
+  // },
+  args: {
+    disable: false,
+    type: 'solid' || 'outline',
+    children: <span>Primary</span>,
+    onClick: fn(),
+  },
+};
+
+// export const Disable: Story = {
+//   args: {
+//     ...Primary.args,
+//     children: <span>Disable</span>,
+//     disable: true,
+//   },
+// };

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

@@ -0,0 +1,33 @@
+import React from 'react';
+interface ButtonProps {
+  type?: 'solid' | 'outline';
+  className?: any;
+  disable?: boolean;
+  onClick: () => void;
+  children: React.ReactNode;
+}
+
+export const Button = ({
+  type = 'solid',
+  className = 'w-40',
+  disable = false,
+  onClick,
+  children,
+}: ButtonProps) => {
+  const buttonColorClass =
+    type === 'solid'
+      ? 'text-white bg-[#007BFF] hover:bg-[#007BFF] hover:shadow-lg text-white'
+      : 'dark:text-white  text-black border border-gray-400 hover:shadow-lg';
+  return (
+    <button
+      data-testid="buttonElement"
+      disabled={disable}
+      className={`${className} rounded-100px px-3 py-1  text-md ${buttonColorClass} pt-2 pb-2 font-nunitoSansRegular ${
+        disable ? 'opacity-50' : 'opacity-100'
+      }`}
+      onClick={() => onClick()}
+    >
+      {children}
+    </button>
+  );
+};

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

@@ -0,0 +1,13 @@
+/* eslint-disable testing-library/render-result-naming-convention */
+import React from 'react';
+import {render} from '@core-utils';
+import {Button} from './buttons.component';
+
+it('render Button correctly', () => {
+  const button = render(
+    <Button className="bg-gray-light w-40" onClick={() => jest.fn()}>
+      Permanent Address
+    </Button>
+  );
+  expect(button).toMatchSnapshot();
+});

package/src/core-components/atoms/check-box/checkBox.component.tsx

@@ -0,0 +1,54 @@
+import React, {useState} from 'react';
+import {UnCheckbox, CheckedBox} from '../../../library/assets/svg';
+import {InputWrapper} from '../form/form.component';
+interface CheckBoxProps {
+  title: string;
+  data: Array<any>;
+  className?: string;
+  disable?: boolean;
+  onChange: (items: any) => void;
+}
+
+export const CheckBox = ({
+  title = 'Banks',
+  data = [{title: 'SBI Bank', checked: false}],
+  className,
+  onChange,
+}: CheckBoxProps) => {
+  const [list, setList] = useState(data);
+  const width = 20;
+
+  return (
+    <InputWrapper label={title}>
+      {list?.map((item, index) => (
+        <div
+          className={`${className} flex flex-row  items-center `}
+          onClick={() => {
+            const result = list?.map((e, i) => {
+              if (i == index) return {...e, checked: !item.checked};
+              else return {...e};
+            });
+            setList(result);
+            onChange(result?.filter((item) => item.checked));
+          }}
+          key={index}
+        >
+          <div className="flex mt-1">
+            {item.checked ? (
+              <CheckedBox
+                width={width}
+                height={width}
+                fill="#E7503D"
+                stroke="E7503D"
+              />
+            ) : (
+              <UnCheckbox width={width} height={width} />
+            )}
+          </div>
+
+          <span>{item?.title}</span>
+        </div>
+      ))}
+    </InputWrapper>
+  );
+};

package/src/core-components/atoms/check-box/checkBox.stories.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import type {Meta, StoryObj} from '@storybook/react';
+import {CheckBox} from './checkBox.component';
+
+const meta: Meta<typeof CheckBox> = {
+  title: 'Design System/Atoms/CheckBox',
+  component: CheckBox,
+  tags: ['autodocs'],
+  parameters: {
+    componentSubtitle: `import { CheckBox } from 'react-restyle-components'`,
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof CheckBox>;
+
+export const Primary1: Story = {
+  args: {
+    title: 'Banks',
+    data: [
+      {title: 'SBI Bank', checked: false},
+      {title: 'ICICI Bank', checked: false},
+    ],
+    disable: false,
+    onChange: (item) => {
+      console.log({item});
+    },
+  },
+};

package/src/core-components/atoms/check-box/checkBox.test.tsx

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

package/src/core-components/atoms/date-picker/date-picker.component.tsx

@@ -0,0 +1,60 @@
+import React, {useState, forwardRef} from 'react';
+import DatePicker from 'react-datepicker';
+import 'react-datepicker/dist/react-datepicker.css';
+import {DatePickerSvg} from '../../../library/assets/svg';
+import dayjs from 'dayjs';
+import {InputWrapper} from '../form/form.component';
+
+interface DatePickerProps {
+  title: string;
+  value?: string;
+  className?: string;
+  disable?: boolean;
+  showFormat?: string;
+  placeholder?: string;
+}
+
+export const DatePickerComp = ({
+  title = 'Title',
+  className,
+  disable,
+  value,
+  showFormat = 'yyyy-MM-dd',
+  placeholder = 'Select Date',
+}: DatePickerProps) => {
+  const [pickedDate, setPickedDate] = useState(value && dayjs(value).toDate());
+
+  const CustomInput = forwardRef((props: any, ref: any) => {
+    return (
+      <div
+        onClick={!disable && props.onClick}
+        ref={ref}
+        className=" border-gray-light place-items-center  border rounded-md px-2 flex "
+      >
+        <label className="mr-3 font-nunitoSansRegular text-primaryCharcoal text-lg">
+          {props.value || props.placeholder}
+        </label>
+        <DatePickerSvg width={15} height={15} />
+      </div>
+    );
+  });
+  CustomInput.displayName = 'CustomInput';
+
+  const handleChanges = (date) => {
+    setPickedDate(date);
+  };
+
+  return (
+    <InputWrapper label={title}>
+      <div className={`${className} flex zIndex-999`}>
+        <DatePicker
+          selected={pickedDate || new Date()}
+          dateFormat={showFormat}
+          placeholder={placeholder}
+          onChange={handleChanges}
+          customInput={<CustomInput />}
+        />
+      </div>
+    </InputWrapper>
+  );
+};

package/src/core-components/atoms/date-picker/date-picker.stories.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import dayjs from 'dayjs';
+import type {Meta, StoryObj} from '@storybook/react';
+import {DatePickerComp} from './date-picker.component';
+
+const meta: Meta<typeof DatePickerComp> = {
+  title: 'Design System/Atoms/DatePicker',
+  component: DatePickerComp,
+  tags: ['autodocs'],
+  parameters: {
+    componentSubtitle: `import { DatePickerComp } from 'react-restyle-components'`,
+  },
+};
+export default meta;
+type Story = StoryObj<typeof DatePickerComp>;
+
+export const Primary: Story = {
+  args: {
+    title: 'Date',
+    value: dayjs().format('YYYY-MM-DD'),
+    showFormat: 'dd-MM-yyyy',
+  },
+};

package/src/core-components/atoms/date-picker/date-picker.test.tsx

@@ -0,0 +1,17 @@
+/* eslint-disable testing-library/render-result-naming-convention */
+import React from 'react';
+import {render} from '@core-utils';
+import {DatePickerComp} from './date-picker.component';
+import dayjs from 'dayjs';
+
+it('render DatePicker correctly', () => {
+  const datepicker = render(
+    <DatePickerComp
+      title="Date"
+      className="mt-6"
+      value={dayjs().format('YYYY-MM-DD')}
+      showFormat={'dd-MM-yyyy'}
+    />
+  );
+  expect(datepicker).toMatchSnapshot();
+});