DS Providers for documentation pages.
Follow the instructions in @preply/ds-workspace.
The following components are used to wrap Storybook stories or MDX doc pages, injecting global styles, and the DS providers populated with available themes.
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';
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} />;
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.
Details about tools and configurations in @preply/ds-workspace.
-
@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.