@elmethis/qwik 0.0.6 → 0.0.8

package/src/components/media/elm-block-image.module.scss

@@ -1,68 +0,0 @@
-.block-image {
-  margin: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-  gap: 0.5rem;
-  width: 100%;
-}
-
-.image-container {
-  width: 100%;
-  height: 100%;
-  position: relative;
-
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.image {
-  max-width: 100%;
-  max-height: 100%;
-  border-radius: 0.25rem;
-  box-shadow: 0 0 0.125rem rgba(black, 0.1);
-  transition: opacity 400ms;
-  opacity: var(--opacity, 1);
-  user-select: none;
-
-  cursor: var(--cursor);
-}
-
-.fallback {
-  width: 100%;
-  height: 100%;
-  inset: 0 0 auto auto;
-  position: absolute;
-  transition: opacity 400ms;
-  opacity: var(--opacity, 1);
-  pointer-events: none;
-}
-
-.caption-box {
-  box-sizing: border-box;
-  padding: 0rem 1rem;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 1rem;
-  opacity: 0.75;
-  opacity: var(--opacity, 1);
-  transition: opacity 400ms;
-}
-
-.modal-container {
-  width: 100vw;
-  height: 100vh;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: fixed;
-  inset: 0 0 auto auto;
-  z-index: 100;
-  background-color: rgba(#23262a, 0.8);
-  cursor: zoom-out;
-  opacity: var(--opacity, 1);
-  transition: opacity 200ms;
-}

package/src/components/media/elm-block-image.stories.tsx

@@ -1,79 +0,0 @@
-import type { Meta, StoryObj } from "storybook-framework-qwik";
-import { ElmBlockImage } from "./elm-block-image";
-
-import landscape from "../../assets/images/lamdscape.svg?url";
-import portrait from "../../assets/images/portrait.svg?url";
-import square from "../../assets/images/square.svg?url";
-
-const meta: Meta<typeof ElmBlockImage> = {
-  title: "Components/Media/elm-block-image",
-  component: ElmBlockImage,
-  tags: ["autodocs"],
-  args: {
-    src: "https://images.unsplash.com/photo-1556983703-27576e5afa24?ixlib=rb-4.0.3&q=85&fm=jpg&crop=entropy&cs=srgb",
-    block: true,
-    enableModal: true,
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Primary: Story = {
-  render() {
-    return (
-      <>
-        <ElmBlockImage {...this.args} />
-        <div>Some text below the image to demonstrate block display.</div>
-      </>
-    );
-  },
-};
-
-export const Svg: Story = {
-  args: {
-    src: "https://nuxt.com/cdn-cgi/image/w=1024,h=878/assets/landing/deploy.svg",
-    alt: "Deploy your app anywhere",
-  },
-};
-
-export const LongAlt: Story = {
-  args: {
-    src: "https://www.ikuma.cloud/api/v2/blog/leather-shoes-painting/og-image?lang=en",
-    caption:
-      "One-command deployments and zero-configuration options make it easy to get your Nuxt app live. Choose your platform, and let Nuxt handle the rest, allowing you to focus on building great applications rather than managing complex deployments.",
-  },
-};
-
-export const Invalid: Story = {
-  args: {
-    src: "invalid",
-  },
-};
-
-export const Landscape: Story = {
-  args: {
-    src: landscape,
-    caption: "A landscape image",
-    width: 400,
-    height: 100,
-  },
-};
-
-export const Portrait: Story = {
-  args: {
-    src: portrait,
-    caption: "A portrait image",
-    width: 100,
-    height: 200,
-  },
-};
-
-export const Square: Story = {
-  args: {
-    src: square,
-    caption: "A square image",
-    width: 200,
-    height: 200,
-  },
-};

package/src/components/media/elm-block-image.tsx

@@ -1,110 +0,0 @@
-import { $, component$, useSignal, type Numberish } from "@builder.io/qwik";
-
-import styles from "./elm-block-image.module.scss";
-import { ElmInlineText } from "../typography/elm-inline-text";
-import { ElmMdiIcon } from "../icon/elm-mdi-icon";
-import { ElmRectangleWave } from "../fallback/elm-rectangle-wave";
-import { mdiMessageImageOutline } from "@mdi/js";
-
-export interface ElmBlockImageProps {
-  /**
-   * Image source URL
-   */
-  src: string;
-
-  /**
-   * Image alt text
-   */
-  alt?: string;
-
-  enableModal?: boolean;
-
-  caption?: string;
-
-  width?: Numberish;
-
-  height?: Numberish;
-}
-
-export const ElmBlockImage = component$<ElmBlockImageProps>(
-  ({ src, alt, caption, width, height, enableModal = true }) => {
-    const isLoading = useSignal(true);
-    const isShowModal = useSignal(false);
-
-    const handleImageLoad = $(() => {
-      isLoading.value = false;
-    });
-
-    const handleToggleModal = $(() => {
-      if (enableModal) {
-        isShowModal.value = !isShowModal.value;
-      }
-    });
-
-    const ImageComponent = (
-      <img
-        class={[styles.image]}
-        src={src}
-        alt={alt ?? caption ?? "Image"}
-        width={width}
-        height={height}
-        onLoad$={handleImageLoad}
-        style={{
-          "--opacity": isLoading.value ? 0 : 1,
-          "--cursor": enableModal
-            ? isShowModal.value
-              ? "zoom-out"
-              : "zoom-in"
-            : "default",
-        }}
-      />
-    );
-
-    const Modal = (
-      <div
-        class={styles["modal-container"]}
-        style={{
-          pointerEvents: isShowModal.value ? "auto" : "none",
-          "--opacity": isShowModal.value ? 1 : 0,
-        }}
-        onClick$={handleToggleModal}
-      >
-        {ImageComponent}
-      </div>
-    );
-
-    return (
-      <figure class={styles["block-image"]}>
-        <div
-          class={styles["image-container"]}
-          style={{ "--opacity": isLoading.value ? 1 : 0 }}
-          onClick$={handleToggleModal}
-        >
-          {ImageComponent}
-
-          <div class={styles["fallback"]}>
-            <ElmRectangleWave />
-          </div>
-        </div>
-
-        {caption && (
-          <figcaption
-            class={styles["caption-box"]}
-            style={{ "--opacity": isLoading.value ? 0 : 1 }}
-          >
-            <span style={{ flex: "1" }}>
-              <ElmMdiIcon
-                d={mdiMessageImageOutline}
-                color="#cdb57b"
-                size="1.25rem"
-              />
-            </span>
-            <ElmInlineText size="1rem">{caption}</ElmInlineText>
-          </figcaption>
-        )}
-
-        {Modal}
-      </figure>
-    );
-  },
-);

package/src/components/media/elm-file.module.scss

@@ -1,43 +0,0 @@
-.file {
-  margin: 0;
-  padding: 1rem;
-  display: grid;
-  grid-template-columns: 1.5rem 1fr 1fr 1.5rem;
-  gap: 1rem;
-  align-items: center;
-
-  box-shadow: 0 0 0.125rem rgba(0, 0, 0, 0.2);
-  border-radius: 0.25rem;
-
-  background-color: rgba(white, 0.2);
-  [data-theme="dark"] & {
-    background-color: rgba(black, 0.2);
-  }
-}
-
-.file-size {
-  text-align: right;
-  opacity: 0.5;
-}
-
-.download-icon {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 1.5rem;
-  width: 1.5rem;
-
-  padding: 0.125rem;
-  border-radius: 0.125rem;
-  cursor: pointer;
-  transition:
-    color 200ms,
-    background-color 200ms;
-
-  &:hover {
-    background-color: rgba(black, 0.1);
-    [data-theme="dark"] & {
-      background-color: rgba(white, 0.1);
-    }
-  }
-}

package/src/components/media/elm-file.stories.tsx

@@ -1,27 +0,0 @@
-import type { Meta, StoryObj } from "storybook-framework-qwik";
-import { ElmFile } from "./elm-file";
-
-import file from "../../assets/vite.svg";
-
-const meta: Meta<typeof ElmFile> = {
-  title: "Components/Media/elm-file",
-  component: ElmFile,
-  tags: ["autodocs"],
-  args: {},
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Primary: Story = {
-  args: {
-    src: file,
-    filesize: "1.46 KB",
-  },
-};
-
-export const Secondary: Story = {
-  args: {
-    src: file,
-  },
-};

package/src/components/media/elm-file.tsx

@@ -1,75 +0,0 @@
-import { $, component$ } from "@builder.io/qwik";
-
-import styles from "./elm-file.module.scss";
-import { ElmMdiIcon } from "../icon/elm-mdi-icon";
-import { mdiDownload, mdiFile } from "@mdi/js";
-import { ElmInlineText } from "../typography/elm-inline-text";
-
-export interface ElmFileProps {
-  /**
-   * The name of the file.
-   */
-  name?: string;
-
-  /**
-   * The source of the file.
-   */
-  src: string;
-
-  /**
-   * The size of the file in bytes.
-   */
-  filesize?: string;
-}
-
-function getLastPathSegmentWithoutQueryOrHash(
-  urlString: string,
-): string | null {
-  const cleanedUrl = urlString.split(/[?#]/)[0];
-  const pathSegments = cleanedUrl.split("/").filter(Boolean);
-  return pathSegments.length > 0 ? pathSegments[pathSegments.length - 1] : null;
-}
-
-export const ElmFile = component$<ElmFileProps>(({ name, src, filesize }) => {
-  const downloadFile = $(async () => {
-    let link;
-    try {
-      const response = await fetch(src);
-      if (!response.ok) throw new Error("Failed to download file");
-
-      const blob = await response.blob();
-
-      link = document.createElement("a");
-      link.href = URL.createObjectURL(blob);
-      link.download =
-        name ?? getLastPathSegmentWithoutQueryOrHash(src) ?? "file";
-      link.click();
-    } catch (error) {
-      console.error("ERROR:", error);
-    } finally {
-      if (link) URL.revokeObjectURL(link.href);
-    }
-  });
-
-  return (
-    <div class={styles.file}>
-      <div>
-        <ElmMdiIcon d={mdiFile} size="1.25rem" />
-      </div>
-
-      <div>
-        <ElmInlineText>
-          {name ?? getLastPathSegmentWithoutQueryOrHash(src)}
-        </ElmInlineText>
-      </div>
-
-      <div class={styles["file-size"]}>
-        <ElmInlineText>{filesize}</ElmInlineText>
-      </div>
-
-      <div class={styles["download-icon"]} onClick$={downloadFile}>
-        <ElmMdiIcon d={mdiDownload} size="1.25rem" />
-      </div>
-    </div>
-  );
-});

package/src/components/navigation/elm-bookmark.module.scss

@@ -1,100 +0,0 @@
-.bookmark {
-  all: unset;
-  display: block;
-  container-type: inline-size;
-  border-radius: 0.25rem;
-  box-shadow: 0 0 0.125rem rgba(black, 0.1);
-  overflow: hidden;
-
-  transition:
-    background-color 200ms,
-    transform 200ms;
-
-  &:hover {
-    background-color: rgba(#6987b8, 0.1);
-    transform: translateX(-0.125rem) translateY(-0.125rem);
-  }
-
-  &:active {
-    background-color: rgba(#59b57c, 0.1);
-    transform: translateX(0) translateY(0);
-  }
-}
-
-.container {
-  all: unset;
-  cursor: pointer;
-  width: 100%;
-  display: flex;
-  flex-direction: row;
-
-  @container (max-width: 700px) {
-    & {
-      flex-direction: column;
-    }
-  }
-}
-
-.image {
-  overflow: hidden;
-  height: 100%;
-  opacity: 0.9;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  object-fit: cover;
-  object-position: center;
-  aspect-ratio: 2 / 1;
-  width: min-content;
-  max-width: 35%;
-
-  @container (max-width: 700px) {
-    & {
-      min-width: unset;
-      max-width: unset;
-      width: 100%;
-    }
-  }
-}
-
-.content {
-  flex: 1;
-  width: 75%;
-  box-sizing: border-box;
-  padding: 0.5rem;
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  justify-content: space-between;
-
-  transition: background-color 200ms;
-  background-color: rgba(white, 0.4);
-
-  @container (max-width: 700px) {
-    & {
-      width: 100%;
-    }
-  }
-
-  [data-theme="dark"] & {
-    background-color: rgba(black, 0.2);
-  }
-
-  .title {
-    box-sizing: border-box;
-  }
-
-  .description {
-    box-sizing: border-box;
-    opacity: 0.7;
-  }
-
-  .link {
-    line-height: 0.75rem;
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-    gap: 0.25rem;
-    opacity: 0.7;
-  }
-}

package/src/components/navigation/elm-bookmark.stories.tsx

@@ -1,87 +0,0 @@
-import type { Meta, StoryObj } from "storybook-framework-qwik";
-import { ElmBookmark } from "./elm-bookmark";
-
-const meta: Meta<typeof ElmBookmark> = {
-  title: "Components/Navigation/elm-bookmark",
-  component: ElmBookmark,
-  tags: ["autodocs"],
-  args: {
-    favicon: "https://pnpm.io/img/favicon.png",
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Primary: Story = {
-  args: {
-    title:
-      "OGP Checker - Check images for X(Twitter) and Facebook sharing | Web ToolBox",
-    description:
-      "A tool to check OGP tags and OGP images for SNS shares for a given page in real time, accurately simulating X (formerly Twitter) and Facebook share images on both PC and mobile.",
-    image:
-      "https://www.ikuma.cloud/api/v2/blog/leather-shoes-painting/og-image",
-    url: "https://www.ikuma.cloud/blog/article/leather-shoes-painting",
-    favicon: "https://pnpm.io/img/favicon.png",
-  },
-};
-
-export const WithoutDate: Story = {
-  args: {
-    title:
-      "OGP Checker - Check images for X(Twitter) and Facebook sharing | Web ToolBox",
-    description:
-      "A tool to check OGP tags and OGP images for SNS shares for a given page in real time, accurately simulating X (formerly Twitter) and Facebook share images on both PC and mobile.",
-    image:
-      "https://web-toolbox.dev/__og-image__/static/en/tools/ogp-checker/og.png",
-    url: "https://web-toolbox.dev/en/tools/ogp-checker",
-  },
-};
-
-export const Card: Story = {
-  args: {
-    title:
-      "OGP Checker - Check images for X(Twitter) and Facebook sharing | Web ToolBox",
-    description:
-      "A tool to check OGP tags and OGP images for SNS shares for a given page in real time, accurately simulating X (formerly Twitter) and Facebook share images on both PC and mobile.",
-    image:
-      "https://www.ikuma.cloud/api/v2/blog/leather-shoes-painting/og-image",
-    url: "https://www.ikuma.cloud/blog/article/leather-shoes-painting",
-  },
-};
-
-export const Square: Story = {
-  args: {
-    url: "https://pnpm.io/",
-    title: "	Fast, disk space efficient package manager | pnpm",
-    description: "Fast, disk space efficient package manager",
-    image: "https://pnpm.io/img/ogimage.png",
-  },
-};
-
-export const SquareCard: Story = {
-  args: {
-    url: "https://pnpm.io/",
-    title: "	Fast, disk space efficient package manager | pnpm",
-    description: "Fast, disk space efficient package manager",
-    image: "https://pnpm.io/img/ogimage.png",
-  },
-};
-
-export const InvalidImage: Story = {
-  args: {
-    url: "https://pnpm.io/",
-    title: "	Fast, disk space efficient package manager | pnpm",
-    description: "Fast, disk space efficient package manager",
-    image: "https://pnpm.io/",
-  },
-};
-
-export const NoImage: Story = {
-  args: {
-    url: "https://pnpm.io/",
-    title: "	Fast, disk space efficient package manager | pnpm",
-    description: "Fast, disk space efficient package manager",
-    favicon: "https://pnpm.io/img/favicon.png",
-  },
-};

package/src/components/navigation/elm-bookmark.tsx

@@ -1,72 +0,0 @@
-/* eslint-disable qwik/jsx-img */
-import { component$ } from "@builder.io/qwik";
-
-import styles from "./elm-bookmark.module.scss";
-import { ElmInlineText } from "../typography/elm-inline-text";
-import { mdiLinkVariant } from "@mdi/js";
-import { ElmMdiIcon } from "../icon/elm-mdi-icon";
-import { ElmInlineIcon } from "../icon/elm-inline-icon";
-
-export interface ElmBookmarkProps {
-  /**
-   * The title of the bookmark.
-   */
-  title?: string;
-
-  /**
-   * The description of the bookmark.
-   */
-  description?: string;
-
-  /**
-   * The image to display.
-   * This can be a URL or a base64-encoded image.
-   */
-  image?: string;
-
-  /**
-   * The URL to navigate to.
-   */
-  url?: string;
-
-  /**
-   * The URL of the favicon.
-   */
-  favicon?: string;
-}
-
-export const ElmBookmark = component$<ElmBookmarkProps>(
-  ({ url, image, title, description, favicon }) => {
-    return (
-      <div class={styles.bookmark}>
-        <a
-          class={styles.container}
-          href={url}
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <img class={styles.image} src={image} alt="OGP Image" />
-
-          <div class={styles.content}>
-            <div class={styles.title}>
-              <ElmInlineText bold>{title}</ElmInlineText>
-            </div>
-
-            <div class={styles.description}>
-              <ElmInlineText size="0.75rem">{description}</ElmInlineText>
-            </div>
-
-            <div class={styles.link}>
-              {favicon ? (
-                <ElmInlineIcon src={favicon} />
-              ) : (
-                <ElmMdiIcon d={mdiLinkVariant} color="#6987b8" />
-              )}
-              <ElmInlineText size="0.75rem">{url}</ElmInlineText>
-            </div>
-          </div>
-        </a>
-      </div>
-    );
-  },
-);

package/src/components/others/elm-jarkup.module.scss

@@ -1,26 +0,0 @@
-.jarkup-body {
-  display: flex;
-  flex-direction: column;
-  gap: 2rem;
-}
-
-.column-list {
-  box-sizing: content-box;
-  padding-block: 0.25rem;
-  width: 100%;
-  display: flex;
-  flex-direction: row;
-  gap: 0.25rem;
-  justify-content: space-around;
-  overflow: auto;
-}
-
-.column {
-  box-sizing: border-box;
-  padding: 0.125rem;
-  flex: var(--width-ratio, 1);
-
-  & > * + * {
-    margin-block-start: 2em;
-  }
-}

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

@@ -1,18 +0,0 @@
-import type { Meta, StoryObj } from "storybook-framework-qwik";
-import { ElmJarkup } from "./elm-jarkup";
-import sampleData from "../../../../vue/src/components/others/ElmJsonComponentRenderer.json";
-import { type Component } from "jarkup-ts";
-
-const meta: Meta<typeof ElmJarkup> = {
-  title: "Components/Others/elm-jarkup",
-  component: ElmJarkup,
-  tags: ["autodocs"],
-  args: {
-    jsonComponents: sampleData as Component[],
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Primary: Story = {};