open-index/open-npm huggingface dataset:
npm package: @single-spa-example/config
Description: Predefined Some Common webpack and other configuration for single-spa with react and typescript
Author: Paalamugan
Latest version: 1.0.0

# Single spa example common configuration

Predefined Some Common webpack and other configuration for single-spa with react and typescript.

## Getting started

- Supported Node Engine

```
node - v16.12.0
yarn - 1.22.19
```

**How to Use it**

- Install as a node module package like

```sh
yarn add -D @single-spa-example/config
```

- Added Below line in your project `webpack.config.js` like,

```js
const {
  singleSpaReactWebpackConfig,
} = require("@single-spa-example/config");

module.exports = singleSpaReactWebpackConfig(<your_organization_name>, <your_project_name>, <customize_webpack_config>);
```

- Added Below line in your project `babel.config.js` like,

```js
const { singleSpaReactBabelConfig } = require("@single-spa-example/config");

module.exports = singleSpaReactBabelConfig(<customize_babel_config>);
```

- Added Below line in your project `tailwind.config.js` like,

```js
const { singleSpaTailwindConfig } = require("@single-spa-example/config");

module.exports = singleSpaTailwindConfig(<customize_tailwind_config>);
```

- Added Below line in your project `postcss.config.js` like,

```js
const { singleSpaPostcssConfig } = require("@single-spa-example/config");

module.exports = singleSpaPostcssConfig(<customize_postcss_config>);
```

- Added Below line in your project `commitlint.config.js` like,

```js
const { singleSpaCommitlintConfig } = require("@single-spa-example/config");

module.exports = singleSpaCommitlintConfig(<customize_commitlint_config>);
```
npm package: @single-spa-example/global
Description: Share data between one to other single spa microfrontend application.
Author: Paalamugan S
Latest version: 1.0.3

# Single spa example global

Single spa example share data between one to other single spa microfrontend application.

## How to Use

- One Way to do, Registered store from single-spa microfrontend

  ```ts
  import { ReduxStoreDistributor } from "@single-spa-example/global";
  const storeDistributor = new ReduxStoreDistributor();
  storeDistributor.registerStore(storeName, store);
  ```

- Another Way to do, Registered store from single-spa microfrontend

  ```ts
  import { reduxStoreDistributor as storeDistributor } from "@single-spa-example/global";
  storeDistributor.registerStore(storeName, store);
  ```

- Add Below line, Where you would like to access registered Store state value.

  ```ts
  import { reduxStoreDistributor as storeDistributor } from "@single-spa-example/global";
  const state = storeDistributor.getState(storeName);
  console.log("state", state);
  ```

- Add Below line, Where you would like to access registered Store state value as observable.

  ```ts
  import { reduxStoreDistributor as storeDistributor } from "@single-spa-example/global";
  const state$ = storeDistributor.getState$(storeName);
  state$.subscribe((state) => {
    console.log("state", state);
  });
  ```

- Add Below line, To update data from one microfrontend to other microfrontend
  ```ts
  import { reduxStoreDistributor as storeDistributor } from "@single-spa-example/global";
  storeDistributor.dispatch({ type: "INCREMENT", payload: 1 });
  ```

## Getting started

- Supported Node Engine

```
node - v16.12.0
yarn - 1.22.19
```

- Install node_modules package for first time only

```sh
yarn install
```

- Run application in development mode

```sh
yarn start
```

- Run application as a standalone in development mode

```sh
yarn start:standalone
```

- To build for production

```sh
yarn build
```
npm package: @single-spa-example/react-mui
Description: MUI theme Common components for the single spa application
Author: Paalamugan
Latest version: 1.0.0

# @single-spa-example/mui

Material UI theme Common components for the single spa application

## How to use it

- Install as a node module package like

```sh
yarn add -D @single-spa-example/react-mui
```

## Getting started

```
- Supported Node Engine

```

node - v16.12.0
yarn - 1.22.19

````

- Install node_modules package for first time only

```sh
yarn install
````

- Run application in development mode

```sh
yarn start
```

- Run application as a standalone in development mode

```sh
yarn start:standalone
```

- To build for production

```sh
yarn build
```
npm package: @single-spa-example/react-styleguide
Description: React Styleguide Template supports language translation, multiple MUI theme, Global store for all microfrontend single spa application.
Author: Paalamugan
Latest version: 1.0.0

# Single Spa React Styleguide Template

React Styleguide Template supports language translation, multiple MUI theme, Global store for all microfrontend single spa application.

## How to use it

- Install as a node module package like

  ```sh
  yarn add -D @single-spa-example/react-styleguide
  ```

- Add a below code line in your react microfrontend single-spa main file, That file name look like this `orgName-projectName.tsx`,

  ```ts
  import React from "react";
  import ReactDOM from "react-dom";
  import singleSpaReact from "single-spa-react";
  import { MfErrorBoundary, withAppContainer } from "@single-spa-example/react-styleguide";

  const MyComponent = () => <div>Hello World</div>;

  const lifecycles = singleSpaReact({
    React,
    ReactDOM,
    rootComponent: withAppContainer(MyComponent),
    errorBoundary(err, info, props) {
      return <MfErrorBoundary name="MyComponent" err={err} info={info} props={props} />;
    },
  });

  export const { bootstrap, mount, unmount } = lifecycles;
  ```

## Getting started

- Supported Node Engine

```
node - v16.12.0
yarn - 1.22.19
```

- Install node_modules package for first time only

```sh
yarn install
```

- Run application in development mode

```sh
yarn start
```

- Run application as a standalone in development mode

```sh
yarn start:standalone
```

- To build for production

```sh
yarn build
```
npm package: @single-spa/import-map-microfrontend-deps
Description: Simplified import map dependency management
Author: Joel Denning
Latest version: 1.1.0

# import-map-microfrontend-deps

Simplified dependency management for microfrontends

## Installation

```sh
npm i @single-spa/import-map-microfrontend-deps
```

## Usage

```ts
import { buildImportMapDependencies } from "@single-spa/import-map-microfrontend-deps";
import { ImportMapMicrofrontendUtils } from "@single-spa/import-map-microfrontend-utils";

await buildImportMapDependencies({
  template: {
    imports: {
      react: "18.3.0",
      "react-dom": "18.3.0",
    },
    scopes: {},
  },
  outputFolder: "dist",
  utils: new ImportMapMicrofrontendUtils({
    baseOrigin: "https://cdn.example.com",
  }),
});
```
npm package: @single-spa/import-map-microfrontend-utils
Description: Utility types and functions for import-map-microfrontend projects
Author: Joel Denning
Latest version: 2.0.0

# import-map-microfrontend-utils

Utility types and functions for import-map-microfrontend related projects

## Installation

```sh
npm i @single-spa/import-map-microfrontend-utils
```

## Usage

```ts
import { ImportMapMicrofrontendUtils } from "@single-spa/import-map-microfrontend-utils";

const utils = new ImportMapMicrofrontendUtils({
  baseOrigin: "https://cdn.example.com",
});

utils.getMicrofrontendURLPrefix("@org/navbar");
utils.getDependenciesURLPrefix();
utils.getDependenciesFolderName();
utils.getMFEsFolderName();
```
npm package: @single-spa/lifecyles-compat
Description: Compatibility layer for older single-spa applications and parcels that use lifecycle methods no longer supported
Author: Jolyn Denning
Latest version: 1.0.0

# lifecyles-compat

Compatibility layer for single-spa applications that use old lifecyle methods.

## Installation

```sh
npm i -S @single-spa/lifecycles-compat

pnpm i -S @single-spa/lifecycles-compat
```

## Usage

```js
import singleSpaReact from "single-spa-react";
import singleSpaLifeyclesCompat from "@single-spa/lifecycles-compat";

// Old versions of single-spa framework adapters used bootstrap lifecycle rather than init
const lifecycles = singleSpaReact({});

export const { init, mount, unmount, update } =
  singleSpaLifeyclesCompat(lifecycles);
