@soul-refiner/design-system 0.0.14 → 0.0.15

package/src/actions/Dropdown/Dropdown.tsx

@@ -0,0 +1,224 @@
+import React from "react";
+import dropdownStyles from "./Dropdown.module.scss";
+
+export interface DropdownProps
+  extends Partial<Omit<HTMLSelectElement, "options" | "style" | "children">>,
+    React.PropsWithChildren {
+  className?: string;
+  closeOnChange?: boolean;
+  closeOnBlur?: boolean;
+  defaultValue?: string;
+  disabled?: boolean;
+  maintainState?: boolean;
+  offset?: [number, number];
+  onChange?: (event: React.MouseEvent, value: string) => void;
+  open?: "right" | "left";
+  options?: React.ReactNode[] | Omit<DropdownOptionProps, "selected">[];
+  style?: React.CSSProperties;
+  trigger: React.ReactElement;
+}
+
+const Dropdown = ({
+  className,
+  children,
+  closeOnChange = true,
+  closeOnBlur = true,
+  defaultValue = "",
+  disabled = false,
+  maintainState = true,
+  offset,
+  onChange,
+  open: openDirection = "right",
+  options,
+  style,
+  trigger,
+}: DropdownProps) => {
+  const wrapperRef = React.useRef<HTMLDivElement>(null);
+  const optionsRef = React.useRef<HTMLDivElement>(null);
+  const [open, setOpen] = React.useState(false);
+  const [selected, setSelected] = React.useState(defaultValue);
+
+  const handleOpen = () => {
+    if (disabled) {
+      return;
+    }
+    setOpen((prev) => !prev);
+  };
+
+  const handleChange = (event: React.MouseEvent) => {
+    event.stopPropagation();
+    const value =
+      (event.target as HTMLOptionElement).getAttribute("data-value") ?? "";
+    if (selected !== value) {
+      setSelected(value);
+    } else {
+      setSelected("");
+    }
+    if (closeOnChange) {
+      setOpen(false);
+    }
+    if (onChange) onChange(event, value);
+  };
+
+  const handleBlur = (event: React.FocusEvent) => {
+    if (
+      closeOnBlur &&
+      wrapperRef?.current &&
+      !wrapperRef?.current?.contains(event.relatedTarget)
+    ) {
+      setOpen(false);
+    }
+  };
+
+  React.useEffect(() => {
+    if (disabled) {
+      setOpen(false);
+    }
+  }, [disabled]);
+
+  let dropdownElements;
+  if (
+    !children &&
+    options &&
+    !(
+      typeof (options[0] as unknown as { $$typeof: symbol | undefined })
+        .$$typeof === "symbol"
+    )
+  ) {
+    dropdownElements = (
+      options as Omit<DropdownOptionProps, "selected" | "onClick">[]
+    ).map(({ value, ...rest }, index) => {
+      return (
+        <Option
+          key={index + (value ?? "")}
+          selected={value === selected}
+          onClick={handleChange}
+          value={value}
+          {...rest}
+        />
+      );
+    });
+  } else if (!children) {
+    dropdownElements = React.Children.map(
+      options as unknown as React.ReactElement[],
+      (child, index) => (
+        <Option
+          key={index + child.props.value}
+          selected={child.props.value === selected}
+          onClick={handleChange}
+          {...child.props}
+        />
+      )
+    );
+  }
+
+  return (
+    <div
+      className={`dropdown ${dropdownStyles.dropdown} ${
+        disabled ? "disabled" : ""
+      } ${className ? className : ""}`}
+      tabIndex={0}
+      ref={wrapperRef}
+      style={style}
+      onBlurCapture={handleBlur}
+    >
+      {React.cloneElement(
+        trigger,
+        typeof trigger.type === "string"
+          ? { onClick: handleOpen }
+          : { dropdownOpen: open, onClick: handleOpen }
+      )}
+      {open && (
+        <div
+          className={`options${openDirection === "left" ? " open-left" : ""}`}
+          data-testid="options-wrapper"
+          ref={optionsRef}
+        >
+          {!children && (dropdownElements as React.ReactElement[])}
+          {children &&
+            React.Children.map(children, (child, index) => {
+              let props = {};
+              if (React.isValidElement(child)) {
+                const { className, onClick, ...possibleProps } = child.props;
+                props = possibleProps;
+              }
+              return (
+                <div
+                  key={index + (child as React.ReactElement).props.value}
+                  className={`${dropdownStyles.option} ${
+                    maintainState &&
+                    (child as React.ReactElement).props["data-value"] ===
+                      selected
+                      ? "selected"
+                      : ""
+                  }`}
+                  data-value={(child as React.ReactElement).props["data-value"]}
+                  onClick={onChange ? handleChange : undefined}
+                  {...props}
+                >
+                  {child as React.ReactElement}
+                </div>
+              );
+            })}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export interface DropdownOptionProps
+  extends Partial<Omit<HTMLOptionElement, "className" | "style" | "selected">> {
+  checkbox?: boolean;
+  color?: string;
+  icon?: React.ReactNode;
+  onClick: (event: React.MouseEvent) => void;
+  selected?: boolean;
+  style?: React.CSSProperties;
+}
+
+const Option = ({
+  checkbox,
+  color,
+  disabled,
+  icon,
+  label,
+  onClick,
+  selected,
+  style,
+  value,
+}: DropdownOptionProps) => {
+  return (
+    <div
+      className={`${dropdownStyles.option} ${disabled ? "disabled" : ""} ${
+        selected ? "selected" : ""
+      }`}
+      data-value={value}
+      onClick={onClick}
+      style={
+        {
+          "--option-color": color,
+          ...style,
+        } as React.CSSProperties
+      }
+    >
+      {checkbox ? <input readOnly type="checkbox" checked={selected} /> : icon}
+      {label}
+    </div>
+  );
+};
+
+Option.displayName = "Dropdown.Option";
+Dropdown.Option = Option;
+
+export interface DropdownSpacerProps {
+  style?: React.CSSProperties;
+}
+
+const Spacer = ({ style }: DropdownSpacerProps) => {
+  return <div className={dropdownStyles.spacer} style={style} />;
+};
+
+Spacer.displayName = "Dropdown.Spacer";
+Dropdown.Spacer = Spacer;
+
+export { Dropdown };

package/src/actions/Dropdown/index.ts

@@ -0,0 +1,6 @@
+export {
+  Dropdown,
+  type DropdownProps,
+  type DropdownOptionProps,
+  type DropdownSpacerProps,
+} from "./Dropdown";

package/src/actions/Dropzone/Dropzone.module.scss

@@ -0,0 +1,48 @@
+@use "@soul-refiner/styles/mixins";
+
+.dropzone {
+  display: flex;
+  flex-direction: column;
+  place-items: center;
+  place-content: center;
+  gap: 16px;
+  padding: 32px;
+  border-radius: var(--border-radius-normal);
+  border: 2px dashed var(--border);
+  background-color: var(--background);
+  width: 100%;
+
+  &[class~="dragover"] {
+    border: 2px solid var(--icon);
+  }
+
+  input[type="file"] {
+    display: none;
+  }
+
+  .textContainer {
+    @include mixins.font(400, 16px, 24px);
+    display: flex;
+    justify-items: center;
+    flex-flow: row wrap;
+    gap: 8px;
+    place-items: center;
+    & > button {
+      @include mixins.font(700, 16px, 24px);
+      color: var(--icon);
+    }
+  }
+
+  p {
+    justify-content: center;
+  }
+
+  [class~="icon"] {
+    max-width: fit-content;
+    max-height: fit-content;
+
+    svg {
+      fill: var(--icon);
+    }
+  }
+}

package/src/actions/Dropzone/Dropzone.spec.js

@@ -0,0 +1,60 @@
+import React from "react";
+import "@testing-library/jest-dom";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+
+import { Dropzone } from "./Dropzone";
+
+const generateMockProps = props => ({
+  ...props,
+});
+
+describe("Dropzone", () => {
+  it("restricts the acceptable file type to images", () => {
+    const props = generateMockProps({
+      fileType: "image",
+    });
+    render(<Dropzone {...props} />);
+    const input = screen.getByTestId("dropzone-upload-input");
+    expect(input).toHaveAttribute("accept", "image/*");
+  });
+
+  it("restricts the acceptable file type to videos", () => {
+    const props = generateMockProps({
+      fileType: "video",
+    });
+    render(<Dropzone {...props} />);
+    const input = screen.getByTestId("dropzone-upload-input");
+    expect(input).toHaveAttribute("accept", "video/*");
+  });
+
+  it("restricts the acceptable file type audio", () => {
+    const props = generateMockProps({
+      fileType: "audio",
+    });
+    render(<Dropzone {...props} />);
+    const input = screen.getByTestId("dropzone-upload-input");
+    expect(input).toHaveAttribute("accept", "audio/*");
+  });
+
+  it("restricts the acceptable file type to documents", () => {
+    const props = generateMockProps({
+      fileType: "document",
+    });
+    render(<Dropzone {...props} />);
+    const input = screen.getByTestId("dropzone-upload-input");
+    expect(input).toHaveAttribute("accept", ".xlsx, .xls, .doc, .docx, .ppt, .pptx, .txt, .pdf, application/msword, application/vnd.ms-excel, application/vnd.ms-powerpoint, text/plain, application/pdf,");
+  });
+
+  it("calls the onDrop handler", async () => {
+    const file = new File(["test"], "test.png", { type: "image/png" });
+    const props = generateMockProps({
+      onDrop: jest.fn(),
+    });
+    render(<Dropzone {...props} />);
+    const input = screen.getByTestId("dropzone-upload-input");
+    await waitFor(() => {
+      fireEvent.change(input, { target: { files: [file] } });
+    });
+    expect(props.onDrop).toHaveBeenCalled();
+  });
+});

package/src/actions/Dropzone/Dropzone.tsx

@@ -0,0 +1,191 @@
+import React, { DragEvent, useState, useRef, CSSProperties } from "react";
+import dropStyles from "./Dropzone.module.scss";
+import { Button } from "../Button";
+import {
+  UploadAudio,
+  UploadDocument,
+  UploadImage,
+  UploadVideo,
+} from "@soul-refiner/icons/src";
+
+export interface DropzoneProps extends React.PropsWithChildren {
+  color?:
+    | "turquoise"
+    | "green"
+    | "blue"
+    | "purple"
+    | "yellow"
+    | "orange"
+    | "red"
+    | "grey";
+  id?: string;
+  fileType?: "video" | "audio" | "image" | "document";
+  multiple?: boolean;
+  showGraphic?: boolean;
+  subtext?: string;
+  text?: React.ReactNode;
+  fluid?: boolean;
+  style?: CSSProperties;
+  onDrop?: (files: FileList) => void;
+  ref?: React.RefObject<HTMLInputElement>;
+  showBrowse?: boolean;
+}
+
+export const Dropzone = ({
+  children,
+  id,
+  color = "purple",
+  fileType,
+  multiple = false,
+  showGraphic = true,
+  subtext,
+  text,
+  style,
+  onDrop,
+  showBrowse = true,
+  ...rest
+}: DropzoneProps) => {
+  const filesRef = useRef<HTMLInputElement>(null);
+  const [draggingOver, setDraggingOver] = useState(false);
+
+  const acceptableFiletypes = () => {
+    switch (fileType) {
+      case "video":
+        return "video/*";
+      case "audio":
+        return "audio/*";
+      case "image":
+        return "image/*";
+      case "document":
+        return ".xlsx, .xls, .doc, .docx, .ppt, .pptx, .txt, .pdf, application/msword, application/vnd.ms-excel, application/vnd.ms-powerpoint, text/plain, application/pdf,";
+    }
+  };
+
+  const getImage = () => {
+    switch (fileType) {
+      case "video":
+        return (
+          <UploadVideo iconColor="transparent" iconSize={146} size={146} />
+        );
+      case "audio":
+        return (
+          <UploadAudio iconColor="transparent" iconSize={146} size={146} />
+        );
+      case "image":
+        return (
+          <UploadImage iconColor="transparent" iconSize={146} size={146} />
+        );
+      case "document":
+        return (
+          <UploadDocument iconColor="transparent" iconSize={146} size={146} />
+        );
+    }
+  };
+
+  const handleDragOver = (e: DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    setDraggingOver(true);
+  };
+
+  const handleDragLeave = (e: DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    setDraggingOver(false);
+  };
+
+  const handleDrop = (e: DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    setDraggingOver(false);
+
+    const files = e.dataTransfer.files;
+    const dataTransfer: DataTransfer = new DataTransfer();
+
+    for (let i = 0; i < files.length; i++) {
+      const file: File | null = files.item(i);
+
+      if (file !== null) {
+        dataTransfer.items.add(file);
+      }
+    }
+
+    const fileInput: HTMLInputElement | null = filesRef.current;
+
+    if (fileInput !== null) {
+      fileInput.files = dataTransfer.files;
+
+      if (onDrop) {
+        onDrop(fileInput.files);
+      }
+    }
+  };
+
+  const handleFileChange = () => {
+    const fileInput: HTMLInputElement | null = filesRef.current;
+
+    if (fileInput !== null) {
+      if (onDrop && fileInput.files && fileInput.files.length) {
+        onDrop(fileInput.files);
+      }
+    }
+  };
+
+  const removeFileFromState = () => {
+    if (filesRef.current) filesRef.current.value = "";
+  };
+
+  return (
+    <>
+      <div
+        style={
+          {
+            "--background": `var(--color-${color}-10)`,
+            "--border": `var(--color-${color}-7)`,
+            "--icon": `var(--color-${color}-5)`,
+            ...style,
+          } as React.CSSProperties
+        }
+        className={`${dropStyles.dropzone} ${draggingOver ? "dragover" : ""}`}
+        id={id}
+        onDragOver={handleDragOver}
+        onDragLeave={handleDragLeave}
+        onDrop={handleDrop}
+        {...rest}
+      >
+        {showGraphic && <div className={dropStyles.graphic}>{getImage()}</div>}
+        <div>
+          <div className={dropStyles.textContainer}>
+            {text}
+            {showBrowse && (
+              <Button
+                size="small"
+                buttonColor="transparent"
+                onClick={() => filesRef.current?.click()}
+                padded={false}
+              >
+                Browse
+              </Button>
+            )}
+          </div>
+          {subtext && <p className={dropStyles.textContainer}>{subtext}</p>}
+        </div>
+        <input
+          data-testid="dropzone-upload-input"
+          ref={filesRef}
+          type="file"
+          multiple={multiple}
+          accept={acceptableFiletypes()}
+          name="Files"
+          onChange={handleFileChange}
+        />
+      </div>
+      {React.Children.map(children, (child) => {
+        if (React.isValidElement(child)) {
+          return React.cloneElement(child, {
+            handleUpload: () => filesRef.current?.click(),
+            removeFileFromState,
+          } as Partial<unknown> & React.Attributes);
+        }
+        return child;
+      })}
+    </>
+  );
+};

package/src/actions/Dropzone/index.ts

@@ -0,0 +1 @@
+export { Dropzone, type DropzoneProps } from "./Dropzone"

package/src/actions/Rate/Rate.module.scss

@@ -0,0 +1,17 @@
+.rate {
+    display: flex;
+    flex-direction: row;
+    place-content: center;
+    place-items: center;
+
+    font-size: var(--size-12);
+    font-weight: var(--weight-inter-semibold);
+    color: var(--color-grey-5);
+
+    .stars {
+        cursor: pointer;
+        display: flex;
+        flex-direction: row;
+        gap: 2px;
+    }
+}

package/src/actions/Rate/Rate.tsx

@@ -0,0 +1,53 @@
+import React, { CSSProperties, useState } from "react";
+import { Star } from "@soul-refiner/icons/src";
+import rateStyles from "./Rate.module.scss";
+
+export interface RateProps {
+  ownRating?: number;
+  label?: string;
+  direction?: "vertical" | "horizontal";
+  onClickRating: (rating: number) => void;
+}
+
+export const Rate = ({
+  ownRating = 0,
+  label,
+  direction = "vertical",
+  onClickRating,
+}: RateProps) => {
+  const [starsHover, setStarsHover] = useState<number>(ownRating);
+
+  const stars: number[] = [1, 2, 3, 4, 5];
+
+  const style: CSSProperties = {
+    flexDirection: direction === "vertical" ? "column" : "row",
+  };
+
+  return (
+    <div
+      className={rateStyles.rate}
+      style={style}
+      onMouseLeave={() => setStarsHover(ownRating)}
+    >
+      {label && label}
+      <div className={rateStyles.stars}>
+        {stars.map((star, index) => {
+          const active = index + 1 <= starsHover;
+          const fills = active
+            ? `hsl(${40 - star * 2.3}deg 100% 50%)`
+            : undefined;
+          return (
+            <Star
+              key={index}
+              style={{ height: "auto", width: "auto", padding: 0 }}
+              fill={fills}
+              className={index + 1 <= starsHover ? "hover" : ""}
+              onMouseOver={() => setStarsHover(star)}
+              onClick={() => onClickRating(star)}
+            />
+          );
+        })}
+      </div>
+    </div>
+  );
+};

package/src/actions/Rate/index.ts

@@ -0,0 +1 @@
+export { Rate, type RateProps } from "./Rate"

package/src/actions/Switch/Switch.module.scss

@@ -0,0 +1,35 @@
+.switch {
+    display: flex;
+    flex-direction: row;
+    padding: 4px;
+    border-radius: 35px;
+    background-color: var(--color-blue-9);
+
+    &> div {
+        padding: 4px 16px;
+        border-radius: 1vw;
+        font-weight: var(--weight-inter-semibold);
+        user-select: none;
+        flex-grow: 1;
+        display: flex;
+        justify-content: center;
+        
+    }
+
+    [class~=active] {
+        background-color: #FFF;
+        color: var(--color-blue-3);
+    }
+
+    [class~=inactive] {
+        color: var(--color-blue-6);
+        cursor: pointer;
+    }
+
+    
+}
+
+.fluid {
+    align-self: stretch;
+    place-content: center;
+}

package/src/actions/Switch/Switch.spec.js

@@ -0,0 +1,31 @@
+import React from "react";
+import "@testing-library/jest-dom";
+import { render, screen } from "@testing-library/react";
+
+import { Switch } from "./Switch";
+
+const generateMockProps = props => ({
+  ...props,
+});
+
+describe("Switch", () => {
+  it("renders the switch", () => {
+    const props = generateMockProps({
+      optionA: "Option A",
+      optionB: "Option B"
+    });
+    render(<Switch {...props} />);
+    expect(screen.getByText("Option A"));
+    expect(screen.getByText("Option B"));
+  });
+
+  it("changes the active index", () => {
+    const props = generateMockProps({
+      optionA: "Option A",
+      optionB: "Option B",
+      active: 1,
+    });
+    render(<Switch {...props} />);
+    expect(screen.getByText("Option B")).toHaveClass("active");
+  });
+});