@soul-refiner/design-system 0.0.4 → 0.0.5

package/src/inputs/CalendarInput/CalendarInput.module.scss

@@ -0,0 +1,38 @@
+.calendar {
+    display: flex;
+    flex-direction: row;
+    gap: 16px;
+    place-items: center;
+    
+    [class~=icon] svg {
+        fill: var(--color-grey-3);
+    }
+
+    input[type=date] {
+        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;
+
+        &::-webkit-datetime-edit-day-field:focus,
+        &::-webkit-datetime-edit-month-field:focus,
+        &::-webkit-datetime-edit-year-field:focus {
+            background-color: transparent;
+            color: var(--color-grey-3);
+        }
+
+        &:focus {
+            outline: none;
+        }
+
+        &::placeholder {
+            color: var(--color-grey-7);
+        }
+    }
+}

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

@@ -0,0 +1,19 @@
+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/src/inputs/CalendarInput/CalendarInput.tsx

@@ -0,0 +1,29 @@
+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/src/inputs/CalendarInput/index.ts

@@ -0,0 +1 @@
+export { CalendarInput, type CalendarInputProps } from "./CalendarInput";

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

@@ -0,0 +1,23 @@
+@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/src/inputs/CheckboxInput/CheckboxInput.tsx

@@ -0,0 +1,39 @@
+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/src/inputs/CheckboxInput/index.ts

@@ -0,0 +1 @@
+export { CheckboxInput, type CheckboxInputProps } from "./CheckboxInput";

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

@@ -0,0 +1,48 @@
+@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/src/inputs/FeedInput/FeedInput.spec.js

@@ -0,0 +1,16 @@
+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/src/inputs/FeedInput/FeedInput.tsx

@@ -0,0 +1,197 @@
+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/src/inputs/FeedInput/index.ts

@@ -0,0 +1 @@
+export { FeedInput, type FeedInputProps } from "./FeedInput";

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

@@ -0,0 +1,48 @@
+@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/src/inputs/InboxInput/InboxInput.spec.js

@@ -0,0 +1,19 @@
+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/src/inputs/InboxInput/InboxInput.tsx

@@ -0,0 +1,97 @@
+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/src/inputs/InboxInput/index.ts

@@ -0,0 +1 @@
+export { InboxInput, type InboxInputProps } from "./InboxInput";

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

@@ -0,0 +1,49 @@
+.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/src/inputs/PostInput/PostInput.spec.js

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