### Example Environment Variables (Configuration)

Source: https://github.com/dogokit/dogokit-akita/blob/main/docs/guides/steps.md

An example file showing the required environment variables for the application. It should be copied and filled with actual values for different environments.

```txt
.env.example
```

--------------------------------

### Project Setup - Install Dependencies

Source: https://github.com/dogokit/dogokit-akita/blob/main/docs/guides/start.md

Installs all project dependencies using the Bun package manager. This command should be run after cloning the repository.

```sh
bun install
```

--------------------------------

### Installing Dependencies (Bun)

Source: https://github.com/dogokit/dogokit-akita/blob/main/docs/guides/steps.md

Installs project dependencies using the Bun runtime/package manager. This command reads the package.json file and fetches required packages.

```sh
bun install
```

--------------------------------

### Installing Radix UI Component (UI Library)

Source: https://github.com/dogokit/dogokit-akita/blob/main/docs/guides/steps.md

Installs a specific component from the Radix UI library using Bun. Radix UI provides unstyled, accessible components.

```sh
bun install @radix-ui/react-slot
```

--------------------------------

### Project README (Documentation)

Source: https://github.com/dogokit/dogokit-akita/blob/main/docs/guides/steps.md

The main documentation file for the project. It typically contains information about setup, usage, and contribution guidelines.

```txt
README.md
```

--------------------------------

### Project License (Legal)

Source: https://github.com/dogokit/dogokit-akita/blob/main/docs/guides/steps.md

Contains the licensing information for the project. It specifies how the code can be used, modified, and distributed.

```txt
LICENSE
```

--------------------------------

### Starting Docker Containers (Containerization)

Source: https://github.com/dogokit/dogokit-akita/blob/main/docs/guides/steps.md

Starts the services defined in the docker-compose.yml file in detached mode using the docker compose command. This brings up the application's containers.

```sh
docker compose up -d
```

--------------------------------

### Installing Fontsource Font (Fonts)

Source: https://github.com/dogokit/dogokit-akita/blob/main/docs/guides/steps.md

Installs a standard font from Fontsource using Bun. This provides a way to self-host fonts for offline use and better performance.

```sh
bun install @fontsource/font-name
```

--------------------------------

### Environment Setup - Create .env Files

Source: https://github.com/dogokit/dogokit-akita/blob/main/docs/guides/start.md

Creates local and production environment files by copying the example file. These files are used to configure application settings.

```sh
cp -i .env.example .env.local
```

```sh
cp -i .env.example .env.production
```

```sh
make setup-env
# cp -i .env.example .env.local
# cp -i .env.example .env.production
```

--------------------------------

### Installing shadcn/ui Dependencies (UI Library)

Source: https://github.com/dogokit/dogokit-akita/blob/main/docs/guides/steps.md

Manually installs core dependencies used by shadcn/ui components, including libraries for managing class variants, conditional classes, and merging Tailwind classes.

```sh
bun install class-variance-authority clsx tw-merge
```

--------------------------------

### Installing pnpm Globally (Node.js)

Source: https://github.com/dogokit/dogokit-akita/blob/main/docs/guides/steps.md

Installs the pnpm package manager globally on your system. pnpm is used for managing project dependencies efficiently.

```sh
npm install -g pnpm
```

--------------------------------

### Cloning the Repository (Git)

Source: https://github.com/dogokit/dogokit-akita/blob/main/docs/guides/steps.md

Clones the project repository using the SSH URL. This is the first step to get the project code onto your local machine.

```sh
git clone git@github.com:dogokit/dogokit-akita.git
```

--------------------------------

### Code of Conduct (Community)

Source: https://github.com/dogokit/dogokit-akita/blob/main/docs/guides/steps.md

Outlines expected behavior for contributors and participants in the project community. It helps foster a welcoming and inclusive environment.

```txt
CODE_OF_CONDUCT.md
```

--------------------------------

