@popsure/dirty-swan 0.26.8 → 0.26.11

package/src/lib/components/input/autoSuggestInput/index.tsx

@@ -0,0 +1,81 @@
+import classNames from 'classnames';
+import Autosuggest from 'react-autosuggest';
+
+import styles from './style.module.scss';
+import { Option } from '../../../models/autoSuggestInput';
+import Input, { InputProps } from '../index';
+
+export default ({
+  currentOption,
+  suggestions,
+  handleSuggestionSelected,
+  onChange,
+  handleSuggestionFetchRequest,
+  handleSuggestionClearRequest,
+  placeholder,
+  className,
+  wrapText,
+}: {
+  currentOption: string;
+  suggestions: Option[];
+  handleSuggestionSelected: (value: Option) => void;
+  onChange: (value: string) => void;
+  handleSuggestionFetchRequest: (value: Option) => void;
+  handleSuggestionClearRequest: () => void;
+  placeholder: string;
+  className?: string;
+  wrapText?: boolean;
+}) => {
+  const renderSuggestion = (suggestion: Option) => (
+    <div className={`${styles['suggestion-option']}`}>
+      {suggestion.leftIcon && (
+        <img
+          className={`mr16 ${styles['suggestion-img']}`}
+          src={suggestion.leftIcon}
+          alt={suggestion.value}
+        />
+      )}
+      <div
+        className={classNames(styles['suggestion-text'], {
+          [styles.nowrap]: !wrapText,
+        })}
+      >
+        {suggestion.value}
+      </div>
+    </div>
+  );
+
+  const getSuggestionValue = (suggestion: Option) => suggestion.value;
+
+  const renderInputComponent = (inputProps: Omit<InputProps, 'ref'>) => (
+    <Input
+      {...inputProps}
+      placeholder={placeholder}
+      data-cy="suggest-multi-select-input"
+    />
+  );
+
+  return (
+    <div className={className}>
+      <Autosuggest
+        theme={styles}
+        suggestions={suggestions}
+        onSuggestionsFetchRequested={handleSuggestionFetchRequest}
+        onSuggestionsClearRequested={handleSuggestionClearRequest}
+        getSuggestionValue={getSuggestionValue}
+        renderSuggestion={renderSuggestion}
+        highlightFirstSuggestion={true}
+        inputProps={{
+          value: currentOption,
+          onChange: (_, { newValue }) => {
+            onChange(newValue);
+          },
+        }}
+        onSuggestionSelected={(_, { suggestion }) => {
+          handleSuggestionSelected(suggestion);
+        }}
+        renderInputComponent={renderInputComponent}
+      />
+    </div>
+  );
+};

package/src/lib/components/input/autoSuggestInput/style.module.scss

