@talixo-ds/options-input 0.0.21 → 0.0.23

package/dist/options-input.spec.js

@@ -0,0 +1,162 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import ShallowRenderer from 'react-test-renderer/shallow';
+import { render, screen, fireEvent, waitFor, act, } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { OptionsInput } from './options-input';
+jest.mock('@mui/icons-material', () => ({
+    luggage: 'div',
+    dog: 'div',
+}));
+jest.mock('@talixo-ds/component.icons', () => ({
+    football: 'div',
+}));
+jest.mock('react', () => ({
+    ...jest.requireActual('react'),
+    useState: jest.fn(() => []),
+}));
+const props = {
+    options: [
+        {
+            id: 'luggage',
+            icon: 'luggage',
+            label: 'luggage',
+            details: 'This is your luggage',
+            min: 0,
+            max: 9,
+        },
+        {
+            id: 'dog',
+            icon: 'this icon does not exist',
+            label: 'dog',
+            min: 0,
+            max: 3,
+        },
+        {
+            id: 'sport-equipment',
+            icon: 'football',
+            label: 'sport equipment',
+            min: 0,
+            max: 1,
+        },
+    ],
+    id: 'test-id',
+    defaultValue: { luggage: 2, 'sport-equipment': 5 },
+    persistentOptions: ['sport-equipment'],
+    className: 'test-class',
+    onChange: jest.fn(),
+    onFocus: jest.fn(),
+    onBlur: jest.fn(),
+};
+const mockOptions = props.options.map((option) => ({
+    ...option,
+    quantity: 1,
+    inputQuantity: 1,
+}));
+describe('OptionsInput', () => {
+    describe('snapshots', () => {
+        let component;
+        const shallowRenderer = ShallowRenderer.createRenderer();
+        beforeEach(() => {
+            useState.mockImplementationOnce(() => [
+                mockOptions,
+                jest.fn(),
+            ]);
+        });
+        it('should match snapshot', () => {
+            shallowRenderer.render(_jsx(OptionsInput, { ...props }));
+            component = shallowRenderer.getRenderOutput();
+            expect(component).toMatchSnapshot();
+        });
+        it('should render disabled input properly', () => {
+            shallowRenderer.render(_jsx(OptionsInput, { ...props, disabled: true }));
+            component = shallowRenderer.getRenderOutput();
+            expect(component).toMatchSnapshot();
+        });
+    });
+    describe('events', () => {
+        beforeAll(() => {
+            useState.mockImplementation(jest.requireActual('react').useState);
+        });
+        it('should open input dropdown properly', async () => {
+            const { getAllByTestId } = render(_jsx(OptionsInput, { ...props }));
+            const optionsInputContainer = getAllByTestId('options-input-container')[0];
+            act(() => {
+                fireEvent.click(optionsInputContainer);
+            });
+            await waitFor(() => {
+                expect(screen.queryByTestId('options-dropdown-list')).toBeInTheDocument();
+            });
+        });
+        it('should not open dropdown when input is disabled', async () => {
+            const { getAllByTestId } = render(_jsx(OptionsInput, { ...props, disabled: true }));
+            const optionsInputContainer = getAllByTestId('options-input-container')[0];
+            act(() => {
+                fireEvent.click(optionsInputContainer);
+            });
+            await waitFor(() => {
+                expect(screen.queryByTestId('options-dropdown-list')).not.toBeInTheDocument();
+            });
+        });
+        it('should handle input focus properly', () => {
+            const { getAllByTestId } = render(_jsx(OptionsInput, { ...props }));
+            const optionsInputContainer = getAllByTestId('options-input-container')[0];
+            act(() => {
+                fireEvent.focus(optionsInputContainer);
+            });
+            expect(props.onFocus).toHaveBeenCalledWith({
+                dog: 0,
+                luggage: 2,
+                'sport-equipment': 1,
+            });
+        });
+        it('should handle input blur properly', () => {
+            const { getAllByTestId } = render(_jsx(OptionsInput, { ...props }));
+            const optionsInputContainer = getAllByTestId('options-input-container')[0];
+            act(() => {
+                fireEvent.blur(optionsInputContainer);
+            });
+            expect(props.onBlur).toHaveBeenCalledWith({
+                dog: 0,
+                luggage: 2,
+                'sport-equipment': 1,
+            });
+        });
+        it('should handle input option change properly', async () => {
+            const { getAllByTestId } = render(_jsx(OptionsInput, { ...props }));
+            const optionsInputContainer = getAllByTestId('options-input-container')[0];
+            act(() => {
+                fireEvent.click(optionsInputContainer);
+            });
+            await waitFor(() => {
+                const optionCountInput = screen.getAllByTestId('dropdown-item-input')[0];
+                act(() => {
+                    fireEvent.change(optionCountInput, { target: { value: 9 } });
+                });
+                expect(props.onChange).toHaveBeenCalledWith({
+                    dog: 0,
+                    luggage: 9,
+                    'sport-equipment': 1,
+                });
+                expect(screen.getAllByTestId('option-item')[0]).toHaveTextContent('9');
+            });
+        });
+        it('should handle input option blur properly', async () => {
+            const { getAllByTestId } = render(_jsx(OptionsInput, { ...props }));
+            const optionsInputContainer = getAllByTestId('options-input-container')[0];
+            fireEvent.click(optionsInputContainer);
+            await waitFor(() => {
+                const optionCountInput = screen.getAllByTestId('dropdown-item-input')[0];
+                act(() => {
+                    fireEvent.change(optionCountInput, { target: { value: 500 } });
+                });
+                expect(optionCountInput).toHaveAttribute('value', '500');
+                act(() => {
+                    fireEvent.blur(optionCountInput);
+                });
+                expect(optionCountInput).toHaveAttribute('value', '9');
+            });
+        });
+    });
+});
+//# sourceMappingURL=options-input.spec.js.map

