@preply/ds-docs-context

@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>],
  // ...
} as Meta;

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

Development

Execute yarn docs 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, 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.