@soul-refiner/design-system 0.1.38 → 0.1.40

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

@@ -1,307 +0,0 @@
-'use client';
-
-import React from 'react';
-import styled, { css } from 'styled-components';
-import { BoxProps, P } from '../../';
-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

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

package/src/components/input/index.ts

@@ -1,10 +0,0 @@
-export { Checkbox } from './checkbox';
-export type { CheckboxProps } from './checkbox';
-export { DatePicker } from './date';
-export type { DatePickerProps } from './date';
-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/radio/index.ts

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

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

@@ -1,142 +0,0 @@
-'use client';
-
-import React from 'react';
-import styled from 'styled-components';
-import { Box, BoxProps, P } from '../../';
-
-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 && 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/src/components/input/search/index.ts

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

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

@@ -1,225 +0,0 @@
-'use client';
-
-import React from 'react';
-import styled from 'styled-components';
-import { Styles } from '../../../common';
-import { BoxProps } from '../../';
-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);
-`;