@dxos/react-ui 0.8.4-main.937b3ca → 0.8.4-main.9735255

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui",
-  "version": "0.8.4-main.937b3ca",
+  "version": "0.8.4-main.9735255",
   "description": "Low-level React components for DXOS, applying a theme to a core group of primitives",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -78,16 +78,16 @@
     "keyborg": "^2.5.0",
     "react-i18next": "^11.18.6",
     "react-remove-scroll": "^2.6.0",
-    "@dxos/debug": "0.8.4-main.937b3ca",
-    "@dxos/invariant": "0.8.4-main.937b3ca",
-    "@dxos/lit-ui": "0.8.4-main.937b3ca",
-    "@dxos/async": "0.8.4-main.937b3ca",
-    "@dxos/react-hooks": "0.8.4-main.937b3ca",
-    "@dxos/log": "0.8.4-main.937b3ca",
-    "@dxos/react-input": "0.8.4-main.937b3ca",
-    "@dxos/ui-types": "0.8.4-main.937b3ca",
-    "@dxos/react-list": "0.8.4-main.937b3ca",
-    "@dxos/util": "0.8.4-main.937b3ca"
+    "@dxos/debug": "0.8.4-main.9735255",
+    "@dxos/invariant": "0.8.4-main.9735255",
+    "@dxos/async": "0.8.4-main.9735255",
+    "@dxos/log": "0.8.4-main.9735255",
+    "@dxos/lit-ui": "0.8.4-main.9735255",
+    "@dxos/react-hooks": "0.8.4-main.9735255",
+    "@dxos/react-list": "0.8.4-main.9735255",
+    "@dxos/react-input": "0.8.4-main.9735255",
+    "@dxos/ui-types": "0.8.4-main.9735255",
+    "@dxos/util": "0.8.4-main.9735255"
   },
   "devDependencies": {
     "@dnd-kit/core": "^6.0.5",
@@ -100,14 +100,14 @@
     "react-dom": "~19.2.3",
     "tabster": "^8.5.5",
     "vite": "7.1.9",
-    "@dxos/random": "0.8.4-main.937b3ca",
-    "@dxos/ui-theme": "0.8.4-main.937b3ca",
-    "@dxos/util": "0.8.4-main.937b3ca"
+    "@dxos/random": "0.8.4-main.9735255",
+    "@dxos/ui-theme": "0.8.4-main.9735255",
+    "@dxos/util": "0.8.4-main.9735255"
   },
   "peerDependencies": {
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "@dxos/ui-theme": "0.8.4-main.937b3ca"
+    "@dxos/ui-theme": "0.8.4-main.9735255"
   },
   "publishConfig": {
     "access": "public"

package/src/components/Main/Main.stories.tsx

@@ -5,41 +5,86 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
-import { withTheme } from '../../testing';
-import { Button } from '../Button';
+import { withLayout, withTheme } from '../../testing';
+import { IconButton } from '../Button';
+import { Input } from '../Input';
+import { Toolbar } from '../Toolbar';
 
-import { Main, useSidebars } from './Main';
+import { Main, useDynamicDrawer, useSidebars } from './Main';
 
 type StoryMainArgs = {};
 
-const NavigationSidebarToggle = () => {
+const NavigationSidebarToggle = ({ close }: { close?: boolean }) => {
   const { toggleNavigationSidebar } = useSidebars('StoryMain__SidebarToggle');
-  return <Button onClick={toggleNavigationSidebar}>Toggle navigation sidebar</Button>;
+  return (
+    <IconButton
+      icon={close ? 'ph--caret-left--regular' : 'ph--caret-right--regular'}
+      iconOnly
+      label='Toggle navigation sidebar'
+      onClick={toggleNavigationSidebar}
+    />
+  );
 };
 
-const ComplementarySidebarToggle = () => {
+const ComplementarySidebarToggle = ({ close }: { close?: boolean }) => {
   const { toggleComplementarySidebar } = useSidebars('StoryMain__SidebarToggle');
-  return <Button onClick={toggleComplementarySidebar}>Toggle complementary sidebar</Button>;
+  return (
+    <IconButton
+      icon={close ? 'ph--caret-right--regular' : 'ph--caret-left--regular'}
+      iconOnly
+      label='Toggle complementary sidebar'
+      onClick={toggleComplementarySidebar}
+    />
+  );
+};
+
+const DrawerToggle = ({ close }: { close?: boolean }) => {
+  const { toggleDrawer } = useSidebars('StoryMain__DrawerToggle');
+  return (
+    <IconButton
+      icon={close ? 'ph--caret-down--regular' : 'ph--caret-up--regular'}
+      iconOnly
+      label='Toggle drawer'
+      onClick={toggleDrawer}
+    />
+  );
+};
+
+const DrawerState = () => {
+  const { drawerState } = useSidebars('StoryMain__DrawerStateDisplay');
+  return (
+    <div className='flex items-center gap-2'>
+      <span>Drawer</span>
+      <span>({drawerState})</span>
+      <span>[{window.innerHeight}]</span>
+    </div>
+  );
 };
 
 const DefaultStory = (_args: StoryMainArgs) => {
   return (
-    <Main.Root>
+    <Main.Root defaultComplementarySidebarState='closed' defaultNavigationSidebarState='closed'>
       <Main.Overlay />
-      <Main.NavigationSidebar label='Navigation' classNames='p-4'>
-        <p>Navigation sidebar content, hi!</p>
-        <NavigationSidebarToggle />
+      <Main.NavigationSidebar label='Navigation'>
+        <Toolbar.Root>
+          <h1>Navigation</h1>
+          <Toolbar.Separator variant='gap' classNames='grow' />
+          <NavigationSidebarToggle close />
+        </Toolbar.Root>
       </Main.NavigationSidebar>
-      <Main.Content>
-        <div role='group' className='m-2 p-4 bg-neutral-50 dark:bg-neutral-950 rounded space-y-2'>
-          <ComplementarySidebarToggle />
-          <p>Main content, hello!</p>
+      <Main.Content classNames='is-full'>
+        <Toolbar.Root>
           <NavigationSidebarToggle />
-        </div>
+          <div className='flex items-center grow justify-center'>Main</div>
+          <ComplementarySidebarToggle />
+        </Toolbar.Root>
       </Main.Content>
-      <Main.ComplementarySidebar label='Complementary content' classNames='p-4'>
-        <p>Complementary sidebar content, hello!</p>
-        <ComplementarySidebarToggle />
+      <Main.ComplementarySidebar label='Complementary'>
+        <Toolbar.Root>
+          <ComplementarySidebarToggle close />
+          <Toolbar.Separator variant='gap' classNames='grow' />
+          <h1>Complementary</h1>
+        </Toolbar.Root>
       </Main.ComplementarySidebar>
     </Main.Root>
   );
@@ -49,7 +94,7 @@ const meta = {
   title: 'ui/react-ui-core/Main',
   component: Main.Root,
   render: DefaultStory,
-  decorators: [withTheme],
+  decorators: [withTheme, withLayout({ layout: 'fullscreen' })],
   parameters: {
     layout: 'fullscreen',
     chromatic: {
@@ -65,3 +110,65 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
   args: {},
 };
+
+const DrawerStory = (_args: StoryMainArgs) => {
+  return (
+    <Main.Root>
+      <Main.Overlay />
+      <DrawerStoryInner />
+    </Main.Root>
+  );
+};
+
+const DrawerStoryInner = () => {
+  useDynamicDrawer('DrawerStoryInner');
+
+  return (
+    <>
+      <Main.Content classNames='flex flex-col is-full overflow-hidden'>
+        <Toolbar.Root classNames='pli-2'>
+          <h1>Main Content</h1>
+          <Toolbar.Separator variant='gap' classNames='grow' />
+          <DrawerToggle />
+        </Toolbar.Root>
+        <div className='flex flex-col bs-full overflow-y-auto p-2'>
+          <p className='text-sm text-description'>
+            The drawer is mutually exclusive with sidebars and is intended for mobile apps.
+          </p>
+          <div className='plb-2 space-y-2'>
+            {Array.from({ length: 50 }).map((_, i) => (
+              <p key={i}>Line {i + 1}</p>
+            ))}
+          </div>
+        </div>
+      </Main.Content>
+      <Main.Drawer label='Drawer' classNames='grid grid-rows-[min-content_1fr_min-content]'>
+        <Toolbar.Root classNames='pli-2'>
+          <DrawerState />
+          <Toolbar.Separator variant='gap' classNames='grow' />
+          <DrawerToggle close />
+        </Toolbar.Root>
+        <div className='p-2 overflow-y-auto'>
+          <p className='text-sm text-description'>
+            On mobile devices, the drawer automatically switches to fullscreenwhen the keyboard appears.
+          </p>
+          <div className='plb-2 space-y-2'>
+            {Array.from({ length: 50 }).map((_, i) => (
+              <p key={i}>Line {i + 1}</p>
+            ))}
+          </div>
+        </div>
+        <div className='p-2 border-bs border-separator'>
+          <Input.Root>
+            <Input.TextInput autoFocus placeholder='Search' />
+          </Input.Root>
+        </div>
+      </Main.Drawer>
+    </>
+  );
+};
+
+export const WithDrawer: Story = {
+  render: DrawerStory,
+  args: {},
+};