open-index/open-npm huggingface dataset:
npm package: @i-aspect/crisp
Description: Crossretail's components & scripts package
Latest version: 0.14.4

# Crisp Design System

[![Conventional Commits](https://img.shields.io/badge/Conventional%20Commits-1.0.0-yellow.svg)](https://conventionalcommits.org)
[![types: TypeScript](https://img.shields.io/badge/types-TypeScript-blue.svg)](https://github.com/microsoft/TypeScript)
[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
[![npm bundle size](https://img.shields.io/bundlephobia/minzip/@i-aspect/crisp)](https://bundlephobia.com/result?p=@i-aspect/crisp)

Crossretail's components & scripts package


# Run Storybook

Open `crisp-design-system` folder in terminal and run `npm run doc:storybook`. 


# Update Storybook

### Step 1: Update NPM

Open `crisp-design-system` folder in terminal and run `npm install`.

### Step 2: Package upgrade

Open `crisp-design-system/storybook` folder in terminal and run `npx npm-check-updates '/storybook/' -u && npm install`.

### Step 3: Run Storybook

Open `crisp-design-system` folder in terminal and run `npm run doc:storybook`.


# Commit changes

1. Stage changes in code program.
2. Open terminal and run `git cz`.
3. Select type of change.
4. Type scope of change (filename).
5. Type commit message.
6. Extended commit message (optional).
7. Answer the next 2 questions (yes / no).
8. Run `git push`.


# Zeplin integration

Install Zeplin CLI by running `npm install -g @zeplin/cli`.

After that's done, run `zeplin connect`.


# Publishing Changes to NPM

To make your changes available to users of the npm package, follow these steps:

### Step 1: Build and Test
```bash
npm run build
npm test
```

### Step 2: Version Bump
```bash
npm version patch  # For bug fixes (0.14.1 → 0.14.2)
npm version minor  # For new features (0.14.1 → 0.15.0)
npm version major  # For breaking changes (0.14.1 → 1.0.0)
```

### Step 3: Publish
```bash
git push --follow-tags origin master && npm publish
```

**Note:** Make sure you're logged in to npm (`npm whoami`) before publishing.


# The ESM bundle is untranspiled

Make sure to add this module to your include list so it can be transpiled

**Webpack:**

```js
module: {
    rules [
        {
            test   : /\.js[x]?$/,
            use    : jsLoaders,
            exclude: /node_modules\/(?!(@i-aspect\/crisp))/,
        },
        {
            test   : /\.ts[x]?$/,
            use    : tsLoaders,
            exclude: /node_modules\/(?!(@i-aspect\/crisp))/,
        },
    ]
}
```
npm package: @i-c5/react-preloader
Description: ### Installation
Author: C5
Latest version: 0.0.5

# React Preloader

### Installation

`npm i @i-c5/react-preloader`

or

`yarn add @i-c5/react-preloader`

### Usage

```
import Preloader from @i-c5/react-preloader

export default function SomeFunction(){
    return(
        <>
            <Preloader duration={3000} />
        </>
    )
}
```
npm package: @i-c5/react-ui-blocker
Description: A UI blocker in react.
Author: C5
Latest version: 1.2.2

# React UI Blocker

Block UI interaction on your React App.

## [See Demo Here](https://react-ui-blocker-doc.vercel.app/)

### Installation

`npm i @i-c5/react-ui-blocker`

or

`yarn add @i-c5/react-ui-blocker`

### Usage

```
import UiBlocker from @i-c5/react-ui-blocker

export default function SomeFunction({ children}){

    <UiBlocker block="true">
        {children}
    </UiBlocker>

}
```