open-index/open-npm huggingface dataset:
npm package: @graasp/stylis-plugin-rtl
Description: Fork of Fork of stylis-rtl, uses cssjanus under the hood to flip style orientations for RTL
Author: Jop de Klein
Latest version: 2.2.0

# stylis-plugin-rtl

Stylis RTL plugin based on CSSJanus

> NOTE! Use v1 of this plugin for styled-components v5, NOT v2 (v2 is for libraries that have upgraded to stylis v4, which s-c has not yet. At the moment only emotion 11 is updated.)

## Installation

### v1

```shell
yarn add stylis-plugin-rtl@^1
```

### v2

```shell
yarn add stylis-plugin-rtl stylis
```

## Usage with styled-components v5+

```javascript
import styled, { StyleSheetManager } from "styled-components";
import rtlPlugin from "stylis-plugin-rtl";

const Box = styled.div`
  padding-left: 10px;
`;

function MakeItRTL() {
  return (
    <StyleSheetManager stylisPlugins={[rtlPlugin]}>
      <Box>My padding will be on the right!</Box>
    </StyleSheetManager>
  );
}
```

#### NOTE: Preventing flipping

Because minification removes all comments from your CSS before it passes to `<StyleSheetManager>`, `/* @noflip */` comment won't work. 
You will have to either:
- add an exclamation mark at the beginning of the comment, like this  `/*! @noflip */`, to prevent it from being removed
- disable minification entirely by setting `minify` to `false` in `.babelrc` (see [styled-components documentation](https://styled-components.com/docs/tooling#minification)).

<small>This is a fork of `stylis-rtl` for use with styled-components v5+</small>
npm package: @grabvintage/ts-schemaof
Description: Generate JSON schema from TypeScript interfaces
Author: Egor Zaitsev
Latest version: 1.3.0

# `ts-schemaof`

Get a JSON schema of your TypeScript interface at compile time.

```shell
$ npm install @grabvintage/ts-schemaof --save-dev
```

## Setup

##### TypeScript

You need to use `ttsc` or any other TypeScript compiler that supports plugins. Once you have that, add a new plugin definition to your `tsconfig.json`:

```js
{
  "compilerOptions": {
    ...
    "plugins": [{ "transform": "@grabvintage/ts-schemaof" }]
  }
}
```

#### Webpack

You need to use `ts-loader` and supply it with a custom `before` transformer:

```js
const TsSchemaofTransformer = require('@grabvintage/ts-schemaof').default;

module.exports = {
  ...
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: [
          'babel-loader',
          {
            loader: 'ts-loader',
            options: {
              getCustomTransformers: (program) => ({
                before: [TsSchemaofTransformer(program)],
              }),
            },
          },
        ],
        exclude: /node_modules/,
      },
    ],
  },
};
```

## Usage

```ts
import Ajv from 'ajv';

type FooBar = {
  foo: string;
  bar: string;
};

const ajv = new Ajv({ removeAdditional: 'all' });
const validate = ajv.compile(schemaof<FooBar>());

validate({ foo: 'foo', bar: 'bar' }); // passes!
```
npm package: @grace-studio/json-to-xliff
Description: [![npm version](https://badge.fury.io/js/@grace-studio%2Fjson-to-xliff.svg)](https://www.npmjs.com/package/@grace-studio/json-to-xliff)
Latest version: 0.2.0

# @grace-studio/json-to-xliff

[![npm version](https://badge.fury.io/js/@grace-studio%2Fjson-to-xliff.svg)](https://www.npmjs.com/package/@grace-studio/json-to-xliff)

The JSON to XLIFF converter tool currently supports XLIFF version 1.2.

## Installation

To install the JSON to XLIFF converter tool for global access, you can use either npm or yarn:

```bash
npm i -g @grace-studio/json-to-xliff

# or

yarn global add @grace-studio/json-to-xliff
```

## Usage

**To convert a JSON file to XLIFF:**

```bash
json-to-xliff toXliff \
--file <input-json-file> \
--out <output-xliff-file> \
--lang <language-code> \
```

**To convert a XLIFF file to JSON:**

```bash
json-to-xliff toJson \
--file <input-xliff-file> \
--out <output-json-file>
```
npm package: @gracefront/hooks
Description: a modern hooks library for React
Author: justchenyu
Latest version: 1.0.0

# @gracefront/hooks

[简体中文](https://github.com/GraceFront/hooks/blob/main/README.zh-CN.md)

A modern React hooks utility library with first‑class TypeScript, ESM/CJS outputs, and tree‑shaking.

- Package: `@gracefront/hooks`
- Peer deps: `react` `^18 || ^19`, `react-dom` `^18 || ^19`
- Outputs: ESM, CJS, type declarations; `sideEffects: false`

## Installation
```bash
npm i @gracefront/hooks
# or
pnpm add @gracefront/hooks
yarn add @gracefront/hooks
npm package: @gracefullight/docusaurus-plugin-baidu-analytics
Description: This plugin provides an easy way to add Baidu Analytics to your Docusaurus documentation website.
Author: gracefullight
Latest version: 1.0.0

# @gracefullight/docusaurus-plugin-baidu-analytics

This plugin provides an easy way to add Baidu Analytics to your Docusaurus documentation website.

## Installation

You can install this plugin via pnpm:

```bash
pnpm add @gracefullight/docusaurus-plugin-baidu-analytics
```

To use this plugin, you will need to configure it in your Docusaurus `docusaurus.config.js` file. You can add the following configuration to enable the plugin:

```js
module.exports = {
  plugins: [
    [
      "@gracefullight/docusaurus-plugin-baidu-analytics",
      { siteId: "YOUR_SITE_ID" },
    ],
  ],
};
```

You need to replace "YOUR_SITE_ID" with the key you received from Baidu Analytics.
npm package: @gracefullight/docusaurus-plugin-channelio
Description: This plugin provides an easy way to add channel.io to your Docusaurus documentation website.
Author: gracefullight
Latest version: 1.0.0

# @gracefullight/docusaurus-plugin-channelio

This plugin provides an easy way to add channel.io to your Docusaurus documentation website.

## Installation

You can install this plugin via pnpm:

```bash
pnpm add @gracefullight/docusaurus-plugin-channelio
```

To use this plugin, you will need to configure it in your Docusaurus `docusaurus.config.js` file. You can add the following configuration to enable the plugin:

```js
module.exports = {
  plugins: [
    [
      "@gracefullight/docusaurus-plugin-channelio",
      { pluginKey: "YOUR_PLUGIN_KEY" },
    ],
  ],
};
```

You need to replace "YOUR_PLUGIN_KEY" with the key you received from channel.io.
npm package: @gracefullight/docusaurus-plugin-cloudflare-analytics
Description: This plugin provides an easy way to add Cloudflare Analytics to your Docusaurus documentation website.
Author: gracefullight
Latest version: 1.0.0

# @gracefullight/docusaurus-plugin-cloudflare-analytics

This plugin provides an easy way to add Cloudflare Analytics to your Docusaurus documentation website.

## Installation

You can install this plugin via pnpm:

```bash
pnpm add @gracefullight/docusaurus-plugin-cloudflare-analytics
```

To use this plugin, you will need to configure it in your Docusaurus `docusaurus.config.js` file. You can add the following configuration to enable the plugin:

```js
module.exports = {
  plugins: [
    [
      "@gracefullight/docusaurus-plugin-cloudflare-analytics",
      { token: "YOUR_TOKEN" },
    ],
  ],
};
```

You need to replace "YOUR_TOKEN" with the key you received from [Cloudflare Analytics](https://dash.cloudflare.com).
npm package: @gracefullight/docusaurus-plugin-gitter
Description: This plugin provides an easy way to add Gitter to your Docusaurus documentation website.
Author: gracefullight
Latest version: 1.0.0

# @gracefullight/docusaurus-plugin-gitter

This plugin provides an easy way to add Gitter to your Docusaurus documentation website.

## Installation

You can install this plugin via pnpm:

```bash
pnpm add @gracefullight/docusaurus-plugin-gitter
```

To use this plugin, you will need to configure it in your Docusaurus `docusaurus.config.js` file. You can add the following configuration to enable the plugin:

```js
module.exports = {
  plugins: [
    [
      "@gracefullight/docusaurus-plugin-gitter",
      { room: "YOUR_ROOM" },
    ],
  ],
};
```

You need to replace "YOUR_ROOM" with the key you received from Gitter.
npm package: @gracefullight/docusaurus-plugin-meta-pixel
Description: This Docusaurus plugin adds support for Meta Pixel on your website.
Author: gracefullight
Latest version: 1.0.0

# @gracefullight/docusaurus-plugin-meta-pixel

This Docusaurus plugin adds support for Meta Pixel on your website.

## Installation

You can install this plugin via pnpm:

```bash
pnpm add @gracefullight/docusaurus-plugin-meta-pixel
```

## Usage

To use this plugin, you will need to configure it in your Docusaurus `docusaurus.config.js` file. You can add the following configuration to enable the plugin:

```js docusaurus.config.js
module.exports = {
  plugins: [
    [
      "@gracefullight/docusaurus-plugin-meta-pixel",
      { pixelId: "YOUR_PIXEL_ID" },
    ],
  ],
};
```

You need to replace "YOUR_PIXEL_ID" with your own Meta Pixel ID.
npm package: @gracefullight/docusaurus-plugin-microsoft-clarity
Description: This Docusaurus plugin adds support for Microsoft Clarity on your website.
Author: gracefullight
Latest version: 1.0.0

# @gracefullight/docusaurus-plugin-microsoft-clarity

This Docusaurus plugin adds support for Microsoft Clarity on your website.

## Installation

You can install this plugin via pnpm:

```bash
pnpm add @gracefullight/docusaurus-plugin-microsoft-clarity
```

## Usage

To use this plugin, you will need to configure it in your Docusaurus `docusaurus.config.js` file. You can add the following configuration to enable the plugin:

```js docusaurus.config.js
module.exports = {
  plugins: [
    [
      "@gracefullight/docusaurus-plugin-microsoft-clarity",
      { projectId: "YOUR_PROJECT_ID" },
    ],
  ],
};
```

You need to replace "YOUR_PROJECT_ID" with your own Microsoft Clarity project ID.
npm package: @gracefullight/docusaurus-plugin-sentry
Description: This Docusaurus plugin adds support for Sentry on your website.
Author: gracefullight
Latest version: 1.0.0

# @gracefullight/docusaurus-plugin-sentry

This Docusaurus plugin adds support for Sentry on your website.

## Installation

You can install this plugin via pnpm:

```bash
pnpm add @gracefullight/docusaurus-plugin-sentry
```

## Usage

To use this plugin, you will need to configure it in your Docusaurus `docusaurus.config.js` file. You can add the following configuration to enable the plugin:

```js docusaurus.config.js
module.exports = {
  plugins: [
    [
      "@gracefullight/docusaurus-plugin-sentry",
      { 
        publicKey: "YOUR_PROJECT_PUBLIC_KEY",
        lazy: true,
        tracesSampleRate: 1,
      },
    ],
  ],
};
```

You need to replace "YOUR_PROJECT_PUBLIC_KEY" with your own [Sentry project public key](https://docs.sentry.io/platforms/javascript/install/lazy-load-sentry/#using-the-loader).
npm package: @gracefullight/docusaurus-plugin-tailwind
Description: This plugin provides an easy way to add TailwindCSS to your Docusaurus documentation website.
Author: gracefullight
Latest version: 1.1.0

# @gracefullight/docusaurus-plugin-tailwind

This plugin provides an easy way to add TailwindCSS to your Docusaurus documentation website.

## Installation

You can install this plugin via pnpm:

```bash
pnpm add @gracefullight/docusaurus-plugin-tailwind
```

To use this plugin, you will need to configure it in your Docusaurus `docusaurus.config.js` file. You can add the following configuration to enable the plugin:

```js
module.exports = {
  plugins: [["@gracefullight/docusaurus-plugin-tailwind"]],
};
```
npm package: @gracefullight/docusaurus-plugin-yandex-metrica
Description: This plugin provides an easy way to add Yandex Metrica to your Docusaurus documentation website.
Author: gracefullight
Latest version: 1.0.1

# @gracefullight/docusaurus-plugin-yandex-metrica

This plugin provides an easy way to add Yandex Metrica to your Docusaurus documentation website.

## Installation

You can install this plugin via pnpm:

```bash
pnpm add @gracefullight/docusaurus-plugin-yandex-metrica
```

To use this plugin, you will need to configure it in your Docusaurus `docusaurus.config.js` file. You can add the following configuration to enable the plugin:

```js
module.exports = {
  plugins: [
    [
      "@gracefullight/docusaurus-plugin-yandex-metrica",
      { counterId: "YOUR_COUNTER_ID" },
    ],
  ],
};
```

You need to replace "YOUR_COUNTER_ID" with the key you received from Yandex Metrica.
npm package: @gracefullight/krds-tokens
Description: Design tokens for KRDS design system
Author: gracefullight
Latest version: 1.0.1

# @gracefullight/krds-tokens

Design tokens for the KRDS design system.

## Installation

Install the package via pnpm, npm or yarn:

```bash
pnpm add @gracefullight/krds-tokens
# or
npm install @gracefullight/krds-tokens
# or
yarn add @gracefullight/krds-tokens
```

## Usage

Import the helper functions or raw tokens in your TypeScript or JavaScript project.

```typescript
// Import helper functions
import { getTypography, getColor, getPalette, getRadius, getShadow, BREAKPOINTS } from "@gracefullight/krds-tokens";

// Get a typography style by key
const headingStyle = getTypography("pc.heading.large");

// Get a color value
const textBasic = getPalette("text.basic");

// Access raw token object (if needed)
import { TOKENS } from "@gracefullight/krds-tokens";
```

## Scripts

- `pnpm build` - Build the package with tsup
- `pnpm dev` - Run tsup in watch mode

## Contributing

1. Fork the repository
2. Install dependencies: `pnpm install`
3. Run generators or update tokens
4. Build: `pnpm build`
5. Submit a pull request following conventional commits

## License

MIT