Remix SPAモードで管理画面を作成する

npx create-remix@latest --template remix-run/remix/templates/spa

npx shadcn-ui@latest init
file:///Users/hirosue/.npm/_npx/125ee17d583c4e03/node_modules/shadcn-ui/dist/index.js:3
`);for(let r of o)if(r.includes("@apply")){let n=r.replace("@apply","").trim(),i=y(n,e);t=t.replace(n,i)}return t}var mt=[he,ye,ue,we],ft=new lt({compilerOptions:{}});async function dt(t){let e=await at.mkdtemp(ve.join(ct(),"shadcn-"));return ve.join(e,t)}async function U(t){let e=await dt(t.filename),o=ft.createSourceFile(e,t.raw,{scriptKind:pt.TSX});for(let r of mt)r({sourceFile:o,...t});return await xe({sourceFile:o,...t})}import Se from"chalk";import{Command as gt}from"commander";import{execa as be}from"execa";import ut from"ora";import q from"prompts";import*as x from"zod";var ht=x.object({components:x.array(x.string()).optional(),yes:x.boolean(),overwrite:x.boolean(),cwd:x.string(),all:x.boolean(),path:x.string().optional()}),Ie=new gt().name("add").description("add a component to your project").argument("[components...]","the components to add").option("-y, --yes","skip confirmation prompt.",!0).option("-o, --overwrite","overwrite existing files.",!1).option("-c, --cwd <cwd>","the working directory. defaults to the current directory.",process.cwd()).option("-a, --all","add all available components",!1).option("-p, --path <path>","the path to add the component to.").action(async(t,e)=>{try{let o=ht.parse({components:t,...e}),r=K.resolve(o.cwd);Y(r)||(p.error(`The path ${r} does not exist. Please try again.`),process.exit(1));let n=await C(r);n||(p.warn(`Configuration is missing. Please run ${Se.green("init")} to create a components.json file.`),process.exit(1));let i=await N(),s=o.all?i.map(c=>c.name):o.components;if(!o.components?.length&&!o.all){let{components:c}=await q({type:"multiselect",name:"components",message:"Which components would you like to add?",hint:"Space to select. A to toggle all. Enter to submit.",instructions:!1,choices:i.map(d=>({title:d.name,value:d.name,selected:o.all?!0:o.components?.includes(d.name)}))});s=c}s?.length||(p.warn("No components selected. Exiting."),process.exit(0));let m=await G(i,s),f=await O(n.style,m),h=await z(n.tailwind.baseColor);if(f.length||(p.warn("Selected components not found. Exiting."),process.exit(0)),!o.yes){let{proceed:c}=await q({type:"confirm",name:"proceed",message:"Ready to install components and dependencies. Proceed?",initial:!0});c||process.exit(0)}let l=ut("Installing components...").start();for(let c of f){l.text=`Installing ${c.name}...`;let d=await W(n,c,o.path?K.resolve(r,o.path):void 0);if(!d)continue;if(Y(d)||await Te.mkdir(d,{recursive:!0}),c.files.filter(T=>Y(K.resolve(d,T.name))).length&&!o.overwrite)if(s.includes(c.name)){l.stop();let{overwrite:T}=await q({type:"confirm",name:"overwrite",message:`Component ${c.name} already exists. Would you like to overwrite?`,initial:!1});if(!T){p.info(`Skipped ${c.name}. To overwrite, run with the ${Se.green("--overwrite")} flag.`);continue}l.start(`Installing ${c.name}...`)}else continue;for(let T of c.files){let $=K.resolve(d,T.name),Re=await U({filename:T.name,raw:T.content,config:n,baseColor:h});n.tsx||($=$.replace(/\.tsx$/,".jsx"),$=$.replace(/\.ts$/,".js")),await Te.writeFile($,Re)}let k=await L(r);c.dependencies?.length&&await be(k,[k==="npm"?"install":"add",...c.dependencies],{cwd:r}),c.devDependencies?.length&&await be(k,[k==="npm"?"install":"add","-D",...c.devDependencies],{cwd:r})}l.succeed("Done.")}catch(o){I(o)}});import{existsSync as X,promises as xt}from"fs";import Z from"path";import A from"chalk";import{Command as yt}from"commander";import{diffLines as wt}from"diff";import*as v from"zod";var Ct=v.object({component:v.string().optional(),yes:v.boolean(),cwd:v.string(),path:v.string().optional()}),Ee=new yt().name("diff").description("check for updates against the registry").argument("[component]","the component name").option("-y, --yes","skip confirmation prompt.",!1).option("-c, --cwd <cwd>","the working directory. defaults to the current directory.",process.cwd()).action(async(t,e)=>{try{let o=Ct.parse({component:t,...e}),r=Z.resolve(o.cwd);X(r)||(p.error(`The path ${r} does not exist. Please try again.`),process.exit(1));let n=await C(r);n||(p.warn(`Configuration is missing. Please run ${A.green("init")} to create a components.json file.`),process.exit(1));let i=await N();if(!o.component){let f=n.resolvedPaths.components,h=i.filter(c=>{for(let d of c.files){let w=Z.resolve(f,d);if(X(w))return!0}return!1}),l=[];for(let c of h){let d=await ze(c,n);d.length&&l.push({name:c.name,changes:d})}l.length||(p.info("No updates found."),process.exit(0)),p.info("The following components have updates available:");for(let c of l){p.info(`- ${c.name}`);for(let d of c.changes)p.info(`  - ${d.filePath}`)}p.break(),p.info(`Run ${A.green("diff <component>")} to see the changes.`),process.exit(0)}let s=i.find(f=>f.name===o.component);s||(p.error(`The component ${A.green(o.component)} does not exist.`),process.exit(1));let m=await ze(s,n);m.length||(p.info(`No updates found for ${o.component}.`),process.exit(0));for(let f of m)p.info(`- ${f.filePath}`),await vt(f.patch),p.info("")}catch(o){I(o)}});async function ze(t,e){let o=await O(e.style,[t]),r=await z(e.tailwind.baseColor),n=[];for(let i of o){let s=await W(e,i);if(s)for(let m of i.files){let f=Z.resolve(s,m.name);if(!X(f))continue;let h=await xt.readFile(f,"utf8"),l=await U({filename:m.name,raw:m.content,config:e,baseColor:r}),c=wt(l,h);c.length>1&&n.push({file:m.name,filePath:f,patch:c})}}return n}async function vt(t){t.forEach(e=>{if(e)return e.added?process.stdout.write(A.green(e.value)):e.removed?process.stdout.write(A.red(e.value)):process.stdout.write(e.value)})}import{existsSync as Oe,promises as E}from"fs";import P from"path";import B from"path";import ee from"fast-glob";import Q,{pathExists as Tt}from"fs-extra";import{loadConfig as St}from"tsconfig-paths";var te=["**/node_modules/**",".next","public","dist","build"];async function Pe(t){let e=await C(t);if(e)return e;let o=await bt(t),r=await It(t),n=await zt(t);if(!o||!r||!n)return null;let i=await Et(t),s={$schema:"https://ui.shadcn.com/schema.json",rsc:["next-app","next-app-src"].includes(o),tsx:i,style:"new-york",tailwind:{config:i?"tailwind.config.ts":"tailwind.config.js",baseColor:"zinc",css:r,cssVariables:!0,prefix:""},aliases:{utils:`${n}/lib/utils`,components:`${n}/components`}};return await b(t,s)}async function bt(t){if(!(await ee.glob("**/*",{cwd:t,deep:3,ignore:te})).find(i=>i.startsWith("next.config.")))return null;let r=await Q.pathExists(B.resolve(t,"src"));return await Q.pathExists(B.resolve(t,`${r?"src/":""}app`))?r?"next-app-src":"next-app":r?"next-pages-src":"next-pages"}async function It(t){let e=await ee.glob("**/*.css",{cwd:t,deep:3,ignore:te});if(!e.length)return null;for(let o of e)if((await Q.readFile(B.resolve(t,o),"utf8")).includes("@tailwind base"))return o;return null}async function zt(t){let e=await St(t);if(e?.resultType==="failed"||!e?.paths)return null;for(let[o,r]of Object.entries(e.paths))if(r.includes("./*")||r.includes("./src/*"))return o.at(0);return null}async function Et(t){return Tt(B.resolve(t,"tsconfig.json"))}async function $e(t){if(!(await ee.glob("tailwind.config.*",{cwd:t,deep:3,ignore:te})).length)throw new Error("Tailwind CSS is not installed. Visit https://tailwindcss.com/docs/installation to get started.");return!0}var je=`import { type ClassValue, clsx } from "clsx"
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                

