LAPLACE

https://storybook.laplace.live/
Admin
LAPLACE is a platform featuring a comprehensive design system and a rich library of UI components,...
Tokens:3,959
Snippets:14
Trust Score:6.7
Update:1 year ago
Show doc for...
Tokens:
Raw
### Storybook Addons and Interaction Testing

Source: https://context7.com/context7/storybook_laplace_live/llms.txt

Lists common Storybook addon panels available for enhancing the development workflow, such as Controls, Actions, and Accessibility. Also includes an example of a 'play' function for interaction testing.

```javascript
// Available Addon Panels
const addons = {
  controls: "Controls",        // Interactive prop controls
  actions: "Actions",          // Event handler logging
  interactions: "Interactions", // Interaction testing with play functions
  accessibility: "Accessibility", // a11y testing
  visualTests: "Visual tests", // Visual regression testing
  html: "HTML"                 // Generated HTML markup viewer
};

// Interactions Example
// Write play functions to test component behavior
const playFunction = async ({ canvasElement }) => {
  const canvas = within(canvasElement);
  const avatar = canvas.getByRole('img');

  // Verify avatar loads
  await waitFor(() => expect(avatar).toBeInTheDocument());

  // Test interactions
  await userEvent.hover(avatar);
  await expect(canvas.getByText('Guard Level 0')).toBeVisible();
};
```

--------------------------------

### Avatar Component TypeScript Interface and Example

Source: https://context7.com/context7/storybook_laplace_live/llms.txt

Defines the TypeScript interface for Avatar component props, outlining available properties like user ID, size, guard level, and live status. Includes an example object demonstrating how to configure these props.

```typescript
// Avatar Component Props
interface AvatarProps {
  uid: number;           // User ID (required)
  size?: number;         // Avatar size in pixels
  guard?: number;        // Guard level (0-3)
  avatar?: string;       // Custom avatar URL
  frame?: string;        // Frame image URL
  frameTitle?: string;   // Frame title/name
  frameRank?: number;    // Frame rank/tier
  perkLevel?: number;    // User perk level
  live?: boolean;        // Live streaming indicator
  className?: string;    // Additional CSS classes
}

// Example: Avatar with guard level and perk
const userAvatar = {
  uid: 2763,
  size: 64,
  guard: 0,
  frameRank: 1,
  perkLevel: 1,
  live: true
};
```

--------------------------------

### HTML Avatar Component Example

Source: https://storybook.laplace.live/index_path=%2Fstory%2Fcomponents-avatar--no-avatar

This snippet shows the HTML structure for an Avatar component. It includes attributes for user ID, size, guard level, frame, frame title, perk level, and live status. The component renders an image with specific styling and referrerpolicy settings.

```html
<div class="_wrap_12vzt_1 avatar-wrap _guardLevel0_12vzt_48 _frameRank1_12vzt_57 _perkLevel1_12vzt_58 guard-level--0 perk-level--1" data-uid="18571231231"><div class="_avatarFrame_12vzt_20 avatar-frame"></div><picture class="_avatarImgWrap_12vzt_44 avatar-img-wrap"><img alt="头像" referrerpolicy="no-referrer" class="_avatar_12vzt_9 avatar" loading="lazy" src="https://workers.vrp.moe/bilibili/avatar/18571231231?size=64"></picture></div>
```

--------------------------------

### Storybook Component Property Controls

Source: https://context7.com/context7/storybook_laplace_live/llms.txt

Defines the TypeScript interface for component controls and provides an example configuration for the 'avatar' component. This allows for interactive manipulation of component props within the Storybook UI for testing purposes.

```typescript
// Control Types for Component Props
interface ComponentControls {
  // String controls
  propertyName?: string;      // Set string

  // Number controls
  size?: number;              // Set number
  guard?: number;             // Set number
  frameRank?: number;         // Set number
  perkLevel?: number;         // Set number

  // Boolean controls
  live?: boolean;             // Set boolean
}

// Example control configuration
const avatarControls = {
  uid: { control: 'number', description: 'User ID' },
  size: { control: { type: 'number', min: 32, max: 256 } },
  guard: { control: { type: 'number', min: 0, max: 3 } },
  avatar: { control: 'text' },
  frame: { control: 'text' },
  frameTitle: { control: 'text' },
  frameRank: { control: { type: 'number', min: 1, max: 10 } },
  perkLevel: { control: { type: 'number', min: 0, max: 5 } },
  live: { control: 'boolean' },
  className: { control: 'text' }
};
```

