open-index/open-npm huggingface dataset:
npm package: @leight-core/leight
Description: A component library for Next.js and Ant Design.
Latest version: 0.12.189

# leight

Leight is a Javascript library helper for Next.js and Ant Design.

## Some interesting things

- https://storybook.js.org/docs/react/workflows/testing-with-storybook
- https://storybook.js.org/docs/react/writing-docs/doc-blocks
- https://github.com/i18next/react-i18next/tree/master/example/storybook
- https://storybook.js.org/docs/react/writing-stories/decorators
- https://ant.design/components/overview/
- https://www.npmjs.com/package/axios-mock-adapter
npm package: @leight/calendar-client
Description: Clever Calendar based on Mantine UI library.
Latest version: 0.5.25

# @leight/calendar-client

This library is general-purpose Calendar component (not a date picker) used to render Gregorian calendars. It's quite a feature rich and
based on a great [Mantine](https://mantine.dev/) library for styling (and integration) as this was on of the motivations for creating this library.

## Documentation

Documentation and working examples can be [found here](https://leight-core.github.io/viv/docs/packages/calendar-client).

## Credits

I just want to give huge credits to [Luxon library](https://moment.github.io/luxon/#/) which serves as a backend for this calendar stuff and is fully integrated into `@leight` packages.
npm package: @leihs/calendar
Description: A React component for choosing dates and date ranges.
Latest version: 2.1.0

# leihs-calendar

This is a UI component used internally in [leihs](https://github.com/leihs/leihs) _(via [leihs-ui](https://github.com/leihs/leihs-ui))_.

Docs and Examples: <https://leihs.github.io/leihs-calendar/>

It was forked from <https://github.com/Adphorus/react-date-range>,
go there for more information.
npm package: @leiko/m-react-splitters
Description: Splitter component for React, written in TypeScript
Author: Martin Novák
Latest version: 1.3.0

# Splitters for React

<i>v. 1.1.0</i>

**New version changes**

* fixed issue with `getBoundingClientRect` in React 16

[NPM](https://www.npmjs.com/package/m-react-splitters)

[Demo](https://martinnov92.github.io/React-Splitters/)

Install: `npm install --save m-react-splitters` 

---------

Splitters for React has been written in TypeScript.

This splitter supports touch screens.

There are two options how the splitter can work.
You can either select to resize splitters as you are holding and dragging the handlebar, or you can
postponed the resize.

Splitters can be nested, but you have to specify what positions (vertical / horizontal) are they going to be and their sizes.

Left pane's (primary) width is calculated by `JavaScript`, the other panel's width is set by `CSS`.

Usage in your projects:
Please import splitters like this:

```
import Splitter from 'm-react-splitters';
import 'm-react-splitters/lib/splitters.css';
```

Vertical splitter
```js
primaryPaneMinWidth={number}
primaryPaneMaxWidth="string" (% or px)
primaryPaneWidth="string" (% or px)
```

Vertical splitter
```js
primaryPaneMinWidth={number}
primaryPaneMaxWidth="string" (% or px)
primaryPaneWidth="string" (% or px)
```

Horizontal splitter
```js
primaryPaneMinHeight={number}
primaryPaneMaxHeight="string" (% or px)
primaryPaneHeight="string" (% or px)
```

Another options for splitter are:

* `postPoned`: Boolean

    * this specifies how the resize will work
    * default is false 

* `className`: string 
* `primaryPaneClassName`: string
* `secondaryPaneClassName`: string
* `dispatchResize`: Boolean
    
    * This dispatch resize event, it is meant for other components which resize on window resize
    * it's something like temporary callback function
    * Default is false

    * or you can use:
        
        `onDragFinished`: function

* `maximizedPrimaryPane`: Boolean
* `minimalizedPrimaryPane`: Boolean

```tsx
<Splitter
    position="horizontal"
    primaryPaneMaxHeight="80%"
    primaryPaneMinHeight={0}
    primaryPaneHeight="400px"
    dispatchResize={true}
    postPoned={true}
>    
    <Splitter
        position="vertical"
        primaryPaneMaxWidth="80%"
        primaryPaneMinWidth={0}
        primaryPaneWidth="400px"
        postPoned={false}
    >    
        <div></div>
        <div></div>
    </Splitter> 
    <div></div>
</Splitter> 
```