@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.