### Installing Tailwind CSS Plugins (Styling)

Source: https://github.com/dogokit/dogokit-akita/blob/main/docs/guides/steps.md

Installs official Tailwind CSS plugins for typography, forms, and animations as development dependencies using Bun. These extend Tailwind's utility classes.

```sh
bun install -D @tailwindcss/typography @tailwindcss/forms tailwindcss-animate
```

--------------------------------

### Installing Tailwind CSS and PostCSS (Styling)

Source: https://github.com/dogokit/dogokit-akita/blob/main/docs/guides/steps.md

Installs core dependencies for Tailwind CSS, PostCSS, and Autoprefixer as development dependencies using Bun. These are essential for processing CSS with modern features and utilities.

```sh
bun install -D tailwindcss postcss autoprefixer
```

--------------------------------

### Configuring shadcn/ui Components (UI Library)

Source: https://github.com/dogokit/dogokit-akita/blob/main/docs/guides/steps.md

Configuration file used by the shadcn/ui CLI. It specifies where components should be added and other settings for the UI library.

```txt
components.json
```

--------------------------------

### Initializing shadcn/ui (UI Library)

Source: https://github.com/dogokit/dogokit-akita/blob/main/docs/guides/steps.md

Runs the shadcn/ui initialization script using pnpm. This command sets up necessary configurations and dependencies for using shadcn/ui components.

```sh
pnpx shadcn-ui@latest init
```

--------------------------------

### Installing Variable Fontsource Font (Fonts)

Source: https://github.com/dogokit/dogokit-akita/blob/main/docs/guides/steps.md

Installs a variable font from Fontsource using Bun. Fontsource allows self-hosting fonts, avoiding external dependencies like Google Fonts.

```sh
bun install @fontsource-variable/font-name
```

--------------------------------

### Database - Example Seed Data

Source: https://github.com/dogokit/dogokit-akita/blob/main/docs/guides/start.md

Example TypeScript code defining an array of user data to be used for seeding the database during development.

```ts
export const dataUsers = [
  {
    username: "example",
    fullname: "Example User",
    nickname: "Sample",
    email: "example@example.com",
    password: "exampleexample",
    roleSymbol: "ROOT",
  }
];
```

--------------------------------

### Opening Prisma Studio (Prisma)

Source: https://github.com/dogokit/dogokit-akita/blob/main/docs/guides/steps.md

Executes the Prisma db:studio command using Bun. This command opens the Prisma Studio GUI in your browser, allowing you to view and edit database data.

```sh
bun db:studio
```

--------------------------------

### Prerequisites - Install Bun JavaScript Runtime

Source: https://github.com/dogokit/dogokit-akita/blob/main/docs/guides/start.md

Installs the Bun JavaScript runtime and toolkit. Bun is used as the primary package manager and runtime for this project.

```sh
curl -fsSL https://bun.sh/install | bash
```

```sh
npm i -g bun
```

```sh
brew install oven-sh/bun/bun
```

```sh
proto install bun
```

--------------------------------

### Configuring Prettier (Formatting)

Source: https://github.com/dogokit/dogokit-akita/blob/main/docs/guides/steps.md

Configuration file for the Prettier code formatter. It defines rules for code style and formatting.

```txt
.prettierrc.js
```

--------------------------------

### Generating Prisma Docs (Prisma)

Source: https://github.com/dogokit/dogokit-akita/blob/main/docs/guides/steps.md

Executes the Prisma db:docs command using Bun. This command generates documentation for your Prisma schema.

```sh
bun db:docs
```

--------------------------------

### Prerequisites - Install moon Monorepo Tool

Source: https://github.com/dogokit/dogokit-akita/blob/main/docs/guides/start.md

Installs the moon monorepo management tool. Moon is recommended for efficient task running and project management in a monorepo.

```sh
curl -fsSL https://moonrepo.dev/install/moon.sh | bash
```

