@elmethis/qwik 0.0.2 → 0.0.4

package/src/components/code/elm-code-block.tsx

@@ -0,0 +1,95 @@
+import {
+  $,
+  component$,
+  CSSProperties,
+  Slot,
+  useSignal,
+} from "@builder.io/qwik";
+
+import styles from "./elm-code-block.module.scss";
+
+import { ElmLanguageIcon } from "../icon/elm-language-icon";
+import { ElmInlineText } from "../typography/elm-inline-text";
+import { ElmShikiHighlighter } from "./elm-shiki-highlighter";
+
+import {
+  mdiClipboardMultipleOutline,
+  mdiClipboardCheckMultipleOutline,
+} from "@mdi/js";
+import { ElmMdiIcon } from "../icon/elm-mdi-icon";
+
+export interface ElmCodeBlockProps {
+  /**
+   * The code to display.
+   */
+  code: string;
+
+  /**
+   * The language of the code.
+   */
+  language?: string;
+
+  /**
+   * The caption of the code block.
+   * If not provided, the language will be used.
+   */
+  caption?: string;
+
+  /**
+   * The margin of the code block.
+   */
+  margin?: CSSProperties["margin"];
+}
+
+export const ElmCodeBlock = component$<ElmCodeBlockProps>(
+  ({ code, language = "txt", caption, margin }) => {
+    const timerId = useSignal<number | null>(null);
+
+    const copyToClipboard = $(async () => {
+      if (timerId.value !== null) {
+        window.clearTimeout(timerId.value);
+        timerId.value = null;
+      }
+
+      try {
+        await navigator.clipboard.writeText(code);
+        timerId.value = window.setTimeout(() => (timerId.value = null), 1500);
+      } catch (err) {
+        console.error("Failed to copy: ", err);
+      }
+    });
+
+    return (
+      <figure class={styles["code-block"]} style={{ margin }}>
+        <span class={styles["language-icon"]}>
+          <ElmLanguageIcon language={language} />
+        </span>
+
+        <span class={styles["caption"]}>
+          <ElmInlineText>
+            {caption || language}
+            <Slot />
+          </ElmInlineText>
+        </span>
+
+        <div class={styles["copy-icon"]} onClick$={copyToClipboard}>
+          <ElmMdiIcon
+            size="1.25rem"
+            d={
+              timerId.value !== null
+                ? mdiClipboardCheckMultipleOutline
+                : mdiClipboardMultipleOutline
+            }
+            color={timerId.value !== null ? "#59b57c" : undefined}
+          />
+        </div>
+
+        <hr class={styles["divider"]} />
+
+        <div class={styles["code"]}>
+          <ElmShikiHighlighter code={code} language={language} />
+        </div>
+      </figure>
+    );
+  },
+);

package/src/components/code/elm-katex.stories.tsx

