feat: implement multiselect

Author: tatinacher

src/woly/atoms/list/index.tsx

@@ -11,12 +11,13 @@ interface ListElementsProps {
 
 interface ListItemProps {
   as?: 'a' | 'li';
+  className?: string;
   disabled?: boolean;
-  selected?: boolean;
   href?: string;
-  tabIndex?: number;
+  id?: string;
   onClick?: (e: React.SyntheticEvent<HTMLElement>) => void;
-  className?: string;
+  selected?: boolean;
+  tabIndex?: number;
 }
 
 const mapContainer = (properties: { columns: number } & Priority) => ({
@@ -28,6 +29,7 @@ const mapItem = (properties: ListItemProps & Priority) => ({
   'data-priority': properties.priority || 'secondary',
   'data-type': properties.as,
   'data-selected': properties.selected,
+  'data-id': properties.id,
 });
 
 export const ListContainer = styled.div.attrs(mapContainer)`
@@ -44,26 +46,28 @@ export const ListContainer = styled.div.attrs(mapContainer)`
 
 export const ListItem: React.FC<ListItemProps & ListElementsProps & Priority> = ({
   as,
+  className = '',
   disabled = false,
   href,
   iconLeft,
   iconRight,
+  id,
+  onClick,
   priority = 'secondary',
+  selected = false,
   tabIndex,
   text,
-  selected = false,
-  className = '',
-  onClick,
 }) => (
   <ListItemContainer
     as={as}
-    href={href}
+    className={className}
     disabled={disabled}
+    href={href}
+    id={id}
+    onClick={onClick}
+    priority={priority}
     selected={selected}
     tabIndex={disabled ? -1 : tabIndex}
-    priority={priority}
-    className={className}
-    onClick={onClick}
   >
     {iconLeft && <span data-element="icon">{iconLeft}</span>}
     <span>{text}</span>
@@ -79,6 +83,7 @@ const ListItemContainer = styled.div.attrs(mapItem)`
   --local-icon-color: var(--woly-canvas-text-default);
   --local-backgound: var(--woly-canvas-default);
   --local-color: var(--woly-canvas-text-default);
+  display: flex;
 
   color: var(--local-color);
   font-size: var(--woly-font-size);
@@ -91,6 +96,7 @@ const ListItemContainer = styled.div.attrs(mapItem)`
   cursor: pointer;
 
   span {
+    flex: 1;
     svg > path {
       fill: var(--local-icon-color);
     }

src/woly/elements/input-container/index.tsx

@@ -9,6 +9,7 @@ interface InputContainerProps extends React.InputHTMLAttributes<HTMLInputElement
   className?: string;
   disabled?: boolean;
   leftIcon?: React.ReactNode;
+  onClick?: React.EventHandler<React.SyntheticEvent>;
   rightIcon?: React.ReactNode;
 }
 
@@ -17,6 +18,7 @@ const InputContainerBase: React.FC<InputContainerProps & Priority> = ({
   className,
   disabled = 'false',
   leftIcon,
+  onClick,
   priority = 'secondary',
   rightIcon,
 }) => (
@@ -25,6 +27,7 @@ const InputContainerBase: React.FC<InputContainerProps & Priority> = ({
     className={className}
     data-disabled={disabled}
     data-priority={priority}
+    onClick={onClick}
   >
     {leftIcon && (
       <span data-element="icon" data-box-role="icon">

src/woly/index.ts

@@ -1,4 +1,5 @@
 export * from './atoms';
 export * from './molecules';
+export * from './organisms';
 export * from './templates';
 export { WolyGlobalStyles } from './woly-global-styles';

src/woly/molecules/index.ts

@@ -2,9 +2,10 @@ export { Accordion } from './accordion';
 export { Checkbox } from './checkbox';
 export { DataTable, DataTableColumn, HeadProps as DataTableHeadProps } from './data-table';
 export { Field } from './field';
+export { InputChip } from './input-chip';
 export { InputPassword } from './input-password';
-export { Notification } from './notification';
 export { Modal } from './modal';
+export { Notification } from './notification';
 export { Popover } from './popover';
 export { RadioButton } from './radio-button';
 export { Select } from './select';

src/woly/molecules/input-chip/index.tsx

@@ -0,0 +1,87 @@
+import React from 'react';
+import styled, { StyledComponent } from 'styled-components';
+import { ButtonIcon, Chip } from 'ui/atoms';
+import { IconClose } from 'static/icons';
+import { InputContainer, InputElement } from 'ui/elements';
+import { Priority } from 'lib/types';
+
+type MultiSelectOptions = React.OptionHTMLAttributes<HTMLOptionElement>;
+
+interface InputChipProps {
+  className?: string;
+  disabled: boolean;
+  leftIcon: React.ReactNode;
+  name?: string;
+  onBlur?: (value?: unknown) => void;
+  onChange?: React.EventHandler<React.SyntheticEvent>;
+  onChipClose: React.EventHandler<React.SyntheticEvent>;
+  onClick: React.EventHandler<React.SyntheticEvent>;
+  onFocus?: (value?: unknown) => void;
+  options: Array<MultiSelectOptions>;
+  rightIcon: React.ReactNode;
+}
+
+export const InputChipBase: React.FC<InputChipProps & Priority> = ({
+  className,
+  disabled = false,
+  leftIcon,
+  name = 'multiselect-input',
+  onBlur,
+  onChange,
+  onChipClose,
+  onClick,
+  onFocus,
+  options = [],
+  priority = 'secondary',
+  rightIcon,
+}) => {
+  if (!options) {
+    return null;
+  }
+
+  let inputField = <InputElement onChange={() => {}} name={name} type="text" disabled />;
+
+  if (onChange) {
+    inputField = <InputElement onChange={onChange} name={name} type="text" />;
+  }
+
+  return (
+    <InputContainer
+      className={className}
+      leftIcon={leftIcon}
+      rightIcon={rightIcon}
+      disabled={disabled}
+      onClick={onClick}
+      priority={priority}
+    >
+      {options.map(({ id, label }) => (
+        <div key={id} data-element="input-chip">
+          <Chip
+            key={id}
+            text={label}
+            priority={priority}
+            rightIcon={
+              <ButtonIcon
+                data-id={id}
+                icon={<IconClose />}
+                onClick={onChipClose}
+                priority={priority}
+              />
+            }
+          />
+        </div>
+      ))}
+      <div>{inputField}</div>
+    </InputContainer>
+  );
+};
+
+export const InputChip = styled(InputChipBase)`
+  [data-element='input'] {
+    display: flex;
+  }
+  [data-element='input-chip'] {
+    --woly-component-level: 0;
+    margin: 0 3px 3px 0;
+  }
+` as StyledComponent<'div', Record<string, unknown>, InputChipProps & Priority>;

src/woly/molecules/input-chip/usage.mdx

@@ -0,0 +1,49 @@
+import {InputChip} from 'ui';
+import {Playground, StateEvent} from 'dev/playground';
+import {IconArrowDown} from 'static/icons';
+
+export const fruits = [
+  {
+    id: 2,
+    text: "orange",
+    selected: false
+  },
+  {
+    id: 1,
+    text: "apple",
+    selected: false
+  },
+  {
+    id: 3,
+    text: "lemon",
+    selected: false
+  }
+];
+
+### Example
+
+<Playground>
+  <div style={{ height: '250px' }}>
+    <StateEvent initial={null} change={(event) => event?.target?.dataset.value}>
+      {(value, change) => (
+        <div style={{ width: '100%' }}>
+          <InputChip options={fruits} isInput={false} onChipClose={change} />
+        </div>
+      )}
+    </StateEvent>
+  </div>
+</Playground>
+
+### Example 2
+
+<Playground>
+  <div style={{ height: '250px' }}>
+    <StateEvent initial={null} change={(event) => event?.target?.dataset.value}>
+      {(value, change) => (
+        <div style={{ width: '100%' }}>
+          <InputChip options={fruits} isInput={true} onChipClose={change} />
+        </div>
+      )}
+    </StateEvent>
+  </div>
+</Playground>