@ssa-ui-kit/core 0.0.17-alpha → 0.0.19-alpha

package/src/components/MultipleDropdown/stories/MultipleDropdown.stories.tsx

@@ -1,239 +1,239 @@
-import React, { useState } from 'react';
-import { Meta, StoryObj } from '@storybook/react';
-import styled from '@emotion/styled';
-import { css } from '@emotion/react';
-
-import DropdownOption from '@components/DropdownOption';
-import Button from '@components/Button';
-
-import MultipleDropdown from '../MultipleDropdown';
-import { items } from './consts';
-
-type Args = Parameters<typeof MultipleDropdown>[0];
-
-export default {
-  title: 'Components/MultipleDropdown',
-  component: MultipleDropdown,
-  argTypes: {
-    onChange: {
-      control: {
-        disable: true,
-      },
-    },
-    className: {
-      description: 'Used in order to overwrite the default style',
-      table: {
-        type: {
-          summary: 'StyledComponent',
-        },
-      },
-      control: {
-        disable: true,
-      },
-    },
-  },
-  decorators: [
-    (Story, { args }) => {
-      const noop = () => {
-        /* no-op */
-      };
-      return (
-        <div style={{ paddingBottom: 200 }}>
-          {Story({ ...args, onChange: noop })}
-        </div>
-      );
-    },
-  ],
-} as Meta<typeof MultipleDropdown>;
-
-export const Basic: StoryObj = (args: Args) => {
-  return (
-    <MultipleDropdown {...args}>
-      {items.map((item) => (
-        <DropdownOption key={item.value} value={item.value}>
-          {item.label}
-        </DropdownOption>
-      ))}
-    </MultipleDropdown>
-  );
-};
-
-Basic.args = {
-  isDisabled: false,
-  isMultiple: true,
-  selectedItems: [items[0], items[2]],
-  label: 'Strategy',
-};
-
-export const PlaceholderHidden: StoryObj = (args: Args) => {
-  return (
-    <MultipleDropdown {...args}>
-      {items.map((item) => (
-        <DropdownOption key={item.value} value={item.value}>
-          {item.label}
-        </DropdownOption>
-      ))}
-    </MultipleDropdown>
-  );
-};
-
-PlaceholderHidden.args = {
-  isDisabled: false,
-  isMultiple: true,
-  selectedItems: [],
-  showPlaceholder: false,
-  label: 'Strategy',
-};
-
-export const Single: StoryObj = (args: Args) => {
-  return (
-    <MultipleDropdown isDisabled={args.isDisabled} isMultiple={args.isMultiple}>
-      {items.map((item) => (
-        <DropdownOption key={item.value} value={item.value}>
-          {item.label}
-        </DropdownOption>
-      ))}
-    </MultipleDropdown>
-  );
-};
-
-Single.args = {
-  isDisabled: false,
-  isMultiple: false,
-  selectedItems: [items[0]],
-};
-
-export const Opened: StoryObj = (args: Args) => {
-  return (
-    <MultipleDropdown
-      selectedItems={args.selectedItems}
-      isMultiple={args.isMultiple}
-      label={args.label}
-      {...args}>
-      {items.map((item) => (
-        <DropdownOption key={item.value} value={item.value}>
-          {item.label}
-        </DropdownOption>
-      ))}
-    </MultipleDropdown>
-  );
-};
-
-Opened.args = {
-  isOpen: true,
-  isDisabled: false,
-  label: 'Strategy',
-  isMultiple: true,
-  selectedItems: [items[1]],
-};
-
-export const Simple: StoryObj = (args: Args) => {
-  return (
-    <MultipleDropdown {...args}>
-      {items.map((item) => (
-        <DropdownOption key={item.value} value={item.value} />
-      ))}
-    </MultipleDropdown>
-  );
-};
-
-Simple.args = { isDisabled: false, label: 'Strategy', selectedItems: [] };
-
-export const NoItems: StoryObj = () => {
-  return <MultipleDropdown label="Strategy">{null}</MultipleDropdown>;
-};
-
-NoItems.args = { isDisabled: false, selectedItems: [] };
-
-export const Custom: StoryObj = (args: Args) => {
-  // Color palette: https://mycolor.space/?hex=%23FF69B4&sub=1
-  const CustomOption = styled(DropdownOption)`
-    width: auto;
-    padding: 10px;
-
-    text-align: left;
-    line-height: 18px;
-    font-size: 16px;
-
-    background: hotpink;
-    color: white;
-
-    :hover {
-      background: pink;
-    }
-
-    b {
-      color: white;
-    }
-  `;
-
-  return (
-    <MultipleDropdown
-      isDisabled={args.isDisabled}
-      selectedItems={[items[2]]}
-      label="Strategy"
-      css={css`
-        background: #ff947b;
-        :focus {
-          background: #ffb566;
-        }
-        &[aria-expanded='true'] {
-          color: #975875;
-
-          svg {
-            path {
-              stroke: #975875;
-            }
-          }
-        }
-      `}>
-      {items.map((item) => (
-        <CustomOption key={item.value} value={item.value} label={item.label}>
-          {item.label}
-          &nbsp;|&nbsp;
-          <b>{item.subText}</b>
-        </CustomOption>
-      ))}
-    </MultipleDropdown>
-  );
-};
-
-Custom.args = {
-  isDisabled: false,
-};
-
-export const DynamicallyChangedItems = (args: Args) => {
-  const [localItems, setLocalItems] = useState(items);
-
-  const handleUpdate = () => {
-    setLocalItems((state) => [
-      ...state,
-      {
-        value: state[state.length - 1].value + 1,
-        label: `#${state[state.length - 1].value + 1} lorem ipsum`,
-        subText: 'subtext',
-      },
-    ]);
-  };
-  return (
-    <div>
-      <MultipleDropdown {...args}>
-        {localItems.map((item) => (
-          <DropdownOption key={item.value} value={item.value}>
-            {item.label}
-          </DropdownOption>
-        ))}
-      </MultipleDropdown>
-      <Button variant="info" css={{ marginLeft: 10 }} onClick={handleUpdate}>
-        Update items
-      </Button>
-    </div>
-  );
-};
-
-DynamicallyChangedItems.args = {
-  isDisabled: false,
-  isMultiple: true,
-  selectedItems: [items[0], items[2]],
-  label: 'Strategy2',
-};
+import React, { useState } from 'react';
+import { Meta, StoryObj } from '@storybook/react';
+import styled from '@emotion/styled';
+import { css } from '@emotion/react';
+
+import DropdownOption from '@components/DropdownOption';
+import Button from '@components/Button';
+
+import MultipleDropdown from '../MultipleDropdown';
+import { items } from './consts';
+
+type Args = Parameters<typeof MultipleDropdown>[0];
+
+export default {
+  title: 'Components/MultipleDropdown',
+  component: MultipleDropdown,
+  argTypes: {
+    onChange: {
+      control: {
+        disable: true,
+      },
+    },
+    className: {
+      description: 'Used in order to overwrite the default style',
+      table: {
+        type: {
+          summary: 'StyledComponent',
+        },
+      },
+      control: {
+        disable: true,
+      },
+    },
+  },
+  decorators: [
+    (Story, { args }) => {
+      const noop = () => {
+        /* no-op */
+      };
+      return (
+        <div style={{ paddingBottom: 200 }}>
+          {Story({ ...args, onChange: noop })}
+        </div>
+      );
+    },
+  ],
+} as Meta<typeof MultipleDropdown>;
+
+export const Basic: StoryObj = (args: Args) => {
+  return (
+    <MultipleDropdown {...args}>
+      {items.map((item) => (
+        <DropdownOption key={item.value} value={item.value}>
+          {item.label}
+        </DropdownOption>
+      ))}
+    </MultipleDropdown>
+  );
+};
+
+Basic.args = {
+  isDisabled: false,
+  isMultiple: true,
+  selectedItems: [items[0], items[2]],
+  label: 'Strategy',
+};
+
+export const PlaceholderHidden: StoryObj = (args: Args) => {
+  return (
+    <MultipleDropdown {...args}>
+      {items.map((item) => (
+        <DropdownOption key={item.value} value={item.value}>
+          {item.label}
+        </DropdownOption>
+      ))}
+    </MultipleDropdown>
+  );
+};
+
+PlaceholderHidden.args = {
+  isDisabled: false,
+  isMultiple: true,
+  selectedItems: [],
+  showPlaceholder: false,
+  label: 'Strategy',
+};
+
+export const Single: StoryObj = (args: Args) => {
+  return (
+    <MultipleDropdown isDisabled={args.isDisabled} isMultiple={args.isMultiple}>
+      {items.map((item) => (
+        <DropdownOption key={item.value} value={item.value}>
+          {item.label}
+        </DropdownOption>
+      ))}
+    </MultipleDropdown>
+  );
+};
+
+Single.args = {
+  isDisabled: false,
+  isMultiple: false,
+  selectedItems: [items[0]],
+};
+
+export const Opened: StoryObj = (args: Args) => {
+  return (
+    <MultipleDropdown
+      selectedItems={args.selectedItems}
+      isMultiple={args.isMultiple}
+      label={args.label}
+      {...args}>
+      {items.map((item) => (
+        <DropdownOption key={item.value} value={item.value}>
+          {item.label}
+        </DropdownOption>
+      ))}
+    </MultipleDropdown>
+  );
+};
+
+Opened.args = {
+  isOpen: true,
+  isDisabled: false,
+  label: 'Strategy',
+  isMultiple: true,
+  selectedItems: [items[1]],
+};
+
+export const Simple: StoryObj = (args: Args) => {
+  return (
+    <MultipleDropdown {...args}>
+      {items.map((item) => (
+        <DropdownOption key={item.value} value={item.value} />
+      ))}
+    </MultipleDropdown>
+  );
+};
+
+Simple.args = { isDisabled: false, label: 'Strategy', selectedItems: [] };
+
+export const NoItems: StoryObj = () => {
+  return <MultipleDropdown label="Strategy">{null}</MultipleDropdown>;
+};
+
+NoItems.args = { isDisabled: false, selectedItems: [] };
+
+export const Custom: StoryObj = (args: Args) => {
+  // Color palette: https://mycolor.space/?hex=%23FF69B4&sub=1
+  const CustomOption = styled(DropdownOption)`
+    width: auto;
+    padding: 10px;
+
+    text-align: left;
+    line-height: 18px;
+    font-size: 16px;
+
+    background: hotpink;
+    color: white;
+
+    :hover {
+      background: pink;
+    }
+
+    b {
+      color: white;
+    }
+  `;
+
+  return (
+    <MultipleDropdown
+      isDisabled={args.isDisabled}
+      selectedItems={[items[2]]}
+      label="Strategy"
+      css={css`
+        background: #ff947b;
+        :focus {
+          background: #ffb566;
+        }
+        &[aria-expanded='true'] {
+          color: #975875;
+
+          svg {
+            path {
+              stroke: #975875;
+            }
+          }
+        }
+      `}>
+      {items.map((item) => (
+        <CustomOption key={item.value} value={item.value} label={item.label}>
+          {item.label}
+          &nbsp;|&nbsp;
+          <b>{item.subText}</b>
+        </CustomOption>
+      ))}
+    </MultipleDropdown>
+  );
+};
+
+Custom.args = {
+  isDisabled: false,
+};
+
+export const DynamicallyChangedItems = (args: Args) => {
+  const [localItems, setLocalItems] = useState(items);
+
+  const handleUpdate = () => {
+    setLocalItems((state) => [
+      ...state,
+      {
+        value: state[state.length - 1].value + 1,
+        label: `#${state[state.length - 1].value + 1} lorem ipsum`,
+        subText: 'subtext',
+      },
+    ]);
+  };
+  return (
+    <div>
+      <MultipleDropdown {...args}>
+        {localItems.map((item) => (
+          <DropdownOption key={item.value} value={item.value}>
+            {item.label}
+          </DropdownOption>
+        ))}
+      </MultipleDropdown>
+      <Button variant="info" css={{ marginLeft: 10 }} onClick={handleUpdate}>
+        Update items
+      </Button>
+    </div>
+  );
+};
+
+DynamicallyChangedItems.args = {
+  isDisabled: false,
+  isMultiple: true,
+  selectedItems: [items[0], items[2]],
+  label: 'Strategy2',
+};

