open-index/open-npm huggingface dataset:
npm package: @preply-ds/core
Description: > Platform agnostic types, tokens and utils.
Latest version: 0.4.2

# `@preply-ds/core`

> Platform agnostic types, tokens and utils.

## Using the Design System in your application or library?

Follow the instructions in [@preply-ds/workspace](../../README.md).

## Contributing

Reach out to [#design-system-public](https://preply.slack.com/archives/C024EAEHP6V) if you think you can help and keep an eye on [DS Confluence](https://preply.atlassian.net/wiki/spaces/DS/overview) for more docs, guides, work in progress, decisions, the works.

## Development

You probably want to execute `yarn dev` and/or `yarn docs` in the root, as per instructions in [@preply-ds/workspace](../../README.md).

For quicker - and more focused - feedback, you can also directly use the scripts in this package directory, but make sure you have first executed `yarn build` in root, or that you have the root `yarn dev` script running in the background.

## Tooling

Details about tools and configurations in [@preply-ds/workspace](../../README.md).

## Dependencies

### Dev dependencies

We only list the dependencies used directly in stories, MDX docs and tests (`@storybook/react`, `@testing-library/react`, ...).

**Do NOT add dependencies on** linting, testing, building tools unless:

- you need to require some resource in a doc file or a test.
- you need to add a very specific plugin to this package only and you want to signal the dependency loudly.
npm package: @preply-ds/docs-context
Description: > DS Providers for documentation pages.
Latest version: 0.4.2

# `@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](../../README.md).

## 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

```tsx
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.

```tsx
import { DocContext } from '@preply-ds/docs-context';
```

### In Stories

```tsx
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](../../README.md) 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](../../README.md).

## Tooling

Details about tools and configurations in [@preply-ds/workspace](../../README.md).

## Dependencies

### Peer dependencies

- `@preply-ds/web-core` - Web support and context providers (React + CSS modules).
- `@preply-ds/core` - Platform agnostic types, tokens and utils.
npm package: @preply-ds/docs-pages
Description: > Documentation pages (welcome, themes, ...)
Latest version: 0.4.2

# DS Docs (main pages)

> Documentation pages (welcome, themes, ...)

## Using the Design System in your application or library?

Follow the instructions in [@preply-ds/workspace](../../README.md).

## Development

Execute `yarn docs` in [@preply-ds/docs](../../support/docs/README.md) to launch the docs.

If you are iterating on these docs, you might want to run `yarn docs` in the root, as per instructions in [@preply-ds/workspace](../../README.md).

### Which documentation is included in this package?

- Welcome pages
- Assets
- Themes & Color Scheme

**WIP:** Guides (dev): installation, for library maintainers, for application maintainers, for contributors

## Tooling

Documentation entry point is in [@preply-ds/docs](../docs/README.md).

Details about tools and configurations in [@preply-ds/workspace](../../README.md).

## Dependencies

This package should depend only on:

- `@preply-ds/docs-context` DS Provider
- `@preply-ds/docs-toolkit` components for MDX files [README](https://github.com/preply/apollo/blob/master/yarn-workspace/packages/ds-docs-toolkit/README.md)
  storybook
- `@storybook/***` and Webpack loaders

**Do NOT add dependencies on** Preply component libraries, especially DS packages like `ds-core`, `ds-web-lib`, ...
npm package: @preply-ds/docs-toolkit
Description: > Components and helpers for stories and doc pages.
Latest version: 0.4.2

# `@preply-ds/docs-toolkit`

> Components and helpers for stories and doc pages.

Used in MDX pages:

- [@preply-ds/docs-pages](../docs-pages/README.md)
- [@preply-ds/web-lib](../../packages/web-lib/README.md)

Also used by [@preply-ds/docs-context](../docs-context/README.md).

**WIP**: Install in [@preply/shared](https://github.com/preply/apollo/blob/master/yarn-workspace/packages/shared/readme.md) to replace the legacy one in `common/`.

## Using the Design System in your application or library?

Follow the instructions in [@preply-ds/workspace](../../README.md).

## Tooling

Documentation entry point is in [@preply-ds/docs](../docs/README.md).

Details about tools and configurations in [@preply-ds/workspace](../../README.md).

## Development

- `classes/` model the instrumentation data and metadata collected by [fe-tools](https://github.com/preply/apollo/blob/master/fe-tools/README.md)
- `components/` can be used in any MDX file to:
  - render prop option tables, component metadata, ...
  - decorate examples with lorem ipsum, placeholders, ...
- `providers/` and `hooks/` to use metadata context MDX files (used by ds-docs [DocContext](https://github.com/preply/apollo/blob/master/yarn-workspace/packages/ds-docs/storybook/context/DocContext.tsx))

### Dependencies

We want to preserve portability of these components in case we want to used them in a non-storybook environment.

**Do NOT add dependencies on:**

- anything Storybook
- anything Preply
npm package: @preply-ds/eslint-config
Description: > Lint configurations for this monorepo.
Latest version: 0.4.2

# `@preply-ds/eslint-config`

> Lint configurations for this monorepo.

## Using the Design System in your application or library?

Follow the instructions in [@preply-ds/workspace](../../README.md).

## Contributing

Reach out to [#design-system-public](https://preply.slack.com/archives/C024EAEHP6V) if you think you can help and keep an eye on [DS Confluence](https://preply.atlassian.net/wiki/spaces/DS/overview) for more docs, guides, work in progress, decisions, the works.

## Development

This package provides `eslint` and `prettier` configurations.

The naming convention for eslint plugins requires the package to be named per this convention: `@namespace/eslint-config-****`.

Base configuration is `airbnb-base, eslint, security, prettier`.

**Note:** Order matters: tyically `airbnb` first (adds a lot of strict rules) and standards + prettier next (resets some sanity and makes sure prettier rules rule).

Overrides (based on file patterns):

- Typescript + `typescript` parser + `airbnb, prettier (again), @typescript-eslint`
- React + `airbnb/hooks + prettier/react + react + react-hooks + jsx-a11y`
- Tests + `jest`
- Docs + less strict
- MDX: `eslint-mdx` parser + `typescript, react, mdx`

**WIP**: `plugin:@typescript-eslint/recommended-requiring-type-checking` later (and only for production code, not tests and stories)

Refer to **Development** section in [@preply-ds/workspace](../../README.md#Development) for other lint/format related tools, namely how `tsconfig.json` propagates through the repository, as this is an essential part of the `eslint`+ `typescript-eslint/parser` validation.

## Dependencies

Only `eslint` and `prettier` are declared in the root `package.json`.

Apart from those, all parsers, plugins, and extended configs are declared here as `dependencies`.
npm package: @preply-ds/media-icons
Description: > SVG Icon library.
Latest version: 0.4.2

# `@preply-ds/media-icons`

> SVG Icon library.

## Using the Design System in your application or library?

Follow the instructions in [@preply-ds/workspace](../../README.md).

**tl;dr:**

```tsx
import HatSvg from `@preply-ds/media-icons/dist/hat.svg`;
import { Icon } from `@preply-ds/web-lib`;

<Icon svg={HatSvg} />;
// or
<HatSvg aria-hidden="true" focusable="false" />;
```

## Contributing

Reach out to [#design-system-public](https://preply.slack.com/archives/C024EAEHP6V) if you think you can help and keep an eye on [DS Confluence](https://preply.atlassian.net/wiki/spaces/DS/overview) for more docs, guides, work in progress, decisions, the works.

## Development

Just a placeholder for now.

- `yarn clean` - deletes `dist/` folder.
- `yarn build` - copies all SVG to `dist/` folder.

Later:

- linting SVGs for size and patterns.
- optimization and reports.

## Tooling

Details about tools and configurations in [@preply-ds/workspace](../../README.md).

## Dependencies

**Do NOT add any dependencies.** When we work on linting and optimization of assets we should consider whether to add `devDependencies` in the root of the project or locally.
npm package: @preply-ds/media-logos
Description: > SVG Logo library.
Latest version: 0.4.2

# `@preply-ds/media-logos`

> SVG Logo library.

## Using the Design System in your application or library?

Follow the instructions in [@preply-ds/workspace](../../README.md).

**tl;dr:**

```tsx
import PreplyLogo from `@preply-ds/media-logos/dist/preply-mono.svg`;

<PreplyLogo aria-hidden="true" focusable="false" />;
```

## Contributing

Reach out to [#design-system-public](https://preply.slack.com/archives/C024EAEHP6V) if you think you can help and keep an eye on [DS Confluence](https://preply.atlassian.net/wiki/spaces/DS/overview) for more docs, guides, work in progress, decisions, the works.

## Development

Just a placeholder for now.

- `yarn clean` - deletes `dist/` folder.
- `yarn build` - copies all SVG to `dist/` folder.

Later:

- linting SVGs for size and patterns.
- optimization and reports.

## Tooling

Details about tools and configurations in [@preply-ds/workspace](../../README.md).

## Dependencies

**Do NOT add any dependencies.** When we work on linting and optimization of assets we should consider whether to add `devDependencies` in the root of the project or locally.
npm package: @preply-ds/theme-base-ui
Description: > Theme `base-ui` a.k.a. Learn UI, a.k.a. _round corners_.
Latest version: 0.4.2

# `@preply-ds/theme-base-ui`

> Theme `base-ui` a.k.a. Learn UI, a.k.a. _round corners_.

## Using the Design System in your application or library?

Follow the instructions in [@preply-ds/workspace](../../README.md).

**tl;dr:**

```tsx
import { theme as preplyUI } from `@preply-ds/theme-preply-ui`;
```

## Development

You probably want to execute `yarn dev` and/or `yarn docs` in the root, as per instructions in [@preply-ds/workspace](../../README.md).

## Tooling

Details about tools and configurations in [@preply-ds/workspace](../../README.md).

## Dependencies

**Note:** `@preply-ds/***` are declared both as direct and peer dependencies:

- to ensure `rollup` excludes them from the bundle.
- to ensure Lerna honours build sequence (does not do so for peer dependencies).

### Peer dependencies

- `@preply-ds/web-core` - Web support and context providers (React + CSS modules).
- `@preply-ds/core` - Platform agnostic types, tokens and utils.

### Dev dependencies

We only list the dependencies used directly in stories, MDX docs and tests (`@storybook/react`, `@testing-library/react`, ...).

**Do NOT add dependencies on** linting, testing, building tools unless.
npm package: @preply-ds/theme-preply-ui
Description: > Theme `preply-ui` a.k.a. _older_, a.k.a. _less round corners_.
Latest version: 0.4.2

# `@preply-ds/theme-preply-ui`

> Theme `preply-ui` a.k.a. _older_, a.k.a. _less round corners_.

## Using the Design System in your application or library?

Follow the instructions in [@preply-ds/workspace](../../README.md).

**tl;dr:**

```tsx
import { theme as preplyUI } from `@preply-ds/theme-preply-ui`;
```

## Development

You probably want to execute `yarn dev` and/or `yarn docs` in the root, as per instructions in [@preply-ds/workspace](../../README.md).

## Tooling

Details about tools and configurations in [@preply-ds/workspace](../../README.md).

## Dependencies

**Note:** `@preply-ds/***` are declared both as direct and peer dependencies:

- to ensure `rollup` excludes them from the bundle.
- to ensure Lerna honours build sequence (does not do so for peer dependencies).

### Peer dependencies

- `@preply-ds/web-core` - Web support and context providers (React + CSS modules).
- `@preply-ds/core` - Platform agnostic types, tokens and utils.

### Dev dependencies

We only list the dependencies used directly in stories, MDX docs and tests (`@storybook/react`, `@testing-library/react`, ...).

**Do NOT add dependencies on** linting, testing, building tools unless.
npm package: @preply-ds/web-core
Description: > Web support and context providers (React + CSS modules).
Latest version: 0.4.2

# `@preply-ds/web-core`

> Web support and context providers (React + CSS modules).

## Using the Design System in your application or library?

Follow the instructions in [@preply-ds/workspace](../../README.md).

## Contributing

Reach out to [#design-system-public](https://preply.slack.com/archives/C024EAEHP6V) if you think you can help and keep an eye on [DS Confluence](https://preply.atlassian.net/wiki/spaces/DS/overview) for more docs, guides, work in progress, decisions, the works.

## Development

You probably want to execute `yarn dev` and/or `yarn docs` in the root, as per instructions in [@preply-ds/workspace](../../README.md).

For quicker - and more focused - feedback, you can also directly use the scripts in this package directory, but make sure you have first executed `yarn build` in root, or that you have the root `yarn dev` script running in the background.

## Tooling

Details about tools and configurations in [@preply-ds/workspace](../../README.md).

## Dependencies

**Note:** `@preply-ds/***` are declared both as direct and peer dependencies:

- to ensure `rollup` excludes them from the bundle.
- to ensure Lerna honours build sequence (does not do so for peer dependencies).

### Dev dependencies

We only list the dependencies used directly in stories, MDX docs and tests (`@storybook/react`, `@testing-library/react`, ...).

**Do NOT add dependencies on** linting, testing, building tools unless:

- you need to require some resource in a doc file or a test.
- you need to add a very specific plugin to this package only and you want to signal the dependency loudly.
npm package: @preply-ds/web-lib
Description: > DS component library for web.
Latest version: 0.4.2

# `@preply-ds/web-lib`

> DS component library for web.

## Using the Design System in your application or library?

Follow the instructions in [@preply-ds/workspace](../../README.md).

**tl;dr:**

```tsx
import { RootProvider } from `@preply-ds/web-root`;
import { Heading, Button } from `@preply-ds/web-lib`;

export const App: FC = () => (
  <RootProvider>
    <Heading level="h1">Hello!</Heading>
    <Button>Go!</Button>
  </RootProvider>
);
```

## Contributing

Reach out to [#design-system-public](https://preply.slack.com/archives/C024EAEHP6V) if you think you can help and keep an eye on [DS Confluence](https://preply.atlassian.net/wiki/spaces/DS/overview) for more docs, guides, work in progress, decisions, the works.

## Development

You probably want to execute `yarn dev` and/or `yarn docs` in the root, as per instructions in [@preply-ds/workspace](../../README.md).

For quicker - and more focused - feedback, you can also directly use the scripts in this package directory, but make sure you have first executed `yarn build` in root, or that you have the root `yarn dev` script running in the background.

## Tooling

Details about tools and configurations in [@preply-ds/workspace](../../README.md).

## Dependencies

**Note:** `@preply-ds/***` are declared both as direct and peer dependencies:

- to ensure `rollup` excludes them from the bundle.
- to ensure Lerna honours build sequence (does not do so for peer dependencies).

### Dev dependencies

We only list the dependencies used directly in stories, MDX docs and tests (`@storybook/react`, `@testing-library/react`, ...).

**Do NOT add dependencies on** linting, testing, building tools unless:

- you need to require some resource in a doc file or a test.
- you need to add a very specific plugin to this package only and you want to signal the dependency loudly.
npm package: @preply-ds/web-root
Description: > Root provider (+ themes) for web applications.
Latest version: 0.4.2

# `@preply-ds/web-root`

> Root provider (+ themes) for web applications.

## Using the Design System in your application or library?

Follow the instructions in [@preply-ds/workspace](../../README.md).

**tl;dr:**

```tsx
import { RootProvider } from `@preply-ds/web-root`;
import { Heading } from `@preply-ds/web-lib`;

export const App: FC = () => (
  <RootProvider>
    <Heading level="h1">Hello!</Heading>
  </RootProvider>
);
```

## Contributing

Reach out to [#design-system-public](https://preply.slack.com/archives/C024EAEHP6V) if you think you can help and keep an eye on [DS Confluence](https://preply.atlassian.net/wiki/spaces/DS/overview) for more docs, guides, work in progress, decisions, the works.

## Development

You probably want to execute `yarn dev` and/or `yarn docs` in the root, as per instructions in [@preply-ds/workspace](../../README.md).

For quicker - and more focused - feedback, you can also directly use the scripts in this package directory, but make sure you have first executed `yarn build` in root, or that you have the root `yarn dev` script running in the background.

## Tooling

Details about tools and configurations in [@preply-ds/workspace](../../README.md).

## Dependencies

**Note:** `@preply-ds/***` are declared both as direct and peer dependencies:

- to ensure `rollup` excludes them from the bundle.
- to ensure Lerna honours build sequence (does not do so for peer dependencies).

### Dev dependencies

We only list the dependencies used directly in stories, MDX docs and tests (`@storybook/react`, `@testing-library/react`, ...).

**Do NOT add dependencies on** linting, testing, building tools unless:

- you need to require some resource in a doc file or a test.
- you need to add a very specific plugin to this package only and you want to signal the dependency loudly.