@dxos/brand 0.0.0

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

@@ -0,0 +1,210 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import '@fontsource/k2d/100-italic.css';
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React, { useRef, useState } from 'react';
+
+import { Button, Icon } from '@dxos/react-ui';
+import { withTheme } from '@dxos/react-ui/testing';
+import { mx } from '@dxos/ui-theme';
+
+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
+
+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 = {
+  gray: '#888888',
+  purple: '#AA23D3',
+  orange: '#CA6346',
+  green: '#4DA676',
+  blue: '#539ACD',
+};
+
+export const Default: Story = {
+  render: () => {
+    const controller = useRef<AnimationController>(null);
+    const [logo, setLogo] = useState(false);
+    const handleSpin = async () => {
+      // const audio = new Audio(ident);
+      // await audio.play();
+      setTimeout(() => {
+        setLogo(true);
+      }, 1_500);
+
+      controller.current?.spin();
+    };
+
+    return (
+      <div className='absolute flex inset-0 items-center justify-center'>
+        <div className='absolute left-4 top-4'>
+          <Button onClick={handleSpin}>Spin</Button>
+        </div>
+
+        <div>
+          <div className='flex justify-center'>
+            <ComposerLogo ref={controller} size={256} />
+          </div>
+
+          <div className={mx('transition opacity-0 duration-1000', logo && 'opacity-100')}>
+            <div className={mx('text-[100px] text-teal-400 font-[k2d] italic')}>composer</div>
+            <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='is-[32px] bs-[32px]' />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  },
+};
+
+// TODO(burdon): Camo.
+export const Colors: Story = {
+  render: () => {
+    const colors = [
+      ['fill-teal-400', 'fill-teal-500', 'fill-teal-600'],
+      ['fill-orange-400', 'fill-orange-500', 'fill-orange-600'],
+      ['fill-cyan-400', 'fill-cyan-500', 'fill-cyan-600'],
+      ['fill-purple-400', 'fill-purple-500', 'fill-purple-600'],
+      ['fill-blue-500', 'fill-blue-600', 'fill-blue-700'],
+      ['fill-slate-500', 'fill-slate-600', 'fill-slate-700'],
+      ['fill-blue-500', 'fill-neutral-100', 'fill-red-500'],
+      ['fill-stone-400', 'fill-stone-500', 'fill-stone-600'],
+      ['fill-neutral-500', 'fill-neutral-600', 'fill-neutral-700'],
+    ];
+
+    return (
+      <div className='absolute inset-0 flex justify-center items-center'>
+        <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} />
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  },
+};
+
+export const Pacman: Story = {
+  render: () => {
+    return (
+      <div className='absolute inset-0 flex flex-col justify-center'>
+        <div className='flex flex-col'>
+          <div className='flex items-center p-4'>
+            <div className='flex ml-8 mr-[100px]'>
+              <div>
+                <Icon icon='ph--ghost--duotone' classNames='is-[180px] bs-[180px] text-blue-500' />
+              </div>
+              <div>
+                <Icon icon='ph--ghost--duotone' classNames='is-[180px] bs-[180px] text-purple-500' />
+              </div>
+              <div>
+                <Icon icon='ph--ghost--duotone' classNames='is-[180px] bs-[180px] text-red-500' />
+              </div>
+            </div>
+
+            <ComposerLogo size={145} classNames={['fill-yellow-200', 'fill-yellow-300', 'fill-yellow-400']} />
+
+            <div className='flex -ml-10'>
+              {Array.from({ length: 6 }).map((_, i) => (
+                <div key={i} className='p-4'>
+                  <Icon icon='ph--square--duotone' classNames='is-6 bs-6 text-yellow-200' />
+                </div>
+              ))}
+            </div>
+          </div>
+
+          <div className='flex justify-center font-mono font-light text-[60px] mt-8 text-neutral-200'>
+            <div>Ready Player 1</div>
+          </div>
+        </div>
+      </div>
+    );
+  },
+};
+
+const SpinnerContainer = () => {
+  const [spinning, setSpinning] = useState(false);
+  return (
+    <div>
+      <div className='absolute left-4 top-4'>
+        {(spinning && <Button onClick={() => setSpinning(false)}>Stop</Button>) || (
+          <Button onClick={() => setSpinning(true)}>Start</Button>
+        )}
+      </div>
+      <div className='grid grid-cols-3 gap-20'>
+        <>
+          <div className='flex justify-center items-center'>
+            <ComposerSpinner animate={spinning} gap={1} size={200} color={colors.blue} />
+          </div>
+          <div className='flex justify-center items-center'>
+            <ComposerSpinner animate={spinning} gap={1} size={200} color={colors.green} />
+          </div>
+          <div className='flex justify-center items-center'>
+            <ComposerSpinner animate={spinning} gap={1} size={200} color={colors.orange} />
+          </div>
+        </>
+        <>
+          <div className='flex justify-center items-center'>
+            <ComposerSpinner animate={spinning} gap={1} size={200} color={colors.blue} />
+          </div>
+          <div className='flex justify-center items-center'>
+            <ComposerSpinner animate={spinning} gap={1} size={100} color={colors.green} />
+          </div>
+          <div className='flex justify-center items-center'>
+            <ComposerSpinner animate={spinning} gap={1} size={40} color={colors.orange} />
+          </div>
+        </>
+      </div>
+    </div>
+  );
+};
+
+export const Spinner: Story = {
+  render: () => {
+    return (
+      <div className='absolute inset-0 flex items-center justify-center'>
+        <SpinnerContainer />
+      </div>
+    );
+  },
+};
+
+// https://github.com/grafana/grafana/blob/main/packages/grafana-ui/src/components/LoadingBar/LoadingBar.tsx
+export const Linear: Story = {
+  render: () => {
+    return (
+      <div className='absolute flex flex-col inset-0 bg-black'>
+        <div
+          className={'h-[1px] translateX(-100%) animate-progress-linear'}
+          style={{
+            background:
+              'linear-gradient(90deg, rgba(110, 159, 255, 0) 0%, #6E9FFF 80.75%, rgba(110, 159, 255, 0) 100%)',
+          }}
+        />
+      </div>
+    );
+  },
+};

package/src/components/ComposerLogo/ComposerLogo.tsx

@@ -0,0 +1,286 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import { type IconWeight } from '@phosphor-icons/react';
+import { arc, interpolateString, select } from 'd3';
+import React, {
+  type CSSProperties,
+  type FC,
+  type HTMLAttributes,
+  type ReactElement,
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+
+import { mx } from '@dxos/ui-theme';
+
+const weights = new Map<IconWeight, ReactElement>([
+  [
+    'regular',
+    <>
+      <path d='M202.206,23.705l-25.956,36.48c-14.091,-10.026 -30.956,-15.413 -48.25,-15.413c-45.935,-0 -83.228,37.293 -83.228,83.228c-0,45.935 37.293,83.228 83.228,83.228c17.294,0 34.159,-5.387 48.25,-15.413l25.956,36.48c-21.672,15.42 -47.609,23.705 -74.206,23.705c-70.645,-0 -128,-57.355 -128,-128c0,-70.645 57.355,-128 128,-128c26.597,0 52.534,8.285 74.206,23.705Z' />{' '}
+    </>,
+  ],
+]);
+
+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;
+}
+
+const defaultClassNames = ['[&>path]:fill-teal-400', '[&>path]:fill-teal-500', '[&>path]:fill-teal-600'];
+
+type Props = {
+  inset: number;
+  spin: string;
+  className: string;
+  style: CSSProperties;
+};
+
+const getLayers = (size: number, [a, b, c]: string[]): Props[] => {
+  return [
+    {
+      inset: 0,
+      spin: 'animate-[spin_2s_linear_infinite]',
+      style: {},
+      className: a,
+    },
+    {
+      inset: size / 6,
+      spin: 'animate-[spin_2s_linear_infinite]',
+      style: {
+        animationDirection: 'reverse',
+      },
+      className: b,
+    },
+    {
+      inset: size / 3.6,
+      spin: 'animate-[spin_1s_linear_infinite]',
+      style: {},
+      className: c,
+    },
+  ];
+};
+
+type ComposerLogoProps = { animate?: boolean; size?: number; classNames?: string[] } & Omit<
+  HTMLAttributes<HTMLDivElement>,
+  'className'
+>;
+
+export const ComposerLogo = forwardRef<AnimationController, ComposerLogoProps>(
+  ({ animate: _animate = false, size = 32, classNames = defaultClassNames, ...props }: ComposerLogoProps, ref) => {
+    const layers = useMemo(() => getLayers(size, classNames), [size, classNames]);
+    const [animate, setAnimate] = useState(_animate);
+    useImperativeHandle(
+      ref,
+      () => ({
+        spin: () => {
+          setAnimate(true);
+          setTimeout(() => {
+            setAnimate(false);
+          }, 2_000);
+        },
+      }),
+      [],
+    );
+
+    return (
+      <div
+        {...props}
+        className='flex relative'
+        style={{
+          width: size,
+          height: size,
+        }}
+      >
+        {layers.map(({ inset, spin, style, className }, i) => (
+          <div key={i} className='absolute' style={{ inset: `${inset}px` }}>
+            <Composer className={mx('is-full bs-full', animate && spin, className)} style={style} />
+          </div>
+        ))}
+      </div>
+    );
+  },
+);
+
+type Slice = {
+  startAngle?: number;
+  endAngle?: number;
+  innerRadius: number;
+  outerRadius: number;
+  color: string;
+  duration: number;
+};
+
+const createSlices = ({
+  color,
+  radius,
+  gap = 0,
+  t = 1,
+}: {
+  color: string;
+  radius: number;
+  gap?: number;
+  t?: number;
+}): Slice[] => {
+  const n = radius < 50 ? 3 : radius < 100 ? 4 : 5;
+  const parts: Pick<Slice, 'duration'>[] = [
+    {
+      duration: 1600,
+    },
+    {
+      duration: 1400,
+    },
+    {
+      duration: 1200,
+    },
+    {
+      duration: 1000,
+    },
+    {
+      duration: 800,
+    },
+  ].slice(0, n);
+
+  const width = radius / (parts.length + 1);
+
+  return parts.map(({ duration }, i) => ({
+    outerRadius: radius - i * width,
+    innerRadius: radius - (i + 1) * width + gap,
+    color: color + (0xa0 - i * 0x15).toString(16),
+    duration: duration * t,
+  }));
+};
+
+/**
+ * Spinning Composer "C" logo.
+ */
+// TODO(burdon): Configure stripes.
+export const ComposerSpinner: FC<{
+  animate?: boolean;
+  size?: number;
+  gap?: number;
+  color?: string;
+  autoFade?: boolean;
+  onClick?: () => void;
+}> = ({ animate, size = 200, gap = 1, color = '#999999', autoFade, onClick }) => {
+  const ref = useRef<SVGSVGElement>(null);
+  const triggerRef = useRef(() => {});
+  const animateRef = useRef(animate);
+  useEffect(() => {
+    animateRef.current = animate;
+    if (animate) {
+      triggerRef.current();
+    }
+  }, [animate]);
+
+  useEffect(() => {
+    const svg = select(ref.current)
+      .attr('width', size)
+      .attr('height', size)
+      .append('g')
+      .attr('transform', `translate(${size / 2}, ${size / 2})`);
+
+    // TODO(burdon): Pass in.
+    const arcs = createSlices({ radius: size / 2, gap, color });
+
+    let count = 0;
+    const fadeOut = () => {
+      if (--count === 0) {
+        svg
+          .selectAll('path')
+          .transition()
+          .delay((_: any, i: any) => i * 200)
+          .duration(2_000)
+          .attr('opacity', 0);
+      }
+    };
+
+    // const createArc = ({
+    //   innerRadius,
+    //   outerRadius,
+    //   startAngle = (1 / 4) * Math.PI,
+    //   endAngle = -(5 / 4) * Math.PI,
+    // }: Slice): ValueFn<SVGPathElement, DefaultArcObject, string | null> =>
+    //   arc().innerRadius(innerRadius).outerRadius(outerRadius).startAngle(startAngle).endAngle(endAngle);
+
+    const trigger = arcs.map(
+      ({
+        startAngle = (1 / 4) * Math.PI,
+        endAngle = -(5 / 4) * Math.PI,
+        innerRadius,
+        outerRadius,
+        color,
+        duration,
+      }) => {
+        const arcPath = svg
+          .append('path')
+          .attr(
+            'd',
+            arc().innerRadius(innerRadius).outerRadius(outerRadius).startAngle(startAngle).endAngle(endAngle) as any,
+          )
+          .attr('fill', color);
+        const rotateArc = () => {
+          arcPath
+            .attr('opacity', 1)
+            .transition()
+            .duration(duration)
+            .attrTween('transform', (() => interpolateString('rotate(0)', 'rotate(360)')) as any)
+            .on('end', ((_: any, i: number, nodes: Node[]) => {
+              if (animateRef.current) {
+                rotateArc();
+              } else if (autoFade) {
+                fadeOut();
+                // d3.select(nodes[i])
+                //   .transition()
+                //   .duration(1000)
+                //   .attrTween('d', () => {
+                //     const interpolate = d3.interpolate(0, Math.PI);
+                //     return (t: number) => createArc(arc);
+                //   });
+              }
+            }) as any);
+        };
+
+        return rotateArc;
+      },
+    );
+
+    triggerRef.current = () => {
+      count = trigger.length;
+      trigger.forEach((rotate) => rotate());
+    };
+
+    if (animate) {
+      triggerRef.current();
+    }
+
+    return () => {
+      select(ref.current).selectChildren().remove();
+    };
+  }, []);
+
+  return <svg ref={ref} onClick={onClick} />;
+};

package/src/components/ComposerLogo/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+export * from './ComposerLogo';

package/src/components/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+export * from './ComposerLogo';

package/src/components/rive.stories.tsx

@@ -0,0 +1,98 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+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 { 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(() => {
+    let t: any;
+    if (rive) {
+      t = setTimeout(() => {
+        t = setInterval(() => {
+          rive?.play(name);
+        }, period);
+      }, delay);
+    }
+
+    return () => clearTimeout(t);
+  }, [rive]);
+};
+
+const Component = ({ buffer }: { buffer: ArrayBuffer }) => {
+  // https://rive.app/community/doc/rive-parameters/docHI9ASztXP
+  const { rive, RiveComponent } = useRive({ buffer, autoplay: false });
+  useFlash(rive, 'flash-1', 500, 3_000);
+  useFlash(rive, 'flash-2', 2_000, 2_000);
+
+  return (
+    <div className='m-8 relative flex grow justify-center'>
+      <RiveComponent />
+      <div className='z-1 absolute inset-0' style={{ background: 'radial-gradient(transparent, black)' }} />
+    </div>
+  );
+};
+
+const DefaultStory = () => {
+  const [buffer] = useAsyncState<ArrayBuffer>(async () => {
+    // CORS set via dashboard.
+    // 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 if (response) {
+      console.log(response.status);
+    }
+  });
+
+  if (!buffer) {
+    return null;
+  }
+
+  return (
+    <>
+      <Component buffer={buffer} />
+      <div className='flex absolute left-0 right-0 top-[120px] bs-[320px] align-center'>
+        <div
+          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 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.
+        </div>
+      </div>
+    </>
+  );
+};
+
+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

