@typed/ui 0.1.5 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typed/ui",
-  "version": "0.1.5",
+  "version": "0.3.0",
   "description": "",
   "license": "MIT",
   "repository": {
@@ -10,18 +10,18 @@
   "sideEffects": [],
   "author": "Typed contributors",
   "dependencies": {
-    "@effect/platform": "^0.31.1",
-    "@effect/schema": "0.49.4",
-    "csstype": "^3.1.2",
-    "effect": "2.0.0-next.56",
-    "@typed/context": "0.19.2",
-    "@typed/dom": "8.19.2",
-    "@typed/environment": "0.1.3",
-    "@typed/fx": "1.18.4",
-    "@typed/navigation": "0.6.4",
-    "@typed/route": "1.0.4",
-    "@typed/router": "0.19.5",
-    "@typed/template": "0.1.4"
+    "@effect/platform": "^0.41.0",
+    "@effect/schema": "0.59.1",
+    "csstype": "^3.1.3",
+    "effect": "^2.0.3",
+    "@typed/context": "0.21.0",
+    "@typed/dom": "9.0.0",
+    "@typed/environment": "0.3.0",
+    "@typed/fx": "1.20.0",
+    "@typed/navigation": "0.8.0",
+    "@typed/route": "2.0.0",
+    "@typed/router": "0.21.0",
+    "@typed/template": "0.3.0"
   },
   "main": "./dist/cjs/index.js",
   "module": "./dist/esm/index.js",
@@ -42,6 +42,16 @@
       "types": "./dist/dts/Link.d.ts",
       "import": "./dist/esm/Link.js",
       "default": "./dist/cjs/Link.js"
+    },
+    "./useClickAway": {
+      "types": "./dist/dts/useClickAway.d.ts",
+      "import": "./dist/esm/useClickAway.js",
+      "default": "./dist/cjs/useClickAway.js"
+    },
+    "./usePagination": {
+      "types": "./dist/dts/usePagination.d.ts",
+      "import": "./dist/esm/usePagination.js",
+      "default": "./dist/cjs/usePagination.js"
     }
   },
   "typesVersions": {
@@ -51,6 +61,12 @@
       ],
       "Link": [
         "./dist/dts/Link.d.ts"
+      ],
+      "useClickAway": [
+        "./dist/dts/useClickAway.d.ts"
+      ],
+      "usePagination": [
+        "./dist/dts/usePagination.d.ts"
       ]
     }
   }

package/src/Anchor.ts

@@ -9,11 +9,11 @@ import type { DefaultEventMap, ElementSource } from "@typed/template/ElementSour
 import * as EventHandler from "@typed/template/EventHandler"
 import type { Placeholder } from "@typed/template/Placeholder"
 import type { Renderable } from "@typed/template/Renderable"
-import type { TemplateFx } from "@typed/template/RenderTemplate"
-import { html } from "@typed/template/RenderTemplate"
+import type { RenderEvent } from "@typed/template/RenderEvent"
+import { html, type RenderTemplate } from "@typed/template/RenderTemplate"
 import type { Rendered } from "@typed/wire"
 import type { ReadonlyRecord, Scope } from "effect"
-import { Effect } from "effect"
+import * as Effect from "effect/Effect"
 import { uncapitalize } from "effect/String"
 import type { HTMLAnchorElementProperties } from "./internal/dom-properties.js"
 
@@ -22,14 +22,14 @@ import type { HTMLAnchorElementProperties } from "./internal/dom-properties.js"
  */
 export type AnchorProps =
   & {
-    readonly [K in keyof HTMLAnchorElementProperties]:
+    readonly [K in keyof HTMLAnchorElementProperties]?:
       | HTMLAnchorElementProperties[K]
       | Placeholder.Any<HTMLAnchorElementProperties[K]>
-      | Directive.Directive<any, any>
+      | undefined
   }
   & {
-    readonly ref?: (ref: ElementSource<HTMLAnchorElement>) => Effect.Effect<any, any, any>
-    readonly data?: Placeholder.Any<ReadonlyRecord.ReadonlyRecord<any>>
+    readonly ref?: ((ref: ElementSource<HTMLAnchorElement>) => Effect.Effect<any, any, any>) | undefined
+    readonly data?: Placeholder.Any<ReadonlyRecord.ReadonlyRecord<any>> | undefined
   }
   & EventHandlerProps<HTMLAnchorElement>
 
