@soul-refiner/design-system 0.0.5 → 0.0.7

package/src/data/Line/Line.tsx

@@ -1,162 +0,0 @@
-import React from "react";
-
-import { IconHeader, IconHeaderProps } from "../../iconography";
-import styles from "./Line.module.scss";
-
-type Data = {
-  name: string;
-  value: number;
-};
-
-type DataSet = {
-  groupName?: string;
-  data: Required<Data>[];
-};
-
-export interface LineProps {
-  width?: string;
-  height?: string;
-  iconHeader: IconHeaderProps;
-  dataSets: DataSet[];
-}
-
-export const Line = ({
-  height = "200px",
-  width = "686px",
-  iconHeader,
-  dataSets,
-}: LineProps) => {
-  const [min, max] = dataSets.reduce(
-    (prev, curr) => {
-      const [currMin, currMax] = curr.data.reduce(
-        (currPrev, currCurr) => {
-          if (currCurr.value < currPrev[0]) {
-            currPrev[0] = currCurr.value;
-          }
-          if (currCurr.value > currPrev[1]) {
-            currPrev[1] = currCurr.value;
-          }
-          return currPrev;
-        },
-        [Infinity, -Infinity]
-      );
-      if (currMin < prev[0]) {
-        prev[0] = currMin;
-      }
-      if (currMax > prev[1]) {
-        prev[1] = currMax;
-      }
-      return prev;
-    },
-    [Infinity, -Infinity]
-  );
-  const yMin = 0;
-  let yCap = 10 ** Math.floor(Math.log10(max));
-  if (max > yCap) {
-    yCap = Math.ceil(max / yCap / 0.5) * 0.5 * yCap;
-  }
-  let step = 10 ** Math.floor(Math.log10(max));
-  if (Math.floor(step / yCap) <= 1) {
-    step = Math.ceil(step / 2 / 0.5) * 0.5;
-  }
-  while (yCap / step > 5) {
-    step = step * 2;
-  }
-
-  return (
-    <section
-      className={styles.line}
-      style={
-        {
-          "--graph-height": height,
-          "--graph-width": width,
-        } as React.CSSProperties
-      }
-    >
-      {iconHeader && <IconHeader {...iconHeader} />}
-      <div className="graph">
-        <div className="grid">
-          {Array.from(
-            { length: yCap / step },
-            (_, index) => (yCap / step - index) * step
-          ).map((element) => (
-            <div key={element.toString(36)}>
-              <p>{element}</p>
-              <div />
-            </div>
-          ))}
-        </div>
-        <div className="info">
-          {dataSets.map((set, setIndex) => (
-            <div className="set" key={"set-" + setIndex.toString(36)}>
-              {set.data.map((line, lineIndex) => {
-                let barHeight, nextBarHeight: string;
-                let dX, dY: number;
-                if (width.endsWith("px")) {
-                  barHeight =
-                    Math.round(
-                      (line.value * parseInt(height.replace("px", ""))) / yCap
-                    ) + "px";
-                  nextBarHeight =
-                    Math.round(
-                      ((set.data[lineIndex + 1]?.value ?? 0) *
-                        parseInt(height.replace("px", ""))) /
-                        yCap
-                    ) + "px";
-                  dX = Math.round(
-                    parseInt(width.replace("px", "")) / set.data.length
-                  );
-                  dY =
-                    parseInt(barHeight.replace("px", "")) -
-                    parseInt(nextBarHeight.replace("px", ""));
-                } else {
-                  barHeight =
-                    Math.round(
-                      (line.value * parseInt(height.replace("%", ""))) / yCap
-                    ) + "%";
-                  nextBarHeight =
-                    Math.round(
-                      ((set.data[lineIndex + 1]?.value ?? 0) *
-                        parseInt(height.replace("%", ""))) /
-                        yCap
-                    ) + "%";
-                  dX = Math.round(
-                    parseInt(width.replace("%", "")) / set.data.length
-                  );
-                  dY =
-                    parseInt(nextBarHeight.replace("%", "")) -
-                    parseInt(barHeight.replace("%", ""));
-                }
-                const length = Math.ceil(Math.sqrt(dX ** 2 + dY ** 2));
-                const rotation = Math.round(
-                  Math.atan2(dY, dX) * (180 / Math.PI)
-                );
-
-                return (
-                  <div
-                    className="line"
-                    key={"line-" + lineIndex.toString(36)}
-                    style={
-                      {
-                        "--bar-height": barHeight,
-                        "--line-length":
-                          length + (width.endsWith("px") ? "px" : "%"),
-                        "--rotation": rotation + "deg",
-                        "--from-top": dY / 2 - 0.5 * lineIndex + "px",
-                      } as React.CSSProperties
-                    }
-                  >
-                    <div className="point" />
-                    {lineIndex !== set.data.length - 1 && (
-                      <div className="segment" />
-                    )}
-                  </div>
-                );
-              })}
-            </div>
-          ))}
-        </div>
-      </div>
-    </section>
-  );
-};

package/src/data/Line/index.ts

