react-restyle-components 0.2.40 → 0.2.42

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

@@ -1,45 +0,0 @@
-import { AutoCompleteFilterMultipleSelectMultipleFieldsDisplay } from './auto-complete-filter-multiple-select-multiple-fields-display.component';
-const meta = {
-    title: 'Design System/Molecules/AutoCompleteFilterMultipleSelectMultipleFieldsDisplay',
-    component: AutoCompleteFilterMultipleSelectMultipleFieldsDisplay,
-    tags: ['autodocs'],
-    parameters: {
-        componentSubtitle: `import { AutoCompleteFilterMultipleSelectMultipleFieldsDisplay } from 'react-restyle-components'`,
-    },
-};
-export default meta;
-export const Basic = {
-    args: {
-        data: {
-            list: [
-                {
-                    _id: '66532a99bbfed4eea86eae23',
-                    code: 82,
-                    description: 'TEST1',
-                    libraryCode: 'ABCD',
-                },
-                {
-                    _id: '6652b6d8bcef7f713cb547d4',
-                    code: 81,
-                    description: 'TEST New',
-                    libraryCode: 'TEST',
-                },
-            ],
-            selected: [
-                {
-                    _id: '66532a99bbfed4eea86eae23',
-                    code: 82,
-                    description: 'TEST1',
-                    libraryCode: 'ABCD',
-                },
-            ],
-            displayKey: ['libraryCode', 'description'],
-        },
-        onUpdate: (item) => {
-            console.log({ item });
-        },
-        onSelect: (item) => {
-            console.log({ item });
-        },
-    },
-};

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

@@ -1,6 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { AutoCompleteFilterSingleSelectMultiFieldsDisplay } from './auto-complete-filter-single-select-multiple-fields-display.component';
-declare const meta: Meta<typeof AutoCompleteFilterSingleSelectMultiFieldsDisplay>;
-export default meta;
-type Story = StoryObj<typeof AutoCompleteFilterSingleSelectMultiFieldsDisplay>;
-export declare const Basic: Story;

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

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

package/lib/src/core-components/molecules/auto-complete-group-by/auto-complete-group-by.component.test.d.ts

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

package/lib/src/core-components/molecules/auto-complete-group-by/auto-complete-group-by.component.test.js

@@ -1,9 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import { AutocompleteGroupBy } from './auto-complete-group-by.component';
-describe('AutocompleteGroupBy component', () => {
-    it('render autocompleteGroupBy correctly', () => {
-        const autocompleteGroupBy = render(React.createElement(AutocompleteGroupBy, { data: [] }));
-        expect(autocompleteGroupBy).toMatchSnapshot();
-    });
-});

package/lib/src/core-components/molecules/auto-complete-group-by/auto-complete-group-by.stories.d.ts

@@ -1,6 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { AutocompleteGroupBy } from './auto-complete-group-by.component';
-declare const meta: Meta<typeof AutocompleteGroupBy>;
-export default meta;
-type Story = StoryObj<typeof AutocompleteGroupBy>;
-export declare const Basic: Story;

package/lib/src/core-components/molecules/auto-complete-group-by/auto-complete-group-by.stories.js

@@ -1,35 +0,0 @@
-import { AutocompleteGroupBy } from './auto-complete-group-by.component';
-const meta = {
-    title: 'Design System/Molecules/AutocompleteGroupBy',
-    component: AutocompleteGroupBy,
-    tags: ['autodocs'],
-    parameters: {
-        componentSubtitle: `import { AutocompleteGroupBy } from 'react-restyle-components'`,
-    },
-};
-export default meta;
-export const Basic = {
-    args: {
-        data: [
-            {
-                title: 'Country',
-                code: 'C',
-                children: [
-                    { title: 'India', code: 'I' },
-                    { title: 'United States', code: 'US' },
-                ],
-            },
-            {
-                title: 'Social Media',
-                code: 'C',
-                children: [
-                    { title: 'Facebook', code: 'F' },
-                    { title: 'Instagram', code: 'I' },
-                ],
-            },
-        ],
-        hasError: true,
-        onChange: () => { },
-        onClose: () => { },
-    },
-};

