@elmethis/qwik 0.0.2 → 0.0.4

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,70 @@
+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",
+  },
+};