open-index/open-npm huggingface dataset:
npm package: @sonli-design/sun-cli
Description: Sun Vue Scripts
Author: xinghaiqing
Latest version: 0.0.4

# Sun Cli

A collection of commands used in the Sonli Design Vue component library

## Installation

```
npm install @sun-design/sun-cli
```

## Commands

Run `sun-cli --help` to see all available commands and options.

+ `sun-cli docgen`: generate document of component.
+ `sun-cli icongen`: generate icon components.
+ `sun-cli lessgen`: generate index less file.
+ `sun-cli dtsgen`: emit .d.ts files for vue files.
+ `sun-cli dev:component`: build components with watch mode.
+ `sun-cli dev:site`: start vite server for development.
+ `sun-cli build:component`: build production files.
+ `sun-cli build:style`: build style related files.
+ `sun-cli build:site`: build document site.
+ `sun-cli build:material`: build vue material.
+ `sun-cli test`: run test for component or material.
+ `sun-cli changelog`: Obtain and organize changelog information through the git repository.
npm package: @sonli-design/sun-ui
Description: Sun Design Vue 2.0: A Vue.js 3 UI Library
Author: xinghaiqing
Latest version: 0.1.62

<div align="center">
  <a href="" target="_blank">
    <img alt="Sun Design Logo" width="200" src="https://sonli-oss-pub.oss-cn-hangzhou.aliyuncs.com/static-front-end/sun-design/favicon.ico"/>
  </a>
</div>
<div align="center">
  <h1>Sun Design</h1>
</div>

<div align="center">

A comprehensive Vue UI components library based on the Sun Design system.

</div>

<div align="center">

English | [简体中文](./README.zh-CN.md)

</div>

# Features

## Comprehensive

With more than 60 crafted components that you can use out of the box.

## TypeScript friendly

All components are written in TypeScript so it's type friendly.

# Installation

