@dxos/brand 0.8.3 → 0.8.4-main.1068cf700f

package/package.json

@@ -1,15 +1,20 @@
 {
   "name": "@dxos/brand",
-  "version": "0.8.3",
+  "version": "0.8.4-main.1068cf700f",
   "description": "DXOS brand assets.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/dxos/dxos"
+  },
   "license": "MIT",
   "author": "DXOS.org",
-  "sideEffects": true,
+  "sideEffects": false,
   "type": "module",
   "exports": {
     ".": {
+      "source": "./src/index.ts",
       "types": "./dist/types/src/index.d.ts",
       "browser": "./dist/lib/browser/index.mjs"
     }
@@ -28,20 +33,21 @@
   },
   "devDependencies": {
     "@fontsource/k2d": "^5.0.18",
-    "@phosphor-icons/react": "^2.1.5",
+    "@phosphor-icons/react": "2.1.10",
     "@rive-app/react-canvas": "^4.14.0",
     "@types/d3": "^7.4.3",
-    "react": "~18.2.0",
-    "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.8.3",
-    "@dxos/react-ui-theme": "0.8.3",
-    "@dxos/storybook-utils": "0.8.3"
+    "react": "~19.2.3",
+    "react-dom": "~19.2.3",
+    "@dxos/log": "0.8.4-main.1068cf700f",
+    "@dxos/storybook-utils": "0.8.4-main.1068cf700f",
+    "@dxos/ui-theme": "0.8.4-main.1068cf700f",
+    "@dxos/react-ui": "0.8.4-main.1068cf700f"
   },
   "peerDependencies": {
-    "@phosphor-icons/react": "^2.1.5",
-    "react": "~18.2.0",
-    "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.8.3",
-    "@dxos/react-ui-theme": "0.8.3"
+    "@phosphor-icons/react": "2.1.10",
+    "react": "~19.2.3",
+    "react-dom": "~19.2.3",
+    "@dxos/react-ui": "0.8.4-main.1068cf700f",
+    "@dxos/ui-theme": "0.8.4-main.1068cf700f"
   }
 }

package/src/Icons.stories.tsx

@@ -2,28 +2,31 @@
 // Copyright 2022 DXOS.org
 //
 
-import '@dxos-theme';
-
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
-import { mx } from '@dxos/react-ui-theme';
-import { withTheme } from '@dxos/storybook-utils';
+import { withTheme } from '@dxos/react-ui/testing';
+import { mx } from '@dxos/ui-theme';
 
-import { DXNS, DXOS, ECHO, HALO, KUBE, MESH, Composer } from './icons';
+import { Composer, DXNS, DXOS, ECHO, HALO, KUBE, MESH } from './icons';
 
 const Icon = () => null;
 
-export default {
+const meta = {
   title: 'ui/brand/Icons',
   component: Icon,
-  decorators: [withTheme],
-};
+  decorators: [withTheme()],
+} satisfies Meta<typeof Icon>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
 
