@elmethis/qwik 0.0.2 → 0.0.4

package/src/components/others/elm-jarkup.tsx

@@ -0,0 +1,267 @@
+import { component$, type JSXOutput } from "@builder.io/qwik";
+import type { Component, InlineComponent } from "jarkup-ts";
+import { kebabCase } from "lodash-es";
+
+import styles from "./elm-jarkup.module.scss";
+
+import { ElmInlineText } from "../typography/elm-inline-text";
+import { ElmKatex } from "../code/elm-katex";
+import { ElmInlineIcon } from "../icon/elm-inline-icon";
+import { ElmHeading } from "../typography/elm-heading";
+import { ElmParagraph } from "../typography/elm-paragraph";
+import { ElmList } from "../typography/elm-list";
+import { ElmBlockQuote } from "../typography/elm-block-quote";
+import { ElmCallout } from "../typography/elm-callout";
+import { ElmDivider } from "../typography/elm-divider";
+import { ElmToggle } from "../containments/elm-toggle";
+import { ElmBookmark } from "../navigation/elm-bookmark";
+import { ElmFile } from "../media/elm-file";
+import { ElmBlockImage } from "../media/elm-block-image";
+import { ElmCodeBlock } from "../code/elm-code-block";
+import {
+  ElmTable,
+  ElmTableHeader,
+  ElmTableBody,
+  ElmTableRow,
+  ElmTableCell,
+} from "../table";
+
+export interface ElmJarkupProps {
+  jsonComponents: Component[];
+}
+
+const convertInlineComponentsToPlainText = (
+  inlineComponents: InlineComponent[],
+): string => {
+  return inlineComponents
+    .map((component) => {
+      if (component.type === "Text") {
+        return component.props.text;
+      } else {
+        return "";
+      }
+    })
+    .join("");
+};
+
+export const ElmJarkup = component$<ElmJarkupProps>((props) => {
+  const render = (jsonComponents: Component[]): JSXOutput[] => {
+    return jsonComponents.map((component, index) => {
+      const key = component.id || index;
+
+      switch (component.type) {
+        case "Text": {
+          const { props: p } = component;
+          if (p.katex) {
+            return <ElmKatex key={key} expression={p.text} block={false} />;
+          }
+          return (
+            <ElmInlineText
+              key={key}
+              text={p.text}
+              color={p.color}
+              backgroundColor={p.backgroundColor}
+              bold={p.bold}
+              italic={p.italic}
+              underline={p.underline}
+              strikethrough={p.strikethrough}
+              code={p.code}
+              ruby={p.ruby}
+              href={p.href}
+              favicon={p.favicon}
+            />
+          );
+        }
+
+        case "Icon":
+          return (
+            <ElmInlineIcon
+              key={key}
+              src={component.props.src}
+              alt={component.props.alt}
+            />
+          );
+
+        case "Heading":
+          return (
+            <ElmHeading
+              key={key}
+              level={component.props.level}
+              id={kebabCase(
+                convertInlineComponentsToPlainText(component.slots.default),
+              )}
+            >
+              {render(component.slots.default)}
+            </ElmHeading>
+          );
+
+        case "Paragraph":
+          return (
+            <ElmParagraph
+              key={key}
+              color={component.props?.color}
+              backgroundColor={component.props?.backgroundColor}
+            >
+              {render(component.slots.default)}
+            </ElmParagraph>
+          );
+
+        case "ListItem":
+          return <li key={key}>{render(component.slots.default)}</li>;
+
+        case "List":
+          return (
+            <ElmList
+              key={key}
+              listStyle={
+                component.props?.listStyle === "unordered"
+                  ? "unordered"
+                  : "ordered"
+              }
+            >
+              {render(component.slots.default)}
+            </ElmList>
+          );
+
+        case "BlockQuote":
+          return (
+            <ElmBlockQuote key={key} cite={component.props?.cite}>
+              {render(component.slots.default)}
+            </ElmBlockQuote>
+          );
+
+        case "Callout":
+          return (
+            <ElmCallout key={key} type={component.props?.type}>
+              {render(component.slots.default)}
+            </ElmCallout>
+          );
+
+        case "Divider":
+          return <ElmDivider key={key} />;
+
+        case "Toggle":
+          return (
+            <ElmToggle key={key}>
+              <div q:slot="summary">{render(component.slots.summary)}</div>
+              {render(component.slots.default)}
+            </ElmToggle>
+          );
+
+        case "Bookmark":
+          return (
+            <ElmBookmark
+              key={key}
+              url={component.props.url}
+              title={component.props.title}
+              description={component.props.description}
+              image={component.props.image}
+            />
+          );
+
+        case "File":
+          return (
+            <ElmFile
+              key={key}
+              src={component.props.src}
+              name={component.props.name}
+            />
+          );
+
+        case "Image":
+          return (
+            <ElmBlockImage
+              key={key}
+              src={component.props.src}
+              alt={component.props.alt}
+              enableModal={true}
+            />
+          );
+
+        case "CodeBlock":
+          return (
+            <ElmCodeBlock
+              key={key}
+              code={component.props.code}
+              language={component.props.language}
+            >
+              {component.slots?.default && render(component.slots.default)}
+            </ElmCodeBlock>
+          );
+
+        case "Katex":
+          return (
+            <ElmKatex
+              key={key}
+              expression={component.props.expression}
+              block={true}
+            />
+          );
+
+        case "Table":
+          return (
+            <ElmTable
+              key={key}
+              caption={component.props?.caption}
+              hasRowHeader={component.props?.hasRowHeader}
+            >
+              {component.slots.header && (
+                <ElmTableHeader>
+                  {render(component.slots.header)}
+                </ElmTableHeader>
+              )}
+              <ElmTableBody>{render(component.slots.body)}</ElmTableBody>
+            </ElmTable>
+          );
+
+        case "TableRow":
+          return (
+            <ElmTableRow key={key}>
+              {render(component.slots.default)}
+            </ElmTableRow>
+          );
+
+        case "TableCell":
+          return (
+            <ElmTableCell key={key}>
+              {render(component.slots.default)}
+            </ElmTableCell>
+          );
+
+        case "ColumnList":
+          return (
+            <div key={key} class={styles["column-list"]}>
+              {render(component.slots.default)}
+            </div>
+          );
+
+        case "Column":
+          return (
+            <div
+              key={key}
+              class={styles.column}
+              style={{
+                "--width-ratio": component.props?.widthRatio || 1,
+                width: component.props?.widthRatio
+                  ? `${component.props.widthRatio * 100}%`
+                  : undefined,
+              }}
+            >
+              {render(component.slots.default)}
+            </div>
+          );
+
+        default:
+          return (
+            <div key={key} style={{ color: "red", border: "1px solid red" }}>
+              Unsupported component type: {component.type}
+            </div>
+          );
+      }
+    });
+  };
+
+  return (
+    <div class={styles["jarkup-body"]}>{render(props.jsonComponents)}</div>
+  );
+});

