@ssa-ui-kit/core 0.0.1-alpha

package/src/components/Dropdown/Dropdown.tsx

@@ -0,0 +1,135 @@
+import React, { useState, useEffect, useRef, useId, ReactNode } from 'react';
+import styled from '@emotion/styled';
+import { useTheme } from '@emotion/react';
+import { useClickOutside } from '@ssa-ui-kit/hooks';
+
+import DropdownToggle from '@components/DropdownToggle';
+import DropdownArrow from '@components/DropdownArrow';
+import DropdownOptions from '@components/DropdownOptions';
+import DropdownContext from '@components/Dropdown/Dropdown.context';
+import { IDropdownOption } from '@components/DropdownOptions/types';
+
+import { DropdownContextType, IDropdownProps } from './types';
+
+/**
+ * The structure of the component:
+ *
+ * Dropdown
+ *   DropdownToggle
+ *   DropdownOptions
+ *     DropdownOption
+ *
+ * Aria attributes are set according to
+ * https://www.w3.org/WAI/ARIA/apg/example-index/combobox/combobox-select-only.html
+ **/
+
+const DropdownBase = styled.div`
+  display: inline-block;
+  position: relative;
+`;
+
+const Dropdown = <T extends IDropdownOption>({
+  selectedItem,
+  isDisabled,
+  isOpen: isInitOpen,
+  children,
+  onChange: handleChange,
+  className,
+}: IDropdownProps<T>) => {
+  const theme = useTheme();
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  const placeholder = 'Select something';
+  const dropdownId = useId();
+  const options: T[] = [];
+
+  const [isFocused, setIsFocused] = useState(false);
+  const [isOpen, setIsOpen] = useState(isInitOpen || false);
+  const [colors, setColors] = useState<Array<string | undefined>>([]);
+  const [activeItem, setActiveItem] = useState<T | undefined>(selectedItem);
+
+  const onChange: DropdownContextType['onChange'] = (item) => {
+    const innerItem = options.filter((option) => option.value === item)[0];
+
+    setIsOpen(false);
+
+    if (isDisabled || !item) {
+      return;
+    }
+
+    if (innerItem.value === activeItem?.value) {
+      return;
+    }
+
+    setActiveItem(innerItem);
+    handleChange && handleChange(innerItem);
+  };
+
+  useClickOutside(dropdownRef, () => isOpen && setIsOpen(false));
+
+  useEffect(() => {
+    if (isDisabled) {
+      setColors([theme.colors.greyDarker60, theme.colors.grey20]);
+    } else if (isOpen) {
+      setColors([theme.colors.white, theme.colors.white60]);
+    } else if (isFocused) {
+      setColors([theme.colors.greyDarker, theme.colors.greyDarker60]);
+    }
+  }, [isOpen, isDisabled, isFocused]);
+
+  useEffect(() => {
+    if (isDisabled && isOpen) {
+      setIsOpen(false);
+    }
+  }, [isDisabled]);
+
+  const childrenArray = React.Children.toArray(children).filter(Boolean);
+
+  const items = (childrenArray as React.ReactElement[]).map((child, index) => {
+    options.push(child.props);
+
+    return React.cloneElement(child, {
+      index,
+      onClick: onChange.bind(this),
+      ...child.props,
+    });
+  });
+
+  const contextValue: DropdownContextType = React.useMemo(
+    () => ({ onChange, activeItem }),
+    [onChange, activeItem],
+  );
+
+  const value = (
+    activeItem
+      ? activeItem.label ||
+        activeItem.children ||
+        activeItem.value ||
+        activeItem ||
+        placeholder
+      : placeholder
+  ) as ReactNode;
+
+  return (
+    <DropdownContext.Provider value={contextValue}>
+      <DropdownBase ref={dropdownRef} data-testid="dropdown">
+        <DropdownToggle
+          className={className}
+          isOpen={isOpen}
+          disabled={isDisabled}
+          onClick={setIsOpen.bind(null, !isOpen)}
+          onFocus={setIsFocused.bind(null, true)}
+          colors={colors}
+          ariaLabelledby={`dropdown-label-${dropdownId}`}
+          ariaControls={`dropdown-popup-${dropdownId}`}>
+          {value}
+          <DropdownArrow isUp={isOpen} />
+        </DropdownToggle>
+
+        {isOpen ? <DropdownOptions>{items}</DropdownOptions> : null}
+      </DropdownBase>
+    </DropdownContext.Provider>
+  );
+};
+
+export default Dropdown;

