Skip to main content

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:

.storybook/main.js
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>
);
}

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>
</>
);
}

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>
</>
);
}

Page actions running

import { declareAction } from '@tramvai/core';

const serverAction = declareAction({
name: 'server-action',
fn() {
console.log('server action');
},
conditions: {
onlyServer: true,
},
});

const browserAction = declareAction({
name: 'browser-action',
fn() {
console.log('browser action');
},
conditions: {
onlyBrowser: true,
},
});

export const Page = () => {
return (
<h1>Page</h1>
);
}

Page.actions = [serverAction, browserAction];

Http clients with real requests

import { declareAction } from '@tramvai/core';

const httpRequestAction = declareAction({
name: 'http-request-action',
async fn() {
return this.deps.httpClient.get('/');
},
deps: {
httpClient: HTTP_CLIENT,
},
});

export const Page = () => {
return (
<h1>Page</h1>
);
}

Page.actions = [httpRequestAction];