@@ -1 +0,0 @@
-export { Line, type LineProps } from "./Line";

package/src/data/Pie/Pie.module.scss

@@ -1,56 +0,0 @@
-@use "@soul-refiner/styles/mixins";
-
-.wrapper {
-  @include mixins.flex($gap: 32px, $dir: column);
-  padding: 32px;
-  background-color: #ffffff;
-  border-radius: 25px;
-  max-width: 833px;
-
-  & > figure {
-    @include mixins.flex($gap: 94px);
-    width: 100%;
-
-    & > figcaption {
-      flex: 1;
-      & > div {
-        @include mixins.flex($gap: 16px);
-        padding: 10px;
-        & > p {
-          font-size: 16px;
-          &:first-of-type {
-            margin-right: auto;
-          }
-        }
-
-        [class~="color"] {
-          width: 19px;
-          height: 19px;
-          border-radius: 50%;
-        }
-      }
-    }
-  }
-}
-
-.pie {
-  position: relative;
-  display: block;
-  width: 170px;
-  height: 170px;
-  border-radius: 50%;
-  background: var(--gradient);
-
-  &::after {
-    content: "";
-    position: absolute;
-    width: calc(100% - 60px);
-    height: calc(100% - 60px);
-    top: 30px;
-    right: 30px;
-    left: 30px;
-    bottom: 30px;
-    background-color: #ffffff;
-    border-radius: 50%;
-  }
-}

package/src/data/Pie/Pie.spec.js

@@ -1,72 +0,0 @@
-import React from "react";
-import "@testing-library/jest-dom";
-import { render, screen } from "@testing-library/react";
-
-import { BarGraph } from "@soul-refiner/icons/src";
-import { Pie } from "./Pie";
-
-const generateMockProps = (props) => ({
-  iconHeader: {
-    as: "h5",
-    color: "blue",
-    icon: <BarGraph iconSize={18} size={24} fill="var(--color-blue-3)" />,
-    title: "Summary",
-  },
-  data: [
-    {
-      label: "Option 1",
-      amount: 2,
-    },
-    {
-      label: "Option 2",
-      amount: 5,
-    },
-    {
-      label: "Option 3",
-      amount: 14,
-    },
-    {
-      label: "Option 4",
-      amount: 3,
-    },
-    {
-      label: "Option 5",
-      amount: 7,
-    },
-    {
-      label: "Option 6",
-      amount: 4,
-    },
-    {
-      label: "Option 7",
-      amount: 24,
-    },
-    {
-      label: "Option 8",
-      amount: 1,
-    },
-    {
-      label: "Option 9",
-      amount: 1,
-    },
-  ],
-  ...props,
-});
-
-describe("Pie Chart", () => {
-  it("renders the appropriate radios and colors", () => {
-    const props = generateMockProps({});
-    render(<Pie {...props} />);
-    expect(screen.getByTestId("pie-chart")).toHaveStyle(
-      `background: conic-gradient(var(--color-turquoise-5) 0deg 140deg, #FFFFFF 140deg 141deg, var(--color-orange-5) 141deg 222deg, #FFFFFF 222deg 223deg, var(--color-blue-5) 223deg 263deg, #FFFFFF 263deg 264deg, var(--color-yellow-5) 264deg 292deg, #FFFFFF 292deg 293deg, var(--color-purple-5) 293deg 315deg, #FFFFFF 315deg 316deg, var(--color-green-5) 316deg 332deg, #FFFFFF 332deg 333deg, var(--color-red-6) 333deg 359deg, #FFFFFF 359deg 0deg)`
-    );
-  });
-
-  it("renders seven or more options together", () => {
-    const props = generateMockProps({});
-    render(<Pie {...props} />);
-    const other = screen.getByText("Other");
-    expect(other);
-    expect(other.nextSibling).toHaveTextContent("4");
-  });
-});

package/src/data/Pie/Pie.tsx