package/src/components/table/elm-table-body.tsx

@@ -0,0 +1,14 @@
+import { component$, Slot, useContextProvider } from "@builder.io/qwik";
+import { HasHeaderContext } from "./elm-table-header";
+
+export type ElmTableBodyProps = object;
+
+export const ElmTableBody = component$<ElmTableBodyProps>(() => {
+  useContextProvider(HasHeaderContext, false);
+
+  return (
+    <tbody>
+      <Slot />
+    </tbody>
+  );
+});

package/src/components/table/elm-table-cell.module.scss

@@ -0,0 +1,41 @@
+.common {
+  padding: 0.75rem 1rem;
+
+  color: rgba(black, 0.7);
+
+  border-right: 1px dotted rgba(black, 0.15);
+
+  &::selection {
+    color: rgba(white, 0.7);
+    background-color: rgba(black, 0.7);
+  }
+
+  [data-theme="dark"] & {
+    color: rgba(white, 0.7);
+
+    &::selection {
+      color: rgba(black, 0.7);
+      background-color: rgba(white, 0.7);
+    }
+  }
+
+  [data-theme="dark"] & {
+    border-right: 1px dotted rgba(white, 0.15);
+  }
+
+  &:last-child {
+    border-right: none;
+  }
+}
+
+.td {
+  border-top: 1px solid rgba(black, 0.15);
+
+  [data-theme="dark"] & {
+    border-top-color: rgba(white, 0.15);
+  }
+}
+
+.th {
+  background-color: rgba(gray, 0.15);
+}

