@newthink/ui 0.0.1

package/dist/headless/headless.d.ts

@@ -0,0 +1,9 @@
+import type { Alpine } from 'alpinejs';
+import type { DirectiveData, ElementWithXAttributes, Utilities } from 'alpinejs/dist/types';
+export declare const headless: <T extends Record<string, unknown>>(name: string, rootHandler: RootHandler<T>, handlers?: HeadlessHandlers<T> | undefined) => HeadlessComponent;
+type HeadlessHandlers<T extends Record<string, unknown>> = Record<string, HeadlessHandler<T>>;
+export type RootHandler<T> = (el: ElementWithXAttributes, directive: DirectiveData, utilities: Utilities) => T;
+export type HeadlessHandler<T> = (state: T, el: ElementWithXAttributes, directive: DirectiveData, utilities: Utilities) => void;
+export type HeadlessComponent = (Alpine: Alpine) => void;
+export {};
+//# sourceMappingURL=headless.d.ts.map

package/dist/headless/headless.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"headless.d.ts","sourceRoot":"","sources":["../../src/headless/headless.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AACvC,OAAO,KAAK,EACV,aAAa,EACb,sBAAsB,EACtB,SAAS,EACV,MAAM,qBAAqB,CAAC;AAE7B,eAAO,MAAM,QAAQ,4CACb,MAAM,8EAGX,iBA2BF,CAAC;AAeF,KAAK,gBAAgB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,IAAI,MAAM,CAC/D,MAAM,EACN,eAAe,CAAC,CAAC,CAAC,CACnB,CAAC;AAEF,MAAM,MAAM,WAAW,CAAC,CAAC,IAAI,CAC3B,EAAE,EAAE,sBAAsB,EAC1B,SAAS,EAAE,aAAa,EACxB,SAAS,EAAE,SAAS,KACjB,CAAC,CAAC;AAEP,MAAM,MAAM,eAAe,CAAC,CAAC,IAAI,CAC/B,KAAK,EAAE,CAAC,EACR,EAAE,EAAE,sBAAsB,EAC1B,SAAS,EAAE,aAAa,EACxB,SAAS,EAAE,SAAS,KACjB,IAAI,CAAC;AAEV,MAAM,MAAM,iBAAiB,GAAG,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC"}

package/dist/headless/headless.js

@@ -0,0 +1,25 @@
+export const headless = (name, rootHandler, handlers) => {
+    const headlessMap = new WeakMap();
+    return (Alpine) => {
+        const getHeadlessComponentState = (el) => {
+            const root = Alpine.findClosest(el, headlessMap.has.bind(headlessMap));
+            if (!root)
+                return console.error(`Could not find root for ${name} component`, el);
+            return headlessMap.get(root);
+        };
+        Alpine.magic(name, (el) => getHeadlessComponentState(el));
+        Alpine.directive(name, (el, directive, utils) => {
+            if (!directive.value)
+                return headlessMap.set(el, rootHandler(el, directive, utils));
+            const headlessState = getHeadlessComponentState(el);
+            if (!headlessState)
+                return missingState(name, el);
+            (handlers?.[directive.value] || failback(name))(headlessState, el, directive, utils);
+        });
+    };
+};
+const failback = (name) => (_, el, directive) => {
+    console.error(`Alpine ${name}: Invalid directive value`, el, directive.original);
+};
+const missingState = (name, el) => console.error(`Could not find root for ${name} component`, el);
+//# sourceMappingURL=headless.js.map

