@elmethis/qwik 0.0.6 → 0.0.8

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

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

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

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

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

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

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

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

@@ -1,11 +0,0 @@
-import { component$ } from "@builder.io/qwik";
-
-import styles from "./elm-rectangle-wave.module.scss";
-
-export interface ElmRectangleWaveProps {
-  placeholder?: string;
-}
-
-export const ElmRectangleWave = component$<ElmRectangleWaveProps>(() => {
-  return <div aria-hidden="true" class={styles["rectangle-wave"]}></div>;
-});

package/src/components/icon/elm-dot-loading-icon.module.scss

@@ -1,53 +0,0 @@
-@keyframes bounce {
-  0% {
-    transform: translateY(0%) scaleY(0.3) scaleX(1.5);
-  }
-
-  10% {
-    transform: scaleY(0.8) scaleX(1.2);
-  }
-
-  100% {
-    transform: translateY(-400%) scaleY(1.1);
-  }
-}
-
-.wrapper {
-  width: var(--size);
-  height: var(--size);
-  user-select: none;
-  position: relative;
-  display: flex;
-  justify-content: space-around;
-  align-items: flex-end;
-}
-
-.dot {
-  width: 20%;
-  height: 20%;
-  border-radius: 50%;
-  animation-name: bounce;
-  animation-duration: 0.4s;
-  animation-iteration-count: infinite;
-  animation-direction: alternate;
-  animation-timing-function: ease-out;
-
-  transition: background-color 400ms;
-  background-color: var(--color, #606875);
-
-  [data-theme="dark"] & {
-    background-color: #b0b5be;
-  }
-
-  &:nth-last-of-type(1) {
-    animation-delay: -100ms;
-  }
-
-  &:nth-last-of-type(2) {
-    animation-delay: 0ms;
-  }
-
-  &:nth-last-of-type(3) {
-    animation-delay: 100ms;
-  }
-}

package/src/components/icon/elm-dot-loading-icon.stories.tsx

@@ -1,15 +0,0 @@
-import type { Meta, StoryObj } from "storybook-framework-qwik";
-import { ElmDotLoadingIcon } from "./elm-dot-loading-icon";
-
-const meta: Meta<typeof ElmDotLoadingIcon> = {
-  title: "Components/Icon/elm-dot-loading-icon",
-  component: ElmDotLoadingIcon,
-  tags: ["autodocs"],
-  argTypes: { color: { control: "color" } },
-  args: { size: "4em" },
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Primary: Story = {};

package/src/components/icon/elm-dot-loading-icon.tsx

@@ -1,35 +0,0 @@
-import { component$, type CSSProperties } from "@builder.io/qwik";
-
-import styles from "./elm-dot-loading-icon.module.scss";
-
-export interface ElmDotLoadingIconProps {
-  /**
-   * Specifies the color of the dot.
-   *
-   * e.g.) `'red'`, `'#ff0000'`, `'rgba(255, 0, 0, 0.5)'`
-   */
-  color?: CSSProperties["backgroundColor"];
-
-  /**
-   * Specifies the size of the dot.
-   */
-  size?: CSSProperties["width"];
-}
-
-export const ElmDotLoadingIcon = component$<ElmDotLoadingIconProps>(
-  ({ size = "4em", color = "#606875" }) => {
-    return (
-      <div
-        class={styles.wrapper}
-        style={{
-          "--size": size,
-          "--color": color,
-        }}
-      >
-        <div class={styles.dot} aria-hidden="true"></div>
-        <div class={styles.dot} aria-hidden="true"></div>
-        <div class={styles.dot} aria-hidden="true"></div>
-      </div>
-    );
-  },
-);

package/src/components/icon/elm-inline-icon.module.scss

@@ -1,21 +0,0 @@
-.icon {
-  margin: 0;
-  padding: 0;
-  display: inline-block;
-  vertical-align: middle;
-  height: 1em;
-
-  &::selection {
-    filter: brightness(1000%);
-    background-color: var(--color, rgba(black, 0.25));
-  }
-
-  [data-theme="dark"] & {
-    color: var(--color, rgba(white, 0.7));
-
-    &::selection {
-      color: rgba(black, 0.7);
-      background-color: var(--color, rgba(white, 0.25));
-    }
-  }
-}

package/src/components/icon/elm-inline-icon.stories.tsx

@@ -1,16 +0,0 @@
-import type { Meta, StoryObj } from "storybook-framework-qwik";
-import { ElmInlineIcon } from "./elm-inline-icon";
-
-const meta: Meta<typeof ElmInlineIcon> = {
-  title: "Components/Icon/elm-inline-icon",
-  component: ElmInlineIcon,
-  tags: ["autodocs"],
-  args: {
-    src: "https://rust-lang.org/logos/rust-logo-512x512.png",
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Primary: Story = {};

package/src/components/icon/elm-inline-icon.tsx

@@ -1,25 +0,0 @@
-/* eslint-disable qwik/jsx-img */
-
-import { component$ } from "@builder.io/qwik";
-
-import styles from "./elm-inline-icon.module.scss";
-
-export interface ElmInlineIconProps {
-  /**
-   * The source URL of the icon.
-   */
-  src: string;
-
-  /**
-   * The alt text for the icon.
-   */
-  alt?: string;
-}
-
-export const ElmInlineIcon = component$<ElmInlineIconProps>(({ src, alt }) => {
-  return (
-    <div class={styles.icon}>
-      <img src={src} alt={alt} class={styles.icon} />
-    </div>
-  );
-});

package/src/components/icon/elm-language-icon.stories.tsx

@@ -1,22 +0,0 @@
-import type { Meta, StoryObj } from "storybook-framework-qwik";
-import { ElmLanguageIcon, LANGUAGES } from "./elm-language-icon";
-
-const meta: Meta<typeof ElmLanguageIcon> = {
-  title: "Components/Icon/elm-language-icon",
-  component: ElmLanguageIcon,
-  tags: ["autodocs"],
-  args: {},
-  argTypes: {
-    language: {
-      control: "radio",
-      options: LANGUAGES,
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Primary: Story = {
-  args: { language: "rust" },
-};

package/src/components/icon/elm-language-icon.tsx

@@ -1,167 +0,0 @@
-import { Component, component$ } from "@builder.io/qwik";
-
-// import styles from "./elm-language-icon.module.scss";
-
-import { type CommonLanguageProps } from "./languages/language-interface";
-
-import { Rust } from "./languages/rust";
-import { Javascript } from "./languages/javascript";
-import { Typescript } from "./languages/typescript";
-import { Bash } from "./languages/bash";
-import { Terraform } from "./languages/terraform";
-import { Html } from "./languages/html";
-import { Css } from "./languages/css";
-import { Npm } from "./languages/npm";
-import { Java } from "./languages/java";
-import { Kotlin } from "./languages/kotlin";
-import { Go } from "./languages/go";
-import { Python } from "./languages/python";
-import { Sql } from "./languages/sql";
-import { Json } from "./languages/json";
-import { Lua } from "./languages/lua";
-import { Csharp } from "./languages/c-sharp";
-import { Cplusplus } from "./languages/c-plus-plus";
-import { C } from "./languages/c";
-
-export const LANGUAGES = [
-  "rust",
-  "javascript",
-  "typescript",
-  "shell",
-  "terraform",
-  "html",
-  "css",
-  "npm",
-  "java",
-  "kotlin",
-  "go",
-  "python",
-  "sql",
-  "json",
-  "lua",
-  "csharp",
-  "cpp",
-  "c",
-  "file",
-] as const;
-
-export type Language = (typeof LANGUAGES)[number];
-
-export interface ElmLanguageIconProps {
-  /**
-   * The size of the icon.
-   */
-  size?: number;
-
-  /**
-   * The language of the icon.
-   */
-  language: Language | string;
-}
-
-const normalizeLanguage = (language: string): Language => {
-  switch (language) {
-    case "rust":
-    case "rs":
-      return "rust";
-
-    case "javascript":
-    case "js":
-      return "javascript";
-
-    case "typescript":
-    case "ts":
-      return "typescript";
-
-    case "bash":
-    case "sh":
-    case "shell":
-      return "shell";
-
-    case "tf":
-    case "terraform":
-    case "hcl":
-      return "terraform";
-
-    case "html":
-    case "html5":
-      return "html";
-
-    case "css":
-    case "css3":
-      return "css";
-
-    case "npm":
-      return "npm";
-
-    case "java":
-      return "java";
-
-    case "kotlin":
-    case "kt":
-      return "kotlin";
-
-    case "go":
-    case "golang":
-      return "go";
-
-    case "python":
-    case "py":
-      return "python";
-
-    case "sql":
-      return "sql";
-
-    case "json":
-      return "json";
-
-    case "lua":
-      return "lua";
-
-    case "cs":
-    case "c#":
-    case "csharp":
-      return "csharp";
-
-    case "cpp":
-    case "c++":
-      return "cpp";
-
-    case "c":
-    case "clang":
-      return "c";
-
-    default:
-      return "file";
-  }
-};
-
-const renderMap: Record<Language, Component<CommonLanguageProps>> = {
-  rust: Rust,
-  javascript: Javascript,
-  typescript: Typescript,
-  shell: Bash,
-  terraform: Terraform,
-  html: Html,
-  css: Css,
-  npm: Npm,
-  java: Java,
-  kotlin: Kotlin,
-  go: Go,
-  python: Python,
-  sql: Sql,
-  json: Json,
-  lua: Lua,
-  csharp: Csharp,
-  cpp: Cplusplus,
-  c: C,
-  file: () => null,
-};
-
-export const ElmLanguageIcon = component$<ElmLanguageIconProps>(
-  ({ size = 24, language }) => {
-    const Component = renderMap[normalizeLanguage(language)];
-
-    return <Component size={size} />;
-  },
-);

package/src/components/icon/elm-mdi-icon.module.scss

@@ -1,8 +0,0 @@
-.icon {
-  fill: var(--color, #555b67);
-  transition: fill 200ms;
-
-  [data-theme="dark"] & {
-    fill: var(--dark-color, #b0b5be);
-  }
-}

package/src/components/icon/elm-mdi-icon.stories.tsx

@@ -1,25 +0,0 @@
-import { type Meta, type StoryObj } from "storybook-framework-qwik";
-import { ElmMdiIcon } from "./elm-mdi-icon";
-import { mdiTag } from "@mdi/js";
-
-const meta: Meta<typeof ElmMdiIcon> = {
-  title: "Components/Icon/elm-mdi-icon",
-  component: ElmMdiIcon,
-  tags: ["autodocs"],
-  argTypes: {
-    color: { control: "color" },
-    lightColor: { control: "color" },
-    darkColor: { control: "color" },
-  },
-  args: {},
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Primary: Story = {
-  args: {
-    size: "1.25rem",
-    d: mdiTag,
-  },
-};

package/src/components/icon/elm-mdi-icon.tsx

@@ -1,34 +0,0 @@
-import { component$ } from "@builder.io/qwik";
-
-import styles from "./elm-mdi-icon.module.scss";
-
-export interface ElmMdiIconProps {
-  d: string;
-  size?: string;
-  color?: string;
-  lightColor?: string;
-  darkColor?: string;
-}
-
-export const ElmMdiIcon = component$<ElmMdiIconProps>(
-  ({ d, size = "1em", color, lightColor, darkColor }) => {
-    return (
-      <svg
-        class={styles.icon}
-        style={{
-          "--color": lightColor ?? color,
-          "--dark-color": darkColor ?? color,
-        }}
-        width={size}
-        height={size}
-        viewBox="0 0 24 24"
-        fill={color}
-        xmlns="http://www.w3.org/2000/svg"
-        focusable="false"
-        role="img"
-      >
-        <path d={d} />
-      </svg>
-    );
-  },
-);

package/src/components/icon/languages/bash.module.scss

@@ -1,6 +0,0 @@
-.path {
-  fill: #293138;
-  [data-theme="dark"] & {
-    fill: #d2dbe3;
-  }
-}