```sh
proto plugin add moon "https://raw.githubusercontent.com/moonrepo/moon/master/proto-plugin.toml"
proto install moon
```

--------------------------------

### Configuring Remix (Framework)

Source: https://github.com/dogokit/dogokit-akita/blob/main/docs/guides/steps.md

Configuration file for the Remix web framework. It allows customizing various aspects of the Remix application build and behavior, including enabling features like Tailwind CSS and PostCSS.

```txt
remix.config.js
```

--------------------------------

### Prerequisites - Install proto Toolchain Manager

Source: https://github.com/dogokit/dogokit-akita/blob/main/docs/guides/start.md

Installs the proto toolchain version manager using a curl script. Proto is recommended for managing tool versions like Node.js, Bun, etc.

```sh
curl -fsSL https://moonrepo.dev/install/proto.sh | bash
```

--------------------------------

### Configuring Docker Compose (Containerization)

Source: https://github.com/dogokit/dogokit-akita/blob/main/docs/guides/steps.md

Configuration file for Docker Compose. It defines multi-container Docker applications, including services, networks, and volumes.

```txt
docker-compose.yml
```

--------------------------------

### Seeding Database (Prisma)

Source: https://github.com/dogokit/dogokit-akita/blob/main/docs/guides/steps.md

Executes the Prisma db:seed command using Bun. This command runs the seed script defined in the Prisma schema to populate the database with initial data.

```sh
bun db:seed
```

--------------------------------

### Local Environment Variables (Configuration)

Source: https://github.com/dogokit/dogokit-akita/blob/main/docs/guides/steps.md

File for storing environment variables specific to the local development environment. It overrides values from .env.example.

```txt
.env.local
```

--------------------------------

### Configuring PostCSS (Styling)

Source: https://github.com/dogokit/dogokit-akita/blob/main/docs/guides/steps.md

Configuration file for PostCSS. It defines the plugins used to process CSS files, such as Tailwind CSS and Autoprefixer.

```txt
postcss.config.js
```

--------------------------------

### Configuring TypeScript (Compilation)

Source: https://github.com/dogokit/dogokit-akita/blob/main/docs/guides/steps.md

Configuration file for the TypeScript compiler. It specifies compiler options, root files, and output directories for TypeScript projects.

```txt
tsconfig.json
```

--------------------------------

### Start Docker Compose Containers (Foreground) (sh)

Source: https://github.com/dogokit/dogokit-akita/blob/main/docs/guides/database.md

Command to start the services defined in the docker-compose.yml file in the foreground, displaying logs directly in the terminal.

```sh
docker-compose up
```

--------------------------------

### Production Environment Variables (Configuration)

Source: https://github.com/dogokit/dogokit-akita/blob/main/docs/guides/steps.md

File for storing environment variables specific to the production environment. It should contain sensitive production configuration.

```txt
.env.production
```

--------------------------------

### Project Setup - Clone Repository

Source: https://github.com/dogokit/dogokit-akita/blob/main/docs/guides/start.md

Clones the dogokit-akita project repository using either degit for a clean copy or git clone for the full history.

```sh
bunx degit dogokit/dogokit-akita
```

```sh
git clone --depth 1 https://github.com/dogokit/dogokit-akita.git <your-project-name>
```

--------------------------------

### Configuring Tailwind CSS (Styling)

Source: https://github.com/dogokit/dogokit-akita/blob/main/docs/guides/steps.md

Configuration file for Tailwind CSS. It allows customizing themes, variants, plugins, and other settings for the CSS framework.

```txt
tailwind.config.ts
```

--------------------------------

### Start Docker Compose Containers (Detached) (sh)

Source: https://github.com/dogokit/dogokit-akita/blob/main/docs/guides/database.md

Command to start the services defined in the docker-compose.yml file in detached mode, running them in the background.

```sh
docker-compose up -d
```

--------------------------------

### Configuring ESLint (Linting)