@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from "storybook-framework-qwik";
+import { ElmKatex } from "./elm-katex";
+
+const meta: Meta<typeof ElmKatex> = {
+  title: "Components/Code/elm-katex",
+  component: ElmKatex,
+  tags: ["autodocs"],
+  args: {},
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Inline: Story = {
+  args: { expression: "c = pmsqrt{a^2 + b^2}" },
+};
+
+export const Block: Story = {
+  args: { expression: "c = pmsqrt{a^2 + b^2}", block: true },
+};
+
+export const Complex: Story = {
+  args: {
+    expression:
+      "i\\hbar \\frac{\\partial}{\\partial t} \\Psi(\\mathbf{r}, t) = \\left( -\\frac{\\hbar^2}{2m} \\nabla^2 + V(\\mathbf{r}, t) \\right) \\Psi(\\mathbf{r}, t)",
+    block: true,
+  },
+};

package/src/components/code/elm-katex.tsx

@@ -0,0 +1,34 @@
+import { component$, useComputed$ } from "@builder.io/qwik";
+
+import textStyle from "../../styles/text.module.scss";
+
+import { renderToString } from "katex";
+
+export interface ElmKatexProps {
+  /**
+   * The KaTex expression.
+   */
+  expression: string;
+
+  /**
+   * Whether to render the equation in block mode.
+   * - If `true`, the equation will be rendered in block mode.
+   * - If `false`, the equation will be rendered in inline mode.
+   *
+   * Default is `false`.
+   */
+  block?: boolean;
+}
+
+export const ElmKatex = component$<ElmKatexProps>(
+  ({ expression, block = false }) => {
+    const html = useComputed$(() =>
+      renderToString(expression, {
+        displayMode: block,
+        output: "mathml",
+      }),
+    );
+
+    return <div class={textStyle.text} dangerouslySetInnerHTML={html.value} />;
+  },
+);

package/src/components/code/elm-shiki-highlighter.global.scss

@@ -0,0 +1,18 @@
+.shiki,
+.shiki span {
+  font-family:
+    "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace !important;
+
+  *::selection {
+    background-color: rgba(black, 0.1);
+
+    [data-theme="dark"] & {
+      background-color: rgba(white, 0.15);
+    }
+  }
+
+  [data-theme="dark"] & {
+    color: var(--shiki-dark) !important;
+    background-color: var(--shiki-dark-bg) !important;
+  }
+}

package/src/components/code/elm-shiki-highlighter.stories.tsx

@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from "storybook-framework-qwik";
+import { ElmShikiHighlighter } from "./elm-shiki-highlighter";
+
+import code from "./seed/main.rs?raw";
+
+const meta: Meta<typeof ElmShikiHighlighter> = {
+  title: "Components/Code/elm-shiki-highlighter",
+  component: ElmShikiHighlighter,
+  tags: ["autodocs"],
+  args: {},
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    code: code,
+    language: "rust",
+  },
+};

package/src/components/code/elm-shiki-highlighter.tsx

@@ -0,0 +1,44 @@
+import { component$, useSignal, useTask$ } from "@builder.io/qwik";
+
+import "./elm-shiki-highlighter.global.scss";
+
+export interface ElmShikiHighlighterProps {
+  /**
+   * The code to display.
+   */
+  code: string;
+
+  /**
+   * The language of the code.
+   */
+  language?: string;
+}
+
+export const ElmShikiHighlighter = component$<ElmShikiHighlighterProps>(
+  ({ code, language = "txt" }) => {
+    const rawHtml = useSignal("");
+
+    useTask$(async ({ track }) => {
+      const currentCode = track(() => code);
+      const currentLang = track(() => language);
+
+      const { getHighlighterSingleton } = await import("./shikiInstance");
+      const highlighter = await getHighlighterSingleton();
+
+      try {
+        rawHtml.value = highlighter.codeToHtml(currentCode, {
+          lang: currentLang,
+          themes: { dark: "vitesse-dark", light: "vitesse-light" },
+          colorReplacements: {
+            "#ffffff": "transparent",
+            "#121212": "transparent",
+          },
+        });
+      } catch {
+        rawHtml.value = `<pre>${currentCode.replace(/</g, "&lt;")}</pre>`;
+      }
+    });
+
+    return <pre dangerouslySetInnerHTML={rawHtml.value} />;
+  },
+);

package/src/components/code/seed/main.rs

@@ -0,0 +1,24 @@
+use reqwest::Error;
+use serde::{Deserialize, Serialize};
+
+#[derive(Serialize, Deserialize, Debug)]
+struct Post {
+    #[serde(rename = "userId")]
+    user_id: u32,
+    id: u32,
+    title: String,
+    body: String,
+}
+
+#[tokio::main]
+async fn main() -> Result<(), Error> {
+    let url = "https://jsonplaceholder.typicode.com/posts";
+    let response = reqwest::get(url).await?;
+    let posts: Vec<Post> = response.json().await?;
+
+    for post in posts.iter().take(5) {
+        println!("ID: {}, Title: {}", post.id, post.title);
+    }
+
+    Ok(())
+}

