open-index/open-npm huggingface dataset:
npm package: @krudi/eslint-config
Description: Reusable ESLint configuration to enforce consistent code style and standards across projects.
Author: krudi
Latest version: 0.1.8

# @krudi/eslint-config

Reusable [ESLint](https://github.com/eslint/eslint) configuration to enforce consistent code style and standards across
projects.

## Quick start

1. Install the depedency: `npm install --save-dev @krudi/eslint-config`

## Usage

Create `eslint.config.mjs` (or `eslint.config.ts`) in your project root and extend the configuration you need:

```js
import eslintConfig from '@krudi/eslint-config';

export default [eslintConfig.base, eslintConfig.prettier, eslintConfig.turbo];
```

| File                           | Purpose                                                                                                                        |
| ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------ |
| @krudi/eslint-config/base      | Base ESLint rules for general TypeScript/JavaScript projects                                                                   |
| @krudi/eslint-config/react     | React-specific ESLint configuration with hooks, JSX runtime, and [React](https://github.com/facebook/react) global definitions |
| @krudi/eslint-config/nextjs    | Additional rules and plugins for [Next.js](https://github.com/vercel/next.js) projects                                         |
| @krudi/eslint-config/expo      | Extra configuration for [Expo](https://github.com/expo/expo) React Native projects                                             |
| @krudi/eslint-config/prettier  | Ensures compatibility between ESLint and [Prettier](https://github.com/prettier/prettier)                                      |
| @krudi/eslint-config/storybook | Extra configuration for [Storybook](https://github.com/storybookjs/storybook) projects                                         |
| @krudi/eslint-config/turbo     | Linting rules tailored for [Turborepo](https://github.com/vercel/turborepo) monorepos                                          |
npm package: @krudi/icons
Description: Standalone SVG icon set extracted from @krudi/shared-styles for reuse across projects.
Author: krudi
Latest version: 0.1.3

# @krudi/icons

Standalone SVG icon set extracted from @krudi/shared-styles for reuse across projects.

## Using `@krudi/icons`

Install:

```sh
npm install @krudi/icons
```

Import an icon (works with bundlers that handle asset imports):

```js
import externalLink from '@krudi/icons/arrow-up-right-from-square.svg';
import phone from '@krudi/icons/square-phone.svg';
import envelope from '@krudi/icons/envelope.svg';
```

Or reference directly in CSS:

```css
a[href^='https://']::after {
    background-image: url('@krudi/icons/arrow-up-right-from-square.svg');
}
```
npm package: @krudi/prettier-config
Description: Reusable Prettier configuration to enforce consistent formatting across projects.
Author: krudi
Latest version: 0.1.8

# @krudi/prettier-config

Reusable [Prettier](https://github.com/prettier/prettier) configuration to
enforce consistent formatting across projects.

## Quick start

1. Install the depedency: `npm install --save-dev @krudi/prettier-config`

## Usage

Create `prettier.config.mjs` (or `prettier.config.js`) in your project root and
extend the configuration you need:

```js
// ESM
import base from '@krudi/prettier-config/base';

/** @type {import("prettier").Options} */
export default {
    ...base,
};

// CommonJS
const base = require('@krudi/prettier-config/base');

/** @type {import('prettier').Options} */
module.exports = {
    ...base,
};
```
npm package: @krudi/stylelint-config
Description: Shared Stylelint configuration to reuse across projects.
Author: krudi
Latest version: 0.1.1

# @krudi/stylelint-config

Shared Stylelint config used across projects. It extends `stylelint-config-standard` and `stylelint-order`, adds a
handful of sensible rules, and ignores compiled/vendor assets.

## Install

```sh
npm install -D @krudi/stylelint-config stylelint stylelint-config-standard stylelint-order
```

## Usage

`stylelint.config.cjs`:

```js
module.exports = {
    extends: ['@krudi/stylelint-config'],
};
```

`stylelint.config.mjs`:

```js
export default {
    extends: ['@krudi/stylelint-config'],
};
```
npm package: @krudi/typescript-config
Description: Shared TypeScript configuration for projects to provide consistent compiler settings.
Author: krudi
Latest version: 0.1.9

# typescript-config

Shared [TypeScript](https://github.com/microsoft/TypeScript) configuration for
projects to provide consistent compiler settings.

## Quick start

1. Install the depedency: `npm install --save-dev @krudi/typescript-config`

## Usage

Create `tsconfig.json` in your project root:

```yaml
{
    'extends': '@krudi/typescript-config/base.json',
    'compilerOptions': {},
    'exclude': ['node_modules', 'dist'],
}
```

| File                                          | Purpose                                                                                       |
| --------------------------------------------- | --------------------------------------------------------------------------------------------- |
| @krudi/typescript-config/base.json            | Base configuration for general TypeScript projects                                            |
| @krudi/typescript-config/nextjs.json          | Optimized settings for [Next.js](https://github.com/vercel/next.js) projects                  |
| @krudi/typescript-config/expo.json            | Preconfigured options for [Expo](https://github.com/expo/expo) apps                           |
| @krudi/typescript-config/external-package.json| Strict, safe config for **public npm packages** (external consumption, includes declarations) |
| @krudi/typescript-config/internal-package.json| Config for **internal monorepo-only packages**, optimized for development speed               |
npm package: @kruemelo/preacts
Description: preact standalone
Author: kruemelo
Latest version: 1.0.0-alpha30

# preacts

Run [preact](https://github.com/preactjs/preact) standalone in the browser.

- no transpiler necessary
- no build chain
- just import one tiny ~12kB file

**Supports**

- Writing `html` and `css` [Template literals](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals)
- Custom Components. Generate and register a custom element from a preact component.
- css rendering using [CSSStyleSheet](https://web.dev/articles/constructable-stylesheets)

**Based on**

- [preact and preact hooks](https://github.com/preactjs/preact)
- [HTM (Hyperscript Tagged Markup) and html/preact](https://github.com/developit/htm)
- [preact-custom-element](https://github.com/preactjs/preact-custom-element)
- [preact-signals](https://github.com/preactjs/signals)
- [wouter](https://www.npmjs.com/package/wouter-preact)

**Readings**

- preact and Web Components: <https://preactjs.com/guide/v10/web-components> ([npm](https://www.npmjs.com/package/preact-custom-element))
- preact and PWA: <https://preactjs.com/guide/v10/progressive-web-apps>
- Using Preact with HTM and ImportMaps: <https://preactjs.com/guide/v10/getting-started#using-preact-with-htm-and-importmaps>
- Syntax highlighting and language support via the [inline-html](https://marketplace.visualstudio.com/items?itemName=pushqrdx.inline-html) extension.

## Install

npm:

```bash
npm i --save-dev @kruemelo/preacts
cp node-modules/@kruemelo/preacts/dist/preacts.js <your/web/path/here/>preacts.js
```

Replace `<your/web/path/here/>` with your desired target location.

## Use

[index.html](./test/index.html):

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <script type="importmap">
      {
        "imports": {
          "preacts": "<your/web/path/here/>/preacts.js"
        }
      }
    </script>    
  </head>
  <script type="module">
    import { html, render, signal } from "preacts";
    import { Greeting } from "./Greeting.js";
  
    const count = signal(0);

    function App() {
      return html`
        <div>
          <${Greeting} count=${count.value} />
          <button onClick=${() => (count.value += 1)}>
            Increment with signal
          </button>
          <p>Counter: ${count}</p>
        </div>
      `;
    }

    render(html`<${App} />`, document.body);
  </script>
</html>
```

You need to adjust `importmap`: Replace `<your/web/path/here/>` with the path the `preacts.js` file is accessible for the browser.

[Greeting.js](./test/Greeting.js):

```js
import { html, css } from "preacts";

export const Greeting = ({ name = 'world', count }) => {
  return html`
    <h1 class="Greeting">
      Hello, ${count === 0 ? name : "again"}!
    </h1>
  `;
};

// css
const backgroundColor = "lightgreen";
const style = css`
  .Greeting {
    background-color: ${backgroundColor};
  }
`;

css.render(style);
```

## Build lib

```bash
npm run build
```

## Run

```bash
# prerequisites
npm install http-server -g
npm i
# startup the server open test in browser
http-server -o /test
```