package/src/components/table/elm-table-cell.tsx

@@ -0,0 +1,33 @@
+import { component$, Slot, useContext } from "@builder.io/qwik";
+import styles from "./elm-table-cell.module.scss";
+import { HasHeaderContext } from "./elm-table-header";
+
+export interface ElmTableCellProps {
+  /**
+   * Whether the cell is a header cell.
+   */
+  hasHeader?: boolean;
+
+  /**
+   * The text content of the cell.
+   * If not provided, the cell will render its children as content.
+   */
+  text?: string;
+}
+
+export const ElmTableCell = component$<ElmTableCellProps>((props) => {
+  const { hasHeader = false, text } = props;
+  const hasHeaderInjected = useContext(HasHeaderContext, false);
+
+  const isHeader = hasHeader || (hasHeaderInjected as boolean | undefined);
+
+  return (
+    <>
+      {isHeader ? (
+        <th class={[styles.common, styles.th]}>{text ? text : <Slot />}</th>
+      ) : (
+        <td class={[styles.common, styles.td]}>{text ? text : <Slot />}</td>
+      )}
+    </>
+  );
+});

package/src/components/table/elm-table-header.module.scss

@@ -0,0 +1,8 @@
+.thead {
+  text-align: left;
+  transition:
+    background-color 400ms,
+    color 400ms;
+
+  border-bottom: 2px solid rgba(gray, 0.5);
+}

package/src/components/table/elm-table-header.tsx

@@ -0,0 +1,21 @@
+import {
+  component$,
+  Slot,
+  createContextId,
+  useContextProvider,
+} from "@builder.io/qwik";
+import styles from "./elm-table-header.module.scss";
+
+export const HasHeaderContext = createContextId<boolean>("HasHeaderContext");
+
+export type ElmTableHeaderProps = object;
+
+export const ElmTableHeader = component$<ElmTableHeaderProps>(() => {
+  useContextProvider(HasHeaderContext, true);
+
+  return (
+    <thead class={styles.thead}>
+      <Slot />
+    </thead>
+  );
+});

package/src/components/table/elm-table-row.module.scss

