@swovohq/fuel 0.2.2-alpha.92 → 0.2.2-alpha.94

package/dist/generators/module/templates/web.js

@@ -0,0 +1,573 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.webTemplates = void 0;
+exports.webTemplates = {
+    apiEndpoints: `import { PaginatedResponse, PaginationOptions } from '@fuel/common-types'
+import { BASE_API_URL } from './constants'
+import { handleResponse } from './utils'
+
+export type { __MODULE_PASCAL__Item } from '@fuel/__MODULE_KEBAB__-types'
+import type { __MODULE_PASCAL__Item } from '@fuel/__MODULE_KEBAB__-types'
+
+export const Get__MODULE_PASCAL__ItemsEndpoint = async (
+  payload: {
+    client: typeof fetch
+    sort?: string
+  } & PaginationOptions
+): Promise<PaginatedResponse<__MODULE_PASCAL__Item>> => {
+  const { client, current, limit, sort, search } = payload
+
+  const queryParams = new URLSearchParams({
+    current: current.toString(),
+    limit: limit.toString(),
+  })
+
+  if (sort) queryParams.append('sort', sort)
+  if (search) queryParams.append('search', search)
+
+  return client(
+    \`\${BASE_API_URL}/v1/__MODULE_KEBAB__?\${queryParams.toString()}\`,
+    {
+      method: 'GET',
+      headers: { 'Content-Type': 'application/json' },
+      credentials: 'include',
+    },
+  ).then((response) => handleResponse(response))
+}
+
+export const Create__MODULE_PASCAL__ItemEndpoint = async (payload: {
+  client: typeof fetch
+  name: string
+}): Promise<__MODULE_PASCAL__Item> => {
+  const { client, ...body } = payload
+  return client(\`\${BASE_API_URL}/v1/__MODULE_KEBAB__\`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    credentials: 'include',
+    body: JSON.stringify(body),
+  }).then((response) => handleResponse(response))
+}
+
+export const Update__MODULE_PASCAL__ItemEndpoint = async (payload: {
+  client: typeof fetch
+  id: string
+  name?: string
+}): Promise<__MODULE_PASCAL__Item> => {
+  const { client, id, ...body } = payload
+  return client(\`\${BASE_API_URL}/v1/__MODULE_KEBAB__/\${id}\`, {
+    method: 'PUT',
+    headers: { 'Content-Type': 'application/json' },
+    credentials: 'include',
+    body: JSON.stringify(body),
+  }).then((response) => handleResponse(response))
+}
+
+export const Delete__MODULE_PASCAL__ItemEndpoint = async (payload: {
+  client: typeof fetch
+  id: string
+}): Promise<void> => {
+  const { client, id } = payload
+  return client(\`\${BASE_API_URL}/v1/__MODULE_KEBAB__/\${id}\`, {
+    method: 'DELETE',
+    headers: { 'Content-Type': 'application/json' },
+    credentials: 'include',
+  }).then((response) => handleResponse(response))
+}
+`,
+    useItemsHook: `import { useQuery } from '@tanstack/react-query'
+import {
+  Get__MODULE_PASCAL__ItemsEndpoint,
+  type __MODULE_PASCAL__Item,
+} from '../../api/__MODULE_KEBAB__'
+import { usePagination } from '../shared/usePagination'
+import type { PaginatedResponse } from '@fuel/common-types'
+
+export const use__MODULE_PASCAL__Items = ({
+  sort,
+  search,
+  page = 1,
+  limit = 10,
+}: {
+  sort?: string
+  search?: string
+  page?: number
+  limit?: number
+}) => {
+  const __MODULE_CAMEL__Pagination = usePagination({ current: page, limit })
+  const { current, limit: perPage } = __MODULE_CAMEL__Pagination
+
+  const query = useQuery({
+    queryKey: [
+      '__MODULE_KEBAB__-items',
+      { sort, search, page: current, limit: perPage },
+    ],
+    queryFn: () =>
+      Get__MODULE_PASCAL__ItemsEndpoint({
+        client: fetch,
+        sort,
+        search,
+        current,
+        limit: perPage,
+      }),
+  })
+
+  return {
+    __MODULE_CAMEL__Pagination,
+    refetch__MODULE_PASCAL__Items: query.refetch,
+    __MODULE_CAMEL__ItemsState: {
+      isLoading: query.isPending,
+      isError: query.isError,
+      error: query.error as Error,
+      data: query.data as PaginatedResponse<__MODULE_PASCAL__Item> | undefined,
+    },
+  }
+}
+`,
+    useCreateHook: `import { useMutation, useQueryClient } from '@tanstack/react-query'
+import {
+  Create__MODULE_PASCAL__ItemEndpoint,
+  type __MODULE_PASCAL__Item,
+} from '../../api/__MODULE_KEBAB__'
+
+export const useCreate__MODULE_PASCAL__Item = () => {
+  const queryClient = useQueryClient()
+
+  const mutation = useMutation({
+    mutationFn: Create__MODULE_PASCAL__ItemEndpoint,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['__MODULE_KEBAB__-items'] })
+    },
+  })
+
+  return {
+    create__MODULE_PASCAL__Item: (name: string): Promise<__MODULE_PASCAL__Item> =>
+      mutation.mutateAsync({ client: fetch, name }),
+    create__MODULE_PASCAL__ItemState: {
+      isLoading: mutation.isPending,
+      isError: mutation.isError,
+      error: mutation.error as Error,
+    },
+  }
+}
+`,
+    useUpdateHook: `import { useMutation, useQueryClient } from '@tanstack/react-query'
+import {
+  Update__MODULE_PASCAL__ItemEndpoint,
+  type __MODULE_PASCAL__Item,
+} from '../../api/__MODULE_KEBAB__'
+
+export const useUpdate__MODULE_PASCAL__Item = () => {
+  const queryClient = useQueryClient()
+
+  const mutation = useMutation({
+    mutationFn: Update__MODULE_PASCAL__ItemEndpoint,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['__MODULE_KEBAB__-items'] })
+    },
+  })
+
+  return {
+    update__MODULE_PASCAL__Item: (id: string, name: string): Promise<__MODULE_PASCAL__Item> =>
+      mutation.mutateAsync({ client: fetch, id, name }),
+    update__MODULE_PASCAL__ItemState: {
+      isLoading: mutation.isPending,
+      isError: mutation.isError,
+      error: mutation.error as Error,
+    },
+  }
+}
+`,
+    useDeleteHook: `import { useMutation, useQueryClient } from '@tanstack/react-query'
+import { Delete__MODULE_PASCAL__ItemEndpoint } from '../../api/__MODULE_KEBAB__'
+
+export const useDelete__MODULE_PASCAL__Item = () => {
+  const queryClient = useQueryClient()
+
+  const mutation = useMutation({
+    mutationFn: Delete__MODULE_PASCAL__ItemEndpoint,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['__MODULE_KEBAB__-items'] })
+    },
+  })
+
+  return {
+    delete__MODULE_PASCAL__Item: (id: string): Promise<void> =>
+      mutation.mutateAsync({ client: fetch, id }),
+    delete__MODULE_PASCAL__ItemState: {
+      isLoading: mutation.isPending,
+      isError: mutation.isError,
+      error: mutation.error as Error,
+    },
+  }
+}
+`,
+    context: `'use client'
+
+import {
+  type ColumnDef,
+  type Table,
+  getCoreRowModel,
+  useReactTable,
+} from '@tanstack/react-table'
+import { parseAsInteger, parseAsString, useQueryState } from 'nuqs'
+import React, { useContext } from 'react'
+import { use__MODULE_PASCAL__Items } from '@/hooks/__MODULE_KEBAB__/use-__MODULE_KEBAB__-items'
+import { useCreate__MODULE_PASCAL__Item } from '@/hooks/__MODULE_KEBAB__/use-create-__MODULE_KEBAB__-item'
+import { useUpdate__MODULE_PASCAL__Item } from '@/hooks/__MODULE_KEBAB__/use-update-__MODULE_KEBAB__-item'
+import { useDelete__MODULE_PASCAL__Item } from '@/hooks/__MODULE_KEBAB__/use-delete-__MODULE_KEBAB__-item'
+import type { __MODULE_PASCAL__Item } from '@/api/__MODULE_KEBAB__'
+
+export type State = {
+  table: Table<__MODULE_PASCAL__Item>
+  isLoading: boolean
+  isError: boolean
+  error: Error | null
+  totalCount: number | undefined
+  refetch: () => void
+  create__MODULE_PASCAL__Item: (name: string) => Promise<__MODULE_PASCAL__Item>
+  update__MODULE_PASCAL__Item: (id: string, name: string) => Promise<__MODULE_PASCAL__Item>
+  delete__MODULE_PASCAL__Item: (id: string) => Promise<void>
+}
+
+const __MODULE_PASCAL__Context = React.createContext<State | undefined>(undefined)
+
+export const __MODULE_PASCAL__ContextProvider = ({
+  children,
+}: {
+  children: React.ReactNode
+}) => {
+  const [page] = useQueryState('__MODULE_CAMEL___page', parseAsInteger.withDefault(1))
+  const [limit] = useQueryState('__MODULE_CAMEL___limit', parseAsInteger.withDefault(10))
+  const [search] = useQueryState('__MODULE_CAMEL___q', parseAsString.withDefault(''))
+  const [sort] = useQueryState('__MODULE_CAMEL___sort', parseAsString.withDefault(''))
+
+  const { __MODULE_CAMEL__ItemsState, refetch__MODULE_PASCAL__Items } = use__MODULE_PASCAL__Items({
+    sort: sort || undefined,
+    search: search || undefined,
+    page,
+    limit,
+  })
+
+  const { create__MODULE_PASCAL__Item } = useCreate__MODULE_PASCAL__Item()
+  const { update__MODULE_PASCAL__Item } = useUpdate__MODULE_PASCAL__Item()
+  const { delete__MODULE_PASCAL__Item } = useDelete__MODULE_PASCAL__Item()
+
+  const columns: ColumnDef<__MODULE_PASCAL__Item>[] = [
+    {
+      accessorKey: 'name',
+      header: 'Name',
+      cell: ({ row }) => <span>{row.original.name}</span>,
+    },
+    {
+      accessorKey: 'createdAt',
+      header: 'Created',
+      cell: ({ row }) => (
+        <span>{new Date(row.original.createdAt).toLocaleDateString()}</span>
+      ),
+    },
+  ]
+
+  const table = useReactTable({
+    data: __MODULE_CAMEL__ItemsState.data?.data ?? [],
+    columns,
+    pageCount: (__MODULE_CAMEL__ItemsState.data as any)?.totalPages ?? 0,
+    state: {},
+    getCoreRowModel: getCoreRowModel(),
+    manualPagination: true,
+    manualSorting: true,
+  })
+
+  return (
+    <__MODULE_PASCAL__Context.Provider
+      value={{
+        table,
+        isLoading: __MODULE_CAMEL__ItemsState.isLoading,
+        isError: __MODULE_CAMEL__ItemsState.isError,
+        error: __MODULE_CAMEL__ItemsState.error ?? null,
+        totalCount: (__MODULE_CAMEL__ItemsState.data as any)?.totalCount,
+        refetch: refetch__MODULE_PASCAL__Items,
+        create__MODULE_PASCAL__Item,
+        update__MODULE_PASCAL__Item,
+        delete__MODULE_PASCAL__Item,
+      }}
+    >
+      {children}
+    </__MODULE_PASCAL__Context.Provider>
+  )
+}
+
+export const use__MODULE_PASCAL__Context = () => {
+  const ctx = useContext(__MODULE_PASCAL__Context)
+  if (!ctx) {
+    throw new Error(
+      'use__MODULE_PASCAL__Context must be used within __MODULE_PASCAL__ContextProvider',
+    )
+  }
+  return ctx
+}
+`,
+    table: `'use client'
+
+import { flexRender } from '@tanstack/react-table'
+import { use__MODULE_PASCAL__Context } from './__MODULE_KEBAB__-context'
+
+export const __MODULE_PASCAL__Table = () => {
+  const { table, isLoading } = use__MODULE_PASCAL__Context()
+
+  if (isLoading) {
+    return <div className="p-4 text-sm text-muted-foreground">Loading...</div>
+  }
+
+  return (
+    <div className="w-full overflow-auto">
+      <table className="w-full text-sm">
+        <thead>
+          {table.getHeaderGroups().map((headerGroup) => (
+            <tr key={headerGroup.id} className="border-b">
+              {headerGroup.headers.map((header) => (
+                <th
+                  key={header.id}
+                  className="px-4 py-2 text-left font-medium text-muted-foreground"
+                >
+                  {header.isPlaceholder
+                    ? null
+                    : flexRender(
+                        header.column.columnDef.header,
+                        header.getContext(),
+                      )}
+                </th>
+              ))}
+            </tr>
+          ))}
+        </thead>
+        <tbody>
+          {table.getRowModel().rows.length === 0 ? (
+            <tr>
+              <td
+                colSpan={table.getAllColumns().length}
+                className="px-4 py-8 text-center text-muted-foreground"
+              >
+                No items found.
+              </td>
+            </tr>
+          ) : (
+            table.getRowModel().rows.map((row) => (
+              <tr key={row.id} className="border-b hover:bg-muted/50">
+                {row.getVisibleCells().map((cell) => (
+                  <td key={cell.id} className="px-4 py-2">
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                  </td>
+                ))}
+              </tr>
+            ))
+          )}
+        </tbody>
+      </table>
+    </div>
+  )
+}
+`,
+    createDrawer: `'use client'
+
+import { zodResolver } from '@hookform/resolvers/zod'
+import React from 'react'
+import { useForm } from 'react-hook-form'
+import { z } from 'zod'
+import { use__MODULE_PASCAL__Context } from './__MODULE_KEBAB__-context'
+
+const formSchema = z.object({
+  name: z.string().min(1, 'Name is required'),
+})
+
+type FormValues = z.infer<typeof formSchema>
+
+interface Props {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+}
+
+export const Create__MODULE_PASCAL__ItemDrawer = ({ open, onOpenChange }: Props) => {
+  const { create__MODULE_PASCAL__Item, refetch } = use__MODULE_PASCAL__Context()
+
+  const form = useForm<FormValues>({
+    resolver: zodResolver(formSchema),
+    defaultValues: { name: '' },
+  })
+
+  const onSubmit = async (values: FormValues) => {
+    await create__MODULE_PASCAL__Item(values.name)
+    form.reset()
+    onOpenChange(false)
+    refetch()
+  }
+
+  if (!open) return null
+
+  // TODO: Replace with Drawer/Sheet from @fuel/design-system following the
+  // pattern in apps/web/src/components/teams/invitations/invite-member-drawer.tsx
+  return (
+    <div className="fixed inset-0 z-50 flex items-end justify-center sm:items-center">
+      <div className="bg-background rounded-lg border p-6 shadow-lg sm:w-full sm:max-w-md">
+        <h2 className="mb-4 text-lg font-semibold">Create __MODULE_PASCAL__ Item</h2>
+        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+          <div>
+            <label htmlFor="name" className="block text-sm font-medium">
+              Name
+            </label>
+            <input
+              id="name"
+              {...form.register('name')}
+              className="mt-1 block w-full rounded border px-3 py-2 text-sm"
+              placeholder="Enter a name"
+            />
+            {form.formState.errors.name && (
+              <p className="mt-1 text-sm text-destructive">
+                {form.formState.errors.name.message}
+              </p>
+            )}
+          </div>
+          <div className="flex justify-end gap-2">
+            <button
+              type="button"
+              onClick={() => onOpenChange(false)}
+              className="rounded px-4 py-2 text-sm"
+            >
+              Cancel
+            </button>
+            <button
+              type="submit"
+              disabled={form.formState.isSubmitting}
+              className="rounded bg-primary px-4 py-2 text-sm text-primary-foreground"
+            >
+              {form.formState.isSubmitting ? 'Creating...' : 'Create'}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  )
+}
+`,
+    updateDrawer: `'use client'
+
+import { zodResolver } from '@hookform/resolvers/zod'
+import React from 'react'
+import { useForm } from 'react-hook-form'
+import { z } from 'zod'
+import { use__MODULE_PASCAL__Context } from './__MODULE_KEBAB__-context'
+import type { __MODULE_PASCAL__Item } from '@/api/__MODULE_KEBAB__'
+
+const formSchema = z.object({
+  name: z.string().min(1, 'Name is required'),
+})
+
+type FormValues = z.infer<typeof formSchema>
+
+interface Props {
+  item: __MODULE_PASCAL__Item | null
+  open: boolean
+  onOpenChange: (open: boolean) => void
+}
+
+export const Update__MODULE_PASCAL__ItemDrawer = ({ item, open, onOpenChange }: Props) => {
+  const { update__MODULE_PASCAL__Item, refetch } = use__MODULE_PASCAL__Context()
+
+  const form = useForm<FormValues>({
+    resolver: zodResolver(formSchema),
+    values: { name: item?.name ?? '' },
+  })
+
+  const onSubmit = async (values: FormValues) => {
+    if (!item) return
+    await update__MODULE_PASCAL__Item(item.id, values.name)
+    onOpenChange(false)
+    refetch()
+  }
+
+  if (!open || !item) return null
+
+  // TODO: Replace with Drawer/Sheet from @fuel/design-system following the
+  // pattern in apps/web/src/components/teams/invitations/invite-member-drawer.tsx
+  return (
+    <div className="fixed inset-0 z-50 flex items-end justify-center sm:items-center">
+      <div className="bg-background rounded-lg border p-6 shadow-lg sm:w-full sm:max-w-md">
+        <h2 className="mb-4 text-lg font-semibold">Update __MODULE_PASCAL__ Item</h2>
+        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+          <div>
+            <label htmlFor="name" className="block text-sm font-medium">
+              Name
+            </label>
+            <input
+              id="name"
+              {...form.register('name')}
+              className="mt-1 block w-full rounded border px-3 py-2 text-sm"
+              placeholder="Enter a name"
+            />
+            {form.formState.errors.name && (
+              <p className="mt-1 text-sm text-destructive">
+                {form.formState.errors.name.message}
+              </p>
+            )}
+          </div>
+          <div className="flex justify-end gap-2">
+            <button
+              type="button"
+              onClick={() => onOpenChange(false)}
+              className="rounded px-4 py-2 text-sm"
+            >
+              Cancel
+            </button>
+            <button
+              type="submit"
+              disabled={form.formState.isSubmitting}
+              className="rounded bg-primary px-4 py-2 text-sm text-primary-foreground"
+            >
+              {form.formState.isSubmitting ? 'Saving...' : 'Save'}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  )
+}
+`,
+    index: `export {
+  __MODULE_PASCAL__ContextProvider,
+  use__MODULE_PASCAL__Context,
+  type State as __MODULE_PASCAL__ContextState,
+} from './__MODULE_KEBAB__-context'
+export { __MODULE_PASCAL__Table } from './__MODULE_KEBAB__-table'
+export { Create__MODULE_PASCAL__ItemDrawer } from './create-__MODULE_KEBAB__-item-drawer'
+export { Update__MODULE_PASCAL__ItemDrawer } from './update-__MODULE_KEBAB__-item-drawer'
+`,
+    page: `import { __MODULE_PASCAL__ClientLayout } from './__MODULE_KEBAB__-client-layout'
+
+export default function __MODULE_PASCAL__Page() {
+  return <__MODULE_PASCAL__ClientLayout />
+}
+`,
+    layout: `export default function __MODULE_PASCAL__Layout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return <>{children}</>
+}
+`,
+    clientLayout: `'use client'
+
+import { __MODULE_PASCAL__ContextProvider } from '@/components/__MODULE_KEBAB__'
+import { __MODULE_PASCAL__Table } from '@/components/__MODULE_KEBAB__/__MODULE_KEBAB__-table'
+
+export const __MODULE_PASCAL__ClientLayout = () => {
+  return (
+    <__MODULE_PASCAL__ContextProvider>
+      <div className="bg-background flex h-full w-full flex-col p-6">
+        <__MODULE_PASCAL__Table />
+      </div>
+    </__MODULE_PASCAL__ContextProvider>
+  )
+}
+`,
+};
+//# sourceMappingURL=web.js.map

package/dist/generators/module/templates/web.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"web.js","sourceRoot":"","sources":["../../../../src/generators/module/templates/web.ts"],"names":[],"mappings":";;;AAAa,QAAA,YAAY,GAAG;IAC1B,YAAY,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuEf;IAEC,YAAY,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgDf;IAEC,aAAa,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;CA0BhB;IAEC,aAAa,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;CA0BhB;IAEC,aAAa,EAAE;;;;;;;;;;;;;;;;;;;;;;;CAuBhB;IAEC,OAAO,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwGV;IAEC,KAAK,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4DR;IAEC,YAAY,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgFf;IAEC,YAAY,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkFf;IAEC,KAAK,EAAE;;;;;;;;CAQR;IAEC,IAAI,EAAE;;;;;CAKP;IAEC,MAAM,EAAE;;;;;;;CAOT;IAEC,YAAY,EAAE;;;;;;;;;;;;;;CAcf;CACA,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swovohq/fuel",
-  "version": "0.2.2-alpha.92",
+  "version": "0.2.2-alpha.94",
   "bin": {
     "fuel": "dist/bin/fuel.js"
   },