```
npm package: @single-spa/svelte
Description: a single-spa plugin for svelte applications
Author: Jolyn Denning
Latest version: 3.0.0-beta.0

# single-spa-svelte

Generic lifecycle hooks for Svelte projects that are registered as [single-spa](https://single-spa.js.org) applications.

[Full documentation](https://single-spa.js.org/docs/ecosystem-svelte.html)
npm package: @single-ui/react
Description: Modern React UI component library built with Vite and TypeScript
Author: Eduardo Nogueira - EN Technology Ltda
Latest version: 1.1.0

# 🌟 Single-UI React

> Biblioteca moderna de componentes React construída com Vite + TypeScript

[![NPM Version](https://img.shields.io/npm/v/@single-ui/react.svg)](https://www.npmjs.com/package/@single-ui/react)
[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
[![GitHub](https://img.shields.io/badge/GitHub-DuuhNog%2Fsingle--ui-181717?logo=github)](https://github.com/DuuhNog/single-ui)

## 👀 Veja os componentes ao vivo

**[www.single-ui.com](https://www.single-ui.com)**

Acesse o site para explorar todos os componentes interativos com exemplos de código, dark mode, temas e props.

---

## ✨ Características

- ⚛️ **React 19** - Componentes modernos com hooks
- 📝 **TypeScript** - Tipagem completa
- ⚡ **Vite** - Build rápido e HMR
- 🎨 **CSS Puro** - Sem dependências de frameworks
- 🌓 **Dark Mode** - Suporte nativo
- 🎭 **Máscaras** - 7 tipos integrados (BRL, USD, CPF, CNPJ, etc)
- 📅 **DatePicker / DateRangePicker** - Seleção de datas com navegação completa
- 🎯 **Tree-shakeable** - Importe apenas o que usa
- ♿ **Acessível** - Seguindo padrões WCAG

## 📦 Instalação

```bash
npm install @single-ui/react
```

ou

```bash
yarn add @single-ui/react
```

ou

```bash
pnpm add @single-ui/react
```

## 🚀 Uso Rápido

### 1. Importe os estilos

```tsx
import '@single-ui/react/styles';
```

### 2. Use os componentes

```tsx
import { Button, Input, Card } from '@single-ui/react';

function App() {
  return (
    <div>
      <Button variant="primary" onClick={() => alert('Clicou!')}>
        Clique aqui
      </Button>

      <Input
        label="CPF"
        mask="cpf"
        placeholder="000.000.000-00"
        onChange={(value) => console.log(value)}
      />

      <Card title="Meu Card" bordered>
        Conteúdo do card
      </Card>
    </div>
  );
}
```

## 📚 Componentes

Para documentação completa com demos interativos, acesse **[www.single-ui.com](https://www.single-ui.com)**.

## 🛠️ Desenvolvimento

```bash
git clone https://github.com/DuuhNog/single-ui.git
cd single-ui
npm install
npm run dev       # showcase em http://localhost:5173
npm run build     # gera dist/
npm test          # roda os testes
```

---

## 🤝 Contribuindo

Achou um bug ou tem uma ideia? Abre uma [issue ou PR](https://github.com/DuuhNog/single-ui/issues) que a gente olha na sequência. Feito de dev para dev.

---

## 📄 Licença

MIT © Eduardo Nogueira - EN Technology Ltda
npm package: @single_ops/react-scripts
Description: SingleOps Configuration and scripts for Create React App.
Latest version: 5.0.3

# react-scripts

This package includes scripts and configuration used by [Create React App](https://github.com/facebook/create-react-app).<br>
Please refer to its documentation:

- [Getting Started](https://facebook.github.io/create-react-app/docs/getting-started) – How to create a new app.
- [User Guide](https://facebook.github.io/create-react-app/) – How to develop apps bootstrapped with Create React App.
npm package: @singledogswap/eslint-config-singledog
Description: Eslint config for SingledogSwap
Author: RabbitDoge
Latest version: 1.0.10

# eslint-config-singledog

Singledog Eslint config with:

- Airbnb config
- Typescript
- Prettier

## Usage

```
npx install-peerdeps --dev @singledogswap-libs/eslint-config-singledog
```

Add `"extends": "@singledogswap-libs/eslint-config-singledog"` to your eslint config file.
npm package: @singledogswap/sdk
Description: 🛠 An SDK for building applications on top of singledogswap.
Latest version: 1.0.3

# Singledogswap SDK

[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
[![Actions Status](https://github.com/singledogswap/singledogswap-sdk/workflows/CI/badge.svg)](https://github.com/singledogswap/singledogswap-sdk)
[![npm version](https://img.shields.io/npm/v/@singledogswap-lib/sdk/latest.svg)](https://www.npmjs.com/package/@singledogswap-lib/sdk/v/latest)

## Running tests

To run the tests, follow these steps. You must have at least node v10 and [yarn](https://yarnpkg.com/) installed.

First clone the repository:

```sh
git clone https://github.com/singledogswap/singledogswap-sdk.git
```

Move into the singledogswap-sdk working directory

```sh
cd singledogswap-sdk/
```

Install dependencies

```sh
yarn install
```

Run tests

```sh
yarn test
```

You should see output like the following:

```sh
yarn run v1.22.4
$ tsdx test
 PASS  test/constants.test.ts
 PASS  test/pair.test.ts
 PASS  test/fraction.test.ts
 PASS  test/miscellaneous.test.ts
 PASS  test/entities.test.ts
 PASS  test/trade.test.ts