@@ -0,0 +1,28 @@
+.tr {
+  transition: background-color 200ms;
+
+  &:nth-child(odd) {
+    background-color: transparent;
+  }
+
+  &:nth-child(even) {
+    background-color: rgba(black, 0.015);
+    [data-theme="dark"] & {
+      background-color: rgba(white, 0.015);
+    }
+  }
+
+  &:hover {
+    background-color: rgba(#6987b8, 0.15);
+    [data-theme="dark"] & {
+      background-color: rgba(#6987b8, 0.15);
+    }
+  }
+}
+
+.has-row-header {
+  td:first-child,
+  tr:first-child {
+    background-color: rgba(gray, 0.15);
+  }
+}

package/src/components/table/elm-table-row.tsx

@@ -0,0 +1,15 @@
+import { component$, Slot, useContext } from "@builder.io/qwik";
+import styles from "./elm-table-row.module.scss";
+import { HasRowHeaderContext } from "./elm-table";
+
+export type ElmTableRowProps = object;
+
+export const ElmTableRow = component$<ElmTableRowProps>(() => {
+  const hasRowHeader = useContext(HasRowHeaderContext);
+
+  return (
+    <tr class={[styles.tr, hasRowHeader.value && styles["has-row-header"]]}>
+      <Slot />
+    </tr>
+  );
+});

package/src/components/table/elm-table.module.scss

@@ -0,0 +1,29 @@
+.table {
+  margin-block: var(--margin-block);
+  border-collapse: collapse;
+  border-spacing: 0;
+  box-shadow: 0 0 0.125rem rgba(black, 0.2);
+}
+
+.caption {
+  position: relative;
+  width: 100%;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  gap: 1rem;
+  margin-block-end: 1rem;
+}
+
+.caption-inner {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.spacing {
+  flex-grow: 1;
+  height: 1px;
+  background-color: rgba(gray, 0.2);
+}

package/src/components/table/elm-table.stories.tsx

@@ -0,0 +1,67 @@
+import type { Meta, StoryObj } from "storybook-framework-qwik";
+import { ElmTable } from "./elm-table";
+import { ElmTableHeader } from "./elm-table-header";
+import { ElmTableBody } from "./elm-table-body";
+import { ElmTableRow } from "./elm-table-row";
+import { ElmTableCell } from "./elm-table-cell";
+
+const meta: Meta<typeof ElmTable> = {
+  title: "Components/Table/elm-table",
+  component: ElmTable,
+  tags: ["autodocs"],
+  args: {
+    caption: "Example Table",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  render() {
+    return (
+      <ElmTable {...this.args}>
+        <ElmTableHeader>
+          <ElmTableRow>
+            <ElmTableCell hasHeader text="Header 1" />
+            <ElmTableCell hasHeader text="Header 2" />
+            <ElmTableCell hasHeader text="Header 3" />
+            <ElmTableCell hasHeader text="Header 4" />
+            <ElmTableCell hasHeader text="Header 5" />
+          </ElmTableRow>
+        </ElmTableHeader>
+
+        <ElmTableBody>
+          <ElmTableRow>
+            <ElmTableCell text="Row 1, Cell 1" />
+            <ElmTableCell text="Row 1, Cell 2" />
+            <ElmTableCell text="Row 1, Cell 3" />
+            <ElmTableCell text="Row 1, Cell 4" />
+            <ElmTableCell text="Row 1, Cell 5" />
+          </ElmTableRow>
+          <ElmTableRow>
+            <ElmTableCell text="Row 2, Cell 1" />
+            <ElmTableCell text="Row 2, Cell 2" />
+            <ElmTableCell text="Row 2, Cell 3" />
+            <ElmTableCell text="Row 2, Cell 4" />
+            <ElmTableCell text="Row 2, Cell 5" />
+          </ElmTableRow>
+          <ElmTableRow>
+            <ElmTableCell text="Row 3, Cell 1" />
+            <ElmTableCell text="Row 3, Cell 2" />
+            <ElmTableCell text="Row 3, Cell 3" />
+            <ElmTableCell text="Row 3, Cell 4" />
+            <ElmTableCell text="Row 3, Cell 5" />
+          </ElmTableRow>
+          <ElmTableRow>
+            <ElmTableCell text="Row 4, Cell 1" />
+            <ElmTableCell text="Row 4, Cell 2" />
+            <ElmTableCell text="Row 4, Cell 3" />
+            <ElmTableCell text="Row 4, Cell 4" />
+            <ElmTableCell text="Row 4, Cell 5" />
+          </ElmTableRow>
+        </ElmTableBody>
+      </ElmTable>
+    );
+  },
+};

package/src/components/table/elm-table.tsx

@@ -0,0 +1,63 @@
+import {
+  component$,
+  Slot,
+  createContextId,
+  useContextProvider,
+  useComputed$,
+} from "@builder.io/qwik";
+import type { CSSProperties } from "@builder.io/qwik";
+import styles from "./elm-table.module.scss";
+import textStyles from "../../styles/text.module.scss";
+import { ElmInlineText } from "../typography/elm-inline-text";
+
+export const HasRowHeaderContext = createContextId<
+  Readonly<{ value: boolean }>
+>("HasRowHeaderContext");
+
+export interface ElmTableProps {
+  /**
+   * The margin of the table.
+   */
+  margin?: CSSProperties["marginBlock"];
+
+  caption?: string;
+
+  hasRowHeader?: boolean;
+}
+
+export const ElmTable = component$<ElmTableProps>((props) => {
+  const { margin, caption, hasRowHeader = false } = props;
+
+  const hasRowHeaderComputed = useComputed$(() => hasRowHeader);
+  useContextProvider(HasRowHeaderContext, hasRowHeaderComputed);
+
+  return (
+    <table
+      class={[styles.table, textStyles.text]}
+      style={{
+        "--margin-block": margin,
+      }}
+    >
+      {caption && (
+        <caption>
+          <span class={styles["caption"]}>
+            <span class={styles.spacing}></span>
+
+            <span class={styles["caption-inner"]}>
+              <svg viewBox="0 0 24 24" width="1rem" height="1rem">
+                <path
+                  d="M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4M12,6A6,6 0 0,0 6,12A6,6 0 0,0 12,18A6,6 0 0,0 18,12A6,6 0 0,0 12,6M12,8A4,4 0 0,1 16,12A4,4 0 0,1 12,16A4,4 0 0,1 8,12A4,4 0 0,1 12,8Z"
+                  fill="#6987b8"
+                />
+              </svg>
+              <ElmInlineText text={caption} />
+            </span>
+
+            <span class={styles.spacing}></span>
+          </span>
+        </caption>
+      )}
+      <Slot />
+    </table>
+  );
+});

package/src/components/typography/elm-block-quote.module.scss

@@ -0,0 +1,29 @@
+.blockquote {
+  box-sizing: border-box;
+  width: 100%;
+  margin: 0;
+  background-color: rgba(#868e9c, 0.1);
+  position: relative;
+
+  &::after {
+    position: absolute;
+    content: "";
+    top: 0;
+    left: 0;
+    width: 4px;
+    height: 100%;
+    background-color: #868e9c;
+  }
+}
+
+.body {
+  box-sizing: border-box;
+  padding: 2rem 1.5rem;
+}
+
+.icon {
+  position: absolute;
+  content: "";
+  inset: var(--inset);
+  opacity: 0.5;
+}

package/src/components/typography/elm-block-quote.stories.tsx

@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from "storybook-framework-qwik";
+import { ElmBlockQuote } from "./elm-block-quote";
+
+const meta: Meta<typeof ElmBlockQuote> = {
+  title: "Components/Typography/elm-block-quote",
+  component: ElmBlockQuote,
+  tags: ["autodocs"],
+  args: {},
+  render() {
+    return (
+      <ElmBlockQuote>
+        Only a fool learns from his own mistakes. The wise man learns from the
+        mistakes of others.
+      </ElmBlockQuote>
+    );
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {};

package/src/components/typography/elm-block-quote.tsx

@@ -0,0 +1,34 @@
+import { component$, Slot } from "@builder.io/qwik";
+
+import styles from "./elm-block-quote.module.scss";
+import textStyles from "../../styles/text.module.scss";
+import { ElmMdiIcon } from "../icon/elm-mdi-icon";
+import { mdiFormatQuoteClose, mdiFormatQuoteOpen } from "@mdi/js";
+
+export interface ElmBlockQuoteProps {
+  cite?: string;
+}
+
+export const ElmBlockQuote = component$<ElmBlockQuoteProps>(({ cite }) => {
+  return (
+    <blockquote class={[styles.blockquote, textStyles.text]} cite={cite}>
+      <div
+        class={styles.icon}
+        style={{ "--inset": "0.25rem auto auto 0.5rem" }}
+      >
+        <ElmMdiIcon d={mdiFormatQuoteOpen} />
+      </div>
+
+      <div class={[styles.body]}>
+        <Slot />
+      </div>
+
+      <div
+        class={styles.icon}
+        style={{ "--inset": "auto 0.25rem 0.25rem auto" }}
+      >
+        <ElmMdiIcon d={mdiFormatQuoteClose} />
+      </div>
+    </blockquote>
+  );
+});