@soul-refiner/design-system 0.0.5 → 0.0.6

package/src/inputs/TextInput/TextInput.module.scss

@@ -1,35 +0,0 @@
-@use "@soul-refiner/styles/mixins";
-
-.textField {
-  position: relative;
-  width: 100%;
-  display: flex;
-  padding: 12px 16px;
-  border-radius: var(--border-radius-normal);
-  background-color: var(--color-blue-10);
-
-  .counter {
-    @include mixins.font(400, 16px, 24px);
-    position: absolute;
-    bottom: 8px;
-    right: 16px;
-    color: #a4b0bf;
-  }
-
-  textarea[type="text"] {
-    width: 100%;
-    border: none;
-    resize: none;
-    background-color: transparent;
-    font-size: var(--size-16);
-    color: var(--color-grey-1);
-
-    &:focus {
-      outline: none;
-    }
-  }
-}
-
-.hasCharacterCount {
-  padding-bottom: 32px;
-}

package/src/inputs/TextInput/TextInput.tsx

@@ -1,46 +0,0 @@
-import React from "react";
-import styles from "./TextInput.module.scss";
-
-export interface TextInputProps extends React.HTMLProps<HTMLTextAreaElement> {
-  characterCount?: boolean;
-}
-
-export const TextInput = ({
-  className,
-  characterCount = true,
-  maxLength,
-  value,
-  ...rest
-}: TextInputProps) => {
-  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]);
-
-  return (
-    <div
-      className={`${styles.textField} ${
-        characterCount ? styles.hasCharacterCount : ""
-      }`}
-    >
-      <textarea
-        className={`${className ? " " + className : ""}`}
-        type="text"
-        maxLength={maxLength}
-        ref={ref}
-        value={value}
-        {...rest}
-      />
-      {characterCount && value !== undefined && maxLength && (
-        <span className={styles.counter}>
-          {value.toString().length.toString()} / {maxLength.toString()}
-        </span>
-      )}
-    </div>
-  );
-};

package/src/inputs/TextInput/index.ts

@@ -1 +0,0 @@
-export { TextInput, type TextInputProps } from "./TextInput";

package/src/inputs/index.ts

@@ -1,10 +0,0 @@
-export { CalendarInput, type CalendarInputProps } from "./CalendarInput";
-export { CheckboxInput, type CheckboxInputProps } from "./CheckboxInput";
-export { FeedInput, type FeedInputProps } from "./FeedInput";
-export { InboxInput, type InboxInputProps } from "./InboxInput";
-export { PostInput, type PostInputProps } from "./PostInput";
-export { RadioInput, type RadioInputProps } from "./RadioInput";
-export { SearchInput, type SearchInputProps } from "./SearchInput";
-export { SelectInput, type SelectInputProps } from "./SelectInput";
-export { TagInput, type TagInputProps } from "./TagInput";
-export { TextInput, type TextInputProps } from "./TextInput";

package/src/lists/ContactDetails/ContactDetails.module.scss

@@ -1,70 +0,0 @@
-@use "@soul-refiner/styles/mixins";
-
-.contactdetails {
-  @include mixins.flex($dir: column, $gap: 19px);
-  position: relative;
-  border-radius: var(--border-radius-normal);
-  padding: 32px;
-
-  &[class~="not-editing"] {
-    @include mixins.hover-editable();
-    cursor: pointer;
-  }
-
-  div {
-    @include mixins.flex($gap: 24px);
-  }
-
-  a {
-    color: var(--color-blue-3);
-    cursor: pointer;
-    &:hover {
-      text-decoration: underline;
-    }
-  }
-
-  input {
-    box-sizing: border-box;
-    box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.1);
-    padding: 5px 16px;
-    background-color: #f2f8ff;
-    border: none;
-    border-radius: var(--border-radius-small);
-
-    &[class~="link"] {
-      color: var(--color-blue-3);
-    }
-
-    &:focus {
-      outline: none;
-    }
-  }
-}
-
-.wrapper {
-  @include mixins.flex($dir: column, $gap: 19px);
-  width: fit-content;
-
-  [class~="actions"] {
-    @include mixins.flex($justify: flex-end, $gap: 4px);
-    width: 100%;
-    button {
-      background-color: var(--color-grey-10);
-      box-shadow: 0px 3px 5px rgba(9, 30, 66, 0.2),
-        0px 0px 1px rgba(9, 30, 66, 0.31);
-      border-radius: 3px;
-
-      &:hover {
-        background-color: var(--color-blue-9);
-      }
-
-      &:active {
-        background-color: var(--color-grey-4);
-        color: var(--color-grey-10);
-        svg {
-          fill: var(--color-grey-10);
-        }
-      }
-    }
-  }
-}

