@elmethis/qwik 0.0.6 → 0.0.8

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

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

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

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

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

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

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

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

@@ -1,17 +0,0 @@
-/*
- * 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/src/global.d.ts

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

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

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

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

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

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

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

package/tsconfig.json

@@ -1,21 +0,0 @@
-{
-  "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"]
-}