Merge pull request #19 from jtiala/web-components

Adapter for Web Components

packages/eslint-config/lit.json

@@ -0,0 +1,8 @@
+{
+  "extends": [
+    "./base.json",
+    "plugin:wc/recommended",
+    "plugin:lit/recommended",
+    "./overwrites.json"
+  ]
+}

packages/eslint-config/package.json

@@ -30,8 +30,10 @@
     "eslint-config-prettier": "9.0.0",
     "eslint-config-turbo": "1.10.14",
     "eslint-plugin-jsx-a11y": "6.7.1",
+    "eslint-plugin-lit": "1.9.1",
     "eslint-plugin-react": "7.33.2",
     "eslint-plugin-react-hooks": "4.6.0",
-    "eslint-plugin-storybook": "0.6.14"
+    "eslint-plugin-storybook": "0.6.14",
+    "eslint-plugin-wc": "2.0.4"
   }
 }

packages/web-components/.eslintignore

@@ -0,0 +1,4 @@
+node_modules
+.turbo
+dist
+reports

packages/web-components/.eslintrc.json

@@ -0,0 +1,8 @@
+{
+  "root": true,
+  "extends": ["@themeless-ui/eslint-config/lit.json"],
+  "env": {
+    "browser": true,
+    "es2022": true
+  }
+}

packages/web-components/LICENSE

@@ -0,0 +1,20 @@
+The MIT License (MIT)
+
+Copyright (c) 2023 Joonas Tiala
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

packages/web-components/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "@themeless-ui/web-components",
+  "version": "0.0.0",
+  "description": "ThemelessUI as Web Components",
+  "keywords": [
+    "web-components",
+    "component-library",
+    "components"
+  ],
+  "author": "Joonas Tiala <[email protected]>",
+  "license": "MIT",
+  "homepage": "https://github.com/jtiala/themeless-ui",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/jtiala/themeless-ui",
+    "directory": "packages/web-components"
+  },
+  "type": "module",
+  "module": "./dist/index.js",
+  "main": "./dist/index.umd.cjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.umd.cjs"
+    }
+  },
+  "files": [
+    "dist",
+    "CHANGELOG.md"
+  ],
+  "packageManager": "[email protected]",
+  "scripts": {
+    "build": "vite build",
+    "lint": "pnpm run lint:tsc && pnpm run lint:eslint",
+    "lint:report": "pnpm run lint:tsc:report && pnpm run lint:eslint:report",
+    "lint:fix": "pnpm run lint:eslint:fix",
+    "lint:tsc": "tsc",
+    "lint:tsc:report": "mkdir -p ./reports && tsc > ./reports/lint-report-tsc.txt",
+    "lint:eslint": "eslint \"**/*.{ts,tsx}\"",
+    "lint:eslint:report": "eslint -f json -o ./reports/lint-report-eslint.json \"**/*.{ts,tsx}\"",
+    "lint:eslint:fix": "eslint --fix \"**/*.{ts,tsx}\"",
+    "clean": "rm -rf dist reports node_modules .turbo",
+    "publish:npm": "pnpm publish --access public"
+  },
+  "peerDependencies": {
+    "lit": "^2"
+  },
+  "dependencies": {
+    "@themeless-ui/style": "workspace:*",
+    "@themeless-ui/utils": "workspace:*"
+  },
+  "devDependencies": {
+    "@themeless-ui/eslint-config": "workspace:*",
+    "@themeless-ui/typescript-config": "workspace:*",
+    "eslint": "8.50.0",
+    "typescript": "5.2.2",
+    "vite": "4.4.9"
+  }
+}

packages/web-components/src/components/Blockquote/Blockquote.ts