@@ -58,60 +58,52 @@ export function Anchor<
 >(
   props: Props,
   ...children: Children
-): TemplateFx<
-  Placeholder.Context<Props[keyof Props] | ReturnOf<Props["ref"]> | Children[number]>,
+): Fx.Fx<
+  RenderTemplate | Scope.Scope | Placeholder.Context<Props[keyof Props] | ReturnOf<Props["ref"]> | Children[number]>,
   Placeholder.Error<Props[keyof Props] | ReturnOf<Props["ref"]> | Children[number]>,
-  HTMLAnchorElement
+  RenderEvent
 > {
-  const ref = Directive.ref(({ value: ref }) =>
+  const {
+    data,
+    hash,
+    host,
+    hostname,
+    href,
+    hreflang,
+    pathname,
+    port,
+    protocol,
+    ref,
+    scrollLeft,
+    scrollTop,
+    search,
+    ...rest
+  } = props
+
+  const refDirective = Directive.ref(({ value }) =>
     Effect.gen(function*(_) {
-      yield* _(addEventListeners(props, ref))
+      yield* _(addEventListeners(props, value))
 
-      if (props.ref) {
-        yield* _(props.ref(ref as any))
+      if (ref) {
+        yield* _(ref(value as any))
       }
     })
   )
   return html`<a 
-    ref="${ref}"
-    .data="${props.data}"
-    ?hidden="${props.hidden}"
-    ?hidefocus="${props.hideFocus}"
-    ?spellcheck="${props.spellcheck}"
-    .scrollLeft="${props.scrollLeft}"
-    .scrollTop="${props.scrollTop}"
-    accesskey="${props.accessKey}"
-    charset="${props.charset}"
-    class="${props.className}"
-    contenteditable="${props.contentEditable}"
-    coords="${props.coords}"
-    dir="${props.dir}"
-    download="${props.download}"
-    draggable="${props.draggable}"
-    .hash="${props.hash}"
-    .host="${props.host}"
-    .hostname="${props.hostname}"
-    .href="${props.href}"
-    hreflang="${props.hreflang}"
-    id="${props.id}"
-    id="${props.id}" 
-    lang="${props.lang}"
-    Methods="${props.Methods}"
-    name="${props.name}"
-    .pathname="${props.pathname}"
-    .port="${props.port}"
-    .protocol="${props.protocol}"
-    rel="${props.rel}"
-    rev="${props.rev}"
-    .search="${props.search}"
-    shape="${props.shape}"
-    slot="${props.slot}"
-    tabindex="${props.tabIndex}"
-    target="${props.target}"
-    text="${props.text}"
-    title="${props.title}"
-    type="${props.type}"
-    urn="${props.urn}"
+    ref="${refDirective}"
+    .props="${rest}"
+    .data="${data}"
+    .scrollLeft="${scrollLeft}"
+    .scrollTop="${scrollTop}"
+    .hash="${hash}"
+    .host="${host}"
+    .hostname="${hostname}"
+    .href="${href}"
+    .hreflang="${hreflang}"
+    .pathname="${pathname}"
+    .port="${port}"
+    .protocol="${protocol}"
+    .search="${search}"
   >${children}</a>` as any
 }
 
@@ -123,7 +115,7 @@ export function addEventListeners<Props extends EventHandlerProps<any>, T extend
   ref: ElementSource<T>
 ): Effect.Effect<Scope.Scope | GetEventHandlersContext<Props>, never, void> {
   return Fx.forkScoped(
-    Fx.merge(
+    Fx.mergeAll(
       getEventHandlers(props).map(([type, handler]: any) => addEventListener(ref, type, handler))
     )
   ) as any

package/src/Link.ts

@@ -12,7 +12,8 @@ import { Placeholder } from "@typed/template/Placeholder"
 import type { Renderable } from "@typed/template/Renderable"
 import type { RenderEvent } from "@typed/template/RenderEvent"
 import type { RenderTemplate } from "@typed/template/RenderTemplate"
-import { Effect, type Scope } from "effect"
+import * as Effect from "effect/Effect"
+import type * as Scope from "effect/Scope"
 import { Anchor, type AnchorProps, getEventHandler } from "./Anchor.js"
 
 /**
@@ -30,36 +31,36 @@ export type LinkProps = Omit<AnchorProps, keyof URL> & {
  * @since 1.0.0
  */
 export function Link<Props extends LinkProps, Children extends ReadonlyArray<Renderable<any, any>> = readonly []>(
-  props: Props,
+  { onClick, ref, relative, replace, state, to, ...props }: Props,
   ...children: Children
 ): Fx.Fx<
   | Navigation.Navigation
   | CurrentRoute
   | RenderTemplate
   | Scope.Scope
-  | Location
-  | Placeholder.Context<Props[keyof Props] | Children[number]>,
-  Placeholder.Error<Props[keyof Props] | Children[number]>,
+  | Placeholder.Context<Props[keyof Props] | Children[number]>
+  | Fx.Context<Props[keyof Props] | Children[number]>,
+  Placeholder.Error<Props[keyof Props] | Children[number]> | Fx.Error<Props[keyof Props] | Children[number]>,
   RenderEvent
 > {
   return Fx.gen(function*(_) {
-    const onClickHandler = getEventHandler(props.onClick)
-    const to = yield* _(
-      Placeholder.asRef<Placeholder.Context<Props["to"]>, Placeholder.Error<Props["to"]>, string>(props.to)
+    const onClickHandler = getEventHandler(onClick)
+    const toRef = yield* _(
+      Placeholder.asRef<Placeholder.Context<Props["to"]>, Placeholder.Error<Props["to"]>, string>(to)
     )
-    const relative = yield* _(
+    const relativeRef = yield* _(
       Placeholder.asRef<Placeholder.Context<Props["relative"]>, Placeholder.Error<Props["relative"]>, boolean>(
-        props.relative ?? true
+        relative ?? true
       )
     )
-    const replace = yield* _(
+    const replaceRef = yield* _(
       Placeholder.asRef<Placeholder.Context<Props["replace"]>, Placeholder.Error<Props["replace"]>, boolean>(
-        props.replace ?? false
+        replace ?? false
       )
     )
-    const state = yield* _(
+    const stateRef = yield* _(
       Placeholder.asRef<Placeholder.Context<Props["state"]>, Placeholder.Error<Props["state"]>, unknown>(
-        props.state as Placeholder.Any<unknown>
+        state as Placeholder.Any<unknown>
       )
     )
     const reloadDocument = yield* _(
@@ -72,10 +73,13 @@ export function Link<Props extends LinkProps, Children extends ReadonlyArray<Ren
       )
     )
 
-    const href = RefSubject.tuple(relative, to).mapEffect(([rel, to]) => rel ? makeHref(to) : Effect.succeed(to))
+    const href = RefSubject.mapEffect(
+      RefSubject.tuple([relativeRef, toRef]),
+      ([rel, to]) => rel ? makeHref(to) : Effect.succeed(to)
+    )
 
     const navigate = Effect.gen(function*(_) {
-      const current = yield* _(Effect.all({ replace, state, reloadDocument }))
+      const current = yield* _(Effect.all({ replace: replaceRef, state: stateRef, reloadDocument }))
       const url = yield* _(href)
 
       yield* _(Navigation.navigate(url, {
@@ -88,7 +92,7 @@ export function Link<Props extends LinkProps, Children extends ReadonlyArray<Ren
       }
     })
 
-    const onClick = EventHandler.preventDefault(
+    const onClickEventHandler = EventHandler.preventDefault(
       (ev: EventWithCurrentTarget<HTMLAnchorElement, MouseEvent>) =>
         Effect.gen(function*(_) {
           if (onClickHandler) {
@@ -99,6 +103,11 @@ export function Link<Props extends LinkProps, Children extends ReadonlyArray<Ren
       onClickHandler?.options
     )
 
-    return Anchor({ ...props, href, state, onClick }, ...children)
+    const allProps = { ...props, ref, href, state: stateRef, onClick: onClickEventHandler }
+
+    return Anchor(
+      allProps as any as AnchorProps,
+      ...children
+    )
   })
 }

package/src/index.ts

@@ -2,6 +2,28 @@
  * @since 1.0.0
  */
 
+// TODO:
+// Form + Fields/FieldGroups
+// Masking
+// Accordion
+// Button
+// Select
+// MultiSelect
+// Drag and drop
+// Popovers
+// Portals
+// Menu
+// Trees
+// Modals
+// Search/Autocomplete
+// Tables
+// Editable Tables
+// File uploads
+// Focus management
+// Toasts
+// Virtualization
+// Optimistic UI helpers??
+
 /**
  * @since 1.0.0
  */
@@ -10,3 +32,13 @@ export * from "./Anchor.js"
  * @since 1.0.0
  */
 export * from "./Link.js"
+
+/**
+ * @since 1.0.0
+ */
+export * from "./useClickAway.js"
+
+/**
+ * @since 1.0.0
+ */
+export * from "./usePagination.js"

package/src/internal/addEventListener.ts

@@ -0,0 +1,22 @@
+import type { EventWithCurrentTarget } from "@typed/dom/EventTarget"
+import * as Fx from "@typed/fx/Fx"
+import type { DefaultEventMap } from "@typed/template/ElementSource"
+import type { Scope } from "effect"
+import * as Effect from "effect/Effect"
+
+export function addEventListeners<T extends EventTarget, Events extends ReadonlyArray<keyof DefaultEventMap<T>>>(
+  target: T,
+  ...events: Events
+) {
+  return Fx.withEmitter<never, EventWithCurrentTarget<T, DefaultEventMap<T>[Events[number]]>, Scope.Scope>(
+    (emitter) => {
+      events.forEach((event) => target.addEventListener(event as string, emitter.succeed as any))
+
+      return Effect.addFinalizer(() =>
+        Effect.sync(() => {
+          events.forEach((event) => target.addEventListener(event as string, emitter.succeed as any))
+        })
+      )
+    }
+  )
+}

package/src/internal/dom-properties.ts

@@ -1,50 +1,50 @@
 export type ElementProperties = {
-  className?: string
-  id?: string
-  scrollLeft?: number
-  scrollTop?: number
-  slot?: string
+  className?: string | undefined
+  id?: string | undefined
+  scrollLeft?: number | undefined
+  scrollTop?: number | undefined
+  slot?: string | undefined
 }
 
 export type HTMLElementProperties =
   & ElementProperties
   & {
-    accessKey?: string
-    contentEditable?: string
-    dir?: string
-    draggable?: boolean
-    hidden?: boolean
-    hideFocus?: boolean
-    lang?: string
-    spellcheck?: boolean
-    tabIndex?: boolean
-    title?: string
+    accessKey?: string | undefined
+    contentEditable?: string | undefined
+    dir?: string | undefined
+    draggable?: boolean | undefined
+    hidden?: boolean | undefined
+    hideFocus?: boolean | undefined
+    lang?: string | undefined
+    spellcheck?: boolean | undefined
+    tabIndex?: boolean | undefined
+    title?: string | undefined
   }
 
 export type HTMLAnchorElementProperties =
   & HTMLElementProperties
   & {
-    Methods?: string
-    charset?: string
-    coords?: string
-    download?: string
-    hash?: string
-    host?: string
-    hostname?: string
-    href?: string
-    hreflang?: string
-    name?: string
-    pathname?: string
-    port?: string
-    protocol?: string
-    rel?: string
-    rev?: string
-    search?: string
-    shape?: string
-    target?: string
-    text?: string
-    type?: string
-    urn?: string
+    Methods?: string | undefined
+    charset?: string | undefined
+    coords?: string | undefined
+    download?: string | undefined
+    hash?: string | undefined
+    host?: string | undefined
+    hostname?: string | undefined
+    href?: string | undefined
+    hreflang?: string | undefined
+    name?: string | undefined
+    pathname?: string | undefined
+    port?: string | undefined
+    protocol?: string | undefined
+    rel?: string | undefined
+    rev?: string | undefined
+    search?: string | undefined
+    shape?: string | undefined
+    target?: string | undefined
+    text?: string | undefined
+    type?: string | undefined
+    urn?: string | undefined
   }
 
 export type HTMLAppletElementProperties =

package/src/useClickAway.ts

@@ -0,0 +1,64 @@
+/**
+ * @since 1.0.0
+ */
+
+import { Document } from "@typed/dom/Document"
+import type { EventWithCurrentTarget } from "@typed/dom/EventTarget"
+import * as Fx from "@typed/fx/Fx"
+import type * as ElementRef from "@typed/template/ElementRef"
+import { getElements } from "@typed/template/ElementSource"
+import type { Rendered } from "@typed/wire"
+import type { Effect, Fiber, Scope } from "effect"
+import * as Option from "effect/Option"
+import { addEventListeners } from "./internal/addEventListener"
+
+/**
+ * @since 1.0.0
+ */
+export function useClickAway<Refs extends ReadonlyArray<ElementRef.ElementRef<any>>, R2>(
+  refs: Refs,
+  f: (event: EventWithCurrentTarget<Document, MouseEvent | TouchEvent>) => Effect.Effect<R2, never, unknown>
+): Effect.Effect<Document | Scope.Scope | R2, never, Fiber.RuntimeFiber<never, void>> {
+  return Fx.forkScoped(onClickAway(refs, f))
+}
+
+/**
+ * @since 1.0.0
+ */
+export function onClickAway<Refs extends ReadonlyArray<ElementRef.ElementRef<any>>, R2, E2, B>(
+  refs: Refs,
+  f: (event: EventWithCurrentTarget<Document, MouseEvent | TouchEvent>) => Effect.Effect<R2, E2, B>
+): Fx.Fx<Document | R2 | Scope.Scope, E2, B> {
+  return Fx.fromFxEffect(Document.with((document) => {
+    const events = addEventListeners(document, "click", "touchend", "contextmenu")
+    const elements = Fx.map(
+      Fx.tuple(refs as ReadonlyArray<Fx.Fx<Scope.Scope, never, Rendered>>),
+      (els) => els.flatMap(getElements)
+    )
+
+    return Fx.mapEffect(
+      Fx.compact(Fx.snapshot(events, elements, containsRefs)),
+      f
+    )
+  }))
+}
+
+const containsRefs = (
+  event: EventWithCurrentTarget<Document, MouseEvent | TouchEvent>,
+  refs: ReadonlyArray<Element>
+): Option.Option<EventWithCurrentTarget<Document, MouseEvent | TouchEvent>> => {
+  const target = event.target
+
+  if (
+    target === null ||
+    refs.some(
+      (c) =>
+        c === target ||
+        c.contains(target as Element)
+    )
+  ) {
+    return Option.none()
+  } else {
+    return Option.some(event)
+  }
+}

package/src/usePagination.ts

@@ -0,0 +1,122 @@
+/**
+ * @since 1.0.0
+ */
+
+import * as RefSubject from "@typed/fx/RefSubject"
+import type { Scope } from "effect"
+import * as Effect from "effect/Effect"
+
+/**
+ * @since 1.0.0
+ */
+export type PaginationOptions = {
+  readonly initialPage?: number // 0
+  readonly initialPageSize?: number // 10
+}
+
+/**
+ * @since 1.0.0
+ */
+export interface Pagination<E, A> {
+  readonly page: RefSubject.Computed<never, never, number>
+  readonly pageSize: RefSubject.Computed<never, never, number>
+  readonly canGoBack: RefSubject.Computed<never, never, boolean>
+  readonly canGoForward: RefSubject.Computed<never, E, boolean>
+  readonly paginated: RefSubject.Computed<never, E, ReadonlyArray<A>>
+  readonly viewing: RefSubject.Computed<never, E, Viewing>
+
+  readonly goBack: Effect.Effect<never, never, number>
+  readonly goForward: Effect.Effect<never, E, number>
+  readonly goToStart: Effect.Effect<never, never, number>
+  readonly goToEnd: Effect.Effect<never, E, number>
+}
+
+/**
+ * @since 1.0.0
+ */
+export interface Viewing {
+  readonly from: number
+  readonly to: number
+  readonly total: number
+}
+
+/**
+ * @since 1.0.0
+ */
+export function usePagination<R, E, A>(
+  items: RefSubject.Computed<R, E, ReadonlyArray<A>>,
+  options: PaginationOptions = {}
+): Effect.Effect<R | Scope.Scope, never, Pagination<E, A>> {
+  return Effect.gen(function*(_) {
+    const ctx = yield* _(Effect.context<R>())
+    const page: RefSubject.RefSubject<never, never, number> = yield* _(RefSubject.of(options.initialPage ?? 0))
+    const pageSize: RefSubject.RefSubject<never, never, number> = yield* _(RefSubject.of(options.initialPageSize ?? 10))
+    const canGoBack: RefSubject.Computed<never, never, boolean> = RefSubject.map(page, (x) => x > 0)
+    const combined: RefSubject.Computed<never, E, readonly [number, number, ReadonlyArray<A>]> = RefSubject.provide(
+      RefSubject.tuple([page, pageSize, items] as const),
+      ctx
+    )
+    const canGoForward: RefSubject.Computed<never, E, boolean> = RefSubject.map(
+      combined,
+      ([page, pageSize, results]) => page < Math.ceil(results.length / pageSize - 1)
+    )
+
+    const getTotalPages: Effect.Effect<never, E, number> = Effect.provide(
+      Effect.gen(function*($) {
+        const currentPageSize = yield* $(pageSize)
+        const results = yield* $(items)
+
+        return Math.ceil(results.length / currentPageSize - 1)
+      }),
+      ctx
+    )
+    const goBack: Effect.Effect<never, never, number> = RefSubject.update(page, (x) => Math.max(x - 1, 0))
+    const goForward: Effect.Effect<never, E, number> = RefSubject.updateEffect(
+      page,
+      (currentPage) =>
+        Effect.gen(function*($) {
+          const totalPages = yield* $(getTotalPages)
+          const nextPage = Math.min(currentPage + 1, totalPages)
+
+          return nextPage
+        })
+    )
+    const goToStart: Effect.Effect<never, never, number> = RefSubject.set(page, 0)
+    const goToEnd: Effect.Effect<never, E, number> = RefSubject.updateEffect(page, () => getTotalPages)
+
+    const paginated: RefSubject.Computed<never, E, ReadonlyArray<A>> = RefSubject.map(
+      combined,
+      ([page, pageSize, results]) => {
+        const start = page * pageSize
+        const end = start + pageSize
+
+        return results.slice(start, end)
+      }
+    )
+
+    const viewing: RefSubject.Computed<never, E, Viewing> = RefSubject.map(combined, ([page, pageSize, results]) => {
+      const start = page * pageSize
+      const end = start + pageSize
+      const total = results.length
+
+      return {
+        from: start + 1,
+        to: Math.min(end, total),
+        total
+      }
+    })
+
+    return {
+      page,
+      pageSize,
+      canGoBack,
+      canGoForward,
+      goBack,
+      goForward,
+      goToStart,
+      goToEnd,
+      paginated,
+      viewing
+    } as const
+  })
+}

package/useClickAway/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../dist/cjs/useClickAway.js",
+  "module": "../dist/esm/useClickAway.js",
+  "types": "../dist/dts/useClickAway.d.ts",
+  "sideEffects": []
+}

package/usePagination/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../dist/cjs/usePagination.js",
+  "module": "../dist/esm/usePagination.js",
+  "types": "../dist/dts/usePagination.d.ts",
+  "sideEffects": []
+}