@preply/ds-docs-context

DS Providers for documentation pages.

Using the Design System in your application or library?

Follow the instructions in @preply/ds-workspace.

Usage

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.