open-index/open-npm huggingface dataset:
npm package: @innoartive-labs/hijricalendar
Description: A Hijri calendar utility tailored for the Dawoodi Bohra community. Provides accurate date conversion, important miqaat dates, and support for the Hijri Calendar system.
Author: Innoartive-Labs
Latest version: 1.0.1

# 🕋 hijriCalendar

> A Hijri calendar utility tailored for the **Dawoodi Bohra** community, built with precision and purpose.
---

## 🚀 Features

✨ **Accurate Hijri to Gregorian Date Conversion**  
📆 Based on the traditional 354-day Hijri year with alternating 30/29 day months  
⚡ Blazing fast — just run and convert  
🌙 Specifically aligned with **Bohra Hijri practices**  
🌐 Built with ❤️ by **Innoartive Labs**

---

## 📦 Current Version: `1.0.1`

This version focuses solely on:

✅ Converting **Hijri → Gregorian** dates  
🚫 No Gregorian → Hijri (yet)  
🚫 No miqaat data or calendar UI (yet)

---

### 📦 Installation & Usage

#### ⬇️ Install via npm

```bash
npm install @innoartive-labs/hijricalendar
```

#### 📄 In your JavaScript:

```js
const h2g = require('hijricalendar');

const gDate = h2g.hijriToGregorian(1425, 9, 18);

if (gDate) {
    console.log(gDate.toDateString()); // ✅ Clean Gregorian output
} else {
    console.error("❌ Invalid Hijri date.");
}

```

#### 🧪 Output:

```
Sun Oct 03 2004
```

#### 📘 Tip:

Use `.toDateString()` for a clean and readable output. Without it, `new Date()` returns full date-time with time and timezone info.

---

#### ⚠️ Validation Notes
Returns null for invalid Hijri dates (e.g. day > 30 or month > 12).

Even months (2, 4, 6...) have 29 days, odd months have 30 days.

---
npm package: @innobrain/onoffice-adapter-ts
Description: TypeScript port (phase 1) of laravel-onoffice-adapter
Latest version: 0.3.2

# onoffice‑adapter‑ts

Thin, framework‑agnostic TypeScript client for the **onOffice®** Smart‑API.

---

## Project status · *Phase 1*

| Phase | Scope |
|-------|-------|
| 🚧 **Phase 1** | Core building blocks (`OnOfficeService`, generic `Builder`, minimal `BaseRepository`). No concrete resource builders yet. |

> Later phases will gradually port the full Laravel feature‑set: rich query builders, DTO hydration, typed repositories and a test harness.

---

## Installation

```bash
# with pnpm (recommended)
pnpm add @innobrain/onoffice-adapter-ts

# or npm
yarn add @innobrain/onoffice-adapter-ts
```

*Requires Node 🟢 **v18** or newer.*

---

## Quick start

```ts
import { BaseRepository } from "@innobrain/onoffice-adapter-ts";

const repo = new BaseRepository();

const estates = await repo
  .query()
  .select(["ID", "title"])        // pick columns
  .where("living_area", ">=", 80) // add filters
  .orderBy("title", "asc")         // sort
  .limit(10)                         // limit result size
  .get();                            // fire the request

console.log(estates);
```

### Supplying credentials manually

By default the service reads your credentials from environment variables (see below). You can also pass them directly:

```ts
import { OnOfficeService, credentials } from "@innobrain/onoffice-adapter-ts";

const service = new OnOfficeService(
  credentials(
    process.env.ONOFFICE_TOKEN!,
    process.env.ONOFFICE_SECRET!,
    "your‑optional‑api‑claim"
  )
);
```

---

## Environment variables