package/src/components/Dropdown/index.ts

@@ -0,0 +1 @@
+export { default } from './Dropdown';

package/src/components/Dropdown/types.ts

@@ -0,0 +1,17 @@
+import { IDropdownOption } from '@components/DropdownOptions';
+import { CommonProps } from '@global-types/emotion';
+
+export interface IDropdownProps<P extends IDropdownOption> extends CommonProps {
+  selectedItem?: P;
+  onChange?: (item: P) => void;
+  isDisabled?: boolean;
+  placeholder?: string;
+  children?: React.ReactNode;
+  className?: string;
+  isOpen?: boolean;
+}
+
+export interface DropdownContextType {
+  onChange: (item?: string) => void;
+  activeItem?: IDropdownOption | null;
+}

package/src/components/DropdownArrow/DropdownArrow.tsx

@@ -0,0 +1,17 @@
+import styled from '@emotion/styled';
+
+import Icon from '@components/Icon';
+import { CommonProps } from '@global-types/emotion';
+
+export const DropdownArrowBase = styled.div<CommonProps>`
+  display: flex;
+  align-items: center;
+`;
+
+const DropdownArrow = ({ isUp }: { isUp: boolean }) => (
+  <DropdownArrowBase>
+    <Icon name={`carrot-${isUp ? 'up' : 'down'}`} size={12} />
+  </DropdownArrowBase>
+);
+
+export default DropdownArrow;

package/src/components/DropdownArrow/index.ts

@@ -0,0 +1 @@
+export { default } from './DropdownArrow';

package/src/components/DropdownBase/DropdownBase.tsx

@@ -0,0 +1,10 @@
+import styled from '@emotion/styled';
+import { CommonProps } from '@global-types/emotion';
+
+const DropdownBase = styled.div<CommonProps>`
+  display: inline-block;
+  position: relative;
+  min-width: 180px;
+`;
+
+export default DropdownBase;

package/src/components/DropdownBase/index.ts

@@ -0,0 +1 @@
+export { default } from './DropdownBase';

package/src/components/DropdownOption/DropdownOption.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { Theme, css } from '@emotion/react';
+import styled from '@emotion/styled';
+import { CommonProps } from '@global-types/emotion';
+
+interface IDropdownItemProps extends CommonProps {
+  onClick?: (e: React.MouseEvent<HTMLElement>) => void;
+  isActive?: boolean;
+  isMultiple?: boolean;
+  isDisabled?: boolean;
+  noHover?: boolean;
+  value?: string | number | boolean;
+  label?: string | number;
+  children?: React.ReactNode;
+}
+
+interface MultipleStylesProps {
+  theme: Theme;
+  isDisabled?: boolean;
+}
+
+const multipleStyles = ({ theme, isDisabled }: MultipleStylesProps) => {
+  return css`
+    background: none;
+    color: ${isDisabled
+      ? theme.colors.greyDisabledCheckbox
+      : theme.colors.greyDisabled};
+    &:hover {
+      background: none;
+    }
+  `;
+};
+
+const DropdownOption = styled.li<IDropdownItemProps>`
+  overflow: hidden;
+
+  height: 34px;
+  padding: 8px 16px;
+
+  border: none;
+  background: ${({ isActive, theme }) =>
+    isActive ? theme.colors.greySelectedMenuItem : 'inherit'};
+
+  &:hover {
+    background: ${({ theme }) => theme.colors.greyLighter};
+  }
+
+  ${({ isMultiple, isDisabled, theme }) =>
+    isMultiple &&
+    multipleStyles({
+      theme,
+      isDisabled,
+    })}
+`;
+
+export default DropdownOption;