package/src/lists/ContactDetails/ContactDetails.spec.js

@@ -1,69 +0,0 @@
-import React from "react";
-import "@testing-library/jest-dom";
-import { render, screen, fireEvent } from "@testing-library/react";
-
-
-import { ContactDetails } from "./ContactDetails";
-
-const props = {
-  email: "support@soulrefiner.com",
-  location: "Stuart, FL, USA",
-  phone: "(941) 251-8670",
-  url: "https://soulrefiner.com",
-  onSubmit: jest.fn(),
-}
-
-describe("Contact Details renders", () => {
-  it("the email, location, phone, and url", () => {
-    render(<ContactDetails {...props} />);
-    expect(screen.getByText("support@soulrefiner.com"));
-    expect(screen.getByText("Stuart, FL, USA"));
-    expect(screen.getByText("(941) 251-8670"));
-    expect(screen.getByText("https://soulrefiner.com"));
-  });
-
-  it("an editable state", () => {
-    render(<ContactDetails {...props} />);
-    const contactDetails = screen.getByTestId("contact-details");
-    fireEvent.click(contactDetails);
-    expect(screen.getByTestId("location").tagName).toEqual("INPUT");
-    expect(screen.getByTestId("phone").tagName).toEqual("INPUT");
-    expect(screen.getByTestId("email").tagName).toEqual("INPUT");
-    expect(screen.getByTestId("url").tagName).toEqual("INPUT");
-  });
-
-  it("inputs that can change", () => {
-    render(<ContactDetails {...props} />);
-    const contactDetails = screen.getByTestId("contact-details");
-    fireEvent.click(contactDetails);
-    const locationInput = screen.getByTestId("location");
-    fireEvent.change(locationInput, { target: { value: "Port St Lucie, FL, USA" } });
-    expect(locationInput.value).toEqual("Port St Lucie, FL, USA");
-  });
-
-  it("a submitable form", () => {
-    render(<ContactDetails {...props} />);
-    const contactDetails = screen.getByTestId("contact-details");
-    fireEvent.click(contactDetails);
-    const submitButton = screen.getByTestId("contact-details-submit")
-    fireEvent.click(submitButton);
-    expect(props.onSubmit).toHaveBeenCalledWith({
-      email: "support@soulrefiner.com",
-      location: "Stuart, FL, USA",
-      phone: "(941) 251-8670",
-      url: "https://soulrefiner.com",
-    });
-  });
-
-  it("a resetable form", () => {
-    render(<ContactDetails {...props} />);
-    const contactDetails = screen.getByTestId("contact-details");
-    fireEvent.click(contactDetails);
-    const resetButton = screen.getByTestId("contact-details-reset")
-    fireEvent.click(resetButton);
-    expect(screen.getByTestId("location").tagName).toEqual("P");
-    expect(screen.getByTestId("phone").tagName).toEqual("A");
-    expect(screen.getByTestId("email").tagName).toEqual("A");
-    expect(screen.getByTestId("url").tagName).toEqual("A");
-  });
-})

package/src/lists/ContactDetails/ContactDetails.tsx