| Variable | Default | Description |
|----------|---------|-------------|
| `ONOFFICE_BASE_URL` | `https://api.onoffice.de/api/stable/api.php/` | API endpoint |
| `ONOFFICE_TOKEN` | – | OAuth token (32 characters) |
| `ONOFFICE_SECRET` | – | HMAC secret (64 characters) |
| `ONOFFICE_API_CLAIM` | `""` | Optional extended claim |
| `ONOFFICE_RETRY_COUNT` | `3` | Maximum automatic retries |
| `ONOFFICE_RETRY_DELAY_MS` | `200` | Back‑off delay between retries (ms) |
| `ONOFFICE_RETRY_ONLY_CONN_ERR` | `true` | Retry **only** on connection errors (`false` → also retry 5xx responses) |

---

## NPM scripts

```bash
pnpm run build      # Transpile TypeScript → ./dist
pnpm run test       # Run Jest unit tests
pnpm run lint       # Lint with ESLint
pnpm run format     # Format codebase with Biome
```

---

## Testing

The suite uses **Jest** with `ts-jest` (ESM preset). All outbound HTTP calls are mocked, so the tests run offline:

```bash
pnpm run test
```

---

## Roadmap

| Phase | What’s coming |
|------:|---------------|
| **1** | ✅ Service, generic Builder, BaseRepository |
| **2** | ⏩ Concrete resource builders (`EstateBuilder`, `AddressBuilder`, …) |
| **3** | ⏩ DTOs & advanced query helpers |
| **4** | ⏩ Typed repositories & convenience API |
| **5** | ⏩ Test harness / fixtures |

---

## License

MIT © 2025 innobrain GmbH
npm package: @innocells/eslint-config
Description: InnoCells's ESLint config, following our styleguide
Author: Jose Luis Piedrahita
Latest version: 1.2.0

# eslint-config-innocells