Test Suites: 1 skipped, 6 passed, 6 of 7 total
Tests:       3 skipped, 82 passed, 85 total
Snapshots:   0 total
Time:        5.091s
Ran all test suites.
✨  Done in 6.61s.
```
npm package: @singledogswap/uikit
Description: Set of UI components for singledog projects
Latest version: 0.27.3

# 🥞 Singledog UIkit

[![Version](https://img.shields.io/npm/v/@singledogswap/uikit)](https://www.npmjs.com/package/@singledogswap/uikit) [![Size](https://img.shields.io/bundlephobia/min/@singledogswap/uikit)](https://www.npmjs.com/package/@singledogswap/uikit)

Singledog UIkit is a set of React components and hooks used to build pages on Singledog's apps. It also contains a theme file for dark and light mode.

## Install

`yarn add @singledogswap/uikit`

## Setup

### Theme

Before using Singledog UIkit, you need to provide the theme file to styled-component.

```
import { ThemeProvider } from 'styled-components'
import { light, dark } from '@singledogswap/uikit'
...
<ThemeProvider theme={isDark}>...</ThemeProvider>
```

### Reset

A reset CSS is available as a global styled component.

```
import { ResetCSS } from '@singledogswap/uikit'
...
<ResetCSS />
```

### Types

This project is built with Typescript and export all the relevant types.

## How to use the UIkit

If you want to use components from the UIkit, check the [Storybook documentation](https://singledogswap.github.io/singledog-uikit/)
npm package: @singlepixellab/eslint-config
Description: The ESLint rules and configs used by Single Pixel Lab
Author: Single Pixel Lab
Latest version: 2.1.0

# @singlepixellab/eslint-config

The ESLint rules and configs used by Single Pixel Lab.

## Requirements

- Node.js ≥ 18
- ESLint ≥ 9

## Usage

Install package

```
npm install -dev @singlepixellab/eslint-config eslint
```

This package provides a default configuration as well as modular rule sets that can be composed as needed.

### Default configuration

You can use the full configuration directly:

```js
import config from "@singlepixellab/eslint-config";

export default config;
```

### Modular configurations

Each rule set can also be imported individually using subpath exports.

```js
import react from "@singlepixellab/eslint-config/react";
import styles from "@singlepixellab/eslint-config/styles";

export default [...styles, ...react];
```

Available modules:

| Module   | Import                                   | Description                    |
| -------- | ---------------------------------------- | ------------------------------ |
| Core     | `@singlepixellab/eslint-config/core`     | Base ESLint rules              |
| Ignore   | `@singlepixellab/eslint-config/ignores`  | Default ignore patterns        |
| Import   | `@singlepixellab/eslint-config/imports`  | Import ordering and validation |
| JSDoc    | `@singlepixellab/eslint-config/jsdoc`    | JSDoc linting                  |
| Prettier | `@singlepixellab/eslint-config/prettier` | Prettier integration           |
| React    | `@singlepixellab/eslint-config/react`    | React and Hooks rules          |
| Style    | `@singlepixellab/eslint-config/styles`   | Stylistic rules                |

### Named exports

Alternatively, the same configurations can be imported from the package entry.

```js
import { reactConfig, stylesConfig } from "@singlepixellab/eslint-config";

export default [...stylesConfig, ...reactConfig];
```

Named exports are provided for convenience, while subpath imports are generally recommended for clarity and tree-shaking.

## VS Code

- Install [ESLint extension](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) for VS Code: `dbaeumer.vscode-eslint`
- To run ESLint fix command (i.e. eslint --fix) whenever a file is saved, add the following config in the `settings.json` file:
  ```
  {
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": "explicit"
    },
  }
  ```
npm package: @singlepixellab/prettier-config
Description: Prettier config used in Single Pixel Lab packages and projects
Author: Single Pixel Lab
Latest version: 1.2.0

# @singlepixellab/prettier-config

Prettier config used in Single Pixel Lab packages and projects

## Installation

Install preset package

```shell
npm i -D @singlepixellab/prettier-config

