react-restyle-components 0.1.85 → 0.1.86

package/lib/cjs/index.d.ts

@@ -0,0 +1,2 @@
+import './tc.css';
+export * from './src/core-components';

package/lib/cjs/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+require("./tc.css");
+__exportStar(require("./src/core-components"), exports);

package/lib/cjs/src/App.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import './App.css';
+declare function App(): React.JSX.Element;
+export default App;

package/lib/cjs/src/App.js

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+require("./App.css");
+const core_components_1 = require("./core-components");
+function App() {
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement("div", null,
+            react_1.default.createElement("p", null, "New testing"),
+            react_1.default.createElement(core_components_1.Autocomplete, { value: "", onValueChange: () => { }, options: ['One', 'Two'] }))));
+}
+exports.default = App;

package/lib/cjs/src/core-components/atoms/buttons/button.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Button } from './buttons.component';
+declare const meta: Meta<typeof Button>;
+export default meta;
+type Story = StoryObj<typeof Button>;
+export declare const Primary: Story;

package/lib/cjs/src/core-components/atoms/buttons/button.stories.js

@@ -0,0 +1,42 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Primary = void 0;
+const react_1 = __importDefault(require("react"));
+const buttons_component_1 = require("./buttons.component");
+// import {Title, Component, Source, Canvas, ArgTypes} from '@storybook/blocks';
+const test_1 = require("@storybook/test");
+const meta = {
+    title: 'Design System/Atoms/Button',
+    component: buttons_component_1.Button,
+    tags: ['autodocs'],
+    args: {
+        className: 'w-40',
+    },
+    parameters: {
+        componentSubtitle: `import { Button } from 'react-restyle-components'`,
+    },
+};
+exports.default = meta;
+exports.Primary = {
+    // parameters: {
+    //   backgrounds: {
+    //     default: 'dark',
+    //   },
+    // },
+    args: {
+        disable: false,
+        type: 'solid' || 'outline',
+        children: react_1.default.createElement("span", null, "Primary"),
+        onClick: (0, test_1.fn)(),
+    },
+};
+// export const Disable: Story = {
+//   args: {
+//     ...Primary.args,
+//     children: <span>Disable</span>,
+//     disable: true,
+//   },
+// };

package/lib/cjs/src/core-components/atoms/buttons/buttons.component.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import '../../../tc.css';
+interface ButtonProps {
+    type?: 'solid' | 'outline';
+    className?: any;
+    disable?: boolean;
+    onClick: () => void;
+    children: React.ReactNode;
+}
+export declare const Button: ({ type, className, disable, onClick, children, }: ButtonProps) => React.JSX.Element;
+export {};

