The following components are used to wrap Storybook stories or MDX doc pages, injecting global styles, and the DS providers populated with available themes.

In docs

import { DocContextDSWeb } from '@preply/ds-docs-context';

<Meta
  title="components/Avatar/Docs"
  parameters={{
    docs: { container: DocContextDSWeb },
  }}
/>;

In pages where you want to render the RootProvider yourself, include DocContext instead.

import { DocContext } from '@preply/ds-docs-context';

In Stories

import { StoryContextDSWeb } from '@preply/ds-docs-context';

export default {
  title: 'components/Avatar',
  component: Avatar,
  decorators: [story => <StoryContextDSWeb>{story()}</StoryContextDSWeb>],
  // ...
};

export const Canvas: Story<Props> = params => <Component {...params} />;

Development

Execute yarn dev in @preply/ds-docs to launch the docs.

If you are iterating on these components, you might want to run yarn dev and yarn docs in the root (in separate terminals) as per instructions in @preply/ds-workspace.

Tooling

Details about tools and configurations in @preply/ds-workspace.

Dependencies

Peer dependencies

@preply/ds-web-core - Web support and context providers (React + CSS modules).
@preply/ds-core - Platform agnostic types, tokens and utils.
@preply/ds-core-types - Platform agnostic types.

FAQs

What is @preply/ds-docs-context?

Is @preply/ds-docs-context popular?

Is @preply/ds-docs-context well maintained?

Last updated on 27 Mar 2023

Did you know?

Socket installs a Github app to automatically flag issues on every pull request and report the health of your dependencies. Find out what is inside your node modules and prevent malicious activity before you update the dependencies.

Install Socket