--------------------------------

### Storybook Component Rendering Troubleshooting

Source: https://context7.com/context7/storybook_laplace_live/llms.txt

Provides common solutions for troubleshooting component rendering issues in Storybook, including adding necessary decorators for context/providers, configuring build tools like Vite, and managing environment variables. Includes debugging steps.

```javascript
// Error: No Preview / Component Failed to Render
// Common causes and solutions:

// 1. Missing Context/Providers - Add decorators
export const decorators = [
  (Story) => (
    <ThemeProvider theme={theme}>
      <UserContextProvider>
        <Story />
      </UserContextProvider>
    </ThemeProvider>
  )
];

// 2. Misconfigured Build Tool (Vite/Webpack)
// .storybook/main.js
module.exports = {
  viteFinal: async (config) => {
    config.resolve.alias = {
      ...config.resolve.alias,
      '@': path.resolve(__dirname, '../src')
    };
    return config;
  }
};

// 3. Missing Environment Variables
// .storybook/main.js
module.exports = {
  env: (config) => ({
    ...config,
    VITE_API_URL: process.env.VITE_API_URL,
    VITE_CDN_URL: process.env.VITE_CDN_URL
  })
};

// Debugging steps:
// 1. Check browser console for errors
// 2. Check Storybook terminal output
// 3. Verify all required providers are included
// 4. Ensure all assets and dependencies load correctly
```

--------------------------------

### Storybook URL Patterns and Navigation

Source: https://context7.com/context7/storybook_laplace_live/llms.txt

Defines URL patterns for accessing component documentation and story pages within Storybook. Includes a shortcut for component search. Useful for understanding Storybook's routing and for programmatic navigation.

```javascript
// Documentation URL Patterns
const docUrls = {
  // Component documentation
  avatarDocs: "/docs/components-avatar--docs",
  welcomeDocs: "/docs/laplace-chat_welcome--docs",

  // Story pages
  avatarPrimary: "/story/components-avatar--primary",
  avatarCustomSize: "/story/components-avatar--custom-size",
  avatarNoAvatar: "/story/components-avatar--no-avatar"
};

// Iframe embed pattern for isolated component rendering
const iframePattern = "iframe_id=components-avatar--primary";

// Navigation via keyboard shortcut
const searchShortcut = "⌃ K"; // Control + K to search components
```

--------------------------------

### Basic Avatar HTML Structure

Source: https://context7.com/context7/storybook_laplace_live/llms.txt

Demonstrates the basic HTML structure for rendering an Avatar component, including image sources and CSS class names for styling. This is a static representation and does not include dynamic data binding.

```html
<!-- Basic Avatar Usage -->
<div class="_wrap_12vzt_1 avatar-wrap _guardLevel0_12vzt_48 _frameRank1_12vzt_57 _perkLevel1_12vzt_58 guard-level--0 perk-level--1" data-uid="2763">
  <div class="_avatarFrame_12vzt_20 avatar-frame"></div>
  <picture class="_avatarImgWrap_12vzt_44 avatar-img-wrap">
    <img alt="头像"
         referrerpolicy="no-referrer"
         class="_avatar_12vzt_9 avatar"
         loading="lazy"
         src="https://workers.vrp.moe/bilibili/avatar/2763?size=64">
  </picture>
</div>
```

--------------------------------

### Avatar Component Storybook Stories (TypeScript)

Source: https://context7.com/context7/storybook_laplace_live/llms.txt

Illustrates how to define different stories for the Avatar component in Storybook. Includes configurations for a primary user, custom sizing, and a fallback state when no avatar is available.

