@soul-refiner/design-system 0.0.14 → 0.0.16

package/src/inputs/RadioInput/RadioInput.tsx

@@ -0,0 +1,55 @@
+import React, { ChangeEvent, CSSProperties, useState } from "react";
+import radioStyles from "./RadioInput.module.scss";
+
+export interface RadioInputProps
+  extends Partial<
+    Omit<
+      React.DetailedHTMLProps<
+        React.InputHTMLAttributes<HTMLInputElement>,
+        HTMLInputElement
+      >,
+      "onChange"
+    >
+  > {
+  label?: string | React.ReactNode;
+  reverse?: boolean;
+  onChange?: (event: React.ChangeEvent, checked?: boolean) => void;
+}
+
+export const RadioInput = ({
+  checked = false,
+  label,
+  onChange,
+  reverse,
+  ...rest
+}: RadioInputProps) => {
+  const [isChecked, setIsChecked] = useState<boolean>();
+
+  const style: CSSProperties = {
+    flexDirection: reverse ? "row-reverse" : "row",
+  };
+
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    e.stopPropagation();
+    setIsChecked((prev) => !prev);
+    onChange && onChange(e, checked);
+  };
+
+  React.useEffect(() => {
+    setIsChecked(checked);
+  }, [checked]);
+
+  return (
+    <div className={radioStyles.radio}>
+      <label style={style}>
+        <input
+          checked={isChecked}
+          type="radio"
+          onChange={handleChange}
+          {...rest}
+        />
+        {label}
+      </label>
+    </div>
+  );
+};

package/src/inputs/RadioInput/index.ts

@@ -0,0 +1 @@
+export { RadioInput, type RadioInputProps } from "./RadioInput"

package/src/inputs/SearchInput/SearchInput.module.scss

@@ -0,0 +1,40 @@
+.searchInput {
+    display: flex;
+    height: 40px;
+    border-radius: 20px;
+    border: 1px solid transparent;
+    padding: 0 16px;
+    place-items: center;
+    place-content: center;
+    position: relative;
+    max-width: max-content;
+
+    transition: 250ms width ease-in-out, 125ms border-color ease-in-out;
+
+    input[type=text] {
+        width: 100%;
+        height: 100%;
+        border: none;
+        outline: none;
+        background-color: transparent;
+        font-size: var(--size-16);
+        color: var(--color-grey-3);
+
+        &::placeholder {
+            font-size: var(--size-16);
+            font-weight: var(--weight-inter-medium);
+            color: var(--color-grey-6);
+        }
+    }
+
+    .magnify {
+        cursor: pointer;
+        position: absolute;
+        right: 0;
+        transform: translateX(-50%);
+        
+        &:hover {
+            opacity: 0.8;
+        }
+    }
+}

package/src/inputs/SearchInput/SearchInput.tsx

@@ -0,0 +1,61 @@
+import React, { useState, useEffect, createRef } from "react";
+import { Component } from "@soul-refiner/utils/src";
+import searchStyle from "./SearchInput.module.scss";
+
+import { Magnify } from "@soul-refiner/icons/src";
+
+export interface SearchInputProps
+  extends Omit<React.HTMLProps<HTMLInputElement>, "as"> {
+  as?: React.ElementType;
+  expandable: boolean;
+  expanded?: boolean;
+  onSubmit?: () => void;
+  width?: number;
+}
+
+export const SearchInput = ({
+  as,
+  expandable = false,
+  expanded = false,
+  onSubmit,
+  width = 340,
+  ...rest
+}: SearchInputProps) => {
+  const [isExpended, setIsExpended] = useState(expanded);
+  const inputRef = createRef<HTMLInputElement>();
+
+  useEffect(() => {
+    setIsExpended(isExpended);
+  }, [isExpended]);
+
+  const style = {
+    width: isExpended ? width : 40,
+    borderColor: isExpended ? "#AFB6B9" : "transparent",
+  };
+
+  const handleExpendSearch = () => {
+    const expended = isExpended;
+
+    if (expended) inputRef.current?.blur();
+    else inputRef.current?.focus();
+
+    setIsExpended(!isExpended);
+  };
+
+  return (
+    <Component
+      as={as ?? "form"}
+      className={`${searchStyle.searchInput}`}
+      style={style}
+      onSubmit={onSubmit}
+    >
+      <input ref={inputRef} type="text" autoComplete="false" {...rest} />
+      <Magnify
+        className={searchStyle.magnify}
+        iconSize={24}
+        fill="#5C6264"
+        onClick={handleExpendSearch}
+      />
+    </Component>
+  );
+};

package/src/inputs/SearchInput/index.ts

@@ -0,0 +1 @@
+export { SearchInput, type SearchInputProps } from "./SearchInput";