package/dist/headless/headless.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"headless.js","sourceRoot":"","sources":["../../src/headless/headless.ts"],"names":[],"mappings":"AAOA,MAAM,CAAC,MAAM,QAAQ,GAAG,CACtB,IAAY,EACZ,WAA2B,EAC3B,QAA8B,EACX,EAAE;IACrB,MAAM,WAAW,GAAG,IAAI,OAAO,EAA6B,CAAC;IAC7D,OAAO,CAAC,MAAc,EAAE,EAAE;QACxB,MAAM,yBAAyB,GAAG,CAChC,EAA0B,EAChB,EAAE;YACZ,MAAM,IAAI,GAAG,MAAM,CAAC,WAAW,CAAC,EAAE,EAAE,WAAW,CAAC,GAAG,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC;YACvE,IAAI,CAAC,IAAI;gBACP,OAAO,OAAO,CAAC,KAAK,CAAC,2BAA2B,IAAI,YAAY,EAAE,EAAE,CAAC,CAAC;YACxE,OAAO,WAAW,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;QAC/B,CAAC,CAAC;QAEF,MAAM,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,yBAAyB,CAAC,EAAE,CAAC,CAAC,CAAC;QAE1D,MAAM,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE;YAC9C,IAAI,CAAC,SAAS,CAAC,KAAK;gBAClB,OAAO,WAAW,CAAC,GAAG,CAAC,EAAE,EAAE,WAAW,CAAC,EAAE,EAAE,SAAS,EAAE,KAAK,CAAC,CAAC,CAAC;YAChE,MAAM,aAAa,GAAG,yBAAyB,CAAC,EAAE,CAAC,CAAC;YACpD,IAAI,CAAC,aAAa;gBAAE,OAAO,YAAY,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;YAClD,CAAC,QAAQ,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,QAAQ,CAAC,IAAI,CAAC,CAAC,CAC7C,aAAa,EACb,EAAE,EACF,SAAS,EACT,KAAK,CACN,CAAC;QACJ,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,QAAQ,GACZ,CAAC,IAAY,EAAE,EAAE,CACjB,CAAC,CAAU,EAAE,EAA0B,EAAE,SAAwB,EAAE,EAAE;IACnE,OAAO,CAAC,KAAK,CACX,UAAU,IAAI,2BAA2B,EACzC,EAAE,EACF,SAAS,CAAC,QAAQ,CACnB,CAAC;AACJ,CAAC,CAAC;AAEJ,MAAM,YAAY,GAAG,CAAC,IAAY,EAAE,EAA0B,EAAE,EAAE,CAChE,OAAO,CAAC,KAAK,CAAC,2BAA2B,IAAI,YAAY,EAAE,EAAE,CAAC,CAAC"}

package/dist/headless/panel.d.ts

@@ -0,0 +1,2 @@
+export declare const panel: import("./headless").HeadlessComponent;
+//# sourceMappingURL=panel.d.ts.map

package/dist/headless/panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"panel.d.ts","sourceRoot":"","sources":["../../src/headless/panel.ts"],"names":[],"mappings":"AA8BA,eAAO,MAAM,KAAK,wCAgBhB,CAAC"}

package/dist/headless/panel.js

@@ -0,0 +1,37 @@
+import { headless } from './headless';
+const handleRoot = (el, _, { Alpine }) => {
+    const panelState = Alpine.reactive({
+        isOpen: false,
+        open() {
+            this.isOpen = true;
+        },
+        close() {
+            this.isOpen = false;
+        },
+        toggle() {
+            return this.isOpen ? this.close() : this.open();
+        },
+    });
+    Alpine.bind(el, {
+        'x-id': () => ['x-panel'],
+    });
+    return panelState;
+};
+export const panel = headless('panel', handleRoot, {
+    summary: (panelState, el, _, { Alpine }) => {
+        Alpine.bind(el, {
+            ':aria-expanded': () => panelState.isOpen,
+            ':aria-controls': '$id("x-panel")',
+        });
+    },
+    content: (panelState, el, _, { Alpine }) => {
+        Alpine.bind(el, {
+            'x-show': () => panelState.isOpen,
+            'x-transition:enter': 'transition-transform',
+            'x-transition:enter-start': 'translate-x-full',
+            'x-transition:leave': 'transition-transform',
+            'x-transition:leave-end': 'translate-x-full',
+        });
+    },
+});
+//# sourceMappingURL=panel.js.map

