@elmethis/qwik 0.0.2 → 0.0.4

package/src/components/typography/elm-inline-text.tsx

@@ -0,0 +1,147 @@
+import { component$, Slot, type CSSProperties } from "@builder.io/qwik";
+
+import styles from "./elm-inline-text.module.scss";
+import textStyles from "../../styles/text.module.scss";
+
+import { ElmInlineIcon } from "../icon/elm-inline-icon";
+
+export interface ElmInlineTextProps {
+  /**
+   * The text to display.
+   */
+  text?: string;
+
+  /**
+   * Specifies the color of the text.
+   *
+   * e.g.) `'red'`, `'#ff0000'`, `'rgba(255, 0, 0, 0.5)'`
+   */
+  color?: CSSProperties["color"];
+
+  /**
+   * Specifies the font size of the text.
+   */
+  size?: CSSProperties["fontSize"];
+
+  /**
+   * Specifies whether the text should be bold.
+   */
+  bold?: boolean;
+
+  /**
+   * Specifies whether the text should be italic.
+   */
+  italic?: boolean;
+
+  /**
+   * Specifies whether the text should be underlined.
+   */
+  underline?: boolean;
+
+  /**
+   * Specifies whether the text should be strikethrough.
+   */
+  strikethrough?: boolean;
+
+  /**
+   * Specifies whether the text should be displayed as code.
+   */
+  code?: boolean;
+
+  kbd?: boolean;
+
+  /**
+   * Specifies the background color of the text.
+   */
+  backgroundColor?: CSSProperties["backgroundColor"];
+
+  /**
+   * The ruby text to display.
+   */
+  ruby?: string;
+
+  /**
+   * The URL to navigate to.
+   *
+   * e.g. `https://example.com`
+   */
+  href?: string;
+
+  favicon?: string;
+}
+
+export const ElmInlineText = component$<ElmInlineTextProps>((props) => {
+  const {
+    bold = false,
+    italic = false,
+    underline = false,
+    strikethrough = false,
+    code = false,
+    size = "1em",
+  } = props;
+
+  let vnode = props.text ? <span>{props.text}</span> : <Slot />;
+
+  if (props.kbd) {
+    vnode = <kbd class={styles.kbd}>{vnode}</kbd>;
+  }
+
+  if (strikethrough) {
+    vnode = <del>{vnode}</del>;
+  }
+
+  if (italic) {
+    vnode = <em>{vnode}</em>;
+  }
+
+  if (underline) {
+    vnode = <ins>{vnode}</ins>;
+  }
+
+  if (bold) {
+    vnode = <strong>{vnode}</strong>;
+  }
+
+  if (code) {
+    vnode = <code class={styles.code}>{vnode}</code>;
+  }
+
+  if (props.ruby) {
+    vnode = (
+      <ruby class={styles.text}>
+        <span>{vnode}</span>
+        <rt>{props.ruby}</rt>
+      </ruby>
+    );
+  }
+
+  const wrappedVnode = (
+    <span
+      class={[styles.text, textStyles.text]}
+      style={{
+        "--color": props.color,
+        "--font-size": size,
+        "--background-color": props.backgroundColor,
+      }}
+    >
+      {vnode}
+    </span>
+  );
+
+  if (props.href) {
+    return (
+      <a
+        class={styles.link}
+        href={props.href}
+        style={{ "--font-size": size }}
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        {props.favicon && <ElmInlineIcon src={props.favicon} />}
+        {wrappedVnode}
+      </a>
+    );
+  }
+
+  return wrappedVnode;
+});

package/src/components/typography/elm-list.global.scss

