@elmethis/qwik 0.0.2 → 0.0.4

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

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

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

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

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

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

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

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

@@ -0,0 +1,18 @@
+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 = {};