@@ -1,185 +0,0 @@
-import React from "react";
-import { Component } from "@soul-refiner/utils/src";
-import contactDetailsStyles from "./ContactDetails.module.scss";
-import {
-  Check,
-  Close,
-  Location,
-  Mail,
-  Pencil,
-  Phone,
-  URL,
-} from "@soul-refiner/icons/src";
-
-export interface ContactDetailsProps {
-  email?: string;
-  location?: string;
-  url?: string;
-  phone?: string;
-  onSubmit: (props: {
-    email: string;
-    location: string;
-    url: string;
-    phone: string;
-  }) => void;
-}
-
-export const ContactDetails = ({
-  email = "",
-  location = "",
-  url = "",
-  phone = "(000) 000-0000",
-  onSubmit,
-}: ContactDetailsProps) => {
-  const [editing, setEditing] = React.useState(false);
-  const [details, setState] = React.useState(() => ({
-    location: location,
-    email: email,
-    url: url,
-    phone: phone,
-  }));
-
-  const handleEditing = (event: React.MouseEvent) => {
-    event.preventDefault();
-    event.stopPropagation();
-    setEditing((prev) => !prev);
-  };
-
-  const handleChange = (event: React.FormEvent) => {
-    const value = (event.target as HTMLInputElement).value;
-    if ((event.target as HTMLInputElement).name === "phone") {
-      let phoneNumber = value.replace(/[^\d]/g, "");
-      if (phoneNumber.length < 4) {
-        setState((prev) => ({
-          ...prev,
-          phone: phoneNumber,
-        }));
-        return;
-      }
-      if (phoneNumber.length < 7) {
-        setState((prev) => ({
-          ...prev,
-          phone: `(${phoneNumber.slice(0, 3)}) ${phoneNumber.slice(3)}`,
-        }));
-        return;
-      }
-      setState((prev) => ({
-        ...prev,
-        phone: `(${phoneNumber.slice(0, 3)}) ${phoneNumber.slice(
-          3,
-          6
-        )}-${phoneNumber.slice(6, 10)}`,
-      }));
-      return;
-    }
-    setState((prev) => ({
-      ...prev,
-      [(event.target as HTMLInputElement).name]: value,
-    }));
-  };
-
-  const handleReset = () => {
-    setState({
-      location: location,
-      email: email,
-      url: url,
-      phone: phone,
-    });
-    setEditing(false);
-  };
-
-  const handleSubmit = () => {
-    setEditing(false);
-    onSubmit(details);
-  };
-
-  return (
-    <div className={contactDetailsStyles.wrapper}>
-      <Component
-        as={editing ? "form" : "div"}
-        className={`${contactDetailsStyles.contactdetails} shadow-small ${
-          editing ? "" : "not-editing"
-        }`}
-        data-edit-caption="Edit Contact Details"
-        data-testid="contact-details"
-        onClick={handleEditing}
-        onSubmit={handleSubmit}
-      >
-        <div>
-          <Location fill="var(--color-grey-3)" iconSize={22} size={24} />
-          <Component
-            as={editing ? "input" : "p"}
-            className="body body-large"
-            data-testid="location"
-            children={editing ? undefined : details.location}
-            name="location"
-            onChange={handleChange}
-            value={details.location}
-          />
-        </div>
-        <div>
-          <Mail fill="var(--color-grey-3)" iconSize={22} size={24} />
-          <Component
-            as={editing ? "input" : "a"}
-            className="link body body-large"
-            data-testid="email"
-            children={editing ? undefined : details.email}
-            href={editing ? undefined : "mailto:" + details.email}
-            name="email"
-            onClick={(event: React.MouseEvent) => event.stopPropagation()}
-            onChange={handleChange}
-            value={details.email}
-          />
-        </div>
-        <div>
-          <URL fill="var(--color-grey-3)" iconSize={22} size={24} />
-          <Component
-            as={editing ? "input" : "a"}
-            className="link body body-large"
-            children={editing ? undefined : details.url}
-            data-testid="url"
-            href={editing ? undefined : details.url}
-            name="url"
-            onClick={(event: React.MouseEvent) => event.stopPropagation()}
-            onChange={handleChange}
-            value={details.url}
-          />
-        </div>
-        <div>
-          <Phone fill="var(--color-grey-3)" iconSize={20} size={24} />
-          <Component
-            as={editing ? "input" : "a"}
-            className="link body body-large"
-            children={editing ? undefined : details.phone}
-            data-testid="phone"
-            href={editing ? undefined : "tel:" + details.phone}
-            name="phone"
-            onClick={(event: React.MouseEvent) => event.stopPropagation()}
-            onChange={handleChange}
-            value={details.phone}
-          />
-        </div>
-      </Component>
-      {editing && (
-        <div className="actions">
-          <Check
-            as="button"
-            data-testid="contact-details-submit"
-            fill="var(--color-grey-4)"
-            iconSize={10}
-            onClick={handleSubmit}
-            size={32}
-          />
-          <Close
-            as="button"
-            data-testid="contact-details-reset"
-            fill="var(--color-grey-4)"
-            iconSize={10}
-            onClick={handleReset}
-            size={32}
-          />
-        </div>
-      )}
-    </div>
-  );
-};

