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

    0.1.2 • Public • Published

    @tramvai/storybook-addon

    Storybook addon for tramvai apps

    Installation

    You need to install @tramvai/storybook-addon:

    npm install @tramvai/storybook-addon

    And connect addon in the storybook configuration file:

    module.exports = {
      addons: ["@tramvai/storybook-addon"]
    }

    Features

    • Providers for DI container
    • Providers for router
    • Providers for react-query
    • Page actions support
    • tramvai babel configuration
    • tramvai postcss configuration

    How to

    Access to DI container

    import { LOGGER_TOKEN } from '@tramvai/tokens-common';
    
    export const Page = () => {
      const logger = useDi(LOGGER_TOKEN);
    
      logger.info('render');
    
      return (
        <h1>Page</h1>
      );
    }
    import type { TramvaiStoriesParameters } from '@tramvai/storybook-addon';
    import { Page } from './page';
    
    // You can pass to DI container any reducers, providers and modules
    const parameters: TramvaiStoriesParameters = {
      tramvai: {
        stores: [],
        initialState: {},
        providers: [],
        modules: [],
      },
    };
    
    export default {
      title: 'Page',
      component: Page,
      parameters,
    };
    
    export const PageStory = () => <Page />;

    Router hooks and components

    import { Link, useUrl } from '@tramvai/module-router';
    
    export const Page = () => {
      const url = useUrl();
    
      return (
        <>
          <h1>Page at {url.pathname}</h1>
          <p>
            <Link url="/third/">to third page</Link>
          </p>
        </>
      );
    }
    import type { TramvaiStoriesParameters } from '@tramvai/storybook-addon';
    import { Page } from './page';
    
    // You can pass to router current route and url
    const parameters: TramvaiStoriesParameters = {
      tramvai: {
        currentRoute: { name: 'second', path: '/second/' },
      },
    };
    
    export default {
      title: 'Page',
      component: Page,
      parameters,
    };
    
    export const PageStory = () => <Page />;

    React Query

    import { createQuery, useQuery } from '@tramvai/react-query';
    
    
    const query = createQuery({
      key: 'base',
      fn: async () => {
        return { foo: 'bar' };
      },
    });
    
    export const Page = () => {
      const { data, isLoading } = useQuery(query);
    
      return (
        <>
          <h1>Page</h1>
          <p>
            {isLoading ? 'Loading...' : data.foo}
          </p>
        </>
      );
    }
    import type { TramvaiStoriesParameters } from '@tramvai/storybook-addon';
    import { Page } from './page';
    
    // You can pass to router QueryClient default options
    const parameters: TramvaiStoriesParameters = {
      tramvai: {
        reactQueryDefaultOptions: {
          queries: {
            refetchOnMount: false,
            refetchOnReconnect: false,
            refetchOnWindowFocus: false,
          },
        },
      },
    };
    
    export default {
      title: 'Page',
      component: Page,
      parameters,
    };
    
    export const PageStory = () => <Page />;

    Page actions running

    import { createAction } from '@tramvai/core';
    
    const serverAction = createAction({
      name: 'server-action',
      fn() {
        console.log('server action');
      },
      conditions: {
        onlyServer: true,
      },
    });
    
    const browserAction = createAction({
      name: 'browser-action',
      fn() {
        console.log('browser action');
      },
      conditions: {
        onlyBrowser: true,
      },
    });
    
    export const Page = () => {
      return (
        <h1>Page</h1>
      );
    }
    
    Page.actions = [serverAction, browserAction];
    import type { TramvaiStoriesParameters } from '@tramvai/storybook-addon';
    import { Page } from './page';
    
    // Actions with `onlyBrowser` condition will be executed 
    const parameters: TramvaiStoriesParameters = {
      tramvai: {
        actions: Page.actions,
      },
    };
    
    export default {
      title: 'Page',
      component: Page,
      parameters,
    };
    
    export const PageStory = () => <Page />;

    Http clients with real requests

    import { createAction } from '@tramvai/core';
    
    const httpRequestAction = createAction({
      name: 'http-request-action',
      fn: async (_, __, { httpClient }) => {
        return httpClient.get('/');
      },
      deps: {
        httpClient: HTTP_CLIENT,
      },
    });
    
    export const Page = () => {
      return (
        <h1>Page</h1>
      );
    }
    
    Page.actions = [httpRequestAction];
    import { HttpClientModule } from '@tramvai/module-http-client';
    import type { TramvaiStoriesParameters } from '@tramvai/storybook-addon';
    import { Page } from './page';
    
    // HttpClientModule is required for real requests
    const parameters: TramvaiStoriesParameters = {
      tramvai: {
        actions: Page.actions,
        modules: [HttpClientModule],
      },
    };
    
    export default {
      title: 'Page',
      component: Page,
      parameters,
    };
    
    export const PageStory = () => <Page />;

    Keywords

    none

    Install

    npm i @tramvai/storybook-addon

    DownloadsWeekly Downloads

    329

    Version

    0.1.2

    License

    none

    Unpacked Size

    31.4 kB

    Total Files

    38

    Last publish

    Collaborators

    • meskill
    • super_oleg
    • tinkoffbank