open-index/open-npm huggingface dataset:
npm package: @nojaja/htmlcompiler
Description: webcomponents to html compiler
Author: nojaja
Latest version: 1.0.4


# HtmlCompiler
Description 
webcomponents to html compiler


## Installing

	npm install @nojaja/htmlcompiler


## Running Tests

### Run tests under node:
	todo

## Usage In Node

```javascript
let htmlparser = Tautologistics.NodeHtmlParser;
let rawHtml = ''
let parseData = htmlparser.parseDOM(rawHtml, {
            enforceEmptyTags: true,
            ignoreWhitespace: true,
            caseSensitiveTags: true,
            caseSensitiveAttr: true,
            verbose: false
        })

let webComponentParser = new WebComponentParser({
    builder: ReactComponentBuilder
});
let reactRootParser = new ReactRootComponentBuilder({
    builder: ReactComponentBuilder
});
let cssbuilder = new CSSBuilder({});
let compiler1 = new Compiler(
            [cssbuilder, webComponentParser, reactRootParser],
            {}
        );
compiler1.compile(parseData); //jsonオブジェクトを各種コードに変換します
webComponentParser.build(); //react化処理の実行
reactRootParser.build(); //react化処理の実行
console.log(webComponentParser.getResult())
console.log(reactRootParser.getResult())

let htmlbuilder = new HtmlBuilder({});
let compiler2 = new Compiler([htmlbuilder], {});
compiler2.compile(parseData.children); //jsonオブジェクトを各種コードに変換します
console.log(builder.getNodes())

```
npm package: @nojamm/nodebabel
Description: Basic Node-Babel CLI
Author: jaime @ja153903
Latest version: 0.0.2

nodebabel
=========

Basic Node-Babel CLI

