@soul-refiner/design-system 0.1.11 → 0.1.13

package/package.json

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

package/src/components/actions/button/button.tsx

@@ -173,8 +173,6 @@ const base = css<{
     color: var(--color-grey-7) !important;
     cursor: unset !important;
   }
-
-  ${({ $sx }) => ($sx ? $sx : '')}
 `;
 
 const Primary = styled(Box)<{
@@ -199,6 +197,8 @@ const Primary = styled(Box)<{
   ${base}
   ${Styles.flex}
   ${Styles.padding}
+
+  ${({ $sx }) => ($sx ? $sx : '')}
 `;
 
 const Secondary = styled(Box)<{
@@ -222,6 +222,8 @@ const Secondary = styled(Box)<{
   ${base}
   ${Styles.flex}
   ${Styles.padding}
+
+  ${({ $sx }) => ($sx ? $sx : '')}
 `;
 
 const Outlined = styled(Box)<{
@@ -240,6 +242,8 @@ const Outlined = styled(Box)<{
   ${base}
   ${Styles.flex}
   ${Styles.padding}
+
+  ${({ $sx }) => ($sx ? $sx : '')}
 `;
 
 const Danger = styled(Box)<{
@@ -264,6 +268,8 @@ const Danger = styled(Box)<{
   ${base}
   ${Styles.flex}
   ${Styles.padding}
+
+  ${({ $sx }) => ($sx ? $sx : '')}
 `;
 
 const Text = styled(Box)<{
@@ -291,6 +297,8 @@ const Text = styled(Box)<{
   ${base}
   ${Styles.flex}
   ${Styles.padding}
+
+  ${({ $sx }) => ($sx ? $sx : '')}
 `;
 
 const Raised = styled(Box)<{
@@ -320,6 +328,8 @@ const Raised = styled(Box)<{
   ${base}
   ${Styles.flex}
   ${Styles.padding}
+
+  ${({ $sx }) => ($sx ? $sx : '')}
 `;
 
 const Special = styled(Box)<{
@@ -347,4 +357,6 @@ const Special = styled(Box)<{
   ${base}
   ${Styles.flex}
   ${Styles.padding}
+
+  ${({ $sx }) => ($sx ? $sx : '')}
 `;

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

@@ -119,7 +119,7 @@ const Dropdown = ({
   const handleChange = multiple ? handleChangeMultiple : handleChangeSingle;
 
   const isSelected = (value: string) =>
-    maintainState && multiple ? selected.includes(value) : value === selected;
+    maintainState && (multiple ? selected.includes(value) : value === selected);
 
   /**
    * allow for the API to accept children as options
@@ -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/iconography/icon/icon.tsx

@@ -30,6 +30,7 @@ export interface IconProps extends NativeProps {
   as?: React.ElementType;
   color?: (typeof COLORS)[number];
   size?: 16 | 20 | 24;
+  sx?: string;
 }
 
 export const Icon = ({
@@ -37,6 +38,7 @@ export const Icon = ({
   children,
   color = 'grey-3',
   size = 16,
+  sx,
   ...rest
 }: IconProps) => {
   return (
@@ -47,6 +49,7 @@ export const Icon = ({
       viewBox="0 0 16 16"
       fill={colorReference[color]}
       xmlns="http://www.w3.org/2000/svg"
+      $sx={sx}
       {...rest}
     >
       {children}
@@ -54,4 +57,6 @@ export const Icon = ({
   );
 };
 
-const SVG = styled.svg``;
+const SVG = styled.svg<{ $sx?: string }>`
+  ${({ $sx }) => ($sx ? $sx : '')}
+`;

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,8 @@
 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';
+export { Search } from './search';
+export type { SearchProps } from './search';

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

@@ -0,0 +1,2 @@
+export { Search } from './search';
+export type { SearchProps } from './search';

package/src/components/input/search/search.tsx

@@ -0,0 +1,223 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Styles } from 'common';
+import { BoxProps } from 'components';
+import { Close, Search as SearchIcon } from 'icons';
+
+type NativeProps = Pick<
+  React.HTMLAttributes<HTMLInputElement>,
+  'placeholder' | 'onChange' | 'onSubmit'
+>;
+
+type SearchSize = 'collapsed' | 'small' | 'medium' | 'large';
+
+export interface SearchProps extends NativeProps {
+  dropdownFilter?: React.ReactElement;
+  onClearText?: () => void;
+  size: SearchSize;
+  sx?: string;
+  value: string;
+}
+
+export const Search = ({
+  dropdownFilter,
+  onChange,
+  onClearText,
+  onSubmit,
+  placeholder,
+  size,
+  sx,
+  value,
+}: SearchProps) => {
+  const [expanded, setExpanded] = React.useState(false);
+  const [focused, setFocused] = React.useState(false);
+  const inputRef = React.useRef<HTMLInputElement>(null);
+
+  const isCollapsed = !expanded && size === 'collapsed';
+  const iconSize = isCollapsed || size === 'large' ? 24 : 16;
+
+  const handleExpand = () => {
+    setExpanded(true);
+    inputRef?.current?.focus();
+  };
+
+  const handleCollapse = () => {
+    setExpanded(false);
+    setFocused(false);
+    inputRef?.current?.blur();
+  };
+
+  const handleFocus = () => {
+    inputRef?.current?.focus();
+  };
+
+  return (
+    <Wrapper
+      $align="center"
+      $dir="row"
+      $isCollapsed={isCollapsed}
+      $isFocused={focused}
+      $borderRadius="large"
+      $size={size}
+      $sx={sx}
+      onClick={
+        dropdownFilter && size === 'large'
+          ? undefined
+          : isCollapsed
+          ? handleExpand
+          : handleFocus
+      }
+    >
+      <SearchIcon
+        color={size === 'large' ? 'blue-7' : 'grey-3'}
+        size={iconSize}
+        onClick={isCollapsed ? undefined : handleCollapse}
+        sx={
+          isCollapsed || size !== 'collapsed'
+            ? undefined
+            : `
+          &:hover {
+            cursor: pointer;
+            background-color: var(--color-grey-10);
+            border-radius: 50%;
+          }`
+        }
+      />
+      <Input
+        $isCollapsed={isCollapsed}
+        onBlur={() => setFocused(false)}
+        onChange={onChange}
+        onFocus={() => setFocused(true)}
+        onSubmit={onSubmit}
+        placeholder={placeholder}
+        ref={inputRef}
+        value={value}
+      />
+      {!isCollapsed && onClearText && (
+        <Close
+          size={16}
+          onClick={onClearText}
+          sx={`
+            ${value.length === 0 ? 'visibility: hidden;' : ''}
+            padding: 4px;
+            &:hover {
+              cursor: pointer;
+              background-color: var(--color-grey-10);
+              border-radius: 50%;
+            }`}
+        />
+      )}
+      {size === 'large' && dropdownFilter && (
+        <>
+          <Separator />
+          {dropdownFilter}
+        </>
+      )}
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled.div<
+  BoxProps & {
+    $isCollapsed: boolean;
+    $isFocused: boolean;
+    $size: SearchSize;
+    $sx?: string;
+  }
+>`
+  ${Styles.flex}
+  ${Styles.padding}
+  display: flex;
+  background-color: var(--color-white);
+
+  & > * {
+    width: fit-content;
+    flex-shrink: 0;
+  }
+
+  ${({ $isCollapsed, $size }) =>
+    $isCollapsed
+      ? `
+    padding: 12px;
+    border-radius: 50%;
+    &:hover {
+      background-color: var(--color-grey-10);
+      cursor: pointer;
+    }`
+      : `
+    border-radius: 8px;
+    ${
+      $size === 'collapsed'
+        ? // collapsed
+          `
+      gap: 8px;
+      padding: 10px 16px;
+      border: 1px solid var(--color-grey-8);
+      
+      &:hover {
+        border: 1px solid var(--color-grey-6);
+      }`
+        : $size === 'small'
+        ? // small
+          `
+      gap: 12px;
+      padding: 10px 16px;
+      border: 1px solid var(--color-grey-8);
+      
+      &:hover {
+        border: 1px solid var(--color-grey-6);
+      }`
+        : $size === 'medium'
+        ? // medium
+          `
+      gap: 12px;
+      padding: 14px 16px;
+      border: 1px solid var(--color-grey-8);
+      
+      &:hover {
+        border: 1px solid var(--color-grey-6);
+      }`
+        : // large
+          `
+      gap: 16px;
+      padding: 16px;
+      box-shadow: var(--elevation-1);
+      
+      &:hover {
+        border: 1px solid var(--color-grey-6);
+      }`
+    }`}
+
+  ${({ $isFocused, $isCollapsed }) =>
+    $isFocused && !$isCollapsed
+      ? 'border: 1px solid var(--color-primary-blue-2) !important;'
+      : ''}
+
+  ${({ $sx }) => ($sx ? $sx : '')}
+`;
+
+const Input = styled.input.attrs(({ ref }) => ({
+  ref: ref,
+}))<{
+  $isCollapsed: boolean;
+}>`
+  flex: 1;
+  border-radius: 8px;
+  outline: none;
+  border: none;
+  font-size: 14px;
+  font-family: Inter;
+  line-height: 20px;
+  color: var(--color-grey-2);
+
+  ${({ $isCollapsed }) =>
+    $isCollapsed
+      ? 'width: 0px; height: 0px; padding: 0px !important; border: none !important;'
+      : ''}
+`;
+
+const Separator = styled.div`
+  width: 1px;
+  height: 20px;
+  background-color: var(--color-grey-9);
+`;