@@ -0,0 +1,68 @@
+import { cn } from "@themeless-ui/utils";
+import { html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { TUIComponent } from "../../utils";
+
+const blockquoteClassName = cn("blockquote");
+const quoteClassName = cn("blockquote-quote");
+const authorClassName = cn("blockquote-author");
+const sourceClassName = cn("blockquote-source");
+
+@customElement("tui-blockquote")
+export class Blockquote extends TUIComponent {
+  /**
+   * A URI of the source of the information quoted.
+   */
+  @property()
+  cite?: string;
+
+  /**
+   * Author of the quotation.
+   */
+  @property()
+  author?: string;
+
+  /**
+   * Source of the quotation.
+   */
+  @property()
+  source?: string;
+
+  override render() {
+    const authorElement = this.author
+      ? html`<span className="${authorClassName}">&mdash;${this.author}</span>`
+      : undefined;
+
+    const sourceElement = this.source
+      ? html`<cite key="source" className="${sourceClassName}">
+          ${this.source}
+        </cite>`
+      : undefined;
+
+    const divider =
+      this.author && this.source ? html`<span>, </span>` : undefined;
+
+    const footer =
+      authorElement || sourceElement
+        ? html`<footer>${authorElement}${divider}${sourceElement}</footer>`
+        : undefined;
+
+    return html`
+      <blockquote
+        cite="${this.cite}"
+        class="${blockquoteClassName}"
+        id="${this.id}"
+        data-testid="${this.testId}"
+      >
+        <div className="${quoteClassName}"><slot></slot></div>
+        ${footer}
+      </blockquote>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "tui-blockquote": Blockquote;
+  }
+}

packages/web-components/src/components/Blockquote/index.ts

@@ -0,0 +1 @@
+export { Blockquote } from "./Blockquote";

packages/web-components/src/components/Heading/Heading.ts

@@ -0,0 +1,35 @@
+/* eslint-disable lit/no-invalid-html */
+/* eslint-disable lit/binding-positions */
+import { cn } from "@themeless-ui/utils";
+import { customElement, property } from "lit/decorators.js";
+import { html, unsafeStatic } from "lit/static-html.js";
+import { TUIComponent } from "../../utils";
+
+type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+
+const className = cn("heading");
+
+@customElement("tui-heading")
+export class Heading extends TUIComponent {
+  /**
+   * The level of the heading.
+   */
+  @property({ type: Number })
+  level!: HeadingLevel;
+
+  override render() {
+    const tag = unsafeStatic(`h${this.level}`);
+
+    return html`
+      <${tag} class="${className}" id="${this.id}" data-testid="${this.testId}">
+        <slot></slot>
+      </${tag}>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "tui-heading": Heading;
+  }
+}

packages/web-components/src/components/Heading/index.ts

@@ -0,0 +1 @@
+export { Heading } from "./Heading";

packages/web-components/src/components/Paragraph/Paragraph.ts

@@ -0,0 +1,23 @@
+import { cn } from "@themeless-ui/utils";
+import { html } from "lit";
+import { customElement } from "lit/decorators.js";
+import { TUIComponent } from "../../utils";
+
+const className = cn("paragraph");
+
+@customElement("tui-paragraph")
+export class Paragraph extends TUIComponent {
+  override render() {
+    return html`
+      <p class="${className}" id="${this.id}" data-testid="${this.testId}">
+        <slot></slot>
+      </p>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "tui-paragraph": Paragraph;
+  }
+}

packages/web-components/src/components/Paragraph/index.ts

@@ -0,0 +1 @@
+export { Paragraph } from "./Paragraph";

packages/web-components/src/components/Text/Text.ts

@@ -0,0 +1,91 @@
+/* eslint-disable lit/no-invalid-html */
+/* eslint-disable lit/binding-positions */
+import { cn } from "@themeless-ui/utils";
+import { customElement, property } from "lit/decorators.js";
+import { html, unsafeStatic } from "lit/static-html.js";
+import { TUIComponent } from "../../utils";
+
+type TextType =
+  | "abbr"
+  | "b"
+  | "cite"
+  | "code"
+  | "del"
+  | "em"
+  | "i"
+  | "ins"
+  | "kbd"
+  | "mark"
+  | "q"
+  | "s"
+  | "samp"
+  | "small"
+  | "span"
+  | "strong"
+  | "sub"
+  | "sup"
+  | "u"
+  | "var";
+
+const className = cn("text");
+
+@customElement("tui-text")
+export class Text extends TUIComponent {
+  /**
+   * The type of the rendered element.
+   *
+   * @default span
+   */
+  @property()
+  type?: TextType;
+
+  /**
+   * Only available when `type` is `abbr`.
+   *
+   * It's recommended to provide a full expansion of the abbreviated term in plain text on the first use of the abbreviation.
+   * If it's not viable to provide the expansion as full text, `title` should be used instead.
+   */
+  // TODO: this shouldn't have !
+  @property()
+  title!: string;
+
+  /**
+   * Only available when `type` is `q`, `del`, or `ins`.
+   *
+   * `q`: A URI of the source of the information quoted.
+   * `del` or `ins`: A URI for a resource that explains the change.
+   */
+  @property()
+  cite?: string;
+
+  /**
+   * Only available when `type` is `del` or `ins`.
+   *
+   * Indicates the time and date of the change. Must be a valid date string with an optional time.
+   */
+  @property()
+  dateTime?: string;
+
+  override render() {
+    const tag = unsafeStatic(this.type || "span");
+
+    return html`
+      <${tag}
+        title="${this.title}"
+        cite="${this.cite}"
+        dateTime="${this.dateTime}"
+        class="${className}"
+        id="${this.id}"
+        data-testid="${this.testId}"
+      >
+        <slot></slot>
+      </${tag}>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "tui-text": Text;
+  }
+}

packages/web-components/src/components/Text/index.ts

@@ -0,0 +1 @@
+export { Text } from "./Text";

packages/web-components/src/components/index.ts

@@ -0,0 +1,4 @@
+export * from "./Blockquote";
+export * from "./Heading";
+export * from "./Paragraph";
+export * from "./Text";

packages/web-components/src/index.ts

@@ -0,0 +1 @@
+export * from "./components";

packages/web-components/src/utils/TUIComponent.ts

@@ -0,0 +1,12 @@
+import { LitElement } from "lit";
+import { property } from "lit/decorators.js";
+
+export class TUIComponent extends LitElement {
+  /**
+   * Provide `data-testid` attribute for the component to be used with testing tools.
+   * While the `testId` is a useful way for targeting the component, it should be used as a last resort.
+   * Whenever possible, use other attributes or selectors that have semantic meaning, such as `id` or `name`.
+   */
+  @property()
+  testId?: string;
+}

packages/web-components/src/utils/index.ts

@@ -0,0 +1 @@
+export * from "./TUIComponent";

packages/web-components/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "extends": "@themeless-ui/typescript-config/vite-lit.json",
+  "include": ["src"]
+}

packages/web-components/vite.config.ts

@@ -0,0 +1,13 @@
+/// <reference types="vite/client" />
+
+import { defineConfig } from "vite";
+
+export default defineConfig({
+  build: {
+    lib: {
+      entry: ["src/index.ts"],
+      name: "web-components",
+      fileName: "index",
+    },
+  },
+});