docs: examples fixes

Author: dangreen

examples/rick-and-morty/react-nano_kit/package.json

@@ -18,8 +18,7 @@
     "@nano_kit/react-router": "*",
     "@nano_kit/router": "*",
     "@nano_kit/store": "*",
-    "clsx": "^2.1.1",
-    "rickmortyapi": "^2.3.0"
+    "clsx": "^2.1.1"
   },
   "devDependencies": {
     "@types/react": "^19.2.4",

examples/rick-and-morty/react-nano_kit/src/services/api.ts

@@ -0,0 +1,148 @@
+import type {
+  Character,
+  Episode,
+  Location,
+  ApiResponse,
+  Info,
+  CharacterFilter,
+  LocationFilter,
+  EpisodeFilter
+} from './types'
+
+export * from './types'
+
+const BASE_URL = 'https://rickandmortyapi.com/api'
+
+async function fetchApi<T>(url: string): Promise<ApiResponse<T>> {
+  try {
+    const response = await fetch(url)
+
+    if (!response.ok) {
+      return {
+        status: response.status,
+        statusMessage: response.statusText || String(response.status),
+        data: {} as T
+      }
+    }
+
+    const data = await response.json()
+
+    return {
+      status: response.status,
+      statusMessage: response.statusText || String(response.status),
+      data
+    }
+  } catch (error) {
+    return {
+      status: 500,
+      statusMessage: error instanceof Error ? error.message : 'Unknown error',
+      data: {} as T
+    }
+  }
+}
+
+export async function getCharacters(filters?: CharacterFilter): Promise<ApiResponse<Info<Character[]>>> {
+  const params = new URLSearchParams()
+
+  if (filters?.page) {
+    params.append('page', filters.page.toString())
+  }
+
+  if (filters?.name) {
+    params.append('name', filters.name)
+  }
+
+  if (filters?.status) {
+    params.append('status', filters.status)
+  }
+
+  if (filters?.species) {
+    params.append('species', filters.species)
+  }
+
+  if (filters?.type) {
+    params.append('type', filters.type)
+  }
+
+  if (filters?.gender) {
+    params.append('gender', filters.gender)
+  }
+
+  const queryString = params.toString()
+  const url = `${BASE_URL}/character${queryString ? `?${queryString}` : ''}`
+
+  return await fetchApi<Info<Character[]>>(url)
+}
+
+export async function getCharacter<T extends number | number[]>(
+  id: T
+): Promise<ApiResponse<T extends number ? Character : Character[]>> {
+  const ids = Array.isArray(id) ? id.join(',') : id
+  const url = `${BASE_URL}/character/${ids}`
+
+  return await fetchApi(url)
+}
+
+export async function getLocations(filters?: LocationFilter): Promise<ApiResponse<Info<Location[]>>> {
+  const params = new URLSearchParams()
+
+  if (filters?.page) {
+    params.append('page', filters.page.toString())
+  }
+
+  if (filters?.name) {
+    params.append('name', filters.name)
+  }
+
+  if (filters?.type) {
+    params.append('type', filters.type)
+  }
+
+  if (filters?.dimension) {
+    params.append('dimension', filters.dimension)
+  }
+
+  const queryString = params.toString()
+  const url = `${BASE_URL}/location${queryString ? `?${queryString}` : ''}`
+
+  return await fetchApi<Info<Location[]>>(url)
+}
+
+export async function getLocation<T extends number | number[]>(
+  id: T
+): Promise<ApiResponse<T extends number ? Location : Location[]>> {
+  const ids = Array.isArray(id) ? id.join(',') : id
+  const url = `${BASE_URL}/location/${ids}`
+
+  return await fetchApi(url)
+}
+
+export async function getEpisodes(filters?: EpisodeFilter): Promise<ApiResponse<Info<Episode[]>>> {
+  const params = new URLSearchParams()
+
+  if (filters?.page) {
+    params.append('page', filters.page.toString())
+  }
+
+  if (filters?.name) {
+    params.append('name', filters.name)
+  }
+
+  if (filters?.episode) {
+    params.append('episode', filters.episode)
+  }
+
+  const queryString = params.toString()
+  const url = `${BASE_URL}/episode${queryString ? `?${queryString}` : ''}`
+
+  return await fetchApi<Info<Episode[]>>(url)
+}
+
+export async function getEpisode<T extends number | number[]>(
+  id: T
+): Promise<ApiResponse<T extends number ? Episode : Episode[]>> {
+  const ids = Array.isArray(id) ? id.join(',') : id
+  const url = `${BASE_URL}/episode/${ids}`
+
+  return await fetchApi(url)
+}

examples/rick-and-morty/react-nano_kit/src/services/types.ts

@@ -0,0 +1,73 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+export interface CharacterLocation {
+  name: string
+  url: string
+}
+
+export interface ResourceBase {
+  id: number
+  name: string
+  url: string
+  created: string
+}
+
+export interface CharacterFilter {
+  name?: string
+  type?: string
+  species?: string
+  status?: string
+  gender?: string
+  page?: number
+}
+
+export interface LocationFilter {
+  name?: string
+  type?: string
+  page?: number
+  dimension?: string
+}
+
+export interface EpisodeFilter {
+  name?: string
+  page?: number
+  episode?: string
+}
+
+export interface Character extends ResourceBase {
+  status: 'Dead' | 'Alive' | 'unknown'
+  species: string
+  type: string
+  gender: 'Female' | 'Male' | 'Genderless' | 'unknown'
+  origin: CharacterLocation
+  location: CharacterLocation
+  image: string
+  episode: string[]
+}
+
+export interface Location extends ResourceBase {
+  type: string
+  dimension: string
+  residents: string[]
+}
+
+export interface Episode extends ResourceBase {
+  air_date: string
+  episode: string
+  characters: string[]
+}
+
+export interface ApiResponse<T> {
+  status: number
+  statusMessage: string
+  data: T
+}
+
+export interface Info<T> {
+  info?: {
+    count: number
+    pages: number
+    next: string | null
+    prev: string | null
+  }
+  results?: T
+}

examples/rick-and-morty/react-nano_kit/src/stores/characters.ts

@@ -4,7 +4,7 @@ import {
   type Character,
   getCharacter,
   getCharacters
-} from 'rickmortyapi'
+} from '#src/services/api'
 import { OK_STATUS } from '#src/common/constants'
 import {
   type Page,

examples/rick-and-morty/react-nano_kit/src/stores/episodes.ts

@@ -4,7 +4,7 @@ import {
   type Episode,
   getEpisode,
   getEpisodes
-} from 'rickmortyapi'
+} from '#src/services/api'
 import { OK_STATUS } from '#src/common/constants'
 import {
   type Page,

examples/rick-and-morty/react-nano_kit/src/stores/locations.ts

@@ -3,7 +3,7 @@ import {
   type Location,
   getLocation,
   getLocations
-} from 'rickmortyapi'
+} from '#src/services/api'
 import { OK_STATUS } from '#src/common/constants'
 import {
   type Page,

examples/rick-and-morty/react-nano_kit/src/ui/blocks/CharacterCard/CharacterCard.tsx

@@ -1,6 +1,6 @@
 /* DISCLAIMER! VIBECODED! */
-import { type Character } from 'rickmortyapi'
 import clsx from 'clsx'
+import { type Character } from '#src/services/api'
 import { paths } from '#src/stores/router'
 import styles from './CharacterCard.module.css'
 

examples/rick-and-morty/react-nano_kit/src/ui/blocks/CharactersGrid/CharactersGrid.tsx

@@ -1,5 +1,5 @@
 /* DISCLAIMER! VIBECODED! */
-import { type Character } from 'rickmortyapi'
+import { type Character } from '#src/services/api'
 import { CharacterCard } from '#src/ui/blocks/CharacterCard'
 import styles from './CharactersGrid.module.css'
 

examples/rick-and-morty/react-nano_kit/src/ui/blocks/EpisodeCard/EpisodeCard.tsx

@@ -1,5 +1,5 @@
 /* DISCLAIMER! VIBECODED! */
-import { type Episode } from 'rickmortyapi'
+import { type Episode } from '#src/services/api'
 import { paths } from '#src/stores/router'
 import styles from './EpisodeCard.module.css'
 

examples/rick-and-morty/react-nano_kit/src/ui/blocks/EpisodesGrid/EpisodesGrid.tsx

@@ -1,5 +1,5 @@
 /* DISCLAIMER! VIBECODED! */
-import { type Episode } from 'rickmortyapi'
+import { type Episode } from '#src/services/api'
 import { EpisodeCard } from '#src/ui/blocks/EpisodeCard'
 import styles from './EpisodesGrid.module.css'