package/src/inputs/SelectInput/SelectInput.module.scss

@@ -0,0 +1,66 @@
+.selectInput {
+    $height: 40px;
+    $borderColor: #AFB6B9;
+    $borderSize: 1px;
+    
+    display: flex;
+    flex-direction: column;
+    place-content: center;
+    position: relative;
+    border: 1px solid $borderColor;
+    padding: 8px 16px;
+    outline: none;
+    user-select: none;
+    background-color: #FFF;
+
+    height: $height;
+    border-radius: 0.5 * $height;
+
+    cursor: pointer;
+
+    .title {
+        display: flex;
+        flex-direction: row;
+        gap: 16px;
+        place-items: center;
+        place-content: space-between;
+    }
+
+    &[class~=expanded] {
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+        border-bottom-color: transparent;
+
+        .options {
+            box-shadow: 0 20px 20px -10px rgb(0 0 0 / 10%);
+        }
+    }
+
+    &:active {
+        
+    }
+
+    .options {
+        position: absolute;
+        bottom: 0;
+        left: 0 - $borderSize;
+        transform: translateY(100%);
+        border: 1px solid $borderColor;
+        border-top-width: 0;
+        border-radius: 0.5 * $height;
+        border-top-left-radius: 0;
+        border-top-right-radius: 0;
+        background-color: rgba(255 255 255 / 50%);
+        backdrop-filter: blur(40px) saturate(200%);
+        min-width: calc(100% + ($borderSize * 2));
+        overflow: hidden;
+    }
+
+    .option {
+        padding: 8px 16px;
+
+        &[class~=active] {
+            background-color: var(--color-blue-9);
+        }
+    }
+}

package/src/inputs/SelectInput/SelectInput.tsx

@@ -0,0 +1,145 @@
+import React, { useState, useEffect, useRef, ReactNode } from "react";
+import styles from "./SelectInput.module.scss";
+import { ChevronDown } from "@soul-refiner/icons/src";
+
+export interface SelectInputProps {
+  icon?: ReactNode;
+  name: string;
+  onSelect?: (value: string) => void;
+  options: Array<HTMLOptionElement>;
+  placeholder?: string;
+}
+
+export const SelectInput = ({
+  icon,
+  name,
+  onSelect,
+  options,
+  placeholder = "Select an option",
+}: SelectInputProps) => {
+  const [focused, setFocused] = useState<boolean>(false);
+  const [expanded, _setExpanded] = useState<boolean>(false);
+  const [selectedIndex, setSelectedIndex] = useState<number>();
+  const [scrollIndex, _setScrollIndex] = useState<number>(-1);
+
+  const selectRef = useRef<HTMLDivElement>(null);
+
+  const expandedRef = useRef<boolean>(expanded);
+  const setExpanded = (expanded: boolean) => {
+    expandedRef.current = expanded;
+    _setExpanded(expanded);
+  };
+
+  const scrollIndexRef = useRef<number | undefined>(selectedIndex);
+  const setScrollIndex = (index: number) => {
+    index = index < 0 ? index + options.length : index;
+    scrollIndexRef.current = index;
+    _setScrollIndex(index);
+  };
+
+  useEffect(() => {
+    if (focused) {
+      document.addEventListener("keydown", handleKeydown);
+    } else {
+      document.removeEventListener("keydown", handleKeydown);
+    }
+
+    return () => {
+      document.removeEventListener("keydown", handleKeydown);
+    };
+  }, [focused]);
+
+  useEffect(() => {
+    if (typeof selectedIndex === "number" && onSelect) {
+      onSelect(options[selectedIndex].value);
+    }
+  }, [selectedIndex]);
+
+  const handleKeydown = (e: KeyboardEvent) => {
+    e.preventDefault();
+
+    const increment = expandedRef.current ? 1 : 0;
+    const currentScrollRef = scrollIndexRef.current
+      ? scrollIndexRef.current
+      : 0;
+
+    switch (e.key) {
+      case "ArrowUp":
+        setExpanded(true);
+        setScrollIndex((currentScrollRef - increment) % options.length);
+        break;
+      case "ArrowDown":
+        setExpanded(true);
+        setScrollIndex((currentScrollRef + increment) % options.length);
+        break;
+      case "Escape":
+        setExpanded(false);
+        break;
+      case "Enter":
+        if (expandedRef.current) {
+          setSelectedIndex(currentScrollRef);
+          setExpanded(false);
+        } else {
+          setExpanded(true);
+        }
+        break;
+    }
+  };
+
+  const handleOnClick = () => {
+    setExpanded(!expanded);
+  };
+
+  return (
+    <div
+      ref={selectRef}
+      tabIndex={0}
+      onClick={handleOnClick}
+      onBlur={(e) => {
+        e.preventDefault();
+        setFocused(false);
+        setExpanded(false);
+      }}
+      onFocus={(e) => {
+        e.preventDefault();
+        setFocused(true);
+      }}
+      className={`${styles.selectInput} ${expanded ? "expanded" : ""}`}
+    >
+      <div className={styles.title}>
+        {placeholder && selectedIndex === undefined && placeholder}
+        {selectedIndex !== undefined && options[selectedIndex].label}
+        {icon ? icon : <ChevronDown size={16} fill={"var(--color-grey-3)"} />}
+      </div>
+
+      {expanded && (
+        <div className={styles.options}>
+          {options?.map((option, index) => {
+            return (
+              <div
+                key={index}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  setSelectedIndex(index);
+                  setExpanded(false);
+                  selectRef.current?.focus();
+                }}
+                onMouseOver={() => setScrollIndex(index)}
+                className={`${styles.option} ${
+                  scrollIndex === index ? "active" : ""
+                }`}
+              >
+                {option.label}
+              </div>
+            );
+          })}
+        </div>
+      )}
+      <input
+        type="hidden"
+        name={name}
+        value={selectedIndex ? options[selectedIndex].value : ""}
+      />
+    </div>
+  );
+};

