open-index/open-npm huggingface dataset:
npm package: @hdnha11/slate-react
Description: A set of React components for building completely customizable rich-text editors.
Latest version: 0.21.24

This package contains the React-specific logic for Slate. It's separated further into a series of directories:

* [**Components**](./src/components) — containing the React components for rendering Slate editors.
* [**Constants**](./src/constants) — containing a few private constants modules.
* [**Plugins**](./src/plugins) — containing the React-specific plugins for Slate editors.
* [**Utils**](./src/utils) — containing a few private convenience modules.

Feel free to poke around in each of them to learn more!
npm package: @hdoc-react/button
Description: Simple button components for your React app
Author: Héctor Ochoa
Latest version: 2.4.0
Deprecated: This package has change of organization scope. Use @hrc/button instead

# @hdoc-react/button

<p align="center">
  <a href="https://www.npmjs.com/package/@hdoc-react/button">
    <img alt="npm" src="https://img.shields.io/npm/v/%40hdoc-react%2Fbutton">
  </a>
  <img alt="npm bundle size" src="https://img.shields.io/bundlephobia/minzip/%40hdoc-react%2Fbutton">
  <img alt="npm" src="https://img.shields.io/npm/dm/%40hdoc-react%2Fbutton">
</p>

Simple button components for your React app

