@shipfox/client-projects 12.0.2 → 13.0.0

package/dist/pages/project-settings-page.js

@@ -0,0 +1,225 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { slugSchema } from '@shipfox/api-common-dto';
+import { createProjectBodySchema } from '@shipfox/api-projects-dto';
+import { ApiError } from '@shipfox/client-api';
+import { useActiveWorkspace } from '@shipfox/client-auth';
+import { displayNameFieldError, QueryLoadError, SlugChangeWarning, SlugField } from '@shipfox/client-ui';
+import { Button } from '@shipfox/react-ui/button';
+import { Callout } from '@shipfox/react-ui/callout';
+import { EmptyState } from '@shipfox/react-ui/empty-state';
+import { FormField, FormFieldInput, fieldError } from '@shipfox/react-ui/form-field';
+import { FullPageLoader } from '@shipfox/react-ui/loader';
+import { toast } from '@shipfox/react-ui/toast';
+import { Header, Text } from '@shipfox/react-ui/typography';
+import { useForm } from '@tanstack/react-form';
+import { useNavigate } from '@tanstack/react-router';
+import { useState } from 'react';
+import { useMaybeActiveProjectQuery } from '#chrome.js';
+import { useProjectSlugAvailability, useUpdateProjectMutation } from '#hooks/api/projects.js';
+import { projectSettingsErrorToFormError } from './project-settings-form-errors.js';
+function isSlugValid(value) {
+    return slugSchema.safeParse(value).success;
+}
+export function ProjectSettingsPage() {
+    const projectQuery = useMaybeActiveProjectQuery();
+    if (projectQuery.isPending) return /*#__PURE__*/ _jsx(FullPageLoader, {});
+    if (projectQuery.isError && projectQuery.data === undefined) {
+        if (projectQuery.error instanceof ApiError && projectQuery.error.status === 404) {
+            return /*#__PURE__*/ _jsx(EmptyState, {
+                icon: "errorWarningLine",
+                tone: "error",
+                title: "Project not found",
+                description: "This project doesn't exist, or you don't have access to it."
+            });
+        }
+        return /*#__PURE__*/ _jsx(QueryLoadError, {
+            query: projectQuery,
+            subject: "project"
+        });
+    }
+    const project = projectQuery.data;
+    if (!project) {
+        return /*#__PURE__*/ _jsx(EmptyState, {
+            icon: "errorWarningLine",
+            tone: "error",
+            title: "Project not found",
+            description: "This project doesn't exist, or you don't have access to it."
+        });
+    }
+    return /*#__PURE__*/ _jsx(ProjectSettingsForm, {
+        project: project
+    }, `${project.id}:${project.name}:${project.slug}`);
+}
+function ProjectSettingsForm({ project }) {
+    const workspace = useActiveWorkspace();
+    const navigate = useNavigate();
+    const updateProject = useUpdateProjectMutation();
+    const [warningOpen, setWarningOpen] = useState(false);
+    const [pendingValues, setPendingValues] = useState();
+    const [formError, setFormError] = useState();
+    const checkProjectSlugAvailability = useProjectSlugAvailability(workspace.id, project.id);
+    const form = useForm({
+        defaultValues: {
+            name: project.name,
+            slug: project.slug
+        },
+        onSubmit: async ({ value })=>{
+            if (value.slug !== project.slug) {
+                setPendingValues(value);
+                setWarningOpen(true);
+                return;
+            }
+            await save(value);
+        }
+    });
+    async function save(values) {
+        setFormError(undefined);
+        const nameChanged = values.name !== project.name;
+        const slugChanged = values.slug !== project.slug;
+        if (!nameChanged && !slugChanged) return;
+        const command = {
+            projectId: project.id,
+            ...nameChanged ? {
+                name: values.name
+            } : {},
+            ...slugChanged ? {
+                slug: values.slug
+            } : {}
+        };
+        try {
+            const updated = await updateProject.mutateAsync(command);
+            setPendingValues(undefined);
+            setWarningOpen(false);
+            toast.success('Project settings saved.');
+            await navigate({
+                to: '/w/$workspaceSlug/p/$projectSlug/settings/general',
+                params: {
+                    workspaceSlug: workspace.slug,
+                    projectSlug: updated.slug
+                }
+            });
+        } catch (error) {
+            setPendingValues(undefined);
+            setWarningOpen(false);
+            const mapped = projectSettingsErrorToFormError(error);
+            if (mapped.kind === 'field') {
+                form.setFieldMeta(mapped.field, (previous)=>({
+                        ...previous,
+                        errorMap: {
+                            ...previous.errorMap,
+                            onServer: mapped.message
+                        }
+                    }));
+            } else {
+                setFormError(mapped.message);
+            }
+        }
+    }
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsxs("div", {
+                className: "flex min-w-0 flex-col gap-24",
+                children: [
+                    /*#__PURE__*/ _jsxs("header", {
+                        className: "flex flex-col gap-6",
+                        children: [
+                            /*#__PURE__*/ _jsx(Header, {
+                                variant: "h1",
+                                children: "General"
+                            }),
+                            /*#__PURE__*/ _jsx(Text, {
+                                size: "sm",
+                                className: "text-foreground-neutral-muted",
+                                children: "Update the project name and the slug used in its URLs."
+                            })
+                        ]
+                    }),
+                    formError ? /*#__PURE__*/ _jsx(Callout, {
+                        role: "alert",
+                        type: "error",
+                        children: formError
+                    }) : null,
+                    /*#__PURE__*/ _jsxs("form", {
+                        className: "flex max-w-[560px] flex-col gap-16",
+                        noValidate: true,
+                        onSubmit: (event)=>{
+                            event.preventDefault();
+                            event.stopPropagation();
+                            void form.handleSubmit();
+                        },
+                        children: [
+                            /*#__PURE__*/ _jsx(form.Field, {
+                                name: "name",
+                                validators: {
+                                    onBlur: ({ value })=>displayNameFieldError(value, 'Project name', createProjectBodySchema.shape.name),
+                                    onSubmit: ({ value })=>displayNameFieldError(value, 'Project name', createProjectBodySchema.shape.name)
+                                },
+                                children: (field)=>/*#__PURE__*/ _jsx(FormField, {
+                                        label: "Project name",
+                                        id: "project-settings-name",
+                                        error: fieldError(field),
+                                        children: /*#__PURE__*/ _jsx(FormFieldInput, {
+                                            name: "name",
+                                            type: "text",
+                                            value: field.state.value,
+                                            onChange: (event)=>field.handleChange(event.target.value),
+                                            onBlur: field.handleBlur
+                                        })
+                                    })
+                            }),
+                            /*#__PURE__*/ _jsx(form.Field, {
+                                name: "slug",
+                                validators: {
+                                    onBlur: createProjectBodySchema.shape.slug,
+                                    onSubmit: createProjectBodySchema.shape.slug
+                                },
+                                children: (field)=>/*#__PURE__*/ _jsx(SlugField, {
+                                        id: "project-settings-slug",
+                                        label: "Project slug",
+                                        name: "slug",
+                                        value: field.state.value,
+                                        onChange: (value)=>field.handleChange(value),
+                                        onBlur: field.handleBlur,
+                                        error: fieldError(field),
+                                        description: /*#__PURE__*/ _jsxs("span", {
+                                            className: "break-all font-code",
+                                            children: [
+                                                "/w/",
+                                                workspace.slug,
+                                                "/p/",
+                                                field.state.value
+                                            ]
+                                        }),
+                                        placeholder: "platform",
+                                        className: "font-code",
+                                        currentSlug: project.slug,
+                                        checkEnabled: true,
+                                        debounceMs: 0,
+                                        isValid: isSlugValid,
+                                        checkAvailability: checkProjectSlugAvailability
+                                    })
+                            }),
+                            /*#__PURE__*/ _jsx(Button, {
+                                type: "submit",
+                                isLoading: updateProject.isPending,
+                                className: "self-start",
+                                children: "Save changes"
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx(SlugChangeWarning, {
+                open: warningOpen,
+                onOpenChange: setWarningOpen,
+                entityLabel: "project",
+                isLoading: updateProject.isPending,
+                onConfirm: ()=>{
+                    if (pendingValues) void save(pendingValues);
+                }
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=project-settings-page.js.map

package/dist/pages/project-settings-page.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/pages/project-settings-page.tsx"],"sourcesContent":["import {slugSchema} from '@shipfox/api-common-dto';\nimport {createProjectBodySchema} from '@shipfox/api-projects-dto';\nimport {ApiError} from '@shipfox/client-api';\nimport {useActiveWorkspace} from '@shipfox/client-auth';\nimport {\n  displayNameFieldError,\n  QueryLoadError,\n  SlugChangeWarning,\n  SlugField,\n} from '@shipfox/client-ui';\nimport {Button} from '@shipfox/react-ui/button';\nimport {Callout} from '@shipfox/react-ui/callout';\nimport {EmptyState} from '@shipfox/react-ui/empty-state';\nimport {FormField, FormFieldInput, fieldError} from '@shipfox/react-ui/form-field';\nimport {FullPageLoader} from '@shipfox/react-ui/loader';\nimport {toast} from '@shipfox/react-ui/toast';\nimport {Header, Text} from '@shipfox/react-ui/typography';\nimport {useForm} from '@tanstack/react-form';\nimport {useNavigate} from '@tanstack/react-router';\nimport {useState} from 'react';\nimport {useMaybeActiveProjectQuery} from '#chrome.js';\nimport type {Project} from '#core/project.js';\nimport {useProjectSlugAvailability, useUpdateProjectMutation} from '#hooks/api/projects.js';\nimport {projectSettingsErrorToFormError} from './project-settings-form-errors.js';\n\ninterface ProjectSettingsValues {\n  name: string;\n  slug: string;\n}\n\nfunction isSlugValid(value: string): boolean {\n  return slugSchema.safeParse(value).success;\n}\n\nexport function ProjectSettingsPage() {\n  const projectQuery = useMaybeActiveProjectQuery();\n  if (projectQuery.isPending) return <FullPageLoader />;\n  if (projectQuery.isError && projectQuery.data === undefined) {\n    if (projectQuery.error instanceof ApiError && projectQuery.error.status === 404) {\n      return (\n        <EmptyState\n          icon=\"errorWarningLine\"\n          tone=\"error\"\n          title=\"Project not found\"\n          description=\"This project doesn't exist, or you don't have access to it.\"\n        />\n      );\n    }\n    return <QueryLoadError query={projectQuery} subject=\"project\" />;\n  }\n  const project = projectQuery.data;\n  if (!project) {\n    return (\n      <EmptyState\n        icon=\"errorWarningLine\"\n        tone=\"error\"\n        title=\"Project not found\"\n        description=\"This project doesn't exist, or you don't have access to it.\"\n      />\n    );\n  }\n  return (\n    <ProjectSettingsForm key={`${project.id}:${project.name}:${project.slug}`} project={project} />\n  );\n}\n\nfunction ProjectSettingsForm({project}: {project: Project}) {\n  const workspace = useActiveWorkspace();\n  const navigate = useNavigate();\n  const updateProject = useUpdateProjectMutation();\n  const [warningOpen, setWarningOpen] = useState(false);\n  const [pendingValues, setPendingValues] = useState<ProjectSettingsValues>();\n  const [formError, setFormError] = useState<string>();\n\n  const checkProjectSlugAvailability = useProjectSlugAvailability(workspace.id, project.id);\n\n  const form = useForm({\n    defaultValues: {name: project.name, slug: project.slug},\n    onSubmit: async ({value}) => {\n      if (value.slug !== project.slug) {\n        setPendingValues(value);\n        setWarningOpen(true);\n        return;\n      }\n      await save(value);\n    },\n  });\n\n  async function save(values: ProjectSettingsValues) {\n    setFormError(undefined);\n    const nameChanged = values.name !== project.name;\n    const slugChanged = values.slug !== project.slug;\n    if (!nameChanged && !slugChanged) return;\n    const command = {\n      projectId: project.id,\n      ...(nameChanged ? {name: values.name} : {}),\n      ...(slugChanged ? {slug: values.slug} : {}),\n    };\n\n    try {\n      const updated = await updateProject.mutateAsync(command);\n      setPendingValues(undefined);\n      setWarningOpen(false);\n      toast.success('Project settings saved.');\n      await navigate({\n        to: '/w/$workspaceSlug/p/$projectSlug/settings/general',\n        params: {workspaceSlug: workspace.slug, projectSlug: updated.slug},\n      });\n    } catch (error) {\n      setPendingValues(undefined);\n      setWarningOpen(false);\n      const mapped = projectSettingsErrorToFormError(error);\n      if (mapped.kind === 'field') {\n        form.setFieldMeta(mapped.field, (previous) => ({\n          ...previous,\n          errorMap: {...previous.errorMap, onServer: mapped.message},\n        }));\n      } else {\n        setFormError(mapped.message);\n      }\n    }\n  }\n\n  return (\n    <>\n      <div className=\"flex min-w-0 flex-col gap-24\">\n        <header className=\"flex flex-col gap-6\">\n          <Header variant=\"h1\">General</Header>\n          <Text size=\"sm\" className=\"text-foreground-neutral-muted\">\n            Update the project name and the slug used in its URLs.\n          </Text>\n        </header>\n\n        {formError ? (\n          <Callout role=\"alert\" type=\"error\">\n            {formError}\n          </Callout>\n        ) : null}\n\n        <form\n          className=\"flex max-w-[560px] flex-col gap-16\"\n          noValidate\n          onSubmit={(event) => {\n            event.preventDefault();\n            event.stopPropagation();\n            void form.handleSubmit();\n          }}\n        >\n          <form.Field\n            name=\"name\"\n            validators={{\n              onBlur: ({value}) =>\n                displayNameFieldError(value, 'Project name', createProjectBodySchema.shape.name),\n              onSubmit: ({value}) =>\n                displayNameFieldError(value, 'Project name', createProjectBodySchema.shape.name),\n            }}\n          >\n            {(field) => (\n              <FormField label=\"Project name\" id=\"project-settings-name\" error={fieldError(field)}>\n                <FormFieldInput\n                  name=\"name\"\n                  type=\"text\"\n                  value={field.state.value}\n                  onChange={(event) => field.handleChange(event.target.value)}\n                  onBlur={field.handleBlur}\n                />\n              </FormField>\n            )}\n          </form.Field>\n\n          <form.Field\n            name=\"slug\"\n            validators={{\n              onBlur: createProjectBodySchema.shape.slug,\n              onSubmit: createProjectBodySchema.shape.slug,\n            }}\n          >\n            {(field) => (\n              <SlugField\n                id=\"project-settings-slug\"\n                label=\"Project slug\"\n                name=\"slug\"\n                value={field.state.value}\n                onChange={(value) => field.handleChange(value)}\n                onBlur={field.handleBlur}\n                error={fieldError(field)}\n                description={\n                  <span className=\"break-all font-code\">\n                    /w/{workspace.slug}/p/{field.state.value}\n                  </span>\n                }\n                placeholder=\"platform\"\n                className=\"font-code\"\n                currentSlug={project.slug}\n                checkEnabled\n                debounceMs={0}\n                isValid={isSlugValid}\n                checkAvailability={checkProjectSlugAvailability}\n              />\n            )}\n          </form.Field>\n\n          <Button type=\"submit\" isLoading={updateProject.isPending} className=\"self-start\">\n            Save changes\n          </Button>\n        </form>\n      </div>\n\n      <SlugChangeWarning\n        open={warningOpen}\n        onOpenChange={setWarningOpen}\n        entityLabel=\"project\"\n        isLoading={updateProject.isPending}\n        onConfirm={() => {\n          if (pendingValues) void save(pendingValues);\n        }}\n      />\n    </>\n  );\n}\n"],"names":["slugSchema","createProjectBodySchema","ApiError","useActiveWorkspace","displayNameFieldError","QueryLoadError","SlugChangeWarning","SlugField","Button","Callout","EmptyState","FormField","FormFieldInput","fieldError","FullPageLoader","toast","Header","Text","useForm","useNavigate","useState","useMaybeActiveProjectQuery","useProjectSlugAvailability","useUpdateProjectMutation","projectSettingsErrorToFormError","isSlugValid","value","safeParse","success","ProjectSettingsPage","projectQuery","isPending","isError","data","undefined","error","status","icon","tone","title","description","query","subject","project","ProjectSettingsForm","id","name","slug","workspace","navigate","updateProject","warningOpen","setWarningOpen","pendingValues","setPendingValues","formError","setFormError","checkProjectSlugAvailability","form","defaultValues","onSubmit","save","values","nameChanged","slugChanged","command","projectId","updated","mutateAsync","to","params","workspaceSlug","projectSlug","mapped","kind","setFieldMeta","field","previous","errorMap","onServer","message","div","className","header","variant","size","role","type","noValidate","event","preventDefault","stopPropagation","handleSubmit","Field","validators","onBlur","shape","label","state","onChange","handleChange","target","handleBlur","span","placeholder","currentSlug","checkEnabled","debounceMs","isValid","checkAvailability","isLoading","open","onOpenChange","entityLabel","onConfirm"],"mappings":"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"}

package/dist/pages/project-settings-page.stories.d.ts

@@ -0,0 +1,23 @@
+import type { StoryObj } from '@storybook/react';
+type Scenario = 'default' | 'long-values' | 'taken-slug';
+interface ProjectSettingsPageStoryProps {
+    scenario: Scenario;
+}
+declare function ProjectSettingsPageStory({ scenario }: ProjectSettingsPageStoryProps): import("react").JSX.Element;
+declare const meta: {
+    title: string;
+    component: typeof ProjectSettingsPageStory;
+    parameters: {
+        layout: string;
+    };
+    args: {
+        scenario: "default";
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Playground: Story;
+export declare const LongValues: Story;
+export declare const TakenSlug: Story;
+export declare const SlugChangeWarning: Story;
+//# sourceMappingURL=project-settings-page.stories.d.ts.map

package/dist/pages/project-settings-page.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"project-settings-page.stories.d.ts","sourceRoot":"","sources":["../../src/pages/project-settings-page.stories.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAO,QAAQ,EAAC,MAAM,kBAAkB,CAAC;AAmBrD,KAAK,QAAQ,GAAG,SAAS,GAAG,aAAa,GAAG,YAAY,CAAC;AAezD,UAAU,6BAA6B;IACrC,QAAQ,EAAE,QAAQ,CAAC;CACpB;AAcD,iBAAS,wBAAwB,CAAC,EAAC,QAAQ,EAAC,EAAE,6BAA6B,+BA6B1E;AAED,QAAA,MAAM,IAAI;;;;;;;;;CAKuC,CAAC;AAElD,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,UAAU,EAAE,KAAU,CAAC;AAEpC,eAAO,MAAM,UAAU,EAAE,KAExB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAUvB,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAgB/B,CAAC"}

package/dist/pages/project-settings-page.stories.js

@@ -0,0 +1,206 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { configureApiClient } from '@shipfox/client-api';
+import { authStateAtom } from '@shipfox/client-auth';
+import { Toaster } from '@shipfox/react-ui/toast';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { createMemoryHistory, createRootRoute, createRoute, createRouter, Outlet, RouterProvider } from '@tanstack/react-router';
+import { createStore, Provider as JotaiProvider } from 'jotai';
+import { useMemo } from 'react';
+import { expect, screen, userEvent, within } from 'storybook/test';
+import { ProjectSettingsPage } from './project-settings-page.js';
+const WORKSPACE_ID = '11111111-1111-4111-8111-111111111111';
+const PROJECT_ID = '99999999-9999-4999-8999-999999999999';
+const OTHER_PROJECT_ID = '88888888-8888-4888-8888-888888888888';
+const authState = {
+    status: 'authenticated',
+    token: 'token',
+    user: {
+        id: '22222222-2222-4222-8222-222222222222',
+        email: 'platform@example.com',
+        name: 'Platform Engineer',
+        emailVerifiedAt: '2026-01-01T00:00:00.000Z'
+    },
+    workspaces: [
+        {
+            id: WORKSPACE_ID,
+            name: 'Acme',
+            slug: 'acme',
+            membershipId: 'membership-1'
+        }
+    ]
+};
+function ProjectSettingsPageStory({ scenario }) {
+    configureApiClient({
+        baseUrl: 'https://api.example.test',
+        fetchImpl: fetchForScenario(scenario)
+    });
+    const queryClient = useMemo(()=>new QueryClient({
+            defaultOptions: {
+                queries: {
+                    retry: false
+                }
+            }
+        }), []);
+    const store = useMemo(()=>{
+        const nextStore = createStore();
+        nextStore.set(authStateAtom, authState);
+        return nextStore;
+    }, []);
+    const router = useMemo(()=>createStoryRouter(scenario), [
+        scenario
+    ]);
+    return /*#__PURE__*/ _jsx(QueryClientProvider, {
+        client: queryClient,
+        children: /*#__PURE__*/ _jsxs(JotaiProvider, {
+            store: store,
+            children: [
+                /*#__PURE__*/ _jsx("div", {
+                    className: "min-h-screen bg-background-neutral-background px-24 py-32",
+                    children: /*#__PURE__*/ _jsx("div", {
+                        className: "mx-auto w-full max-w-[1120px]",
+                        children: /*#__PURE__*/ _jsx(RouterProvider, {
+                            router: router
+                        })
+                    })
+                }),
+                /*#__PURE__*/ _jsx(Toaster, {})
+            ]
+        })
+    });
+}
+const meta = {
+    title: 'Projects/ProjectSettingsPage',
+    component: ProjectSettingsPageStory,
+    parameters: {
+        layout: 'fullscreen'
+    },
+    args: {
+        scenario: 'default'
+    }
+};
+export default meta;
+export const Playground = {};
+export const LongValues = {
+    args: {
+        scenario: 'long-values'
+    }
+};
+export const TakenSlug = {
+    args: {
+        scenario: 'taken-slug'
+    },
+    play: async ({ canvasElement })=>{
+        const canvas = within(canvasElement);
+        const slugInput = await canvas.findByLabelText('Project slug');
+        await userEvent.clear(slugInput);
+        await userEvent.type(slugInput, 'taken-platform');
+        expect(await canvas.findByText('This slug is already taken.')).toBeInTheDocument();
+    }
+};
+export const SlugChangeWarning = {
+    play: async ({ canvasElement })=>{
+        const canvas = within(canvasElement);
+        const slugInput = await canvas.findByLabelText('Project slug');
+        await userEvent.clear(slugInput);
+        await userEvent.type(slugInput, 'renamed-platform');
+        await canvas.findByText('Slug is available.');
+        await userEvent.click(canvas.getByRole('button', {
+            name: 'Save changes'
+        }));
+        const dialog = await screen.findByRole('dialog');
+        expect(dialog).toHaveTextContent('Change project slug?');
+        expect(dialog).toHaveTextContent('Links and bookmarks pointing at the old URL stop working.');
+        expect(dialog).toHaveTextContent('Workflows that reference this project slug may stop working.');
+    }
+};
+function createStoryRouter(scenario) {
+    const project = projectForScenario(scenario);
+    const rootRoute = createRootRoute({
+        component: Outlet
+    });
+    const projectSettingsRoute = createRoute({
+        getParentRoute: ()=>rootRoute,
+        path: '/w/$workspaceSlug/p/$projectSlug/settings/general',
+        component: ProjectSettingsPage
+    });
+    return createRouter({
+        history: createMemoryHistory({
+            initialEntries: [
+                `/w/acme/p/${project.slug}/settings/general`
+            ]
+        }),
+        routeTree: rootRoute.addChildren([
+            projectSettingsRoute
+        ])
+    });
+}
+function fetchForScenario(scenario) {
+    return async (input, init)=>{
+        const url = requestUrl(input);
+        const method = input instanceof Request ? input.method : init?.method ?? 'GET';
+        if (url.pathname === '/projects' && method === 'GET') {
+            const search = url.searchParams.get('search');
+            if (scenario === 'taken-slug' && search === 'taken-platform') {
+                return jsonResponse({
+                    projects: [
+                        projectForScenario(scenario, {
+                            id: OTHER_PROJECT_ID,
+                            slug: 'taken-platform'
+                        })
+                    ],
+                    next_cursor: null
+                });
+            }
+            return jsonResponse({
+                projects: [
+                    projectForScenario(scenario)
+                ],
+                next_cursor: null
+            });
+        }
+        if (url.pathname === `/projects/${PROJECT_ID}` && method === 'PATCH') {
+            const body = await input.clone().json();
+            const project = projectForScenario(scenario);
+            return jsonResponse({
+                ...project,
+                name: body.name ?? project.name,
+                slug: body.slug ?? project.slug
+            });
+        }
+        return jsonResponse({}, {
+            status: 404
+        });
+    };
+}
+function projectForScenario(scenario, overrides = {}) {
+    const project = {
+        id: PROJECT_ID,
+        workspace_id: WORKSPACE_ID,
+        name: scenario === 'long-values' ? 'Infrastructure Control Plane and Workflow Automation' : 'Platform',
+        slug: scenario === 'long-values' ? 'infrastructure-control-plane' : 'platform',
+        source: {
+            connection_id: '33333333-3333-4333-8333-333333333333',
+            external_repository_id: 'platform'
+        },
+        created_at: '2026-01-01T00:00:00.000Z',
+        updated_at: '2026-01-01T00:00:00.000Z',
+        ...overrides
+    };
+    return project;
+}
+function requestUrl(input) {
+    if (input instanceof Request) return new URL(input.url);
+    if (input instanceof URL) return input;
+    return new URL(input, 'https://api.example.test');
+}
+function jsonResponse(body, init = {}) {
+    return new Response(JSON.stringify(body), {
+        status: 200,
+        headers: {
+            'content-type': 'application/json'
+        },
+        ...init
+    });
+}
+
+//# sourceMappingURL=project-settings-page.stories.js.map

package/dist/pages/project-settings-page.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/pages/project-settings-page.stories.tsx"],"sourcesContent":["import {configureApiClient} from '@shipfox/client-api';\nimport {type AuthState, authStateAtom} from '@shipfox/client-auth';\nimport {Toaster} from '@shipfox/react-ui/toast';\nimport type {Meta, StoryObj} from '@storybook/react';\nimport {QueryClient, QueryClientProvider} from '@tanstack/react-query';\nimport {\n  createMemoryHistory,\n  createRootRoute,\n  createRoute,\n  createRouter,\n  Outlet,\n  RouterProvider,\n} from '@tanstack/react-router';\nimport {createStore, Provider as JotaiProvider} from 'jotai';\nimport {useMemo} from 'react';\nimport {expect, screen, userEvent, within} from 'storybook/test';\nimport {ProjectSettingsPage} from './project-settings-page.js';\n\nconst WORKSPACE_ID = '11111111-1111-4111-8111-111111111111';\nconst PROJECT_ID = '99999999-9999-4999-8999-999999999999';\nconst OTHER_PROJECT_ID = '88888888-8888-4888-8888-888888888888';\n\ntype Scenario = 'default' | 'long-values' | 'taken-slug';\n\ninterface ProjectStoryResponse {\n  id: string;\n  workspace_id: string;\n  name: string;\n  slug: string;\n  source: {\n    connection_id: string;\n    external_repository_id: string;\n  };\n  created_at: string;\n  updated_at: string;\n}\n\ninterface ProjectSettingsPageStoryProps {\n  scenario: Scenario;\n}\n\nconst authState: AuthState = {\n  status: 'authenticated',\n  token: 'token',\n  user: {\n    id: '22222222-2222-4222-8222-222222222222',\n    email: 'platform@example.com',\n    name: 'Platform Engineer',\n    emailVerifiedAt: '2026-01-01T00:00:00.000Z',\n  },\n  workspaces: [{id: WORKSPACE_ID, name: 'Acme', slug: 'acme', membershipId: 'membership-1'}],\n};\n\nfunction ProjectSettingsPageStory({scenario}: ProjectSettingsPageStoryProps) {\n  configureApiClient({\n    baseUrl: 'https://api.example.test',\n    fetchImpl: fetchForScenario(scenario),\n  });\n\n  const queryClient = useMemo(\n    () => new QueryClient({defaultOptions: {queries: {retry: false}}}),\n    [],\n  );\n  const store = useMemo(() => {\n    const nextStore = createStore();\n    nextStore.set(authStateAtom, authState);\n    return nextStore;\n  }, []);\n  const router = useMemo(() => createStoryRouter(scenario), [scenario]);\n\n  return (\n    <QueryClientProvider client={queryClient}>\n      <JotaiProvider store={store}>\n        <div className=\"min-h-screen bg-background-neutral-background px-24 py-32\">\n          <div className=\"mx-auto w-full max-w-[1120px]\">\n            <RouterProvider router={router} />\n          </div>\n        </div>\n        <Toaster />\n      </JotaiProvider>\n    </QueryClientProvider>\n  );\n}\n\nconst meta = {\n  title: 'Projects/ProjectSettingsPage',\n  component: ProjectSettingsPageStory,\n  parameters: {layout: 'fullscreen'},\n  args: {scenario: 'default'},\n} satisfies Meta<typeof ProjectSettingsPageStory>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\nexport const Playground: Story = {};\n\nexport const LongValues: Story = {\n  args: {scenario: 'long-values'},\n};\n\nexport const TakenSlug: Story = {\n  args: {scenario: 'taken-slug'},\n  play: async ({canvasElement}) => {\n    const canvas = within(canvasElement);\n    const slugInput = await canvas.findByLabelText('Project slug');\n    await userEvent.clear(slugInput);\n    await userEvent.type(slugInput, 'taken-platform');\n\n    expect(await canvas.findByText('This slug is already taken.')).toBeInTheDocument();\n  },\n};\n\nexport const SlugChangeWarning: Story = {\n  play: async ({canvasElement}) => {\n    const canvas = within(canvasElement);\n    const slugInput = await canvas.findByLabelText('Project slug');\n    await userEvent.clear(slugInput);\n    await userEvent.type(slugInput, 'renamed-platform');\n    await canvas.findByText('Slug is available.');\n    await userEvent.click(canvas.getByRole('button', {name: 'Save changes'}));\n\n    const dialog = await screen.findByRole('dialog');\n    expect(dialog).toHaveTextContent('Change project slug?');\n    expect(dialog).toHaveTextContent('Links and bookmarks pointing at the old URL stop working.');\n    expect(dialog).toHaveTextContent(\n      'Workflows that reference this project slug may stop working.',\n    );\n  },\n};\n\nfunction createStoryRouter(scenario: Scenario) {\n  const project = projectForScenario(scenario);\n  const rootRoute = createRootRoute({component: Outlet});\n  const projectSettingsRoute = createRoute({\n    getParentRoute: () => rootRoute,\n    path: '/w/$workspaceSlug/p/$projectSlug/settings/general',\n    component: ProjectSettingsPage,\n  });\n\n  return createRouter({\n    history: createMemoryHistory({\n      initialEntries: [`/w/acme/p/${project.slug}/settings/general`],\n    }),\n    routeTree: rootRoute.addChildren([projectSettingsRoute]),\n  });\n}\n\nfunction fetchForScenario(scenario: Scenario): typeof fetch {\n  return async (input, init) => {\n    const url = requestUrl(input);\n    const method = input instanceof Request ? input.method : (init?.method ?? 'GET');\n\n    if (url.pathname === '/projects' && method === 'GET') {\n      const search = url.searchParams.get('search');\n      if (scenario === 'taken-slug' && search === 'taken-platform') {\n        return jsonResponse({\n          projects: [projectForScenario(scenario, {id: OTHER_PROJECT_ID, slug: 'taken-platform'})],\n          next_cursor: null,\n        });\n      }\n      return jsonResponse({projects: [projectForScenario(scenario)], next_cursor: null});\n    }\n\n    if (url.pathname === `/projects/${PROJECT_ID}` && method === 'PATCH') {\n      const body = (await (input as Request).clone().json()) as {\n        name?: string;\n        slug?: string;\n      };\n      const project = projectForScenario(scenario);\n      return jsonResponse({\n        ...project,\n        name: body.name ?? project.name,\n        slug: body.slug ?? project.slug,\n      });\n    }\n\n    return jsonResponse({}, {status: 404});\n  };\n}\n\nfunction projectForScenario(\n  scenario: Scenario,\n  overrides: Partial<ProjectStoryResponse> = {},\n): ProjectStoryResponse {\n  const project = {\n    id: PROJECT_ID,\n    workspace_id: WORKSPACE_ID,\n    name:\n      scenario === 'long-values'\n        ? 'Infrastructure Control Plane and Workflow Automation'\n        : 'Platform',\n    slug: scenario === 'long-values' ? 'infrastructure-control-plane' : 'platform',\n    source: {\n      connection_id: '33333333-3333-4333-8333-333333333333',\n      external_repository_id: 'platform',\n    },\n    created_at: '2026-01-01T00:00:00.000Z',\n    updated_at: '2026-01-01T00:00:00.000Z',\n    ...overrides,\n  };\n  return project;\n}\n\nfunction requestUrl(input: RequestInfo | URL): URL {\n  if (input instanceof Request) return new URL(input.url);\n  if (input instanceof URL) return input;\n  return new URL(input, 'https://api.example.test');\n}\n\nfunction jsonResponse(body: unknown, init: ResponseInit = {}) {\n  return new Response(JSON.stringify(body), {\n    status: 200,\n    headers: {'content-type': 'application/json'},\n    ...init,\n  });\n}\n"],"names":["configureApiClient","authStateAtom","Toaster","QueryClient","QueryClientProvider","createMemoryHistory","createRootRoute","createRoute","createRouter","Outlet","RouterProvider","createStore","Provider","JotaiProvider","useMemo","expect","screen","userEvent","within","ProjectSettingsPage","WORKSPACE_ID","PROJECT_ID","OTHER_PROJECT_ID","authState","status","token","user","id","email","name","emailVerifiedAt","workspaces","slug","membershipId","ProjectSettingsPageStory","scenario","baseUrl","fetchImpl","fetchForScenario","queryClient","defaultOptions","queries","retry","store","nextStore","set","router","createStoryRouter","client","div","className","meta","title","component","parameters","layout","args","Playground","LongValues","TakenSlug","play","canvasElement","canvas","slugInput","findByLabelText","clear","type","findByText","toBeInTheDocument","SlugChangeWarning","click","getByRole","dialog","findByRole","toHaveTextContent","project","projectForScenario","rootRoute","projectSettingsRoute","getParentRoute","path","history","initialEntries","routeTree","addChildren","input","init","url","requestUrl","method","Request","pathname","search","searchParams","get","jsonResponse","projects","next_cursor","body","clone","json","overrides","workspace_id","source","connection_id","external_repository_id","created_at","updated_at","URL","Response","JSON","stringify","headers"],"mappings":"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"}

package/dist/pages/projects-hub-page.js

@@ -76,9 +76,9 @@ export function ProjectsHubPage({ search = '' }) {
                                 iconLeft: "addLine",
                                 className: "shrink-0 max-[640px]:w-full",
                                 children: /*#__PURE__*/ _jsx(Link, {
-                                    to: "/workspaces/$wid/projects/new",
+                                    to: "/w/$workspaceSlug/projects/new",
                                     params: {
-                                        wid: workspace.id
+                                        workspaceSlug: workspace.slug
                                     },
                                     children: "New project"
                                 })
@@ -96,7 +96,7 @@ export function ProjectsHubPage({ search = '' }) {
                 subject: "projects"
             }) : null,
             !isInitialLoading && !query.isError && projects.length === 0 && !search ? /*#__PURE__*/ _jsx(EmptyProjects, {
-                workspaceId: workspace.id
+                workspaceSlug: workspace.slug
             }) : null,
             !query.isFetching && !query.isError && projects.length === 0 && search ? /*#__PURE__*/ _jsx(NoSearchResults, {
                 search: search,
@@ -115,7 +115,7 @@ export function ProjectsHubPage({ search = '' }) {
                                 connection: connectionsById.get(project.source.connectionId),
                                 connectionsResolved: connectionsQuery.isSuccess,
                                 connectionsSettled: connectionsQuery.isSuccess || connectionsQuery.isError,
-                                workspaceId: workspace.id
+                                workspaceSlug: workspace.slug
                             }, project.id))
                     }),
                     query.error && query.data ? /*#__PURE__*/ _jsx(Callout, {
@@ -171,7 +171,7 @@ function ProjectsSkeleton() {
             }, row))
     });
 }
-function EmptyProjects({ workspaceId }) {
+function EmptyProjects({ workspaceSlug }) {
     return /*#__PURE__*/ _jsx(EmptyState, {
         icon: "folderLine",
         title: "Create your first project",
@@ -180,9 +180,9 @@ function EmptyProjects({ workspaceId }) {
             asChild: true,
             iconRight: "chevronRight",
             children: /*#__PURE__*/ _jsx(Link, {
-                to: "/workspaces/$wid/projects/new",
+                to: "/w/$workspaceSlug/projects/new",
                 params: {
-                    wid: workspaceId
+                    workspaceSlug
                 },
                 children: "Create project"
             })
@@ -202,17 +202,17 @@ function NoSearchResults({ search, onClear }) {
         })
     });
 }
-function ProjectCard({ project, connection, connectionsResolved, connectionsSettled, workspaceId }) {
+function ProjectCard({ project, connection, connectionsResolved, connectionsSettled, workspaceSlug }) {
     // On a resolved fetch, `active` carries no badge while a missing connection
     // reads as an error so a broken source is still flagged. An unresolved or
     // failed fetch shows nothing, so a fetch failure never flags every card.
     const status = connectionsResolved ? connection?.lifecycleStatus ?? 'error' : undefined;
     return /*#__PURE__*/ _jsx("li", {
         children: /*#__PURE__*/ _jsx(Link, {
-            to: "/workspaces/$wid/projects/$pid",
+            to: "/w/$workspaceSlug/p/$projectSlug",
             params: {
-                wid: workspaceId,
-                pid: project.id
+                workspaceSlug,
+                projectSlug: project.slug
             },
             className: "block h-full rounded-8 focus-visible:shadow-button-neutral-focus focus-visible:outline-none",
             children: /*#__PURE__*/ _jsx(Card, {