-export const Default = {
+export const Default: Story = {
   render: () => {
-    const size = 'w-[128px] h-[128px]';
+    const size = 'is-[128px] bs-[128px]';
     return (
-      <div className='absolute flex w-full h-full items-center justify-center'>
+      <div className='absolute flex is-full bs-full items-center justify-center'>
         <div className='grid grid-cols-3 gap-16'>
           <>
             <div />

package/src/Logotypes.stories.tsx

@@ -2,22 +2,25 @@
 // Copyright 2022 DXOS.org
 //
 
-import '@dxos-theme';
-
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { type FC, type ReactNode } from 'react';
 
-import { mx } from '@dxos/react-ui-theme';
-import { withTheme } from '@dxos/storybook-utils';
+import { withTheme } from '@dxos/react-ui/testing';
+import { mx } from '@dxos/ui-theme';
 
-import { DXOSType, DXOSHorizontalType, DXOSVerticalType } from './logotypes';
+import { DXOSHorizontalType, DXOSType, DXOSVerticalType } from './logotypes';
 
 const Icon = () => null;
 
-export default {
+const meta = {
   title: 'ui/brand/LogoTypes',
   component: Icon,
-  decorators: [withTheme],
-};
+  decorators: [withTheme()],
+} satisfies Meta<typeof Icon>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
 
 const Cell: FC<{ children: ReactNode; dark?: boolean }> = ({ children, dark }) => (
   <div className={mx('flex p-4 justify-center rounded-md', dark ? 'bg-zinc-800 fill-zinc-50' : 'bg-white')}>
@@ -25,30 +28,30 @@ const Cell: FC<{ children: ReactNode; dark?: boolean }> = ({ children, dark }) =
   </div>
 );
 
-export const Default = {
+export const Default: Story = {
   render: () => {
     return (
-      <div className='absolute flex w-full h-full items-center justify-center'>
+      <div className='absolute flex is-full bs-full items-center justify-center'>
         <div className='flex grid grid-cols-2 gap-16'>
           <Cell>
-            <DXOSType className='w-[256px]' />
+            <DXOSType className='is-[256px]' />
           </Cell>
           <Cell dark>
-            <DXOSType className='w-[128px]' />
+            <DXOSType className='is-[128px]' />
           </Cell>
 
           <Cell>
-            <DXOSHorizontalType className='w-[256px]' />
+            <DXOSHorizontalType className='is-[256px]' />
           </Cell>
           <Cell dark>
-            <DXOSHorizontalType className='w-[128px]' />
+            <DXOSHorizontalType className='is-[128px]' />
           </Cell>
 
           <Cell>
-            <DXOSVerticalType className='w-[256px]' />
+            <DXOSVerticalType className='is-[256px]' />
           </Cell>
           <Cell dark>
-            <DXOSVerticalType className='w-[128px]' />
+            <DXOSVerticalType className='is-[128px]' />
           </Cell>
         </div>
       </div>

package/src/components/ComposerLogo/ComposerLogo.stories.tsx

@@ -2,29 +2,32 @@
 // Copyright 2022 DXOS.org
 //
 
-import '@dxos-theme';
-
 import '@fontsource/k2d/100-italic.css';
 
-import { Ghost, Square } from '@phosphor-icons/react';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useRef, useState } from 'react';
 
-import { Button } from '@dxos/react-ui';
-import { mx } from '@dxos/react-ui-theme';
-import { withTheme } from '@dxos/storybook-utils';
+import { Button, Icon } from '@dxos/react-ui';
+import { withTheme } from '@dxos/react-ui/testing';
+import { mx } from '@dxos/ui-theme';
 
-import { type AnimationController, ComposerLogo, ComposerSpinner } from './ComposerLogo';
 import { DXOS } from '../../icons';
 
+import { type AnimationController, ComposerLogo, ComposerSpinner } from './ComposerLogo';
+
 // import ident from '../../../assets/sounds/ident-1.mp3';
 
 // https://pixabay.com/sound-effects/search/logo/?pagi=2
 
-export default {
+const meta = {
   title: 'ui/brand/Logo',
   component: ComposerLogo,
-  decorators: [withTheme],
-};
+  decorators: [withTheme()],
+} satisfies Meta<typeof ComposerLogo>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
 
 // TODO(burdon): Get from theme?
 const colors = {
@@ -35,7 +38,7 @@ const colors = {
   blue: '#539ACD',
 };
 
-export const Default = {
+export const Default: Story = {
   render: () => {
     const controller = useRef<AnimationController>(null);
     const [logo, setLogo] = useState(false);
@@ -65,7 +68,7 @@ export const Default = {
             <div className={mx('flex items-center -mt-[20px] text-neutral-700')}>
               <span className='ml-[210px] mt-[2px] mr-2'>Powered by DXOS</span>
               <div>
-                <DXOS className='w-[32px] h-[32px]' />
+                <DXOS className='is-[32px] bs-[32px]' />
               </div>
             </div>
           </div>
@@ -76,7 +79,7 @@ export const Default = {
 };
 
 // TODO(burdon): Camo.
-export const Colors = {
+export const Colors: Story = {
   render: () => {
     const colors = [
       ['fill-teal-400', 'fill-teal-500', 'fill-teal-600'],
@@ -92,7 +95,7 @@ export const Colors = {
 
     return (
       <div className='absolute inset-0 flex justify-center items-center'>
-        <div className='grid grid-cols-3 gap-20 w-[800px]'>
+        <div className='grid grid-cols-3 gap-20 is-[800px]'>
           {colors.map((classNames, i) => (
             <div key={i} className='flex justify-center items-center'>
               <ComposerLogo animate={false} size={160} classNames={classNames} />
@@ -104,7 +107,7 @@ export const Colors = {
   },
 };
 
-export const Pacman = {
+export const Pacman: Story = {
   render: () => {
     return (
       <div className='absolute inset-0 flex flex-col justify-center'>
@@ -112,13 +115,13 @@ export const Pacman = {
           <div className='flex items-center p-4'>
             <div className='flex ml-8 mr-[100px]'>
               <div>
-                <Ghost weight='duotone' className='w-[180px] h-[180px] text-blue-500' />
+                <Icon icon='ph--ghost--duotone' classNames='is-[180px] bs-[180px] text-blue-500' />
               </div>
               <div>
-                <Ghost weight='duotone' className='w-[180px] h-[180px] text-purple-500' />
+                <Icon icon='ph--ghost--duotone' classNames='is-[180px] bs-[180px] text-purple-500' />
               </div>
               <div>
-                <Ghost weight='duotone' className='w-[180px] h-[180px] text-red-500' />
+                <Icon icon='ph--ghost--duotone' classNames='is-[180px] bs-[180px] text-red-500' />
               </div>
             </div>
 
@@ -127,7 +130,7 @@ export const Pacman = {
             <div className='flex -ml-10'>
               {Array.from({ length: 6 }).map((_, i) => (
                 <div key={i} className='p-4'>
-                  <Square weight='duotone' className='w-6 h-6 text-yellow-200' />
+                  <Icon icon='ph--square--duotone' classNames='is-6 bs-6 text-yellow-200' />
                 </div>
               ))}
             </div>
@@ -179,7 +182,7 @@ const SpinnerContainer = () => {
   );
 };
 
-export const Spinner = {
+export const Spinner: Story = {
   render: () => {
     return (
       <div className='absolute inset-0 flex items-center justify-center'>
@@ -190,7 +193,7 @@ export const Spinner = {
 };
 
 // https://github.com/grafana/grafana/blob/main/packages/grafana-ui/src/components/LoadingBar/LoadingBar.tsx
-export const Linear = {
+export const Linear: Story = {
   render: () => {
     return (
       <div className='absolute flex flex-col inset-0 bg-black'>

package/src/components/ComposerLogo/ComposerLogo.tsx

@@ -2,7 +2,7 @@
 // Copyright 2022 DXOS.org
 //
 
-import { IconBase, type IconProps, type IconWeight } from '@phosphor-icons/react';
+import { type IconWeight } from '@phosphor-icons/react';
 import { arc, interpolateString, select } from 'd3';
 import React, {
   type CSSProperties,
@@ -17,7 +17,7 @@ import React, {
   useState,
 } from 'react';
 
-import { mx } from '@dxos/react-ui-theme';
+import { mx } from '@dxos/ui-theme';
 
 const weights = new Map<IconWeight, ReactElement>([
   [
@@ -28,9 +28,23 @@ const weights = new Map<IconWeight, ReactElement>([
   ],
 ]);
 
-const Composer = forwardRef<SVGSVGElement, IconProps>((props, ref) => (
-  <IconBase ref={ref} {...props} weights={weights} />
-));
+const Composer = forwardRef<SVGSVGElement, any>((props, ref) => {
+  const weight = props.weight || 'regular';
+  const size = props.size || 256;
+  return (
+    <svg
+      ref={ref}
+      {...props}
+      width={size}
+      height={size}
+      viewBox='0 0 256 256'
+      fill='currentColor'
+      xmlns='http://www.w3.org/2000/svg'
+    >
+      {weights.get(weight)}
+    </svg>
+  );
+});
 
 export interface AnimationController {
   spin: () => void;
@@ -103,7 +117,7 @@ export const ComposerLogo = forwardRef<AnimationController, ComposerLogoProps>(
       >
         {layers.map(({ inset, spin, style, className }, i) => (
           <div key={i} className='absolute' style={{ inset: `${inset}px` }}>
-            <Composer className={mx('w-full h-full', animate && spin, className)} style={style} />
+            <Composer className={mx('is-full bs-full', animate && spin, className)} style={style} />
           </div>
         ))}
       </div>

package/src/components/rive.stories.tsx

@@ -2,19 +2,15 @@
 // Copyright 2024 DXOS.org
 //
 
-import '@dxos-theme';
-
 import { type Rive, useRive } from '@rive-app/react-canvas';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useEffect } from 'react';
 
+import { log } from '@dxos/log';
 import { useAsyncState } from '@dxos/react-ui';
-import { mx } from '@dxos/react-ui-theme';
-import { withLayout, withTheme } from '@dxos/storybook-utils';
-
-export default {
-  title: 'ui/brand/Rive',
-  decorators: [withTheme, withLayout({ fullscreen: true, classNames: ['absolute inset-0 bg-black'] })],
-};
+import { withTheme } from '@dxos/react-ui/testing';
+import { render } from '@dxos/storybook-utils';
+import { mx } from '@dxos/ui-theme';
 
 const useFlash = (rive: Rive | null, name: string, delay: number, period: number) => {
   useEffect(() => {
@@ -45,13 +41,16 @@ const Component = ({ buffer }: { buffer: ArrayBuffer }) => {
   );
 };
 
-export const Default = () => {
+const DefaultStory = () => {
   const [buffer] = useAsyncState<ArrayBuffer>(async () => {
     // CORS set via dashboard.
-    const response = await fetch('https://dxos.network/dxos.riv', { mode: 'cors' });
-    if (response.ok) {
+    // TODO(wittjosiah): Fetch to external url fails in headless storybook test.
+    const response = await fetch('https://dxos.network/dxos.riv', { mode: 'cors' }).catch((error) => {
+      log.catch(error);
+    });
+    if (response?.ok) {
       return await response.arrayBuffer();
-    } else {
+    } else if (response) {
       console.log(response.status);
     }
   });
@@ -63,17 +62,17 @@ export const Default = () => {
   return (
     <>
       <Component buffer={buffer} />
-      <div className='flex absolute left-0 right-0 top-[120px] h-[320px] align-center'>
+      <div className='flex absolute left-0 right-0 top-[120px] bs-[320px] align-center'>
         <div
-          className='z-1 absolute inset-0 w-[800px] m-auto'
+          className='z-1 absolute inset-0 is-[800px] m-auto'
           style={{
             background: 'radial-gradient(ellipse 200% 100% at center, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0) 50%)',
           }}
         />
         <div
           className={mx(
-            'z-2 absolute inset-0 flex items-center w-[720px] m-auto p-2',
-            'text-white text-[60px] leading-tight text-center font-thin _border _border-red-500',
+            'z-2 absolute inset-0 flex items-center is-[720px] m-auto p-2',
+            'text-white text-[60px] leading-tight text-center font-thin',
           )}
         >
           The new standard for building collaborative local-first software.
@@ -82,3 +81,18 @@ export const Default = () => {
     </>
   );
 };
+
+const meta = {
+  title: 'ui/brand/Rive',
+  render: render(DefaultStory),
+  decorators: [withTheme()],
+  parameters: {
+    layout: 'fullscreen',
+  },
+} satisfies Meta<typeof DefaultStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/src/icons/Composer.tsx

@@ -2,8 +2,8 @@
 // Copyright 2023 DXOS.org
 //
 
-import { IconBase, type IconProps, type IconWeight } from '@phosphor-icons/react';
-import React, { forwardRef, type ReactElement } from 'react';
+import { type IconWeight } from '@phosphor-icons/react';
+import React, { type ReactElement, forwardRef } from 'react';
 
 const weights = new Map<IconWeight, ReactElement>([
   [
@@ -36,8 +36,22 @@ const weights = new Map<IconWeight, ReactElement>([
   ],
 ]);
 
-export const Composer = forwardRef<SVGSVGElement, IconProps>((props, ref) => (
-  <IconBase ref={ref} {...props} weights={weights} />
-));
+export const Composer = forwardRef<SVGSVGElement, any>((props, ref) => {
+  const weight = props.weight || 'regular';
+  const size = props.size || 256;
+  return (
+    <svg
+      ref={ref}
+      {...props}
+      width={size}
+      height={size}
+      viewBox='0 0 256 256'
+      fill='currentColor'
+      xmlns='http://www.w3.org/2000/svg'
+    >
+      {weights.get(weight)}
+    </svg>
+  );
+});
 
 Composer.displayName = 'Composer';

package/src/icons/DXNS.tsx

@@ -3,7 +3,7 @@
 //
 
 import { IconBase, type IconProps, type IconWeight } from '@phosphor-icons/react';
-import React, { forwardRef, type ReactElement } from 'react';
+import React, { type ReactElement, forwardRef } from 'react';
 
 const weights = new Map<IconWeight, ReactElement>([
   [

package/src/icons/DXOS.tsx

@@ -3,7 +3,7 @@
 //
 
 import { IconBase, type IconProps, type IconWeight } from '@phosphor-icons/react';
-import React, { forwardRef, type ReactElement } from 'react';
+import React, { type ReactElement, forwardRef } from 'react';
 
 const weights = new Map<IconWeight, ReactElement>([
   [

package/src/icons/ECHO.tsx

@@ -3,7 +3,7 @@
 //
 
 import { IconBase, type IconProps, type IconWeight } from '@phosphor-icons/react';
-import React, { forwardRef, type ReactElement } from 'react';
+import React, { type ReactElement, forwardRef } from 'react';
 
 const weights = new Map<IconWeight, ReactElement>([
   [

package/src/icons/HALO.tsx

@@ -3,7 +3,7 @@
 //
 
 import { IconBase, type IconProps, type IconWeight } from '@phosphor-icons/react';
-import React, { forwardRef, type ReactElement } from 'react';
+import React, { type ReactElement, forwardRef } from 'react';
 
 const weights = new Map<IconWeight, ReactElement>([
   [

package/src/icons/KUBE.tsx

@@ -3,7 +3,7 @@
 //
 
 import { IconBase, type IconProps, type IconWeight } from '@phosphor-icons/react';
-import React, { forwardRef, type ReactElement } from 'react';
+import React, { type ReactElement, forwardRef } from 'react';
 
 const weights = new Map<IconWeight, ReactElement>([
   [

package/src/icons/MESH.tsx

@@ -3,7 +3,7 @@
 //
 
 import { IconBase, type IconProps, type IconWeight } from '@phosphor-icons/react';
-import React, { forwardRef, type ReactElement } from 'react';
+import React, { type ReactElement, forwardRef } from 'react';
 
 const weights = new Map<IconWeight, ReactElement>([
   [

package/src/logotypes/DXOSHorizontalType.tsx

@@ -4,7 +4,7 @@
 
 import React, { type FC } from 'react';
 
-const defaultSize = 'w-[256px] h-[128px]';
+const defaultSize = 'is-[256px] bs-[128px]';
 
 export const DXOSHorizontalType: FC<{ className?: string }> = ({ className = defaultSize }) => {
   return (

package/src/logotypes/DXOSType.tsx

@@ -4,7 +4,7 @@
 
 import React, { type FC } from 'react';
 
-const defaultSize = 'w-[128px] h-[64px]';
+const defaultSize = 'is-[128px] bs-[64px]';
 
 export const DXOSType: FC<{ className?: string }> = ({ className = defaultSize }) => {
   return (

package/src/logotypes/DXOSVerticalType.tsx

@@ -4,7 +4,7 @@
 
 import React, { type FC } from 'react';
 
-const defaultSize = 'w-[128px] h-[128px]';
+const defaultSize = 'is-[128px] bs-[128px]';
 
 export const DXOSVerticalType: FC<{ className?: string }> = ({ className = defaultSize }) => {
   return (