# @alveole/storybook 中文文档

规范地址：https://npmcn.com/package/%40alveole/storybook/

版本：2\.0\.0-alpha\.25
npm 元数据更新时间：2026-11-05T19:22:29.945Z
中文译文更新时间：2026-11-06T08:18:55.175Z
软件包许可：未声明

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40alveole/storybook
原文对照：https://npmcn.com/package/%40alveole/storybook/?lang=original

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：341 kB，191 个文件
- 模块格式：CommonJS
- TypeScript 类型：包内自带
- 运行依赖：0 个
- peer 依赖：react \*，react-native \*，@alveole/core \*，@alveole/theme \*，react-native-svg ^15\.0\.0，@alveole/components \*
- 首次发布：2026-03-24T17:41:28.706Z
- 最新版本发布：2026-11-05T09:51:22.090Z
- 近 30 天下载量：3918（2026-10-06 至 2026-11-04，npm 官方下载统计）
- 已发布版本数：116（近 12 个月 116 个）

## 中文简介

为Alveole故事和主题符号提供目录屏幕和帮助.

## 安装

```sh
npm install @alveole/storybook
```

也可以使用：`pnpm add @alveole/storybook`、`yarn add @alveole/storybook`、`bun add @alveole/storybook`

## README

# @alveole/故事书

(原始内容存档于2013-10-10) (英语). Composants réublisiouss pour exploser un course de sories and de sorms de thème.

盛大的聚会 `ui-kit` 页:1 `groove-application/app/ui-kit`(原始内容存档于2013-10-12). Mais sous une forme réutilision et indépendante d'Expo路由器.

## 总理

互联网档案馆的存檔,存档日期2013-12-04

-   `@alveole/components`
-   `@alveole/theme`
-   `react`
-   `react-native`

(原始内容存档于2018-09-25) (英语). Il doit àtre rendu dans une app déjà enveloppée par `ThemeProvider`。 。 。 .

## 不负责任的出口

Le 包导出 :

-   `StoriesScreen`
-   `StoryDetailScreen`
-   `ThemeConstantsScreen`
-   `ThemeConstantDetailScreen`
-   `ThemePaletteScreen`
-   `ThemeTypographyScreen`
-   `JsonBlock`
-   类型 `StorybookMeta`, (中文(简体) ), `StorybookModule`, (中文(简体) ), `StorybookFlag`, (中文(简体) ), `StorybookFlagKey`
-   帮助者 `utils`

## 故事重指挥器

软件包 `@alveole/storybook` 导演最精彩的故事 `packages/components`。 。 。 .

Le图案重新命令 est :

-   无 `export default` qui sat type `Story`
-   页:1 `export const` 倒出彩绘