Error: Tailwind CSS is not installed. Visit https://tailwindcss.com/docs/installation to get started.
    at $e (file:///Users/hirosue/.npm/_npx/125ee17d583c4e03/node_modules/shadcn-ui/dist/index.js:3:7112)

Node.js v20.11.1

npm install -D tailwindcss
npx tailwindcss init

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "default",
  "rsc": false,
  "tsx": true,
  "tailwind": {
    "config": "tailwind.config.js",
    "css": "app/tailwind.css",
    "baseColor": "slate",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "~/components",
    "utils": "~/lib/utils"
  }
}

touch postcss.config.js

export default {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  }

+ import type { LinksFunction } from "@remix-run/node";
+ 
+ import stylesheet from "./tailwind.css?url";
+ 
+ export const links: LinksFunction = () => [
+  { rel: "stylesheet", href: stylesheet },
+ ]

npx shadcn-ui@latest add button

      </ul>
+      <Button>Click me</Button>
    </div>

npm run build

> build
> remix vite:build

vite v5.2.10 building for production...
✓ 94 modules transformed.
x Build failed in 363ms
Error [RollupError]: app/root.tsx (11:7): "default" is not exported by "app/globals.css", imported by "app/root.tsx".
file: /Users/hirosue/private/workspace/work/my-remix-app/app/root.tsx:11:7
 9: import type { LinksFunction } from "@remix-run/node";
10:
11: import styles from "./globals.css"

- import stylesheet from "./tailwind.css";
+ import stylesheet from "./tailwind.css?url";

npm install --save-dev husky

npx husky init

git commit -m "Update package.json and package-lock.json with husky dependency"
npm ERR! Missing script: "test"
npm ERR!
npm ERR! To see a list of scripts, run:
npm ERR!   npm run

npm ERR! A complete log of this run can be found in: /Users/hirosue/.npm/_logs/2024-04-30T04_51_44_180Z-debug-0.log
husky - pre-commit script failed (code 1)

- npm test
+ echo "husky: pre-commit hook started"