@@ -0,0 +1,66 @@
+.elmethis-list-common {
+  margin-block: 1rem;
+  opacity: var(--opacity);
+  transition: opacity 800ms;
+  box-sizing: border-box;
+  padding-left: 1.25rem;
+}
+
+.elmethis-bulleted-list {
+  li {
+    box-sizing: border-box;
+    padding-left: 0.5rem;
+    margin-block: 0.75rem;
+
+    &::marker {
+      content: url("data:image/svg+xml;base64,ICA8c3ZnCiAgICB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnCiAgICB2aWV3Qm94PScwIDAgMTYgMTYnCiAgICB3aWR0aD0nMTJweCcKICAgIGhlaWdodD0nMTJweCcKICA+CiAgICA8cGF0aAogICAgICBmaWxsPScjNDQ5NzYzJwogICAgICBvcGFjaXR5PScwLjgnCiAgICAgIGQ9J00zIDMuNzMyYTEuNSAxLjUgMCAwIDEgMi4zMDUtMS4yNjVsNi43MDYgNC4yNjdhMS41IDEuNSAwIDAgMSAwIDIuNTMxbC02LjcwNiA0LjI2OEExLjUgMS41IDAgMCAxIDMgMTIuMjY3VjMuNzMyWicKICAgIC8+CiAgPC9zdmc+");
+    }
+
+    ul {
+      li {
+        &::marker {
+          content: url("data:image/svg+xml;base64,ICA8c3ZnCiAgICB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnCiAgICB2aWV3Qm94PScwIDAgMjQgMjQnCiAgICB3aWR0aD0nMTJweCcKICAgIGhlaWdodD0nMTJweCcKICAgIHN0cm9rZT0nIzQ0OTc2MycKICAgIGZpbGw9J3RyYW5zcGFyZW50JwogID4KICAgIDxwYXRoCiAgICAgIHN0cm9rZUxpbmVjYXA9J3JvdW5kJwogICAgICBzdHJva2VMaW5lam9pbj0ncm91bmQnCiAgICAgIGQ9J001LjI1IDUuNjUzYzAtLjg1Ni45MTctMS4zOTggMS42NjctLjk4NmwxMS41NCA2LjM0N2ExLjEyNSAxLjEyNSAwIDAgMSAwIDEuOTcybC0xMS41NCA2LjM0N2ExLjEyNSAxLjEyNSAwIDAgMS0xLjY2Ny0uOTg2VjUuNjUzWicKICAgIC8+CiAgPC9zdmc+");
+        }
+        ul {
+          li {
+            &::marker {
+              content: url("data:image/svg+xml;base64,ICA8c3ZnCiAgICB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnCiAgICB2aWV3Qm94PScwIDAgMjAgMjAnCiAgICB3aWR0aD0nMTJweCcKICAgIGhlaWdodD0nMTJweCcKICAgIHN0cm9rZT0nIzQ0OTc2MycKICAgIGZpbGw9JyM0NDk3NjMnCiAgPgogICAgPHBhdGgKICAgICAgZmlsbFJ1bGU9J2V2ZW5vZGQnCiAgICAgIGQ9J004LjIyIDUuMjJhLjc1Ljc1IDAgMCAxIDEuMDYgMGw0LjI1IDQuMjVhLjc1Ljc1IDAgMCAxIDAgMS4wNmwtNC4yNSA0LjI1YS43NS43NSAwIDAgMS0xLjA2LTEuMDZMMTEuOTQgMTAgOC4yMiA2LjI4YS43NS43NSAwIDAgMSAwLTEuMDZaJwogICAgICBjbGlwUnVsZT0nZXZlbm9kZCcKICAgIC8+CiAgPC9zdmc+");
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+.elmethis-numbered-list {
+  li {
+    box-sizing: border-box;
+    padding-left: 0.25rem;
+    margin-block: 0.75rem;
+    margin-left: 0.25rem;
+
+    list-style-type: decimal;
+
+    &::marker {
+      font-weight: bold;
+      color: #9771bd;
+    }
+
+    ol {
+      li {
+        list-style-type: lower-alpha;
+        ol {
+          li {
+            list-style-type: lower-roman;
+            ol {
+              li {
+                list-style-type: lower-greek;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/src/components/typography/elm-list.stories.tsx

@@ -0,0 +1,61 @@
+import type { Meta, StoryObj } from "storybook-framework-qwik";
+import { ElmList } from "./elm-list";
+
+const meta: Meta<typeof ElmList> = {
+  title: "Components/Typography/elm-list",
+  component: ElmList,
+  tags: ["autodocs"],
+  argTypes: {
+    listStyle: {
+      options: ["unordered", "ordered"],
+      control: "radio",
+    },
+  },
+  render() {
+    return (
+      <ElmList {...this.args}>
+        <li>Item 1</li>
+        <li>Item 2</li>
+        <li>Item 3</li>
+      </ElmList>
+    );
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Unordered: Story = {
+  args: { listStyle: "unordered" },
+};
+
+export const Ordered: Story = {
+  args: { listStyle: "ordered" },
+};
+
+export const Nested: Story = {
+  args: { listStyle: "unordered" },
+  render() {
+    return (
+      <ElmList {...this.args}>
+        <li>Item 1</li>
+        <li>
+          Item 2
+          <ElmList {...this.args}>
+            <li>Item 2.1</li>
+            <li>
+              Item 2.2
+              <ElmList {...this.args}>
+                <li>Item 2.2.1</li>
+                <li>Item 2.2.2</li>
+                <li>Item 2.2.3</li>
+              </ElmList>
+            </li>
+            <li>Item 2.3</li>
+          </ElmList>
+        </li>
+        <li>Item 3</li>
+      </ElmList>
+    );
+  },
+};

package/src/components/typography/elm-list.tsx

@@ -0,0 +1,39 @@
+import { component$, Slot } from "@builder.io/qwik";
+
+import "./elm-list.global.scss";
+
+import textStyle from "../../styles/text.module.scss";
+
+export interface ElmListProps {
+  listStyle: "unordered" | "ordered";
+}
+
+export const ElmList = component$<ElmListProps>(
+  ({ listStyle = "unordered" }) => {
+    if (listStyle === "ordered") {
+      return (
+        <ol
+          class={[
+            textStyle.text,
+            "elmethis-list-common",
+            "elmethis-numbered-list",
+          ]}
+        >
+          <Slot />
+        </ol>
+      );
+    } else {
+      return (
+        <ul
+          class={[
+            textStyle.text,
+            "elmethis-list-common",
+            "elmethis-bulleted-list",
+          ]}
+        >
+          <Slot />
+        </ul>
+      );
+    }
+  },
+);

package/src/components/typography/elm-paragraph.module.scss

@@ -0,0 +1,21 @@
+.paragraph {
+  opacity: var(--opacity, 0);
+  opacity: var(--opacity);
+  transition: opacity 800ms;
+  color: var(--color, #606875);
+  background-color: var(--background-color, inherit);
+
+  &::selection {
+    color: rgba(255, 255, 255, 0.7);
+    background-color: rgba(0, 0, 0, 0.7);
+  }
+
+  [data-theme="dark"] & {
+    color: rgba(255, 255, 255, 0.7);
+
+    &::selection {
+      color: rgba(0, 0, 0, 0.7);
+      background-color: rgba(255, 255, 255, 0.7);
+    }
+  }
+}

package/src/components/typography/elm-paragraph.stories.tsx

@@ -0,0 +1,47 @@
+import type { Meta, StoryObj } from "storybook-framework-qwik";
+import { ElmParagraph } from "./elm-paragraph";
+
+const meta: Meta<typeof ElmParagraph> = {
+  title: "Components/Typography/elm-paragraph",
+  component: ElmParagraph,
+  tags: ["autodocs"],
+  args: {},
+  argTypes: {
+    color: { control: "color" },
+    backgroundColor: { control: "color" },
+  },
+  render() {
+    return (
+      <ElmParagraph {...this.args}>
+        This is a paragraph with an inline text component.
+      </ElmParagraph>
+    );
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {};
+
+export const Color: Story = {
+  args: {
+    color: "#4b9ba9",
+  },
+};
+
+export const BackgroundColor: Story = {
+  args: {
+    backgroundColor: "#b1d6dc",
+  },
+};
+
+export const Many: Story = {
+  render() {
+    return Array.from({ length: 50 }, (_, i) => (
+      <ElmParagraph key={i} {...this.args}>
+        This is a paragraph with an inline text component.
+      </ElmParagraph>
+    ));
+  },
+};

package/src/components/typography/elm-paragraph.tsx

@@ -0,0 +1,31 @@
+import { component$, Slot } from "@builder.io/qwik";
+
+import styles from "./elm-paragraph.module.scss";
+import textStyles from "../../styles/text.module.scss";
+import { useInView } from "../../hooks/useInView";
+
+export interface ElmParagraphProps {
+  color?: string;
+
+  backgroundColor?: string;
+}
+
+export const ElmParagraph = component$<ElmParagraphProps>(
+  ({ color, backgroundColor }) => {
+    const { ref, isVisible } = useInView();
+
+    return (
+      <p
+        ref={ref}
+        class={[styles.paragraph, textStyles.text]}
+        style={{
+          "--color": color,
+          "--background-color": backgroundColor,
+          "--opacity": isVisible.value ? 1 : 0,
+        }}
+      >
+        <Slot />
+      </p>
+    );
+  },
+);

package/src/entry.dev.tsx

@@ -0,0 +1,17 @@
+/*
+ * WHAT IS THIS FILE?
+ *
+ * Development entry point using only client-side modules:
+ * - Do not use this mode in production!
+ * - No SSR
+ * - No portion of the application is pre-rendered on the server.
+ * - All of the application is running eagerly in the browser.
+ * - More code is transferred to the browser than in SSR mode.
+ * - Optimizer/Serialization/Deserialization code is not exercised!
+ */
+import { render, type RenderOptions } from "@builder.io/qwik";
+import Root from "./root";
+
+export default function (opts: RenderOptions) {
+  return render(document, <Root />, opts);
+}

package/{lib-types/entry.ssr.d.ts → src/entry.ssr.tsx}

@@ -10,5 +10,12 @@
  * - npm run build
  *
  */
-import { type RenderToStreamOptions } from "@builder.io/qwik/server";
-export default function (opts: RenderToStreamOptions): Promise<import("@builder.io/qwik/server").RenderToStreamResult>;
+import {
+  renderToStream,
+  type RenderToStreamOptions,
+} from "@builder.io/qwik/server";
+import Root from "./root";
+
+export default function (opts: RenderToStreamOptions) {
+  return renderToStream(<Root />, opts);
+}

package/src/global.d.ts

@@ -0,0 +1,13 @@
+declare module "*.module.scss" {
+  const classes: { [key: string]: string };
+  export default classes;
+}
+
+declare module "*.scss";
+
+declare module "*.module.css" {
+  const classes: { [key: string]: string };
+  export default classes;
+}
+
+declare module "*.css";

package/src/hooks/useDelayedSignal.ts

@@ -0,0 +1,27 @@
+import { $, useSignal } from "@builder.io/qwik";
+
+export const useDelayedSignal = <T>(
+  initialValue: Parameters<typeof useSignal<T>>[0],
+) => {
+  const signal = useSignal<T>(initialValue);
+  const delayedSignal = useSignal<T>(initialValue);
+  const isSignalChanging = useSignal(false);
+
+  const dispatch = $((value: T, delay?: number) => {
+    isSignalChanging.value = true;
+    signal.value = value;
+
+    if (delay === undefined || delay <= 0) {
+      delayedSignal.value = value;
+      isSignalChanging.value = false;
+    } else {
+      const timerId = setTimeout(() => {
+        delayedSignal.value = value;
+        isSignalChanging.value = false;
+        clearTimeout(timerId);
+      }, delay);
+    }
+  });
+
+  return { signal, delayedSignal, dispatch };
+};

package/src/hooks/useInView.tsx

@@ -0,0 +1,23 @@
+import { useSignal, useVisibleTask$ } from "@builder.io/qwik";
+
+export const useInView = (props?: { defaultValue?: boolean }) => {
+  const ref = useSignal<Element>();
+  const isVisible = useSignal(props?.defaultValue ?? false);
+
+  // eslint-disable-next-line qwik/no-use-visible-task
+  useVisibleTask$(() => {
+    if (!ref.value) return;
+
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        isVisible.value = entry.isIntersecting;
+      },
+      { rootMargin: "100px", threshold: 0.1 },
+    );
+
+    observer.observe(ref.value);
+    return () => observer.disconnect();
+  });
+
+  return { ref, isVisible };
+};

package/src/index.ts

@@ -0,0 +1,113 @@
+// | Code |
+export {
+  ElmCodeBlock,
+  type ElmCodeBlockProps,
+} from "./components/code/elm-code-block";
+export { ElmKatex, type ElmKatexProps } from "./components/code/elm-katex";
+export {
+  ElmShikiHighlighter,
+  type ElmShikiHighlighterProps,
+} from "./components/code/elm-shiki-highlighter";
+
+// | Containments |
+export {
+  ElmToggle,
+  type ElmToggleProps,
+} from "./components/containments/elm-toggle";
+
+// | Fallback |
+export {
+  ElmBlockFallback,
+  type ElmBlockFallbackProps,
+} from "./components/fallback/elm-block-fallback";
+export {
+  ElmRectangleWave,
+  type ElmRectangleWaveProps,
+} from "./components/fallback/elm-rectangle-wave";
+
+// | Icon |
+export {
+  ElmDotLoadingIcon,
+  type ElmDotLoadingIconProps,
+} from "./components/icon/elm-dot-loading-icon";
+
+export {
+  ElmInlineIcon,
+  type ElmInlineIconProps,
+} from "./components/icon/elm-inline-icon";
+
+export {
+  ElmLanguageIcon,
+  type ElmLanguageIconProps,
+} from "./components/icon/elm-language-icon";
+
+export {
+  ElmMdiIcon,
+  type ElmMdiIconProps,
+} from "./components/icon/elm-mdi-icon";
+
+// | Media |
+export {
+  ElmBlockImage,
+  type ElmBlockImageProps,
+} from "./components/media/elm-block-image";
+export { ElmFile, type ElmFileProps } from "./components/media/elm-file";
+
+// | Navigation |
+export {
+  ElmBookmark,
+  type ElmBookmarkProps,
+} from "./components/navigation/elm-bookmark";
+
+// | Typography |
+export {
+  ElmBlockQuote,
+  type ElmBlockQuoteProps,
+} from "./components/typography/elm-block-quote";
+export {
+  ElmCallout,
+  type ElmCalloutProps,
+} from "./components/typography/elm-callout";
+export {
+  ElmDivider,
+  type ElmDividerProps,
+} from "./components/typography/elm-divider";
+export {
+  ElmFragmentIdentifier,
+  type ElmFragmentIdentifierProps,
+} from "./components/typography/elm-fragment-identifier";
+export {
+  ElmHeading,
+  type ElmHeadingProps,
+} from "./components/typography/elm-heading";
+export {
+  ElmInlineText,
+  type ElmInlineTextProps,
+} from "./components/typography/elm-inline-text";
+export { ElmList, type ElmListProps } from "./components/typography/elm-list";
+export {
+  ElmParagraph,
+  type ElmParagraphProps,
+} from "./components/typography/elm-paragraph";
+
+// | Table |
+export { ElmTable, type ElmTableProps } from "./components/table/elm-table";
+export {
+  ElmTableHeader,
+  type ElmTableHeaderProps,
+} from "./components/table/elm-table-header";
+export {
+  ElmTableBody,
+  type ElmTableBodyProps,
+} from "./components/table/elm-table-body";
+export {
+  ElmTableRow,
+  type ElmTableRowProps,
+} from "./components/table/elm-table-row";
+export {
+  ElmTableCell,
+  type ElmTableCellProps,
+} from "./components/table/elm-table-cell";
+
+// | Others |
+export { ElmJarkup, type ElmJarkupProps } from "./components/others/elm-jarkup";

package/src/root.tsx

@@ -0,0 +1,13 @@
+export default () => {
+  return (
+    <>
+      <head>
+        <meta charset="utf-8" />
+        <title>Qwik Blank App</title>
+      </head>
+      <body>
+        <h1>Qwik Blank App</h1>
+      </body>
+    </>
+  );
+};

package/src/styles/text.module.scss

@@ -0,0 +1,17 @@
+.text {
+  color: var(--color, #606875);
+
+  &::selection {
+    color: #cccfd5;
+    background-color: var(--color, #3e434b);
+  }
+
+  [data-theme="dark"] & {
+    color: var(--color, #b0b5be);
+
+    &::selection {
+      color: #3e434b;
+      background-color: var(--color, #cccfd5);
+    }
+  }
+}

package/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "allowJs": true,
+    "target": "ES2020",
+    "module": "ES2020",
+    "lib": ["es2020", "DOM"],
+    "jsx": "react-jsx",
+    "jsxImportSource": "@builder.io/qwik",
+    "strict": true,
+    "declaration": true,
+    "declarationDir": "lib-types",
+    "resolveJsonModule": true,
+    "moduleResolution": "Bundler",
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "incremental": true,
+    "isolatedModules": true,
+    "types": ["vite/client"]
+  },
+  "include": ["src"]
+}