🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more
Socket
Sign inDemoInstall
Socket

@preply/ds-docs-context

Package Overview
Dependencies
Maintainers
6
Versions
428
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@preply/ds-docs-context

1.4.6
latest
npm
Version published
Weekly downloads
596
-11.7%
Maintainers
6
Weekly downloads
 
Created
Source

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

FAQs

Package last updated on 02 May 2025

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts