@soul-refiner/design-system 0.1.10 → 0.1.12

package/package.json

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

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

@@ -134,7 +134,7 @@ const Dropdown = ({
       };
 
       if (React.isValidElement(child)) {
-        // eslint is okay bc deconstruction removes field
+        // eslint ignore is okay bc deconstruction removes field
         // eslint-disable-next-line
         const { onClick, ...possibleProps } = child.props;
         props = possibleProps;

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

@@ -0,0 +1 @@
+export {} from '';

package/src/components/actions/toggle/toggle.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Box, P } from 'components';
+
+export interface ToggleProps {
+  checked?: boolean;
+  label?: string;
+  onChange?: () => void;
+}
+
+export const Toggle = ({ checked, label, onChange }: ToggleProps) => {
+  const status =
+    checked === undefined ? 'indeterminate' : checked ? 'checked' : 'unchecked';
+
+  return (
+    <Box $align="center" $gap={8}>
+      <Wrapper as="label" onClick={onChange}>
+        <Input checked={!!checked} onChange={onChange} type="checkbox" />
+        <Slider $status={status} />
+      </Wrapper>
+      {label && <P $fontSize={14}>{label}</P>}
+    </Box>
+  );
+};
+
+const Wrapper = styled.label`
+  width: 28px;
+  height: 16px;
+  position: relative;
+  display: inline-block;
+`;
+
+const Input = styled.input`
+  opacity: 0;
+  width: 0;
+  height: 0;
+`;
+
+const Slider = styled.span<{
+  $status: 'indeterminate' | 'checked' | 'unchecked';
+}>`
+  position: absolute;
+  cursor: pointer;
+  top: 0px;
+  bottom: 0px;
+  right: 0px;
+  left: 0px;
+  border-radius: 18px;
+  ${({ $status }) =>
+    $status === 'checked'
+      ? `
+    background-color: var(--color-primary-blue-2);
+    &:before {
+      transform: translateX(12px);
+    }`
+      : $status === 'unchecked'
+      ? 'background-color: var(--color-grey-8);'
+      : `
+    background-color: var(--color-yellow-5);
+    &:before {
+      transform: translateX(6px);
+    }
+    `}
+
+  &:before {
+    position: absolute;
+    content: '';
+    height: 12px;
+    width: 12px;
+    left: 2px;
+    bottom: 2px;
+    background-color: var(--color-white);
+    border-radius: 50%;
+  }
+`;

package/src/components/actions/upload/upload.tsx

@@ -256,8 +256,6 @@ const Wrapper = styled.div<{
   border-radius: ${({ $size }) => ($size === 'large' ? '16px' : '8px')};
 `;
 
-const TextWrapper = styled.div``;
-
 const Input = styled.input`
   display: none;
 `;

package/src/components/index.ts

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

package/src/components/input/filter/filter.tsx

@@ -0,0 +1,305 @@
+import React from 'react';
+import styled, { css } from 'styled-components';
+import { BoxProps, P } from 'components';
+import { ChevronDown, ChevronUp } from 'icons';
+import { Styles } from 'common';
+
+/********************************************************
+ *  Filter
+ */
+
+type FilterTriggerTypes = 'outlined' | 'pill' | 'labeled' | 'avatar' | 'text';
+
+export interface FilterProps extends React.PropsWithChildren {
+  closeOnBlur?: boolean;
+  defaultValue?: string;
+  disabled?: boolean;
+  graphic?: React.ReactElement;
+  label?: string;
+  sx?: string;
+  triggerType: FilterTriggerTypes;
+  value: string;
+}
+
+const Filter = ({
+  closeOnBlur = true,
+  children,
+  disabled,
+  graphic,
+  label,
+  sx,
+  triggerType,
+  value,
+}: FilterProps) => {
+  const wrapperRef = React.useRef<HTMLDivElement>(null);
+  const optionsRef = React.useRef<HTMLDivElement>(null);
+  const [open, setOpen] = React.useState(false);
+
+  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);
+    }
+  };
+
+  return (
+    <Wrapper $sx={sx} tabIndex={0} ref={wrapperRef} onBlurCapture={handleBlur}>
+      <FilterTrigger
+        disabled={disabled}
+        graphic={graphic}
+        label={label}
+        onClick={handleOpen}
+        open={open}
+        type={triggerType}
+        value={value}
+      />
+      {open && <Container ref={optionsRef}>{children}</Container>}
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled.div<{ $sx?: string }>`
+  position: relative;
+  display: block;
+  outline: none;
+  ${({ $sx }) => ($sx ? $sx : '')}
+`;
+
+const Container = styled.div`
+  position: absolute;
+  width: max-content;
+  z-index: 100;
+  outline: none;
+`;
+
+/********************************************************
+ *  Triggers
+ */
+
+const textProps: any = {
+  as: 'span',
+  $fontSize: 14,
+  $lineHeight: 20,
+};
+
+const wrapperProps: any = {
+  $align: 'center',
+  $dir: 'row',
+  $gap: 16,
+};
+
+export interface FilterTriggerProps {
+  disabled?: boolean;
+  graphic?: React.ReactElement;
+  label?: string;
+  onClick?: (event: React.MouseEvent) => void;
+  open: boolean;
+  type: FilterTriggerTypes;
+  value: string;
+}
+
+const FilterTrigger = ({
+  disabled,
+  graphic,
+  label,
+  onClick,
+  open,
+  type,
+  value,
+}: FilterTriggerProps) => {
+  if (type === 'pill') {
+    return (
+      <Pill disabled={disabled} onClick={onClick} {...wrapperProps}>
+        {graphic}
+        <P {...textProps}>{value}</P>
+        {!graphic && (open ? <ChevronUp /> : <ChevronDown />)}
+      </Pill>
+    );
+  }
+
+  if (type === 'labeled') {
+    return (
+      <Labeled disabled={disabled} onClick={onClick} {...wrapperProps}>
+        <P {...textProps}>{label}</P>
+        <LabelSeparator />
+        <P $color="primary-blue-2" $mediumBold {...textProps}>
+          {value}
+        </P>
+        {open ? <ChevronUp /> : <ChevronDown />}
+      </Labeled>
+    );
+  }
+
+  if (type === 'avatar') {
+    return (
+      <Avatar
+        $align="center"
+        $dir="row"
+        $gap={8}
+        disabled={disabled}
+        onClick={onClick}
+      >
+        {graphic}
+        {open ? <ChevronUp /> : <ChevronDown />}
+      </Avatar>
+    );
+  }
+
+  if (type === 'text') {
+    return (
+      <Text disabled={disabled} onClick={onClick} {...wrapperProps}>
+        <P $color="grey-4" $semiBold {...textProps}>
+          {label}:
+        </P>
+        <P
+          $color="primary-blue-2"
+          $semiBold
+          className="filter-trigger-value"
+          {...textProps}
+        >
+          {value}
+        </P>
+        {open ? <ChevronUp /> : <ChevronDown />}
+      </Text>
+    );
+  }
+
+  return (
+    <Outlined disabled={disabled} onClick={onClick} {...wrapperProps}>
+      {graphic}
+      <P {...textProps}>{value}</P>
+      {!graphic && (open ? <ChevronUp /> : <ChevronDown />)}
+    </Outlined>
+  );
+};
+
+Filter.Trigger = FilterTrigger;
+FilterTrigger.displayName = 'Filter.Trigger';
+
+const sharedStyles = css`
+  display: flex;
+  padding: 10px 16px;
+  border: none;
+  outline: none;
+  cursor: pointer;
+  user-select: none;
+
+  &:disabled {
+    background-color: var(--color-grey-9);
+    border: 1px solid var(--color-grey-8);
+    pointer-events: none;
+
+    & > * {
+      color: var(--color-grey-7);
+      fill: var(--color-grey-7);
+    }
+  }
+`;
+
+const Outlined = styled.button<BoxProps>`
+  ${sharedStyles}
+  ${Styles.flex}
+  border: 1px solid var(--color-grey-8);
+  border-radius: 8px;
+  background-color: var(--color-white);
+
+  &:hover {
+    background-color: var(--color-grey-9);
+  }
+`;
+
+const Pill = styled.button<BoxProps>`
+  ${sharedStyles}
+  ${Styles.flex}
+  border-radius: 24px;
+  background-color: var(--color-primary-blue-4);
+
+  & > * {
+    color: var(--color-primary-blue-2);
+    fill: currentColor;
+
+    &:hover {
+      color: var(--color-primary-blue-1);
+    }
+  }
+`;
+
+const Labeled = styled.button<BoxProps>`
+  ${sharedStyles}
+  ${Styles.flex}
+  border-radius: 24px;
+  border: 1px solid var(--color-grey-8);
+  background-color: var(--color-white);
+
+  &:hover {
+    background-color: var(--color-grey-9);
+  }
+`;
+
+const LabelSeparator = styled.div`
+  width: 1px;
+  height: 20px;
+  background-color: var(--color-grey-8);
+`;
+
+const Avatar = styled.button<BoxProps>`
+  ${sharedStyles}
+  ${Styles.flex}
+  padding: 4px 16px;
+  border-radius: 32px;
+
+  &:hover {
+    background-color: var(--color-grey-10);
+  }
+
+  &:active {
+    background-color: var(--color-grey-9);
+  }
+
+  &:disabled {
+    img {
+      opacity: 0.5;
+    }
+  }
+`;
+
+const Text = styled.button<BoxProps>`
+  ${sharedStyles}
+  ${Styles.flex}
+  gap: 8px;
+  background-color: transparent;
+  border-radius: 32px;
+
+  &:hover {
+    background-color: var(--color-grey-10);
+  }
+
+  &:active {
+    & > .filter-trigger-value {
+      color: var(--color-primary-blue-0);
+    }
+  }
+
+  &:disabled {
+    background-color: transparent;
+    border: 1px solid transparent;
+  }
+`;
+
+export { Filter };

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

@@ -0,0 +1,2 @@
+export { Filter } from './filter';
+export type { FilterProps, FilterTriggerProps } from './filter';

package/src/components/input/index.ts

@@ -1,4 +1,6 @@
 export { Checkbox } from './checkbox';
 export type { CheckboxProps } from './checkbox';
+export { Filter } from './filter';
+export type { FilterProps, FilterTriggerProps } from './filter';
 export { Radio } from './radio';
 export type { RadioProps } from './radio';

package/src/components/navigation/index.ts

@@ -0,0 +1,2 @@
+export { Tabs } from './tabs';
+export type { TabProps } from './tabs';

package/src/components/navigation/tabs/index.ts

@@ -0,0 +1,2 @@
+export { Tabs } from './tabs';
+export type { TabProps } from './tabs';

package/src/components/navigation/tabs/tabs.tsx

@@ -0,0 +1,246 @@
+import React from 'react';
+import styled from 'styled-components';
+import { P } from 'components';
+
+type TabColors =
+  | 'blue'
+  | 'grey'
+  | 'green'
+  | 'mint'
+  | 'orange'
+  | 'ocean'
+  | 'pink'
+  | 'purple'
+  | 'red'
+  | 'yellow';
+type TabSizes = 'small' | 'medium' | 'large';
+
+const colorLookup: Record<TabColors, Record<'icon' | 'bg', string>> = {
+  blue: {
+    bg: 'var(--color-hue-blue-2)',
+    icon: 'var(--color-hue-blue-1)',
+  },
+  green: {
+    bg: 'var(--color-green-8)',
+    icon: 'var(--color-green-2)',
+  },
+  grey: {
+    bg: 'var(--color-grey-9)',
+    icon: 'var(--color-grey-7)',
+  },
+  mint: {
+    bg: 'var(--color-hue-mint-2)',
+    icon: 'var(--color-hue-mint-1)',
+  },
+  ocean: {
+    bg: 'var(--color-hue-ocean-2)',
+    icon: 'var(--color-hue-ocean-1)',
+  },
+  orange: {
+    bg: 'var(--color-hue-orange-2)',
+    icon: 'var(--color-hue-orange-1)',
+  },
+  pink: {
+    bg: 'var(--color-hue-pink-2)',
+    icon: 'var(--color-hue-pink-1)',
+  },
+  purple: {
+    bg: 'var(--color-hue-purple-2)',
+    icon: 'var(--color-hue-purple-1)',
+  },
+  red: {
+    bg: 'var(--color-red-9)',
+    icon: 'var(--color-red-3)',
+  },
+  yellow: {
+    bg: 'var(--color-yellow-8)',
+    icon: 'var(--color-yellow-3)',
+  },
+};
+
+export interface TabProps {
+  activeIndex: number;
+  items: {
+    color?: TabColors;
+    disabled?: boolean;
+    icon?: React.ReactElement;
+    label: string;
+  }[];
+  onChange: (index: number) => void;
+  size?: TabSizes;
+  sx?: string;
+}
+
+const Tabs = ({
+  activeIndex,
+  items,
+  onChange,
+  size = 'large',
+  sx,
+}: TabProps) => {
+  const id = React.useId();
+
+  return (
+    <Wrapper $sx={sx}>
+      {items.map((item, index) => (
+        <Item
+          active={activeIndex === index}
+          color={item?.color}
+          disabled={item?.disabled}
+          key={id + index.toString(36)}
+          icon={item?.icon}
+          label={item.label}
+          onClick={() => onChange(index)}
+          size={size}
+        />
+      ))}
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled.ul<{
+  $sx?: string;
+}>`
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: flex-end;
+  justify-content: center;
+  gap: 16px;
+  margin: 0px;
+  padding: 0px;
+
+  ${({ $sx }) => ($sx ? $sx : '')}
+`;
+
+export interface TabsItemProps {
+  active: boolean;
+  color?: TabColors;
+  disabled?: boolean;
+  icon?: React.ReactElement;
+  label: string;
+  onClick: () => void;
+  size: TabSizes;
+}
+
+const Item = ({
+  active,
+  color,
+  disabled,
+  icon,
+  label,
+  onClick,
+  size = 'large',
+}: TabsItemProps) => {
+  const inputColor = disabled ? 'grey' : color ? color : 'blue';
+  const iconColor = colorLookup[inputColor].icon;
+  const bgColor = colorLookup[inputColor].bg;
+  const fontSize = size === 'large' ? 16 : size === 'medium' ? 14 : 12;
+  const lineHeight = size === 'large' ? 24 : size === 'medium' ? 20 : 16;
+
+  return (
+    <Li
+      $active={active}
+      $color={iconColor}
+      $disabled={disabled}
+      $hasIcon={!!icon}
+      $size={size}
+      onClick={!disabled ? onClick : undefined}
+    >
+      {icon && <IconWrapper $bg={bgColor}>{icon}</IconWrapper>}
+      <P $fontSize={fontSize} $lineHeight={lineHeight} $semiBold>
+        {label}
+      </P>
+    </Li>
+  );
+};
+
+const Li = styled.li<{
+  $active: boolean;
+  $color: string;
+  $disabled?: boolean;
+  $hasIcon: boolean;
+  $size: TabSizes;
+}>`
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  user-select: none;
+
+  ${({ $size, $hasIcon }) =>
+    $hasIcon
+      ? 'padding: 16px 12px;'
+      : $size === 'small'
+      ? 'padding: 10px 8px;'
+      : $size === 'medium'
+      ? 'padding: 14px 10px;'
+      : 'padding: 22px 12px;'}
+
+  ${({ $hasIcon, $color, $disabled }) =>
+    $disabled
+      ? `
+  cursor: initial;
+  `
+      : $hasIcon
+      ? `
+  &:hover {
+    p {
+      color: ${$color};
+    }
+  }
+
+  div > svg {
+    fill: ${$color};
+  }`
+      : `
+  &:hover {
+    background-color: var(--color-grey-10);
+    &:after {
+      position: absolute;
+      content: '';
+      width: 100%;
+      height: 3px;
+      bottom: 0px;
+      left: 0px;
+      background-color: var(--color-primary-blue-3);
+      border-top-right-radius: 3px;
+      border-top-left-radius: 3px;
+    }
+  }
+  &:active {
+    background-color: var(--color-grey-9);
+  }`}
+
+  ${({ $active, $color, $hasIcon }) =>
+    $active
+      ? `
+  &:after {
+    position: absolute;
+    content: '';
+    width: 100%;
+    height: 3px;
+    bottom: 0px;
+    left: 0px;
+    background-color: ${
+      $hasIcon ? $color : 'var(--color-primary-blue-2)'
+    } !important;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  `
+      : ''}
+`;
+
+const IconWrapper = styled.div<{
+  $bg: string;
+}>`
+  padding: 8px;
+  border-radius: 8px;
+  background-color: ${({ $bg }) => $bg};
+`;
+
+Tabs.Item = Item;
+Item.displayName = 'Tabs.Item';
+
+export { Tabs };