[![oclif](https://img.shields.io/badge/cli-oclif-brightgreen.svg)](https://oclif.io)
[![Version](https://img.shields.io/npm/v/nodebabel.svg)](https://www.npmjs.com/package/@nojamm/nodebabel)
[![Downloads/week](https://img.shields.io/npm/dw/nodebabel.svg)](https://www.npmjs.com/package/@nojamm/nodebabel)
[![License](https://img.shields.io/npm/l/nodebabel.svg)](https://github.com/ja153903/nodebabel/blob/master/package.json)

<!-- toc -->
* [Usage](#usage)
* [Commands](#commands)
<!-- tocstop -->
# Usage
<!-- usage -->
```sh-session
$ npm install -g @nojamm/nodebabel
$ nodebabel <DIR_NAME>
running command...
$ nodebabel (-v|--version|version)
@nojamm/nodebabel/0.0.1 darwin-x64 node-v13.5.0
$ nodebabel --help [COMMAND]
USAGE
  $ nodebabel COMMAND
...
```
<!-- usagestop -->
# Commands
<!-- commands -->

<!-- commandsstop -->
npm package: @nojsja/puppeteer-in-electron
Description: Run puppeteer within an electron app.
Author: Trevor Sundberg, Nojsja
Latest version: 3.0.7

> Tested with puppeteer-core@^19.6.2 and electron@18.0.3

# Introducing puppeteer-in-electron
Use puppeteer to test and control your electron application.
```
npm install puppeteer-in-electron puppeteer-core electron
```

See the [API documentation](/API.md).

# JavaScript
```javascript
const {BrowserWindow, app} = require("electron");
const pie = require("puppeteer-in-electron")
const puppeteer = require("puppeteer-core");

const main = async () => {
  await pie.initialize(app);
  const browser = await pie.connect(app, puppeteer);
 
  const window = new BrowserWindow();
  const url = "https://example.com/";
  await window.loadURL(url);
 
  const page = await pie.getPage(browser, window);
  console.log(page.url());
  window.destroy();
};

main();
```

# TypeScript
```typescript
import {BrowserWindow, app} from "electron";
import pie from "puppeteer-in-electron";
import puppeteer from "puppeteer-core";

const main = async () => {
  await pie.initialize(app);
  const browser = await pie.connect(app, puppeteer);

  const window = new BrowserWindow();
  const url = "https://example.com/";
  await window.loadURL(url);

  const page = await pie.getPage(browser, window);
  console.log(page.url());
  window.destroy();
};

main();
```
npm package: @nokacreative/generic-react-form
Description: A generic form made in react.
Latest version: 1.1.15

A generic form written in React and Typescript with many features.

View the demo [here](https://nokacreative.github.io/generic-react-form-demo/). The demo's repository can also be found [here](https://github.com/nokacreative/generic-react-form-demo).

# Installation

```
npm i @nokacreative/generic-react-form
```

or

```
yarn add @nokacreative/generic-react-form
```

# Features

- Integrated validation
- Responsive controls and layouts
- Script-based configuration rather than HTML
- Simple customization of styling and messages

# Usage Overview

1. Define your form configuration
2. Define your default form values (can be an empty object)
3. Plug them into `<Form>`

```
import { Form, FormSectionConfig, FormControlType, InputType } from '@nokacreative/generic-react-form'
import '@nokacreative/generic-react-form/dist/index.css' // <-- Must add this for proper styling to work, even if using custom styles

import { emptyModel } from './data'

interface TestFormModel {
  username: string,
  password: string,
  age: number
}

const config: FormSectionConfig<TestFormModel>[] = [
  {
    headerText: 'Login Details',
    controlRows: [
      {
        controls: [
          {
            type: FormControlType.INPUT,
            label: 'Username',
            propertyPath: 'username',
            isRequired: true,
          },
          {
            type: FormControlType.INPUT,
            label: 'Password',
            propertyPath: 'password',
            inputType: InputType.PASSWORD,
            isRequired: true,
          },
          ...
        ]
      }
    ]
  }
]

const App = () => (
  <Form
    sections={config}
    defaultValues={emptyModel}
  />
)
```

Becomes this:

![Form](https://user-images.githubusercontent.com/6403562/122138329-83277100-ce14-11eb-9984-b0f8513100f3.png)
npm package: @nokai/cli
Description: NokAI — Connecting AIs. Peer-to-peer communication between AI coding assistants via MCP.
Author: heiisenberrg
Latest version: 1.2.7

# NokAI — Connecting AIs

> Every AI coding assistant is an island. NokAI makes them a team.

[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)

NokAI lets AI coding assistants talk to each other. Connect your Claude Code with your teammate's Cursor, ask questions about their codebase, share files, and send action requests — without leaving your editor.

## Get Started

```bash
npm install -g @nokai/cli
nokai
```

The setup wizard will ask your name, which AI tool you use, and configure everything automatically. No JSON editing required.

## What You Can Do

- **Ask across codebases** — query a teammate's agent about their code
- **Send action requests** — ask a peer's agent to make changes
- **Share files** — send files and project context directly to another agent
- **Connect your own projects** — link your mobile and web sessions
- **Discover peers** — see who's online and reconnect instantly

## Works With

Claude Code, Cursor, Windsurf, and any MCP-compatible tool.

## Full Docs

https://nokai.pages.dev

## License

MIT
npm package: @nokari/core
Description: Core runtime for the Nokari framework.
Author: @nokari
Latest version: 0.0.3

<div align="center">
  <img src="https://github.com/discord-nokari/core/blob/main/banner.png?raw=true" width="100%">

# @nokari/core

**Core runtime for the Nokari framework.**

[![NPM Version](https://img.shields.io/npm/v/%40nokari%2Fcore?style=flat-square&logo=npm&labelColor=CC3534&color=white)](https://www.npmjs.com/package/@nokari/core)
[![License](https://img.shields.io/github/license/discord-nokari/core?style=flat-square)](https://github.com/discord-nokari/core/blob/main/LICENSE)

</div>
<hr/>

## What is `@nokari/core`?

- Bootstrapping your bot
- Loading your configuration
- Clean, structured startup lifecycle

It is designed to be extended with other `@nokari` packages.

## License

This project is licensed under the [MIT License](LICENSE).
npm package: @nokari/logging
Description: Extensible logging plugin for Nokari.
Author: @nokari
Latest version: 0.0.1

<div align="center">
  <img src="https://github.com/discord-nokari/core/blob/main/banner.png?raw=true" width="100%">

# @nokari/logging

**Extensible logging plugin for Nokari.**

[![NPM Version](https://img.shields.io/npm/v/%40nokari%2Flogging?style=flat-square&logo=npm&labelColor=CC3534&color=white)](https://www.npmjs.com/package/@nokari/logging)
[![License](https://img.shields.io/github/license/discord-nokari/logging?style=flat-square)](https://github.com/discord-nokari/logging/blob/main/LICENSE)

</div>
<hr/>

`@nokari/logging` is a plugin module for [`@nokari/core`](https://github.com/discord-nokari/core) that
provides a powerful and flexible logging system. It allows plugins and internal
components to emit debug, info, warning, and error logs through a centralized logger interface.

# Creating Your Own Logger

Implement the `Logger` interface:

```ts
export interface Logger {
  debug(message: string): void;
  info(message: string): void;
  warn(message: string): void;
  error(message: string): void;
}
```

Then inject it via the plugin.

# License

This project is licensed under the [MIT License](LICENSE).
npm package: @nokecy/qc-ui
Description: [![NPM version](https://img.shields.io/npm/v/@qiuchuang/qc-ui.svg?style=flat)](https://npmjs.org/package/@qiuchuang/qc-ui) [![NPM downloads](http://img.shields.io/npm/dm/@qiuchuang/qc-ui.svg?style=flat)](https://npmjs.org/package/@qiuchuang/qc-ui)
Latest version: 1.1.37

# @qiuchuang/qc-ui

[![NPM version](https://img.shields.io/npm/v/@qiuchuang/qc-ui.svg?style=flat)](https://npmjs.org/package/@qiuchuang/qc-ui)
[![NPM downloads](http://img.shields.io/npm/dm/@qiuchuang/qc-ui.svg?style=flat)](https://npmjs.org/package/@qiuchuang/qc-ui)

## Install

```bash
$ yarn install
    // "postinstall": "patch-package",

```

```bash
$ npm run dev
$ npm run build
```

## Options

TODO

## LICENSE

MIT
npm package: @nokecy/react-native-pda-scan
Description: pda 扫描模块
Author: nokecy
Latest version: 0.8.0

# react-native-pda-scan

pda 扫描模块

## Installation

```sh
npm install react-native-pda-scan
```

## Usage

```js
import PdaScan from "react-native-pda-scan";

// ...

const result = await PdaScan.multiply(3, 7);
```

## Contributing

See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.

## License

MIT
npm package: @nokizorque/node-queue
Description: A simple queue system for Node.js
Author: Lewis Watson
Latest version: 0.0.3

# @nokizorque/node-queue

[![npm (scoped)](https://img.shields.io/npm/v/@nokizorque/node-queue.svg)](https://www.npmjs.com/package/@nokizorque/node-queue) [![npm bundle size (minified)](https://img.shields.io/bundlephobia/min/@nokizorque/node-queue.svg)](https://www.npmjs.com/package/@nokizorque/node-queue) ![NPM](https://img.shields.io/npm/l/@nokizorque/node-queue.svg)

A simple queue system for Node.js

## Install

```
$ npm i @nokizorque/node-queue
```

## Usage

```js
let NodeQueue = require("@nokizorque/node-queue");
let queue = new NodeQueue();

queue.push("hello-world", () => {
	console.log("Hello World!");
});
queue.next();

//=> Hello World!
```

Or refer to `test.js` in the root directory

## Todo

Add support for timers, and more configuration options (auto-run, event system, etc).
npm package: @nokkel/i18n
Description: A package to support internationalisation
Author: Nokkel
Latest version: 1.0.0

# Nokkel i18n library

A typescript library for internationalisation.
It includes ISO currency and country codes in both enum and array format.

## How to use

```
import { CountryArray, CountryEnum, CurrencyArray, CurrencyEnum } from '@nokkel/i18n'
```
npm package: @nokkel/monitoring
Description: A monitoring library for integrating monitoring and observability platforms and generating logs for monitoring
Author: Nokkel
Latest version: 1.0.1

# Nokkel Monitoring Library

A monitoring library for integrating monitoring and observability platforms and generating logs for monitoring.

## How to use the library

To install this library follow the steps below:

```bash
npm add @nokkel/monitoring
```

Once installed you can use the library to do the following:

`logger.ts`

```typescript
import { createLogger } from '@nokkel/monitoring';

export const logger = createLogger({
  name: process.env.HOSTNAME,
  logLevel: process.env.LOG_LEVEL,

  // Can optionally configure the logger for the browser
  // isBrowser: true,
});
```

Enjoy!

## Grafana Stack (Loki, Prometheus, Tempo)

### Loki logging

`logger.loki.ts`

```typescript
import { createLokiLogger } from '@nokkel/monitoring/grafana';

export const logger = createLokiLogger({
  name: process.env.SERVICE_NAME || 'my-service',
  logLevel: (process.env.LOG_LEVEL as any) || 'info',
  loki: {
    host: process.env.LOKI_URL || 'http://localhost:3100',
    labels: { service: 'my-service', env: process.env.NODE_ENV || 'dev' },
  },
});

logger.info({ msg: 'hello loki' });
```

Alternatively, compose your own `pino` with a Loki destination:

```typescript
import { createLogger } from '@nokkel/monitoring';
import { createLokiDestination } from '@nokkel/monitoring/grafana';

const destination = createLokiDestination({ host: 'http://localhost:3100' });
export const logger = createLogger({ name: 'svc', logLevel: 'info', destination });
```

### Prometheus metrics

Expose a `/metrics` endpoint Prometheus/Grafana Agent can scrape.

```typescript
import { initMetrics, startMetricsServer, promClient } from '@nokkel/monitoring/metrics';

// set default labels and collect Node process metrics
initMetrics({ defaultLabels: { service: 'my-service' } });

// define custom metrics
export const requests = new promClient.Counter({ name: 'http_requests_total', help: 'Total HTTP requests' });

// start a metrics server on :9464/metrics
startMetricsServer({ port: 9464 });
```

### OpenTelemetry tracing (Tempo)

Send traces via OTLP HTTP to Grafana Agent or Tempo.

```typescript
import { initTracing } from '@nokkel/monitoring/tracing';

await initTracing({
  serviceName: 'my-service',
  serviceVersion: '1.0.0',
  environment: process.env.NODE_ENV || 'dev',
  otlpUrl: process.env.OTLP_TRACES_URL || 'http://localhost:4318/v1/traces',
});

// Your app code; auto-instrumentations cover http/express/etc.
```

Notes:

- Loki logging uses `pino-loki`. Ensure Grafana Loki accepts pushes at `LOKI_URL`.
- Metrics use `prom-client` and are scrape-based (no Pushgateway assumed).
- Traces use OpenTelemetry OTLP/HTTP; point `OTLP_TRACES_URL` to Grafana Agent/Tempo.
npm package: @nokkel/msw-mocks
Description: A boilerplate for creating NPM libraries
Author: Nokkel
Latest version: 0.0.0

# Nokkel Library Boilerplate

A typescript boilerplate library for creating NPM libraries.

## Pre-requisites

- [asdf](https://asdf-vm.com/guide/getting-started.html)
- [asdf nodejs](https://github.com/asdf-vm/asdf-nodejs)

## Initiating the project

To setup the project first you should run the following command:

```bash
make init name="project-name"
```
npm package: @nokkel/testing
Description: A typescript testing library for Koa APIs or Cypress e2e testing
Author: Nokkel
Latest version: 0.1.14-rc.3

# Nokkel Testing Library

A typescript testing library for Koa APIs or Cypress e2e testing. This library provides useful helper Typescript Jest configuration, functions and classes for mocking and generating values for your tests.

## Using this library

You can install this library using the following command

```bash
npm add -D @nokkel/testing jest jest-junit ts-jest ts-node
```

It is also recommended to install the following typing for your typescript project

```bash
npm add -D @types/jsonwebtoken @types/jest @types/koa @types/node
```

Once installed you can configure Jest by adding the following files to your project

`jest.config.ts`

```typescript
import type { Config } from 'jest';
import { pathsToModuleNameMapper } from 'ts-jest';

import baseConfig from '@nokkel/testing/dist/jest.config';

import { compilerOptions } from './tsconfig.json';

const config: Config = {
  ...baseConfig,
  moduleNameMapper: pathsToModuleNameMapper(compilerOptions.paths),
  modulePaths: [compilerOptions.baseUrl],
};

export default config;

```

### Testing with kafka

In your test file where you need to test for events, add the following test case:

```typescript
import { KafkaClient, KafkaMessage } from '@nokkel/testing';
import Chance from 'chance';


const EXPECTED_EVENTS: any[] = [];

const KAFKA = new KafkaClient(
  {
    clientId: config.event.clientId,
    brokers: config.event.brokers,
    logLevel: config.event.logLevel,
  },
  {
    groupId: CHANCE.string(),
  }
);

const CONSUMER = KAFKA.client;

describe(`${YOUR_EVENT_TOPIC} events`, () => {
  beforeEach(async () => {
    await KAFKA.setupClient([YOUR_EVENT_TOPIC]);
    await CONSUMER.connect();
  });

  afterAll(async () => {
    await KAFKA.tearDownTopics([YOUR_EVENT_TOPIC]);
    await CONSUMER.disconnect();
    await CONSUMER.stop();
  }, 10000);

  it('should have been published', async () => {
    const messages: KafkaMessage[] = [];

    KAFKA.consumeMessages(messages);
    await KAFKA.waitForMessages(messages);

    expect(messages).toEqual(
      expect.arrayContaining(
        EXPECTED_EVENTS.map(userPersona => {
          return {
            topic: YOUR_EVENT_TOPIC,
            message: expect.objectContaining({
              value: userPersona,
            }),
          };
        })
      )
    );
  }, 10000);
});
```

Where your `default.yaml` config file should have this:
```yaml
event:
  clientId: account-api
  brokers:
    - localhost:9092
  logLevel: 0 # 0 = NOTHING, 1 = ERROR, 2 = WARN, 4 = INFO, 5 = DEBUG
  ssl: false
```

and `custom-environment-variables.yaml` should have this:
```yaml
event:
  clientId: APP_NAME
  brokers:
    __name: EVENT_BROKERS
    __format: json
  ssl: EVENT_SSL
  logLevel: EVENT_LOG_LEVEL
```
npm package: @nokkel/typescript
Description: A typescript styling guide
Author: Nokkel
Latest version: 2.0.0-rc.3

# Nokkel Typescript Styling Guide

This styling guide provide configuration and rules for `typescript`, `eslint` and `prettier` that can be used in Nokkel projects to ensure they meet these recommended stylistic choices. It does not inform code quality, merely the look of how code should be written to ensure it is consistent and easy to interpret for developers.

## Using this style guide in your project

In order to use this guide you should first install the following dependencies in your project

```bash
npm add -D @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint eslint-config-prettier eslint-plugin-cypress eslint-plugin-jest eslint-plugin-node eslint-plugin-prettier eslint-plugin-simple-import-sort prettier prettier-eslint typescript typescript-eslint
```

Then install this package to your project

```bash
npm add -D @nokkel/typescript
```

Then you can add the following files to your Typescript project

`.eslintrc.json`

```json
{
  "extends": "./node_modules/@nokkel/typescript/.eslintrc.json"
  // Add any overrides/extensions here...
}
```

OR

`eslint.config.js`

```javascript
// eslint.config.js
import myconfig from '@nokkel/typescript/eslint.config.mjs';

export default [...myconfig];
```

To override: https://eslint.org/docs/latest/extend/shareable-configs#overriding-settings-from-shareable-configs

`.prettierrc.js`

```javascript
module.exports = {
  ...require('@nokkel/typescript/.prettierrc.json')
  // And any overrides/extensions here...
};
```

We also recommend adding the following

`.eslintignore`

```
dist/
```

`tsconfig.browser.json`

This is an example of a typescript configuration you can put into your browser project that extends the typescript configuration of this library.

```json
{
  "extends": "./node_modules/@nokkel/typescript/tsconfig.browser.json",
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "dist",
    "paths": {
      "@/*": ["src/*"]
    }
    // Add any overrides/extensions here...
  }
}
```

`tsconfig.json`

This is an example of a typescript configuration you can put into your project that extends the typescript configuration of this library.

```json
{
  "extends": "./node_modules/@nokkel/typescript/tsconfig.json",
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "dist",
    "paths": {
      "@/*": ["src/*"]
    }
    // Add any overrides/extensions here...
  }
}
```

Enjoy!
npm package: @nokken65/prettier-config
Description: prettier config
Author: Denis Ermolin
Latest version: 1.2.12

# `@nokken65/prettier-config`

> Here is my personal [Prettier](https://prettier.io) config.

## Install

```sh
npm install @nokken65/prettier-config -D
```

```sh
yarn add @nokken65/prettier-config -D
```

```sh
pnpm add @nokken65/prettier-config -D
```

## Usage

```js
// .prettierrc.cjs
module.exports = require('@nokken65/prettier-config')
```

### Copy the ignore file to your project folder

If you want to extend the ignore file, copy `node_modules/@nokken65/prettier-config/.prettierignore` to the root of your project folder:

### Scripts

Some commonly used scripts in `package.json`.

```json
{
  "scripts": {
    "format": "prettier --write \"**/*.{js,jsx,ts,tsx,json}\""
  }
}
```
npm package: @nokken65/ts-config
Description: TypeScript tsconfig.json
Author: Denis Ermolin
Latest version: 1.0.2

# `@nokken65/ts-config`

> Here is my personal [TypeScript](https://www.typescriptlang.org/) config.

## Install

```sh
npm install @nokken65/ts-config -D
```

```sh
yarn add @nokken65/ts-config -D
```

```sh
pnpm add @nokken65/ts-config -D
```

## Usage

React config

```js
// tsconfig.json
{
  "extends": "@nokken65/tsconfig/react",
  "include": [
    "src"
  ],
  "exclude": [
    "node_modules"
  ]
}
```

Vite config

```js
// tsconfig.node.json
{
  "extends": "@nokken65/tsconfig/vite",
  "include": [
    "vite.config.ts"
  ],
  "exclude": [
    "node_modules"
  ]
}
```

Base config

```js
// tsconfig.json
{
  "extends": "@nokken65/tsconfig",
  "compilerOptions": {
    "target": "ESNext",
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "jsx": "react-jsx"
  }
  "include": [
    "src"
  ],
  "exclude": [
    "node_modules"
  ]
}
```
npm package: @nokkvireyr/litepicker
Description: Date range picker - lightweight, no dependencies
Author: Rinat G.
Latest version: 2.0.15

[![npm version](https://badge.fury.io/js/litepicker.svg)](https://www.npmjs.com/package/litepicker) [![Build Status](https://travis-ci.org/wakirin/Litepicker.svg?branch=master)](https://travis-ci.org/wakirin/Litepicker) [![license](https://img.shields.io/github/license/mashape/apistatus.svg)](https://github.com/wakirin/Litepicker/blob/master/README.md)

Litepicker
=========

Date range picker - lightweight, no dependencies

## Features
* No dependencies
* Single date or date range
* Show multiple months
* Min/Max days for select and/or Min/Max dates for select
* Select forward/backward
* Inline mode
* Repick date range
* Lock days  
* Keyboard accessibility (with plugin)
* Mobile friendly (with plugin)
* Predefined ranges (with plugin)
* Multiple select (with plugin)
  
See more details in docs.

# [Documentation](https://litepicker.com)

## Compatibility

##### Desktop
- IE 11 (required [polyfills](https://github.com/wakirin/litepicker-polyfills-ie11))
- Edge 17+
- Chrome 60+
- Firefox 52+
- Safari 10.1+
- Opera 48+

##### Mobile
- iOS 10+
  - Safari
  - Chrome
- Android 7+
  - Chrome
  - Firefox
  - Samsung Browser
  - UC Browser

## Plugins
* [keyboardnav](https://litepicker.com/docs/plugins/keyboardnav/) - adds keyboard navigation.
* [mobilefriendly](https://litepicker.com/docs/plugins/mobilefriendly/) - adds swipes (left/right) to switch months.
* [ranges](https://litepicker.com/docs/plugins/ranges/) - adds predefined ranges.
* [multiselect](https://litepicker.com/docs/plugins/multiselect/) - adds multiple selection.

## See also:
* [Drupal module](https://www.drupal.org/project/date_range_picker) by [kviolka](https://github.com/kviolka)
* [Wordpress Ninja forms](https://github.com/soderlind/date-range-ninja-forms) by [soderlind](https://github.com/soderlind)
* [ember-litepicker](https://github.com/sinankeskin/ember-litepicker) by [sinankeskin](https://github.com/sinankeskin)

## Supporting Litepicker
[![](https://github.com/wakirin/Litepicker/blob/gh-pages/assets/images/coffee.png?raw=true)](https://ko-fi.com/wakirin)

## Tested on real browsers
Tested on real browsers via BrowserStack.  
Thanks to the BrowserStack for supporting the open-source projects.  

[![](https://github.com/wakirin/Litepicker/blob/gh-pages/assets/images/Browserstack-logo.png?raw=true)](https://www.browserstack.com/)
npm package: @noknow/dom
Description: DOM library.
Author: noknow
Latest version: 0.1.13

# noknow-dom

## Install

```console
npm install @noknow/dom
```

## Usage

### Example 1

```html
<ul>
  <li><p>Hello</p></li>
  <li><p class="noknow love">World</p></li>
</ul>
```

```
const helloP = NkwDom.
    NewHtmlElement('P').
    SetContentList(['Hello']).
    GetHtmlElement();
const helloLi = NkwDom.
    NewHtmlElement('LI').
    SetContentList([helloP]).
    GetHtmlElement();
cosnt worldP = NkwDom.
    NewHtmlElement('P').
    SetClassList(['noknow', 'love']).
    SetContentList(['World']).
    GetHtmlElement();
const worldLi = NkwDom.
    NewHtmlElement('LI').
    SetContentList([worldLi]).
    GetHtmlElement();
const ul = NkwDom.
    NewHtmlElement('UL').
    SetContentList([helloLi, worldLi]).
    GetHtmlElement();
```
npm package: @noknow/web-design-article-card
Description: Web design for card list
Author: noknow
Latest version: 0.1.4

# Web design for article card

## Overview

This is an article card design template.

## Usage

- [Official page](https://it.noknow.info/en/project/noknow-web-design/component/article-card)
- [公式ページ](https://it.noknow.info/ja/project/noknow-web-design/component/article-card)
npm package: @noknow/web-design-badge
Description: Web design for badge
Author: noknow
Latest version: 0.1.4

# Web design for badge

## Overview

This is a badge design template.

## Usage

- [Official page](https://it.noknow.info/en/project/noknow-web-design/component/badge)
- [公式ページ](https://it.noknow.info/ja/project/noknow-web-design/component/badge)
npm package: @noknow/web-design-breadcrumb
Description: Web design for breadcrumb
Author: noknow
Latest version: 0.1.1

# Web design for breadcrumb

## Overview

This is a breadcrumb design template.


## Usage

- [Official page](https://it.noknow.info/en/project/noknow-web-design/component/breadcrumb)
- [公式ページ](https://it.noknow.info/ja/project/noknow-web-design/component/breadcrumb)
npm package: @noknow/web-design-color
Description: Web design for color
Author: noknow
Latest version: 0.1.2

# Web design for color

## Overview

This is a color template.


## Usage

- [Official page](https://it.noknow.info/en/project/noknow-web-design/utility/color)
- [公式ページ](https://it.noknow.info/ja/project/noknow-web-design/utility/color)
npm package: @noknow/web-design-console
Description: Web design for console
Author: noknow
Latest version: 0.1.7

# Web design for console

## Overview

This is a console design template.

## Usage

- [Official page](https://it.noknow.info/en/project/noknow-web-design/component/console)
- [公式ページ](https://it.noknow.info/ja/project/noknow-web-design/component/console)
npm package: @noknow/web-design-directory
Description: Web design for directory
Author: noknow
Latest version: 0.1.5

# Web design for directory

## Overview

This is a directory design template.

## Usage

- [Official page](https://it.noknow.info/en/project/noknow-web-design/component/directory)
- [公式ページ](https://it.noknow.info/ja/project/noknow-web-design/component/directory)
npm package: @noknow/web-design-form
Description: Web design for form
Author: noknow
Latest version: 0.1.4

# Web design for form

## Overview

This is a form design template.


## Usage

- [Official page](https://it.noknow.info/en/project/noknow-web-design/component/form)
- [公式ページ](https://it.noknow.info/ja/project/noknow-web-design/component/form)
npm package: @noknow/web-design-horizontal-card
Description: Web design for horizontal card
Author: noknow
Latest version: 0.1.4

# Web design for horizontal card

## Overview

This is a horizontal card design template.

## Usage

- [Official page](https://it.noknow.info/en/project/noknow-web-design/component/horizontal-card)
- [公式ページ](https://it.noknow.info/ja/project/noknow-web-design/component/horizontal-card)
npm package: @noknow/web-design-image
Description: Web design for image
Author: noknow
Latest version: 0.1.3

# Web design for image

## Overview

This is an image design template.

## Usage

- [Official page](https://it.noknow.info/en/project/noknow-web-design/component/image)
- [公式ページ](https://it.noknow.info/ja/project/noknow-web-design/component/image)
npm package: @noknow/web-design-image-card
Description: Web design for image card
Author: noknow
Latest version: 0.1.4

# Web design for image card

## Overview

This is an image card design template.

## Usage

- [Official page](https://it.noknow.info/en/project/noknow-web-design/component/image-card)
- [公式ページ](https://it.noknow.info/ja/project/noknow-web-design/component/image-card)
npm package: @noknow/web-design-modal-window
Description: Web design for table
Author: noknow
Latest version: 0.1.0

# Web design for modal window

## Overview

This is a modal window design template.

## Usage

- [Official page](https://it.noknow.info/en/project/noknow-web-design/component/modal-window)
- [公式ページ](https://it.noknow.info/ja/project/noknow-web-design/component/modal-window)
npm package: @noknow/web-design-plan-card
Description: Web design for plan card
Author: noknow
Latest version: 0.1.4

# Web design for plan card

## Overview

This is a plan card design template.

## Usage

- [Official page](https://it.noknow.info/en/project/noknow-web-design/component/plan-card)
- [公式ページ](https://it.noknow.info/ja/project/noknow-web-design/component/plan-card)
npm package: @noknow/web-design-profile-card
Description: Web design for profile card
Author: noknow
Latest version: 0.1.1

# Web design for profile card

## Overview

This is a profile card template.


## Usage

- [Official page](https://it.noknow.info/en/project/noknow-web-design/component/profile-card)
- [公式ページ](https://it.noknow.info/ja/project/noknow-web-design/component/profile-card)
npm package: @noknow/web-design-pros-and-cons-box
Description: Web design for card list
Author: noknow
Latest version: 0.1.1

# Web design for article card

## Overview

This is an article card design template.

## Usage

- [Official page](https://it.noknow.info/en/project/noknow-web-design/component/article-card)
- [公式ページ](https://it.noknow.info/ja/project/noknow-web-design/component/article-card)
npm package: @noknow/web-design-reset
Description: Web design for card list
Author: noknow
Latest version: 0.1.2

# Web design for reset

## Overview

This is a reset CSS.




## Getting Sitarted

### Install with npm

```console
npm install @noknow/web-design-reset
```



### Install with GitHub

```console
cd /YOUR_PROJECT/css
mkdir -p lib/noknow_web_design
cd lib/noknow_web_design

git init
git remote add -f origin https://github.com/noknow-hub/pkg-web-design.git

git sparse-checkout set reset
git pull origin main
```



### Import with @import

```css
@import 'YOUR_PROJECT/INSTALLED_CSS_PATH/reset/style.css';
```
npm package: @noknow/web-design-table
Description: Web design for table
Author: noknow
Latest version: 0.1.4

# Web design for table

## Overview

This is a table design template.

## Usage

- [Official page](https://it.noknow.info/en/project/noknow-web-design/component/table)
- [公式ページ](https://it.noknow.info/ja/project/noknow-web-design/component/table)
npm package: @nola/afc-dependencies
Description: `@nola/afc-dependencies`, dependencies for afc in production mode
Latest version: 1.2.7

# AFC DEPENDENCIES

`@nola/afc-dependencies`, dependencies for afc in production mode

[» DOCUMENT HERE](https://primeton-fin.yuque.com/lpef4f/rzlmth/kd8rwm1u114und38?singleDoc#h1lD)
npm package: @nola/afc-dev-dependencies
Description: `@nola/afc-dev-dependencies`, dependencies for afc in develop mode
Latest version: 1.2.7

# AFC DEV DEPENDENCIES

`@nola/afc-dev-dependencies`, dependencies for afc in develop mode

[» DOCUMENT HERE](https://primeton-fin.yuque.com/lpef4f/rzlmth/kd8rwm1u114und38?singleDoc#V2kB)
npm package: @nola/ast
Description: AST Engine for Transfer Between Source and Visual
Latest version: 1.0.4

# AST Engine - Transfer Between Source and Visual

## Install Dependency

```sh
npm i @nola/ast
# or
yarn add @nola/ast
```

## Import Package

```js
import { AST } from '@nola/ast';
```

## How to Use ?

### 1. init

```js
const { ast } = new AST(<source code>);
```

---

# 支持范围

# 组件定义

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

export default App;
```

```javascript
const App = () => {
  return <div></div>;
};

export default App;
```

```javascript
export default () => {
  return <div></div>;
};
```

# react 语法

- 字符串

```javascript
<div className="div"></div>
```

- 变量

> 内部定义的变量：

```javascript
var classA = '222';
<div className={classA}></div>;
```

> 引入外部的变量：

```javascript
import logo from './logo.preview.png';
<image href={logo}></image>;
```

- 表达式

> 注释语句：

```javascript
<div>{/* 这个是注释的代码 */}</div>
```

> 逻辑判断

```javascript
const btnType = 'primary';
const count = 3;
<Button type={count > 1 ? btnType : 'text'}>btn</Button>;
```

```javascript
const count = 9;
<div>{count > 1 ? <p id="3">1111</p> : <h1 className="4">2222</h1>}</div>;
```

```javascript
const count = [1, 2, 3];
<div>{count.length ? <p id="3">1111</p> : <h1 className="4">2222</h1>}</div>;
```

- 模版字符串

```javascript
const w = 50;
return (
  <div
    style={{
      width: `${60 + w}px`
    }}
  >
    cube
  </div>
);
```

- 函数

```javascript
const caclWidth = (v1, v2) => {
  return `${v1 + v2 + 20}px`;
};
return (
  <div
    style={{
      width: caclWidth(2, 3)
    }}
  >
    cube
  </div>
);
```