package/src/components/MultipleDropdown/stories/consts.ts

@@ -1,5 +1,5 @@
-export const items = [
-  { value: 1, label: '#1 lorem ipsum One lorem ipsum', subText: 'subtext' },
-  { value: 2, label: '#2 lorem ipsum', subText: 'subtext' },
-  { value: 3, label: '#3 lorem ipsum', subText: 'subtext' },
-];
+export const items = [
+  { value: 1, label: '#1 lorem ipsum One lorem ipsum', subText: 'subtext' },
+  { value: 2, label: '#2 lorem ipsum', subText: 'subtext' },
+  { value: 3, label: '#3 lorem ipsum', subText: 'subtext' },
+];

package/src/components/MultipleDropdown/types.ts

@@ -1,20 +1,20 @@
-import { IDropdownOption } from '@components/DropdownOptions/types';
-
-export type IDropdownProps<P extends IDropdownOption> = {
-  selectedItems?: P[];
-  isMultiple?: boolean;
-  isDisabled?: boolean;
-  placeholder?: string;
-  showPlaceholder?: boolean;
-  children?: React.ReactNode;
-  className?: string;
-  isOpen?: boolean;
-  label?: string;
-  onChange?: (selectedItem: string | number, isSelected: boolean) => void;
-};
-
-export interface DropdownContextType<T extends IDropdownOption> {
-  onChange: (item: T) => void;
-  isMultiple?: boolean;
-  allItems: Record<string | number, T>;
-}
+import { IDropdownOption } from '@components/DropdownOptions/types';
+
+export type IDropdownProps<P extends IDropdownOption> = {
+  selectedItems?: P[];
+  isMultiple?: boolean;
+  isDisabled?: boolean;
+  placeholder?: string;
+  showPlaceholder?: boolean;
+  children?: React.ReactNode;
+  className?: string;
+  isOpen?: boolean;
+  label?: string;
+  onChange?: (selectedItem: string | number, isSelected: boolean) => void;
+};
+
+export interface DropdownContextType<T extends IDropdownOption> {
+  onChange: (item: T) => void;
+  isMultiple?: boolean;
+  allItems: Record<string | number, T>;
+}

