feat(website): add effect-atom (#1174)

Author: Rel1cx

.github/instructions/nx.instructions.md

@@ -8,14 +8,14 @@ You are in an nx workspace using Nx 21.4.0 and pnpm as the package manager.
 
 You have access to the Nx MCP server and the tools it provides. Use them. Follow these guidelines in order to best help the user:
 
-## General Guidelines
+# General Guidelines
 
 - When answering questions, use the nx_workspace tool first to gain an understanding of the workspace architecture
 - For questions around nx configuration, best practices or if you're unsure, use the nx_docs tool to get relevant, up-to-date docs!! Always use this instead of assuming things about nx configuration
 - If the user needs help with an Nx configuration or project graph error, use the 'nx_workspace' tool to get any errors
 - To help answer questions about the workspace structure or simply help with demonstrating how tasks depend on each other, use the 'nx_visualize_graph' tool
 
-## Generation Guidelines
+# Generation Guidelines
 
 If the user wants to generate something, use the following flow:
 
@@ -30,7 +30,7 @@ If the user wants to generate something, use the following flow:
 - read the generator log file using the 'nx_read_generator_log' tool
 - use the information provided in the log file to answer the user's question or continue with what they were doing
 
-## Running Tasks Guidelines
+# Running Tasks Guidelines
 
 If the user wants help with tasks or commands (which include keywords like "test", "build", "lint", or other similar actions), use the following flow:
 

.pkgs/configs/eslint.ts

@@ -107,7 +107,7 @@ export const typescript: ConfigArray = tseslint.config(
   {
     extends: [
       pluginDeMorgan.configs.recommended,
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+
       pluginJsdoc.configs["flat/recommended-typescript-error"],
       pluginRegexp.configs["flat/recommended"],
       pluginPerfectionist.configs["recommended-natural"],

apps/website/app/layout.tsx

@@ -1,14 +1,14 @@
 import type { Metadata } from "next";
 import type { ReactNode } from "react";
-
+import { Toaster } from "#/components/ui/Toaster";
+import { baseUrl } from "#/lib/metadata";
 import { RootProvider } from "fumadocs-ui/provider";
-import { ViewTransitions } from "next-view-transitions";
 
+import { ViewTransitions } from "next-view-transitions";
 import { IBM_Plex_Mono } from "next/font/google";
-import { baseUrl } from "../lib/metadata";
 
-import "./app.css";
-import "./app.override.css";
+import "#/app/app.css";
+import "#/app/app.override.css";
 
 const ibm_plex_mono = IBM_Plex_Mono({
   subsets: ["latin"],
@@ -56,6 +56,7 @@ export default function Layout({ children }: { children: ReactNode }) {
           <RootProvider theme={themeOptions}>
             {children}
           </RootProvider>
+          <Toaster />
         </body>
       </html>
     </ViewTransitions>

apps/website/atoms/location.ts

@@ -0,0 +1,21 @@
+import { Atom } from "@effect-atom/atom-react";
+import * as Option from "effect/Option";
+
+function getHash() {
+  const hash = location.hash.slice(1);
+  if (hash.length > 0) {
+    return Option.some(hash);
+  }
+  return Option.none<string>();
+}
+
+export const hashAtom = Atom.make<Option.Option<string>>((get) => {
+  function onHashChange() {
+    get.setSelf(getHash());
+  }
+  window.addEventListener("hashchange", onHashChange);
+  get.addFinalizer(() => {
+    window.removeEventListener("hashchange", onHashChange);
+  });
+  return getHash();
+});

apps/website/atoms/theme.ts

@@ -0,0 +1,22 @@
+import { Atom } from "@effect-atom/atom-react";
+
+function getTheme(): "light" | "dark" {
+  const selected = localStorage?.getItem("starlight-theme") ?? "system";
+  if (selected === "light" || selected === "dark") {
+    return selected;
+  }
+  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+
+export const themeAtom = Atom.make<"light" | "dark">((get) => {
+  const observer = new MutationObserver(function() {
+    get.setSelf(getTheme());
+  });
+  get.addFinalizer(() => {
+    observer.disconnect();
+  });
+  observer.observe(document.documentElement, {
+    attributeFilter: ["data-theme"],
+  });
+  return getTheme();
+});

apps/website/components/ui/Toast.tsx

@@ -0,0 +1,113 @@
+import { cn } from "#/lib/cn";
+import { Cross2Icon } from "@radix-ui/react-icons";
+import * as ToastPrimitives from "@radix-ui/react-toast";
+import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
+
+const ToastProvider = ToastPrimitives.Provider;
+
+const ToastViewport = (
+  { className, ref, ...props }:
+    & React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
+    & { ref?: React.RefObject<React.ElementRef<typeof ToastPrimitives.Viewport> | null> },
+) => (
+  <ToastPrimitives.Viewport
+    className={cn(
+      "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
+      className,
+    )}
+    ref={ref}
+    {...props}
+  />
+);
+ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
+
+const toastVariants = cva(
+  "group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
+  {
+    defaultVariants: {
+      variant: "default",
+    },
+    variants: {
+      variant: {
+        default: "border bg-background text-foreground",
+        destructive: "destructive group border-destructive bg-destructive text-destructive-foreground",
+      },
+    },
+  },
+);
+
+const Toast = (
+  { className, ref, variant, ...props }:
+    & React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root>
+    & VariantProps<typeof toastVariants>
+    & { ref?: React.RefObject<React.ElementRef<typeof ToastPrimitives.Root> | null> },
+) => {
+  return <ToastPrimitives.Root className={cn(toastVariants({ variant }), className)} ref={ref} {...props} />;
+};
+Toast.displayName = ToastPrimitives.Root.displayName;
+
+const ToastAction = (
+  { className, ref, ...props }: React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action> & {
+    ref?: React.RefObject<React.ElementRef<typeof ToastPrimitives.Action> | null>;
+  },
+) => (
+  <ToastPrimitives.Action
+    className={cn(
+      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors hover:bg-secondary focus:outline-none focus:ring-1 focus:ring-ring disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
+      className,
+    )}
+    ref={ref}
+    {...props}
+  />
+);
+ToastAction.displayName = ToastPrimitives.Action.displayName;
+
+const ToastClose = (
+  { className, ref, ...props }: React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close> & {
+    ref?: React.RefObject<React.ElementRef<typeof ToastPrimitives.Close> | null>;
+  },
+) => (
+  <ToastPrimitives.Close
+    className={cn(
+      "absolute right-1 top-1 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
+      className,
+    )}
+    ref={ref}
+    toast-close=""
+    {...props}
+  >
+    <Cross2Icon className="h-4 w-4" />
+  </ToastPrimitives.Close>
+);
+ToastClose.displayName = ToastPrimitives.Close.displayName;
+
+const ToastTitle = (
+  { className, ref, ...props }: React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title> & {
+    ref?: React.RefObject<React.ElementRef<typeof ToastPrimitives.Title> | null>;
+  },
+) => <ToastPrimitives.Title className={cn("text-sm font-semibold [&+div]:text-xs", className)} ref={ref} {...props} />;
+ToastTitle.displayName = ToastPrimitives.Title.displayName;
+
+const ToastDescription = (
+  { className, ref, ...props }: React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description> & {
+    ref?: React.RefObject<React.ElementRef<typeof ToastPrimitives.Description> | null>;
+  },
+) => <ToastPrimitives.Description className={cn("text-sm opacity-90", className)} ref={ref} {...props} />;
+ToastDescription.displayName = ToastPrimitives.Description.displayName;
+
+type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>;
+
+type ToastActionElement = React.ReactElement<typeof ToastAction>;
+
+export {
+  Toast,
+  ToastAction,
+  type ToastActionElement,
+  ToastClose,
+  ToastDescription,
+  type ToastProps,
+  ToastProvider,
+  ToastTitle,
+  ToastViewport,
+};

apps/website/components/ui/Toaster.tsx

@@ -0,0 +1,25 @@
+/* eslint-disable @typescript-eslint/strict-boolean-expressions */
+"use client";
+import { Toast, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport } from "#/components/ui/Toast";
+import { toastsAtom } from "#/services/toaster";
+import { useAtomValue } from "@effect-atom/atom-react";
+
+export function Toaster() {
+  const toasts = useAtomValue(toastsAtom);
+
+  return (
+    <ToastProvider>
+      {toasts.map(({ id, description, title, action, ...props }) => (
+        <Toast className="bg-[--sl-color-bg]" key={id} {...props}>
+          <div className="grid gap-1">
+            {title ? <ToastTitle className="text-[--sl-color-white]">{title}</ToastTitle> : null}
+            {description ? <ToastDescription className="text-[--sl-color-text]">{description}</ToastDescription> : null}
+          </div>
+          {action}
+          <ToastClose className="bg-transparent text-[--sl-color-white] cursor-pointer" />
+        </Toast>
+      ))}
+      <ToastViewport />
+    </ToastProvider>
+  );
+}

apps/website/package.json

@@ -11,9 +11,13 @@
   },
   "dependencies": {
     "@chevrotain/regexp-to-ast": "^11.0.3",
+    "@effect-atom/atom-react": "^0.1.14",
     "@eslint-react/eff": "workspace:*",
+    "@radix-ui/react-icons": "^1.3.2",
     "bsky-react-post": "^0.1.7",
+    "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "effect": "^3.17.7",
     "fumadocs-core": "15.6.4",
     "fumadocs-docgen": "2.1.0",
     "fumadocs-mdx": "11.7.5",
@@ -30,6 +34,7 @@
     "twoslash": "^0.3.4"
   },
   "devDependencies": {
+    "@effect/language-service": "^0.35.2",
     "@eslint-react/eslint-plugin": "workspace:*",
     "@eslint-react/kit": "workspace:*",
     "@eslint-react/shared": "workspace:*",

apps/website/services/toaster.ts

@@ -0,0 +1,68 @@
+import type { ToastActionElement, ToastProps } from "#/components/ui/Toast";
+import { Atom, Registry } from "@effect-atom/atom-react";
+import * as Array from "effect/Array";
+import * as Effect from "effect/Effect";
+import * as Queue from "effect/Queue";
+import * as Ref from "effect/Ref";
+
+export interface Toast extends ToastProps {
+  readonly id: string;
+  readonly description?: React.ReactNode;
+  readonly title?: string;
+  readonly action?: ToastActionElement;
+}
+
+export const toastsAtom = Atom.make(Array.empty<Toast>());
+
+export class Toaster extends Effect.Service<Toaster>()("app/Toaster", {
+  scoped: Effect.gen(function*() {
+    const counter = yield* Ref.make(0);
+    const removeQueue = yield* Queue.unbounded<string>();
+    const registry = yield* Registry.AtomRegistry;
+
+    const nextId = Ref.getAndUpdate(counter, (n) => n + 1).pipe(
+      Effect.map((n) => (n % Number.MAX_SAFE_INTEGER).toString()),
+    );
+
+    function createToast(id: string, toast: Omit<Toast, "id">): Toast {
+      return {
+        ...toast,
+        id,
+        onOpenChange: (open) => !open && dismissToast(id),
+        open: true,
+      };
+    }
+
+    function addToast(toast: Omit<Toast, "id">) {
+      return nextId.pipe(Effect.andThen((id) => registry.update(toastsAtom, Array.prepend(createToast(id, toast)))));
+    }
+
+    function removeToast(id: string) {
+      return Effect.sync(() =>
+        registry.update(
+          toastsAtom,
+          Array.filter((toast) => toast.id !== id),
+        )
+      );
+    }
+
+    function dismissToast(id: string) {
+      Queue.unsafeOffer(removeQueue, id);
+      registry.update(
+        toastsAtom,
+        Array.map((toast) => (toast.id === id ? { ...toast, open: false } : toast)),
+      );
+    }
+
+    yield* Queue.take(removeQueue).pipe(
+      Effect.flatMap((id) => removeToast(id).pipe(Effect.delay("5 seconds"), Effect.fork)),
+      Effect.forever,
+      Effect.forkScoped,
+      Effect.interruptible,
+    );
+
+    return {
+      toast: addToast,
+    } as const;
+  }),
+}) {}

apps/website/tsconfig.json

@@ -14,16 +14,32 @@
     ],
     "erasableSyntaxOnly": true,
     "paths": {
-      "#": ["."],
-      "#/*": ["./*"],
-      "#/.source": ["./.source/index.ts"]
+      "#": [
+        "."
+      ],
+      "#/*": [
+        "./*"
+      ],
+      "#/.source": [
+        "./.source/index.ts"
+      ]
     },
     "plugins": [
+      {
+        "name": "@effect/language-service"
+      },
       {
         "name": "next"
       }
     ]
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-  "exclude": ["node_modules"]
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
 }