Source: https://github.com/dogokit/dogokit-akita/blob/main/docs/guides/steps.md

Configuration file for the ESLint linter. It defines rules for identifying and reporting on patterns found in code. Note the .cjs extension for CommonJS format.

```txt
.eslintrc.cjs
```

--------------------------------

### Configuring Stylelint (CSS Linting)

Source: https://github.com/dogokit/dogokit-akita/blob/main/docs/guides/steps.md

Configuration file for the Stylelint linter. It is used to lint CSS and related files, ensuring consistent styling.

```txt
.stylelintrc
```

--------------------------------

### Adding shadcn/ui Component (UI Library)

Source: https://github.com/dogokit/dogokit-akita/blob/main/docs/guides/steps.md

Uses the shadcn/ui CLI via pnpm to add a specific component to the project. The CLI fetches and adds the component code based on the components.json configuration.

```sh
pnpx shadcn-ui@latest add component-name
```

--------------------------------

### Ignoring Files (Git)

Source: https://github.com/dogokit/dogokit-akita/blob/main/docs/guides/steps.md

Specifies files and directories that Git should ignore. This prevents sensitive information or build artifacts from being committed to the repository.

```txt
.gitignore
```

--------------------------------

### Configuring commitlint (Git Commits)

Source: https://github.com/dogokit/dogokit-akita/blob/main/docs/guides/steps.md

Configuration file for commitlint. It is used to lint Git commit messages, ensuring they follow a specified format.

```txt
.commitlintrc
```

--------------------------------

### Generating Prisma Client (Prisma)

Source: https://github.com/dogokit/dogokit-akita/blob/main/docs/guides/steps.md

Executes the Prisma db:generate command using Bun. This command generates the Prisma Client based on the schema, providing type-safe database access.

```sh
bun db:generate
```

--------------------------------

### Pushing Database Schema (Prisma)

Source: https://github.com/dogokit/dogokit-akita/blob/main/docs/guides/steps.md

Executes the Prisma db:push command using Bun. This command pushes the current Prisma schema to the database, creating or altering tables.

```sh
bun db:push
```

--------------------------------

### Checking Dependency Updates (Bun)

Source: https://github.com/dogokit/dogokit-akita/blob/main/docs/guides/steps.md

Uses the taze tool via Bun to check for available updates for project dependencies. This helps keep dependencies current.

```sh
bun taze
```

--------------------------------

### Database - Seed Data

Source: https://github.com/dogokit/dogokit-akita/blob/main/docs/guides/start.md

Runs the database seeding script to populate the database with initial data, typically used during development.

```sh
bun db:seed
```

--------------------------------

### Code Quality - Fix Code

Source: https://github.com/dogokit/dogokit-akita/blob/main/docs/guides/start.md

Automatically formats code and fixes linting issues using prettier, eslint, and stylelint.

```sh
bun fix
# prettier eslint stylelint
```

--------------------------------

### Configure Database Environment Variables (sh)

Source: https://github.com/dogokit/dogokit-akita/blob/main/docs/guides/database.md

Example of environment variables to set in a .env file for configuring the PostgreSQL database connection and credentials for Docker Compose.

```sh
POSTGRES_ROOT_PASSWORD=the_root_password
POSTGRES_USER=the_user
POSTGRES_PASSWORD=the_password
POSTGRES_DATABASE=bandungdev
POSTGRES_HOST_PORT=5432
POSTGRES_CONTAINER_PORT=5432
```

--------------------------------

### Resetting Database (Prisma)

Source: https://github.com/dogokit/dogokit-akita/blob/main/docs/guides/steps.md

Executes the Prisma db:reset command using Bun. This command drops the database, creates a new one, and applies the schema and seeds. Use with caution as it deletes all data.

```sh
bun db:reset
```

--------------------------------

### Database - Push Schema

Source: https://github.com/dogokit/dogokit-akita/blob/main/docs/guides/start.md

