@soul-refiner/design-system 0.0.14 → 0.0.16

package/src/data/Line/Line.tsx

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

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

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

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

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

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

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

package/src/data/index.ts

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

package/src/editor/Editor.module.scss

@@ -0,0 +1,125 @@
+.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;
+      }
+    }
+  }
+}