@soul-refiner/design-system 0.1.5 → 0.1.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soul-refiner/design-system",
-  "version": "0.1.5",
+  "version": "0.1.7",
   "main": "src/index.ts",
   "license": "MIT",
   "publishConfig": {

package/src/components/actions/dropdown/dropdown.tsx

@@ -0,0 +1,392 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Box, Checkbox, P } from 'components';
+
+type NativeProps = Pick<
+  React.HTMLAttributes<HTMLDivElement>,
+  | 'children'
+  | 'onBlur'
+  | 'onBlurCapture'
+  | 'onClick'
+  | 'onChange'
+  | 'onMouseDown'
+  | 'onMouseDownCapture'
+  | 'onMouseEnter'
+  | 'onMouseLeave'
+  | 'onMouseOut'
+  | 'onMouseOver'
+>;
+
+export interface DropdownProps extends NativeProps, React.PropsWithChildren {
+  checkbox?: boolean;
+  closeOnChange?: boolean;
+  closeOnBlur?: boolean;
+  defaultValue?: string | string[];
+  disabled?: boolean;
+  hasArrow?: boolean;
+  maintainState?: boolean;
+  multiple?: boolean;
+  offset?: [number, number];
+  open?: 'right' | 'left';
+  options?: (Omit<DropdownOptionProps, 'selected' | 'onClick'> | 'break')[];
+  sx?: string;
+  trigger: React.ReactElement;
+}
+
+const Dropdown = ({
+  checkbox,
+  children,
+  closeOnChange = true,
+  closeOnBlur = true,
+  defaultValue = '',
+  disabled = false,
+  hasArrow,
+  maintainState = true,
+  multiple,
+  offset = [0, 16],
+  onChange,
+  open: openDirection = 'right',
+  options,
+  sx,
+  trigger,
+  ...rest
+}: DropdownProps) => {
+  const id = React.useId();
+  const wrapperRef = React.useRef<HTMLDivElement>(null);
+  const optionsRef = React.useRef<HTMLDivElement>(null);
+  const [open, setOpen] = React.useState(false);
+  const [selected, setSelected] = React.useState(() =>
+    defaultValue ? defaultValue : multiple ? [] : ''
+  );
+
+  React.useEffect(() => {
+    if (disabled) {
+      setOpen(false);
+    }
+  }, [disabled]);
+
+  const handleOpen = () => {
+    if (disabled) {
+      return;
+    }
+    setOpen((prev) => !prev);
+  };
+
+  const handleBlur = (event: React.FocusEvent) => {
+    if (
+      closeOnBlur &&
+      wrapperRef?.current &&
+      !wrapperRef?.current?.contains(event.relatedTarget)
+    ) {
+      setOpen(false);
+    }
+  };
+
+  const handleChangeSingle = (event: React.MouseEvent<HTMLDivElement>) => {
+    event.stopPropagation();
+    const value =
+      (event.target as HTMLDivElement).getAttribute('data-value') ?? '';
+
+    if (selected !== value) {
+      setSelected(value);
+    } else {
+      setSelected('');
+    }
+    if (closeOnChange) {
+      setOpen(false);
+    }
+    if (onChange) onChange(event);
+  };
+
+  const handleChangeMultiple = (event: React.MouseEvent<HTMLDivElement>) => {
+    event.stopPropagation();
+    const value =
+      (event.target as HTMLDivElement).getAttribute('data-value') ?? '';
+
+    if (Array.isArray(selected) && selected.includes(value)) {
+      setSelected((prev) =>
+        (prev as string[]).filter((item) => item !== value)
+      );
+    } else {
+      setSelected((prev) => [value, ...prev]);
+    }
+    if (closeOnChange) {
+      setOpen(false);
+    }
+    if (onChange) onChange(event);
+  };
+
+  const handleChange = multiple ? handleChangeMultiple : handleChangeSingle;
+
+  const isSelected = (value: string) =>
+    maintainState && multiple ? selected.includes(value) : value === selected;
+
+  /**
+   * allow for the API to accept children as options
+   * or options prop
+   */
+  let dropdownOptions: React.ReactElement[] | null | undefined = null;
+  if (children) {
+    dropdownOptions = React.Children.map(children, (child) => {
+      let props: Partial<DropdownOptionProps> & {
+        label: string;
+        value: string;
+      };
+
+      if (React.isValidElement(child)) {
+        // eslint is okay bc deconstruction removes field
+        // eslint-disable-next-line
+        const { onClick, ...possibleProps } = child.props;
+        props = possibleProps;
+
+        return (
+          <Option
+            key={props.value}
+            checkbox={!!checkbox}
+            onClick={handleChange}
+            selected={isSelected(props.value)}
+            {...props}
+          />
+        );
+      } else {
+        return null;
+      }
+    });
+  }
+
+  if (options) {
+    dropdownOptions = options.map((option, index) => {
+      if (typeof option === 'string' && option === 'break')
+        return <Spacer key={`${id}-spacer-${index}`} />;
+      return (
+        <Option
+          key={option.value}
+          checkbox={!!checkbox}
+          onClick={handleChange}
+          selected={isSelected(option.value)}
+          {...option}
+        />
+      );
+    });
+  }
+
+  return (
+    <Wrapper
+      $sx={sx}
+      tabIndex={0}
+      ref={wrapperRef}
+      onBlurCapture={handleBlur}
+      {...rest}
+    >
+      {React.cloneElement(
+        trigger,
+        typeof trigger.type === 'string'
+          ? { onClick: handleOpen }
+          : { isDropdownOpen: open, onClick: handleOpen }
+      )}
+      {open && (
+        <Container
+          $hasArrow={hasArrow}
+          $offset={offset}
+          $openDirection={openDirection}
+          ref={optionsRef}
+        >
+          {dropdownOptions}
+        </Container>
+      )}
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled.div<{ $sx?: string }>`
+  position: relative;
+  display: block;
+  outline: none;
+  ${({ $sx }) => ($sx ? $sx : '')}
+`;
+
+const Container = styled.div<{
+  $hasArrow?: boolean;
+  $offset?: [number, number];
+  $openDirection: 'left' | 'right';
+}>`
+  z-index: 1;
+  background-color: var(--color-white);
+  position: absolute;
+  width: max-content;
+  z-index: 100;
+  outline: none;
+  cursor: pointer;
+  box-shadow: var(--elevation-2);
+  border-radius: 8px;
+
+  & > div:first-of-type {
+    border-radius: 8px 8px 0px 0px;
+  }
+
+  & > div:last-of-type {
+    border-radius: 0px 0px 8px 8px;
+  }
+
+  ${({ $openDirection }) => ($openDirection === 'left' ? 'right: 100%;' : '')}
+
+  ${({ $hasArrow, $offset }) =>
+    $hasArrow
+      ? `
+    &:before {
+      content: '';
+      position: absolute;
+      width: 15px;
+      height: 15px;
+      transform: rotate(45deg) translate(${($offset?.[0] || 0) + 8}px, ${
+          ($offset?.[1] || 0) - 32
+        }px);
+      background-color: var(--color-white);
+    }
+    `
+      : ''}
+  ${({ $offset }) =>
+    $offset ? `transform: translate(${$offset[0]}px, ${$offset[1]}px);` : ''}
+`;
+
+export interface DropdownOptionProps {
+  checkbox?: boolean;
+  color?: string;
+  disabled?: boolean;
+  icon?: React.ReactElement;
+  label: React.ReactNode;
+  onClick?: (event: React.MouseEvent<HTMLDivElement>) => void | undefined;
+  selected: boolean;
+  sublabel?: string;
+  sx?: string;
+  value: string;
+}
+
+const Option = ({
+  checkbox,
+  disabled,
+  icon,
+  label,
+  onClick,
+  selected,
+  sublabel,
+  sx,
+  value,
+}: DropdownOptionProps) => {
+  return (
+    <OptionWrapper
+      data-value={value}
+      onClick={!disabled ? onClick : undefined}
+      $disabled={disabled}
+      $hasCheckbox={!!checkbox}
+      $hasSublabel={!!sublabel}
+      $selected={selected}
+      $sx={sx}
+    >
+      {checkbox ? <Checkbox selected={selected} /> : icon}
+      <Box $dir="column" $display="flex">
+        <P
+          $color="grey-4"
+          $fontSize={14}
+          $lineHeight={20}
+          $mediumBold
+          $textClampLines={1}
+        >
+          {label}
+        </P>
+        {sublabel && (
+          <P
+            $color="grey-4"
+            $fontSize={12}
+            $lineHeight={16}
+            $textClampLines={1}
+          >
+            {sublabel}
+          </P>
+        )}
+      </Box>
+    </OptionWrapper>
+  );
+};
+
+Option.displayName = 'Dropdown.Option';
+Dropdown.Option = Option;
+
+const OptionWrapper = styled.div<{
+  $disabled?: boolean;
+  $hasCheckbox?: boolean;
+  $hasSublabel?: boolean;
+  $selected?: boolean;
+  $sx?: string;
+}>`
+  position: relative;
+  z-index: 1;
+  padding: ${({ $hasSublabel }) => ($hasSublabel ? 10 : 12)}px 16px;
+  user-select: none;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+
+  & > * {
+    pointer-events: none;
+  }
+
+  ${({ $disabled, $selected, $hasCheckbox }) => {
+    if ($disabled) {
+      return `cursor: initial;
+      color: var(--color-grey-7);
+      background-color: var(--color-grey-10);`;
+    }
+
+    if ($hasCheckbox) {
+      return `&:hover {
+        background-color: var(--color-grey-10);
+      }`;
+    }
+
+    if ($selected) {
+      return `
+      background-color: var(--color-grey-9);
+      &:active {
+        background-color: var(--color-grey-8);
+      }`;
+    }
+
+    return `
+    &:hover {
+      background-color: var(--color-grey-10);
+    }
+
+    &:active {
+      background-color: var(--color-grey-8);
+    }
+    `;
+  }}
+  ${({ $sx }) => ($sx ? $sx : '')}
+`;
+
+export interface DropdownSpacerProps {
+  sx?: string;
+}
+
+const Spacer = ({ sx }: DropdownSpacerProps) => {
+  return <SpacerWrapper $sx={sx} />;
+};
+
+Spacer.displayName = 'Dropdown.Spacer';
+Dropdown.Spacer = Spacer;
+
+const SpacerWrapper = styled.div<{
+  $sx?: string;
+}>`
+  width: 100%;
+  height: 1px;
+  background-color: var(--color-grey-8);
+
+  &:hover {
+    appearance: none;
+  }
+  ${({ $sx }) => ($sx ? $sx : '')}
+`;
+
+export { Dropdown };

package/src/components/actions/dropdown/index.ts

@@ -0,0 +1,6 @@
+export { Dropdown } from './dropdown';
+export type {
+  DropdownOptionProps,
+  DropdownProps,
+  DropdownSpacerProps,
+} from './dropdown';

package/src/components/actions/index.ts

@@ -1,2 +1,8 @@
 export { Button } from './button';
 export type { ButtonProps } from './button';
+export { Dropdown } from './dropdown';
+export type {
+  DropdownOptionProps,
+  DropdownProps,
+  DropdownSpacerProps,
+} from './dropdown';

package/src/components/feedback/index.ts

@@ -2,5 +2,7 @@ export { Banner } from './banner';
 export type { BannerProps } from './banner';
 export { Loader } from './loader';
 export type { LoaderProps } from './loader';
+export { Notification } from './notification';
+export type { NotificationProps } from './notification';
 export { Toast } from './toast';
 export type { ToastProps } from './toast';

package/src/components/feedback/notification/index.ts

@@ -0,0 +1,2 @@
+export { Notification } from './notification';
+export type { NotificationProps } from './notification';

package/src/components/iconography/avatar/avatar.tsx

@@ -14,7 +14,7 @@ import {
 } from './icons';
 
 type NativeProps = Pick<
-  React.HTMLAttributes<HTMLAnchorElement>,
+  React.HTMLAttributes<any>,
   | 'onBlur'
   | 'onBlurCapture'
   | 'onClick'
@@ -43,8 +43,18 @@ type Status =
   | 'declined'
   | 'approved';
 
-type Size = 96 | 72 | 64 | 56 | 48 | 40 | 36 | 32 | 24;
-type SizeStrings = '96' | '72' | '64' | '56' | '48' | '40' | '36' | '32' | '24';
+type Size = 96 | 72 | 64 | 56 | 48 | 40 | 36 | 32 | 24 | 16;
+type SizeStrings =
+  | '96'
+  | '72'
+  | '64'
+  | '56'
+  | '48'
+  | '40'
+  | '36'
+  | '32'
+  | '24'
+  | '16';
 
 export interface AvatarProps extends NativeProps {
   as?: React.ElementType;
@@ -62,7 +72,7 @@ export interface AvatarProps extends NativeProps {
  */
 const iconReference: Record<
   Status | 'none',
-  React.JSXElementConstructor<SVGElement>
+  React.JSXElementConstructor<any>
 > = {
   approved: Approved,
   busy: Busy,
@@ -85,6 +95,7 @@ const iconSize: Record<SizeStrings, number> = {
   '36': 14,
   '32': 14,
   '24': 12,
+  '16': 8,
 };
 
 const iconOffsetX: Record<SizeStrings, number> = {
@@ -97,6 +108,7 @@ const iconOffsetX: Record<SizeStrings, number> = {
   '36': -12,
   '32': -12,
   '24': -10,
+  '16': -8,
 };
 
 const iconOffsetY: Record<SizeStrings, number> = {
@@ -109,6 +121,7 @@ const iconOffsetY: Record<SizeStrings, number> = {
   '36': -2,
   '32': -2,
   '24': -2,
+  '16': -1,
 };
 
 /**

package/src/components/index.ts

@@ -2,4 +2,5 @@ export * from './actions';
 export * from './atoms';
 export * from './feedback';
 export * from './iconography';
+export * from './input';
 export * from './surfaces';

package/src/components/input/checkbox/checkbox.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Styles } from 'common';
+import { BoxProps } from 'components';
+import { Checkmark } from 'icons';
+
+type NativeProps = Pick<
+  React.HTMLAttributes<HTMLDivElement>,
+  | 'onClick'
+  | 'onChange'
+  | 'onMouseDown'
+  | 'onMouseDownCapture'
+  | 'onMouseEnter'
+  | 'onMouseLeave'
+  | 'onMouseOut'
+  | 'onMouseOver'
+>;
+
+export interface CheckboxProps extends NativeProps {
+  disabled?: boolean;
+  selected: boolean;
+}
+
+export const Checkbox = ({ disabled, selected, ...rest }: CheckboxProps) => {
+  return (
+    <Box
+      $align="center"
+      $disabled={!!disabled}
+      $display="flex"
+      $justify="center"
+      $selected={selected}
+      {...rest}
+    >
+      {selected && <Checkmark color="white" />}
+    </Box>
+  );
+};
+
+const Box = styled.div<
+  {
+    $disabled: boolean;
+    $selected: boolean;
+  } & BoxProps
+>`
+  display: flex;
+  width: 20px;
+  height: 20px;
+  border-radius: 4px;
+  cursor: pointer;
+  box-sizing: border-box;
+
+  ${({ $selected }) =>
+    $selected
+      ? `background-color: var(--color-primary-blue-2);
+    border: 1px solid var(--color-primary-blue-2);`
+      : 'border: 1px solid var(--color-grey-8);'}
+  ${Styles.flex}
+`;

package/src/components/input/checkbox/index.ts

@@ -0,0 +1,2 @@
+export { Checkbox } from './checkbox';
+export type { CheckboxProps } from './checkbox';

package/src/components/input/index.ts

@@ -0,0 +1,4 @@
+export { Checkbox } from './checkbox';
+export type { CheckboxProps } from './checkbox';
+export { Radio } from './radio';
+export type { RadioProps } from './radio';

package/src/components/input/radio/index.ts

@@ -0,0 +1,2 @@
+export { Radio } from './radio';
+export type { RadioProps } from './radio';

package/src/components/input/radio/radio.tsx

@@ -0,0 +1,140 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Box, BoxProps, P } from 'components';
+
+type NativeProps = Pick<
+  React.HTMLAttributes<HTMLInputElement>,
+  | 'onClick'
+  | 'onChange'
+  | 'onMouseDown'
+  | 'onMouseDownCapture'
+  | 'onMouseEnter'
+  | 'onMouseLeave'
+  | 'onMouseOut'
+  | 'onMouseOver'
+>;
+
+export interface RadioProps extends NativeProps {
+  checked: boolean;
+  disabled?: boolean;
+  label?: string;
+  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  name?: string;
+  reversed?: boolean;
+  sx?: string;
+  value: string;
+}
+
+const Radio = ({
+  checked = false,
+  disabled,
+  label,
+  onChange,
+  reversed,
+  sx,
+  value,
+  ...rest
+}: RadioProps) => {
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    event.stopPropagation();
+    onChange(event);
+  };
+
+  return (
+    <Label $disabled={disabled} $reversed={reversed} $sx={sx}>
+      <Input
+        checked={checked}
+        disabled={disabled}
+        onChange={handleChange}
+        type="radio"
+        value={value}
+        {...rest}
+      />
+      <P as="span">{label}</P>
+    </Label>
+  );
+};
+
+const Label = styled.label<{
+  $disabled?: boolean;
+  $reversed?: boolean;
+  $sx?: string;
+}>`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  user-select: none;
+
+  ${({ $disabled }) =>
+    $disabled
+      ? `
+    & > * {
+      color: var(--color-grey-7);
+    }`
+      : `
+    cursor: pointer;
+    &:hover {
+      input {
+        border-color: var(--color-primary-blue-2);
+      }
+    }`}
+  flex-direction: ${({ $reversed }) => ($reversed ? 'row-reverse' : 'row')};
+  ${({ $sx }) => ($sx ? $sx : '')}
+`;
+
+const Input = styled.input`
+  appearance: none;
+  position: relative;
+  height: 20px;
+  width: 20px;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 0;
+  background-color: var(--color-white);
+  border: 1px solid var(--color-grey-8);
+  cursor: pointer;
+  border-radius: 50%;
+
+  &:checked {
+    border-color: var(--color-primary-blue-2);
+    &::after {
+      content: '';
+      width: 10px;
+      height: 10px;
+      border-radius: 50%;
+      background-color: var(--color-primary-blue-2);
+    }
+  }
+
+  &:disabled {
+    &:checked {
+      border-color: var(--color-grey-8);
+      &::after {
+        background-color: var(--color-grey-7);
+      }
+    }
+  }
+`;
+
+export interface RadioGroupProps extends React.PropsWithChildren, BoxProps {
+  name: string;
+  sx?: string;
+}
+
+const RadioGroup = ({ children, name, ...rest }: RadioGroupProps) => {
+  return (
+    <Box {...rest}>
+      {React.Children.map(children, (child) => {
+        if (React.isValidElement(child))
+          return <Radio key={child.key} name={name} {...child.props} />;
+      })}
+    </Box>
+  );
+};
+
+Radio.Group = RadioGroup;
+RadioGroup.displayName = 'Radio.Group';
+
+export { Radio };

package/tsconfig.json

@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
     "target": "es2022",
-    "lib": ["es2022", "ESNext"],
+    "lib": ["es2022", "ESNext", "DOM"],
     "module": "ES6",
     "jsx": "react",
     "strict": true,