Pushes the Drizzle ORM schema directly to the database. This is used in development instead of migrations when targeting databases like PlanetScale.

```sh
bun db:push
# drizzle-kit push
```

--------------------------------

### Seed Initial Database Data (bun) (sh)

Source: https://github.com/dogokit/dogokit-akita/blob/main/docs/guides/database.md

Command using the bun runtime to execute a script that populates the database with initial seed data.

```sh
bun db:seed
```

--------------------------------

### Code Quality - Check Code

Source: https://github.com/dogokit/dogokit-akita/blob/main/docs/guides/start.md

Runs various checks including environment type checking, formatting (prettier), linting (eslint, stylelint) to ensure code quality.

```sh
bun check
# env typecheck prettier eslint stylelint
```

--------------------------------

### Basic Hono Application - TypeScript

Source: https://github.com/dogokit/dogokit-akita/blob/main/docs/hono.md

This snippet demonstrates how to initialize a Hono application, define a basic GET route for the root path ('/'), and return a JSON response. It requires the 'hono' package.

```TypeScript
import { Hono } from "hono";
const app = new Hono();

app.get("/", (c) => c.json({ message: "Hello!" }));

export default app;
```

--------------------------------

### Push Database Schema (bun) (sh)

Source: https://github.com/dogokit/dogokit-akita/blob/main/docs/guides/database.md

Command using the bun runtime to execute a script that applies the database schema migrations to the running database container.

```sh
bun db:push
```

--------------------------------

### Run Sentry Remix Wizard (Shell)

Source: https://github.com/dogokit/dogokit-akita/blob/main/docs/sentry.md

Execute the Sentry wizard using pnpx to automatically configure Sentry for a Remix project. This command initiates an interactive setup process.

```sh
pnpx @sentry/wizard@latest -i remix
```

--------------------------------

### Generating and Running a New oclif CLI Project (Shell)

Source: https://github.com/dogokit/dogokit-akita/blob/main/docs/oclif.md

This snippet demonstrates the basic steps to create a new oclif CLI project using npx, navigate into the project directory, and execute the default 'hello world' command provided by the generated project.

```sh
$ npx oclif generate mynewcli
? npm package name (mynewcli): mynewcli

$ cd mynewcli

$ ./bin/run.js hello world
hello world! (./src/commands/hello/world.ts)
```

--------------------------------

### Upgrading Dependencies with Bun and Taze (Shell)

Source: https://github.com/dogokit/dogokit-akita/blob/main/docs/guides/upgrade.md

This snippet shows commands for upgrading project dependencies. It includes the `bun upgrade` command for general upgrades and commented-out commands using `taze` for checking and upgrading minor/major versions.

```sh
bun upgrade
# taze -w && taze major -w
```

--------------------------------

### Project Directory Structure

Source: https://github.com/dogokit/dogokit-akita/blob/main/docs/tips/code-editor-rules.md

Defines the standard directory layout for the Dogokit Akita project, separating server, extension, and shared code.

```text
server/
├── src/
    ├── components/     # Shared React components
    ├── hooks/          # Custom React hooks
    ├── utils/          # Helper functions
    ├── types/          # TypeScript types
    └── lib/            # Shared libraries
extension/
├── src/
    ├── background/     # Service worker scripts
    ├── content/        # Content scripts
    ├── popup/          # Extension popup UI
    ├── options/        # Extension options page
    ├── components/     # Shared React components
    ├── hooks/          # Custom React hooks
    ├── utils/          # Helper functions
    ├── lib/            # Shared libraries
    ├── types/          # TypeScript types
    └── storage/        # Chrome storage utilities
shared/
├── src/
    ├── types/          # TypeScript types, only used for shared types between server and extension
    └── utils/          # Helper functions, only used for shared functions between server and extension
```

--------------------------------

### Add Radix UI Icons using Sly CLI (sh)

