open-index/open-npm huggingface dataset:
npm package: @happyfresh/bottom-sheet
Description: HappyFresh UI components that is a bottom-sheet
Author: HappyFresh
Latest version: 1.14.5

# BottomSheet

A React component that is a BottomSheet. New version will be featured with header in bottomsheet

## Installation

```sh
yarn add @happyfresh/bottom-sheet
```

## Usage

```javascript
import React, { useState } from 'react';
import { BottomSheet } from '@happyfresh/bottom-sheet';
import { css } from 'emotion';

export default {
  title: 'BottomSheet',
};

export const BottomSheetBasic = () => {
  const [open, setOpen] = useState(false);

  const handleRequestClose = () => {
    setOpen(false);
  };

  return (
    <div>
      <button onClick={() => setOpen(true)}>Open!</button>
      <BottomSheet open={open} onRequestClose={handleRequestClose} withCloseButton styles={{
          close: {
            top: 0
          }
        }}>
        <div>your child components here</div>
      </BottomSheet>
    </div>
  );
};

```
npm package: @happyfresh/card
Description: HappyFresh UI components that is a card
Author: HappyFresh
Latest version: 1.7.0

# Card

Card component is consists of Card, CardBody, CardFigure, and CardTitle. for usage example please kindly look at card.stories.js

## Installation

```sh
yarn add @happyfresh/card
```

## Usage

```javascript
// Write core usage example here
```
npm package: @happyfresh/cloudtester
Description: cloudtester ===========
Latest version: 0.0.2

cloudtester
===========