package/src/components/DropdownOption/index.ts

@@ -0,0 +1 @@
+export { default } from './DropdownOption';

package/src/components/DropdownOptions/DropdownOptions.tsx

@@ -0,0 +1,102 @@
+import React from 'react';
+import styled from '@emotion/styled';
+import { css } from '@emotion/react';
+
+import { useDropdownContext } from '@components/Dropdown/Dropdown.context';
+import DropdownOption from '@components/DropdownOption';
+
+import { IDropdownItemsListProps } from './types';
+
+const DropdownOptionsBase = styled.ul<{ tabindex?: string }>`
+  position: absolute;
+  width: 100%;
+
+  list-style: none;
+
+  margin: 4px 0 0;
+  padding: 0;
+
+  background: #fff;
+  border-radius: 8px;
+
+  overflow-x: hidden;
+  overflow-y: auto;
+
+  z-index: 2;
+
+  filter: ${({ theme }) =>
+    `drop-shadow(-4px 4px 14px ${theme.colors.greyDarker14})`};
+  backdrop-filter: ${({ theme }) =>
+    `drop-shadow(-4px 4px 14px ${theme.colors.greyDarker14})`};
+`;
+
+const dropdownOptionButton = css`
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  font: inherit;
+  font-size: 0.813rem;
+  outline: inherit;
+  text-align: left;
+
+  width: 100%;
+  padding: 0;
+  margin: 0;
+
+  background: none;
+  color: inherit;
+  border: none;
+`;
+
+const noItemsMsg = { id: Number.NaN, value: 'No items' };
+
+const DropdownOptions = ({
+  ariaLabelledby,
+  id,
+  children,
+}: IDropdownItemsListProps) => {
+  const { onChange, activeItem } = useDropdownContext();
+
+  const childrenArray = React.Children.toArray(children).filter(Boolean);
+
+  const options = (childrenArray as React.ReactElement[]).map((child) => {
+    const isActive = activeItem?.value === child.props.value;
+
+    return React.cloneElement(
+      child,
+      {
+        ...child.props,
+        isActive,
+        'aria-selected': isActive,
+        onClick: onChange.bind(null, child.props.value),
+      },
+      <button type="button" css={dropdownOptionButton}>
+        {child.props.children || child.props.label || child.props.value}
+      </button>,
+    );
+  });
+
+  if (options.length === 0) {
+    options.push(
+      <DropdownOption
+        key={noItemsMsg.id}
+        value={''}
+        onClick={onChange.bind(null, '')}
+        aria-selected={false}>
+        <button css={dropdownOptionButton}>{noItemsMsg.value}</button>
+      </DropdownOption>,
+    );
+  }
+
+  return (
+    <DropdownOptionsBase
+      role="listbox"
+      tabindex="-1"
+      id={id}
+      aria-labelledby={ariaLabelledby}>
+      {options}
+    </DropdownOptionsBase>
+  );
+};
+
+export default DropdownOptions;

package/src/components/DropdownOptions/index.ts

@@ -0,0 +1,2 @@
+export { default } from './DropdownOptions';
+export type { IDropdownOption } from './types';

package/src/components/DropdownOptions/types.ts

@@ -0,0 +1,9 @@
+import { CommonProps } from '@global-types/emotion';
+
+export type IDropdownOption = Record<string, string | number>;
+
+export interface IDropdownItemsListProps extends CommonProps {
+  ariaLabelledby?: string;
+  id?: string;
+  children?: React.ReactNode;
+}

package/src/components/DropdownToggle/DropdownToggle.tsx