Source: https://github.com/dogokit/dogokit-akita/blob/main/docs/sly-cli.md

This command uses bunx to execute the Sly CLI tool, adding specific icons (camera and card-stack) from the @radix-ui/icons package directly into the specified directory './icons' within the codebase. The '--yes' flag automatically confirms the action.

```sh
bunx @sly-cli/sly add @radix-ui/icons camera card-stack --yes --directory ./icons
```

--------------------------------

### Sentry Remix Wizard Output (Shell)

Source: https://github.com/dogokit/dogokit-akita/blob/main/docs/sentry.md

This block displays the detailed output and interactive steps of the Sentry wizard during the configuration process for a Remix application. It shows the files modified and actions performed.

```sh
Running Sentry Wizard...
version: 3.X.Y | sentry-cli version: 1.X.Y
Sentry Wizard will help you to configure your project
Thank you for using Sentry :)
Skipping connection to Sentry due files already patched

┌  Sentry Remix Wizard
◇  ──────────────────────────────────────────────────────────────────────────────╮
│  The Sentry Remix Wizard will help you set up Sentry for your application.                        │
│  Thank you for using Sentry :)                                                                    │
│  Version: 3.X.Y                                                                                  │
│  This wizard sends telemetry data and crash reports to Sentry.
│  This helps us improve the Wizard.
│  Turn this off at any time by running sentry-wizard --disable-telemetry.
├────────────────────────────────────────────────────────────────────────────────╯
◇  Are you using Sentry SaaS or self-hosted Sentry?
│  Sentry SaaS (sentry.io)
◇  Do you already have a Sentry account?
│  Yes
●  If the browser window didn't open automatically,****
│  please open the following link to log into Sentry:
│  https://sentry.io/account/settings/wizard/token
◇  Login complete.
◇  Select your Sentry project.
│  organization-name/javascript-remix
◇  Installed @sentry/remix with PNPM.
◆  Added auth token to .sentryclirc for you to test uploading source maps locally.
◆  Created .sentryclirc.
◆  Added .sentryclirc to .gitignore.
◆  Successfully updated build script in package.json to generate and upload sourcemaps.
◆  Successfully instrumented root route root.tsx.
●  Found entry files entry.client.tsx and entry.server.tsx.
◆  Successfully initialized Sentry on client entry point entry.client.tsx
▲  Could not find function handleError in entry.server.tsx. Creating one for you.
◆  Instrumented handleError in entry.server.tsx
◆  Successfully initialized Sentry on server entry point entry.server.tsx.
└
Sentry has been successfully configured for your Remix project.
You can now deploy your project to see Sentry in action.
To learn more about how to use Sentry with Remix, visit our documentation:
https://docs.sentry.io/platforms/javascript/guides/remix/
🎉  Successfully set up Sentry for your project 🎉
```

--------------------------------

### Setting GitHub OAuth Environment Variables (Shell)

Source: https://github.com/dogokit/dogokit-akita/blob/main/docs/guides/oauth.md

Sets the GITHUB_CLIENT_ID and GITHUB_CLIENT_SECRET environment variables. These are required for configuring GitHub OAuth authentication in your application.

```sh
GITHUB_CLIENT_ID="replace_this"
GITHUB_CLIENT_SECRET="replace_this"
```

--------------------------------

### Reveal Default Entry Files - React Router CLI - Shell

Source: https://github.com/dogokit/dogokit-akita/blob/main/docs/react-router.md

Use this command-line interface command provided by React Router to reveal the default 'entry.client.tsx' or 'entry.server.tsx' files in your application directory if they are not explicitly present. This is useful for customizing the default behavior.

```Shell
react-router reveal
```

--------------------------------

### Setting Google OAuth Environment Variables (Shell)

Source: https://github.com/dogokit/dogokit-akita/blob/main/docs/guides/oauth.md

