@soul-refiner/design-system 0.0.18 → 0.0.20

package/dist/src/inputs/CalendarInput/CalendarInput.spec.js

@@ -1,19 +0,0 @@
-import React from "react";
-import "@testing-library/jest-dom";
-import { fireEvent, render, screen } from "@testing-library/react";
-
-import { CalendarInput } from "./CalendarInput";
-
-const generateMockProps = props => ({
-  ...props,
-});
-
-describe("Calendar Input", () => {
-  it("selects the date", () => {
-    const props = generateMockProps({});
-    render(<CalendarInput {...props} />);
-    const input = screen.getByTestId("calendar-input");
-    fireEvent.click(input);
-    fireEvent.change(input, { target: { value: "2022-09-23" } })
-  });
-});

package/dist/src/inputs/CalendarInput/CalendarInput.tsx

@@ -1,29 +0,0 @@
-import React from "react";
-import calendarStyles from "./CalendarInput.module.scss";
-import { Calendar } from "@soul-refiner/icons/src";
-
-export interface CalendarInputProps extends React.HTMLProps<HTMLInputElement> {
-  icon?: boolean;
-}
-
-export const CalendarInput = ({ icon = true, ...rest }: CalendarInputProps) => {
-  const ref = React.useRef<HTMLInputElement>(null);
-  const handleWrapperClick = () => {
-    if (ref?.current && (ref.current as any)?.showPicker) {
-      (ref.current as any).showPicker();
-    }
-  };
-
-  return (
-    <label className={calendarStyles.calendar} onClick={handleWrapperClick}>
-      {icon && <Calendar />}
-      <input
-        {...rest}
-        data-testid="calendar-input"
-        type="date"
-        data-form-type="other"
-        ref={ref}
-      />
-    </label>
-  );
-};

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

@@ -1,23 +0,0 @@
-@use "@soul-refiner/styles/mixins";
-
-.checkbox {
-  @include mixins.flex($justify: center, $align: center);
-  width: 22px;
-  height: 22px;
-  border: 1px solid var(--color-grey-7);
-  border-radius: 4px;
-
-  &:not([class~="has-onclick"]) {
-    user-select: none;
-  }
-}
-
-.active {
-  background-color: var(--color-blue-3);
-  border: 1px solid var(--color-grey-3);
-}
-
-.disabled {
-  background-color: var(--color-grey-9) !important;
-  border: 1px solid transparent;
-}

package/dist/src/inputs/CheckboxInput/CheckboxInput.tsx

@@ -1,39 +0,0 @@
-import React from "react";
-import { Check } from "@soul-refiner/icons/src";
-import styles from "./CheckboxInput.module.scss";
-
-export interface CheckboxInputProps {
-  disabled?: boolean;
-  onClick?: () => undefined;
-  selected: boolean;
-}
-
-export const CheckboxInput = ({
-  disabled,
-  onClick,
-  selected,
-}: CheckboxInputProps) => {
-  if (selected) {
-    return (
-      <div
-        className={`${styles.checkbox} ${styles.active} ${
-          onClick ? "has-onclick" : ""
-        } ${disabled ? styles.disabled : ""}`.trim()}
-      >
-        <Check
-          fill={disabled ? "var(--color-grey-3)" : "var(--color-grey-10)"}
-          iconColor="transparent"
-          iconSize={14}
-          size={22}
-        />
-      </div>
-    );
-  }
-  return (
-    <div
-      className={`${styles.checkbox} ${onClick ? "has-onclick" : ""} ${
-        disabled ? styles.disabled : ""
-      }`.trim()}
-    />
-  );
-};

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

@@ -1,48 +0,0 @@
-@use "@soul-refiner/styles/_mixins";
-
-.input {
-  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.05);
-  border-radius: 24px;
-  width: 100%;
-
-  [class~="header"] {
-    @include mixins.flex($gap: 16px, $align: center);
-    border-bottom: 1px solid var(--color-grey-9);
-    padding: 16px 24px;
-  }
-
-  textarea {
-    flex: 1;
-    margin: 14px 24px;
-    width: calc(100% - 48px);
-    padding: 30px 20px;
-  }
-
-  [class~="actions-wrapper"] {
-    padding: 16px 24px;
-    border-top: 1px solid var(--color-grey-9);
-
-    div {
-      @include mixins.flex($gap: 10px);
-    }
-
-    [class~="actions-bar"] {
-      border: 1px solid rgba(0, 0, 0, 0.05);
-      box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.05);
-      border-radius: 33px;
-      margin-top: 16px;
-      padding: 16px 24px;
-      justify-content: flex-end;
-      align-items: center;
-
-      button {
-        border-radius: 50%;
-      }
-
-      p {
-        color: var(--color-grey-4);
-        margin-right: auto;
-      }
-    }
-  }
-}