@@ -0,0 +1,147 @@
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+import { focusOutline } from '@styles/safari-focus-outline';
+import { IDropdownToggleProps, MultipleStylesProps } from './types';
+
+const multipleStyles = ({ theme, selectedCount = 0 }: MultipleStylesProps) => {
+  let borderColor = theme.colors.greyDropdownMain;
+  let borderColorFocused = theme.colors.greyDropdownFocused;
+  let backgroundColor = theme.colors.white;
+  if (selectedCount > 0) {
+    borderColor = theme.colors.blueDropdownWithSelectedItemsBorder;
+    borderColorFocused = theme.colors.blueDropdownWithSelectedItemsBorder;
+    backgroundColor = theme.colors.blueDropdownWithSelectedItems;
+  }
+
+  return css`
+    justify-content: space-between;
+    height: 40px;
+    padding: 11px 15px 9px 10px;
+    font-size: 14px;
+    font-weight: 500;
+    color: ${theme.colors.greyDropdownText};
+    border: 1px solid ${borderColor};
+    border-radius: 5px;
+    background: ${backgroundColor};
+    max-width: 250px;
+
+    &:focus {
+      color: ${theme.colors.greyDropdownText};
+      background: ${backgroundColor};
+      &::before {
+        border-color: ${borderColorFocused};
+      }
+    }
+
+    svg {
+      path {
+        stroke: ${theme.colors.greyDarker};
+      }
+    }
+  `;
+};
+
+export const DropdownToggleBase = styled.button<
+  Pick<
+    IDropdownToggleProps,
+    'colors' | 'isOpen' | 'disabled' | 'isMultiple' | 'selectedCount'
+  >
+>`
+  ${({ isMultiple, theme }) =>
+    isMultiple
+      ? focusOutline(theme, 'greyDropdownFocused', '5px')
+      : focusOutline(theme)}
+
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 10px;
+
+  position: relative;
+
+  color: ${({ colors, isOpen }) =>
+    isOpen ? colors?.[0] || 'initial' : 'initial'};
+
+  width: auto;
+  padding: 8px 14px;
+
+  font: inherit;
+  font-size: 13px;
+  text-align: left;
+  line-height: 18px;
+
+  border: none;
+  cursor: pointer;
+  outline: inherit;
+
+  border-radius: 12px;
+
+  background: ${({ isOpen, theme }) =>
+    isOpen
+      ? `linear-gradient(108.3deg, ${theme.colors.greyDarker} -0.36%, ${theme.colors.greyDark} 100%)`
+      : theme.colors.greyLighter};
+
+  &:disabled {
+    background: ${({ theme }) => theme.colors.grey};
+    cursor: default;
+  }
+
+  &:focus {
+    color: ${({ colors, theme }) => colors?.[0] || theme.colors.greyDarker};
+    background: ${({ isOpen, theme }) =>
+      isOpen
+        ? `linear-gradient(108.3deg, ${theme.colors.greyDarker} -0.36%, ${theme.colors.greyDark} 100%)`
+        : theme.colors.greyFocused};
+  }
+
+  svg {
+    path {
+      stroke: ${({ colors, theme }) => colors?.[0] || theme.colors.greyDarker};
+    }
+  }
+
+  ${({ isMultiple, selectedCount, theme }) =>
+    isMultiple &&
+    multipleStyles({
+      theme,
+      selectedCount,
+    })}
+`;
+
+const DropdownToggle = ({
+  onClick,
+  onFocus,
+  isOpen,
+  isMultiple,
+  selectedCount,
+  disabled,
+  children,
+  ariaLabelledby,
+  ariaControls,
+  colors,
+  className,
+}: IDropdownToggleProps) => (
+  <DropdownToggleBase
+    className={className}
+    colors={colors}
+    isOpen={isOpen}
+    isMultiple={isMultiple}
+    selectedCount={selectedCount}
+    onClick={(e) => {
+      // Safari doesn't support focus on buttons 🤔
+      (e.currentTarget as HTMLButtonElement).focus();
+      onClick && onClick(e);
+    }}
+    onFocus={onFocus}
+    disabled={disabled}
+    role="combobox"
+    aria-labelledby={ariaLabelledby}
+    aria-controls={ariaControls}
+    aria-expanded={isOpen}
+    aria-haspopup="listbox">
+    {children}
+  </DropdownToggleBase>
+);
+
+export default DropdownToggle;

