@soul-refiner/design-system 0.1.11 → 0.1.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soul-refiner/design-system",
-  "version": "0.1.11",
+  "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/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';