package/lib/src/core-components/molecules/autocomplete/autocomplete.css

@@ -1,37 +0,0 @@
-.no-options {
-  position: relative;
-  padding: 0 10px 0px 10px;
-  /* background: white; */
-  background-color: #f3f6f4;
-  color: black;
-}
-
-.autocomplete-list {
-  list-style: none;
-  position: relative;
-  margin-top: 0;
-  padding: 0 10px 0px 10px;
-  min-height: auto;
-  max-height: 86vh;
-  overflow-y: auto;
-  /* background: white; */
-  background-color: #f3f6f4;
-  z-index: 1;
-}
-
-.autocomplete-list li {
-  /* padding: 4px; */
-  color: var(--input-autocomplete-item-text, #000);
-}
-
-.autocomplete-list li.active-option {
-  background-color: #f3f6f4;
-  background: var(--multiselect-item-hover);
-  cursor: pointer;
-  font-weight: bold;
-}
-.autocomplete-list li:hover {
-  background-color: #f3f6f4;
-  background: var(--multiselect-item-hover);
-  cursor: pointer;
-}

package/lib/src/core-components/molecules/autocomplete/autocomplete.spec.d.ts

@@ -1 +0,0 @@
-import '@testing-library/jest-dom';

package/lib/src/core-components/molecules/autocomplete/autocomplete.spec.js

@@ -1,79 +0,0 @@
-import React from 'react';
-import { fireEvent, render, screen } from '@testing-library/react';
-import '@testing-library/jest-dom';
-import { Autocomplete } from './autocomplete';
-const TEST_OPTIONS = ['ONE', 'TWO', 'THREE', 'FOUR', 'FIVE'];
-test('Render Autocomplete', () => {
-    render(React.createElement(Autocomplete, { value: "", onValueChange: () => { }, options: TEST_OPTIONS }));
-    expect(screen.getByRole('input')).toBeInTheDocument();
-    // expect(screen.getByRole('list')).toBeInTheDocument();
-});
-test('Autocomplete with empty list', () => {
-    render(React.createElement(Autocomplete, { value: "", onValueChange: () => { }, options: [] }));
-    expect(screen.getByRole('input')).toBeInTheDocument();
-    expect(screen.queryByRole('list')).not.toBeInTheDocument();
-});
-test('Autocomplete list arrow navigation', () => {
-    const onValueChange = jest.fn();
-    window.HTMLElement.prototype.scroll = function () { };
-    render(React.createElement(Autocomplete, { value: "", onValueChange: onValueChange, options: TEST_OPTIONS }));
-    expect(onValueChange).toHaveBeenCalledWith('ONE');
-    fireEvent.keyDown(screen.getByRole('input'), { keyCode: 40 }); //down
-    expect(onValueChange).toHaveBeenCalledWith('TWO');
-    // expect(screen.getByText('TWO')).toHaveClass('active-option');
-    // expect(screen.getByText('THREE')).toBeInTheDocument();
-    fireEvent.keyDown(screen.getByRole('input'), { keyCode: 40 }); //down
-    expect(onValueChange).toHaveBeenCalledWith('THREE');
-    // expect(screen.getByText('THREE')).toHaveClass('active-option');
-});
-// test('Autocomplete list option click', () => {
-//   const onValueChange = jest.fn();
-//   render(
-//     <Autocomplete
-//       value=""
-//       onValueChange={onValueChange}
-//       options={TEST_OPTIONS}
-//     />
-//   );
-//   fireEvent.click(screen.getByText('FOUR'));
-//   expect(screen.getByRole('input')).toHaveValue('FOUR');
-//   expect(onValueChange).toHaveBeenCalledWith('FOUR');
-//   expect(screen.queryByRole('list')).not.toBeInTheDocument();
-// });
-test('Autocomplete search', () => {
-    const onValueChange = jest.fn();
-    render(React.createElement(Autocomplete, { value: "", onValueChange: onValueChange, options: TEST_OPTIONS }));
-    fireEvent.change(screen.getByRole('input'), { target: { value: 'f' } });
-    for (let option of TEST_OPTIONS) {
-        if (option.toLowerCase().indexOf('f') > -1) {
-            expect(screen.getAllByRole('listitem')).toHaveLength(2);
-            expect(screen.queryByText(option)).toBeInTheDocument();
-        }
-        else {
-            expect(screen.queryByText(option)).not.toBeInTheDocument();
-        }
-    }
-});
-// test('Autocomplete search default value', () => {
-//   const onValueChange = jest.fn();
-//   render(
-//     <Autocomplete
-//       value="TWO"
-//       onValueChange={onValueChange}
-//       options={TEST_OPTIONS}
-//     />
-//   );
-//   expect(screen.getByText('TWO')).toHaveClass('active-option');
-// });
-test('Autocomplete search no result', () => {
-    const onValueChange = jest.fn();
-    render(React.createElement(Autocomplete, { value: "", onValueChange: onValueChange, options: TEST_OPTIONS }));
-    fireEvent.change(screen.getByRole('input'), { target: { value: 'hello' } });
-    expect(screen.queryByRole('list')).not.toBeInTheDocument();
-    // expect(screen.getByText('No match')).toBeInTheDocument();
-});
-test('Autocomplete with value not in list', () => {
-    render(React.createElement(Autocomplete, { value: "xxx", onValueChange: () => { }, options: TEST_OPTIONS }));
-    expect(screen.getByRole('input')).toBeInTheDocument();
-    // expect(screen.getByText('ONE')).toHaveClass('active-option');
-});

package/lib/src/core-components/molecules/autocomplete/autocomplete.stories.d.ts

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

package/lib/src/core-components/molecules/autocomplete/autocomplete.stories.js

@@ -1,17 +0,0 @@
-import { Autocomplete } from './autocomplete';
-const meta = {
-    title: 'Design System/Molecules/Autocomplete',
-    component: Autocomplete,
-    tags: ['autodocs'],
-    parameters: {
-        componentSubtitle: `import { Autocomplete } from 'react-restyle-components'`,
-    },
-};
-export default meta;
-export const Basic = {
-    args: {
-        value: '',
-        onValueChange: () => { },
-        options: ['One', 'Two', 'Three', 'Four'],
-    },
-};

package/lib/src/core-components/molecules/color-picker/color-picker.css

@@ -1,24 +0,0 @@
-.picker {
-  position: relative;
-  z-index: 999;
-}
-
-.swatch {
-  width: 28px;
-  height: 28px;
-  border-radius: 8px;
-  border: 3px solid #fff;
-  box-shadow:
-    0 0 0 1px rgba(0, 0, 0, 0.1),
-    inset 0 0 0 1px rgba(0, 0, 0, 0.1);
-  cursor: pointer;
-}
-
-.popover {
-  position: absolute;
-  top: calc(100% + 2px);
-  left: 0;
-  border-radius: 9px;
-  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
-  z-index: 999;
-}

package/lib/src/core-components/molecules/color-picker/color-picker.spec.d.ts

@@ -1 +0,0 @@
-import '@testing-library/jest-dom';

package/lib/src/core-components/molecules/color-picker/color-picker.spec.js

@@ -1,7 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import '@testing-library/jest-dom';
-import { ColorPicker } from './color-picker.component';
-test('Render Autocomplete', () => {
-    render(React.createElement(ColorPicker, { color: "#000000", onChange: () => { } }));
-});

package/lib/src/core-components/molecules/color-picker/color-picker.stories.d.ts

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

package/lib/src/core-components/molecules/color-picker/color-picker.stories.js

@@ -1,18 +0,0 @@
-import { ColorPicker } from './color-picker.component';
-const meta = {
-    title: 'Design System/Molecules/ColorPicker',
-    component: ColorPicker,
-    tags: ['autodocs'],
-    parameters: {
-        componentSubtitle: `import { ColorPicker } from 'react-restyle-components'`,
-    },
-};
-export default meta;
-export const Basic = {
-    args: {
-        color: '#000000',
-        onChange: (color) => {
-            console.log({ color });
-        },
-    },
-};

package/lib/src/core-components/molecules/color-picker-modal/color-picker-modal.css

@@ -1,24 +0,0 @@
-.picker-modal {
-  position: relative;
-  z-index: 999;
-}
-
-.swatch-modal {
-  width: 28px;
-  height: 28px;
-  border-radius: 8px;
-  border: 3px solid #fff;
-  box-shadow:
-    0 0 0 1px rgba(0, 0, 0, 0.1),
-    inset 0 0 0 1px rgba(0, 0, 0, 0.1);
-  cursor: pointer;
-}
-
-.popover-modal {
-  position: absolute;
-  top: calc(100% + 2px);
-  left: 0;
-  border-radius: 9px;
-  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
-  z-index: 999;
-}

package/lib/src/core-components/molecules/color-picker-modal/color-picker-modal.spec.d.ts

@@ -1 +0,0 @@
-import '@testing-library/jest-dom';

package/lib/src/core-components/molecules/color-picker-modal/color-picker-modal.spec.js

@@ -1,7 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import '@testing-library/jest-dom';
-import { ColorPickerModal } from './color-picker-modal.component';
-test('Render Autocomplete', () => {
-    render(React.createElement(ColorPickerModal, { color: "#000000", onChange: () => { } }));
-});

package/lib/src/core-components/molecules/color-picker-modal/color-picker-modal.stories.d.ts

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

package/lib/src/core-components/molecules/color-picker-modal/color-picker-modal.stories.js

@@ -1,18 +0,0 @@
-import { ColorPickerModal } from './color-picker-modal.component';
-const meta = {
-    title: 'Design System/Molecules/ColorPickerModal',
-    component: ColorPickerModal,
-    tags: ['autodocs'],
-    parameters: {
-        componentSubtitle: `import { ColorPickerModal } from 'react-restyle-components'`,
-    },
-};
-export default meta;
-export const Basic = {
-    args: {
-        color: '#000000',
-        onChange: (color) => {
-            console.log({ color });
-        },
-    },
-};

package/lib/src/core-components/molecules/css-multiline-input/css-multiline-input.stories.d.ts

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

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

@@ -1,13 +0,0 @@
-import { CSSMultiline } from './css-multiline-input.component';
-const meta = {
-    title: 'Design System/Molecules/CSSMultiline',
-    component: CSSMultiline,
-    tags: ['autodocs'],
-    parameters: {
-        componentSubtitle: `import { CSSMultiline } from 'react-restyle-components'`,
-    },
-};
-export default meta;
-export const Basic = {
-    args: {},
-};

package/lib/src/core-components/molecules/modal-confirm/modal-confirm.stories.d.ts

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

package/lib/src/core-components/molecules/modal-confirm/modal-confirm.stories.js

@@ -1,20 +0,0 @@
-import { ModalConfirm } from './modal-confirm.component';
-const meta = {
-    title: 'Design System/Molecules/ModalConfirm',
-    component: ModalConfirm,
-    tags: ['autodocs'],
-    parameters: {
-        componentSubtitle: `import { ModalConfirm } from 'react-restyle-components'`,
-    },
-};
-export default meta;
-export const Basic = {
-    args: {
-        visible: true,
-        title: 'Confirm',
-        message: 'Are you sure delete?',
-        submitTitle: 'Submit',
-        onClick: () => { },
-        onClose: () => { },
-    },
-};

package/lib/src/core-components/molecules/multi-select/multi-select.stories.d.ts

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

package/lib/src/core-components/molecules/multi-select/multi-select.stories.js

@@ -1,19 +0,0 @@
-import { MultiSelect } from './multi-select.component';
-const meta = {
-    title: 'Design System/Molecules/MultiSelect',
-    component: MultiSelect,
-    tags: ['autodocs'],
-    parameters: {
-        componentSubtitle: `import { MultiSelect } from 'react-restyle-components'`,
-    },
-};
-export default meta;
-export const Basic = {
-    args: {
-        options: ['UPI', 'CARD', 'CASH'],
-        selectedItems: ['CASH', 'UPI'],
-        onSelect: (item) => {
-            console.log({ item });
-        },
-    },
-};

package/lib/src/core-components/molecules/multi-select-with-field/multi-select-with-field.stories.d.ts

@@ -1,6 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { MultiSelectWithField } from './multi-select-with-field.component';
-declare const meta: Meta<typeof MultiSelectWithField>;
-export default meta;
-type Story = StoryObj<typeof MultiSelectWithField>;
-export declare const Basic: Story;

package/lib/src/core-components/molecules/multi-select-with-field/multi-select-with-field.stories.js

@@ -1,20 +0,0 @@
-import { MultiSelectWithField } from './multi-select-with-field.component';
-const meta = {
-    title: 'Design System/Molecules/MultiSelectWithField',
-    component: MultiSelectWithField,
-    tags: ['autodocs'],
-    parameters: {
-        componentSubtitle: `import { MultiSelectWithField } from 'react-restyle-components'`,
-    },
-};
-export default meta;
-export const Basic = {
-    args: {
-        displayField: 'code',
-        options: [{ code: 'UPI' }, { code: 'CARD' }, { code: 'CASH' }],
-        selectedItems: [{ code: 'CASH' }],
-        onSelect: (item) => {
-            console.log({ item });
-        },
-    },
-};

package/lib/src/index.css

@@ -1,110 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer base {
-  @font-face {
-    font-family: 'ArimaRegular';
-    src: url('./library/assets/fonts/arima/arima-regular.ttf');
-  }
-}
-
-@layer components {
-  table {
-    @apply text-black dark:text-white;
-  }
-  table tr:hover {
-    @apply dark:bg-white;
-  }
-
-  select {
-    @apply dark:text-black;
-  }
-  .main {
-    @apply bg-white;
-  }
-  .headerView {
-    @apply bg-white;
-  }
-  .headerView {
-    @apply dark:bg-boxdark;
-  }
-}
-
-body {
-  font-size: 14px;
-  font-family: 'Arima Regular';
-}
-
-.ps__rail-y {
-  background: none !important;
-}
-
-.scrollbar-container {
-  width: 97% !important;
-}
-.dropdown-menu {
-  min-width: 3rem;
-}
-
-.w-md-editor-show-live {
-  height: 800 !important;
-}
-
-.bg-orange1 {
-  background-color: '#EF4444';
-}
-
-.react-pdf__Page__canvas {
-  min-height: 100vh !important;
-  max-width: 100vw !important;
-}
-
-/* :root {
-  scrollbar-color: transparent transparent;
-} */
-
-/* Outer box for reference */
-.outer-box {
-  position: relative;
-  width: 300px;
-  height: 400px;
-  border: 2px solid #333;
-  overflow: hidden; /* Ensure the menu does not spill out */
-}
-
-/* Parent container */
-.parent-container {
-  position: relative;
-  padding: 20px;
-  background: #f0f0f0;
-}
-
-/* Menu styling */
-.menu {
-  position: absolute; /* Allows the menu to exist independently */
-  top: 100%; /* Position it just below the parent */
-  left: 0;
-  width: 100%;
-  max-height: 200px; /* Define a max height for scrolling */
-  overflow-y: auto; /* Enable vertical scrolling */
-  background: #fff;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-  border: 1px solid #ccc;
-}
-
-/* Styling for the menu items */
-.menu ul {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-.menu li {
-  padding: 10px;
-  border-bottom: 1px solid #ddd;
-}
-
-.menu li:last-child {
-  border-bottom: none;
-}

package/lib/src/index.d.ts

@@ -1 +0,0 @@
-import './index.css';

package/lib/src/index.js

@@ -1,12 +0,0 @@
-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'));
-root.render(React.createElement(React.StrictMode, null,
-    React.createElement(App, null)));
-// 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/lib/src/reportWebVitals.d.ts

@@ -1,3 +0,0 @@
-import { ReportHandler } from 'web-vitals';
-declare const reportWebVitals: (onPerfEntry?: ReportHandler) => void;
-export default reportWebVitals;