package/src/lists/ContactDetails/index.ts

@@ -1 +0,0 @@
-export { ContactDetails, type ContactDetailsProps } from "./ContactDetails";

package/src/lists/index.ts

@@ -1 +0,0 @@
-export { ContactDetails, type ContactDetailsProps } from "./ContactDetails";

package/src/navigation/Breadcrumbs/Breadcrumbs.module.scss

@@ -1,18 +0,0 @@
-.breadcrumbs ul {
-    
-    display: flex;
-    flex-direction: row;
-    gap: 8px;
-    place-items: center;
-
-    a {
-        font-size: var(--size-20);
-        color: var(--color-grey-4);
-        font-weight: 400;
-        transition: 125ms opacity ease-in-out;
-
-        &:hover {
-            opacity: 0.5;
-        }
-    }
-}

package/src/navigation/Breadcrumbs/Breadcrumbs.spec.js

@@ -1,38 +0,0 @@
-import React from "react";
-import "@testing-library/jest-dom";
-import { render, screen } from "@testing-library/react";
-
-import { Breadcrumbs } from "./Breadcrumbs";
-
-const generateMockProps = props => ({
-  crumbs: [
-    { label: "Home", url: "#" },
-    { label: "Something", url: "#" },
-    { label: "Sub Something", url: "#" },
-    { label: "Current Page", url: "#" },
-  ],
-  ...props,
-});
-
-describe("Breadcrumbs", () => {
-  it("renders the collapsed breadcrumbs", () => {
-    const props = generateMockProps({
-      collapse: true,
-    });
-    render(<Breadcrumbs {...props} />);
-    expect(screen.getByText("Home"));
-    expect(screen.getByText("Current Page"));
-    expect(screen.getAllByText("...").length).toEqual(2);
-  });
-
-  it("renders all breadcrumbs", () => {
-    const props = generateMockProps({
-      collapse: false,
-    });
-    render(<Breadcrumbs {...props} />);
-    expect(screen.getByText("Home"));
-    expect(screen.getByText("Something"));
-    expect(screen.getByText("Sub Something"));
-    expect(screen.getByText("Current Page"));
-  });
-});

package/src/navigation/Breadcrumbs/Breadcrumbs.tsx