git commit -m "Update package.json and package-lock.json with husky dependency"
husky: pre-commit hook started
[main d423397] Update package.json and package-lock.json with husky dependency
 3 files changed, 20 insertions(+), 1 deletion(-)
 create mode 100644 .husky/pre-commit

npm install --save-dev --save-exact prettier

node --eval "fs.writeFileSync('.prettierrc','{}\n')"

npx prettier . --write

npx prettier . --write
.eslintrc.cjs 25ms (unchanged)
.prettierrc 7ms (unchanged)
app/components/ui/button.tsx 77ms
app/entry.client.tsx 4ms
app/lib/utils.ts 2ms
app/root.tsx 4ms
app/routes/_index.tsx 5ms
app/tailwind.css 14ms
components.json 1ms
doc/20240429131741.md 10ms
env.d.ts 1ms (unchanged)
package-lock.json 62ms (unchanged)
package.json 15ms (unchanged)
postcss.config.js 1ms
README.md 5ms (unchanged)
tailwind.config.js 3ms
tsconfig.json 16ms (unchanged)
vite.config.ts 1ms (unchanged)

npm install --save-dev lint-staged

  },
+  "lint-staged": {
+    "*.{ts,tsx}": [
+      "prettier --write"
+    ]
+  },
  "dependencies": {

- echo "husky: pre-commit hook started"
+ npx lint-staged

npm run lint

> lint
> eslint --ignore-path .gitignore --cache --cache-location ./node_modules/.cache/eslint .

=============

WARNING: You are currently running a version of TypeScript which is not officially supported by @typescript-eslint/typescript-estree.

You may find that it works just fine, or you may not.

SUPPORTED TYPESCRIPT VERSIONS: >=4.3.5 <5.4.0

YOUR TYPESCRIPT VERSION: 5.4.5

Please only submit bug reports when using the officially supported version.

=============

/Users/hirosue/private/workspace/remix-spa-shadcn-dashboard-sample/app/routes/hoge.tsx
   5:1  error  The update clause in this loop moves the variable in the wrong direction                                                                                                                                                                                                                                                                                                  for-direction
  14:9  error  Missing "key" prop for element in iterator                                                                                                                                                                                                                                                                                                                                react/jsx-key
  24:5  error  React Hook "useEffect" is called conditionally. React Hooks must be called in the exact same order in every component render                                                                                                                                                                                                                                              react-hooks/rules-of-hooks
  33:7  error  'App' is assigned a value but never used                                                                                                                                                                                                                                                                                                                                  @typescript-eslint/no-unused-vars
  36:7  error  The href attribute is required for an anchor to be keyboard accessible. Provide a valid, navigable address as the href value. If you cannot provide an href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/anchor-is-valid.md  jsx-a11y/anchor-is-valid
  44:1  error  The array literal notation [] is preferable                                                                                                                                                                                                                                                                                                                               @typescript-eslint/no-array-constructor

✖ 6 problems (6 errors, 0 warnings)
  1 error and 0 warnings potentially fixable with the `--fix` option.

npm run lint

> lint
> eslint --cache --cache-location ./node_modules/.cache/eslint .


/Users/hirosue/private/workspace/remix-spa-shadcn-dashboard-sample/app/routes/hoge.tsx
   5:1  error  The update clause in this loop moves the variable in the wrong direction                                                                                                                                                                                                                                                                                                  for-direction
  14:9  error  Missing "key" prop for element in iterator                                                                                                                                                                                                                                                                                                                                react/jsx-key
  24:5  error  React Hook "useEffect" is called conditionally. React Hooks must be called in the exact same order in every component render                                                                                                                                                                                                                                              react-hooks/rules-of-hooks
  33:7  error  'App' is assigned a value but never used                                                                                                                                                                                                                                                                                                                                  @typescript-eslint/no-unused-vars
  36:7  error  The href attribute is required for an anchor to be keyboard accessible. Provide a valid, navigable address as the href value. If you cannot provide an href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/anchor-is-valid.md  jsx-a11y/anchor-is-valid
  44:1  error  The array literal notation [] is preferable                                                                                                                                                                                                                                                                                                                               @typescript-eslint/no-array-constructor

✖ 6 problems (6 errors, 0 warnings)
  1 error and 0 warnings potentially fixable with the `--fix` option.

npm run lint

> lint
> eslint --cache --cache-location ./node_modules/.cache/eslint .

    rules: {
      ...reactRecommended.rules,
      ...reactJSXRuntime.rules,
+      "no-console": "error",
    },

export function Layout({ children }: { children: React.ReactNode }) {
+  console.log("Layout");

  return (
    <html lang="en">

npx eslint app/root.tsx
=============

WARNING: You are currently running a version of TypeScript which is not officially supported by @typescript-eslint/typescript-estree.

You may find that it works just fine, or you may not.

SUPPORTED TYPESCRIPT VERSIONS: >=4.3.5 <5.4.0

YOUR TYPESCRIPT VERSION: 5.4.5

Please only submit bug reports when using the officially supported version.

=============

/Users/hirosue/private/workspace/remix-spa-shadcn-dashboard-sample/app/root.tsx
  18:3  error  Unexpected console statement  no-console

✖ 1 problem (1 error, 0 warnings)

# To get started with Dependabot version updates, you'll need to specify which
# package ecosystems to update and where the package manifests are located.
# Please see the documentation for all configuration options:
# https://docs.github.com/code-security/dependabot/dependabot-version-updates/configuration-options-for-the-dependabot.yml-file

version: 2
updates:
  - package-ecosystem: "npm" # npm で設定
    directory: "/" # Location of package manifests
    schedule:
      interval: "weekly"

npx shadcn-ui@latest add card

npx shadcn-ui@latest add input

npx shadcn-ui@latest add form

import * as React from "react";
import { EyeNoneIcon, EyeOpenIcon } from "@radix-ui/react-icons";

import { cn } from "~/lib/utils";
import { Button } from "~/components/ui/button";
import { Input, type InputProps } from "~/components/ui/input";

const PasswordInput = React.forwardRef<HTMLInputElement, InputProps>(
  ({ className, ...props }, ref) => {
    const [showPassword, setShowPassword] = React.useState(false);
    return (
      <div className="relative">
        <Input
          type={showPassword ? "text" : "password"}
          className={cn("pr-10", className)}
          ref={ref}
          autoComplete="current-password"
          {...props}
        />
        <Button
          type="button"
          variant="ghost"
          size="sm"
          className="absolute right-0 top-0 h-full px-3 py-1 hover:bg-transparent"
          onClick={() => setShowPassword((prev) => !prev)}
          disabled={props.value === "" || props.disabled}
        >
          {showPassword ? (
            <EyeNoneIcon className="size-4" aria-hidden="true" />
          ) : (
            <EyeOpenIcon className="size-4" aria-hidden="true" />
          )}
          <span className="sr-only">
            {showPassword ? "Hide password" : "Show password"}
          </span>
        </Button>
      </div>
    );
  },
);
PasswordInput.displayName = "PasswordInput";

export { PasswordInput };

import { Outlet, Link } from "@remix-run/react";
import { siteConfig } from "~/config/site";
import { Icons } from "~/components/icons";

export default function App() {
  return (
    <div className="flex min-h-screen items-center justify-center">
      <Link
        to="/"
        className="absolute left-8 top-6 z-20 flex items-center text-lg font-bold tracking-tight"
      >
        <Icons.logo className="mr-2 size-6" aria-hidden="true" />
        <span>{siteConfig.name}</span>
      </Link>
      <main className="container">
        <Outlet />
      </main>
    </div>
  );
}

import type { MetaFunction } from "@remix-run/node";
import { Link } from "@remix-run/react";

import {
  Card,
  CardContent,
  CardFooter,
  CardHeader,
  CardTitle,
} from "~/components/ui/card";
import { Shell } from "~/components/shell";
import { SignInForm } from "~/components/auth/signin-form";

export const meta: MetaFunction = () => {
  return [
    { title: "Sign In" },
    { name: "description", content: "Sign in to your account" },
  ];
};

export default function SignInPage() {
  return (
    <Shell className="max-w-lg">
      <Card>
        <CardHeader className="space-y-1">
          <CardTitle className="text-2xl">Sign in</CardTitle>
        </CardHeader>
        <CardContent className="grid gap-4">
          <SignInForm />
        </CardContent>
        <CardFooter className="flex flex-wrap items-center justify-between gap-2">
          <div className="text-sm text-muted-foreground">
            <span className="mr-1 hidden sm:inline-block">
              Don&apos;t have an account?
            </span>
            <Link
              aria-label="Sign up"
              to="/auth/signup"
              className="text-primary underline-offset-4 transition-colors hover:underline"
            >
              Sign up
            </Link>
          </div>
          <Link
            aria-label="Reset password"
            to="/auth/signin/reset-password"
            className="text-sm text-primary underline-offset-4 transition-colors hover:underline"
          >
            Reset password
          </Link>
        </CardFooter>
      </Card>
    </Shell>
  );
}

import { zodResolver } from "@hookform/resolvers/zod";
import { useForm } from "react-hook-form";
import type { z } from "zod";

import { authSchema } from "~/lib/validations/auth";
import { Button } from "~/components/ui/button";
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "~/components/ui/form";
import { Input } from "~/components/ui/input";
import { PasswordInput } from "~/components/password-input";

type Inputs = z.infer<typeof authSchema>;

export function SignInForm() {
  // react-hook-form
  const form = useForm<Inputs>({
    resolver: zodResolver(authSchema),
    defaultValues: {
      email: "",
      password: "",
    },
  });

  async function onSubmit(data: Inputs) {}

  return (
    <Form {...form}>
      <form className="grid gap-4" onSubmit={form.handleSubmit(onSubmit)}>
        <FormField
          control={form.control}
          name="email"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Email</FormLabel>
              <FormControl>
                <Input
                  type="text"
                  placeholder="rodneymullen180@gmail.com"
                  autoComplete="username"
                  {...field}
                />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />
        <FormField
          control={form.control}
          name="password"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Password</FormLabel>
              <FormControl>
                <PasswordInput placeholder="**********" {...field} />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />
        <Button type="submit">
          Sign in
          <span className="sr-only">Sign in</span>
        </Button>
      </form>
    </Form>
  );
}

npm i @tanstack/react-query

http POST https://next-typescript-sample-mu.vercel.app/api/auth id=test@test.com password=admin
HTTP/1.1 200 OK
Access-Control-Allow-Headers: Content-Type, Authorization
Access-Control-Allow-Methods: GET, POST, OPTIONS
Access-Control-Allow-Origin: *
Cache-Control: public, max-age=0, must-revalidate
Connection: keep-alive
Content-Length: 201
Content-Type: application/json; charset=utf-8
Date: Fri, 03 May 2024 06:11:10 GMT
Etag: "c9-PDcYRx3NdRkZNfDNysu6mbKC9u0"
Server: Vercel
Strict-Transport-Security: max-age=63072000; includeSubDomains; preload
X-Matched-Path: /api/auth
X-Vercel-Cache: MISS
X-Vercel-Id: hnd1::iad1::lwsgp-1714716669706-90c9ccf38d87

{
    "status": "ok",
    "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE3MTQ3MjAyNjksInBheWxvYWQiOnsidXNlciI6InRlc3RAdGVzdC5jb20ifSwiaWF0IjoxNzE0NzE2NjY5fQ.FuE9EJFyyANZb-JxgVV9m1n3z9CDktd53cbHhuGxokM"
}

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

const queryClient = new QueryClient();

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
  );
}

+ import { Providers } from "~/components/layout/providers";

      <body className={cn("min-h-screen bg-background font-sans antialiased")}>
+        <Providers>{children}</Providers>
        <ScrollRestoration />
        <Scripts />
      </body>

+  const mutation = useMutation({
+    mutationFn: (data: Inputs) => {
+     return postData("/api/auth", data); // fetchでpost
+    },
+    onSuccess: (data) => {
+      navigate("/");
+      alert("Sign in successful! 🎉");
+    },
+  });

+  async function onSubmit(data: Inputs) {
+    captains.log("do something with the data", data);
+    mutation.mutate(data);
+  }

  return (
    <Form {...form}>
      <form className="grid gap-4" onSubmit={form.handleSubmit(onSubmit)}>

+        <Button type="submit" disabled={mutation.isPending}>
+          {mutation.isPending && (
+            <Icons.spinner
+              className="mr-2 size-4 animate-spin"
+              aria-hidden="true"
+            />
+          )}
          Sign in
          <span className="sr-only">Sign in</span>
        </Button>

import React, { createContext, useContext, useState } from "react";

type SessionState = {
  name: string;
  email: string;
  image: string;
  token: string;
} | null;

type SessionValue = {
  session: SessionState;
  updateSession: (value: SessionState) => void;
  clearSession: () => void;
};

const defaultSessionValue = {
  session: null,
  updateSession: (value: SessionState) => {},
  clearSession: () => {},
};

const SessionContext = createContext(defaultSessionValue as SessionValue);

export const SessionProvider = ({
  children,
}: {
  children: React.ReactNode;
}): JSX.Element => {
  const [session, setSession] = useState<SessionState>(null);

  const clearSession = () => {
    setSession(null);
  };

  const updateSession = (value: SessionState) => {
    if (value) {
      setSession((prevSession) => ({ ...prevSession, ...value }));
    }
  };

  return (
    <SessionContext.Provider
      value={{
        session,
        updateSession,
        clearSession,
      }}
    >
      {children}
    </SessionContext.Provider>
  );
};

// カスタムフックを作成してコンテキストにアクセスできるようにする
export const useSession = () => useContext(SessionContext);

export default SessionProvider;

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { Toaster } from "~/components/ui/toaster";
import SessionProvider from "./session-provider";

const queryClient = new QueryClient();

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <QueryClientProvider client={queryClient}>
      <SessionProvider>
        <Toaster />
        {children}
      </SessionProvider>
    </QueryClientProvider>
  );
}