package/dist/options-input.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"options-input.spec.js","sourceRoot":"","sources":["../options-input.spec.tsx"],"names":[],"mappings":"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"}

package/dist/preview-1718288241661.js

@@ -0,0 +1,7 @@
+import * as compositions_0 from '/home/circleci/Library/Caches/Bit/capsules/586096eb9/talixo-ds.component_options-input@0.0.22/dist/options-input.composition.js';
+import * as overview_0 from '/home/circleci/Library/Caches/Bit/capsules/586096eb9/talixo-ds.component_options-input@0.0.22/dist/options-input.docs.mdx';
+
+export const compositions = [compositions_0];
+export const overview = [overview_0];
+
+export const compositions_metadata = {"compositions":[{"displayName":"Basic options input","identifier":"BasicOptionsInput"},{"displayName":"Options input with default values","identifier":"OptionsInputWithDefaultValues"},{"displayName":"Options input with persistent options","identifier":"OptionsInputWithPersistentOptions"},{"displayName":"Options input disabled","identifier":"OptionsInputDisabled"}]};

package/dist/styles.scss

@@ -0,0 +1,54 @@
+.options-input {
+  &__container {
+    border: thin solid transparent;
+    border-radius: 0.25rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0.25rem;
+    gap: 1rem;
+    cursor: pointer;
+    width: fit-content;
+
+    &--open {
+      border-bottom-width: 0;
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+
+    &--disabled {
+      cursor: unset;
+    }
+
+    &--read-only {
+      cursor: unset;
+
+      &:hover {
+        border-color: transparent;
+      }
+    }
+  }
+
+  &__dropdown-item {
+    gap: 1rem;
+
+    &--empty {
+      background-color: #eeeeee;
+    }
+  }
+
+  &__dropdown-item-input {
+    width: 2rem;
+  }
+
+  &__dropdown-item-buttons {
+    & > button[role="button"] {
+      min-width: 2rem;
+      padding: 0;
+
+      &[disabled] > svg {
+        color: #0000001f;
+      }
+    }
+  }
+}

package/dist/tsconfig.json

@@ -0,0 +1,40 @@
+{
+    "compilerOptions": {
+        "lib": [
+            "esnext",
+            "dom",
+            "dom.Iterable"
+        ],
+        "target": "es2020",
+        "module": "es2020",
+        "jsx": "react-jsx",
+        "declaration": true,
+        "sourceMap": true,
+        "experimentalDecorators": true,
+        "skipLibCheck": true,
+        "moduleResolution": "node",
+        "esModuleInterop": true,
+        "resolveJsonModule": true,
+        "allowJs": true,
+        "outDir": "dist",
+        "paths": {
+            "react": [
+                "./node_modules/@types/react"
+            ]
+        }
+    },
+    "exclude": [
+        "artifacts",
+        "public",
+        "dist",
+        "node_modules",
+        "package.json",
+        "**/*.cjs",
+        "./dist",
+        "./dist"
+    ],
+    "include": [
+        "**/*",
+        "**/*.json"
+    ]
+}

package/dist/types.d.ts

@@ -0,0 +1,13 @@
+export interface OptionsInputOption {
+    id: string;
+    icon: string;
+    label?: string;
+    details?: string;
+    min?: number;
+    max?: number;
+    quantity?: number;
+    inputQuantity?: string | number;
+}
+export interface OptionsInputValue {
+    [key: string]: number;
+}

package/dist/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../types.ts"],"names":[],"mappings":""}

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@talixo-ds/options-input",
-    "version": "0.0.21",
-    "main": "src/index.ts",
+    "version": "0.0.23",
+    "main": "dist/index.js",
     "scripts": {
       "storybook": "start-storybook -p 6006"
     },