@@ -1,43 +0,0 @@
-import React from "react";
-import styles from "./Breadcrumbs.module.scss";
-import { ChevronRight } from "@soul-refiner/icons/src";
-
-export interface BreadcrumbsProps {
-  crumbs: Array<Breadcrumb>;
-  collapse: boolean;
-}
-
-export interface Breadcrumb {
-  label: string;
-  url: string;
-}
-
-export const Breadcrumbs = ({
-  crumbs = [
-    { label: "Home", url: "#" },
-    { label: "Something", url: "#" },
-    { label: "Sub Something", url: "#" },
-    { label: "Current Page", url: "#" },
-  ],
-  collapse,
-}: BreadcrumbsProps) => {
-  return (
-    <nav aria-label="breadcrumb-navigation" className={styles.breadcrumbs}>
-      <ul>
-        {crumbs.map((crumb, index) => {
-          const innerItem = index > 0 && index < crumbs.length - 1;
-          return (
-            <React.Fragment key={index + JSON.stringify(crumb)}>
-              {(innerItem || index === crumbs.length - 1) && <ChevronRight />}
-              <a href={crumb.url} title={crumb.label}>
-                <li key={index}>
-                  {innerItem && collapse ? "..." : crumb.label}
-                </li>
-              </a>
-            </React.Fragment>
-          );
-        })}
-      </ul>
-    </nav>
-  );
-};

package/src/navigation/Breadcrumbs/index.ts

@@ -1 +0,0 @@
-export { Breadcrumbs, type BreadcrumbsProps } from "./Breadcrumbs";

package/src/navigation/Drawer/Drawer.module.scss

@@ -1,104 +0,0 @@
-@use "@soul-refiner/styles/mixins";
-
-.background {
-  position: fixed;
-  height: 100vh;
-  width: 100vw;
-  top: 0;
-  left: 0;
-  right: 0;
-  z-index: 149;
-  overflow: hidden;
-  background: radial-gradient(
-    79.02% 79.02% at 50% 0%,
-    rgba(0, 27, 58, 0.8) 0%,
-    rgba(0, 0, 0, 0.8) 100%
-  );
-  backdrop-filter: blur(5px);
-  cursor: pointer;
-}
-
-.drawer {
-  position: fixed;
-  top: 0;
-  right: 0;
-  height: 100vh;
-  max-width: 930px;
-  width: 100%;
-  z-index: 150;
-  border-radius: 20px 0px 0px 20px;
-  background-color: var(--background-color);
-  margin-right: 0;
-  transition: margin-right 0.5s;
-
-  &[class~="closed"] {
-    margin-right: -100vw;
-  }
-
-  [class~="children-wrapper"] {
-    @include mixins.flex($dir: column, $gap: 24px);
-    height: calc(100vh - 88px);
-    position: relative;
-    padding: 24px;
-    margin-right: 8px;
-    overflow: auto;
-
-    [class~="tabs-wrapper"] {
-      height: 64px;
-      width: 100%;
-      border-bottom: 4px solid var(--color-grey-9);
-      border-radius: 4px;
-
-      & > * {
-        height: 64px;
-      }
-    }
-
-    &[class~="with-actions"] {
-      height: calc(100vh - 135px);
-    }
-
-    &::-webkit-scrollbar-track {
-      margin: 40px 0px 15px 0px;
-    }
-  }
-
-  [class~="actions-wrapper"] {
-    @include mixins.flex($justify: flex-end, $align: center, $gap: 24px);
-    padding: 16px 36px 16px 24px;
-    background-color: #ffffff;
-    border-top: 1px solid var(--color-grey-9);
-    border-bottom-left-radius: 20px;
-    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
-
-    button {
-      width: 200px;
-      padding-left: 23px;
-      padding-right: 23px;
-    }
-  }
-}
-
-.heading {
-  @include mixins.flex($align: center, $justify: space-between);
-  padding: 16px 24px;
-  border-top-left-radius: 20px;
-  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
-  background-color: #ffffff;
-  @include mixins.font(700, 24px, 32px);
-  color: var(--color-grey-4);
-  & > * {
-    @include mixins.font(700, 24px, 32px);
-    color: var(--color-grey-4);
-  }
-}
-
-.item {
-  @include mixins.flex($dir: column, $gap: 32px);
-  width: 100%;
-  padding: 32px;
-  background-color: #ffffff;
-  border: 1px solid rgba(209, 213, 216, 0.5);
-  box-shadow: 0px 8px 8px rgba(0, 0, 0, 0.05);
-  border-radius: 8px;
-}