# Make sure to also install prettier
npm i -D prettier
```

## Usage

You can reference this preset in your `package.json`:

```json
{
  "name": "your-project",
  "version": "1.0.0",
  "prettier": "@singlepixellab/prettier-config"
}
```

or you can use any of the supported extensions to export a string, e.g. `.prettierrc`:

```
"@singlepixellab/prettier-config"
```

## Extending config

To extend and modify this configuration, import the file in a `.prettierrc.js` file:

```javascript
import splConfig from "@singlepixellab/prettier-config";

/**
 * @type {import("prettier").Config}
 */
const config = {
  ...splConfig,
  tabWidth: 4,
};

export default config;
```

## License

[MIT](LICENSE) © Single Pixel Lab
npm package: @singlestone/eslint-config-sugar
Description: eslint config for Sugar, SingleStone&#x27;s sweet design system
Author: SingleStone Consulting
Latest version: 0.3.0

# eslint-config-sugar

> eslint config for Sugar, SingleStone's sweet design system

<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->

- [Installation](#installation)
- [Usage](#usage)

<!-- END doctoc generated TOC please keep comment here to allow auto update -->

## Installation

Inside the Sugar monorepo, install it with a dev dependency like so:

```json
{
  "devDependencies": {
    "@singlestone/eslint-config-sugar": "workspace:^"
  }
}
```

Outside the monorepo, install it with an actual version instead of `workspace:^`.

## Usage

Fill me out!
npm package: @singlestone/plop-generators-sugar
Description: Plop generators config for Sugar
Author: SingleStone Consulting
Latest version: 0.3.0

# plop-generators-sugar

> [plop](https://plopjs.com/) generators for Sugar.

<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->

- [Installation](#installation)
- [Usage](#usage)

<!-- END doctoc generated TOC please keep comment here to allow auto update -->

## Installation

Inside the Sugar monorepo, install it with a dev dependency like so:

```json
{
  "devDependencies": {
    "@singlestone/plop-generators-sugar": "workspace:^"
  }
}
```

Outside the monorepo, install it with an actual version instead of `workspace:^`.

## Usage

Set up your plopfile.js like so:

```typescript
const { plopGeneratorsSugar } = require("@singlestone/plop-generators-sugar");

module.exports = (
  /** @type {import('plop').NodePlopAPI} */
  plop
) => {
  plopGeneratorsSugar(plop);
};
```

You can make any changes or overrides you might want to make by destructuring the results.
npm package: @singlestone/postcss-preset-sugar
Description: PostCSS config for Sugar
Author: SingleStone Consulting
Latest version: 0.3.0

# postcss-preset-sugar

> PostCSS preset for Sugar.

<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->

- [Installation](#installation)
- [Usage](#usage)

<!-- END doctoc generated TOC please keep comment here to allow auto update -->

## Installation

Inside the Sugar monorepo, install it with a dev dependency like so:

```json
{
  "devDependencies": {
    "@singlestone/postcss-preset-sugar": "workspace:^"
  }
}
```

Outside the monorepo, install it with an actual version instead of `workspace:^`.

## Usage

Set up your postcss.config.js like so:

```javascript
const { sugarPostcssPresetFn } = require("@singlestone/postcss-preset-sugar");

module.exports = (ctx) => sugarPostcssPresetFn(ctx);
```

You can make any changes or overrides you might want to make by destructuring the results.
npm package: @singlestone/prettier-config-sugar
Description: PostCSS config for Sugar
Author: SingleStone Consulting
Latest version: 0.3.0

# prettier-config-sugar

> Prettier config for Sugar.

<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->

- [Installation](#installation)
- [Usage](#usage)

<!-- END doctoc generated TOC please keep comment here to allow auto update -->

## Installation

Inside the Sugar monorepo, install it with a dev dependency like so:

```json
{
  "devDependencies": {
    "@singlestone/prettier-config-sugar": "workspace:^"
  }
}
```

Outside the monorepo, install it with an actual version instead of `workspace:^`.

## Usage

Set up your .prettierrc.js like so:

```javascript
module.exports = require("@singlestone/prettier-config-sugar");
```

You can make any changes or overrides you might want to make by destructuring the results.
npm package: @singlestone/prettier-plugin-organize-imports-tailwindcss
Description: PostCSS config for Sugar
Author: SingleStone Consulting
Latest version: 0.2.1

# prettier-plugin-organize-imports-tailwindcss

> Prettier config for Sugar.

<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->

- [Installation](#installation)
- [Usage](#usage)

<!-- END doctoc generated TOC please keep comment here to allow auto update -->

## Installation

Inside the Sugar monorepo, install it with a dev dependency like so:

```json
{
  "devDependencies": {
    "@singlestone/prettier-plugin-organize-imports-tailwindcss": "workspace:^"
  }
}
```

Outside the monorepo, install it with an actual version instead of `workspace:^`.

## Usage

Set up your .prettierrc.js like so:

```javascript
module.exports = require("@singlestone/prettier-plugin-organize-imports-tailwindcss");
```

You can make any changes or overrides you might want to make by destructuring the results.
npm package: @singlestone/sugar
Description: Core plugin for the sugar design system
Author: SingleStone Consulting
Latest version: 0.6.2

# sugar

> Core plugin for the sugar design system

<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->

- [Prerequisites](#prerequisites)
- [Installation](#installation)
  - [npm](#npm)
  - [Yarn](#yarn)
  - [pnpm](#pnpm)
- [Setup](#setup)
- [Usage](#usage)
- [Configuration](#configuration)

<!-- END doctoc generated TOC please keep comment here to allow auto update -->

## Prerequisites

- NodeJS 14+
- A functioning [Tailwind setup](https://tailwindcss.com/docs/installation)

## Installation

Install `@singlestone/sugar` with your NodeJS package manager of choice.

### npm

```shell
$ npm install -D @singlestone/sugar
```

### Yarn

```shell
$ yarn add -D @singlestone/sugar
```

### pnpm

```shell
$ pnpm install -D @singlestone/sugar
```

## Setup

After [installation](#installation), add Sugar to your `tailwind.config.js` like so:

```js
// tailwind.config.js
module.exports = {
  mode: "jit",
  content: [
    // change this to fit your project as necessary
    "./src/**/*.{ts,tsx}",
    "./index.html",
  ],
  plugins: [require("@singlestone/sugar").sugarCorePlugin()],
};
```

## Usage

Once you've followed the [Installation](#installation) and [Setup](#setup) process, you can use the CSS classes
generated in your JavaScript and HTML.

Check out our [Storybook](https://sugar.singlestone.io) for examples on how to do so.

## Configuration

You can customize the colors that Sugar uses by default by providing colors objects in your Tailwind config.

```js
// tailwind.config.js
const colors = require("tailwindcss/colors");

module.exports = {
  mode: "jit",
  content: [
    // change this to fit your project as necessary
    "./src/**/*.{ts,tsx}",
    "./index.html",
  ],
  theme: {
    extend: {
      colors: {
        // You can use built in Tailwind colors!
        accent: colors.purple,
        // You can provide your own colors!
        // Make sure to provide the full range of colors when possible.
        // At the very least, provide the below entries:
        // 50, 200, 400, and 600
        destructive: {
          50: "#fef2f2",
          100: "#fee2e2",
          200: "#fecaca",
          300: "#fca5a5",
          400: "#f87171",
          500: "#ef4444",
          600: "#dc2626",
          700: "#b91c1c",
          800: "#991b1b",
          900: "#7f1d1d",
        },
        neutral: colors.slate,
      },
    },
  },
  plugins: [require("@singlestone/sugar").sugarCorePlugin()],
};
```
npm package: @singlestone/sugar-compiled
Description: Compiled implementation of Sugar.
Author: SingleStone Consulting
Latest version: 0.2.0
Deprecated: This package has been deprecated.

# sugar-compiled

> SingleStone's sweet design system, built with Tailwind.

<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->

- [Installation](#installation)
- [Usage](#usage)

<!-- END doctoc generated TOC please keep comment here to allow auto update -->

## Installation

Inside the Sugar monorepo, install it with a dependency like so:

```json
{
  "devDependencies": {
    "@singlestone/sugar": "workspace:^"
  }
}
```

Outside the monorepo, install it with an actual version instead of `workspace:^`.

## Usage

See the `example` project or the storybook for examples on how to use this package.
npm package: @singlestone/sugar-react
Description: React bindings for Sugar
Author: SingleStone Consulting
Latest version: 0.6.2

<h1 align="center">Welcome to @singlestone/sugar-react 👋</h1>
<p>
  <a href="https://npmjs.com/package/@singlestone/sugar-react" target="_blank">
    <img alt="npm (scoped)" src="https://img.shields.io/npm/v/@singlestone/sugar-react">
  </a>
</p>

> React bindings for Sugar

<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->

- [Prerequisites](#prerequisites)
- [Installation](#installation)
  - [npm](#npm)
  - [Yarn](#yarn)
  - [pnpm](#pnpm)
- [Setup](#setup)
- [Usage](#usage)
- [Development](#development)

<!-- END doctoc generated TOC please keep comment here to allow auto update -->

## Prerequisites

- NodeJS 14+
- A functioning [Tailwind and Sugar setup](../sugar/README.md#setup)

## Installation

Install `@singlestone/sugar-react` with your NodeJS package manager of choice.

### npm

```shell
$ npm install @singlestone/sugar-react
```

### Yarn

```shell
$ yarn add @singlestone/sugar-react
```

### pnpm

```shell
$ pnpm install @singlestone/sugar-react
```

## Setup

After [installation](#installation), add Sugar React to your `tailwind.config.js` like so:

```js
// tailwind.config.js
module.exports = {
  mode: "jit",
  content: [
    // change this to fit your project as necessary
    "./src/**/*.{ts,tsx}",
    // add this
    "./node_modules/@singlestone/sugar-react/**/*.js",
  ],
  plugins: [require("@singlestone/sugar").sugarCorePlugin()],
};
```

## Usage

Once you've followed the [Installation](#installation) and [Setup](#setup) process, you can import the various
components in your application. All `@singlestone/sugar-react` components are thin wrappers around the semantic
HTML elements that they represent, so you can use them exactly the same way that you'd use a normal element.

```tsx
import { Select, TextInput } from "@singlestone/sugar-react";

// ...
<Label htmlFor="some-select">Options!</Label>
<Select id="some-select">
    <option disabled value="">Select an Option</option>
    <option value="option1">Option 1</option>
</Select>
```

You can also pass additional class names to each component - they'll be appended to the resulting element.

```tsx
<Label htmlFor="some-select">Options!</Label>
<Select className="w-full" id="some-select">
    <option disabled value="">Select an Option</option>
    <option value="option1">Option 1</option>
</Select>
```

## Development

This package is a bit unusual in how you can develop it at the moment. It follows the
conventions of all the other projects by having most steps be able to be used by
things depending on it (e.g., `pnpm run dev` outputs a built version of the library and
watches for file changes). You can also start a Vite server for quick development of
components (until we set up Storybook for it) via `pnpm run start`.
npm package: @singlestone/sugar-tokens
Description: Common design tokens used throughout Sugar
Author: SingleStone Consulting
Latest version: 0.6.2

# tokens

> Common design tokens used throughout Sugar

<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->

- [Installation](#installation)
  - [npm](#npm)
  - [Yarn](#yarn)
  - [pnpm](#pnpm)
- [Usage](#usage)

<!-- END doctoc generated TOC please keep comment here to allow auto update -->

## Installation

Install `@singlestone/sugar-tokens` with your NodeJS package manager of choice.

### npm

```shell
$ npm install -D @singlestone/sugar-tokens
```

### Yarn

```shell
$ yarn add -D @singlestone/sugar-tokens
```

### pnpm

```shell
$ pnpm install -D @singlestone/sugar-tokens
```

## Usage

Fill me out!
npm package: @singlestone/tailwind-helpers-sugar
Description: Helper functions for use in Sugar, SingleStone's sweet design system
Author: SingleStone Consulting
Latest version: 0.6.2

# tailwind-helpers-sugar

> Helper functions for use in Sugar, SingleStone's sweet design system

<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->

- [Installation](#installation)
- [Usage](#usage)

<!-- END doctoc generated TOC please keep comment here to allow auto update -->

## Installation

Inside the Sugar monorepo, install it with a dev dependency like so:

```json
{
  "devDependencies": {
    "@singlestone/tailwind-helpers-sugar": "workspace:^"
  }
}
```

Outside the monorepo, install it with an actual version instead of `workspace:^`.

## Usage

```typescript
import {
  hslWithOpacity,
  rgbWithOpacity,
} from "@singlestone/tailwind-preset-sugar";
```
npm package: @singlestone/tailwind-plugin-buttons-sugar
Description: Tailwind plugin for sugar design system buttons
Author: SingleStone Consulting
Latest version: 0.6.2

# tailwind-plugin-buttons

> Buttons plugin for the Sugar design system

<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->

- [Prerequisites](#prerequisites)
- [Installation](#installation)
  - [npm](#npm)
  - [Yarn](#yarn)
  - [pnpm](#pnpm)
- [Setup](#setup)
- [Usage](#usage)

<!-- END doctoc generated TOC please keep comment here to allow auto update -->

## Prerequisites

- NodeJS 14+
- A functioning [Tailwind setup](https://tailwindcss.com/docs/installation)

## Installation

Install `@singlestone/tailwind-plugin-buttons-sugar` with your NodeJS package manager of choice.

### npm

```shell
$ npm install -D @singlestone/tailwind-plugin-buttons-sugar
```

### Yarn

```shell
$ yarn add -D @singlestone/tailwind-plugin-buttons-sugar
```

### pnpm

```shell
$ pnpm install -D @singlestone/tailwind-plugin-buttons-sugar
```

## Setup

After [installation](#installation), add Sugar to your `tailwind.config.js` like so:

```js
// tailwind.config.js
module.exports = {
  mode: "jit",
  content: [
    // change this to fit your project as necessary
    "./src/**/*.{ts,tsx}",
    "./index.html",
  ],
  plugins: [
    require("@singlestone/tailwind-plugin-buttons-sugar").sugarButtonsPlugin(),
  ],
};
```

## Usage

Once you've followed the [Installation](#installation) and [Setup](#setup) process, you can use the CSS classes
generated in your JavaScript and HTML.

Check out our [Storybook](https://sugar.singlestone.io) for examples on how to do so.
npm package: @singlestone/tailwind-plugin-core-sugar
Description: Core plugin for the sugar design system
Author: SingleStone Consulting
Latest version: 0.1.0
Deprecated: This package has been renamed. Use @singlestone/sugar instead.

# tailwind-plugin-core-sugar

> Core plugin for the sugar design system

<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->

- [Installation](#installation)
- [Usage](#usage)

<!-- END doctoc generated TOC please keep comment here to allow auto update -->

## Installation

Inside the Sugar monorepo, install it with a dev dependency like so:

```json
{
  "devDependencies": {
    "@singlestone/tailwind-plugin-core-sugar": "workspace:^"
  }
}
```

Outside the monorepo, install it with an actual version instead of `workspace:^`.

## Usage

Fill me out!
npm package: @singlestone/tailwind-plugin-form-sugar
Description: Tailwind plugin for sugar design system buttons
Author: SingleStone Consulting
Latest version: 0.6.2

# tailwind-plugin-form

> Form plugin for the sugar design system

<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->

- [Prerequisites](#prerequisites)
- [Installation](#installation)
  - [npm](#npm)
  - [Yarn](#yarn)
  - [pnpm](#pnpm)
- [Setup](#setup)
- [Usage](#usage)

<!-- END doctoc generated TOC please keep comment here to allow auto update -->

## Prerequisites

- NodeJS 14+
- A functioning [Tailwind setup](https://tailwindcss.com/docs/installation)

## Installation

Install `@singlestone/tailwind-plugin-form-sugar` with your NodeJS package manager of choice.

### npm

```shell
$ npm install -D @singlestone/tailwind-plugin-form-sugar
```

### Yarn

```shell
$ yarn add -D @singlestone/tailwind-plugin-form-sugar
```

### pnpm

```shell
$ pnpm install -D @singlestone/tailwind-plugin-form-sugar
```

## Setup

After [installation](#installation), add Sugar to your `tailwind.config.js` like so:

```js
// tailwind.config.js
module.exports = {
  mode: "jit",
  content: [
    // change this to fit your project as necessary
    "./src/**/*.{ts,tsx}",
    "./index.html",
  ],
  plugins: [
    require("@singlestone/tailwind-plugin-form-sugar").sugarFormsPlugin(),
  ],
};
```

## Usage

Once you've followed the [Installation](#installation) and [Setup](#setup) process, you can use the CSS classes
generated in your JavaScript and HTML.

Check out our [Storybook](https://sugar.singlestone.io) for examples on how to do so.
npm package: @singlestore/eslint-plugin-react-hooks-disable-import
Description: ## About
Author: SingleStore, Inc.
Latest version: 1.0.2

# eslint-react-hooks-disable-import

## About

The goal of this library is to add a custom eslint rule to enforce how react hooks are imported. The eslint rule will error when the hook is directly imported from react as shown in the example below:

Bad:
```
import { useContext } from "react";
...
const { val } = useContext(...);
```

Good:
```
const { val } = React.useContext(...);
```

## How to Use
1. Install NPM Package
2. Add the rule to eslint-config.js

Add the package to "plugins"
```
"@singlestore/react-hooks-disable-import"
```
Add the rule to the "rules"
```
"@singlestore/react-hooks-disable-import/react-hooks-disable-import": "error"
```