package/src/components/MultipleDropdown/utils.ts

@@ -1,32 +1,32 @@
-import { IDropdownOption } from '../..';
-
-const getActiveItem = <T>({
-  activeItem,
-  placeholder,
-}: {
-  activeItem: Record<number | string, T>;
-  placeholder: string;
-}) =>
-  activeItem
-    ? activeItem.label ||
-      activeItem.children ||
-      activeItem.value ||
-      activeItem ||
-      placeholder
-    : placeholder;
-
-interface GetActiveItems<T> {
-  allItems: T;
-  placeholder: string;
-}
-export const getActiveItems = <
-  T extends Record<string | number, IDropdownOption>,
->({
-  allItems = {} as T,
-  placeholder,
-}: GetActiveItems<T>) => {
-  const activeItems = Object.values(allItems)
-    .filter((item) => item.isSelected)
-    .map((activeItem) => getActiveItem({ activeItem, placeholder }));
-  return activeItems.length ? activeItems : [placeholder];
-};
+import { IDropdownOption } from '../..';
+
+const getActiveItem = <T>({
+  activeItem,
+  placeholder,
+}: {
+  activeItem: Record<number | string, T>;
+  placeholder: string;
+}) =>
+  activeItem
+    ? activeItem.label ||
+      activeItem.children ||
+      activeItem.value ||
+      activeItem ||
+      placeholder
+    : placeholder;
+
+interface GetActiveItems<T> {
+  allItems: T;
+  placeholder: string;
+}
+export const getActiveItems = <
+  T extends Record<string | number, IDropdownOption>,
+>({
+  allItems = {} as T,
+  placeholder,
+}: GetActiveItems<T>) => {
+  const activeItems = Object.values(allItems)
+    .filter((item) => item.isSelected)
+    .map((activeItem) => getActiveItem({ activeItem, placeholder }));
+  return activeItems.length ? activeItems : [placeholder];
+};

package/src/components/MultipleDropdownNotification/MultipleDropdownNotification.tsx

@@ -1,13 +1,13 @@
-import BadgeBase from '@components/Badge/BadgeBase';
-import styled from '@emotion/styled';
-
-const MultipleDropdownNotification = styled(BadgeBase)`
-  min-width: 18px;
-  width: 18px;
-  color: ${({ theme }) => theme.colors.white};
-  background-color: ${({ theme }) => theme.colors.blueNotification};
-  font-size: 10px;
-  border-radius: 50%;
-`;
-
-export default MultipleDropdownNotification;
+import BadgeBase from '@components/Badge/BadgeBase';
+import styled from '@emotion/styled';
+
+const MultipleDropdownNotification = styled(BadgeBase)`
+  min-width: 18px;
+  width: 18px;
+  color: ${({ theme }) => theme.colors.white};
+  background-color: ${({ theme }) => theme.colors.blueNotification};
+  font-size: 10px;
+  border-radius: 50%;
+`;
+
+export default MultipleDropdownNotification;

package/src/components/MultipleDropdownNotification/index.ts

@@ -1 +1 @@
-export { default } from './MultipleDropdownNotification';
+export { default } from './MultipleDropdownNotification';