Nervous Penpal Message

    @foxpage/foxpage-component-storybook-addon
    TypeScript icon, indicating that this package has built-in type declarations

    0.2.12 • Public • Published

    @foxpage/foxpage-component-storybook-addon

    foxpage-component-boilerplate 开发组件提供 storybook 插件.

    内部封装了想要正常运行 foxpage 组件 所需要的基础环境, 如: FoxpageCtxBaseProvider, FoxpageSsrCtxBaseProvider, 组件可直接以消费者模式使用 Provider 提供的数据

    FoxpageSsrContext

    在开发环境模拟真实环境(foxpage 平台)的 RootContext, 默认内置了 mock 版本的 RootContext 对象,

    主要为 beforeNodeBuild 钩子方法提供 props 参数

    用户可以通过 decorator 插件 的方式扩展该对象, 方式如下:

    // .storybook/decorators/foxpage-ssr.js
    import React from 'react';
    import axios from 'axios';
    import { FoxpageSsrCtxOverridesProvider } from '@foxpage/foxpage-component-storybook-addon';
    
    export const FoxpageSsrDecorator = (StoryFn) => {
      return (
        <FoxpageSsrCtxOverridesProvider value={{
          axios,
        }}>
          <StoryFn />
        </FoxpageSsrCtxOverridesProvider>
      )
    };
    
    // .storybook/preview.js
    import { makeFoxpageContextDecorator } from '@foxpage/foxpage-component-storybook-addon';
    import { FoxpageSsrDecorator } from './decorators/foxpage-ssr';
    
    export const decorators = [
      // 注意: 放在 `makeFoxpageContextDecorator()` 前, 靠后的先执行,需要 `makeFoxpageContextDecorator` 预设好基础环境, 才可扩展
      FoxpageSsrDecorator,
      makeFoxpageContextDecorator(),
    ];

    注意: 需要使用方在分别开发 开发环境插件 生产环境插件 时保证扩展的字段是一致的(开发环境可为mock 版本,能保证正常使用即可)。 提示: 开发环境插件 不仅可以简单的使用 mock 版数据, 还可以开发 storybookToolbar Panel 插件配合提供 mock 数据。

    FoxpageContext

    组件通过 useFoxpageContext 获取数据(一般用于存放页面级别的静态数据或api, 由node端计算, 组件使用), 同时支持 browser node 环境

    用户可以通过 decorator 插件 的方式扩展该对象, 方式如下:

    // .storybook/decorators/foxpage-customer-context.js
    import React from 'react';
    import { FoxpageCtxOverridesProvider } from '@foxpage/foxpage-component-context';
    
    export const FoxpageCustomerContextDecorator = (StoryFn) => {
      return (
        <FoxpageCtxOverridesProvider value={{
          // 覆盖数据
          locale: 'zh-HK(cover en-US)',
          // 扩展数据
          customerLocale: 'test locale',
        }}>
          <StoryFn />
        </FoxpageCtxOverridesProvider>
      )
    };
    
    
    // .storybook/preview.js
    import { makeFoxpageContextDecorator } from '@foxpage/foxpage-component-storybook-addon';
    import { FoxpageCustomerContextDecorator } from './decorators/foxpage-customer-context';
    
    export const decorators = [
      // 注意: 放在 `makeFoxpageContextDecorator()` 前, 靠后的先执行,需要 `makeFoxpageContextDecorator` 预设好基础环境, 才可扩展
      FoxpageCustomerContextDecorator,
      makeFoxpageContextDecorator(),
    ];
    
    export const parameters = {
      foxpageContext: {
        context: {
          locale: 'en-US',
        }
      }
    };

    withFoxpageSsr

    为了让组件在开发环境也能运行 beforeNodeBuild 钩子方法处理组件的 props 数据, 需要用户在 stories 中引入 withFoxpageSsr

    接入方式如下:

    // index.stories.tsx
    import React from 'react';
    import { withFoxpageSsr } from '@foxpage/foxpage-component-storybook-addon';
    import HelloWorld from '../src/index';
    
    export default {
      title: 'HelloWorldSsr',
      component: HelloWorld,
    };
    
    const HelloWorldSsrWrap = withFoxpageSsr({
      // 强制设置或扩展 ssrContext
      // 正常流程一般会用, 应该交给插件去做而不是组件开发组, 但组件开发者在开发环境有能力覆盖其值
      ssrContext: {},
      // 强制设置或扩展 context
      // 如果逐渐开发者不想 context 数据受外部插件控制, 可以自行 mock
      context: {
        locale: 'zh_hk',
      },
    })(HelloWorld);
    
    export const HelloWorldSsrComponent = () => {
      const props = {
        number: 2,
      };
      return <HelloWorldSsrWrap {...props} />;
    };
    
    // component.tsx
    // 参数类型请以最新的文档为准
    HelloWorld.beforeNodeBuild = async (ctx) => {
      return {
        ...data,
      };
    };

    Install

    npm i @foxpage/foxpage-component-storybook-addon

    DownloadsWeekly Downloads

    18

    Version

    0.2.12

    License

    MIT

    Unpacked Size

    24.5 kB

    Total Files

    23

    Last publish

    Collaborators

    • sqjing
    • yhdeng
    • xdrxdr
    • wangyilong
    • melody-yangjie