Available as an [npm package](https://www.npmjs.com/package/@sonli-design/sun-ui)

```bash
// with npm
npm install @sonli-design/sun-ui

// with yarn
yarn add @sonli-design/sun-ui
```

# Examples

```typescript
import { createApp } from 'vue'
import SunVue from '@sonli-design/sun-ui';
import App from './App.vue';
import '@sonli-design/sun-ui/dist/sun.css';

const app = createApp(App);
app.use(SunVue);
app.mount('#app');
```

## Development

1. Use `npm install` to install basic packages such as `lerna` and `yarn`

2. Use `yarn install` to install the dependencies of each package in `workspaces` (If you encounter a `YN0018` error, you can use `YARN_CHECKSUM_BEHAVIOR=update yarn` to install)

3. Use `npm run init` to initialize the project
npm package: @sonli-design/vite-plugin-sun-vue-docs
Description: Provides Markdown to Vue Component in Sun Vue Docs
Author: xinghaiqing
Latest version: 0.0.1

# `@sonli-design/vite-plugin-sun-vue-docs`

Provides Markdown to Vue Component in Sun Vue Docs

## Usage

```tsx
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import vueDocs from '@sonli-design/vite-plugin-sun-vue-docs';

export default defineConfig({
  plugins: [vueDocs(), vue()],
});
```
npm package: @sonmezonur/redux-rest-middleware
Description: Redux Rest Middleware
Latest version: 0.1.0

redux-rest-middleware
---
Fully customizable REST middleware with zero dependency for your redux apps.

Usage
===

- Setting up basic configuration before attaching middleware to redux store

```javascript
import { applyMiddleware, createStore } from 'redux'
import restMiddleware from '@sonmezonur/redux-rest-middleware'

const apiSettings = {
  baseURL: process.env.REQUEST_URL,
  headers: {
    'Accept': 'application/json, application/xml, text/plain, text/html, *.*',
    'Content-Type': 'application/x-www-form-urlencoded; charset=utf-8'
  },
  params: {
    apiKey: process.env.API_KEY
  }
}

const store = createStore(
  reducers, 
  initialState,
  applyMiddleware(restMiddleware(apiSettings))
)
```

- Action

```javascript
const getAction = (id) => {
  return {
    fetch: {
      method: 'GET', // or 'POST', 'PUT', 'DELETE', 'PATCH'
      endpoint: `/actions/${id}`,
      types: {
        request: 'FETCH_ACTION', // must
        success: 'FETCH_ACTION_SUCCESS', // optional
        failure: 'FETCH_ACTION_FAILURE' // optional
      },
      onSuccess: (response) => {
        // handle response on success
      },
      onError: (err) => {
        // handle error
      }
    }
  }
}
```

- Reducer

```javascript
const actionHandler = (state, { type, payload }) => {  
  switch (type) {
    case 'FETCH_ACTION':
      return {
        ...state,
        isFetching: true
      }
    case 'FETCH_ACTION_SUCCESS':
      return {
        ...state,
        isFetching: false,
        payload: payload
      }
    case 'FETCH_ACTION_FAILURE':
      return {
        ...state,
        error: payload
      }
  }
}
```

- Fetch Parameters
  - `method`: Request Type - 'GET', 'DELETE', 'POST', 'PATCH', 'PUT'
  - `endpoint`: Request source
  - `params`: Query params for the request(on JSON format)
  - `types`: Action types - 'request'(must), 'success', 'failure'
  - `onSuccess`: Function to handle successful requests
  - `onFailure`: Function to handle error responses
npm package: @sonnat/icons
Description: <div align="center">   <a href="https://www.sonnat.dev/docs/packages/icons">     <img src="https://raw.githubusercontent.com/sonnat/sonnat-ui/next/sonnat.svg" height="128">     <h1 align="center">Sonnat-Icons</h1>   </a> </div>
Latest version: 2.2.0

<div align="center">
  <a href="https://www.sonnat.dev/docs/packages/icons">
    <img src="https://raw.githubusercontent.com/sonnat/sonnat-ui/next/sonnat.svg" height="128">
    <h1 align="center">Sonnat-Icons</h1>
  </a>
</div>

<div align="center">

The growing icon collection that allows designers and developers to use SVG Icons for any projects.

[![license](https://img.shields.io/github/license/sonnat/sonnat-icons?color=EE3F7C&style=for-the-badge)](https://github.com/sonnat/sonnat-icons/blob/main/LICENSE)
[![npm latest package](https://img.shields.io/npm/v/@sonnat/icons?color=EE3F7C&style=for-the-badge)](https://www.npmjs.com/package/@sonnat/icons)
[![npm downloads](https://img.shields.io/npm/dt/@sonnat/icons?color=EE3F7C&style=for-the-badge)](https://www.npmjs.com/package/@sonnat/icons)
[![Follow us on Twitter](https://img.shields.io/twitter/follow/sonnatdesign?color=EE3F7C&label=follow%20us%20on%20twitter&style=for-the-badge)](https://twitter.com/sonnatdesign)\
![types](https://badgen.net/npm/types/@sonnat/icons?color=EE3F7C)
![treeshaking](https://badgen.net/bundlephobia/tree-shaking/@sonnat/icons?color=EE3F7C)
![minzipped](https://badgen.net/bundlephobia/minzip/@sonnat/icons?color=EE3F7C)

</div>

### Getting Started

Visit [https://www.sonnat.dev/docs/packages/icons](https://www.sonnat.dev/docs/packages/icons) to get started with Sonnat-Icons.

### Community

The Sonnat-Icons community can be found on [Github Discussions](https://github.com/sonnat/sonnat-icons/discussions) | [Discord](https://discord.gg/h4Dpr4PnXW), where you can ask questions, voice ideas, and share your projects.
npm package: @sonnat/ui
Description: React component library using Sonnat Design System to build faster, elegant, and accessible web applications.
Latest version: 2.0.9

<div align="center">
  <a href="https://www.sonnat.dev">
    <img src="https://raw.githubusercontent.com/sonnat/sonnat-ui/next/sonnat.svg" height="128">
    <h1 align="center">Sonnat-UI</h1>
  </a>
</div>

<div align="center">

[React](https://reactjs.org/) component library using [Sonnat Design System](https://sonnat.design) to build faster, elegant, and accessible web applications.

[![license](https://img.shields.io/github/license/sonnat/sonnat-ui?color=EE3F7C&style=for-the-badge)](https://github.com/sonnat/sonnat-ui/blob/main/LICENSE)
[![npm latest package](https://img.shields.io/npm/v/@sonnat/ui?color=EE3F7C&style=for-the-badge)](https://www.npmjs.com/package/@sonnat/ui)
[![npm downloads](https://img.shields.io/npm/dt/@sonnat/ui?color=EE3F7C&style=for-the-badge)](https://www.npmjs.com/package/@sonnat/ui)
[![Follow us on Twitter](https://img.shields.io/twitter/follow/sonnatdesign?color=EE3F7C&label=follow%20us%20on%20twitter&style=for-the-badge)](https://twitter.com/sonnatdesign)

</div>

### Getting Started

Visit [https://sonnat.dev/docs/installation](https://www.sonnat.dev/docs/installation) to get started with Sonnat-UI.

### Documentation

Visit [https://sonnat.dev/docs](https://www.sonnat.dev/docs) to view the full documentation.

### Community

The Sonnat-UI community can be found on [Github Discussions](https://github.com/sonnat/sonnat-ui/discussions) | [Discord](https://discord.gg/h4Dpr4PnXW), where you can ask questions, voice ideas, and share your projects.
npm package: @sonnetjs/core
Description: sonnetjs/core is a framework for building web applications with a focus on simplicity and performance with native feel. It is built on top of vanilla JavaScript.
Author: htmujahid
Latest version: 0.0.34

# sonnetjs/core

sonnetjs/core is a framework for building web applications with a focus on simplicity and performance with native feel. It is built on top of vanilla JavaScript.
npm package: @sonnetjs/mathml
Description: sonnetjs/mathml is a library for creating MathML elements in JavaScript. It provides a set of functions to create MathML elements and provides chainable methods to set attributes, properties, and children.
Author: htmujahid
Latest version: 0.0.12

# sonnetjs/mathml

sonnetjs/mathml is a library for creating MathML elements in JavaScript. It provides a set of functions to create MathML elements and provides chainable methods to set attributes, properties, and children.

## Features

- Create MathML elements using functions.
- Set attributes and properties of MathML elements using chainable methods.
- Add children to MathML elements using children method.

## Usage

1. Run the following command to create a new SonnetJS project.

```bash
npx create-sonnet-app@latest
```

2. Change directory to the newly created project.

```bash
cd [my-sonnet-app]
```

3. Install the dependencies

```bash
npm i
```

4. Install sonnetjs/mathml

```bash
npm i @sonnetjs/mathml
```

4. Start the development server

```bash
npm run dev
```

## Documentation

### MathML Elements

You can create MathML elements using functions.

```typescript
import { math, mrow, mi, mo } from '@sonnetjs/mathml';

const element = math()
  .children(
    mrow()
      .children(
        mi().innerText('x').get(),
        mo().innerText('+').get(),
        mi().innerText('y').get(),
      )
      .get(),
  )
  .get();
```

## License

sonnetjs/mathml is licensed under the MIT license.
npm package: @sonnetjs/router
Description: A simple and lightweight router for SonnetJS.
Author: htmujahid
Latest version: 0.0.8

# sonnetjs/router

A simple and lightweight router for SonnetJS.

## Installation

```bash
npm i @sonnetjs/router
```

## Usage

```typescript
// src/routes.ts
import { router, createBrowserHistory, createRouter } from '@sonnetjs/router';

export const routes = router()
  .layout(async () => (await import('./partials/Layout')).default())
  .children([
    router()
      .path('/')
      .component(async () => (await import('./pages/Home')).default())
      .get(),
    router()
      .path('/about')
      .component(async () => (await import('./pages/About')).default())
      .get(),
    router()
      .path('/contact')
      .component(async () => (await import('./pages/Contact')).default())
      .get(),
  ])
  .get();

const history = createBrowserHistory();

export const routers = createRouter()
  .routes(routes)
  .history(history)
  .mountedId('#app-1')
  .get();
```

```typescript
// src/main.ts
import App from './App';
import { routers } from './routes';

import { createApp } from '@sonnetjs/core';

const app = createApp();
app.root(App);
app.use(routers);
app.lazy();
app.mount('#app');
app.initialized();
```
npm package: @sonnetjs/store
Description: sonnetjs/store is a simple and declarative state management library for JavaScript applications.
Author: htmujahid
Latest version: 0.0.3

# sonnetjs/store

sonnetjs/store is a simple and declarative state management library for JavaScript applications.

## Features

- Simple and declarative API for managing state.
- Supports multiple stores.
- support watch for state changes.

## Usage

1. Run the following command to create a new SonnetJS project.

```bash
npx create-sonnet-app@latest
```

2. Change directory to the newly created project.

```bash
cd [my-sonnet-app]
```

3. Install the dependencies

```bash
npm i
```

4. Install sonnetjs/store

```bash
npm i @sonnetjs/store
```

5. Start the development server

```bash
npm run dev
```

## License

sonnetjs/store is licensed under the MIT license.
npm package: @sonnetjs/svg
Description: sonnetjs/svg is a library for creating SVG elements using a simple and declarative API.
Author: htmujahid
Latest version: 0.0.13

# sonnetjs/svg

sonnetjs/svg is a library for creating SVG elements using a simple and declarative API.

## Features

- Create SVG elements using a simple and declarative API.
- Set attributes and properties of SVG elements using chainable methods.
- Add children to SVG elements using children method.

## Usage

1. Run the following command to create a new SonnetJS project.

```bash
npx create-sonnet-app@latest
```

2. Change directory to the newly created project.

```bash
cd [my-sonnet-app]
```

3. Install the dependencies

```bash
npm i
```

4. Install sonnetjs/svg

```bash
npm i @sonnetjs/svg
```

5. Start the development server

```bash
npm run dev
```

## Documentation

This is a simple example of how to use sonnetjs/svg to create an SVG element.

```typescript
import { svg, rect } from '@sonnetjs/svg';

const element = svg()
  .width(100)
  .height(100)
  .children(rect().x(10).y(10).width(80).height(80).fill('red'));
```

## License

sonnetjs/svg is licensed under the MIT license.
npm package: @sonnymiel/eslint-config
Description: This package contains my customs `eslint-config`.
Author: Sonny Miel
Latest version: 1.0.3

# `@sonnymiel/eslint-config`

This package contains my customs `eslint-config`.

## Installation

```sh
npm install -D @sonnymiel/eslint-config
```

## Usage

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

  export default [
    ...config.base,
    ...config.react,
    ...config.stylistic,
  ];
```

## License

MIT © [Sonny Miel](https://github.com/sonnymiel)
npm package: @sonnymiel/tsconfig
Description: This package contains my customs `tsconfig`.
Author: Sonny Miel
Latest version: 1.0.1

# `@sonnymiel/tsconfig`

This package contains my customs `tsconfig`.

## Installation

```sh
npm install @sonnymiel/tsconfig
```

## Usage

```json
 "extends": ["@sonnymiel/tsconfig/base.json"]
```

MIT © [Sonny Miel](https://github.com/sonnymiel)