package/src/inputs/SelectInput/index.ts

@@ -0,0 +1 @@
+export { SelectInput, type SelectInputProps } from "./SelectInput"

package/src/inputs/TagInput/TagInput.module.scss

@@ -0,0 +1,75 @@
+.container {
+
+    border: 1px solid var(--color-grey-9);
+    display: flex;
+    border-radius: var(--border-radius-small);
+    position: relative;
+    padding: 8px;
+    
+    &[class~=maxLength] {
+        padding-bottom: 2.5em;
+
+        .counter {
+            position: absolute;
+            bottom: 0;
+            right: 0;
+            padding: 10px;
+            color: var(--color-grey-5);
+        }
+    }
+
+    .tags {
+        display: flex;
+        gap: 8px;
+        flex-direction: row;
+        flex-wrap: wrap;
+        
+        position: relative;
+
+        .tag {
+            display: flex;
+            flex-direction: row;
+            place-content: space-between;
+            place-items: center;
+            gap: 8px;
+
+            background: var(--color-grey-9);
+            border-radius: 4px;
+            padding: 0px 0 0 10px;
+            height: 2.5em;
+
+            cursor: pointer;
+
+            &>div {
+                min-width: 1ch;
+                height: 1em;
+                display: flex;
+                place-items: center;
+                padding-right: 10px;
+
+                &:first-child {
+                    flex: 1;
+                }
+
+                &:focus {
+                    outline: none;
+
+                    &:first-child {
+                        cursor:text;
+                    }
+                }
+            }
+            &:focus-within {
+                outline: 2px solid var(--colorify-blue-3);
+            }
+            &[class~=createTag] {
+                background-color: white;
+                border: none;
+                flex: 1;
+                min-width: 4em;
+            }
+        }
+    }
+
+    
+}

package/src/inputs/TagInput/TagInput.tsx

@@ -0,0 +1,115 @@
+import React, { useState, KeyboardEvent, useRef, CSSProperties } from "react";
+import { Close } from "@soul-refiner/icons/src";
+import tagInputStyle from "./TagInput.module.scss";
+
+export interface TagInputProps {
+  max?: number;
+  style?: CSSProperties;
+}
+
+export const TagInput = ({ max, style }: TagInputProps) => {
+  const [tags, setTags] = useState<Array<string>>([]);
+
+  const addTag = (tag: string) => {
+    setTags((previous) => {
+      return [...previous, tag];
+    });
+  };
+
+  const updateTag = (tag: string, index: number) => {
+    const t: Array<string> = [...tags];
+    t.splice(index, 1, tag);
+    setTags(t);
+  };
+
+  const deleteTag = (index: number) => {
+    const t: Array<string> = [...tags];
+    t.splice(index, 1);
+    setTags(t);
+  };
+
+  const RenderTag = ({
+    tag,
+    index,
+    createTag = false,
+  }: {
+    tag?: string;
+    index?: number;
+    createTag?: boolean;
+  }) => {
+    const [thisTag] = useState<string>(tag ? tag : "");
+    const ref = useRef<HTMLDivElement>(null);
+    const updating: boolean = typeof index === "number";
+
+    const handleKeyPress = (e: KeyboardEvent<HTMLDivElement>) => {
+      const innerText: string = ref.current ? ref.current.innerText : "";
+
+      switch (e.code) {
+        case "Enter":
+        case "Comma":
+          e.preventDefault();
+
+          if (tags.find((tag) => tag === innerText)) {
+            break;
+          }
+
+          if (updating) {
+            updateTag(innerText, index as number);
+          } else {
+            addTag(innerText);
+          }
+
+          break;
+        default:
+          //setThisTag(ref.current ? ref.current.innerText : "");
+          break;
+      }
+    };
+
+    const handleDelete = () => {
+      if (typeof index !== "undefined") deleteTag(index);
+    };
+
+    return (
+      <div
+        className={`${tagInputStyle.tag} ${createTag ? "createTag" : ""}`}
+        onClick={() => ref.current?.focus()}
+      >
+        <div
+          ref={ref}
+          contentEditable={true}
+          onKeyPress={handleKeyPress}
+          suppressContentEditableWarning
+        >
+          {thisTag}
+        </div>
+        {!createTag && (
+          <div onClick={handleDelete}>
+            <Close fill="var(--color-grey-6)" size={14} />
+          </div>
+        )}
+      </div>
+    );
+  };
+
+  return (
+    <div
+      style={style}
+      className={`${tagInputStyle.container} ${
+        typeof max === "number" ? "maxLength" : ""
+      }`}
+    >
+      <div className={tagInputStyle.tags}>
+        {tags.map((tag, index) => {
+          return <RenderTag key={index} index={index} tag={tag} />;
+        })}
+        {(!max || (max && tags.length < max)) && <RenderTag createTag={true} />}
+      </div>
+      {max && (
+        <div className={tagInputStyle.counter}>
+          {tags.length} / {max}
+        </div>
+      )}
+    </div>
+  );
+};