@@ -1,111 +0,0 @@
-import React from "react";
-import styles from "./Pie.module.scss";
-import { COLOR_ORDER } from "@soul-refiner/utils/src";
-import { IconHeader, IconHeaderProps } from "../../iconography";
-
-type Data = {
-  label: string;
-  amount: number;
-  color?: string;
-};
-
-export interface PieProps {
-  data: Data[];
-  iconHeader?: IconHeaderProps;
-  header?: React.ReactNode;
-}
-
-export const Pie = ({ data, iconHeader, header }: PieProps) => {
-  const total = data.reduce(
-    (prev, curr) => (curr.amount > 0 ? prev + curr.amount : prev),
-    0
-  );
-  const sortedData = data
-    .filter((data) => data.amount > 0)
-    .sort((a, b) => b.amount - a.amount);
-  let current = 0;
-
-  const gradient = sortedData.reduce((prev, curr, index) => {
-    if (curr.color) {
-      COLOR_ORDER[index] = curr.color;
-    }
-    if (sortedData.length === 1) {
-      return `${COLOR_ORDER[0]} 0 0`;
-    }
-    if (index === 0) {
-      const degrees = Math.floor((360 * curr.amount) / total) - 1;
-      current = current + degrees + 1;
-      return `${COLOR_ORDER[0]} 0deg ${degrees}deg, #FFFFFF ${degrees}deg ${
-        degrees + 1
-      }deg`;
-    }
-    if (
-      index === 6 ||
-      (sortedData.length < 7 && index === sortedData.length - 1)
-    ) {
-      return `${prev}, ${COLOR_ORDER[index]} ${current}deg 359deg, #FFFFFF 359deg 0deg`;
-    }
-    if (index > 6) {
-      return prev;
-    }
-    const degrees = Math.floor((360 * curr.amount) / total) - 1;
-    const next = `${prev}, ${COLOR_ORDER[index]} ${current}deg ${
-      current + degrees
-    }deg, #FFFFFF ${current + degrees}deg ${current + degrees + 1}deg`;
-    current = current + degrees + 1;
-    return next;
-  }, "");
-
-  const textElements = sortedData.map((element, index) => {
-    if (index === 6) {
-      const otherAmount = sortedData
-        .slice(6)
-        .reduce(
-          (prev, curr) => (curr.amount > 0 ? prev + curr.amount : prev),
-          0
-        );
-      return (
-        <div key={index + JSON.stringify(element)}>
-          <div
-            className="color"
-            style={{ backgroundColor: COLOR_ORDER[index] }}
-          />
-          <p>Other</p>
-          <p>{otherAmount}</p>
-        </div>
-      );
-    }
-    if (index > 6) {
-      return;
-    }
-    return (
-      <div key={index + JSON.stringify(element)}>
-        <div
-          className="color"
-          style={{ backgroundColor: COLOR_ORDER[index] }}
-        />
-        <p>{element.label}</p>
-        <p>{element.amount}</p>
-      </div>
-    );
-  });
-
-  return (
-    <article className={`${styles.wrapper}`}>
-      {!!iconHeader && <IconHeader {...iconHeader} />}
-      {!!header && header}
-      <figure>
-        <figcaption>{textElements}</figcaption>
-        <div
-          className={`${styles.pie}`}
-          data-testid="pie-chart"
-          style={
-            {
-              "--gradient": `conic-gradient(${gradient})`,
-            } as React.CSSProperties
-          }
-        />
-      </figure>
-    </article>
-  );
-};

package/src/data/Pie/index.ts

@@ -1 +0,0 @@
-export { Pie, type PieProps } from "./Pie";

package/src/data/index.ts

@@ -1,3 +0,0 @@
-export { Bar, type BarProps } from "./Bar";
-export { Line, type LineProps } from "./Line";
-export { Pie, type PieProps } from "./Pie";

package/src/editor/Editor.module.scss

@@ -1,125 +0,0 @@
-.editor {
-  position: relative;
-  padding: 24px;
-  max-width: 1200px;
-  margin: 98px auto 0px;
-
-  * {
-    line-height: 150%;
-    color: var(--color-grey-3);
-  }
-
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    line-height: 125%;
-  }
-
-  & > [data-slate-editor="true"] > * {
-    margin: 24px 0px;
-  }
-
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6,
-  p,
-  a,
-  li,
-  div,
-  label,
-  figure,
-  figcaption,
-  sub,
-  sup,
-  button {
-    font-weight: 400;
-  }
-
-  code {
-    font-family: var(--font-mono);
-    & > * {
-      font-family: var(--font-mono);
-      span {
-        font-family: var(--font-mono) !important;
-      }
-    }
-  }
-
-  button > span {
-    [data-slate-string] {
-      color: var(--color);
-    }
-  }
-
-  hr {
-    border-top: 1px solid var(--color-grey-8);
-  }
-
-  [data-slate-node="text"] {
-    cursor: text;
-  }
-
-  [class~="slate-p"] {
-    padding: 0px;
-  }
-
-  [class~="slate-footnote"] {
-    counter-increment: footnote_counter 1;
-    outline: none;
-
-    & > span:first-of-type {
-      position: relative;
-      display: inline-block;
-      margin-right: 1ch;
-
-      &::before {
-        position: absolute;
-        content: counter(footnote_counter);
-        left: 0px;
-        top: 0px;
-        text-decoration: underline;
-        color: var(--color-blue-5);
-      }
-    }
-  }
-
-  [class~="slate-img"] {
-    textarea {
-      max-height: 96px;
-    }
-    & + [contentEditable="false"] {
-      display: none;
-    }
-  }
-  [class~="slate-listStyleType-decimals"],
-  [class~="slate-listStyleType-disc"] {
-    margin: 0px;
-    &:first-of-type {
-      margin: 24px 0px 0px;
-    }
-    &:last-of-type {
-      margin: 0px 0px 24px;
-    }
-  }
-
-  [class~="slate-blockquote"] {
-    margin-left: 24px;
-    padding: 4px 0px 4px 20px;
-    border-left: 4px solid var(--color-grey-7);
-  }
-
-  [class~="slate-a"] {
-    span {
-      color: var(--color-blue-5);
-      &:hover {
-        cursor: pointer;
-      }
-    }
-  }
-}