@@ -0,0 +1,57 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type IconWeight } from '@phosphor-icons/react';
+import React, { type ReactElement, forwardRef } from 'react';
+
+const weights = new Map<IconWeight, ReactElement>([
+  [
+    'regular',
+    <>
+      <g transform='matrix(0.969697,0,0,1,-570.182,0)'>
+        <rect x='588' y='0' width='264' height='256' style={{ fill: 'none' }} />
+        <g transform='matrix(0.917198,0,0,1,-223.93,-876)'>
+          <path
+            d='M1065.83,1064L1029.14,1064C991.913,1064 961.684,1037.12 961.684,1004C961.684,971.197 991.282,944.542 1028.02,944.008L1028.02,944L1047.85,944L1039.21,968L1029.14,968C1006.79,968 988.669,984.118 988.669,1004C988.669,1023.87 1006.81,1040 1029.14,1040C1029.38,1040 1029.62,1040 1029.85,1040L1029.85,1040L1074.47,1040L1065.83,1064ZM1083.11,1040L1083.11,1040L1083.11,1064L1083.11,1064L1083.11,1040Z'
+            style={{ fill: 'rgb(1,122,183)' }}
+          />
+        </g>
+        <path
+          d='M761.579,164L720,164C699.51,164 682.875,147.869 682.875,128C682.875,108.452 698.942,92.543 718.969,92.014L718.969,92L729.238,92L721.317,116L720,116C713.165,116 707.625,121.373 707.625,128C707.625,134.623 713.17,140 720,140C720.072,140 720.144,139.999 720.216,139.998L720.216,140L769.5,140L761.579,164Z'
+          style={{ fill: 'rgb(6,197,253)' }}
+        />
+        <path
+          d='M745.738,212L720.025,212L720,212C672.202,212 633.389,174.377 633.375,128.024C633.361,81.958 671.591,44.542 718.969,44.006L718.969,44L719.975,44L745.079,44L737.159,68L719.982,68C685.809,68.01 658.115,94.88 658.125,128.017C658.135,161.126 685.858,188 720,188L720.018,188C720.378,188 720.738,187.997 721.098,187.991L721.098,188L753.659,188L745.738,212Z'
+          style={{ fill: 'rgb(10,75,105)' }}
+        />
+        <g transform='matrix(1.03125,0,0,1,588,0)'>
+          <path
+            d='M128,236C68.393,236 20,187.607 20,128C20,68.353 68.353,20 128,20L160,20L152.319,44L128,44C81.608,44 44,81.608 44,128C44,174.361 81.639,212 128,212C127.756,212.004 127.878,212.004 128,212.003C128.122,212.002 128.244,212 128,212L152.958,212L145.277,236L128,236ZM128,236C128.628,236 127.372,236.011 128,236Z'
+            style={{ fill: 'rgb(5,40,61)' }}
+          />
+        </g>
+      </g>
+    </>,
+  ],
+]);
+
+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';