执行《公约》 [插文. stories.tsx](https://npmcn.com/Users/corentincouq/Documents/alveole/packages/components/src/core/Box/Box.stories.tsx) 数字 :

```tsx
import { Story } from '../../type';
import { Typography } from '../Typography';
import { Box } from './Box';

export default {
  title: 'Box',
  tags: ['Kit'],
  experimental: false,
  description: 'Description du composant',
  component: Box,
  styleFn: () => 'Aucun style applique',
} satisfies Story;

export const BoxDefault = () => (
  <Box tag="box">
    <Typography>Contenu par defaut</Typography>
  </Box>
);

export const BoxPadded = () => (
  <Box p={16}>
    <Typography>Box avec padding</Typography>
  </Box>
);
```

乐 `default` (原始内容存档于2018-09-26). porte les metadones de la story. Les autres 输出 sont les 变体 `StoryDetailScreen`。 。 。 .

### 冠军 `shortDescription`

选择权。 风云四起 `description` 160个汽车客机.

-   最大160个活体
-   Texte Brut 独占( Markdown) Name
-   Utilise 倾斜 `<meta name="description">` 关于堆肥细节的页

Si缺席, la meta 描述 est calculee自发 由 rtirant le Markdown de `description`。 。 。 .

具体内容, `@alveole/storybook` (原始内容存档于2018-09-21). n'introduit pas un nouveau format de story. 我改用西来西来语 `packages/components/src/**/*.stories.tsx`。 。 。 .

## 结构事务 par le 软件包

问:

```tsx
import * as Stories from '@alveole/components/stories';
```

chaque 模块导出 se 重定向 sous une forme 等同 a :

```tsx
import type { StorybookModule } from '@alveole/storybook';

const ButtonStory = {
  default: {
    title: 'Button',
    tags: ['Kit'],
    experimental: false,
    description: 'Boutons de l application',
    figmaURL: 'https://figma.com/...',
    styleFn: () => ({}),
  },
  Primary: () => <MyButton label="Primary" />,
  Secondary: () => <MyButton label="Secondary" />,
} satisfies StorybookModule;
```

直径 :

-   `default` (原始内容存档于2018-09-21) (英语). doit contenir les metadones
-   产品出口
-   爱不释手 `StoriesScreen` 尔 `StoryDetailScreen` 我的故事主持人统一
-   le bon point d'entree est un ecran 目录 qui consomme 主题 主题 主题 主题 主题 `@alveole/components/stories`

## 少许故事

```tsx
import * as Stories from '@alveole/components/stories';
import { StoriesScreen, StoryDetailScreen, type StorybookModule } from '@alveole/storybook';
import React from 'react';

const storyList = Object.values(Stories) as StorybookModule[];

export const StoryCatalogPage = () => {
  const [selectedStory, setSelectedStory] = React.useState<StorybookModule | null>(null);

  if (selectedStory) {
    return <StoryDetailScreen story={selectedStory} />;
  }

  return (
    <StoriesScreen
      stories={storyList}
      title="UI Kit - Components"
      description="Catalogue des composants"
      onSelectStory={setSelectedStory}
    />
  );
};
```

## 实例 avec 博览会路由器

{\\fn黑体\\fs20\\shad2\\2aH82\\3aH20\\4aH33\\fscx95\\3cH592001\\be1}路途尽收 四分卫 导航系统.

```tsx
import * as Stories from '@alveole/components/stories';
import { StoriesScreen, type StorybookModule } from '@alveole/storybook';
import { router } from 'expo-router';

const storyList = Object.values(Stories) as StorybookModule[];

export default function UIKitStoriesRoute() {
  return (
    <StoriesScreen
      stories={storyList}
      onSelectStory={story => {
        router.push(`/ui-kit/components/${encodeURIComponent(story.default.title)}`);
      }}
    />
  );
}
```

赛道:

```tsx
import * as Stories from '@alveole/components/stories';
import { StoryDetailScreen, type StorybookModule } from '@alveole/storybook';
import { useLocalSearchParams } from 'expo-router';

export default function UIKitStoryDetailRoute() {
  const { component } = useLocalSearchParams<{ component: string }>();

  const story = (Object.values(Stories) as StorybookModule[]).find(entry => entry.default.title === component) ?? null;

  return <StoryDetailScreen story={story} />;
}
```

## 常住人口实例

```tsx
import * as ThemeConstants from '@alveole/theme';
import { ThemeConstantsScreen } from '@alveole/storybook';

export default function ThemeConstantsPage() {
  return (
    <ThemeConstantsScreen constants={ThemeConstants} title="UI Kit - Constants" description="Constantes du thème" />
  );
}
```

## 象征仪式

```tsx
import { ThemePaletteScreen } from '@alveole/storybook';

export default function ThemeTokensPage() {
  return <ThemePaletteScreen />;
}
```

L'écran lit le catalys des couleurs extrait au built du source du Thème (ADR 0035): une (英语) ligne par sord, avec son chemin complete, sa 细微的, son hex et son statut déprécié. 中国植物物种信息数据库.

## 印刷机实例

```tsx
import { CustomTypography } from '@alveole/theme';
import { ThemeTypographyScreen } from '@alveole/storybook';

export default function ThemeTypographyPage() {
  return <ThemeTypographyScreen typography={CustomTypography} />;
}
```

## 推荐主笔

### `StoriesScreen`

-   `stories`: 故事列表
-   `title`: 已删除页
-   `description`: 页 次
-   `emptyMessage`\[永久失效連結\] (中文(简体) )
-   `createLabel`:诽谤
-   `onCreatePress`: 回电 \\ \\ \\ \\ \\ \\
-   `onSelectStory`: 回叫 au clic sur une 故事

### `StoryDetailScreen`

-   `story`:故事节
-   `notFoundMessage`: 消息 si la 故事 est 缺席

### `ThemeConstantsScreen`

-   `constants`: 常数
-   `title`: 已删除页
-   `description`: 页 次
-   `onSelectConstant`: 召回 au clic sur une 恒定

### `ThemeConstantDetailScreen`

-   `name`:常数
-   `value`: 恒定值

### `ThemePaletteScreen`

-   `catalogue`: 阿尔韦奥勒法语区目录
-   `palette`:dépréciée et ignorée, retirée au prochain sump majeur (英语:
-   `title`: 已删除页
-   `description`: 页 次

### `ThemeTypographyScreen`

-   `typography`: objet de sorders stypo (简体中文)
-   `title`: 已删除页
-   `description`: 页 次

## 页:1

-   故事书编辑部.
-   Il ne dépend pas d ' Expo路由器, iis il est pensé pour sy s ' differse feclement. 中国植物物种信息数据库.
-   `StoryDetailScreen` 通过 `Linking.openURL`。 。 。 .
-   JSON通过 `JsonBlock`。 。 。 .

## 常见问题

### @alveole/storybook 是什么？

为Alveole故事和主题符号提供目录屏幕和帮助\.

### 如何安装 @alveole/storybook？

在项目目录运行 npm install @alveole/storybook，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\*）、react-native（\*）、@alveole/core（\*）、@alveole/theme（\*）、react-native-svg（^15\.0\.0）、@alveole/components（\*）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @alveole/storybook 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @alveole/storybook 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

### @alveole/storybook 可以商用吗？

@alveole/storybook 使用 未声明 许可。package\.json 没有声明许可证。没有许可证的代码默认保留全部权利，商用前请联系作者或查看仓库中的 LICENSE 文件。以上为概括，不构成法律意见，请以许可原文为准。

### @alveole/storybook 的下载量有多少？

根据 npm 官方下载统计，@alveole/storybook 在 2026/10/06 – 2026/11/04 这 30 天内被下载 3,918 次，日均约 131 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @alveole/storybook 还在维护吗？

最新版本 2\.0\.0-alpha\.25 发布于 2026/11/05（2 天前）；至今共发布 116 个版本，其中过去 12 个月发布了 116 个；首次发布于 2026/03/25。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。