@elmethis/qwik 0.0.6 → 0.0.8

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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