package/dist/headless/panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"panel.js","sourceRoot":"","sources":["../../src/headless/panel.ts"],"names":[],"mappings":"AAAA,OAAO,EAAe,QAAQ,EAAE,MAAM,YAAY,CAAC;AASnD,MAAM,UAAU,GAA4B,CAAC,EAAE,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE;IAChE,MAAM,UAAU,GAAG,MAAM,CAAC,QAAQ,CAAC;QACjC,MAAM,EAAE,KAAK;QACb,IAAI;YACF,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;QACrB,CAAC;QACD,KAAK;YACH,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QACtB,CAAC;QACD,MAAM;YACJ,OAAO,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;QAClD,CAAC;KACF,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,EAAE,EAAE;QACd,MAAM,EAAE,GAAG,EAAE,CAAC,CAAC,SAAS,CAAC;KAC1B,CAAC,CAAC;IAEH,OAAO,UAAU,CAAC;AACpB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,QAAQ,CAAC,OAAO,EAAE,UAAU,EAAE;IACjD,OAAO,EAAE,CAAC,UAAU,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE;QACzC,MAAM,CAAC,IAAI,CAAC,EAAE,EAAE;YACd,gBAAgB,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,MAAM;YACzC,gBAAgB,EAAE,gBAAgB;SACnC,CAAC,CAAC;IACL,CAAC;IACD,OAAO,EAAE,CAAC,UAAU,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE;QACzC,MAAM,CAAC,IAAI,CAAC,EAAE,EAAE;YACd,QAAQ,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,MAAM;YACjC,oBAAoB,EAAE,sBAAsB;YAC5C,0BAA0B,EAAE,kBAAkB;YAC9C,oBAAoB,EAAE,sBAAsB;YAC5C,wBAAwB,EAAE,kBAAkB;SAC7C,CAAC,CAAC;IACL,CAAC;CACF,CAAC,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+import { HeadlessComponent } from './headless/headless';
+export declare const UI: HeadlessComponent;
+export default UI;
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAGxD,eAAO,MAAM,EAAE,EAAE,iBAAsD,CAAC;AAExE,eAAe,EAAE,CAAC"}

package/dist/index.js

@@ -0,0 +1,4 @@
+import { panel } from './headless/panel';
+export const UI = (Alpine) => Alpine.plugin([panel]);
+export default UI;
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAEzC,MAAM,CAAC,MAAM,EAAE,GAAsB,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC;AAExE,eAAe,EAAE,CAAC"}

package/package.json

@@ -0,0 +1,75 @@
+{
+  "name": "@newthink/ui",
+  "version": "0.0.1",
+  "description": "Simple Alpine Headless UI Components",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "type": "module",
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@trivago/prettier-plugin-sort-imports": "4.1.1",
+    "@types/node": "20.2.3",
+    "@typescript-eslint/eslint-plugin": "5.59.7",
+    "@typescript-eslint/parser": "5.59.7",
+    "@vitest/coverage-c8": "0.31.1",
+    "alpinejs": "npm:@ekwoka/alpinets@0.0.1-alpha",
+    "esbuild": "0.17.19",
+    "eslint": "8.41.0",
+    "eslint-plugin-filename-export": "1.0.3",
+    "husky": "8.0.3",
+    "lint-staged": "13.2.2",
+    "prettier": "2.8.8",
+    "pretty-bytes": "^6.1.0",
+    "typescript": "5.0.4",
+    "vite": "4.3.8",
+    "vite-tsconfig-paths": "4.2.0",
+    "vitest": "0.31.1"
+  },
+  "peerDependencies": {
+    "alpinejs": "^3.10.0"
+  },
+  "prettier": {
+    "singleQuote": true,
+    "bracketSameLine": true,
+    "plugins": [
+      "@trivago/prettier-plugin-sort-imports"
+    ],
+    "importOrder": [
+      "node:.*",
+      "@/lib(.*)$",
+      "@/utils(.*)$",
+      "^[./]"
+    ],
+    "importOrderSeparation": true,
+    "importOrderSortSpecifiers": true
+  },
+  "lint-staged": {
+    "*.{js,ts,mjs}": [
+      "eslint --fix",
+      "prettier --write"
+    ],
+    "*.json": [
+      "prettier --write"
+    ]
+  },
+  "scripts": {
+    "build": "tsc",
+    "coverage": "vitest run --coverage",
+    "lint": "eslint --fix ./src; prettier --write ./src --loglevel error",
+    "lint:check": "eslint --max-warnings 10 ./src && prettier --check ./src",
+    "prebuild": "rm -rf dist",
+    "size": "node scripts/esbuild.js",
+    "test": "vitest"
+  }
+}

