open-index/open-npm huggingface dataset:
npm package: @launchpad5682/morpho-ui
Description: <h1 align="center">Morpho-UI</h1> <p align="center"><img src="./assets/logo.png" height="120px" align="center"/></p> <h2 align="center">Elegant, modular and easy-to-use react-based component library</h2> </center>
Author: launchpad5682
Latest version: 0.1.9

<h1 align="center">Morpho-UI</h1>
<p align="center"><img src="./assets/logo.png" height="120px" align="center"/></p>
<h2 align="center">Elegant, modular and easy-to-use react-based component library</h2>
</center>

### Tech Stack
![](https://img.shields.io/badge/TypeScript-007ACC?style=for-the-badge&logo=typescript&logoColor=white) 
![](https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react&logoColor=61DAFB)
![](https://img.shields.io/badge/storybook-FF4785?style=for-the-badge&logo=storybook&logoColor=white)
![](https://img.shields.io/badge/CSS3-1572B6?style=for-the-badge&logo=css3&logoColor=white)
![](https://img.shields.io/badge/GitHub_Actions-2088FF?style=for-the-badge&logo=github-actions&logoColor=white)

### Motivation
Building components repetitively is cumbersome and time-consuming. Building morpho-UI brings uniformity, reusability and less decision making in styling for all your projects. It contains the global styling which gives you variety of color choices and 
components like buttons, alerts are provided with 5 CTA(call to action) colors(red, green, blue, yellow, and pink).
### How to install? 
```npm i @launchpad5682/morpho-ui```
### Components:
- Alert
- Avatar
- Badge
- Button
- Card
- Chips
- Image
- Modal
- Snack Bar
- Tabs
- Typography
### Color Psychology: 
- Success/peaceful optimism: green
- Information: blue
- Danger or focus: red
- Warning or grab attention: yellow
- Excitement: pink
- Minimalistic sophistication: black

### References
* Start development server using ```npm start``` and  ```npm run storybook```.
* Bootstrapped storybook typescript using [TSDX](https://tsdx.io/).
* Deploy Storybook using [github actions](https://dev.to/kouts/deploy-storybook-to-github-pages-3bij).
* Altered default configuration using ts.config.js and added css imports with live changes with css [link](https://stackoverflow.com/questions/63285566/css-module-gets-bundled-but-is-not-referenced-using-tsdx-which-uses-rollup-under).
* User guide for [TSDX React w/ Storybook](https://github.com/jaredpalmer/tsdx/blob/master/templates/react-with-storybook/README.md).
* Made all the components accessible using ```index.tsx``` in ```src``` folder.
* Call to action color guide [link](https://aritic.com/blog/aritic-pinpoint/call-to-action-button-color-guide/).
### Workflow 
- Make changes, add version to the commit message to release a package.
- Make version update in ```package.json``` and push code using ```git push --follow-tags```.
npm package: @launchpadlab/babel-preset
Description: Shareable babel presets to use across projects.
Author: dpikt
Latest version: 2.1.1

# @launchpadlab/babel-preset

Shareable babel presets to use across projects.

## Usage:

```js
// .babelrc:

// To use a specific config
{
  presets: ['@launchpadlab/babel-preset/es6'],
}

// To use the default config (react)
{
  presets: ['@launchpadlab/babel-preset'],
}
```

This preset uses [@babel/preset-env](https://babeljs.io/docs/en/babel-preset-env) under the hood. To pass options down to that preset, you can pass an `env` option at the top level:
```js
{
  // Will skip module transformations
  presets: [['@launchpadlab/babel-preset', { env: { modules: false } }]],
}
```


## Migration Guides
- [v2.0.0](migration-guides/v2.0.0.md)
npm package: @launchpadlab/eslint-config
Description: Shareable eslint configs to use across projects.
Author: dpikt
Latest version: 3.0.1

# @launchpadlab/eslint-config

Shareable eslint configs to use across projects.

## Usage:

```js
// .eslintrc.js:

// To use a specific config
module.exports = {
  extends: '@launchpadlab/eslint-config/react',
}

// To use the default config (react-rails)
module.exports = {
  extends: '@launchpadlab',
}
```
npm package: @launchpadlab/lp-components
Description: Our Components
Author: Dave Corwin
Latest version: 10.1.0

[![NPM version](https://img.shields.io/npm/v/@launchpadlab/lp-components.svg?style=flat-square)](https://www.npmjs.com/package/@launchpadlab/lp-components)

# lp-components

Reusable UI components for React apps.

```jsx
import React from 'react'
import { Spinner } from '@launchpadlab/lp-components'

function MyLoadingComponent({ data }) {
  return data ? <div>{data}</div> : <Spinner />
}
```

This library contains components for status indicators, custom inputs, flash messages and more. A full list of available components can be found in the [documentation](#documentation) or in the [interactive component playground](http://lp-components.herokuapp.com).

## Documentation

Documentation and usage info can be found in [docs.md](docs.md).

## Migration Guides

- [v2.0.0](migration-guides/v2.0.0.md)
- [v3.0.0](migration-guides/v3.0.0.md)
- [v4.0.0](migration-guides/v4.0.0.md)
- [v5.0.0](migration-guides/v5.0.0.md)
- [v6.0.0](migration-guides/v6.0.0.md)
- [v7.0.0](migration-guides/v7.0.0.md)
- [v8.0.0](migration-guides/v8.0.0.md)
- [v9.0.0](migration-guides/v9.0.0.md)
- [v10.0.0](migration-guides/v10.0.0.md)

## Contribution

This package follows the Opex [NPM package guidelines](https://github.com/LaunchPadLab/opex-public/blob/main/gists/npm-package-guidelines.md). Please refer to the linked document for information on contributing, testing and versioning.

## Additional info

#### Size Limit

This library uses [size-limit](https://github.com/ai/size-limit) to prevent size bloat. The `yarn size` script is run in CI to check that the package size is under the limit specified in [.size-limit.js](.size-limit.js). For a visualization of this package's relative dependency sizes, you can run `yarn size --why`.

#### React Storybook

This library uses [React Storybook](https://getstorybook.io/) to render components in a development sandbox. In order to view the storybook, run `yarn run storybook` and navigate to the localhost port indicated.

_Every new component added to this library should be accompanied by a new story in the storybook._

When pull requests are submitted, a Heroku review app will be deployed containing the revised storybook so that reviewers can view the changes made.

#### DateInput styles

The `DateInput` component requires special styles in order to render correctly. These styles most be imported from the `react-datepicker` folder in `node_modules` and imported into your sass. To do this, make the following changes to your `webpack.config.js` and `application.scss`:

#### `webpack.config.js`:

Add a line near the top of the file specifying the path to the `react-datepicker` styles:

`const datePickerPath = path.resolve(__dirname, '../node_modules/react-datepicker/src/stylesheets')`

Then, add this path to the `includePaths` array of the sass loader:

```
{
    test: /.scss$/,
    loader: "sass",
    query: { includePaths: [ ... , datePickerPath ] }
}
```

#### `application.scss`:

Import the `react-datepicker` styles by adding this line:

`@import "datepicker";`
npm package: @launchpadlab/lp-form
Description: Extensions for the reduxForm HOC
Author: dpikt
Latest version: 2.10.1

[ ![Codeship Status for LaunchPadLab/lp-form](https://app.codeship.com/projects/75ee17e0-9003-0135-1d5e-36d54fbb9242/status?branch=master)](https://app.codeship.com/projects/250119)[![Test Coverage](https://api.codeclimate.com/v1/badges/faf27e9517e02b2b9399/test_coverage)](https://codeclimate.com/repos/59ee49cc0a62d60296000103/test_coverage)
[![npm version](https://badge.fury.io/js/%40launchpadlab%2Flp-form.svg)](https://badge.fury.io/js/%40launchpadlab%2Flp-form)

# lp-form
Extensions for the `reduxForm` HOC.

## Documentation 
Documentation and usage info can be found in [docs.md](docs.md).

## Migration Guides
- [v2.0.0](migration-guides/v2.0.0.md)

## Contribution
This package follows the Opex [NPM package guidelines](https://github.com/LaunchPadLab/opex/blob/master/gists/npm-package-guidelines.md). Please refer to the linked document for information on contributing, testing and versioning.
npm package: @launchpadlab/lp-redux-api
Description: redux middleware and api library
Author: Dave Corwin
Latest version: 7.0.0

[![npm version](https://badge.fury.io/js/%40launchpadlab%2Flp-redux-api.svg)](https://badge.fury.io/js/%40launchpadlab%2Flp-redux-api)

# lp-redux-api

Action creators and reducers for making API requests with redux.

```jsx
// Define an API action

import { createRequest } from '@launchpadlab/lp-redux-api'

const fetchUser = createRequest('FETCH_USER', (id) => ({
  url: '/users/' + id,
}))

// Dispatch the action from a component (mapDispatchToProps not shown)

function Component({ fetchUser }) {
  return <button onClick={() => fetchUser(5)}> Fetch user with id: 5 </button>
}

// Store the response in a reducer

import { handleActions } from 'redux-actions'
import { setOnSuccess } from '@launchpadlab/lp-redux-api'

const reducer = handleActions(
  {
    [fetchUser]: setOnSuccess('user'),
  },
  {}
)

// state.user will contain the response when the request completes.
```

The key functions in this library are:

- `createRequest(key, requestInfo)` - this function allows you to define a redux action that makes an API request asynchronously. By default, API requests are made using [lp-requests](https://github.com/LaunchPadLab/lp-requests), although this is configurable.

- `setOnSuccess(path) | setOnFailure(path)` - these functions allow you to easily store the responses of API actions in your redux store.

Additional usage information, as well as a list of other helpers this library provides, can be found in the [documentation](#documentation).

## Documentation

Documentation and usage info can be found in [docs.md](docs.md).

## Migration Guides

- [v5.0.0](migration-guides/v5.0.0.md)
- [v6.0.0](migration-guides/v6.0.0.md)
- [v7.0.0](migration-guides/v7.0.0.md)

## Contribution

This package follows the Opex [NPM package guidelines](https://github.com/LaunchPadLab/opex/blob/master/gists/npm-package-guidelines.md). Please refer to the linked document for information on contributing, testing and versioning.
npm package: @launchpadlab/lp-redux-utils
Description: redux helpers
Author: David Pickart
Latest version: 1.3.3

[![npm version](https://badge.fury.io/js/%40launchpadlab%2Flp-redux-utils.svg)](https://badge.fury.io/js/%40launchpadlab%2Flp-redux-utils)

# lp-redux-utils

A collection of utility functions for redux applications. These helpers can help reduce boilerplate when accomplishing common redux tasks. Designed to be used in tandem with [redux-actions](https://github.com/redux-utilities/redux-actions).

The key helpers in this library are:

- `setState(path)`: set a value in state when an action is dispatched.
- `unsetState(path)`: clear a value in state when an action is dispatched.
- `selectorForSlice(path)`: create a `select` function that can be used to create nested selectors for a path.

```js
import { setState, selectorForSlice } from '@launchpadlab/lp-redux-utils'
import { createAction, handleActions } from 'redux-actions'

// Generic setter from redux-actions
const setUser = createAction('SET_USER')

const reducer = handleActions(
  {
    // Set a value in state when the action is dispatched
    [setUser]: setState('stuff.user'),
  },
  {}
)

// Create selectors for nested values
const select = selectorForSlice('stuff')
const userSelector = select('user')

// userSelector(state) -> <value at stuff.user>
```

## Documentation

Documentation and usage info can be found in [docs.md](docs.md).

## Contribution

This package follows the Opex [NPM package guidelines](https://github.com/LaunchPadLab/opex/blob/master/gists/npm-package-guidelines.md). Please refer to the linked document for information on contributing, testing and versioning.
npm package: @launchpadlab/lp-requests
Description: Request helpers
Author: dpikt
Latest version: 4.3.0

[![NPM version](https://img.shields.io/npm/v/@launchpadlab/lp-requests.svg?style=flat-square)](https://www.npmjs.com/package/@launchpadlab/lp-requests)

# lp-requests

Promise-based helpers for making HTTP requests.

```js
import { api, configureApi } from '@launchpadlab/lp-requests'

// Make a request
api
  .get('/user', { query: { id: 1 } })
  .then((response) => {
    // handle success
  })
  .catch((error) => {
    // handle error
  })

// Configure defaults
const externalApi = configureApi({
  root: 'https://my-external-api/',
  mode: 'cors',
})

externalApi.get('/user', { query: { id: 1 } })
// -> makes a request to https://my-external-api/user?id=1
```

A full list of available request options may be found in the [documentation](#documentation).

## Relation to axios

`lp-requests` serves the exact same function as [axios](https://github.com/axios/axios)- that is, it provides a thin wrapper around the [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API). Once `axios` has become appropriately stable, it may be used as a replacement for `lp-requests`.

## Documentation

Documentation and usage info can be found in [docs.md](docs.md).

## Migration Guides

- [v4.0.0](migration-guides/v4.0.0.md)

## Contribution

This package follows the Opex [NPM package guidelines](https://github.com/LaunchPadLab/opex/blob/master/gists/npm-package-guidelines.md). Please refer to the linked document for information on contributing, testing and versioning.
npm package: @launchpadlab/lp-stimulus-components
Description: Stimulus components for Ruby on Rails projects
Author: LaunchPad Lab
Latest version: 1.0.0

# lp-stimulus-components
Stimulus components for Ruby on Rails projects.

## Contributing

### Local Workflow

**Apps using Importmaps**

To test the package locally on another application, you can run a local server to make the package contents available

- Run `$ yarn start` to serve `index.js` on port `4000`
- In the Rails application using import maps, pin `lp-stimulus-components` to `http://localhost:4000/index.js`:
```
# config/importmap.rb
pin "lp-stimulus-components", to: "http://localhost:4000/index.js"
```
- Import and use functions provided by `lp-stimulus-components` in the JavaScript files for your Rails app
```
// application.js
import { helloWorld } from 'lp-stimulus-components'
```

**Apps With a Build Step**

For applications using a build step (e.g. esbuild) you can add a symlink to this package during development

- Run `yarn link` in the `lp-stimulus-components` project root directory
- Run `yarn link lp-stimulus-components` in your sample Rails application
- You should see the package appear in the Rails app's `node_modules/` folder
- Import and register the stimulus controller you are testing
- Connect the imported controller to your HTML element using the data-controller attribute

```js
// app/javascript/controllers/index.js
import { SampleController } from "lp-stimulus-components"
application.register("sample", SampleController)
````

```html
<div data-controller="sample">
  <!-- ... -->
</div>
```
npm package: @launchpadlab/lp-utils
Description: Our Utilities
Author: Dave Corwin
Latest version: 2.16.1

*WARNING: This package is deprecated and is no longer supported. Use [lp-hoc](https://github.com/LaunchPadLab/lp-hoc) instead.*

---

[ ![Codeship Status for LaunchPadLab/lp-utils](https://app.codeship.com/projects/54a4f610-ec93-0134-81d5-1ac2cf405306/status?branch=master)](https://app.codeship.com/projects/208365) [![Code Climate](https://codeclimate.com/repos/58cc18b439f0e80291000106/badges/3b5fda5d0356fd73a175/gpa.svg)](https://codeclimate.com/repos/58cc18b439f0e80291000106/feed) [![Test Coverage](https://codeclimate.com/repos/58cc18b439f0e80291000106/badges/3b5fda5d0356fd73a175/coverage.svg)](https://codeclimate.com/repos/58cc18b439f0e80291000106/coverage)

# LP Utils
A set of utility functions and higher order components (HOC) for use in React and Redux apps.

## Documentation 
Documentation and usage info can be found in [docs.md](docs.md).

## Contribution
This package follows the Opex [NPM package guidelines](https://github.com/LaunchPadLab/opex/blob/master/gists/npm-package-guidelines.md). Please refer to the linked document for information on contributing, testing and versioning.
npm package: @launchpadlab/prettier-config
Description: Shareable [Prettier](https://prettier.io) config to use across projects.
Author: dpikt
Latest version: 2.0.1

# `@launchpadlab/prettier-config`

Shareable [Prettier](https://prettier.io) config to use across projects.

## Usage

**Install**:

```bash
$ yarn add --dev @launchpadlab/prettier-config
```

**Edit `package.json`**:

```jsonc
{
  // ...
  "prettier": "@launchpadlab/prettier-config"
}
```

**or a configuration file (eg `.prettierrc`):**

```js
"@launchpadlab/prettier-config"
```