feat: LiveKit OSS Shadcn setup (#1248)

Author: thomasyuill-livekit

docs/storybook/.env.example

@@ -1,9 +1,13 @@
 # LiveKit
-# Create a project on livekit.cloud or use a local LiveKit server instance to generate a test token.
+# Create a project on cloud.livekit.io 
+# or use a local LiveKit server instance to generate a test token.
 # Increase the token TTL to something big so you don't have to update it so often.
 VITE_PUBLIC_LK_SERVER_URL=wss://<domain>.livekit.cloud
 VITE_PUBLIC_TEST_TOKEN=
 
+# For agents-ui, create a sandbox token server on cloud.livekit.io  
+# or modify tokenSource in docs/storybook/.storybook/lk-decorators/AgentSessionProvider.tsx
+VITE_PUBLIC_LK_SANDBOX_TOKEN_SERVER_ID=
 
 # STORYBOOK
 # https://storybook.js.org/docs/react/configure/telemetry#how-to-opt-out

docs/storybook/.eslintrc.js

@@ -4,7 +4,7 @@
  */
 module.exports = {
   root: true,
-  extends: ['custom'],
+  extends: ['custom', 'plugin:storybook/recommended'],
   rules: {
     'import/no-anonymous-default-export': [
       'warn',

docs/storybook/.storybook/env.d.ts

@@ -2,6 +2,7 @@
 interface ImportMetaEnv {
   readonly VITE_PUBLIC_LK_SERVER_URL: string;
   readonly VITE_PUBLIC_TEST_TOKEN: string;
+  readonly VITE_PUBLIC_LK_SANDBOX_TOKEN_SERVER_ID: string;
   // more env variables...
 }
 

docs/storybook/.storybook/lk-decorators/AgentSessionProvider.tsx

@@ -0,0 +1,46 @@
+import React, { useEffect, useMemo } from 'react';
+import { Decorator } from '@storybook/react-vite';
+import {
+  useLocalParticipant,
+  SessionProvider,
+  useSession,
+  type TrackReference,
+} from '@livekit/components-react';
+import { TokenSource, Track } from 'livekit-client';
+
+const TOKEN_SOURCE = TokenSource.sandboxTokenServer(
+  import.meta.env.VITE_PUBLIC_LK_SANDBOX_TOKEN_SERVER_ID,
+);
+
+export const AgentSessionProvider: Decorator = (Story: StoryFn) => {
+  const session = useSession(TOKEN_SOURCE);
+
+  useEffect(() => {
+    session.start();
+    return () => session.end();
+  }, []);
+
+  return (
+    <SessionProvider session={session}>
+      <Story />
+    </SessionProvider>
+  );
+};
+
+export function useMicrophone() {
+  const { microphoneTrack, localParticipant } = useLocalParticipant();
+
+  useEffect(() => {
+    localParticipant.setMicrophoneEnabled(true, undefined);
+  }, []);
+
+  return useMemo(
+    () =>
+      ({
+        participant: localParticipant,
+        source: Track.Source.Microphone,
+        publication: microphoneTrack,
+      }) as TrackReference,
+    [microphoneTrack],
+  );
+}

docs/storybook/.storybook/lk-decorators/LayoutContext.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Decorator } from '@storybook/react';
+import { Decorator } from '@storybook/react-vite';
 import {
   LayoutContextProvider,
   useParticipants,

docs/storybook/.storybook/lk-decorators/MockParticipantContext.tsx

@@ -1,5 +1,5 @@
 import { ParticipantContext } from '@livekit/components-react';
-import { Decorator } from '@storybook/react';
+import { Decorator } from '@storybook/react-vite';
 import { ConnectionQuality, Participant, ParticipantEvent } from 'livekit-client';
 import * as React from 'react';
 

docs/storybook/.storybook/lk-decorators/ParticipantContext.tsx

@@ -5,7 +5,7 @@ import {
   useLocalParticipant,
   useTracks,
 } from '@livekit/components-react';
-import { Decorator } from '@storybook/react';
+import { Decorator } from '@storybook/react-vite';
 import { Track } from 'livekit-client';
 
 /**

docs/storybook/.storybook/lk-decorators/RoomContext.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { LiveKitRoom } from '@livekit/components-react';
-import { Decorator } from '@storybook/react';
+import { Decorator } from '@storybook/react-vite';
 import { Room } from 'livekit-client';
 
 export type RoomContextSettings = Partial<{

docs/storybook/.storybook/lk-decorators/withNextThemes.tsx

@@ -0,0 +1,48 @@
+import { DecoratorHelpers } from '@storybook/addon-themes';
+import type { ReactRenderer } from '@storybook/react';
+import { ThemeProvider, type ThemeProviderProps, useTheme } from 'next-themes';
+import { type PropsWithChildren, useEffect } from 'react';
+import type { DecoratorFunction } from 'storybook/internal/types';
+
+type ThemeSwitcherProps = PropsWithChildren<{
+  theme: string;
+}>;
+
+const ThemeSwitcher = ({ theme, children }: ThemeSwitcherProps) => {
+  const { setTheme } = useTheme();
+  useEffect(() => setTheme(theme), [theme]);
+  /**
+   * If you're using tailwind and want your background to be displayed in the preview,
+   * use <div className="bg-background">{children}</div> instead
+   */
+  return children;
+};
+
+type NextThemesDecorator = Omit<ThemeProviderProps, 'defaultTheme' | 'themes'> & {
+  themes: Record<string, string>;
+  defaultTheme: string;
+};
+
+const { initializeThemeState, pluckThemeFromContext } = DecoratorHelpers;
+
+export const withNextThemes = ({
+  themes,
+  defaultTheme,
+  ...props
+}: NextThemesDecorator): DecoratorFunction<ReactRenderer> => {
+  initializeThemeState(Object.keys(themes), defaultTheme);
+
+  return (Story, context) => {
+    const selectedTheme = pluckThemeFromContext(context);
+    const { themeOverride } = context.parameters.themes ?? {};
+    const selected = themeOverride ?? selectedTheme ?? defaultTheme;
+
+    return (
+      <ThemeProvider defaultTheme={defaultTheme} {...props}>
+        <ThemeSwitcher theme={selected}>
+          <Story />
+        </ThemeSwitcher>
+      </ThemeProvider>
+    );
+  };
+};

docs/storybook/.storybook/main.js

@@ -1,11 +1,12 @@
 // @ts-check
 const path = require('path');
 module.exports = {
-  stories: ['../stories/**/*.stories.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../stories/**/*.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'],
   addons: [
     '@storybook/addon-links',
-    '@storybook/addon-essentials',
-    '@storybook/addon-interactions',
+    '@storybook/addon-docs',
+    '@storybook/addon-styling-webpack',
+    '@storybook/addon-themes'
   ],
   framework: {
     name: '@storybook/react-vite',
@@ -20,4 +21,23 @@ module.exports = {
   typescript: {
     reactDocgen: 'react-docgen-typescript',
   },
+  async viteFinal(config) {
+    const { default: tailwindcss } = await import('@tailwindcss/vite');
+
+    return {
+      ...config,
+      plugins: [...config.plugins, tailwindcss()],
+      esbuild: {
+        ...config.esbuild,
+        jsx: 'automatic',
+      },
+      resolve: {
+        ...config.resolve,
+        alias: {
+          ...config.resolve?.alias,
+          '@': path.resolve(__dirname, '../../../packages/shadcn'),
+        },
+      },
+    };
+  },
 };