Cleaned up code (#5)

copier.yaml

@@ -33,6 +33,11 @@ port:
   help: The port on which the app will listen
   default: 3000
 
+keyprefix:
+  type: str
+  help: The prefix for various keys used in the app (e.g. for storage)
+  default: "{{ appname | lower | replace('_', '-') }}"
+
 docs:
   type: bool
   help: Whether to include a documentation site for the app

src/.envrc.jinja

@@ -1,7 +1,7 @@
 #!/usr/bin/env bash
 
 # reload when these files change
-watch_file flake.lock ./*.nix package.json package-lock.json Taskfile.dist.yaml {taskfile,Taskfile}.{yaml,yml}
+watch_file flake.lock ./*.nix
 
 # activate the default development shell in the current shell
 # --accept-flake-config will accept the nix configuration from the flake without prompting

src/.eslintrc.cjs

@@ -35,10 +35,13 @@ module.exports = {
   root: true,
 
   rules: {
-    // Allow empty destructuring patterns
-    "no-empty-pattern": "off",
-
     // Allow anonymous default exports
     "import/no-anonymous-default-export": "off",
+
+    // Allow empty block statements
+    "no-empty": "off",
+
+    // Allow empty destructuring patterns
+    "no-empty-pattern": "off",
   },
 };

src/Dockerfile

@@ -88,6 +88,8 @@ SHELL ["/app/scripts/shell.sh"]
 COPY --from=build /build/build/ build/
 # Copy dependencies from build
 COPY --from=build /build/node_modules/ node_modules/
+# Copy public files
+COPY --from=build /build/public/ public/
 # Copy package files
 COPY --from=build /build/package.json /build/package-lock.json ./
 # Copy Next.js config

src/package.json.jinja

@@ -6,8 +6,7 @@
     "run": "next start --hostname \"${ {{- envprefix }}__SERVER__HOST:-0.0.0.0}\" --port \"${ {{- envprefix }}__SERVER__PORT:-{{ port -}} }\"",
     "build": "next build",
     "clean": "rm --recursive --force build/",
-    "update": "ncu --peer --doctor --upgrade && npm i --no-audit --no-fund",
-    "test": "npm run -- build"
+    "update": "ncu --peer --upgrade && npm i --no-audit --no-fund"
   },
   "dependencies": {
     "@mantine/core": "^7.7.1",

src/src/actions/helloWorld/action.ts

@@ -0,0 +1,7 @@
+"use server";
+
+import { HelloWorldProps } from "./types";
+
+export async function helloWorld({}: HelloWorldProps = {}) {
+  return "Hello, World!";
+}

src/src/actions/helloWorld/index.ts

@@ -0,0 +1,2 @@
+export * from "./action";
+export * from "./types";

src/src/actions/helloWorld/types.ts

@@ -0,0 +1,3 @@
+export type HelloWorldProps = {
+  [key: string]: never;
+};

src/src/actions/index.ts

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

src/src/app/error.tsx

@@ -1,8 +1,9 @@
 "use client";
 
-import { Title } from "@mantine/core";
+import { Button, Stack, Title } from "@mantine/core";
+import { IconRefresh } from "@tabler/icons-react";
 import { Metadata } from "next";
-import { labels } from "../config/labels.ts";
+import { labels } from "../config/labels";
 
 export const metadata: Metadata = {
   title: labels.pages.error.title,
@@ -14,6 +15,18 @@ export type ErrorProps = Readonly<{
   reset: () => void;
 }>;
 
-export default function Error({}: ErrorProps) {
-  return <Title>{labels.pages.error.text}</Title>;
+export default function Error({ reset }: ErrorProps) {
+  return (
+    <Stack>
+      <Title>{labels.pages.error.text}</Title>
+      <Button
+        variant="subtle"
+        color="gray"
+        onClick={reset}
+        leftSection={<IconRefresh />}
+      >
+        {labels.pages.error.buttons.retry.label}
+      </Button>
+    </Stack>
+  );
 }

src/src/app/layout.tsx

@@ -4,7 +4,7 @@ import type { Metadata } from "next";
 import { ReactNode } from "react";
 import { PageLayout } from "../components";
 import { colorSchemeStorageKey, defaultColorScheme } from "../config/constants";
-import { labels } from "../config/labels.ts";
+import { labels } from "../config/labels";
 import { ThemeProvider } from "../contexts";
 
 export const metadata: Metadata = {

src/src/app/not-found.tsx

@@ -1,6 +1,6 @@
 import { Title } from "@mantine/core";
 import { Metadata } from "next";
-import { labels } from "../config/labels.ts";
+import { labels } from "../config/labels";
 
 export const metadata: Metadata = {
   title: labels.pages.notFound.title,

src/src/app/page.tsx

@@ -1,19 +1,29 @@
 "use client";
 
 import { Button } from "@mantine/core";
-import { labels } from "../config/labels.ts";
+import { useCallback } from "react";
+import { helloWorld } from "../actions";
+import { labels } from "../config/labels";
+import { useToasts } from "../hooks";
 import { useStore } from "../store";
 
 export default function IndexPage() {
   const [color, hydrated] = useStore((state) => state.color);
   const [flipColor] = useStore((state) => state.flipColor);
 
+  const { success } = useToasts();
+
+  const onClick = useCallback(async () => {
+    success(await helloWorld());
+    flipColor();
+  }, [success, flipColor]);
+
   return (
     <Button
       loading={!hydrated}
       size="xl"
       color={hydrated ? color : undefined}
-      onClick={hydrated ? flipColor : undefined}
+      onClick={hydrated ? onClick : undefined}
     >
       {labels.pages.index.buttons.main.label}
     </Button>

src/src/config/constants.ts.jinja

@@ -0,0 +1,3 @@
+export const colorSchemeStorageKey = "{{ keyprefix }}-color-scheme";
+export const defaultColorScheme = "auto";
+export const stateStorageKey = "{{ keyprefix }}-state";

src/src/config/labels.ts.jinja

@@ -26,6 +26,11 @@ export const labels = {
       title: "Error • {{ appname }}",
       description: "{{ appname }}",
       text: "Something went wrong",
+      buttons: {
+        retry: {
+          label: "Retry",
+        },
+      },
     },
   },
 };

src/src/contexts/index.ts

@@ -1 +1 @@
-export * from "./Theme";
+export * from "./ThemeProvider";

src/src/hooks/index.ts

@@ -1 +1,2 @@
-export * from "./Toasts";
+export * from "./useHydrated";
+export * from "./useToasts";

src/src/hooks/useHydrated/index.ts

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

src/src/hooks/useHydrated/useHydrated.ts

@@ -0,0 +1,13 @@
+import "client-only";
+
+import { useEffect, useState } from "react";
+
+export function useHydrated() {
+  const [hydrated, setHydrated] = useState(false);
+
+  useEffect(() => {
+    setHydrated(true);
+  }, []);
+
+  return hydrated;
+}

src/src/hooks/Toasts/useToasts.tsx → src/src/hooks/useToasts/useToasts.tsx

@@ -8,7 +8,7 @@ import {
   IconX,
 } from "@tabler/icons-react";
 import { useCallback } from "react";
-import { labels } from "../../config/labels.ts";
+import { labels } from "../../config/labels";
 import { Toast } from "./useToasts.types";
 
 export function useToasts() {

src/src/store/index.ts

@@ -1,2 +1,2 @@
 export * from "./store";
-export * from "./store.types";
+export * from "./types";

src/src/store/store.ts

@@ -5,7 +5,7 @@ import { StateCreator, create } from "zustand";
 import { PersistOptions, persist } from "zustand/middleware";
 import { immer } from "zustand/middleware/immer";
 import { stateStorageKey } from "../config/constants";
-import { Store } from "./store.types";
+import { Store } from "./types";
 
 type Initializer = StateCreator<Store, [["zustand/immer", never]]>;
 

src/tsconfig.json

@@ -12,6 +12,7 @@
     "module": "esnext",
     "moduleResolution": "bundler",
     "noEmit": true,
+    "noUncheckedIndexedAccess": true,
     "noUnusedLocals": true,
     "plugins": [
       {

tests/test_docs.py

@@ -19,6 +19,7 @@ def data() -> dict[str, str]:
         "repourl": "https://github.com/radio-aktywne/app-foo",
         "envprefix": "FOO",
         "port": "3000",
+        "keyprefix": "foo",
         "docs": "true",
         "docsurl": "https://radio-aktywne.github.io/app-foo",
         "releases": "false",

tests/test_lint.py

@@ -19,6 +19,7 @@ def data() -> dict[str, str]:
         "repourl": "https://github.com/radio-aktywne/app-foo",
         "envprefix": "FOO",
         "port": "3000",
+        "keyprefix": "foo",
         "docs": "true",
         "docsurl": "https://radio-aktywne.github.io/app-foo",
         "releases": "true",