diff --git a/README.md b/README.md index fbe1f70..446fbd2 100644 --- a/README.md +++ b/README.md @@ -5,7 +5,7 @@ A collection of unstyled, headless custom elements designed to make building ric ## Overview **Hyperkit** -Version: 0.0.1 +Version: 0.0.2 [Github](https://github.com/hyperlaunch/hyperkit) **Headless Elements, Supercharged UIs** diff --git a/packages/docs/markdoc.config.ts b/packages/docs/markdoc.config.ts index 045c123..be39203 100644 --- a/packages/docs/markdoc.config.ts +++ b/packages/docs/markdoc.config.ts @@ -110,6 +110,9 @@ export default defineMarkdocConfig({ "./src/astro-components/Examples/FieldsetRepeater/TransitionFieldsetRepeater.astro", ), }, + copyable: { + render: component("./src/astro-components/Examples/Copyable.astro"), + }, }, extends: [ shiki({ diff --git a/packages/docs/package.json b/packages/docs/package.json index 3e207b6..543ade1 100644 --- a/packages/docs/package.json +++ b/packages/docs/package.json @@ -1,6 +1,6 @@ { "name": "@hyperkitxyz/docs", - "version": "0.0.1", + "version": "0.0.2", "dependencies": { "@fontsource/poppins": "^5.1.0", "@hyperkitxyz/elements": "workspace:*", diff --git a/packages/docs/src/assets/robot.png b/packages/docs/src/assets/robot.png deleted file mode 100644 index dc992e3..0000000 Binary files a/packages/docs/src/assets/robot.png and /dev/null differ diff --git a/packages/docs/src/assets/rockets/dark.png b/packages/docs/src/assets/rockets/dark.png new file mode 100644 index 0000000..1e91552 Binary files /dev/null and b/packages/docs/src/assets/rockets/dark.png differ diff --git a/packages/docs/src/assets/rockets/light.png b/packages/docs/src/assets/rockets/light.png new file mode 100644 index 0000000..a2cbcfd Binary files /dev/null and b/packages/docs/src/assets/rockets/light.png differ diff --git a/packages/docs/src/astro-components/ComponentNavItem.astro b/packages/docs/src/astro-components/ComponentNavItem.astro index 4dd2da3..d05ba73 100644 --- a/packages/docs/src/astro-components/ComponentNavItem.astro +++ b/packages/docs/src/astro-components/ComponentNavItem.astro @@ -4,7 +4,8 @@ type Props = { }; const { href } = Astro.props; -const active = Astro.url.pathname === href; +const normalize = (str: string) => str.replace(/^\/+|\/+$/g, ""); +const active = normalize(Astro.url.pathname) === normalize(href); ---
  • diff --git a/packages/docs/src/astro-components/Examples/Copyable.astro b/packages/docs/src/astro-components/Examples/Copyable.astro new file mode 100644 index 0000000..ec07ddf --- /dev/null +++ b/packages/docs/src/astro-components/Examples/Copyable.astro @@ -0,0 +1,11 @@ + + + + diff --git a/packages/docs/src/astro-components/Layout.astro b/packages/docs/src/astro-components/Layout.astro index d16edf8..b918fc8 100644 --- a/packages/docs/src/astro-components/Layout.astro +++ b/packages/docs/src/astro-components/Layout.astro @@ -73,7 +73,7 @@ const pageTitle = [title, name].filter(Boolean).join(" — "); - 0.0.1 + 0.0.2 diff --git a/packages/docs/src/content/hyperkit-elements/copyable.mdoc b/packages/docs/src/content/hyperkit-elements/copyable.mdoc new file mode 100644 index 0000000..4d45b65 --- /dev/null +++ b/packages/docs/src/content/hyperkit-elements/copyable.mdoc @@ -0,0 +1,83 @@ +--- +name: Copyable +tagline: A button that allows easy copying of text to the clipboard. +thumbnail: "./thumbnails/modal.png" +--- + +The `` element provides an easy way to copy specified text to the user's clipboard. It wraps a button element, which, when clicked, copies the provided text value to the clipboard. Additionally, it fires a `copied` event when the action is successful and sets a `data-copied` attribute on the button. + +{% example hero=true %}{% copyable / %}{% /example %} + +## Usage + +Import the JS: +```js +import "@hyperkitxyz/elements/copyable"; +``` + +Tag: +```html + + + +``` + +### Options + +{% table %} +* Attribute +* Value +* +--- +* `value` +* String _(required)_ +* Specifies the text that will be copied to the clipboard when the button is clicked. +--- +{% /table %} + +### Children + +```html + + + +``` + +#### ` + +``` \ No newline at end of file diff --git a/packages/docs/src/pages/index.astro b/packages/docs/src/pages/index.astro index 38e8a87..720dce3 100644 --- a/packages/docs/src/pages/index.astro +++ b/packages/docs/src/pages/index.astro @@ -1,6 +1,7 @@ --- import { Picture } from "astro:assets"; -import robot from "../assets/robot.png"; +import darkRocket from "../assets/rockets/dark.png"; +import lightRocket from "../assets/rockets/light.png"; import Layout from "../astro-components/Layout.astro"; import { getComponentTree } from "../utils/component-tree"; @@ -10,10 +11,17 @@ const tree = await getComponentTree();
    +
    -
    - bun add @hyperkitxyz/elements -
    + + +
    diff --git a/packages/docs/src/utils/component-tree.ts b/packages/docs/src/utils/component-tree.ts index 398b541..1f4b561 100644 --- a/packages/docs/src/utils/component-tree.ts +++ b/packages/docs/src/utils/component-tree.ts @@ -3,6 +3,7 @@ import { getEntry } from "astro:content"; export async function getComponentTree() { const groups = { UI: ["modal", "popover", "detail"], + UX: ["copyable"], Form: [ "select", "sortable", diff --git a/packages/elements/package.json b/packages/elements/package.json index 8337e98..57d3a9c 100644 --- a/packages/elements/package.json +++ b/packages/elements/package.json @@ -1,7 +1,7 @@ { "name": "@hyperkitxyz/elements", "main": "./src/index.ts", - "version": "0.0.1", + "version": "0.0.2", "repository": { "type": "git", "url": "git+https://github.com/hyperlaunch/hyperkit.git" diff --git a/packages/elements/src/copyable.ts b/packages/elements/src/copyable.ts new file mode 100644 index 0000000..4a6c206 --- /dev/null +++ b/packages/elements/src/copyable.ts @@ -0,0 +1,36 @@ +import { HyperkitElement } from "./hyperkit-element"; + +export class HyperkitCopyable extends HyperkitElement<{ + events: { type: "copied"; detail: { value: string } }; + propagatedEvents: undefined; + propTypes: { value: "string" }; +}> { + requiredChildren = ["button"]; + public propTypes = { value: "string" } as const; + + connectedCallback() { + super.connectedCallback(); + + requestAnimationFrame(() => { + const button = this.querySelector("button"); + const valueToCopy = this.prop("value"); + + const copyHandler = async () => { + if (!button) return; + + try { + await navigator.clipboard.writeText(valueToCopy); + button.dataset.copied = ""; + this.fire("copied", { detail: { value: valueToCopy } }); + } catch (error) { + console.error(error, this); + } + }; + + button?.addEventListener("click", copyHandler); + }); + } +} + +if (!customElements.get("hyperkit-copyable")) + customElements.define("hyperkit-copyable", HyperkitCopyable); diff --git a/vercel.json b/vercel.json new file mode 100644 index 0000000..585042c --- /dev/null +++ b/vercel.json @@ -0,0 +1,9 @@ +{ + "rewrites": [ + { + "source": "/ingest/:path(.*)", + "destination": "https://eu.posthog.com/:path*" + } + ], + "trailingSlash": false +}