InnoCells's ESLint shared config which extends [Airbnb's](https://github.com/airbnb/javascript/tree/master/packages/eslint-config-airbnb-base)
overriding some rules adapting them to our preferences.

## Why

[ESLint](https://eslint.org/) has become an indispensable tool in our development
workflow (along [Prettier](https://github.com/prettier/prettier)), it help us catch those pesky bugs ASAP, 
enforce code conventions and keep our projects consistent.   

This package aims to ease the configuration of new projects and keep a single source of truth for all
those conventions.

> This is the place where to discuss existing rules or apply
new ones, so if you want to participate (as you should!) open a Github issue.  

## Install

This config depends on `eslint`, `eslint-plugin-import`, `eslint-plugin-react` and `eslint-plugin-jsx-a11y` as [peerDependencies](https://nodejs.org/en/blog/npm/peer-dependencies/), 
so make sure to install them before install the configuration, otherwise `npm` will complaint about unmet peer dependencies:

> To learn more about why they are required as `peerDependencies` and not
just `dependencies` see [here](https://stackoverflow.com/questions/26737819/why-use-peer-dependencies-in-npm-for-plugins).

```
npm install --save-dev eslint
npm install --save-dev eslint-plugin-import
npm install --save-dev eslint-plugin-react
npm install --save-dev eslint-plugin-jsx-a11y
```

Then:

```
npm install --save-dev @innocells/eslint-config
```

Or all at once:

```
npm i -D @innocells/eslint-config eslint eslint-plugin-import eslint-plugin-react eslint-plugin-jsx-a11y
```

## Usage

In your `.eslintrc.js` file just extend `eslint-config-innocells`:

```javascript
module.exports = {
  extends: '@innocells/eslint-config'
};
```

Or more concisely:

```javascript
module.exports = {
  extends: '@innocells'
};
```

Voilà! this will tell ESLint to apply our set of custom rules. 

### Configurations

This package export two ESLint configurations:

#### eslint-config-innocells

The base configuration, this config doesn't include any React
rules, so is primary intended to be used in backend (Node.js) projects:

```javascript
module.exports = {
  extends: '@innocells',
  rules: {
    // project specific overrides
  }
};
```

#### eslint-config-innocells/react

React configuration, includes all the rules in the base config plus React specific ones. For usage in React and React Native projects:

```javascript
module.exports = {
  extends: '@innocells/eslint-config/react',
  rules: {
    // project specific overrides
  }
};
```

## TODO

- [ ] summary of Airbnb rules
- [ ] summary of overridden rules
npm package: @innocenzi/eslint-config
Description: <h2 align="center">ESLint</h2>
Author: Enzo Innocenzi
Latest version: 0.22.8

<h2 align="center">ESLint</h2>

<p align="center">
  <a href="https://www.npmjs.com/package/@innocenzi/eslint-config">
    <img alt="npm" src="https://img.shields.io/npm/v/@innocenzi/eslint-config">
  </a>
  <br />
  <br />
  <p align="center">
    Personal eslint configuration for my projects.
  </p>
  <pre><div align="center">npx @preset/cli innocenzi/config --eslint</div></pre>
</p>

&nbsp;

## Usage

```ts
// eslint.config.mjs
import defineEslintConfig from '@innocenzi/eslint-config'

export default defineEslintConfig()
```

&nbsp;

## Credits

This configuration is a fork of Anthony's Fu [`eslint-config`](https://github.com/antfu/eslint-config), with my own rules in it. I've been using it for a while with a superset of my own rules, so I've decided to make my own reusable configuration.
npm package: @innocenzi/utils
Description: Opinionated collection of TypeScript utilities
Author: Enzo Innocenzi
Latest version: 0.5.1

<h2 align="center">TypeScript utilities</h2>

<p align="center">
  <br />
  <a href="https://github.com/innocenzi/utils/actions/workflows/ci.yml"><img alt="Status" src="https://github.com/innocenzi/utils/actions/workflows/ci.yml/badge.svg"></a>
  <span>&nbsp;</span>
  <a href="https://github.com/innocenzi/utils/releases"><img alt="version" src="https://img.shields.io/github/v/release/innocenzi/utils?include_prereleases&label=version&logo=github&logoColor=white"></a>
  <br />
  <br />
  <pre><div align="center">pnpm i @innocenzi/utils</div></pre>
</p>

<br />

<div align="center">
  An opinionated collection of TypeScript utilities. Forked from <a href="https://github.com/antfu/utils">antfu/utils</a> and modified to my needs.
  <br />
  This package is designed to be used as a development dependency and bundled into your dist.
</div>

<p align="center">
  <br />
  <br />
  ·
  <br />
  <br />
  <sub>Built with ❤︎ by <a href="https://twitter.com/enzoinnocenzi">Enzo Innocenzi</a>
</p>
npm package: @innocuous/components
Description: A set of harmless React components.
Latest version: 2.1.1

# Innocuous > Components

_A set of harmless React components._

This component library was bootstrapped using [tsdx](https://github.com/palmerhq/tsdx).

![Build Status](https://github.com/innocuous-tech/components/workflows/Node%20CI/badge.svg)

## Installation

`yarn add @innocuous/components`

## Commands

The recommended workflow is to run TSDX in one terminal:

```
yarn start
```

This builds to `/dist` and runs the project in watch mode so any edits you save inside `src` causes a rebuild to `/dist`.

Then run the example inside another:

```
cd example
yarn # install dependencies
yarn start
```

The default example imports and live reloads whatever is in `/dist`, so if you are seeing an out of date component, make sure TSDX is running in watch mode like we recommend above. **No symlinking required**, [we use Parcel's aliasing](https://github.com/palmerhq/tsdx/pull/88/files).

To do a one-off build, use `yarn build`.

To run tests, use `yarn test`.

## Optimizations

Please see the main `tsdx` [optimizations docs](https://github.com/palmerhq/tsdx#optimizations). In particular, know that you can take advantage of development-only optimizations:

```js
// ./types/index.d.ts
declare var __DEV__: boolean;

// inside your code...
if (__DEV__) {
  console.log('foo');
}
```

## Using the Playground

```
cd example
yarn # install dependencies
yarn start
```

The default example imports and live reloads whatever is in `/dist`, so if you are seeing an out of date component, make sure TSDX is running in watch mode like we recommend above. **No symlinking required**!

## Named Exports

Per Palmer Group guidelines, [always use named exports.](https://github.com/palmerhq/typescript#exports) Code split inside your React app instead of your React library.
npm package: @innocuous/functions
Description: A set of harmless functions.
Latest version: 2.1.1

# Innocuous > Functions

_A set of harmless functions._

This project was bootstrapped using [tsdx](https://github.com/palmerhq/tsdx).

![Build Status](https://github.com/innocuous-tech/functions/workflows/Node%20CI/badge.svg)

## Installation

`yarn add @innocuous/functions`

## Local Development

Below is a list of commands you will probably find useful.

### `yarn start`

Runs the project in development/watch mode. Your project will be rebuilt upon changes. TSDX has a special logger for you convenience. Error messages are pretty printed and formatted for compatibility VS Code's Problems tab.

<img src="https://user-images.githubusercontent.com/4060187/52168303-574d3a00-26f6-11e9-9f3b-71dbec9ebfcb.gif" width="600" />

Your library will be rebuilt if you make edits.

### `yarn build`

Bundles the package to the `dist` folder.
The package is optimized and bundled with Rollup into multiple formats (CommonJS, UMD, and ES Module).

<img src="https://user-images.githubusercontent.com/4060187/52168322-a98e5b00-26f6-11e9-8cf6-222d716b75ef.gif" width="600" />

### `npm test` or `yarn test`

Runs the test watcher (Jest) in an interactive mode.
By default, runs tests related to files changed since the last commit.
npm package: @innocuous/hooks
Description: A set of harmless React hooks.
Latest version: 2.1.1

# Innocuous > Hooks

_A set of harmless hooks._

This project was bootstrapped using [tsdx](https://github.com/palmerhq/tsdx).

![Build Status](https://github.com/innocuous-tech/hooks/workflows/Node%20CI/badge.svg)

## Installation

`yarn add @innocuous/hooks`

## Local Development

Below is a list of commands you will probably find useful.

### `yarn start`

Runs the project in development/watch mode. Your project will be rebuilt upon changes. TSDX has a special logger for you convenience. Error messages are pretty printed and formatted for compatibility VS Code's Problems tab.

<img src="https://user-images.githubusercontent.com/4060187/52168303-574d3a00-26f6-11e9-9f3b-71dbec9ebfcb.gif" width="600" />

Your library will be rebuilt if you make edits.

### `yarn build`

Bundles the package to the `dist` folder.
The package is optimized and bundled with Rollup into multiple formats (CommonJS, UMD, and ES Module).

<img src="https://user-images.githubusercontent.com/4060187/52168322-a98e5b00-26f6-11e9-8cf6-222d716b75ef.gif" width="600" />

### `npm test` or `yarn test`

Runs the test watcher (Jest) in an interactive mode.
By default, runs tests related to files changed since the last commit.
npm package: @innodata/nuxtjs-alt-http
Description: An extended module to ohmyfetch
Author: artemprodigy
Latest version: 1.3.5

**Information**

This serves as an extension to ohmyfetch for nuxt. Please note this is only for nuxt3.
This works similar to nuxt/http and nuxtjs-alt/axios except it utilizes ohmyfetch. All property options will be under `http`

**Other Information**

If you want to override the global `$fetch` function you can do so by setting `useConflict` to `true` in your config. This will change:
- `$http`
- `useHttp`
- `useLazyHttp`
- `globalThis.$http`

to

- `$fetch`
- `useFetch`
- `useLazyFetch`
- `globalThis.$fetch`

Remember this is a mix of `ohmyfetch` and `nuxt/http` so to use methods you would use as an example:

```ts
// Available methods: 'get', 'head', 'delete', 'post', 'put', 'patch', 'options'
// $http.$get('/api') is the same as $fetch('/api', { method: 'get' })
await $fetch.$get('/api', options)
await $http.$get('/api', options)

// Access Raw Response
// $http.get('/api') is the same as $fetch.raw('/api', { method: 'get' })
await $fetch.get('/api', options)
await $http.get('/api', options)
```

**Interceptors**

The interceptors should work exactly like how axios has it so to access them you would use:

```ts
$http.interceptors.request.use(config)
$http.interceptors.response.use(config)

```

@nuxtjs-axios based functions have also been added:

```ts
$http.onRequest(config)
$http.onResponse(response)
$http.onRequestError(err)
$http.onResponseError(err)
$http.onError(err)
```

**Config Options**

```ts
import { defineNuxtConfig } from 'nuxt'

export default defineNuxtConfig({
    modules: [
        '@nuxtjs-alt/http',
    ],
    http: {
      
    }
})
```

Please do tell me if you encounter any bugs.
npm package: @innodata/rc-image
Description: React easy to use image component
Latest version: 3.0.7

# rc-image

---

React Image

[![NPM version][npm-image]][npm-url] [![build status][travis-image]][travis-url] [![Test coverage][coveralls-image]][coveralls-url] [![gemnasium deps][gemnasium-image]][gemnasium-url] [![npm download][download-image]][download-url]

[npm-image]: http://img.shields.io/npm/v/rc-image.svg?style=flat-square
[npm-url]: http://npmjs.org/package/rc-image
[travis-image]: https://img.shields.io/travis/react-component/image.svg?style=flat-square
[travis-url]: https://travis-ci.org/react-component/image
[coveralls-image]: https://img.shields.io/coveralls/react-component/image.svg?style=flat-square
[coveralls-url]: https://coveralls.io/r/react-component/img?branch=master
[gemnasium-image]: http://img.shields.io/gemnasium/react-component/img.svg?style=flat-square
[gemnasium-url]: https://gemnasium.com/react-component/img
[node-image]: https://img.shields.io/badge/node.js-%3E=_0.10-green.svg?style=flat-square
[node-url]: http://nodejs.org/download/
[download-image]: https://img.shields.io/npm/dm/rc-image.svg?style=flat-square
[download-url]: https://npmjs.org/package/rc-image

## Feature

- [x] Placeholder
- [x] Preview
- [x] Rotate
- [x] Zoom
- [x] Fallback

### Keyboard

## install

[![rc-image](https://nodei.co/npm/rc-image.png)](https://npmjs.org/package/rc-image)

## Usage

```bash
npm install
npm start
```

```jsx
const Image = require('rc-image');

ReactDOM.render(
  <Image src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" />
), document.getElementById('root'));
```

## API

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| preview | boolean | true | Whether to show preview |
| prefixCls | string | rc-image | Classname prefix |
| placeholder | boolean \| ReactElement | - | if `true` will set default placeholder or use `ReactElement` set customize placeholder |
| fallback | string | - | Load failed src |
| onPreviewClose | function(e) | - | Preview close callback |
| previewPrefixCls | string | rc-image-preview | Preview classname prefix |

## Example

http://localhost:8003/examples/

## Test Case

```
npm test
```

## Coverage

```
npm run coverage
```

## License

rc-image is released under the MIT license.
npm package: @innodata/react-yandex-maps
Description: Yandex.Maps API bindings for React
Author: Sergey Petushkov
Latest version: 4.2.4

# react-yandex-maps

[Yandex.Maps JS API][ymaps-api] bindings for React

[ymaps-api]:
  https://tech.yandex.com/maps/doc/jsapi/2.1/quick-start/index-docpage/

## Documentation

You can find the documentation at https://react-yandex-maps.now.sh

## Contributing

Feel free to submit issues and/or PRs if you found bugs 🐞 or have some features
in mind! The documentation improvements will be super appreciated, if you feel
that docs are lacking in some places 📝👩‍🔬

### Developing locally (Quick Start)

If you want to work on the library locally:

1. Fork this repository and clone your version of the repo
2. Install npm dependencies

```sh
npm install
```

3. Start library build in the watch mode. This command will start microbundle in
   watch mode, meaning that everytime you make changes to the source of the
   library it will be compiled to `dist` folder

```sh
npm run dev
```

4. Install documentation dependencies

```sh
cd docs && npm install
```

5. Start docs server locally

```sh
npm run dev
```

If everything went well, you now have documentation running on
`http://localhost:3000`

You can find special sandbox page on
[`http://localhost:3000/sandbox`](http://localhost:3000/sandbox)

Now you can make changes to the library and see them applied to the sandbox in
real time.

When you commit changes, eslint will make sure that there are no linting errors
and prettier will format your code based on the repo settings.

When you push changes, jest will run a set of unit tests to make sure that all
of them are passing.

## License

[MIT](LICENSE)

## Kudos

Thanks to all [contributors][] for help with supporting the library

Thanks to [@effrenus](https://github.com/effrenus/) and his
[yandex-map-react](https://github.com/effrenus/yandex-map-react) for inspiring
this library

[contributors]: graphs/contributors
npm package: @innodatalabs/ilabs-api
Description: iLabs API client
Author: Mike Kroutikov
Latest version: 1.0.2

# ilabs-api-js

NodeJS client for InnodataLabs prediction microservices.

## Installation
```bash
npm i @innodatalabs/ilabs-api
```

## Example
```js
const Client = require('@innodatalabs/ilabs-api');

const userKey = ...;  // this is your secret API access key
const domain = ...;   // prediction domain to use

const client = new Client({userKey});

async function predict(domain, content) {
    const result = await client.call(domain, content);
    return result.toString();
}

predict(domain, 'Some input text (or file, or Buffer)').then(console.log).catch(console.error);
```

## API

### Concepts
InnodataLabs prediction microservices are RESTful services. Each service takes one binary string (e.g. NodeJS Buffer object), and
returns binary string (another NodeJS Buffer object). Input/output types are typically UTF-8 encoded strings, but please consult
the documentation of the particular prediction domain for the explanation of input/output format.

InnodataLabs RESTful endpoint lives at https://ilabs-api.innodata.com/v1. This endpoints hosts multiple services. A string that we
call **prediction domain** identifies concrete service.

### Client

Constructor arguments:

* `userKey` - required to access the API
* `endpoint` - (optional) can be used to switch to the alternative endpoint (staging, testing)
* `userAgent` - (optional) user agent string to send to the endpoint

### async Client.call(domain, content)
Asynchronous method that does the prediction.

Arguments:

* `domain` - prediction domain (required)
* `content` - the content. Can be one of:
    - string - will be encoded with UTF-8
    - NodeJS Buffer object - its content will be sent to the endpoint
    - NodeJS Stream - stream content will be piped into the remote endpoint

Returns:

NodeJS Buffer object
npm package: @innodoc/mathjax-coordsep
Description: A MathJax v3 extension that adds a \coordsep command for printing a custom coordination point separator.
Author: Mirko Dietrich
Latest version: 0.0.1

# mathjax-coordsep

> A MathJax v3 extension that adds a \coordsep command for printing a custom coordination point separator.

[![Version](https://img.shields.io/npm/v/@innodoc/mathjax-coordsep?label=version)](https://www.npmjs.com/package/@innodoc/mathjax-coordsep)
[![License](https://img.shields.io/npm/l/@innodoc/mathjax-coordsep)](https://www.npmjs.com/package/@innodoc/mathjax-coordsep)

## Installation

Enable the extension by
[configuring MathJax](https://docs.mathjax.org/en/latest/web/configuration.html)
appropriately, e.g.:

```js
MathJax = {
   loader: {
      load: '[mathjaxcoordsep]/coordsep.min.js'],
      paths: {
        mathjaxcoordsep: 'https://cdn.jsdelivr.net/npm/@innodoc/mathjax-coordsep@latest/dist',
      },
   },
   tex: {
      packages: {
        '[+]': ['coordsep'],
      },
   },
};
```

## Usage

The `\coordsep` currently just produces a `;` character. In the future the
output can be customized.

## License

MIT
npm package: @innodoc/mathjax-num
Description: A MathJax v3 extension that adds a \num command for printing a localized decimal marker.
Author: Mirko Dietrich
Latest version: 0.0.3

# mathjax-num

> A MathJax v3 extension that adds a `\num` command for printing a localized decimal marker.

[![Version](https://img.shields.io/npm/v/@innodoc/mathjax-num?label=version)](https://www.npmjs.com/package/@innodoc/mathjax-num)
[![License](https://img.shields.io/npm/l/@innodoc/mathjax-num)](https://www.npmjs.com/package/@innodoc/mathjax-num)

## Installation

Enable the extension by
[configuring MathJax](https://docs.mathjax.org/en/latest/web/configuration.html)
appropriately, e.g.:

```js
MathJax = {
   loader: {
      load: '[mathjaxnum]/num.min.js'],
      paths: {
        mathjaxnum: 'https://cdn.jsdelivr.net/npm/@innodoc/mathjax-num@latest/dist',
      },
   },
   tex: {
      packages: {
        '[+]': ['num'],
      },
   },
};
```

## Usage

`\num{3.5}` (also `\num{3,5}`) can be used to render a decimal number with a
localized decimal separator. The separator is determined by the html `lang`
attribute.

Also, it is possible to output only the localized decimal marker by using the
`\decmarker` command.

## License

MIT
npm package: @innofake/storybook-addon-cssprops
Description: Interact with css custom properties dynamically in the Storybook UI
Author: Luke Clark
Latest version: 2.3.6

<p align="center">
  <img src="./assets/icon.png">
  <h1>Storybook CSS Custom Properties Addon</h1>
</p>

<p align="center">
  <img width="800" src="./assets/example.jpg">
</p>

## Installation

```sh
npm i -D @innofake/storybook-addon-cssprops
```


Enable the addon in [`.storybook/main.js`](https://storybook.js.org/docs/react/configure/overview#configure-your-storybook-project):

```js
module.exports = {
  addons: ["@innofake/storybook-addon-cssprops"],
};
```

To use it inside MDX, or when customising the docs page:

```js
import { CssPropsBlock } from "@innofake/storybook-addon-cssprops";
```

## Usage

Include your CSS Custom Properties without the initial `--` prefix, the addon will apply and document this automatically.

```jsx
export default {
  title: "Simple Component",
  parameters: {
    cssprops: {
      "css-custom-property-1": {
        value: "hsl(120deg 100% 25% / 49%)",
        description: "Optional description",
      },
    }
  },
} as Meta;
```

## Configuration

The addon can be configured wherever other [parameters](https://storybook.js.org/docs/react/writing-stories/parameters) can be configured (at the Global, Story, or individual story level). It will also attempt to detect between `colour` and `text`, this can be overriden by specifying the `control` property.

```ts
parameters: {
  cssprops: {
    // Disable the addon by setting disable to true:
    disable: false,
    // Override the detected default control type:
    "override-property-detection-type": {
      value: "green",
      control: "text",
      description: "Maybe you want 'green' for reasons differing to colour"
    },
    // Override the detected default control type:
    "optional-category-or-subcategory": {
      value: "red",
      category: "Optional",
      subcategory: "Very Optional",
      description: "This property will be grouped under a category called 'Optional', and then a further subcategory of 'Very Optional'",
    },
    // Customise preset colours for the colourpicker
    presetColors: ['#FFF']
  }
}
```

### Adding to DocsPage and MDX

#### DocsPage

Modify the docs page based by [following the storybook docs](https://storybook.js.org/docs/react/writing-docs/docs-page#remixing-docspage-using-doc-blocks). Including `<CssPropsBlock />` where you prefer.

## Development

This monorepo uses npm@7 workspaces, run `npm i` at the root.

### TODO

- [ ] Look for the args of a defined component when in MDX
- [ ] Better specificity when injecting styles (with & without iframes)
- [ ] Reset the default values without requiring a page refresh (ArgsTable)
npm package: @innofepub/lowcode-components-lego
Description: 乐高事件脉络、文章等组件合集
Author: fusion-team
Latest version: 0.2.5

# lowcode-components-lego

一个面向 PC 的业务组件库

## 调试

启动调试

```
npm run lowcode:dev             # 打开开发环境，运行所有组件
```

构建

```
npm run lowcode:build
```