@soul-refiner/design-system 0.0.18 → 0.0.20

package/src/actions/Dropdown/Dropdown.tsx

@@ -1,224 +0,0 @@
-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

@@ -1,3 +0,0 @@
-export {
-  Dropdown
-} from "./Dropdown";

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

@@ -1,48 +0,0 @@
-@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

@@ -1,60 +0,0 @@
-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

@@ -1,191 +0,0 @@
-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

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

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

@@ -1,17 +0,0 @@
-.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

@@ -1,53 +0,0 @@
-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

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

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

@@ -1,35 +0,0 @@
-.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

@@ -1,31 +0,0 @@
-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");
-  });
-});

package/src/actions/Switch/Switch.tsx

@@ -1,34 +0,0 @@
-import React from "react";
-import switchStyles from "./Switch.module.scss";
-
-export interface SwitchProps {
-  active: string;
-  fluid?: boolean;
-  onClick?: (option: string) => void;
-  options: string[];
-}
-
-export const Switch = ({
-  active,
-  fluid = true,
-  onClick,
-  options,
-}: SwitchProps) => {
-  return (
-    <div
-      className={`${switchStyles.switch} switch ${
-        !!fluid ? switchStyles.fluid : ""
-      }`}
-    >
-      {options.map((option, index) => (
-        <div
-          key={"switch-option-" + index.toString(36)}
-          className={active === option ? "active" : "inactive"}
-          onClick={() => onClick && onClick(option)}
-        >
-          {option}
-        </div>
-      ))}
-    </div>
-  );
-};