@dxos/brand 0.8.3 → 0.8.4-main.1da679c

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/brand",
-  "version": "0.8.3",
+  "version": "0.8.4-main.1da679c",
   "description": "DXOS brand assets.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -10,6 +10,7 @@
   "type": "module",
   "exports": {
     ".": {
+      "source": "./src/index.ts",
       "types": "./dist/types/src/index.d.ts",
       "browser": "./dist/lib/browser/index.mjs"
     }
@@ -33,15 +34,15 @@
     "@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"
+    "@dxos/react-ui": "0.8.4-main.1da679c",
+    "@dxos/react-ui-theme": "0.8.4-main.1da679c",
+    "@dxos/storybook-utils": "0.8.4-main.1da679c"
   },
   "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"
+    "@dxos/react-ui": "0.8.4-main.1da679c",
+    "@dxos/react-ui-theme": "0.8.4-main.1da679c"
   }
 }

package/src/Icons.stories.tsx

@@ -4,22 +4,27 @@
 
 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 { 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],
-};
+} 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]';
     return (

package/src/Logotypes.stories.tsx

@@ -4,20 +4,25 @@
 
 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 { 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],
-};
+} 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,7 +30,7 @@ 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'>

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

@@ -6,25 +6,30 @@ 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 { Button, Icon } from '@dxos/react-ui';
 import { mx } from '@dxos/react-ui-theme';
 import { withTheme } from '@dxos/storybook-utils';
 
-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],
-};
+} satisfies Meta<typeof ComposerLogo>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
 
 // TODO(burdon): Get from theme?
 const colors = {
@@ -35,7 +40,7 @@ const colors = {
   blue: '#539ACD',
 };
 
-export const Default = {
+export const Default: Story = {
   render: () => {
     const controller = useRef<AnimationController>(null);
     const [logo, setLogo] = useState(false);
@@ -76,7 +81,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'],
@@ -104,7 +109,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 +117,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='w-[180px] h-[180px] text-blue-500' />
               </div>
               <div>
-                <Ghost weight='duotone' className='w-[180px] h-[180px] text-purple-500' />
+                <Icon icon='ph--ghost--duotone' classNames='w-[180px] h-[180px] text-purple-500' />
               </div>
               <div>
-                <Ghost weight='duotone' className='w-[180px] h-[180px] text-red-500' />
+                <Icon icon='ph--ghost--duotone' classNames='w-[180px] h-[180px] text-red-500' />
               </div>
             </div>
 
@@ -127,7 +132,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='w-6 h-6 text-yellow-200' />
                 </div>
               ))}
             </div>
@@ -179,7 +184,7 @@ const SpinnerContainer = () => {
   );
 };
 
-export const Spinner = {
+export const Spinner: Story = {
   render: () => {
     return (
       <div className='absolute inset-0 flex items-center justify-center'>
@@ -190,7 +195,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,
@@ -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;

package/src/components/rive.stories.tsx

@@ -5,16 +5,12 @@
 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 { 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 { render, withLayout, withTheme } from '@dxos/storybook-utils';
 
 const useFlash = (rive: Rive | null, name: string, delay: number, period: number) => {
   useEffect(() => {
@@ -45,7 +41,7 @@ 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' });
@@ -82,3 +78,21 @@ export const Default = () => {
     </>
   );
 };
+
+const meta = {
+  title: 'ui/brand/Rive',
+  render: render(DefaultStory),
+  decorators: [
+    withTheme,
+    withLayout({
+      fullscreen: true,
+      classNames: ['absolute inset-0 bg-black'],
+    }),
+  ],
+} 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>([
   [