@soul-refiner/design-system 0.0.10 → 0.0.12

package/dist/src/inputs/PostInput/PostInput.tsx

@@ -0,0 +1,54 @@
+import React from "react";
+import styles from "./PostInput.module.scss";
+
+export interface PostInputProps extends React.HTMLProps<HTMLTextAreaElement> {
+  characterCount?: boolean;
+  hasShadow?: boolean;
+}
+
+export const PostInput = ({
+  characterCount,
+  hasShadow = true,
+  maxLength,
+  value,
+  ...rest
+}: PostInputProps) => {
+  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]);
+
+  const hasCharacterCount = value !== undefined && maxLength && characterCount;
+
+  if (hasCharacterCount) {
+    return (
+      <div className={styles.wrapper}>
+        <textarea
+          className={`${styles.postinput} ${hasShadow ? "shadow-post" : ""}`}
+          maxLength={maxLength}
+          ref={ref}
+          value={value}
+          {...rest}
+        />
+        <span>
+          {value.toString().length} / {maxLength}
+        </span>
+      </div>
+    );
+  }
+
+  return (
+    <textarea
+      className={`${styles.postinput} ${hasShadow ? "shadow-post" : ""}`}
+      maxLength={maxLength}
+      ref={ref}
+      value={value}
+      {...rest}
+    />
+  );
+};

package/dist/src/inputs/PostInput/index.ts

@@ -0,0 +1 @@
+export { PostInput, type PostInputProps } from "./PostInput";

package/dist/src/inputs/RadioInput/RadioInput.module.scss

@@ -0,0 +1,68 @@
+.radio {
+    
+
+    label {
+        display: flex;
+        flex-direction: row;
+        place-items: center;
+        gap: 16px;
+        cursor: pointer;
+
+        &> input[type=radio] {
+            appearance: none;
+            margin: 0;
+
+            border: 2px solid #99B4CF;
+            border-radius: 100%;
+
+            height: 24px;
+            width: 24px;
+
+            position: relative;
+
+            cursor: pointer;
+
+            &::after {
+                content: "";
+                background-image: url("data:image/svg+xml,%0A%3Csvg width='16' height='11' viewBox='0 0 16 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.38338 10.6724L5.80001 10.0891L5.21665 10.6724C5.53883 10.9946 6.06119 10.9946 6.38338 10.6724ZM5.80001 8.92234L1.98338 5.1057C1.66119 4.78352 1.13883 4.78352 0.816649 5.1057C0.494467 5.42788 0.494467 5.95024 0.816649 6.27243L5.21665 10.6724L5.80001 10.0891C6.38338 10.6724 6.38332 10.6725 6.38338 10.6724L14.8726 2.18316C15.1948 1.86097 15.1948 1.33861 14.8726 1.01643C14.5505 0.694248 14.0281 0.694248 13.7059 1.01643L5.80001 8.92234Z' fill='white'/%3E%3C/svg%3E%0A");
+                background-repeat: no-repeat;
+                background-position: 50% 50%;
+                width: 100%;
+                height: 100%;
+                opacity: 0;
+                display: block;
+                transform: scale(0.5);
+                transition: 100ms opacity ease-in-out, 200ms transform ease-in;
+            }
+
+            &:checked {
+                color: var(--color-green-6);
+                background-color: currentColor;
+                border-color: currentColor;
+                animation: activateRadio 175ms forwards ease-in-out;
+
+                &::after {
+                    transform: scale(1);
+                    opacity: 1;
+                }
+                
+                
+            }
+            // &:focus {
+            //     border-color: transparent;
+            // }
+            
+            @keyframes activateRadio {
+                0% {
+                    transform: scale(0.8);
+                }
+                80% {
+                    transform: scale(1.1);
+                }
+                100% {
+                    transform: scale(1);
+                }
+            }
+        }
+    }
+}

package/dist/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/dist/src/inputs/RadioInput/index.ts

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

package/dist/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/dist/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/dist/src/inputs/SearchInput/index.ts

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

package/dist/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/dist/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/dist/src/inputs/SelectInput/index.ts

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

package/dist/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/dist/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/dist/src/inputs/TagInput/index.ts

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