package/src/components/DropdownToggle/index.ts

@@ -0,0 +1 @@
+export { default } from './DropdownToggle';

package/src/components/DropdownToggle/types.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Theme } from '@emotion/react';
+import { CommonProps } from '@global-types/emotion';
+
+export interface IDropdownToggleProps extends CommonProps {
+  onClick: (e: React.MouseEvent<HTMLElement>) => void;
+  onFocus: (e: React.FocusEvent<HTMLButtonElement, Element>) => void;
+  isOpen: boolean;
+  isMultiple?: boolean;
+  disabled?: boolean;
+  children?: React.ReactNode;
+  ariaLabelledby: string;
+  ariaControls: string;
+  colors?: Array<string | undefined>;
+  className?: string;
+  selectedCount?: number;
+}
+
+export interface MultipleStylesProps {
+  theme: Theme;
+  selectedCount?: number;
+}

package/src/components/Form/Form.stories.mdx

@@ -0,0 +1,118 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+
+import Form from '@components/Form';
+import FormGroup from '@components/FormGroup';
+import Input from '@components/Input';
+
+<Meta title="Forms/About" />
+
+# The Form
+
+The Form components rely on the
+[React hook forms](https://react-hook-form.com/api).
+
+With that, the `register` is mandatory for the `TextField` to work.
+
+Ex.:
+
+```javascript
+const { register } = useForm<T>();
+...
+<TextField register={register} />
+```
+
+And for the errors we use the `useForm` hook:
+
+```javascript
+const { formState: { errors } } = useForm<T>();
+...
+<TextField register={register} errors={errors[field name]} />
+```
+
+The `TextField` component can render an input or textarea:
+
+input: `<TextField {...} />` textarea: `<TextField multirow {...} />`
+
+To handle the layout of the forms we have some structural components:
+
+`Form`, `FormGroup` and `FormAction`
+
+A Form example:
+
+```javascript
+// The useForm needs to know the inputs that we have
+type Inputs = {
+  name: string;
+  lastname: string;
+  address: string;
+};
+
+const Sample = () => {
+  const { register, handleSubmit, formState: { errors } } = useForm<Inputs>();
+
+  const onSubmit: SubmitHandler<Inputs> = (data) => console.log(data);
+
+  return (
+    <Form onSubmit={handleSubmit(onSubmit)}>
+
+      // block Inputs
+      <FormGroup>
+        <TextField
+          placeholder="Name" label="Name" name="name" register={register}
+          validationSchema={{
+            required: 'Required',
+          }} errors={errors?.name} />
+
+        <TextField
+          placeholder="Last name"
+          label="Last name"
+          name="lastname"
+          register={register}
+          validationSchema={{
+            required: 'Required',
+          }}
+          errors={errors?.lastname}
+          success
+          helperText={'Success'}
+        />
+      </FormGroup>
+
+      <FormGroup>
+        <TextField
+          placeholder="Address"
+          label="Address"
+          name="address"
+          register={register}
+          validationSchema={{
+            required: 'is required',
+            minLength: {
+              value: 3,
+              message: 'Please enter a minimum of 3 characters',
+            },
+          }}
+          errors={errors?.address}
+          helperText={'Basic text'}
+        />
+      </FormGroup>
+
+      <FormGroup>
+          <TextField
+            multirow
+            rows={10}
+            label="Textarea"
+            name="textarea"
+            register={register}
+            validationSchema={{
+              required: 'Required',
+            }}
+            helperText="some nice text"
+          />
+        </FormGroup>
+
+      <FormAction>
+        <button>Submit</button>
+      </FormAction>
+    </Form>
+);
+}
+```