![Buttons screenshot](https://github.com/Hdoc1509/react-components/assets/72316111/f6ea1b00-a905-4bbf-97d8-81291b22303f)

> Demo generated with code from [Usage](#usage) section

## Installation

```bash
npm install @hdoc-react/button
```

## Usage

```js
import { DeleteIcon, FavoriteIcon, SearchIcon } from "third-party-package";
import { Button, ButtonIcon, ButtonGroup } from "@hdoc-react/button";

function App() {
  return (
    <>
      <Button size="large" color="primary" iconEnd={<DeleteIcon />}>
        Delete
      </Button>
      <ButtonIcon color="error">
        <FavoriteIcon />
      </ButtonIcon
      <ButtonGroup>
        <Button>One</Button>
        <Button>Two</Button>
        <Button>Three</Button>
        <ButtonIcon>
          <SearchIcon />
        </ButtonIcon>
      </ButtonGroup>
    </>
  );
}
```

## API

See documentation below for reference to all of the props, classes and CSS
variables (custom properties) available for the following components:

- [`<Button />`](docs/Button.md)
- [`<ButtonIcon />`](docs/ButtonIcon.md)
- [`<ButtonGroup />`](docs/ButtonGroup.md)
npm package: @hdoc-react/input
Description: Simple input components for your React app
Author: Héctor Ochoa
Latest version: 0.8.0
Deprecated: This package has change of organization scope. Use @hrc/input instead

# @hdoc-react/input

<p align="center">
  <a href="https://www.npmjs.com/package/@hdoc-react/input">
    <img alt="npm" src="https://img.shields.io/npm/v/%40hdoc-react%2Finput">
  </a>
  <img alt="npm bundle size" src="https://img.shields.io/bundlephobia/minzip/%40hdoc-react%2Finput">
  <img alt="npm" src="https://img.shields.io/npm/dm/%40hdoc-react%2Finput">
</p>

Simple input components for your React app

![Inputs screenshot](https://github.com/Hdoc1509/react-components/assets/72316111/b611760d-755e-4923-ba6c-3c52ceb32b2c)

## Installation

```bash
npm install @hdoc-react/input
```

## Usage

```js
import { EmailIcon, StarIcon, StarBorderIcon } from "third-party-package";
import { Input, Textarea, Checkbox } from "@hdoc-react/input";

function App() {
  return (
    <>
      <Input label="Email" type="email" iconEnd={<EmailIcon />} />
      <Textarea label="Message" />
      <Checkbox
        label="Favorite"
        icon={<StarBorderICon />}
        iconChecked={<StarIcon />}
        color="warning"
      />
    </>
  );
}
```

## API

See documentation below for reference to all of the props, classes and CSS
custom properties available for the following components:

- [`<Input />`](docs/Input.md)
- [`<Textarea />`](docs/Textarea.md)
- [`<Checkbox />`](docs/Checkbox.md)

## General Customization

You can customize the label, placeholder and helper text for any of the
previously mentioned components.

### CSS Custom Properties

```css
/* YOU CAN USE ANY SELECTOR YOU WANT */
:root,
[data-theme="my-custom-theme"],
body.dark,
.any-parent,
.class-to-extend-styles {
  --placeholder-color: #636363;
  --placeholder-disabled: #434343;

  --label-font-family: "Roboto";
  --label-font-size: 14px;
  --label-font-weight: 600;
  --label-text: #828282;
  --label-text-focus: lightblue;

  /* ↓ This should be passed to .label */
  --helper-text-color: #828282;

  /* ERROR VARIANT, for label and helper text */
  --error: #f44336;
}
```

### CSS Classes

`.label`

The styles for the label

---

`.label--error`

The error styles for the label

---

`.label--fullwidth`

The full width styles for the label

---

`.helper-text`

The styles for the helper text

## Reducing Build Size

The default entry point includes CSS for all of the components. You have two
options to reduce the build size:

### Option 1: Use path imports

```diff
- import { Input, Textarea } from "@hdoc-react/input";
+ import { Input } from "@hdoc-react/input/dist/Input";
+ import { Textarea } from "@hdoc-react/input/dist/Textarea";
```

### Option 2: Use `babel-plugin-import`

Install the plugin with `npm install -D babel-plugin-import`

Create a `.babelrc.js` file in your project root with the following content:

```js
import inputConfig from "@hdoc-react/input/config/babel-import.js";

const plugins = [...otherPlugins, inputConfig];

module.exports = { plugins };
```
npm package: @hdoc-react/spinner
Description: Simple spinner component for your React app
Author: Héctor Ochoa
Latest version: 0.2.0
Deprecated: This package has change of organization scope. Use @hrc/spinner instead

# @hdoc-react/spinner

<p align="center">
  <a href="https://www.npmjs.com/package/@hdoc-react/spinner">
    <img alt="npm" src="https://img.shields.io/npm/v/%40hdoc-react%2Fspinner">
  </a>
  <img alt="npm bundle size" src="https://img.shields.io/bundlephobia/minzip/%40hdoc-react%2Fspinner">
  <img alt="npm" src="https://img.shields.io/npm/dm/%40hdoc-react%2Fspinner">
</p>

Simple spinner component for your React app

![demo](https://github.com/Hdoc1509/react-components/assets/72316111/c95fda1c-1ade-4b94-8929-bfeb5a9782a0)

## Installation

```bash
npm install @hdoc-react/spinner
```

## Usage

```js
import { RingSpinner } from "@hdoc-react/spinner";

function App() {
  return (
    <>
      <RingSpinner />
    </>
  );
}
```

## Props

`size`

The size of the spinner.

Type: `'small' | 'large'`

---

`speed`

The speed of the spinner.

Type: `'slow' | 'fast'`

---

`color`

The color of the spinner.

Type: `'primary' | 'secondary' | 'error' | 'warning' | 'info' | 'success'`

---

`className`

Additional class names for extending styles.

Type: `string`

---

## Customization

## CSS Custom Properties

You can customize the spinner by using the following CSS custom properties:

```css
.any-parent-of-spinner,
.class-to-extend-styles {
  --spinner-size: 24px;
  --spinner-color: black; /* default color */
  --spinner-animation-duration: 1s;

  /* COLOR VARIANTS */
  --primary: lightblue;
  --secondary: lightgray;
  --error: red;
  --warning: orange;
  --info: skyblue;
  --success: green;
}
```

## CSS classes

`.ring-spinner`

The base styles for the spinner

---

`.spinner--small`

The small styles for the spinner

---

`.spinner--large`

The large styles for the spinner

---

`.spinner--slow`

The slow styles for the spinner

---

`.spinner--fast`

The fast styles for the spinner

---

`.spinner--primary`

The primary styles for the spinner

---

`.spinner--secondary`

The secondary styles for the spinner

---

`.spinner--error`

The error styles for the spinner

---

`.spinner--warning`

The warning styles for the spinner

---

`.spinner--info`

The info styles for the spinner

---

`.spinner--success`

The success styles for the spinner
npm package: @hdoc-react/toggle-theme
Description: A react button component for toggle the theme
Author: Héctor Ochoa
Latest version: 2.1.5
Deprecated: This package has change of organization scope. Use @hrc/toggle-theme instead

# @hdoc-react/toggle-theme

<p align="center">
  <a href="https://www.npmjs.com/package/@hdoc-react/toggle-theme">
    <img alt="npm" src="https://img.shields.io/npm/v/%40hdoc-react%2Ftoggle-theme">
  </a>
  <img alt="npm bundle size" src="https://img.shields.io/bundlephobia/minzip/%40hdoc-react%2Ftoggle-theme">
  <img alt="npm" src="https://img.shields.io/npm/dm/%40hdoc-react%2Ftoggle-theme">
</p>

Simple button component for toggle between `light` and `dark` theme in your
React app.

![Theme Button gif](https://github.com/Hdoc1509/react-components/assets/72316111/53cf9717-472c-41f5-95df-260d3dda009a)

- It saves the theme in `localStorage` with the key `theme`.
- If there is no theme in `localStorage`, the default is the user's preferred
theme.

## Installation

```bash
npm install @hdoc-react/toggle-theme
```

## Usage

First, import `load-theme.js` in your `index.html`:

```html
<script
  type="module"
  src="/path/to/@hdoc-react/toggle-theme/dist/load-theme.js"
></script>
```

Then, in your `App.jsx` or another file:

```js
import { ThemeButton } from "@hdoc-react/toggle-theme";

function App() {
  return (
    <>
      <ThemeButton
        lightElement={<span>Light</span>}
        darkElement={<span>Dark</span>}
        fullRounded
      />
    </>
  );
}
```

Finally, you will need to add your styles manually:

```css
body {
  background-color: var(--color-bg, #fff);
  color: var(--color-text, #000);
}

.my-class {
  color: var(--my-color-text, #000);
}

/* FOR LIGHT THEME: */
/* This is usually unnecessary. */
[data-theme="light"] {
  --color-bg: #fff;
  --color-text: #000;
  --my-color-text: #000;
}
[data-theme="light"] .my-class {
  --my-color-text: #000;
  /* or */
  color: #000;
}

/* FOR DARK THEME: */
[data-theme="dark"] {
  --color-bg: #242424;
  --color-text: #fff;
  --my-color-text: #fff;
}
[data-theme="dark"] .my-class {
  --my-color-text: #fff;
  /* or */
  color: #fff;
}
```

## Props

`lightElement`

Element to render when the theme is `light`.

Type: `ReactNode`

---

`darkElement`

Element to render when the theme is `dark`.

Type: `ReactNode`

---

`fullRounded`

Whether to render the button with rounded corners as a circle.

Type: `boolean`

## CSS classes

`theme-button`

Default class name

---

`theme-button--full-rounded`

Styles the button as a circle when `fullRounded=true`

## Customization

You can customize the background color of the button with the following CSS custom properties:

```css
.theme-button {
  --button-bg: #fff;
  --button-bg-hover: #eee;
  --button-bg-active: #ddd;
}

/* The same custom properties applies for dark theme. */
[data-theme="dark"] .theme-button {
  --button-bg: #333;
  --button-bg-hover: #444;
  --button-bg-active: #555;
}
```
npm package: @hdoc-react/type-utils
Description: Type utilities used by component packages of @hdoc-react/components
Author: Héctor Ochoa
Latest version: 1.1.0
Deprecated: This package has change of organization scope. Use @hrc/type-utils instead

# @hdoc-react/type-utils

Type utilities used by [component packages](https://github.com/Hdoc1509/react-components#packages) of [@hdoc-react/components](https://github.com/Hdoc1509/react-components)

## Installation

```bash
npm install @hdoc-react/type-utils
```

## Usage

```ts
import type { Simplify } from "@hdoc-react/type-utils";

type MyType = {
  a: number;
  b: string;
};

type AnotherType = {
  c: boolean;
  d: number;
};

type FlattenedType = Simplify<MyType & AnotherType>;
```

## API

### Utilities

- [`Simplify`](./src/simplify.d.ts) - Use to flatten the type output to improve
  type hints shown in editors.

### Common Props

These are [`common props`](./src/common-props.d.ts) that can be used in any
component.

- `Color` - Color variants
- `Size` - Size variants
npm package: @hdoc/react-toggle-theme
Description: A react button component for toggle the theme
Author: Héctor Ochoa
Latest version: 2.1.4
Deprecated: This package has moved to an organization scope. See https://www.npmjs.com/package/@hdoc-react/toggle-theme

# @hdoc/react-toggle-theme

<p align="center">
  <a href="https://www.npmjs.com/package/@hdoc/react-toggle-theme">
    <img alt="npm" src="https://img.shields.io/npm/v/%40hdoc%2Freact-toggle-theme">
  </a>
  <img alt="npm bundle size" src="https://img.shields.io/bundlephobia/minzip/%40hdoc%2Freact-toggle-theme">
  <img alt="npm" src="https://img.shields.io/npm/dm/%40hdoc%2Freact-toggle-theme">
</p>

Simple button component for toggle between `light` and `dark` theme in your React app.

![Theme Button gif](https://github.com/Hdoc1509/react-components/assets/72316111/53cf9717-472c-41f5-95df-260d3dda009a)

## Installation

```bash
npm install @hdoc/react-toggle-theme
```

## Usage

First, import `load-theme.js` in your `index.html`:

```html
<script
  type="module"
  src="/path/to/@hdoc/react-toggle-theme/dist/load-theme.js"
></script>
```

Then, in your `App.jsx` or another file:

```js
import { ThemeButton } from "@hdoc/react-toggle-theme";

function App() {
  return (
    <>
      <ThemeButton
        lightElement={<span>Light</span>}
        darkElement={<span>Dark</span>}
        fullRounded
      />
    </>
  );
}
```

Finally, you will need to add your styles manually:

```css
/* For light theme: */
[data-theme="light"] { ... }
[data-theme="light"] .my-class { ... }

/* For dark theme: */
[data-theme="dark"] { ... }
[data-theme="dark"] .my-class { ... }
```

## Props

`lightElement`

Element to render when the theme is `light`.

Type: `ReactNode`

---

`darkElement`

Element to render when the theme is `dark`.

Type: `ReactNode`

---

`fullRounded`

Whether to render the button with rounded corners as a circle.

Type: `boolean`

## CSS classes

`theme-button`

Default class name

---

`theme-button--full-rounded`

Styles the button as a circle when `fullRounded=true`

## Customization

You can customize the background color of the button with the following CSS custom properties:

```css
.theme-button {
  --button-bg: #fff;
  --button-bg-hover: #eee;
  --button-bg-active: #ddd;
}

/* The same custom properties applies for dark theme. */
[data-theme="dark"] .theme-button {
  --button-bg: #333;
  --button-bg-hover: #444;
  --button-bg-active: #555;
}
```
npm package: @hdong/dom-plus
Description: A slightly different version of the original dom-plus project (https://github.com/gabrielmccallin/dom-plus).
Author: Hao Dong
Latest version: 1.0.2

# dom-plus

A custom version of the original shiva project (https://github.com/gabrielmccallin/shiva).

## Why another JavaScript library?

Having used AngularJS, Vue, React and tried out a number other popular libraries/frameworks. It is quite tiresome to be constantly adapting to new library/framework specific APIs changes, new "best practices" and etc. The goal of this library is to:

* To be an abstraction layer between developers and vanilla DOM APIs. Simplify how developers interacts with the DOM, not introducing more complexity.
* Ultilise component based implementation compared to vanilla DOM and jQuery APIs.
* Write CSS in JS, which means it is now possible to unit test CSS styles.
* Less APIs to learn, and keep API changes to a minimal.
npm package: @hdot/validate
Description: Validate HTML attributes based on the HTML spec
Author: willmartian
Latest version: 0.0.7

# hdot plugin: Attribute Validation

Automatically type check HTML attributes against the HTML spec, powered by [markuplint](https://github.com/markuplint/markuplint).

## Installation

```bash
npm i @hdot/plugins/validate
```

## Usage

```js
import validate from "@hdot/plugins/validate";
import { h, setPlugins } from "hdot";

setPlugins(h, [validate]);

h.div.id("my id")();
// ---> Error: 'my id' is not a valid DOMID.
```

## Disabling in Production

If you running hdot in the browser, this plugin should typically not be used in production. Doing so will increase your bundle size.

If your build environment supports `NODE_ENV`, you might do the following:

```js
import { h, setPlugins } from "hdot";
const plugins = [];

if (process.env.NODE_ENV === "development") {
  const { default: validate } = await import("@hdot/plugins/validate");
  plugins.push(validate);
}

setPlugins(h, plugins);
```