Sets the GOOGLE_CLIENT_ID and GOOGLE_CLIENT_SECRET environment variables. These are required for configuring Google OAuth authentication in your application.

```sh
GOOGLE_CLIENT_ID="replace_this"
GOOGLE_CLIENT_SECRET="replace_this"
```

--------------------------------

### Remix Login Form with Conform and Zod (TSX)

Source: https://github.com/dogokit/dogokit-akita/blob/main/docs/conform.md

Demonstrates a full Remix login form implementation using Conform for validation and state management. It includes a Remix action function to handle form submission and server-side validation with Zod, and a React component utilizing Conform's `useForm`, `getFormProps`, and `getInputProps` hooks for client-side form handling and validation.

```tsx
import { getFormProps, getInputProps, useForm } from "@conform-to/react";
import { parseWithZod } from "@conform-to/zod";
import type { ActionArgs } from "@remix-run/node";
import { json, redirect } from "@remix-run/node";
import { Form, useActionData } from "@remix-run/react";
import { z } from "zod";

const schema = z.object({
  email: z.string().email(),
  password: z.string(),
  remember: z.boolean().optional(),
});

export async function action({ request }: ActionArgs) {
  const formData = await request.formData();
  const submission = parseWithZod(formData, { schema });

  if (submission.status !== "success") {
    return json(submission.reply());
  }

  // ...
}

export default function Login() {
  // Last submission returned by the server
  const lastResult = useActionData<typeof action>();
  const [form, fields] = useForm({
    // Sync the result of last submission
    lastResult,

    // Reuse the validation logic on the client
    onValidate({ formData }) {
      return parseWithZod(formData, { schema });
    },

    // Validate the form on blur event triggered
    shouldValidate: "onBlur",
    shouldRevalidate: "onInput",
  });

  return (
    <Form method="post" id={form.id} onSubmit={form.onSubmit} noValidate>
      <div>
        <label>Email</label>
        <input
          type="email"
          key={fields.email.key}
          name={fields.email.name}
          defaultValue={fields.email.initialValue}
        />
        <div>{fields.email.errors}</div>
      </div>

      <div>
        <label>Password</label>
        <input
          type="password"
          key={fields.password.key}
          name={fields.password.name}
          defaultValue={fields.password.initialValue}
        />
        <div>{fields.password.errors}</div>
      </div>

      <label>
        <div>
          <span>Remember me</span>
          <input
            type="checkbox"
            key={fields.remember.key}
            name={fields.remember.name}
            defaultChecked={fields.remember.initialValue === "on"}
          />
        </div>
      </label>

      <hr />

      <button type="submit">Login</button>
    </Form>
  );
}
```

--------------------------------

### Chrome Extension Message Payload Interface

Source: https://github.com/dogokit/dogokit-akita/blob/main/docs/tips/code-editor-rules.md

Defines the TypeScript interface used for message passing between different components of the Chrome Extension, specifying the expected structure of message objects.

```typescript
interface MessagePayload {
  type: string;
  data: unknown;
}
```

--------------------------------

### Handling Remix Loader/Action Default Values with Conform (TSX)

Source: https://github.com/dogokit/dogokit-akita/blob/main/docs/conform.md

Provides a tip for preventing form reset issues in Remix when default values come from a loader and the form is reset by an action. It shows how to conditionally pass the `lastResult` to Conform's `useForm` hook only when the Remix navigation or fetcher state is 'idle'.

```tsx
export default function Example() {
  const { defaultValue } = useLoaderData<typeof loader>();
  const lastResult = useActionData<typeof action>();
  const navigation = useNavigation();
  const [form, fields] = useForm({
    // If the default value comes from loader
    defaultValue,

    // Sync the result of last submission only when the state is idle
    lastResult: navigation.state === "idle" ? lastResult : null,

    // or, if you are using a fetcher:
    // lastResult: fetcher.state === 'idle' ? lastResult : null,

    // ...
  });

  // ...
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.