ui Architecture Docs
Home / File/ search-params.ts — ui Source File

search-params.ts — ui Source File

Architecture documentation for search-params.ts, a typescript file in the ui codebase. 4 imports, 0 dependents.

File typescript DesignEngine StateManagement 4 imports 1 functions

Entity Profile

Dependency Diagram

graph LR
  54c2ef56_054f_0673_b176_d53c4fba2340["search-params.ts"]
  a30246d1_8776_d902_eeea_a64635ec3cc6["nuqs"]
  54c2ef56_054f_0673_b176_d53c4fba2340 --> a30246d1_8776_d902_eeea_a64635ec3cc6
  9c2bfb8e_9381_b2b3_5639_f0265d542812["server"]
  54c2ef56_054f_0673_b176_d53c4fba2340 --> 9c2bfb8e_9381_b2b3_5639_f0265d542812
  f14cf7ca_f213_afc2_bc66_ebc0fb7d9834["config"]
  54c2ef56_054f_0673_b176_d53c4fba2340 --> f14cf7ca_f213_afc2_bc66_ebc0fb7d9834
  3d93decf_c957_3d20_9f5e_e6c328cd39c2["fonts"]
  54c2ef56_054f_0673_b176_d53c4fba2340 --> 3d93decf_c957_3d20_9f5e_e6c328cd39c2
  style 54c2ef56_054f_0673_b176_d53c4fba2340 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import { useQueryStates } from "nuqs"
import {
  createLoader,
  createSerializer,
  parseAsBoolean,
  parseAsInteger,
  parseAsString,
  parseAsStringLiteral,
  type inferParserType,
  type Options,
} from "nuqs/server"

import {
  BASE_COLORS,
  BASES,
  DEFAULT_CONFIG,
  iconLibraries,
  MENU_ACCENTS,
  MENU_COLORS,
  RADII,
  STYLES,
  THEMES,
  type BaseColorName,
  type BaseName,
  type FontValue,
  type IconLibraryName,
  type MenuAccentValue,
  type MenuColorValue,
  type RadiusValue,
  type StyleName,
  type ThemeName,
} from "@/registry/config"
import { FONTS } from "@/app/(create)/lib/fonts"

const designSystemSearchParams = {
  base: parseAsStringLiteral<BaseName>(BASES.map((b) => b.name)).withDefault(
    DEFAULT_CONFIG.base
  ),
  item: parseAsString.withDefault("preview").withOptions({ shallow: true }),
  iconLibrary: parseAsStringLiteral<IconLibraryName>(
    Object.values(iconLibraries).map((i) => i.name)
  ).withDefault(DEFAULT_CONFIG.iconLibrary),
  style: parseAsStringLiteral<StyleName>(STYLES.map((s) => s.name)).withDefault(
    DEFAULT_CONFIG.style
  ),
  theme: parseAsStringLiteral<ThemeName>(THEMES.map((t) => t.name)).withDefault(
    DEFAULT_CONFIG.theme
  ),
  font: parseAsStringLiteral<FontValue>(FONTS.map((f) => f.value)).withDefault(
    DEFAULT_CONFIG.font
  ),
  baseColor: parseAsStringLiteral<BaseColorName>(
    BASE_COLORS.map((b) => b.name)
  ).withDefault(DEFAULT_CONFIG.baseColor),
  menuAccent: parseAsStringLiteral<MenuAccentValue>(
    MENU_ACCENTS.map((a) => a.value)
  ).withDefault(DEFAULT_CONFIG.menuAccent),
  menuColor: parseAsStringLiteral<MenuColorValue>(
    MENU_COLORS.map((m) => m.value)
  ).withDefault(DEFAULT_CONFIG.menuColor),
  radius: parseAsStringLiteral<RadiusValue>(
    RADII.map((r) => r.name)
  ).withDefault("default"),
  template: parseAsStringLiteral([
    "next",
    "start",
    "vite",
  ] as const).withDefault("next"),
  rtl: parseAsBoolean.withDefault(false),
  size: parseAsInteger.withDefault(100),
  custom: parseAsBoolean.withDefault(false),
}

export const loadDesignSystemSearchParams = createLoader(
  designSystemSearchParams
)

export const serializeDesignSystemSearchParams = createSerializer(
  designSystemSearchParams
)

export const useDesignSystemSearchParams = (options: Options = {}) =>
  useQueryStates(designSystemSearchParams, {
    shallow: false,
    history: "push",
    ...options,
  })

export type DesignSystemSearchParams = inferParserType<
  typeof designSystemSearchParams
>

Domain

Subdomains

Functions

Types

Dependencies

  • config
  • fonts
  • nuqs
  • server

Source

Frequently Asked Questions

What does search-params.ts do?
search-params.ts is a source file in the ui codebase, written in typescript. It belongs to the DesignEngine domain, StateManagement subdomain.
What functions are defined in search-params.ts?
search-params.ts defines 1 function(s): useDesignSystemSearchParams.
What does search-params.ts depend on?
search-params.ts imports 4 module(s): config, fonts, nuqs, server.
Where is search-params.ts in the architecture?
search-params.ts is located at apps/v4/app/(create)/lib/search-params.ts (domain: DesignEngine, subdomain: StateManagement, directory: apps/v4/app/(create)/lib).

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free