@@ -0,0 +1,71 @@
+@keyframes appearInAnimation {
+  from {
+    opacity: 0;
+    transform: translateY(16px);
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+.suggestionsList {
+  position: absolute;
+
+  z-index: 100;
+  overflow: hidden;
+  border-radius: 8px;
+  border: 1px solid var(--ds-primary-500);
+
+  width: 100%;
+  max-width: 364px;
+  height: fit-content;
+  max-height: 216px;
+
+  overflow-y: scroll;
+
+  background-color: white;
+
+  animation-name: appearInAnimation;
+  animation-duration: 0.3s;
+  animation-fill-mode: both;
+
+  transform: translateY(8px);
+}
+
+.suggestion-option {
+  display: flex;
+  align-items: center;
+
+  cursor: pointer;
+  position: relative;
+
+  margin: 0;
+  padding: 12px 16px;
+
+  color: var(--ds-grey-900);
+
+  min-height: 48px;
+  line-height: 24px;
+}
+
+.suggestion-img {
+  width: 32px;
+  height: 24px;
+
+  border-radius: 2px;
+}
+
+.suggestion-text {
+  flex: 1;
+}
+
+.nowrap {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.suggestionHighlighted {
+  background-color: var(--ds-primary-100);
+}

package/src/lib/components/input/autoSuggestMultiSelect/index.stories.mdx

@@ -0,0 +1,115 @@
+import { useState } from 'react';
+import { Meta, Preview } from '@storybook/addon-docs/blocks';
+
+import AutoSuggestMultiSelect from '.';
+import featherLogo from '../../cards/icons/feather-logo.svg';
+
+<Meta title="JSX/Inputs/AutoSuggestMultiSelect" />
+
+## AutoSuggestMultiSelect
+
+AutoSuggestMultiSelect is a combination of the AutoSuggestInput and Chip components.
+
+This component allows quick search via the input field to find an option for selection.
+
+Upon selecting an option, the option is displayed above the input field as a chip.
+
+The chip can be removed by clicking on the X button. Multi options can be selected as well.
+
+Prop `setValues` function must be provided to keep track of removed and added option selections.
+
+## Types
+
+```typescript
+export interface Option {
+  value: string; // value of option to be stored and displayed on UI
+  leftIcon?: string; // image of the provided option to be displayed on UI
+}
+```
+
+## Arguments
+
+| attribute            | unit     | description                                                              | default value | required |
+| -------------------- | -------- | ------------------------------------------------------------------------ | ------------- | -------- |
+| options              | Option[] | List of all options available to search from                             | n/a           | true     |
+| selectedValues       | Option[] | List of all selected values                                              | n/a           | true     |
+| setValues            | function | Function that runs when selecting values                                 | n/a           | true     |
+| placeholder          | string   | Placeholder for DirtySwan Input component                                | n/a           | true     |
+| chipsListClassName   | string   | Class name for the most parent element of the Chip component             | undefined     | false    |
+| multiSelectClassName | string   | Class name for the most parent element of the AutoSuggestInput component | undefined     | false    |
+| wrapText             | boolean  | Wether or not wrap the entries in the dropdown or hide overflown text    | false         | false    |
+
+## Example
+
+Following component has five options to search from: `feather`, `feather2`, `feather3`,`dirtyswan`. `test value`
+
+export const AutoSuggestMultiSelectStory = () => {
+  const [selectedValues, setSelectedValues] = useState([]);
+  const [suggestions, setSuggestions] = useState([]);
+  const [currentOption, setCurrentOption] = useState('');
+  const options = [
+    { value: 'feather', leftIcon: featherLogo },
+    { value: 'feather2', leftIcon: featherLogo },
+    {
+      value: 'feather3',
+      leftIcon: featherLogo,
+    },
+    {
+      value: 'dirtyswan',
+      leftIcon: featherLogo,
+    },
+    {
+      value: 'test value',
+      leftIcon: featherLogo,
+    },
+  ];
+  return (
+    <AutoSuggestMultiSelect
+      options={options}
+      selectedValues={selectedValues}
+      setValues={setSelectedValues}
+      placeholder="Placeholder"
+      chipsListClassName="wmx7"
+      multiSelectClassName="wmx5"
+    />
+  );
+};
+
+<AutoSuggestMultiSelectStory />
+
+```typescript
+import React, { useState } from 'react';
+import { AutoSuggestMultiSelect } from '@popsure/dirty-swan';
+
+export default () => {
+  const [selectedValues, setSelectedValues] = useState([]);
+  const [suggestions, setSuggestions] = useState([]);
+  const [currentOption, setCurrentOption] = useState('');
+  const options = [
+    { value: 'feather', leftIcon: featherLogo },
+    { value: 'feather2', leftIcon: featherLogo },
+    {
+      value: 'feather3',
+      leftIcon: featherLogo,
+    },
+    {
+      value: 'dirtyswan',
+      leftIcon: featherLogo,
+    },
+    {
+      value: 'test value',
+      leftIcon: featherLogo,
+    },
+  ];
+  return (
+    <AutoSuggestMultiSelect
+      options={options}
+      selectedValues={selectedValues}
+      setValues={setSelectedValues}
+      placeholder="Placeholder"
+      chipsListClassName="wmx7"
+      multiSelectClassName="wmx5"
+    />
+  );
+};
+```

package/src/lib/components/input/autoSuggestMultiSelect/index.tsx

@@ -0,0 +1,75 @@
+import { useState } from 'react';
+
+import { Option } from '../../../models/autoSuggestInput';
+import Chip from '../../chip';
+import AutoSuggestInput from '../autoSuggestInput';
+import styles from './style.module.scss';
+
+export default ({
+  options,
+  selectedValues,
+  setValues,
+  placeholder,
+  chipsListClassName,
+  multiSelectClassName,
+  wrapText,
+}: {
+  options: Option[];
+  selectedValues?: Option[];
+  setValues: (values: Option[]) => void;
+  placeholder: string;
+  chipsListClassName?: string;
+  multiSelectClassName?: string;
+  wrapText?: boolean;
+}) => {
+  const [suggestions, setSuggestions] = useState<Option[]>([]);
+  const [currentOption, setCurrentOption] = useState('');
+
+  return (
+    <>
+      {selectedValues && selectedValues.length > 0 && (
+        <div
+          className={`mb8 ${styles['chip-container']} ${chipsListClassName}`}
+        >
+          {selectedValues.map((value, index) => (
+            <Chip
+              key={`${value.value}-${index}`}
+              value={value}
+              onRemove={(value: Option) => {
+                const newValues = [...selectedValues].filter(
+                  (selectedValue) => selectedValue.value !== value.value
+                );
+                setValues(newValues);
+              }}
+            />
+          ))}
+        </div>
+      )}
+      <AutoSuggestInput
+        className={multiSelectClassName}
+        placeholder={placeholder}
+        onChange={setCurrentOption}
+        handleSuggestionSelected={(value) => {
+          const newSelectedOptions = selectedValues ?? [];
+          newSelectedOptions?.push(value);
+          setValues(newSelectedOptions);
+          setCurrentOption('');
+        }}
+        handleSuggestionFetchRequest={({ value }) => {
+          const filteredOptions = options.filter(
+            (option) =>
+              option.value.toLowerCase().startsWith(value.toLowerCase()) &&
+              selectedValues?.find(
+                (selectedValue) => selectedValue.value === option.value
+              ) === undefined
+          );
+          setSuggestions(filteredOptions);
+        }}
+        currentOption={currentOption}
+        suggestions={suggestions}
+        handleSuggestionClearRequest={() => setSuggestions([])}
+        wrapText={wrapText}
+      />
+    </>
+  );
+};

package/src/lib/components/input/autoSuggestMultiSelect/style.module.scss

@@ -0,0 +1,4 @@
+.chip-container {
+  display: flex;
+  flex-wrap: wrap;
+}

package/src/lib/components/input/currency/format/index.test.ts

@@ -0,0 +1,49 @@
+import { formatInput, reverseFormatInput } from './';
+
+describe('Format input', () => {
+  it('Should add space for thousands separator', () => {
+    expect(formatInput('1000')).toEqual('1 000');
+  });
+
+  it('Should add space for hundred thousands separator', () => {
+    expect(formatInput('172888')).toEqual('172 888');
+  });
+
+  it('Should add space for million separator', () => {
+    expect(formatInput('1728281')).toEqual('1 728 281');
+  });
+
+  it('Should add dot for decimal separator', () => {
+    expect(formatInput('1728281.23')).toEqual('1 728 281.23');
+  });
+
+  it('Should replace comma with dot', () => {
+    expect(formatInput('1728281,23')).toEqual('1 728 281.23');
+  });
+
+  it('Should truncate 2 digits after decimal separator', () => {
+    expect(formatInput('1728281.23392')).toEqual('1 728 281.23');
+  });
+});
+
+describe('Reverse format input', () => {
+  it('Should reverse format 1 728 281.23', () => {
+    expect(reverseFormatInput('1 728 281.23')).toEqual(1728281.23);
+  });
+
+  it('Should reverse format 1 728 281,23', () => {
+    expect(reverseFormatInput('1 728 281,23')).toEqual(1728281.23);
+  });
+
+  it('Should reverse format 1 728 281', () => {
+    expect(reverseFormatInput('1 728 281')).toEqual(1728281);
+  });
+
+  it('Should reverse format 172 888', () => {
+    expect(reverseFormatInput('172 888')).toEqual(172888);
+  });
+
+  it('Should reverse format 1 000', () => {
+    expect(reverseFormatInput('1 000')).toEqual(1000);
+  });
+});

package/src/lib/components/input/currency/format/index.ts

@@ -0,0 +1,15 @@
+export const formatInput = (input: string): string => {
+  const decimalSeparator = input.includes(',') ? ',' : '.';
+  const parts = input.split(decimalSeparator);
+  const floor = parts[0];
+  const ceiling = parts[1];
+  parts[0] = floor.replace(/\B(?=(\d{3})+(?!\d))/g, ' ');
+  if (ceiling) {
+    parts[1] = ceiling.slice(0, Math.min(ceiling.length, 2));
+  }
+  return parts.join('.');
+};
+
+export function reverseFormatInput(input: string): number {
+  return Number(input.replace(/,/, '.').replace(/\s/g, ''));
+}

package/src/lib/components/input/currency/index.stories.mdx

@@ -0,0 +1,25 @@
+import { Meta, Preview } from '@storybook/addon-docs/blocks';
+
+import CurrencyInput from '.';
+
+<Meta title="JSX/Inputs/Currency Input" />
+
+# Currency Input
+
+Currency input is a component built on top of the [Input](?path=/story/jsx-inputs-intro--page) component that give you a better formatting when numerical currency values.
+
+The following will be done:
+
+- Adding a Euro sign (€) prefix.
+- Formatting thousand separators with a space as user type in.
+- Setting decimal reparator as a dot (.)
+
+<Preview>
+  <>
+    <h1 className="p-h1">Currency Input</h1>
+    <h4 className="p-h4 mt24">Empty</h4>
+    <CurrencyInput className="wmx5 mt8" />
+    <h4 className="p-h4 mt24">Filled</h4>
+    <CurrencyInput className="wmx5 mt8" value={1234567.32} />
+  </>
+</Preview>

package/src/lib/components/input/currency/index.test.tsx

@@ -0,0 +1,56 @@
+import { fireEvent, render } from '@testing-library/react';
+
+import CurrencyInput from '.';
+
+const setup = () => {
+  const utils = render(<CurrencyInput />);
+  const input = utils.getByTestId('ds-input-input') as HTMLInputElement;
+  return {
+    input,
+    ...utils,
+  };
+};
+
+describe('Currency input component', () => {
+  it('Should correctly space thousands separators', () => {
+    const { input } = setup();
+    fireEvent.change(input, { target: { value: '1234567' } });
+    expect(input.value).toBe('1 234 567');
+  });
+
+  it('Should remove non numerical values', () => {
+    const { input } = setup();
+    fireEvent.change(input, { target: { value: '123asdf4567' } });
+    expect(input.value).toBe('1 234 567');
+  });
+
+  it('Should remove non numerical values', () => {
+    const { input } = setup();
+    fireEvent.change(input, { target: { value: '123asdf4567' } });
+    expect(input.value).toBe('1 234 567');
+  });
+
+  it('Should allow decimal separator', () => {
+    const { input } = setup();
+    fireEvent.change(input, { target: { value: '1234567.34' } });
+    expect(input.value).toBe('1 234 567.34');
+  });
+
+  it('Should replace comma decimal seprator with a dot', () => {
+    const { input } = setup();
+    fireEvent.change(input, { target: { value: '1234567,34' } });
+    expect(input.value).toBe('1 234 567.34');
+  });
+
+  it('Should only allow one decimal separator', () => {
+    const { input } = setup();
+    fireEvent.change(input, { target: { value: '1234567..34' } });
+    expect(input.value).toBe('1 234 567.34');
+  });
+
+  it('Should only allow one decimal separator after a sequence of number', () => {
+    const { input } = setup();
+    fireEvent.change(input, { target: { value: '1234567..34.4' } });
+    expect(input.value).toBe('1 234 567.34');
+  });
+});

package/src/lib/components/input/currency/index.tsx

@@ -0,0 +1,53 @@
+import { useEffect, useState } from 'react';
+
+import { formatInput, reverseFormatInput } from './format';
+import Input, { InputProps } from '..';
+
+const CurrencyInput = ({
+  value,
+  onChange,
+  type,
+  ...props
+}: {
+  value?: number;
+  placeholder?: string;
+  onChange?: (value: number) => void;
+} & Omit<InputProps, 'onChange' | 'value' | 'ref'>) => {
+  const [shadowValue, setShadowValue] = useState('');
+
+  const formattedShadowValue = formatInput(
+    shadowValue
+      .replace(/ /g, '') // remove all whitespace
+      .replace(',', '.') // change commas to dot for decimal separator
+      .replace('.', 'DECIMAL_SEPARATOR') // Gymnastic  to remove all the but the first decimal separators 🤸
+      .replace(/\./g, '')
+      .replace('DECIMAL_SEPARATOR', '.') // End of the Gymnastic 🤸
+      .replace(/[^\d\\.]/g, '') // remove all non decimal and dot
+  );
+
+  useEffect(() => {
+    if (value && value !== reverseFormatInput(shadowValue)) {
+      setShadowValue(formatInput(value.toString()));
+    }
+    // eslint-disable-next-line
+  }, [value]);
+
+  useEffect(() => {
+    onChange?.(reverseFormatInput(shadowValue));
+    // eslint-disable-next-line
+  }, [shadowValue]);
+
+  return (
+    <Input
+      prefix="€"
+      type="string"
+      value={formattedShadowValue}
+      onChange={(e) => {
+        setShadowValue(e.target.value);
+      }}
+      {...props}
+    />
+  );
+};
+
+export default CurrencyInput;

package/src/lib/components/input/iban/formatIban/index.test.ts

@@ -0,0 +1,11 @@
+import { formatIban } from '.';
+
+describe('Format IBAN testing', () => {
+  it('Should return IBAN split by four characters', () => {
+    expect(formatIban('DE1234123412341234')).toEqual('DE12 3412 3412 3412 34');
+  });
+
+  it('Should return IBAN with all caps letters', () => {
+    expect(formatIban('de1234123412341234')).toEqual('DE12 3412 3412 3412 34');
+  });
+});

package/src/lib/components/input/iban/formatIban/index.ts

@@ -0,0 +1,22 @@
+const IBAN_CHAR_LIMIT = 4;
+
+export const formatIban = (iban?: string): string => {
+  if (iban) {
+    const cleanIban = iban
+      .replace(/\s\s+/g, ' ')
+      .replace(/[^0-9a-zA-Z]/gi, '')
+      .toUpperCase();
+
+    const values: string[] = [];
+
+    cleanIban.split('').forEach((char, idx) => {
+      if (idx % IBAN_CHAR_LIMIT === 0) {
+        values.push(cleanIban.substring(idx, idx + IBAN_CHAR_LIMIT));
+      }
+    });
+
+    return values.join(' ');
+  }
+
+  return '';
+};

package/src/lib/components/input/iban/index.stories.mdx

@@ -0,0 +1,21 @@
+import { Meta, Preview } from '@storybook/addon-docs/blocks';
+
+import IbanInput from '.';
+
+<Meta title="JSX/Inputs/Iban Input" />
+
+# Iban Input
+
+Iban input is a component built on top of the [Input](?path=/story/jsx-inputs-intro--page) component that give you a better formatting when entering [IBAN](https://en.wikipedia.org/wiki/International_Bank_Account_Number).
+
+As the user enter their IBAN, a spacing will be applied for better readability.
+
+<Preview>
+  <>
+    <h1 className="p-h1">Iban Input</h1>
+    <h4 className="p-h4 mt24">Empty</h4>
+    <IbanInput className="wmx5 mt8" />
+    <h4 className="p-h4 mt24">Filled</h4>
+    <IbanInput className="wmx5 mt8" value="DE91100000000123456789" />
+  </>
+</Preview>

package/src/lib/components/input/iban/index.tsx

@@ -0,0 +1,20 @@
+import Input, { InputProps } from '..';
+
+import { formatIban } from './formatIban';
+
+const IbanInput = ({
+  value,
+  onChange,
+  ...props
+}: {
+  value?: string;
+  onChange: (value: string) => void;
+} & Omit<InputProps, 'onChange' | 'value' | 'ref'>) => (
+  <Input
+    value={formatIban(value)}
+    onChange={(e) => onChange(formatIban(e.target.value))}
+    {...props}
+  />
+);
+
+export default IbanInput;