package/lib/cjs/src/core-components/atoms/buttons/buttons.component.js

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Button = void 0;
+const react_1 = __importDefault(require("react"));
+require("../../../tc.css");
+const Button = ({ type = 'solid', className = 'w-40', disable = false, onClick, children, }) => {
+    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 (react_1.default.createElement("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));
+};
+exports.Button = Button;

package/lib/cjs/src/core-components/atoms/buttons/buttons.test.js

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+/* eslint-disable testing-library/render-result-naming-convention */
+const react_1 = __importDefault(require("react"));
+const _core_utils_1 = require("@core-utils");
+const buttons_component_1 = require("./buttons.component");
+it('render Button correctly', () => {
+    const button = (0, _core_utils_1.render)(react_1.default.createElement(buttons_component_1.Button, { className: "bg-gray-light w-40", onClick: () => jest.fn() }, "Permanent Address"));
+    expect(button).toMatchSnapshot();
+});

package/lib/cjs/src/core-components/atoms/check-box/checkBox.component.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import '../../../tc.css';
+interface CheckBoxProps {
+    title: string;
+    data: Array<any>;
+    className?: string;
+    disable?: boolean;
+    onChange: (items: any) => void;
+}
+export declare const CheckBox: ({ title, data, className, onChange, }: CheckBoxProps) => React.JSX.Element;
+export {};

package/lib/cjs/src/core-components/atoms/check-box/checkBox.component.js

@@ -0,0 +1,47 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CheckBox = void 0;
+const react_1 = __importStar(require("react"));
+require("../../../tc.css");
+const svg_1 = require("../../../library/assets/svg");
+const form_component_1 = require("../form/form.component");
+const CheckBox = ({ title = 'Banks', data = [{ title: 'SBI Bank', checked: false }], className, onChange, }) => {
+    const [list, setList] = (0, react_1.useState)(data);
+    const width = 20;
+    return (react_1.default.createElement(form_component_1.InputWrapper, { label: title }, list?.map((item, index) => (react_1.default.createElement("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 },
+        react_1.default.createElement("div", { className: "flex mt-1" }, item.checked ? (react_1.default.createElement(svg_1.CheckedBox, { width: width, height: width, fill: "#E7503D", stroke: "E7503D" })) : (react_1.default.createElement(svg_1.UnCheckbox, { width: width, height: width }))),
+        react_1.default.createElement("span", null, item?.title))))));
+};
+exports.CheckBox = CheckBox;

package/lib/cjs/src/core-components/atoms/check-box/checkBox.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { CheckBox } from './checkBox.component';
+declare const meta: Meta<typeof CheckBox>;
+export default meta;
+type Story = StoryObj<typeof CheckBox>;
+export declare const Primary: Story;

package/lib/cjs/src/core-components/atoms/check-box/checkBox.stories.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Primary = void 0;
+const checkBox_component_1 = require("./checkBox.component");
+const meta = {
+    title: 'Design System/Atoms/CheckBox',
+    component: checkBox_component_1.CheckBox,
+    tags: ['autodocs'],
+    parameters: {
+        componentSubtitle: `import { CheckBox } from 'react-restyle-components'`,
+    },
+};
+exports.default = meta;
+exports.Primary = {
+    args: {
+        title: 'Banks',
+        data: [
+            { title: 'SBI Bank', checked: false },
+            { title: 'ICICI Bank', checked: false },
+        ],
+        disable: false,
+        onChange: (item) => {
+            console.log({ item });
+        },
+    },
+};

package/lib/cjs/src/core-components/atoms/check-box/checkBox.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/cjs/src/core-components/atoms/check-box/checkBox.test.js

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+/* eslint-disable testing-library/render-result-naming-convention */
+const react_1 = __importDefault(require("react"));
+const _core_utils_1 = require("@core-utils");
+const checkBox_component_1 = require("./checkBox.component");
+it('render CheckBox correctly', () => {
+    const checkbox = (0, _core_utils_1.render)(react_1.default.createElement(checkBox_component_1.CheckBox, { title: "Title", data: [], onChange: () => jest.fn() }));
+    expect(checkbox).toMatchSnapshot();
+});

package/lib/cjs/src/core-components/atoms/date-picker/date-picker.component.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import '../../../tc.css';
+import 'react-datepicker/dist/react-datepicker.css';
+interface DatePickerProps {
+    title: string;
+    value?: string;
+    className?: string;
+    disable?: boolean;
+    showFormat?: string;
+    placeholder?: string;
+}
+export declare const DatePickerComp: ({ title, className, disable, value, showFormat, placeholder, }: DatePickerProps) => React.JSX.Element;
+export {};

package/lib/cjs/src/core-components/atoms/date-picker/date-picker.component.js

@@ -0,0 +1,52 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DatePickerComp = void 0;
+const react_1 = __importStar(require("react"));
+require("../../../tc.css");
+const react_datepicker_1 = __importDefault(require("react-datepicker"));
+require("react-datepicker/dist/react-datepicker.css");
+const svg_1 = require("../../../library/assets/svg");
+const dayjs_1 = __importDefault(require("dayjs"));
+const form_component_1 = require("../form/form.component");
+const DatePickerComp = ({ title = 'Title', className, disable, value, showFormat = 'yyyy-MM-dd', placeholder = 'Select Date', }) => {
+    const [pickedDate, setPickedDate] = (0, react_1.useState)(value && (0, dayjs_1.default)(value).toDate());
+    const CustomInput = (0, react_1.forwardRef)((props, ref) => {
+        return (react_1.default.createElement("div", { onClick: !disable && props.onClick, ref: ref, className: " border-gray-light place-items-center  border rounded-md px-2 flex " },
+            react_1.default.createElement("label", { className: "mr-3 font-nunitoSansRegular text-primaryCharcoal text-lg" }, props.value || props.placeholder),
+            react_1.default.createElement(svg_1.DatePickerSvg, { width: 15, height: 15 })));
+    });
+    CustomInput.displayName = 'CustomInput';
+    const handleChanges = (date) => {
+        setPickedDate(date);
+    };
+    return (react_1.default.createElement(form_component_1.InputWrapper, { label: title },
+        react_1.default.createElement("div", { className: `${className} flex zIndex-999` },
+            react_1.default.createElement(react_datepicker_1.default, { selected: pickedDate || new Date(), dateFormat: showFormat, placeholder: placeholder, onChange: handleChanges, customInput: react_1.default.createElement(CustomInput, null) }))));
+};
+exports.DatePickerComp = DatePickerComp;

package/lib/cjs/src/core-components/atoms/date-picker/date-picker.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { DatePickerComp } from './date-picker.component';
+declare const meta: Meta<typeof DatePickerComp>;
+export default meta;
+type Story = StoryObj<typeof DatePickerComp>;
+export declare const Primary: Story;

package/lib/cjs/src/core-components/atoms/date-picker/date-picker.stories.js

@@ -0,0 +1,24 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Primary = void 0;
+const dayjs_1 = __importDefault(require("dayjs"));
+const date_picker_component_1 = require("./date-picker.component");
+const meta = {
+    title: 'Design System/Atoms/DatePicker',
+    component: date_picker_component_1.DatePickerComp,
+    tags: ['autodocs'],
+    parameters: {
+        componentSubtitle: `import { DatePickerComp } from 'react-restyle-components'`,
+    },
+};
+exports.default = meta;
+exports.Primary = {
+    args: {
+        title: 'Date',
+        value: (0, dayjs_1.default)().format('YYYY-MM-DD'),
+        showFormat: 'dd-MM-yyyy',
+    },
+};

package/lib/cjs/src/core-components/atoms/date-picker/date-picker.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/cjs/src/core-components/atoms/date-picker/date-picker.test.js

@@ -0,0 +1,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+/* eslint-disable testing-library/render-result-naming-convention */
+const react_1 = __importDefault(require("react"));
+const _core_utils_1 = require("@core-utils");
+const date_picker_component_1 = require("./date-picker.component");
+const dayjs_1 = __importDefault(require("dayjs"));
+it('render DatePicker correctly', () => {
+    const datepicker = (0, _core_utils_1.render)(react_1.default.createElement(date_picker_component_1.DatePickerComp, { title: "Date", className: "mt-6", value: (0, dayjs_1.default)().format('YYYY-MM-DD'), showFormat: 'dd-MM-yyyy' }));
+    expect(datepicker).toMatchSnapshot();
+});

package/lib/cjs/src/core-components/atoms/form/form.component.d.ts

@@ -0,0 +1,102 @@
+import React from 'react';
+import '../../../tc.css';
+import '../../../tc.css';
+interface LabelProps {
+    htmlFor: string;
+    hasError?: boolean;
+    style?: any;
+    children?: React.ReactNode;
+}
+export declare const Label: React.FunctionComponent<LabelProps>;
+interface InputWrapperProps {
+    id?: string;
+    label?: string;
+    className?: string;
+    hasError?: boolean;
+    style?: any;
+    ref?: any;
+    children?: React.ReactNode;
+}
+export declare const InputWrapper: React.FunctionComponent<InputWrapperProps>;
+interface InputProps extends InputWrapperProps {
+    value?: any;
+    defaultValue?: any;
+    name?: string;
+    placeholder?: string;
+    type?: string;
+    required?: boolean;
+    disabled?: boolean;
+    className?: string;
+    labelClassName?: string;
+    rows?: number;
+    style?: any;
+    wrapperStyle?: any;
+    hasError?: boolean;
+    pattern?: any;
+    maxLength?: number;
+    isAutoFocus?: boolean;
+    input2isBlurEnable?: boolean;
+    onChange?: (e: any) => void;
+    onBlur?: (e: any) => void;
+    onKeyDown?: (e: any) => void;
+    onKeyUp?: (e: any) => void;
+    inputRef?: any;
+}
+export declare const Input: React.ForwardRefExoticComponent<Omit<InputProps, "ref"> & React.RefAttributes<any>>;
+export declare const InputPassword: React.ForwardRefExoticComponent<Omit<InputProps, "ref"> & React.RefAttributes<any>>;
+export declare const Input1: React.ForwardRefExoticComponent<Omit<InputProps, "ref"> & React.RefAttributes<any>>;
+export declare const Input2: React.ForwardRefExoticComponent<Omit<InputProps, "ref"> & React.RefAttributes<any>>;
+export declare const MultilineInput: (props: InputProps) => React.JSX.Element;
+export declare const MultilineInput1: (props: InputProps) => React.JSX.Element;
+interface InputRadioProps extends InputWrapperProps {
+    values?: any[];
+    value?: string;
+    name?: string;
+    required?: boolean;
+    disabled?: boolean;
+    labelStyle?: any;
+    onChange?: (e: any) => void;
+}
+export declare const InputRadio: (props: InputRadioProps) => React.JSX.Element;
+interface InputDateProps extends InputWrapperProps {
+    value?: any;
+    name?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    hasError?: boolean;
+    format?: string;
+    use12Hours?: boolean;
+    isCalenderOpen?: boolean;
+    minDate?: Date;
+    maxDate?: Date;
+    onChange?: (e: any) => void;
+    onCalendarToggle?: (status: boolean) => void;
+    onFocusRemove?: (date: any) => void;
+}
+export declare const InputDate: ({ name, value, placeholder, use12Hours, label, id, hasError, disabled, format, onChange, onFocusRemove, }: InputDateProps) => React.JSX.Element;
+export declare const CheckBox: (props: any) => React.JSX.Element;
+interface InputFileProps extends InputWrapperProps {
+    value?: any;
+    name?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    accept?: string;
+    multiple?: boolean;
+    hasError?: boolean;
+    onChange?: (e: any) => void;
+}
+export declare const InputFile: (props: InputFileProps) => React.JSX.Element;
+interface ToggleProps extends InputWrapperProps {
+    disabled?: boolean;
+    isToggleLabel?: boolean;
+    defaultChecked?: boolean;
+    className?: string;
+    icons?: any;
+    value?: boolean;
+    name?: string;
+    onChange?: (e: boolean) => void;
+    style?: any;
+}
+export declare const Toggle: (props: ToggleProps) => React.JSX.Element;
+export declare const DeliveryScheduleToggle: (props: ToggleProps) => React.JSX.Element;
+export {};