+ const { session, clearSession } = useSession();
+ const navigate = useNavigate();
+ const { toast } = useToast();

  return (
    <div style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.8" }}>
+     {session && <h1>Welcome to {session.name}!</h1>}
      <ul>

// その他のコード

      <Button
+       onClick={() => {
+         clearSession();
+         navigate("/auth/signin");
+         toast({
+           description: "Logged out successfully!",
+         });
+       }}
      >
        Log Out
      </Button

npx shadcn-ui@latest add sheet

✔ Done.

npx shadcn-ui@latest add avatar

✔ Done.

npx shadcn-ui@latest add dropdown-menu

✔ Done.

import { Outlet } from "@remix-run/react";
import Header from "~/components/layout/header";
import Sidebar from "~/components/layout/sidebar";

export default function App() {
  return (
    <>
      <Header />
      <div className="flex h-screen">
        <Sidebar />
        <main className="w-full pt-16">
          <Outlet />
        </main>
      </div>
    </>
  )
}

import type { MetaFunction } from "@remix-run/node";
import { Shell } from "~/components/shell";
import { getData } from "~/lib/fetch";
import { useLoaderData } from "@remix-run/react";

const captains = console;

export const meta: MetaFunction = () => {
  return [
    { title: "DashBoard - Product" },
    { name: "description", content: "DashBoard Product" },
  ];
};

// SPAモードのため、clientLoaderを利用します。
export async function clientLoader() {
  // During client-side navigations, we hit our exposed API endpoints directly
  const data = await getData("/api/products?page=0&rows=5");
  return data;
}

export default function Product() {
  const { count, data } = useLoaderData<typeof clientLoader>();
  captains.log("Product Page Result size: ", count, data);
  return (
    <Shell className="max-w-lg">
      Product Page Result size: {count}
    </Shell>
  );
}

npx shadcn-ui@latest add checkbox

✔ Done.

npx shadcn-ui@latest add select

✔ Done.

npx shadcn-ui@latest add table

✔ Done.

npx shadcn-ui@latest add scroll-area

✔ Done.

npx shadcn-ui@latest add alert-dialog

✔ Done.

npx shadcn-ui@latest add dialog

✔ Done.

npx shadcn-ui@latest add separator

✔ Done.

npm install @tanstack/react-table


added 2 packages, and audited 914 packages in 3s

285 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from "~/components/ui/dialog";

interface ModalProps {
  title: string;
  description: string;
  isOpen: boolean;
  onClose: () => void;
  children?: React.ReactNode;
}

export const Modal: React.FC<ModalProps> = ({
  title,
  description,
  isOpen,
  onClose,
  children,
}) => {
  const onChange = (open: boolean) => {
    if (!open) {
      onClose();
    }
  };

  return (
    <Dialog open={isOpen} onOpenChange={onChange}>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>{title}</DialogTitle>
          <DialogDescription>{description}</DialogDescription>
        </DialogHeader>
        <div>{children}</div>
      </DialogContent>
    </Dialog>
  );
};

import { useEffect, useState } from "react";

import { Button } from "~/components/ui/button";
import { Modal } from "~/components/ui/modal";

interface AlertModalProps {
  isOpen: boolean;
  onClose: () => void;
  onConfirm: () => void;
  loading: boolean;
}

export const AlertModal: React.FC<AlertModalProps> = ({
  isOpen,
  onClose,
  onConfirm,
  loading,
}) => {
  const [isMounted, setIsMounted] = useState(false);

  useEffect(() => {
    setIsMounted(true);
  }, []);

  if (!isMounted) {
    return null;
  }

  return (
    <Modal
      title="Are you sure?"
      description="This action cannot be undone."
      isOpen={isOpen}
      onClose={onClose}
    >
      <div className="flex w-full items-center justify-end space-x-2 pt-6">
        <Button disabled={loading} variant="outline" onClick={onClose}>
          Cancel
        </Button>
        <Button disabled={loading} onClick={onConfirm}>
          Continue
        </Button>
      </div>
    </Modal>
  );
};

import React from "react";
import { Link } from "@remix-run/react";
import { ChevronRightIcon } from "@radix-ui/react-icons";

import { cn } from "~/lib/utils";

type BreadCrumbType = {
  title: string;
  link: string;
};

type BreadCrumbPropsType = {
  items: BreadCrumbType[];
};

export default function BreadCrumb({ items }: BreadCrumbPropsType) {
  return (
    <div className="mb-4 flex items-center space-x-1 text-sm text-muted-foreground">
      <Link
        to={"/dashboard/home"}
        className="overflow-hidden text-ellipsis whitespace-nowrap"
      >
        Dashboard
      </Link>
      {items?.map((item: BreadCrumbType, index: number) => (
        <React.Fragment key={item.title}>
          <ChevronRightIcon className="h-4 w-4" />
          <Link
            to={item.link}
            className={cn(
              "font-medium",
              index === items.length - 1
                ? "pointer-events-none text-foreground"
                : "text-muted-foreground",
            )}
          >
            {item.title}
          </Link>
        </React.Fragment>
      ))}
    </div>
  );
}

// jsxのみ記載。詳細は公式ドキュメントおよびCommitを参照
  return (
    <>
      <ScrollArea className="h-[calc(50vh-220px)] rounded-md border">
        <Table className="relative">
          <TableHeader>
            {table.getHeaderGroups().map((headerGroup) => (
              <TableRow key={headerGroup.id}>
                {headerGroup.headers.map((header) => {
                  return (
                    <TableHead key={header.id}>
                      <div
                        className="flex items-center"
                        onClick={header.column.getToggleSortingHandler()}
                      >
                        {header.isPlaceholder
                          ? null
                          : flexRender(
                              header.column.columnDef.header,
                              header.getContext(),
                            )}
                        {{
                          asc: <TriangleUpIcon />,
                          desc: <TriangleDownIcon />,
                        }[header.column.getIsSorted() as string] ?? null}
                      </div>
                    </TableHead>
                  );
                })}
              </TableRow>
            ))}
          </TableHeader>
          <TableBody>
            {table.getRowModel().rows?.length ? (
              table.getRowModel().rows.map((row) => (
                <TableRow
                  key={row.id}
                  data-state={row.getIsSelected() && "selected"}
                >
                  {row.getVisibleCells().map((cell) => (
                    <TableCell key={cell.id}>
                      {flexRender(
                        cell.column.columnDef.cell,
                        cell.getContext(),
                      )}
                    </TableCell>
                  ))}
                </TableRow>
              ))
            ) : (
              <TableRow>
                <TableCell
                  colSpan={columns.length}
                  className="h-24 text-center"
                >
                  No results.
                </TableCell>
              </TableRow>
            )}
          </TableBody>
        </Table>
        <ScrollBar orientation="horizontal" />
      </ScrollArea>

      <div className="flex flex-col items-center justify-end gap-2 space-x-2 py-4 sm:flex-row">
        <div className="flex w-full items-center justify-between">
          <div className="flex-1 text-sm text-muted-foreground">
            Showing {startRow}-{endRow} of {totalCount} rows.
          </div>
          <div className="flex flex-col items-center gap-4 sm:flex-row sm:gap-6 lg:gap-8">
            <div className="flex items-center space-x-2">
              <p className="whitespace-nowrap text-sm font-medium">
                Rows per page
              </p>
              <Select
                value={`${table.getState().pagination.pageSize}`}
                onValueChange={(value) => {
                  table.setPageSize(Number(value));
                }}
              >
                <SelectTrigger className="h-8 w-[70px]">
                  <SelectValue
                    placeholder={table.getState().pagination.pageSize}
                  />
                </SelectTrigger>
                <SelectContent side="top">
                  {pageSizeOptions.map((pageSize) => (
                    <SelectItem key={pageSize} value={`${pageSize}`}>
                      {pageSize}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>
          </div>
        </div>
        <div className="flex w-full items-center justify-between gap-2 sm:justify-end">
          <div className="flex w-[100px] items-center justify-center text-sm font-medium">
            Page {table.getState().pagination.pageIndex + 1} of{" "}
            {table.getPageCount()}
          </div>
          <div className="flex items-center space-x-2">
            <Button
              aria-label="Go to first page"
              variant="outline"
              className="hidden h-8 w-8 p-0 lg:flex"
              onClick={() => table.setPageIndex(0)}
              disabled={!table.getCanPreviousPage()}
            >
              <DoubleArrowLeftIcon className="h-4 w-4" aria-hidden="true" />
            </Button>
            <Button
              aria-label="Go to previous page"
              variant="outline"
              className="h-8 w-8 p-0"
              onClick={() => table.previousPage()}
              disabled={!table.getCanPreviousPage()}
            >
              <ChevronLeftIcon className="h-4 w-4" aria-hidden="true" />
            </Button>
            <Button
              aria-label="Go to next page"
              variant="outline"
              className="h-8 w-8 p-0"
              onClick={() => table.nextPage()}
              disabled={!table.getCanNextPage()}
            >
              <ChevronRightIcon className="h-4 w-4" aria-hidden="true" />
            </Button>
            <Button
              aria-label="Go to last page"
              variant="outline"
              className="hidden h-8 w-8 p-0 lg:flex"
              onClick={() => table.setPageIndex(table.getPageCount() - 1)}
              disabled={!table.getCanNextPage()}
            >
              <DoubleArrowRightIcon className="h-4 w-4" aria-hidden="true" />
            </Button>
          </div>
        </div>
      </div>
    </>
  );

export default function Product() {
  const { count, data } = useLoaderData<typeof clientLoader>();
  captains.log("Product Page Result size: ", count, data);
+  const isPending = false;
+  const searchParams: ProductSearchFormValues = {
+    page: 0,
+    limit: 5,
+    sort: "name,asc",
+  };

  return (
    <Shell variant="sidebar">
+      <BreadCrumb items={breadcrumbItems} />
+      <ProductTableHeader isPending={isPending} totalCount={count} />
+      <Separator />
+      <ProductSearchForm searchParams={searchParams} />
+      <Separator />
+      {isPending ? (
+       <Skeleton className="h-[calc(65vh-220px)] rounded-md border" />
+      ) : (
+        <PageableTable
+          pageNo={searchParams.page!}
+          columns={columns}
+          totalCount={count}
+          data={data}
+          initailSort={parseSortQueryParam(searchParams.sort)}
+          pageCount={Math.ceil(count / searchParams.limit!)}
+        />
+      )}
    </Shell>
  );
}

// function that will execute on the client.
export function clientLoader() {
+  // promiseを返すように修正
+  const loaderPromise = getData("/api/products?page=0&rows=5");
+  return defer({ loaderPromise });
}

export default function Product() {
+ // loaderからPromiseを受けとるように修正
+  const { loaderPromise } = useLoaderData<typeof clientLoader>();
  const isPending = false;
  const searchParams: ProductSearchFormValues = {
    page: 0,
    limit: 5,
    sort: "name,asc",
  };

  return (
    <Shell variant="sidebar">
      <BreadCrumb items={breadcrumbItems} />
+    {/* 非同期処理中は、Skeletonを表示 */}
+    <Suspense
+      fallback={
+        <Skeleton className="h-[calc(75vh-220px)] rounded-md border" />
+      }
+    >
+        <>
+          {/* here is where Remix awaits the promise */}
+          <Await resolve={loaderPromise}>
+            {/* now you have the resolved value */}
+            {({ count, data }) => (
+              <>
                  <ProductTableHeader
                    isPending={isPending}
                    totalCount={count}
                  />
                  <Separator />
                  <ProductSearchForm searchParams={searchParams} />
                  <Separator />
                  {isPending ? (
                    <Skeleton className="h-[calc(65vh-220px)] rounded-md border" />
                  ) : (
                    <PageableTable
                      pageNo={searchParams.page!}
                      columns={columns}
                      totalCount={count}
                      data={data}
                      initailSort={parseSortQueryParam(searchParams.sort)}
                      pageCount={Math.ceil(count / searchParams.limit!)}
                    />
                  )}
                </>
              )}
+            </Await>
+          </>
+        )}
+      </Suspense>
    </Shell>
  );
}

// function that will execute on the client.
export function clientLoader({
+  request, // 
+ }: ClientLoaderFunctionArgs) {
  // During client-side navigations, we hit our exposed API endpoints directly
+  // クエリからpageを取得して、APIのパラメータに設定
+  const url = new URL(request.url);
+  const page = parseInt(url.searchParams.get("page") ?? "1") - 1;

  captains.log("clientLoader start", new Date().toISOString());
+  const loaderPromise = getData(`/api/products?page=${page}&rows=5`);
  return defer({ loaderPromise });
}

export default function Product() {
  const { loaderPromise } = useLoaderData<typeof clientLoader>();
+  const navigation = useNavigation();
+  const isPending = navigation.state === "loading";
  const searchParams: ProductSearchFormValues = {
    page: 0,
    limit: 5,
    sort: "name,asc",
  };

+ // クライアントアクションで検索フォームの値を処理します。検索前の状態を復元したいため、postを用いています
+ export async function clientAction({ request }: ClientActionFunctionArgs) {
+  const body = await request.formData();
+  const url = new URL(request.url);
+  const { limit } = parseUrl(url); // 検索前の状態を復元
+  const name = body.get("name");

+  const params = new URLSearchParams({
+    page: "1", // 検索フォーム検索時は、1ページ目に戻す
+    limit: limit.toString(),
+  })
+  if (name) {
+    params.append("name", name.toString());
+  }

+  return redirect(`/dashboard/product?${params.toString()}`); // リダイレクトして、loaderで再検索を実施
+ }

// function that will execute on the client.
export function clientLoader({ request }: ClientLoaderFunctionArgs) {
  // During client-side navigations, we hit our exposed API endpoints directly
  const url = new URL(request.url);
+  const { page, limit, name } = parseUrl(url);

  captains.log("clientLoader start", new Date().toISOString());

+  const params = new URLSearchParams({
+    page: (page - 1).toString(),
+    rows: limit.toString(),
+  })
+  if (name) {
+    params.append("name", name);
+  }

+  const loaderPromise = getData(`/api/products?${params.toString()}`);

+  return defer({ loaderPromise, page, limit, name: name ?? "" });
}

export default function Product() {
+  const { loaderPromise, name, page, limit } = useLoaderData<typeof clientLoader>();
  const navigation = useNavigation();
  const isPending = navigation.state === "loading";
  const searchParams: ProductSearchFormValues = {
+    name,
    page,
    limit,
    sort: "",
  };

  return (
    <Shell variant="sidebar">
      <BreadCrumb items={breadcrumbItems} />
      <Suspense
        fallback={
          <Skeleton className="h-[calc(75vh-220px)] rounded-md border" />
        }
      >
        <>
          {/* here is where Remix awaits the promise */}
          <Await resolve={loaderPromise}>
            {/* now you have the resolved value */}
            {({ count, data }) => (
              <>
                <ProductTableHeader isPending={isPending} totalCount={count} />
                <Separator />
+                {/* 一覧表示件数（limit）等は検索前の状態を引き継ぐため、postで処理します */}
+                <Form method="post">
+                  <ProductSearchForm searchParams={searchParams} />
+                </Form>

// function that will execute on the client.
export function clientLoader({ request }: ClientLoaderFunctionArgs) {
  // During client-side navigations, we hit our exposed API endpoints directly
  const url = new URL(request.url);
+  const { page, limit, name, sort } = parseUrl(url);

  captains.log("clientLoader start", new Date().toISOString());

  const params = new URLSearchParams({
    page: (page - 1).toString(),
    rows: limit.toString(),
  });
  if (name) {
    params.append("name", name);
  }
+ // APIの仕様に応じて、ソート用のクエリを組み立て
+  if (sort) {
+    const { id, desc } = parseSortQueryParam(sort)[0]
+    params.append("orderBy", id)
+    params.append("order", desc ? "desc" : "asc")
+  }

  const loaderPromise = getData(`/api/products?${params.toString()}`);

+  return defer({ loaderPromise, page, limit, name: name ?? "", sort: sort ?? "" });
}

export default function Product() {
+  const { loaderPromise, name, page, limit, sort } =
    useLoaderData<typeof clientLoader>();
  const navigation = useNavigation();
  const isPending = navigation.state === "loading";
  const searchParams: ProductSearchFormValues = {
    name,
    page,
    limit,
+    sort,
  };

type ProductFormValues = z.infer<typeof productUpsertSchema>

interface ProductFormProps {
  initialData: ProductFormValues & {
    version?: number
  } | null
  _csrf: string
}

export const ProductForm: React.FC<ProductFormProps> = ({
  initialData,
}) => {
  const title = initialData ? "Edit product" : "Create product"
  const description = initialData ? "Edit a product." : "Add a new product."
  const toastMessage = initialData ? "Product updated." : "Product created."
  const action = initialData ? "Save changes" : "Create"

  const defaultValues = initialData
    ? initialData
    : {
        name: "",
        description: "",
        quantity: 0,
      }

  const form = useForm<ProductFormValues>({
    resolver: zodResolver(productUpsertSchema),
    defaultValues: {
      ...defaultValues,
    },
  })

  return (
    <>
      <div className="flex items-center justify-between">
        <Heading title={title} description={description} />
        {initialData && (
          <Button variant="destructive" size="sm" onClick={onDelete}>
            <Trash className="h-4 w-4" />
          </Button>
        )}
      </div>
      <Separator />
      <Form {...form}>
        <form
          onSubmit={form.handleSubmit(onSubmit)}
          className="w-full space-y-8"
        >
          <div className="gap-8 md:grid md:grid-cols-3">
            <FormField
              control={form.control}
              name="name"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Name</FormLabel>
                  <FormControl>
                    <Input
                      placeholder="Product name"
                      {...field}
                    />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />

{/* 省略*/}

          <Button className="ml-auto" type="submit">
            {action}
          </Button>
        </form>
      </Form>
    </>
  )
}