package/src/inputs/TagInput/index.ts

@@ -0,0 +1 @@
+export { TagInput, type TagInputProps } from "./TagInput"

package/src/inputs/TextInput/TextInput.module.scss

@@ -0,0 +1,35 @@
+@use "@soul-refiner/styles/mixins";
+
+.textField {
+  position: relative;
+  width: 100%;
+  display: flex;
+  padding: 12px 16px;
+  border-radius: var(--border-radius-normal);
+  background-color: var(--color-blue-10);
+
+  .counter {
+    @include mixins.font(400, 16px, 24px);
+    position: absolute;
+    bottom: 8px;
+    right: 16px;
+    color: #a4b0bf;
+  }
+
+  textarea[type="text"] {
+    width: 100%;
+    border: none;
+    resize: none;
+    background-color: transparent;
+    font-size: var(--size-16);
+    color: var(--color-grey-1);
+
+    &:focus {
+      outline: none;
+    }
+  }
+}
+
+.hasCharacterCount {
+  padding-bottom: 32px;
+}

package/src/inputs/TextInput/TextInput.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+import styles from "./TextInput.module.scss";
+
+export interface TextInputProps extends React.HTMLProps<HTMLTextAreaElement> {
+  characterCount?: boolean;
+}
+
+export const TextInput = ({
+  className,
+  characterCount = true,
+  maxLength,
+  value,
+  ...rest
+}: TextInputProps) => {
+  const ref = React.useRef<HTMLTextAreaElement>(null);
+
+  React.useEffect(() => {
+    if (ref.current) {
+      ref.current.style.height = "0px";
+      const scrollHeight = ref.current.scrollHeight;
+      ref.current.style.height = scrollHeight + "px";
+    }
+  }, [ref.current, value]);
+
+  return (
+    <div
+      className={`${styles.textField} ${
+        characterCount ? styles.hasCharacterCount : ""
+      }`}
+    >
+      <textarea
+        className={`${className ? " " + className : ""}`}
+        type="text"
+        maxLength={maxLength}
+        ref={ref}
+        value={value}
+        {...rest}
+      />
+      {characterCount && value !== undefined && maxLength && (
+        <span className={styles.counter}>
+          {value.toString().length.toString()} / {maxLength.toString()}
+        </span>
+      )}
+    </div>
+  );
+};

package/src/inputs/TextInput/index.ts

@@ -0,0 +1 @@
+export { TextInput, type TextInputProps } from "./TextInput";

package/src/inputs/index.ts

@@ -0,0 +1,10 @@
+export { CalendarInput, type CalendarInputProps } from "./CalendarInput";
+export { CheckboxInput, type CheckboxInputProps } from "./CheckboxInput";
+export { FeedInput, type FeedInputProps } from "./FeedInput";
+export { InboxInput, type InboxInputProps } from "./InboxInput";
+export { PostInput, type PostInputProps } from "./PostInput";
+export { RadioInput, type RadioInputProps } from "./RadioInput";
+export { SearchInput, type SearchInputProps } from "./SearchInput";
+export { SelectInput, type SelectInputProps } from "./SelectInput";
+export { TagInput, type TagInputProps } from "./TagInput";
+export { TextInput, type TextInputProps } from "./TextInput";