@elmethis/qwik 0.0.6 → 0.0.8

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

@@ -1,36 +0,0 @@
-.callout {
-  position: relative;
-  padding: 1rem;
-
-  &::after {
-    position: absolute;
-    content: "";
-    inset: 0 auto auto 0;
-    height: 100%;
-    width: 0.25rem;
-    background-color: var(--callout-color);
-  }
-
-  &::before {
-    position: absolute;
-    content: "";
-    inset: 0 0 auto auto;
-    height: 100%;
-    width: 100%;
-    background-color: var(--callout-color);
-    opacity: 0.15;
-    z-index: -1;
-    pointer-events: none;
-  }
-}
-
-.header {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.content {
-  padding-block-start: 1rem;
-  padding-block-end: 0.25rem;
-}

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

@@ -1,47 +0,0 @@
-import type { Meta, StoryObj } from "storybook-framework-qwik";
-import { ElmCallout } from "./elm-callout";
-import { ElmInlineText } from "./elm-inline-text";
-
-const lorem =
-  "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec purus nec nunc tincidunt aliquam. Nullam nec purus nec nunc tincidunt aliquam.";
-
-const meta: Meta<typeof ElmCallout> = {
-  title: "Components/Typography/elm-callout",
-  component: ElmCallout,
-  tags: ["autodocs"],
-  argTypes: {
-    type: {
-      control: "radio",
-      options: ["note", "tip", "important", "warning", "caution"],
-    },
-  },
-  args: {},
-  render() {
-    return (
-      <ElmCallout {...this.args}>
-        <ElmInlineText text={lorem} />
-      </ElmCallout>
-    );
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Primary: Story = {};
-
-export const Tip: Story = {
-  args: { type: "tip" },
-};
-
-export const Important: Story = {
-  args: { type: "important" },
-};
-
-export const Warning: Story = {
-  args: { type: "warning" },
-};
-
-export const Caution: Story = {
-  args: { type: "caution" },
-};

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

@@ -1,52 +0,0 @@
-import { component$, Slot } from "@builder.io/qwik";
-
-import styles from "./elm-callout.module.scss";
-import {
-  mdiAlert,
-  mdiAlertOctagram,
-  mdiInformation,
-  mdiLightbulbOn,
-  mdiShieldAlert,
-} from "@mdi/js";
-import { ElmMdiIcon } from "../icon/elm-mdi-icon";
-import { ElmInlineText } from "./elm-inline-text";
-
-export type AlertType = "note" | "tip" | "important" | "warning" | "caution";
-
-const COLOR_MAP: Record<AlertType, { code: string; icon: string }> =
-  Object.freeze({
-    note: { code: "#6987b8", icon: mdiInformation },
-    tip: { code: "#59b57c", icon: mdiLightbulbOn },
-    important: { code: "#9771bd", icon: mdiShieldAlert },
-    warning: { code: "#b8a36e", icon: mdiAlert },
-    caution: { code: "#b36472", icon: mdiAlertOctagram },
-  } as const);
-
-export interface ElmCalloutProps {
-  /**
-   * Type of alert
-   */
-  type?: AlertType;
-}
-
-export const ElmCallout = component$<ElmCalloutProps>(({ type = "note" }) => {
-  return (
-    <aside
-      class={styles.callout}
-      style={{ "--callout-color": COLOR_MAP[type].code }}
-    >
-      <div class={styles.header}>
-        <ElmMdiIcon
-          d={COLOR_MAP[type].icon}
-          color={COLOR_MAP[type].code}
-          size="1.25rem"
-        />
-        <ElmInlineText>{type.toLocaleUpperCase()}</ElmInlineText>
-      </div>
-
-      <div class={styles.content}>
-        <Slot />
-      </div>
-    </aside>
-  );
-});

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

@@ -1,6 +0,0 @@
-.hr {
-  margin: 0;
-  width: 100%;
-  border: none;
-  border-bottom: dashed 1px #868e9c;
-}

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

@@ -1,14 +0,0 @@
-import type { Meta, StoryObj } from "storybook-framework-qwik";
-import { ElmDivider } from "./elm-divider";
-
-const meta: Meta<typeof ElmDivider> = {
-  title: "Components/Typography/elm-divider",
-  component: ElmDivider,
-  tags: ["autodocs"],
-  args: {},
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Primary: Story = {};

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

@@ -1,14 +0,0 @@
-import { component$, CSSProperties } from "@builder.io/qwik";
-
-import styles from "./elm-divider.module.scss";
-
-export type ElmDividerProps = {
-  /**
-   * The margin of the divider.
-   */
-  margin?: CSSProperties["margin-block"];
-};
-
-export const ElmDivider = component$<ElmDividerProps>(({ margin }) => {
-  return <hr class={styles.hr} style={{ marginBlock: margin }} />;
-});

package/src/components/typography/elm-fragment-identifier.module.scss

@@ -1,28 +0,0 @@
-.fragment {
-  font-size: 1rem;
-  width: 1rem;
-  height: 1rem;
-  padding: 0.125rem;
-  margin-inline-start: 0.5rem;
-  border-radius: 0.125rem;
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  color: #b69545;
-  cursor: pointer;
-  user-select: none;
-  opacity: 1;
-  transition:
-    background-color 200ms,
-    opacity 100ms,
-    transform 100ms;
-
-  &:hover {
-    background-color: rgba(#868e9c, 0.2);
-  }
-
-  &:active {
-    opacity: 0.5;
-    transform: translateX(1px) translateY(1px);
-  }
-}

package/src/components/typography/elm-fragment-identifier.stories.tsx

@@ -1,14 +0,0 @@
-import type { Meta, StoryObj } from "storybook-framework-qwik";
-import { ElmFragmentIdentifier } from "./elm-fragment-identifier";
-
-const meta: Meta<typeof ElmFragmentIdentifier> = {
-  title: "Components/Typography/elm-fragment-identifier",
-  component: ElmFragmentIdentifier,
-  tags: ["autodocs"],
-  args: {},
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Primary: Story = {};

package/src/components/typography/elm-fragment-identifier.tsx

@@ -1,31 +0,0 @@
-import { $, component$ } from "@builder.io/qwik";
-
-import styles from "./elm-fragment-identifier.module.scss";
-
-export interface ElmFragmentIdentifierProps {
-  /**
-   * ID of the heading element.
-   */
-  id: string;
-}
-
-export const ElmFragmentIdentifier = component$<ElmFragmentIdentifierProps>(
-  ({ id }) => {
-    const handleHashClick = $((id: string) => {
-      const url = new URL(window.location.href);
-      url.hash = id;
-      window.history.replaceState(null, "", url.toString());
-
-      const target = document.getElementById(id);
-      if (target != null) {
-        target.scrollIntoView({ behavior: "smooth" });
-      }
-    });
-
-    return (
-      <span class={styles.fragment} onClick$={() => handleHashClick(id)}>
-        #
-      </span>
-    );
-  },
-);

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

@@ -1,120 +0,0 @@
-.heading-common {
-  margin: 0;
-
-  position: relative;
-  font-size: var(--font-size);
-  line-height: var(--font-size);
-  opacity: var(--opacity);
-
-  transition:
-    color 400ms,
-    opacity 800ms;
-}
-
-.h1 {
-  &::after {
-    position: absolute;
-    content: "";
-    bottom: -4px;
-    left: 0;
-    width: 100%;
-    height: 0.25px;
-    background-color: rgba(0, 0, 0, 0.5);
-
-    transition: transform 800ms;
-    transform: scaleX(var(--scale));
-
-    [data-theme="dark"] & {
-      background-color: rgba(255, 255, 255, 0.5);
-    }
-  }
-
-  &::before {
-    position: absolute;
-    content: "";
-    bottom: -6px;
-    left: 45%;
-    width: 10%;
-    height: 2px;
-    background-color: rgba(0, 0, 0, 0.6);
-
-    transition: transform 800ms;
-    transform: scaleY(var(--scale));
-    transform-origin: top;
-
-    [data-theme="dark"] & {
-      background-color: rgba(255, 255, 255, 0.6);
-    }
-  }
-}
-
-.h2 {
-  border-bottom: solid 1px rgba(0, 0, 0, 0.5);
-
-  [data-theme="dark"] & {
-    border-color: rgba(255, 255, 255, 0.5);
-  }
-
-  &::after {
-    position: absolute;
-    content: "";
-    right: 2px;
-    bottom: -4px;
-    width: 6px;
-    height: 8px;
-    opacity: 0.8;
-    transform: skewX(-25deg);
-
-    background-color: rgba(0, 0, 0, 0.8);
-    [data-theme="dark"] & {
-      background-color: rgba(255, 255, 255, 0.8);
-    }
-  }
-
-  &::before {
-    position: absolute;
-    content: "";
-    right: 10px;
-    bottom: -4px;
-    width: 6px;
-    height: 8px;
-    opacity: 0.8;
-    transform: skewX(-25deg);
-
-    background-color: rgba(0, 0, 0, 0.8);
-    [data-theme="dark"] & {
-      background-color: rgba(255, 255, 255, 0.8);
-    }
-  }
-}
-
-.h3 {
-  box-sizing: border-box;
-  padding-left: 0.75rem;
-
-  &::after {
-    position: absolute;
-    content: "";
-    width: 3px;
-    height: 12px;
-    top: calc(50% - 8px);
-    left: 0;
-
-    background-color: rgba(0, 0, 0, 0.5);
-    [data-theme="dark"] & {
-      background-color: rgba(255, 255, 255, 0.5);
-    }
-  }
-}
-
-.h4 {
-  position: relative;
-}
-
-.h5 {
-  position: relative;
-}
-
-.h6 {
-  position: relative;
-}

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

@@ -1,42 +0,0 @@
-import type { Meta, StoryObj } from "storybook-framework-qwik";
-
-import { ElmHeading } from "./elm-heading";
-import { ElmInlineText } from "./elm-inline-text";
-
-const meta: Meta<typeof ElmHeading> = {
-  title: "Components/Typography/elm-heading",
-  component: ElmHeading,
-  tags: ["autodocs"],
-  argTypes: {
-    level: {
-      options: [1, 2, 3, 4, 5, 6],
-      control: "radio",
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Primary: Story = {
-  args: {
-    level: 1,
-    text: "Heading",
-    id: "heading-id",
-  },
-};
-
-export const Slot: Story = {
-  args: {
-    level: 1,
-    id: "heading-id",
-  },
-  render() {
-    return (
-      <ElmHeading {...this.args}>
-        <ElmInlineText text="This" color="crimson" /> is{" "}
-        <ElmInlineText text="code" code /> !
-      </ElmHeading>
-    );
-  },
-};

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

@@ -1,40 +0,0 @@
-import { component$, Slot } from "@builder.io/qwik";
-
-import styles from "./elm-heading.module.scss";
-import textStyles from "../../styles/text.module.scss";
-import { ElmFragmentIdentifier } from "./elm-fragment-identifier";
-
-export interface ElmHeadingProps {
-  level: 1 | 2 | 3 | 4 | 5 | 6;
-
-  text?: string;
-
-  id?: string;
-}
-
-const SIZE_MAP: Record<1 | 2 | 3 | 4 | 5 | 6, number> = Object.freeze({
-  1: 1.5,
-  2: 1.4,
-  3: 1.3,
-  4: 1.2,
-  5: 1.15,
-  6: 1.1,
-} as const);
-
-export const ElmHeading = component$<ElmHeadingProps>(({ level, text, id }) => {
-  const Tag = `h${level}` as "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
-  return (
-    <Tag
-      class={[styles["heading-common"], textStyles.text, styles[`h${level}`]]}
-      style={{ "--font-size": `${SIZE_MAP[level]}em` }}
-    >
-      {text}
-      <Slot />
-      {id && (
-        <span style={{ padding: "0.5rem" }}>
-          <ElmFragmentIdentifier id={id} />
-        </span>
-      )}
-    </Tag>
-  );
-});

package/src/components/typography/elm-inline-text.module.scss

@@ -1,114 +0,0 @@
-.text {
-  padding: 0;
-  margin: 0;
-  white-space: pre-line;
-  font-size: var(--font-size, 1em);
-  line-height: var(--font-size, 1em);
-  background-color: var(--background-color);
-  transition: color 200ms;
-  text-decoration-color: var(--color);
-}
-
-.code {
-  margin-inline: 0.25rem;
-  padding: 2px 0.5em;
-  font-size: calc(1em - 2px);
-  border-radius: 0.125rem;
-  background-color: rgba(0, 0, 0, 0.075);
-  font-family: "Source Code Pro" monospace;
-}
-
-.kbd {
-  padding: 0.125rem 0.25rem;
-  position: relative;
-  border-radius: 0.125rem;
-  background-color: #e6e6e6;
-
-  [data-theme="dark"] & {
-    background-color: #404040;
-  }
-
-  &::before {
-    z-index: -1;
-    position: absolute;
-    content: "";
-    bottom: -0.25em;
-    left: 0;
-    height: 100%;
-    width: 100%;
-    background-color: #ccc;
-    border-radius: 0 0 0.125rem 0.125rem;
-    box-shadow: 0 0 0.125em rgba(black, 0.5);
-
-    [data-theme="dark"] & {
-      background-color: #595959;
-      box-shadow: 0 0 0.125em rgba(white, 0.5);
-    }
-  }
-}
-
-.link {
-  all: unset;
-  box-sizing: border-box;
-  padding: 0 0.25rem;
-  font-size: var(--font-size);
-  display: inline-flex;
-  align-items: center;
-  gap: 0.25rem;
-  cursor: pointer;
-  color: #6987b8;
-  border-radius: 0.125rem;
-  transition:
-    background-color 200ms,
-    color 200ms,
-    opacity 200ms;
-
-  &:hover {
-    background-color: rgba($color: #6987b8, $alpha: 0.2);
-  }
-
-  &:active {
-    opacity: 0.5;
-  }
-
-  &:visited {
-    color: #9771bd;
-    border-bottom: dashed 1px #9771bd;
-
-    &:hover {
-      background-color: rgba($color: #9771bd, $alpha: 0.2);
-    }
-  }
-}
-
-.ogp {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-  overflow: hidden;
-
-  border-radius: 0.25rem;
-  box-shadow: 0 0 0.125rem rgba(black, 0.3);
-
-  background-color: rgba(white, 0.8);
-
-  [data-theme="dark"] & {
-    background-color: rgba(white, 0.1);
-  }
-}
-
-.ogp-text {
-  box-sizing: border-box;
-  padding: 0.5rem;
-}
-
-.ogp-title {
-  box-sizing: border-box;
-  font-weight: bold;
-  padding-block-end: 0.25rem;
-}
-
-.ogp-description {
-  opacity: 0.7;
-  padding: 0.25rem;
-}

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

@@ -1,70 +0,0 @@
-import type { Meta, StoryObj } from "storybook-framework-qwik";
-import { ElmInlineText } from "./elm-inline-text";
-import { opacify } from "polished";
-
-const meta: Meta<typeof ElmInlineText> = {
-  title: "Components/Typography/elm-inline-text",
-  component: ElmInlineText,
-  tags: ["autodocs"],
-  argTypes: {
-    color: { control: "color" },
-    backgroundColor: { control: "color" },
-    bold: { control: "boolean" },
-    italic: { control: "boolean" },
-    underline: { control: "boolean" },
-    strikethrough: { control: "boolean" },
-    code: { control: "boolean" },
-    kbd: { control: "boolean" },
-  },
-
-  args: {
-    text: "Inline Text",
-    bold: false,
-    italic: false,
-    underline: false,
-    strikethrough: false,
-    code: false,
-    kbd: false,
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Primary: Story = {};
-
-export const Colored: Story = {
-  args: { color: "#b36472" },
-};
-
-export const Code: Story = {
-  args: { code: true, text: "const x = 10;" },
-};
-
-export const Kbd: Story = {
-  args: { text: "Ctrl", kbd: true },
-};
-
-export const Background: Story = {
-  args: { backgroundColor: opacify(-0.5, "#6987b8") },
-};
-
-export const Ruby: Story = {
-  args: { text: "国際連合", ruby: "こくさいれんごう" },
-};
-
-export const Link: Story = {
-  args: {
-    text: "Google Search",
-    href: "https://google.com",
-    favicon: "https://www.google.com/favicon.ico",
-  },
-};
-
-export const LinkWithOgp: Story = {
-  args: {
-    text: "Visual Studio Code - Code Editing. Redefined",
-    href: "https://code.visualstudio.com/",
-    favicon: "https://code.visualstudio.com/assets/favicon.ico",
-  },
-};