package/{lib/qwik31.js → src/components/code/shikiInstance.ts}

@@ -1,6 +1,9 @@
-import { createHighlighter } from "shiki";
-let highlighterPromise = null;
-function getHighlighterSingleton() {
+// shikiInstance.ts
+import { createHighlighter, Highlighter } from "shiki";
+
+let highlighterPromise: Promise<Highlighter> | null = null;
+
+export function getHighlighterSingleton() {
   if (!highlighterPromise) {
     highlighterPromise = createHighlighter({
       langs: [
@@ -64,16 +67,10 @@ function getHighlighterSingleton() {
         "typescript",
         "wasm",
         "xml",
-        "yaml"
+        "yaml",
       ],
-      themes: [
-        "vitesse-light",
-        "vitesse-dark"
-      ]
+      themes: ["vitesse-light", "vitesse-dark"],
     });
   }
   return highlighterPromise;
 }
-export {
-  getHighlighterSingleton
-};

package/src/components/containments/elm-toggle.module.scss

@@ -0,0 +1,132 @@
+.toggle {
+  margin: 0;
+  display: grid;
+  transition: grid 200ms;
+  overflow: hidden;
+
+  &.toggle-closed {
+    grid-template-rows: 3.5rem 0fr 0rem;
+  }
+
+  &.toggle-open {
+    grid-template-rows: 3.5rem 1fr 3rem;
+  }
+}
+
+.summary {
+  box-sizing: border-box;
+  padding-inline: 1rem;
+
+  display: grid;
+  grid-template-columns: min-content 1fr min-content;
+  gap: 1rem;
+  align-items: center;
+  cursor: pointer;
+
+  border: 1px solid rgba(black, 0.125);
+  background-color: rgba(#3e434b, 0.05);
+
+  [data-theme="dark"] & {
+    border: 1px solid rgba(white, 0.125);
+    background-color: rgba(#bec2ca, 0.1);
+  }
+
+  &.summary-open {
+    border-radius: 0.25rem 0.25rem 0 0;
+    border-bottom-color: transparent;
+  }
+
+  &.summary-closed {
+    border-radius: 0.25rem;
+  }
+}
+
+.chevron-icon {
+  transition: transform 200ms;
+
+  &.chevron-icon-open {
+    transform: rotate(90deg);
+  }
+
+  &.chevron-icon-closed {
+    transform: rotate(0deg);
+  }
+}
+
+.plus-icon {
+  height: 1rem;
+  width: 1rem;
+  transform-origin: center;
+  transition: transform 200ms;
+
+  &.plus-icon-open {
+    transform: rotate(135deg);
+  }
+
+  &.plus-icon-closed {
+    transform: rotate(0deg);
+  }
+}
+
+.content {
+  box-sizing: border-box;
+  padding: 1rem;
+  overflow: hidden;
+  transition: opacity 200ms;
+
+  border: 1px solid rgba(black, 0.125);
+  border-radius: 0 0 0.25rem 0.25rem;
+  background-color: rgba(#3e434b, 0.0125);
+
+  [data-theme="dark"] & {
+    border-color: rgba(white, 0.125);
+    background-color: rgba(#bec2ca, 0.025);
+  }
+
+  &.content-open {
+    opacity: 1;
+  }
+
+  &.content-closed {
+    opacity: 0;
+  }
+}
+
+.footer {
+  box-sizing: border-box;
+  margin: 0.25rem 0rem;
+  padding: 0.5rem;
+  color: #c56565;
+  font-family: monospace;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  user-select: none;
+  cursor: pointer;
+  border-radius: 0.25rem;
+  transition:
+    opacity 200ms,
+    background-color 200ms;
+
+  &:hover {
+    opacity: 0.5;
+    background-color: rgba(#606875, 0.1);
+  }
+
+  &.footer-line {
+    box-sizing: border-box;
+    margin: 0 0.25rem;
+    flex-grow: 1;
+    border: none;
+    border-bottom: solid 1px rgba(gray, 0.3);
+  }
+
+  &.footer-cross-icon {
+    transform: rotate(45deg);
+  }
+
+  &.footer-chevron-icon {
+    transform: rotate(-90deg);
+  }
+}

package/src/components/containments/elm-toggle.stories.tsx

@@ -0,0 +1,34 @@
+import type { Meta, StoryObj } from "storybook-framework-qwik";
+import { ElmToggle } from "./elm-toggle";
+import { ElmHeading } from "../typography/elm-heading";
+import { ElmParagraph } from "../typography/elm-paragraph";
+import { ElmInlineText } from "../typography/elm-inline-text";
+
+const meta: Meta<typeof ElmToggle> = {
+  title: "Components/Containments/elm-toggle",
+  component: ElmToggle,
+  tags: ["autodocs"],
+  args: {},
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  render() {
+    return (
+      <ElmToggle {...this.args}>
+        <div q:slot="summary">
+          <ElmInlineText>Click me to toggle</ElmInlineText>
+        </div>
+        <div>
+          <ElmHeading level={2}>Body</ElmHeading>
+          <ElmParagraph>
+            This is the body of the toggle. You can put any content here, and it
+            will be shown or hidden when you click the summary.
+          </ElmParagraph>
+        </div>
+      </ElmToggle>
+    );
+  },
+};

package/src/components/containments/elm-toggle.tsx

@@ -0,0 +1,106 @@
+import { $, component$, Slot, useSignal } from "@builder.io/qwik";
+
+import styles from "./elm-toggle.module.scss";
+import { ElmMdiIcon } from "../icon/elm-mdi-icon";
+import { mdiChevronRight, mdiPlus } from "@mdi/js";
+import { ElmInlineText } from "../typography/elm-inline-text";
+
+export interface ElmToggleProps {
+  /**
+   * The summary of the toggle.
+   */
+  summary?: string;
+}
+
+export const ElmToggle = component$<ElmToggleProps>(({ summary }) => {
+  const isOpen = useSignal(false);
+
+  const toggle = $(() => {
+    isOpen.value = !isOpen.value;
+  });
+
+  return (
+    <div
+      class={[
+        styles["toggle"],
+        {
+          [styles["toggle-open"]]: isOpen.value,
+          [styles["toggle-closed"]]: !isOpen.value,
+        },
+      ]}
+    >
+      <div
+        class={[
+          styles["summary"],
+          {
+            [styles["summary-open"]]: isOpen.value,
+            [styles["summary-closed"]]: !isOpen.value,
+          },
+        ]}
+        onClick$={toggle}
+      >
+        <span
+          class={[
+            styles["chevron-icon"],
+            {
+              [styles["chevron-icon-open"]]: isOpen.value,
+              [styles["chevron-icon-closed"]]: !isOpen.value,
+            },
+          ]}
+        >
+          <ElmMdiIcon d={mdiChevronRight} />
+        </span>
+
+        <span class={styles["summary-text"]}>
+          {summary ? summary : <Slot name="summary" />}
+        </span>
+
+        <span
+          class={[
+            styles["plus-icon"],
+            {
+              [styles["plus-icon-open"]]: isOpen.value,
+              [styles["plus-icon-closed"]]: !isOpen.value,
+            },
+          ]}
+        >
+          <ElmMdiIcon
+            d={mdiPlus}
+            color={isOpen.value ? "#c56565" : "#59b57c"}
+            size="1rem"
+          />
+        </span>
+      </div>
+
+      <div
+        class={[
+          styles["content"],
+          {
+            [styles["content-open"]]: isOpen.value,
+            [styles["content-closed"]]: !isOpen.value,
+          },
+        ]}
+      >
+        <Slot />
+      </div>
+
+      <div class={styles.footer} onClick$={toggle}>
+        <span class={styles["footer-chevron-icon"]}>
+          <ElmMdiIcon d={mdiChevronRight} color="gray" />
+        </span>
+        <hr class={styles["footer-line"]} />
+        <span class={styles["footer-cross-icon"]}>
+          <ElmMdiIcon d={mdiPlus} color="#c56565" />
+        </span>
+        <ElmInlineText>CLOSE</ElmInlineText>
+        <span class={styles["footer-cross-icon"]}>
+          <ElmMdiIcon d={mdiPlus} color="#c56565" />
+        </span>
+        <hr class={styles["footer-line"]} />
+        <span class={styles["footer-chevron-icon"]}>
+          <ElmMdiIcon d={mdiChevronRight} color="gray" />
+        </span>
+      </div>
+    </div>
+  );
+});

package/src/components/fallback/elm-block-fallback.module.scss

@@ -0,0 +1,8 @@
+.block-fallback {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: var(--height);
+}

package/src/components/fallback/elm-block-fallback.stories.tsx

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from "storybook-framework-qwik";
+import { ElmBlockFallback } from "./elm-block-fallback";
+
+const meta: Meta<typeof ElmBlockFallback> = {
+  title: "Components/Fallback/elm-block-fallback",
+  component: ElmBlockFallback,
+  tags: ["autodocs"],
+  args: {},
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {};

package/src/components/fallback/elm-block-fallback.tsx

@@ -0,0 +1,20 @@
+import { component$, CSSProperties } from "@builder.io/qwik";
+
+import styles from "./elm-block-fallback.module.scss";
+import { ElmDotLoadingIcon } from "../icon/elm-dot-loading-icon";
+import { ElmRectangleWave } from "./elm-rectangle-wave";
+
+export interface ElmBlockFallbackProps {
+  height?: CSSProperties["height"];
+}
+
+export const ElmBlockFallback = component$<ElmBlockFallbackProps>(
+  ({ height = "16rem" }) => {
+    return (
+      <div class={styles["block-fallback"]} style={{ "--height": height }}>
+        <ElmDotLoadingIcon />
+        <ElmRectangleWave />
+      </div>
+    );
+  },
+);

package/src/components/fallback/elm-rectangle-wave.module.scss

@@ -0,0 +1,42 @@
+@keyframes elm-rectangle-wave {
+  0% {
+    transform: scale(0);
+    opacity: 0;
+  }
+
+  30% {
+    opacity: 0;
+  }
+
+  40% {
+    opacity: 1;
+  }
+
+  100% {
+    transform: scale(1);
+    opacity: 0;
+  }
+}
+
+.rectangle-wave {
+  box-sizing: border-box;
+  position: absolute;
+  overflow: hidden;
+
+  margin: 0;
+  width: 100%;
+  height: 100%;
+
+  animation-name: elm-rectangle-wave;
+  animation-duration: 1200ms;
+  animation-iteration-count: infinite;
+  animation-fill-mode: both;
+
+  border-style: solid;
+  border-width: 1px;
+  border-color: rgba(0, 0, 0, 0.7);
+
+  [data-theme="dark"] & {
+    border-color: rgba(255, 255, 255, 0.7);
+  }
+}

package/src/components/fallback/elm-rectangle-wave.stories.tsx

@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from "storybook-framework-qwik";
+import { ElmRectangleWave } from "./elm-rectangle-wave";
+
+const meta: Meta<typeof ElmRectangleWave> = {
+  title: "Components/Fallback/elm-rectangle-wave",
+  component: ElmRectangleWave,
+  tags: ["autodocs"],
+  args: {},
+  render() {
+    return (
+      <div
+        style={{
+          width: "100%",
+          aspectRatio: "2/1",
+          margin: 0,
+          position: "relative",
+        }}
+      >
+        <ElmRectangleWave />
+      </div>
+    );
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {};