open-index/open-npm huggingface dataset:
npm package: @jdjinsui.com/ltree
Description: tree组件
Author: liw
Latest version: 1.0.0

# ltree

## Project setup
```
npm install
```

### Compiles and hot-reloads for development
```
npm run serve
```

### Compiles and minifies for production
```
npm run build
```

### Lints and fixes files
```
npm run lint
```

### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).
npm package: @jdjinsui.com/ltree.js
Description: tree组件
Author: liw
Latest version: 1.0.3

# ltree

## Project setup
```
npm install
```

### Compiles and hot-reloads for development
```
npm run serve
```

### Compiles and minifies for production
```
npm run build
```

### Lints and fixes files
```
npm run lint
```

### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).
npm package: @jdl-solutions/koguiapi
Description: This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 7.2.0.
Latest version: 0.10.14

# Koguiapi

This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 7.2.0.

## Code scaffolding

Run `ng generate component component-name --project koguiapi` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project koguiapi`.
> Note: Don't forget to add `--project koguiapi` or else it will be added to the default project in your `angular.json` file. 

## Build

Run `ng build koguiapi` to build the project. The build artifacts will be stored in the `dist/` directory.

## Publishing

After building your library with `ng build koguiapi`, go to the dist folder `cd dist/koguiapi` and run `npm publish`.

## Running unit tests

Run `ng test koguiapi` to execute the unit tests via [Karma](https://karma-runner.github.io).

## Further help

To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
npm package: @jdl2/button
Description: Buttons are one of the most basic types of controls for interacting with an application.
Latest version: 2.0.0-alpha.30

Buttons are one of the most basic types of controls for interacting with an application.

#### Button Types

```jsx
<Button>Default</Button>
<Button primary>Primary</Button>
<Button destructive>Destructive</Button>
```

#### Button Sizes

```jsx
<Button small>Small</Button>
<Button>Normal</Button>
<Button large>Large</Button>
```
npm package: @jdl2/data-table
Description: The data table is a basic table used to display columnar data using a simple declarative syntax.
Latest version: 2.0.0-alpha.9

The data table is a basic table used to display columnar data using a simple declarative syntax.

Simply define as many `DataTable.Column` children with `header` and `cell` props to get a basic table:

```jsx static
<DataTable items={users}>
    <DataTable.Column header="Username" cell={user => user.username} expand />
    <DataTable.Column header="Country" cell={user => user.country} />
</DataTable>
```

```jsx
const users = [
    {
        username: 'Joe',
        country: 'USA',
    },
    {
        username: 'Vincent',
        country: 'France',
    },
];
<DataTable items={users}>
    <DataTable.Column header="Username" cell={user => user.username} expand />
    <DataTable.Column header="Country" cell={user => user.country} />
</DataTable>;
```
npm package: @jdl2/dialog
Description: A dialog based on `react-modal`. You may define more than one modal at any given time.
Latest version: 2.0.0-alpha.30

# Dialog

A dialog based on `react-modal`. You may define more than one modal at any given time.

```JSX
addDialog(title: string, className: string, children: JSX.Element, onDismiss?: () => void)

const title = 'My Dialog'
const additionalClass = 'outline'
const content = <span>Some modal content</span>
const onDismiss = jest.fn()

// Add dialog(s). Note, additional dialogs will appear above previous.
dialogs.addDialog(title, additionalClass, content, onDismiss);
dialogs.addDialog(title, additionalClass, content, onDismiss);
setTimeout(() => {
    dialogs.addDialog(title, additionalClass, content, onDismiss); // 3rd on top of stack
}, 5000);
dialogs.render();
```
npm package: @jdl2/dropdown
Description: The dropdown component renders a simple dropdown based on user defined options.
Latest version: 2.0.0-alpha.27

# Dropdown

The dropdown component renders a simple dropdown based on user defined options.

```jsx static
const options = [{ value: 'A', label: 'A' }, { value: 'B', label: 'B' }];
const handleChange = (e: HTMLInputElement) => alert('changed to value: ' + e.value);

<Dropdown options={options} value={options[0].value} onChange={handleChange} />;
```
npm package: @jdl2/form
Description: ### Example
Latest version: 2.0.0-alpha.30

# Form

### Example

```jsx
<Form>
    <Form.Header>CloudBees Form</Form.Header>
    <Form.Input>
        {{
            label: 'First Name:',
            name: 'first-name',
            placeholder: 'Enter your first name:',
            htmlFor: 'first-name',
        }}
    </Form.Input>
    <Form.Checkbox>
        {{
            name: 'employee1',
            description: 'are you a CloudBees Employee?',
            value: 'Employee',
        }}
    </Form.Checkbox>
    ...