package/dist/src/inputs/FeedInput/FeedInput.spec.js

@@ -1,16 +0,0 @@
-import React from "react";
-import "@testing-library/jest-dom";
-import { render, screen, fireEvent } from "@testing-library/react";
-
-
-import { FeedInput } from "./FeedInput";
-
-
-describe("Feed Input", () => {
-  it("renders the text that is typed into it", () => {
-    render(<FeedInput />);
-    const textarea = screen.getByRole("textbox");
-    fireEvent.change(textarea, { target: { value: "God is good" } });
-    expect(textarea.value).toEqual("God is good");
-  });
-})

package/dist/src/inputs/FeedInput/FeedInput.tsx

@@ -1,197 +0,0 @@
-import React from "react";
-import feedInputStyles from "./FeedInput.module.scss";
-import { PostInput } from "../PostInput/PostInput";
-import { Button } from "../../actions";
-import {
-  Anchor,
-  Bell,
-  CircleCheck,
-  CommentOutline,
-  Emoji,
-  Eye,
-  Gear,
-  Link,
-  Media,
-  PenToPaper,
-  Video,
-} from "@soul-refiner/icons/src";
-
-export interface FeedInputProps extends React.HTMLProps<HTMLTextAreaElement> {}
-
-export const FeedInput = ({ onChange, value, ...rest }: FeedInputProps) => {
-  const [editMode, setEditMode] = React.useState("");
-
-  const handleEditMode = (event: React.MouseEvent) => {
-    event.preventDefault();
-    setEditMode((prev) => {
-      const value = (event.target as HTMLButtonElement).value;
-      if (prev === value) {
-        return "";
-      }
-      return value;
-    });
-  };
-
-  const handlePost = () => {
-    // TODO
-  };
-
-  return (
-    <fieldset className={`${feedInputStyles.input}`}>
-      <div className="header">
-        <PenToPaper fill="var(--colorify-blue-3)" iconSize={20} size={20} />
-        <h5>Leave a Post</h5>
-      </div>
-      <PostInput
-        onChange={onChange}
-        placeholder="Share something with the community"
-        value={value}
-        {...rest}
-      />
-      <div className="actions-wrapper">
-        <div>
-          <Button
-            bold={false}
-            buttonColor={
-              editMode === "media" ? "var(--colorify-orange-1)" : "#FFF"
-            }
-            color={
-              editMode === "media"
-                ? "var(--colorify-orange-3)"
-                : "var(--color-grey-4)"
-            }
-            icon={
-              <Media fill="var(--colorify-orange-3)" iconSize={15} size={18} />
-            }
-            onClick={handleEditMode}
-            size="small"
-            style={{
-              border: `1px solid ${
-                editMode === "media"
-                  ? "var(--colorify-orange-2)"
-                  : "var(--color-grey-8)"
-              }`,
-            }}
-            uppercase={false}
-            value="media"
-          >
-            Add Media
-          </Button>
-          <Button
-            bold={false}
-            buttonColor={
-              editMode === "settings" ? "var(--colorify-blue-1)" : "#FFF"
-            }
-            color={
-              editMode === "settings"
-                ? "var(--colorify-blue-3)"
-                : "var(--color-grey-4)"
-            }
-            icon={
-              <Gear fill="var(--colorify-blue-3)" iconSize={18} size={18} />
-            }
-            onClick={handleEditMode}
-            size="small"
-            style={{
-              border: `1px solid ${
-                editMode === "settings"
-                  ? "var(--colorify-blue-2)"
-                  : "var(--color-grey-8)"
-              }`,
-            }}
-            uppercase={false}
-            value="settings"
-          >
-            Post Settings
-          </Button>
-          <Button
-            bold={false}
-            buttonColor="var(--color-blue-4)"
-            color="var(--color-grey-10)"
-            onClick={handlePost}
-            size="small"
-            style={{
-              marginLeft: "auto",
-            }}
-            uppercase={false}
-          >
-            Post
-          </Button>
-        </div>
-        {editMode === "media" && (
-          <div className="actions-bar">
-            <p className="body body-large bold">Add to post</p>
-            <Media
-              as="button"
-              fill="#EFB520"
-              iconSize={18}
-              size={34}
-              style={{ backgroundColor: "#FFF3C7" }}
-            />
-            <Video
-              as="button"
-              fill="#FF5722"
-              iconSize={18}
-              size={34}
-              style={{ backgroundColor: "#FFEAD2" }}
-            />
-            <Emoji
-              as="button"
-              fill="#F72F4D"
-              iconSize={18}
-              size={34}
-              style={{ backgroundColor: "#FEDED5" }}
-            />
-            <Link
-              as="button"
-              fill="#FB19B4"
-              iconSize={18}
-              size={34}
-              style={{ backgroundColor: "#FED3E1" }}
-            />
-          </div>
-        )}
-        {editMode === "settings" && (
-          <div className="actions-bar">
-            <p className="body body-large bold">Post Settings</p>
-            <CircleCheck
-              as="button"
-              fill="#7A5BF5"
-              iconSize={18}
-              size={34}
-              style={{ backgroundColor: "#ECE1FE" }}
-            />
-            <Anchor
-              as="button"
-              fill="#6C75F7"
-              iconSize={18}
-              size={34}
-              style={{ backgroundColor: "#DFEAFF" }}
-            />
-            <Bell
-              as="button"
-              fill="#24A3D0"
-              iconSize={18}
-              size={34}
-              style={{ backgroundColor: "#CFF9F2" }}
-            />
-            <Eye
-              as="button"
-              fill="#1EA385"
-              iconSize={18}
-              size={34}
-              style={{ backgroundColor: "#D4FAE4" }}
-            />
-            <CommentOutline
-              as="button"
-              fill="#2FA52D"
-              iconSize={18}
-              size={34}
-              style={{ backgroundColor: "#E3FAD6" }}
-            />
-          </div>
-        )}
-      </div>
-    </fieldset>
-  );
-};

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

@@ -1,48 +0,0 @@
-@use "@soul-refiner/styles/_mixins";
-
-.inboxinput {
-  @include mixins.flex($align: center);
-  position: relative;
-  padding: 10px 17px;
-  border-radius: 47px;
-  width: 100%;
-
-  textarea {
-    flex: 1;
-    appearance: none;
-    border: none;
-    outline: none;
-    resize: none;
-    font-size: 18px;
-  }
-
-  em-emoji-picker {
-    position: absolute;
-    top: -443px;
-    left: 25px;
-  }
-
-  [class~="icon"] {
-    &:hover {
-      cursor: pointer;
-      & > svg {
-        fill: var(--color-blue-6);
-      }
-    }
-  }
-
-  [class~="icon"]:first-of-type {
-    margin-right: 32px;
-  }
-
-  [class~="icon"]:last-of-type {
-    margin-right: unset;
-  }
-
-  [class~="divider"] {
-    width: 1px;
-    max-width: 1px;
-    background: var(--color-grey-8);
-    margin-right: 32px;
-  }
-}

package/dist/src/inputs/InboxInput/InboxInput.spec.js

@@ -1,19 +0,0 @@
-import React from "react";
-import "@testing-library/jest-dom";
-import { render, screen, fireEvent } from "@testing-library/react";
-
-
-import { InboxInput } from "./InboxInput";
-
-const props = {
-  onSubmit: jest.fn()
-};
-
-describe("Inbox Input", () => {
-  it("renders the text that is typed into it", () => {
-    render(<InboxInput {...props} />);
-    const textarea = screen.getByRole("textbox");
-    fireEvent.change(textarea, { target: { value: "God is good" } });
-    expect(textarea.value).toEqual("God is good");
-  });
-})

package/dist/src/inputs/InboxInput/InboxInput.tsx

@@ -1,97 +0,0 @@
-import React from "react";
-import emojiData from "@soul-refiner/styles/emojis.json";
-import Picker from "@emoji-mart/react";
-import inboxInputStyles from "./InboxInput.module.scss";
-import { Emoji, SendOutline } from "@soul-refiner/icons/src";
-
-export interface InboxInputProps extends React.HTMLProps<HTMLTextAreaElement> {}
-
-export const InboxInput = ({ onChange, onSubmit, value }: InboxInputProps) => {
-  const ref = React.useRef<HTMLTextAreaElement>(null);
-  const [showPicker, setShowPicker] = React.useState(false);
-
-  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 handleAddEmoji = ({ native }: Record<string, string>) => {
-    const prevValue = ref.current?.value;
-    onChange &&
-      onChange({
-        target: { value: prevValue + native },
-      } as unknown as React.FormEvent<HTMLTextAreaElement>);
-    if (ref.current) {
-      ref.current.style.height = "0px";
-      const scrollHeight = ref.current.scrollHeight;
-      ref.current.style.height = scrollHeight + "px";
-    }
-  };
-
-  const handlePicker = (event: React.MouseEvent) => {
-    event.stopPropagation();
-    setShowPicker((prev) => !prev);
-  };
-
-  const handlePickerBlur = () => setShowPicker(false);
-
-  const handleSubmit = (event: React.FormEvent) => {
-    event.preventDefault();
-    onSubmit && onSubmit(event as React.FormEvent<HTMLTextAreaElement>);
-  };
-
-  const dividerHeight =
-    ref.current?.scrollHeight && ref.current?.scrollHeight > 46
-      ? ref.current?.scrollHeight - 11
-      : 47;
-
-  return (
-    <form
-      className={`${inboxInputStyles.inboxinput} shadow-small`}
-      onClick={() => ref.current?.focus()}
-    >
-      <Emoji
-        data-testid="emoji-button"
-        fill="var(--color-grey-6)"
-        iconSize={30}
-        onClick={handlePicker}
-        size={39}
-      />
-      {showPicker && (
-        <Picker
-          data={emojiData}
-          onEmojiSelect={handleAddEmoji}
-          onClickOutside={handlePickerBlur}
-          maxFrequentRows={1}
-          navPosition="none"
-          previewPosition="none"
-          perLine={9}
-          style={{ position: "absolute" }}
-          theme="auto"
-        />
-      )}
-      <div className="divider" style={{ height: dividerHeight }}></div>
-      <textarea
-        onChange={onChange}
-        placeholder="Type your reply here..."
-        ref={ref}
-        value={value}
-      />
-      <SendOutline
-        as="button"
-        fill="var(--color-grey-10)"
-        iconColor="#2393EF"
-        iconSize={28}
-        onClick={handleSubmit}
-        size={70}
-        style={{
-          borderRadius: "50%",
-          marginLeft: "32px",
-        }}
-      />
-    </form>
-  );
-};

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

@@ -1,49 +0,0 @@
-.postinput {
-  width: 100%;
-  resize: none;
-  border: 1px solid var(--color-grey-9);
-  border-radius: 16px;
-  background-color: var(--color-grey-10);
-  box-sizing: border-box;
-  padding: 10px 20px;
-  font-size: 16px;
-  line-height: 24px;
-  color: var(--color-grey-1);
-  overflow-y: hidden;
-
-  &:focus {
-    outline: none;
-  }
-
-  &::placeholder {
-    color: var(--color-grey-7);
-  }
-
-  &[class~=has-character-count] {
-    padding-right: 76px;
-    position: relative;
-
-    &::after {
-      content: #{var(--value) / var(--maxLength)};
-      position: absolute;
-      right: 16px;
-      top: calc(50% - 12px);
-    }
-  }
-}
-
-.wrapper {
-  width: 100%;
-  position: relative;
-
-  textarea {
-    padding-right: 106px;
-  }
-  
-  span {
-    position: absolute;
-    right: 16px;
-    top: calc(50% - 10px);
-    color: var(--color-grey-4);
-  }
-}

package/dist/src/inputs/PostInput/PostInput.spec.js

@@ -1,19 +0,0 @@
-import React from "react";
-import "@testing-library/jest-dom";
-import { render, screen, fireEvent } from "@testing-library/react";
-
-
-import { PostInput } from "./PostInput";
-
-const props = {
-  onSubmit: jest.fn()
-};
-
-describe("Post Input", () => {
-  it("renders the text that is typed into it", () => {
-    render(<PostInput {...props} />);
-    const textarea = screen.getByRole("textbox");
-    fireEvent.change(textarea, { target: { value: "God is good" } });
-    expect(textarea.value).toEqual("God is good");
-  });
-})

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

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