```typescript
// Primary Story - Standard user avatar
export const Primary = {
  args: {
    uid: 2763,
    size: 64,
    guard: 0,
    frameRank: 1,
    perkLevel: 1,
    live: false
  }
};

// Custom Size Story - Different size configurations
export const CustomSize = {
  args: {
    uid: 2763,
    size: 128,
    guard: 2,
    perkLevel: 3
  }
};

// No Avatar Story - Fallback state
export const NoAvatar = {
  args: {
    uid: 0,
    size: 64
  }
};
```

--------------------------------

### Display Avatar Component with Various Properties (HTML)

Source: https://storybook.laplace.live/index_path=%2Fstory%2Fcomponents-avatar--custom-size

This HTML snippet demonstrates the structure of an Avatar component within the Laplace Live project. It includes attributes for user ID, size, guard level, frame, frame title, frame rank, perk level, live status, and CSS classes. The component displays an image fetched from a specified URL.

```html
<div class="_wrap_12vzt_1 avatar-wrap _guardLevel0_12vzt_48 _frameRank1_12vzt_57 _perkLevel1_12vzt_58 guard-level--0 perk-level--1" data-uid="2763"><div class="_avatarFrame_12vzt_20 avatar-frame"></div><picture class="_avatarImgWrap_12vzt_44 avatar-img-wrap"><img alt="头像" referrerpolicy="no-referrer" class="_avatar_12vzt_9 avatar" loading="lazy" src="https://workers.vrp.moe/bilibili/avatar/2763?size=128"></picture></div>
```

--------------------------------

### TypeScript Event Component Interfaces for Live Streaming

Source: https://context7.com/context7/storybook_laplace_live/llms.txt

Defines TypeScript interfaces for various event components used in live streaming rooms. These interfaces cover chat messages, user actions, room management, monetization, and system notifications, providing structure for real-time data handling.

```typescript
// Event Component Categories
interface LiveEventSystem {
  // Chat and messaging
  danmaku: DanmakuEvent;
  effectDanmaku: EffectDanmakuEvent;
  superChat: SuperChatEvent;

  // User actions
  entryEffect: EntryEffectEvent;
  gift: GiftEvent;
  likeClick: LikeClickEvent;
  interaction: InteractionEvent;

  // Room management
  liveStart: LiveStartEvent;
  liveEnd: LiveEndEvent;
  liveCutoff: LiveCutoffEvent;
  liveWarning: LiveWarningEvent;
  roomNameUpdate: RoomNameUpdateEvent;
  roomMuteOn: RoomMuteOnEvent;
  roomMuteOff: RoomMuteOffEvent;

  // Monetization
  lotteryStart: LotteryStartEvent;
  lotteryResult: LotteryResultEvent;
  redEnvelopeStart: RedEnvelopeStartEvent;
  redEnvelopeResult: RedEnvelopeResultEvent;

  // Recognition
  mvp: MVPEvent;

  // System
  notice: NoticeEvent;
  system: SystemEvent;
  toast: ToastEvent;
  userBlock: UserBlockEvent;
}

// Example: Gift Event
interface GiftEvent {
  userId: number;
  username: string;
  giftId: number;
  giftName: string;
  giftPrice: number;
  quantity: number;
  timestamp: Date;
}

// Example: SuperChat Event
interface SuperChatEvent {
  userId: number;
  username: string;
  avatar: string;
  message: string;
  amount: number;
  duration: number; // Pin duration in seconds
  timestamp: Date;
}
```

--------------------------------

### Storybook Component Navigation Structure (JavaScript)

Source: https://context7.com/context7/storybook_laplace_live/llms.txt

Defines the hierarchical structure for organizing components within the Storybook. It categorizes components into logical groups like 'Components', 'Events', 'UI', and 'Design System' for easy navigation.