</Form>
```

##### Properties of form parts:

```
.Input {
    label?: string;
    name?: string;
    placeholder?: string;
    htmlFor?: string;
}

.Checkbox {
    name?: string;
    value?: string;
    description?: React.ReactNode | string;
}
```
npm package: @jdl2/ioc
Description: This is ioc documentation
Latest version: 2.0.0-alpha.30

# ioc

This is ioc documentation

If you want to have control over how instances are created,
it's possible to implement and register a provider. For example.
to automatically create logger instances with the name of a class
when `@inject Logger log`, you would do something like this:

```typescript
import { createLogger, Logger } from '@jdl2/log';
import { KeyMap } from '@jdl2/log';
import { Injector } from '@jdl2/ioc';

export function configure(injector: Injector) {
    const loggerInstances = new KeyMap();
    function LoggerProvider(i: Injector, obj: object): Logger {
        return loggerInstances.getOrCreate(obj.constructor, () => createLogger(obj.constructor.name));
    }
    injector.bind(Logger).toProvider(LoggerProvider);
}
```
npm package: @jdl2/ioc-react
Description: This is ioc-react documentation
Latest version: 2.0.0-alpha.30

# ioc-react

This is ioc-react documentation

To configure injection in your React project, simply
create an `Injector` instance and pass it to an
`InjectorContext` component:

```typescript jsx
import * as React from 'react';
import { Injector } from '@jdl2/ioc';
import { InjectorContext } from '@jdl2/ioc-react';

// Create and configure an injector
const injector = new Injector();

export class App extends React.Component {
    render() {
        return (
            <InjectorContext injector={injector}>
                <div>... your app ...</div>
            </InjectorContext>
        );
    }
}
```
npm package: @jdl2/selectbox
Description: The Selectbox component renders a simple Selectbox based on user defined options.
Latest version: 2.0.0-alpha.30

# Selectbox

The Selectbox component renders a simple Selectbox based on user defined options.

```jsx static
const options = [{ value: 'A', label: 'A' }, { value: 'B', label: 'B' }];
const handleChange = (e: HTMLInputElement) => alert('changed to value: ' + e.value);

<Selectbox options={options} value={options[0].value} onChange={handleChange} />;
```
npm package: @jdl2/sidebar
Description: A sidebar goes by many different names (Material UI refers to "Drawer")
Latest version: 2.0.0-alpha.30

A sidebar goes by many different names (Material UI refers to "Drawer")

#### Example

```jsx
    <div style={{position:'relative',height:'40px'}}>
        <Sidebar
            main={
                <>
                    <Sidebar.AppLogo
                        icon={'U'}
                        brand={'Jenkins'}
                        name={'Design Language'}
                    />
                    <Sidebar.Item icon={'B'}>Branches</Sidebar.Item>
                    <Sidebar.Item icon={'C'}>Commits</Sidebar.Item>
                </>
            }
            footer={<Sidebar.Item icon={'F'}>Footer</Sidebar.Item>}
        />
    </div>
```
npm package: @jdl2/table
Description: The data table is a basic table used to display columnar data using a simple declarative syntax.
Latest version: 2.0.0-alpha.30

The data table is a basic table used to display columnar data using a simple declarative syntax.

Simply define as many `Table.Col` children with `header` and `cell` props to get a basic table:

```jsx static
<Table items={users}>
    <Table.Col header="Username" expand>{user => user.username}</Table.Col>
    <Table.Col header="Country">{user => user.country}</Table.Col>
</Table>
```

```jsx
const users = [
    {
        username: 'Joe',
        country: 'USA',
    },
    {
        username: 'Vincent',
        country: 'France',
    },
];
<Table items={users}>
    <Table.Col header="Username">{user => user.username} expand</Table.Col>
    <Table.Col header="Country">{user => user.country}</Table.Col>
</Table>;
```
npm package: @jdl2/utils
Description: ## FullScreen
Latest version: 2.0.0-alpha.30

# Utility Components

## FullScreen

Expands the content to fixed full screen.

```jsx
<FullScreen>This is content full screen</FullScreen>
```

## CenterInContainer

Centers content vertically and horizontally within the container.

```jsx
<CenterInContainer>This content will be centered vertically and horizontally</CenterInContainer>
```