package/src/headless/headless.ts

@@ -0,0 +1,72 @@
+import type { Alpine } from 'alpinejs';
+import type {
+  DirectiveData,
+  ElementWithXAttributes,
+  Utilities,
+} from 'alpinejs/dist/types';
+
+export const headless = <T extends Record<string, unknown>>(
+  name: string,
+  rootHandler: RootHandler<T>,
+  handlers?: HeadlessHandlers<T>
+): HeadlessComponent => {
+  const headlessMap = new WeakMap<ElementWithXAttributes, T>();
+  return (Alpine: Alpine) => {
+    const getHeadlessComponentState = (
+      el: ElementWithXAttributes
+    ): T | void => {
+      const root = Alpine.findClosest(el, headlessMap.has.bind(headlessMap));
+      if (!root)
+        return console.error(`Could not find root for ${name} component`, el);
+      return headlessMap.get(root);
+    };
+
+    Alpine.magic(name, (el) => getHeadlessComponentState(el));
+
+    Alpine.directive(name, (el, directive, utils) => {
+      if (!directive.value)
+        return headlessMap.set(el, rootHandler(el, directive, utils));
+      const headlessState = getHeadlessComponentState(el);
+      if (!headlessState) return missingState(name, el);
+      (handlers?.[directive.value] || failback(name))(
+        headlessState,
+        el,
+        directive,
+        utils
+      );
+    });
+  };
+};
+
+const failback =
+  (name: string) =>
+  (_: unknown, el: ElementWithXAttributes, directive: DirectiveData) => {
+    console.error(
+      `Alpine ${name}: Invalid directive value`,
+      el,
+      directive.original
+    );
+  };
+
+const missingState = (name: string, el: ElementWithXAttributes) =>
+  console.error(`Could not find root for ${name} component`, el);
+
+type HeadlessHandlers<T extends Record<string, unknown>> = Record<
+  string,
+  HeadlessHandler<T>
+>;
+
+export type RootHandler<T> = (
+  el: ElementWithXAttributes,
+  directive: DirectiveData,
+  utilities: Utilities
+) => T;
+
+export type HeadlessHandler<T> = (
+  state: T,
+  el: ElementWithXAttributes,
+  directive: DirectiveData,
+  utilities: Utilities
+) => void;
+
+export type HeadlessComponent = (Alpine: Alpine) => void;

package/src/headless/panel.ts

@@ -0,0 +1,47 @@
+import { RootHandler, headless } from './headless';
+
+type PanelState = {
+  isOpen: boolean;
+  open: () => void;
+  close: () => void;
+  toggle: () => void;
+};
+
+const handleRoot: RootHandler<PanelState> = (el, _, { Alpine }) => {
+  const panelState = Alpine.reactive({
+    isOpen: false,
+    open() {
+      this.isOpen = true;
+    },
+    close() {
+      this.isOpen = false;
+    },
+    toggle() {
+      return this.isOpen ? this.close() : this.open();
+    },
+  });
+
+  Alpine.bind(el, {
+    'x-id': () => ['x-panel'],
+  });
+
+  return panelState;
+};
+
+export const panel = headless('panel', handleRoot, {
+  summary: (panelState, el, _, { Alpine }) => {
+    Alpine.bind(el, {
+      ':aria-expanded': () => panelState.isOpen,
+      ':aria-controls': '$id("x-panel")',
+    });
+  },
+  content: (panelState, el, _, { Alpine }) => {
+    Alpine.bind(el, {
+      'x-show': () => panelState.isOpen,
+      'x-transition:enter': 'transition-transform',
+      'x-transition:enter-start': 'translate-x-full',
+      'x-transition:leave': 'transition-transform',
+      'x-transition:leave-end': 'translate-x-full',
+    });
+  },
+});

package/src/index.ts

@@ -0,0 +1,6 @@
+import { HeadlessComponent } from './headless/headless';
+import { panel } from './headless/panel';
+
+export const UI: HeadlessComponent = (Alpine) => Alpine.plugin([panel]);
+
+export default UI;