[![oclif](https://img.shields.io/badge/cli-oclif-brightgreen.svg)](https://oclif.io)
[![Version](https://img.shields.io/npm/v/cloudtester.svg)](https://npmjs.org/package/cloudtester)
[![Downloads/week](https://img.shields.io/npm/dw/cloudtester.svg)](https://npmjs.org/package/cloudtester)
[![License](https://img.shields.io/npm/l/cloudtester.svg)](https://github.com/happy/cloudtester/blob/master/package.json)

<!-- toc -->
* [Usage](#usage)
* [Commands](#commands)
<!-- tocstop -->
# Usage
<!-- usage -->
```sh-session
$ npm install -g @happyfresh/cloudtester
$ cloudtester COMMAND
running command...
$ cloudtester (-v|--version|version)
@happyfresh/cloudtester/0.0.2 linux-x64 node-v14.10.1
$ cloudtester --help [COMMAND]
USAGE
  $ cloudtester COMMAND
...
```
<!-- usagestop -->
# Commands
<!-- commands -->
* [`cloudtester help [COMMAND]`](#cloudtester-help-command)
* [`cloudtester task-kill`](#cloudtester-task-kill)

## `cloudtester help [COMMAND]`

display help for cloudtester

```
USAGE
  $ cloudtester help [COMMAND]

ARGUMENTS
  COMMAND  command to show help for

OPTIONS
  --all  see all commands in CLI
```

_See code: [@oclif/plugin-help](https://github.com/oclif/plugin-help/blob/v3.2.0/src/commands/help.ts)_

## `cloudtester task-kill`

describe the command here

```
USAGE
  $ cloudtester task-kill

OPTIONS
  -h, --help                 show CLI help
  -l, --logLevel=info|debug  set the log level

EXAMPLE
  $ cloudtester begin
  hello world from ./src/hello.ts!
```

_See code: [src/commands/task-kill.ts](https://github.com/happyfresh/cloudtester/blob/v0.0.2/src/commands/task-kill.ts)_
<!-- commandsstop -->
npm package: @happyfresh/grid
Description: HappyFresh UI components that is a grid
Author: HappyFresh
Latest version: 1.6.0

# Grid

Grid based on the flex display property. Grid packages consists of Container, Row, and Column. This grid system support responsive divs based on 3 breakpoints: mobile (width < 768px), tablet (768 > width < 992), and desktop (width > 992). You can also insert styles props if you want to override current css.

source: http://flexboxgrid.com/ with a few modification.

## Installation

```sh
yarn add @happyfresh/grid
```

## Usage

```javascript
import { Container, Column, Row } from '@happyfresh/grid';

export const Example = () => (
  <React.Fragment>
    <Container fluid styles={{backgroundColor: 'black'}}>
      <Row styles={{backgroundColor: 'white'}}>
        <Column sm={12} md={6} lg={3}>
          <Row>
            <Column sm={12} md={6} lg={6} className='start-md end-lg'>
              text
            </Column>
            <Column sm={12} md={6} lg={6} className='start-md end-lg'>
              text
            </Column>
          </Row>
        </Column>
        <Column reverse sm={12} md={6} lg={3}>
          <Row className='center-sm start-md end-lg'>Another text2.</Row>
          <Row>Another text3.</Row>
        </Column>
        <Column sm={12} md={6} lg={3}>
          <Row>Another text2.</Row>
        </Column>
        <Column sm={12} md={6} lg={3}>
          <Row>Another text2.</Row>
        </Column>
      </Row>
    </Container>
    <Container fluid>
      <Row>
        Another short text.
      </Row>
    </Container>
  </React.Fragment>
)
```
npm package: @happyfresh/layout
Description: HappyFresh UI components that is a layout
Author: HappyFresh
Latest version: 1.4.0

# Layout

Layout is used for managing UI layouts. They are used in item list, scrolling elements and global viewport layout.

## Installation

```sh
yarn add @happyfresh/layout
```

## Usage

```javascript
import { css } from 'emotion';
import { HorizontalList } from '@happyfresh/layout';

const SampleCard = (props) => (
  <div
    className={css`
      width: 120px;
      height: 120px;
      border-radius: 4px;
      background: hotpink;
    `}
    {...props}
  />
);

export const StoreList = () => (
  <HorizontalList>
    {Array(16)
      .fill('')
      .map(() => (
        <>
          <SampleCard style={{ marginBottom: '8px' }} />
          <SampleCard />
        </>
      ))}
  </HorizontalList>
);
```
npm package: @happyfresh/spinner
Description: HappyFresh UI components that is a spinner
Author: HappyFresh
Latest version: 2.2.0

# Spinner

Spinner animation for loading/data fetching. This current version only available for one size (16x16)px. You can also insert color props and/or styles props to override css.

## Installation

```sh
yarn add @happyfresh/spinner
```

## Usage

```javascript
import React from 'react';
import { Spinner } from './src/index';

export const Example = () => (
  <React.Fragment>
    <Spinner styles={{ padding: '16px' }}/>
    <Spinner color='green' styles={{ padding: '16px' }}/>
  </React.Fragment>
);
```
npm package: @happyfresh/stepper
Description: HappyFresh UI components that is a stepper
Author: HappyFresh
Latest version: 1.11.1

# Stepper

Stepper for Happyfresh components. Stepper consists of two type of stepper, which is vertical and horizontal (default) stepper. To use stepper user needs to insert props array of steps, and count of completed steps. In every step consist two different state, incomplete and complete.

## Installation

```sh
yarn add @happyfresh/stepper
```

## Usage

```javascript
import { Stepper } from '@happyfresh/stepper';

const stepsMock = [
  {
    description: 'Order confirmed! - June 23, 6:12 PM',
    state: 'completed'
  },
  {
    description: 'Order prepared - Today, 12:08 PM',
    state: 'completed'
  },
  {
    description: 'Already picked up  - Today, 1:12 PM',
    state: 'completed'
  },
  {
    description: 'Delivering',
    state: 'incomplete'
  },
  {
    description: 'Order delivered',
    state: 'incompletes'
  },
];

export const StepperBasic = () => (
  <>
    <Stepper steps={stepsMock} vertical completed={3}/>
    <Stepper steps={stepsMock}/>
  </>
```
npm package: @happyfresh/theming
Description: HappyFresh UI components that is a theming
Author: HappyFresh
Latest version: 1.11.0

# Theming

This packages contain variables for @happyfresh modules

## Installation

```sh
yarn add @happyfresh/theming
```

## Usage

```javascript

import { variables } from '@happyfresh/theming'

const { colors, radius, spacers, breakpoints, layers } = variables

```
npm package: @happyfresh/typography
Description: HappyFresh UI components that is a typography
Author: HappyFresh
Latest version: 1.7.0

# Typography

Typography packages contains Heading, span (as subtile) and paragraph. Subtitle and paragraph has two types while Heading is consists of H1, H2, H3, H4, H5, H6

## Installation

```sh
yarn add @happyfresh/typography
```

## Usage

```javascript
import React from 'react';
import { typography} from './src/index';

const { H1, H2, H3, H4, H5, H6, P, Subtitle } = typography;

export const TypographyBasic = () => (
  <React.Fragment>
    <H1>
      Heading 1
    </H1>
    <H2>
      Heading 2
    </H2>
    <H3>
      Heading 3
    </H3>
    <H4>
      Heading 4
    </H4>
    <H5>
      Heading 5
    </H5>
    <H6>
      Heading 6
    </H6>
    <Subtitle kind='primary'>
      Subtitle 1 (primary) 
    </Subtitle>
    <Subtitle kind='secondary'>
      Subtitle 2 (secondary)
    </Subtitle>
    <P kind='primary'>
      Paragraph 1 (primary)
    </P>
    <P kind='secondary'>
      Paragraph 2 (secondary)
    </P>
  </React.Fragment>
);
```