refactor(ui): wire mosaic organization sections to real Clerk hooks (#9017)

Author: alexcarpenter

.changeset/wise-mosaic-sections.md

@@ -0,0 +1,2 @@
+---
+---

packages/swingset/src/stories/delete-organization.stories.tsx

@@ -1,5 +1,7 @@
 /** @jsxImportSource @emotion/react */
-import { DeleteOrganization } from '@clerk/ui/mosaic/sections/delete-organization';
+import { useMachine } from '@clerk/ui/mosaic/machine/useMachine';
+import { deleteOrgMachine } from '@clerk/ui/mosaic/sections/delete-organization-machine';
+import { DeleteOrganizationView } from '@clerk/ui/mosaic/sections/delete-organization-view';
 
 import type { StoryMeta } from '@/lib/types';
 
@@ -11,5 +13,18 @@ export const meta: StoryMeta = {
 };
 
 export function Default() {
-  return <DeleteOrganization />;
+  const [snapshot, send, actor] = useMachine(deleteOrgMachine, {
+    context: {
+      organizationName: 'Acme Inc',
+      destroyOrganization: () => new Promise<void>(resolve => setTimeout(resolve, 800)),
+    },
+  });
+
+  return (
+    <DeleteOrganizationView
+      snapshot={snapshot}
+      send={send}
+      canSubmit={actor.can({ type: 'CONFIRM' })}
+    />
+  );
 }

packages/swingset/src/stories/leave-organization.stories.tsx

@@ -1,5 +1,7 @@
 /** @jsxImportSource @emotion/react */
-import { LeaveOrganization } from '@clerk/ui/mosaic/sections/leave-organization';
+import { useMachine } from '@clerk/ui/mosaic/machine/useMachine';
+import { leaveOrgMachine } from '@clerk/ui/mosaic/sections/leave-organization-machine';
+import { LeaveOrganizationView } from '@clerk/ui/mosaic/sections/leave-organization-view';
 
 import type { StoryMeta } from '@/lib/types';
 
@@ -11,5 +13,18 @@ export const meta: StoryMeta = {
 };
 
 export function Default() {
-  return <LeaveOrganization />;
+  const [snapshot, send, actor] = useMachine(leaveOrgMachine, {
+    context: {
+      organizationName: 'Acme Inc',
+      leaveOrganization: () => new Promise<void>(resolve => setTimeout(resolve, 800)),
+    },
+  });
+
+  return (
+    <LeaveOrganizationView
+      snapshot={snapshot}
+      send={send}
+      canSubmit={actor.can({ type: 'CONFIRM' })}
+    />
+  );
 }

packages/swingset/src/stories/organization-profile-general.stories.tsx

@@ -1,8 +1,11 @@
 /** @jsxImportSource @emotion/react */
-import { OrganizationProfileGeneral } from '@clerk/ui/mosaic/panels/organization-profile-general';
+import { OrganizationProfileGeneralView } from '@clerk/ui/mosaic/panels/organization-profile-general-view';
 
 import type { StoryMeta } from '@/lib/types';
 
+import { Default as DeleteOrganizationDemo } from './delete-organization.stories';
+import { Default as LeaveOrganizationDemo } from './leave-organization.stories';
+
 export const meta: StoryMeta = {
   group: 'Panels',
   title: 'OrganizationProfileGeneral',
@@ -11,5 +14,10 @@ export const meta: StoryMeta = {
 };
 
 export function Default() {
-  return <OrganizationProfileGeneral />;
+  return (
+    <OrganizationProfileGeneralView
+      leaveOrganization={<LeaveOrganizationDemo />}
+      deleteOrganization={<DeleteOrganizationDemo />}
+    />
+  );
 }

packages/swingset/src/stories/organization-profile.stories.tsx

@@ -1,8 +1,10 @@
 /** @jsxImportSource @emotion/react */
-import { OrganizationProfile } from '@clerk/ui/mosaic/aio/organization-profile';
+import { OrganizationProfileView } from '@clerk/ui/mosaic/aio/organization-profile-view';
 
 import type { StoryMeta } from '@/lib/types';
 
+import { Default as OrganizationProfileGeneralDemo } from './organization-profile-general.stories';
+
 export const meta: StoryMeta = {
   group: 'AIO',
   title: 'OrganizationProfile',
@@ -11,5 +13,5 @@ export const meta: StoryMeta = {
 };
 
 export function Default() {
-  return <OrganizationProfile />;
+  return <OrganizationProfileView general={<OrganizationProfileGeneralDemo />} />;
 }

packages/ui/src/mosaic/aio/organization-profile-view.tsx

@@ -0,0 +1,49 @@
+import type { ReactNode } from 'react';
+
+import { Box } from '../components/box';
+import { Tabs } from '../components/tabs';
+
+interface OrganizationProfileViewProps {
+  /** The General tab's panel content. */
+  general: ReactNode;
+}
+
+export function OrganizationProfileView({ general }: OrganizationProfileViewProps) {
+  return (
+    <Box
+      sx={{
+        width: '100%',
+      }}
+    >
+      <Box
+        render={p => <h1 {...p} />}
+        sx={t => ({
+          ...t.text('lg'),
+          fontWeight: t.font.semibold,
+          marginBlockEnd: t.spacing(8),
+        })}
+      >
+        Organization Profile
+      </Box>
+      <Tabs.Root defaultValue='general'>
+        <Tabs.List>
+          <Tabs.Tab value='general'>General</Tabs.Tab>
+          <Tabs.Tab value='members'>Members</Tabs.Tab>
+        </Tabs.List>
+        <Tabs.Panel value='general'>{general}</Tabs.Panel>
+        <Tabs.Panel value='members'>
+          <Box
+            render={p => <h1 {...p} />}
+            sx={t => ({
+              ...t.text('base'),
+              fontWeight: t.font.medium,
+              textAlign: 'center',
+            })}
+          >
+            Members content
+          </Box>
+        </Tabs.Panel>
+      </Tabs.Root>
+    </Box>
+  );
+}

packages/ui/src/mosaic/aio/organization-profile.tsx

@@ -1,45 +1,6 @@
-import { Box } from '../components/box';
-import { Tabs } from '../components/tabs';
 import { OrganizationProfileGeneral } from '../panels/organization-profile-general';
+import { OrganizationProfileView } from './organization-profile-view';
 
 export function OrganizationProfile() {
-  return (
-    <Box
-      sx={t => ({
-        width: '100%',
-      })}
-    >
-      <Box
-        render={p => <h1 {...p} />}
-        sx={t => ({
-          ...t.text('lg'),
-          fontWeight: t.font.semibold,
-          marginBlockEnd: t.spacing(8),
-        })}
-      >
-        Organization Profile
-      </Box>
-      <Tabs.Root defaultValue='general'>
-        <Tabs.List>
-          <Tabs.Tab value='general'>General</Tabs.Tab>
-          <Tabs.Tab value='members'>Members</Tabs.Tab>
-        </Tabs.List>
-        <Tabs.Panel value='general'>
-          <OrganizationProfileGeneral />
-        </Tabs.Panel>
-        <Tabs.Panel value='members'>
-          <Box
-            render={p => <h1 {...p} />}
-            sx={t => ({
-              ...t.text('base'),
-              fontWeight: t.font.medium,
-              textAlign: 'center',
-            })}
-          >
-            Members content
-          </Box>
-        </Tabs.Panel>
-      </Tabs.Root>
-    </Box>
-  );
+  return <OrganizationProfileView general={<OrganizationProfileGeneral />} />;
 }

packages/ui/src/mosaic/mock/organization-store.ts

@@ -0,0 +1,35 @@
+import type { ReactNode } from 'react';
+
+import { Box } from '../components/box';
+import { alpha } from '../utils';
+
+interface OrganizationProfileGeneralViewProps {
+  /** The leave-organization section, rendered above the divider. */
+  leaveOrganization: ReactNode;
+  /** The delete-organization section, rendered below the divider. */
+  deleteOrganization: ReactNode;
+}
+
+export function OrganizationProfileGeneralView({
+  leaveOrganization,
+  deleteOrganization,
+}: OrganizationProfileGeneralViewProps) {
+  return (
+    <Box
+      sx={{
+        width: '100%',
+        containerType: 'inline-size',
+      }}
+    >
+      {leaveOrganization}
+      <Box
+        sx={t => ({
+          height: '1px',
+          background: `light-dark(${alpha('#000', 10)},${alpha('#fff', 10)})`,
+          marginBlock: t.spacing(4),
+        })}
+      />
+      {deleteOrganization}
+    </Box>
+  );
+}