```javascript
// Component Navigation Structure
const storybookStructure = {
  "Components": [
    "Avatar",
    "Medal",
    "Wealth Medal"
  ],
  "Events": [
    "Danmaku",
    "Effect Danmaku",
    "Entry Effect",
    "Gift",
    "Interaction",
    "Like Click",
    "Live Cutoff",
    "Live End",
    "Live Start",
    "Live Warning",
    "Lottery Result",
    "Lottery Start",
    "MVP",
    "Notice",
    "Red Envelope Result",
    "Red Envelope Start",
    "Room Mute Off",
    "Room Mute On",
    "Room Name Update",
    "SuperChat",
    "System",
    "Toast",
    "User Block"
  ],
  "UI": [
    "Accordion",
    "Badge",
    "Button",
    "Calendar",
    "Checkbox with Label",
    "Dropdown Menu",
    "Input with Label",
    "Input",
    "Loading Simple",
    "Loading",
    "Pagination",
    "Radio with Label",
    "Scroll Area",
    "Skeleton",
    "Sonner",
    "Switch with Label"
  ],
  "Design System": [
    "Colors",
    "Shadows"
  ],
  "LAPLACE Chat": [
    "Welcome"
  ]
};

// Accessing component stories
// URL Pattern: /story/[category]-[component]--[story-name]
// Example: /story/components-avatar--primary
```

--------------------------------

### Avatar Component HTML Structure

Source: https://storybook.laplace.live/index_path=%2Fstory%2Fcomponents-avatar--primary

This HTML snippet represents the structure of the Avatar component as rendered in the UI. It includes attributes for user identification (uid), size, guard level, avatar image source, frame, title, rank, perk level, live status, class name, and interaction event handling.

```html
<div class="_wrap_12vzt_1 avatar-wrap _guardLevel0_12vzt_48 _frameRank1_12vzt_57 _perkLevel1_12vzt_58 guard-level--0 perk-level--1" data-uid="2763"><div class="_avatarFrame_12vzt_20 avatar-frame"></div><picture class="_avatarImgWrap_12vzt_44 avatar-img-wrap"><img alt="头像" referrerpolicy="no-referrer" class="_avatar_12vzt_9 avatar" loading="lazy" src="https://workers.vrp.moe/bilibili/avatar/2763?size=64"></picture></div>
```

--------------------------------

### CSS Design Tokens for LAPLACE Live Shadows

Source: https://context7.com/context7/storybook_laplace_live/llms.txt

Defines CSS custom properties for the elevation system using box shadows in the LAPLACE Live application. These tokens create visual hierarchy and depth, including standard elevation levels and component-specific shadows for elements like avatars and super chat messages.

```css
/* Shadow System - Elevation Tokens */
:root {
  /* Elevation levels */
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1),
               0 1px 2px -1px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
               0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
               0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
               0 8px 10px -6px rgba(0, 0, 0, 0.1);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

  /* Component-specific shadows */
  --shadow-avatar-frame: 0 0 8px rgba(99, 102, 241, 0.5);
  --shadow-superchat: 0 4px 12px rgba(239, 68, 68, 0.3);
  --shadow-gift: 0 4px 12px rgba(168, 85, 247, 0.3);
}

/* Usage Example */
.avatar-frame {
  box-shadow: var(--shadow-avatar-frame);
}

.superchat-message {
  box-shadow: var(--shadow-superchat);
}
```

--------------------------------

### CSS Design Tokens for LAPLACE Live Colors

Source: https://context7.com/context7/storybook_laplace_live/llms.txt

Defines CSS custom properties for the color system used in the LAPLACE Live application. These design tokens ensure visual consistency across the UI, including primary, status, guard, perk, and live status colors.

```css
/* Color Palette - Design System Tokens */
:root {
  /* Primary colors */
  --color-primary: #6366f1;
  --color-primary-hover: #4f46e5;
  --color-primary-active: #4338ca;

  /* Status colors */
  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-error: #ef4444;
  --color-info: #3b82f6;

  /* Guard levels */
  --color-guard-0: #808080;
  --color-guard-1: #3b82f6;
  --color-guard-2: #a855f7;
  --color-guard-3: #f59e0b;

  /* Perk levels */
  --color-perk-1: #10b981;
  --color-perk-2: #3b82f6;
  --color-perk-3: #a855f7;
  --color-perk-4: #f59e0b;
  --color-perk-5: #ef4444;

  /* Live status */
  --color-live: #ef4444;
  --color-offline: #6b7280;
}
```
Tokens:
Raw