open-index/open-npm huggingface dataset:
npm package: @siteone/builder-plugin-zopfli
Description: > plugin for preparing compressed assets with [`zopfli`](https://github.com/google/zopfli)
Latest version: 0.12.0

# @siteone/builder-plugin-zopfli

> plugin for preparing compressed assets with [`zopfli`](https://github.com/google/zopfli)

## Install

```sh
$ npm install --save-dev @siteone/builder-plugin-zopfli
```

> **Important:** Requires Node 8.x or above to work!

## Usage

_None – recognized by and attached to `@siteone/builder-core` automatically!_


## Config

Configurable via the `zopfli` key on your `bldr.config.js` file.

***Default Config:***

```js
exports.zopfli = {
  cache: true,
  threshold: 0,
  minRatio: 0.8,
  compressionOptions: {
    numiterations: 15
  }
}
```

***Available Options:***

See [Options](https://github.com/webpack-contrib/compression-webpack-plugin#options) for `compression-webpack-plugin`.

Also see [`universal-zopfli-js`'s Options](https://github.com/gfx/universal-zopfli-js#options) for the `compressionOptions` object.
npm package: @siteone/builder-preset-node
Description: > [Node](https://nodejs.org/) preset for [`bldr`]()
Latest version: 0.12.0

# @siteone/builder-preset-node

> [Node](https://nodejs.org/) preset for [`bldr`]()

## Install

```sh
$ npm install --save-dev @siteone/builder-preset-node
```

## Usage

_None – recognized by and attached to `@siteone/builder-core` automatically!_

## Config

_Takes no additional configuration._
npm package: @siteone/builder-preset-react
Description: > [React](https://reactjs.org/) preset for [`bldr`]()
Latest version: 0.12.0

# @siteone/builder-preset-react

> [React](https://reactjs.org/) preset for [`bldr`]()

## Install

> You must install React separately

```sh
$ npm install --save react react-dom
$ npm install --save-dev @siteone/builder-preset-react
```

## Usage

_None – recognized by and attached to `@siteone/builder-core` automatically!_

## Config

_Takes no additional configuration._
npm package: @siteone/eslint-config
Description: SiteOne eslint config package
Author: Jiří Cerhan jiri.cerhan@siteone.cz
Latest version: 3.0.4

# SiteOne ESLint config

This package includes the shareable ESLint configuration used by [SiteOne](https://www.siteone.cz). It's meant to be used on react projects.

It just takes recommended configuration from commonly used plugins and wrap's it up in one easy to use bundle. So we can maintain our eslint configuration in one place.

## Installation

```bash
yarn add eslint @siteone/eslint-config --dev
```

OR

```bash
npm install eslint @siteone/eslint-config --save-dev
```

## Configuration

Paste this in your .eslintrc.js

```javascript
/* eslintrc.js */
module.exports = {
  extends: [
    "@siteone/eslint-config/common",
    "@siteone/eslint-config/flow", // Remove if you are not using flow
    "@siteone/eslint-config/cssmodules", // Remove if you are not using css modules
  ],
};
```

Recommended prettier configuration

```javascript
/* .prettierrc */
{
  "tabWidth": 2,
  "useTabs": false,
  "semi": false,
  "singleQuote": true,
  "trailingComma": "all"
}
```

### Import aliases

This config uses `eslint-plugin-import` so if you are using import aliases you need to configure them like so:

```javascript
/* eslintrc.js */
const path = require("path");

module.exports = {
  extends: [
    "@siteone/eslint-config/common",
    "@siteone/eslint-config/flow",
    "@siteone/eslint-config/cssmodules",
  ],
  settings: {
    "import/resolver": {
      alias: [
        ["components", path.join(__dirname, "/src/components/")],
        // ...
      ],
    },
  },
};
```

So eslint-plugin-import can resolve imports like:

```javascript
/* src/components/Button.js */
export default function Button() {
  return <button>Click me</button>;
}

/* src/pages/index.js */
import Button from "components/button"; // instead of ../components/Button
```

More in [eslint-plugin-import docs](https://github.com/benmosher/eslint-plugin-import).

NOTE: This wont make your imports work it just tells eslint where to look for them while linting.
npm package: @siteone/media-library
Description: media library
Author: Jiří Cerhan & Jan Jarčík
Latest version: 0.13.0

# Media library search

## Example

```
import MediaLibrarySearchContainer from '@siteone/media-library'

const mediaFormatExample = [
  {
    // Component to show in list
    component: Thumbnail,
    // Are passed in list to list component specfied under 'compoenent' property
    props: {
      src: `https://picsum.photos/240/180?random=${i}`,
      alt: `picsum`,
      width: 120,
      height: 90,
    },
    // Name value pairs listed in preview
    details: {
      filename: `picsum`,
      alt: `picsum`,
      size: '1200px /  900px',
    },
    // Object passed to onConfirm method
    returnValue: {
      url: `https://picsum.photos/240/180?random=${i}`,
      alt: `picsum`,
      width: '240',
      height: '180',
    },
    // Unique key for list
    key: `key-1`,
  },
  ....
]

const getPage = (page: number, limit: number, searchParameters: Object) => {
  // Get your data here...
  // const data = ...
  return {
    media: data.currentPagedata
    count: data.count,
    hasNext: data.hasNext,
  }
}

const config = {
  search: [ //default empty
    {
      type: 'text',
      name: 'searchTerm',
      placeholder: 'Hledat obrázky..',
    },
  ],
  multiselect: false, //default false
  limit: 10 // Multiselect limit
}

const onConfirm = (media) => {
  console.log(media)
}

const MyCompoenent = props => <MediaLibrarySearchContainer getPage={getPage} config={config} onConfirm={onConfirm} />

// ...
```
npm package: @siteone/ory-content-plugin-carousel
Description: > Display carousel
Author: Jiří Cerhan
Latest version: 1.1.51

# ory-content-plugin-carousel

> Display carousel

## Jak plugin vložit do editoru

TODO

## Jak ho používat

TODO

## API docs

TODO

---

Vytvořil: (ory-content-plugin-carousel)[jiri.cerhan@siteone.cz]
npm package: @siteone/ory-content-plugin-carousel-graphql
Description: > Display carousel
Author: Jiří Cerhan
Latest version: 1.1.67

# ory-content-plugin-carousel

> Display carousel

## Jak plugin vložit do editoru

TODO

## Jak ho používat

TODO

## API docs

TODO

---

Vytvořil: (ory-content-plugin-carousel)[jiri.cerhan@siteone.cz]
npm package: @siteone/ory-content-plugin-example
Description: > Můj super plugin pro ovládnutí vesmíru
Author: Viktor Bezdek
Latest version: 1.1.36

# ory-content-plugin-example

> Můj super plugin pro ovládnutí vesmíru

## Jak plugin vložit do editoru

TODO

## Jak ho používat

TODO

## API docs

TODO

---

Vytvořil: (ory-content-plugin-example)[viktor.bezdek@siteone.cz]
npm package: @siteone/plugin-generator
Description: Generator for new ORY plugin
Author: adam bisek
Latest version: 1.1.0

# sao-plugin-generator

> Generator for new ORY plugin

## Usage

Install [SAO](https://github.com/saojs/sao) first.

```bash
yarn global add sao
# or
npm i -g sao
```

### From npm

```bash
sao plugin-generator my-project
```

### From git

```bash
sao adam bisek/sao-plugin-generator my-project
```

## License

MIT &copy; [adam bisek](github.com/adam bisek)
npm package: @siteone/react-address-suggester
Description: This is a solution for suggesting addresses. It is thin layer built on top of [react-autosuggest](https://github.com/moroshko/react-autosuggest), communicating with our address server.
Author: SiteOne: Adam Bisek
Latest version: 2.1.15

# Address Suggester
This is a solution for suggesting addresses.
It is thin layer built on top of [react-autosuggest](https://github.com/moroshko/react-autosuggest), communicating with our address server.

## Installation

Install this package and all peer dependencies.
```sh
yarn add @siteone/react-address-suggester
```

## Usage
```javascript
import Suggester from '@siteone/react-address-suggester'

<Suggester apiKey="abcde" onChange={(suggestion) => console.log("onChange", suggestion)} />
```

## API
This library has only one export - the Suggester component.

#### Suggester
- value: `string` the default input value for the suggester's text input (optional)
- onChange: `function` to be called after suggestion is selected
- apiKey: `string` API token given by our backend

All extra props will be passed to [react-autosuggest](https://github.com/moroshko/react-autosuggest) component
npm package: @siteone/react-analytics
Description: Set of tools to provide better analytics events
Author: Adam Bisek
Latest version: 1.0.11

# React analytics

Set of tools to provide better analytics events.

Sends actions to redux on desired events.

### ApolloServerRouter

Export consists of few HoC:
- ```withTrackOnPageView```: calls ONE TIME action from props ```props.analytics.send``` and binds every action in ```props.analytics```
- ```withTrackOnRender```: calls ON EVERY RENDER (debounced and prevented to call twice same event) action from props ```props.analytics.send``` and binds every action in ```props.analytics```
- ```withAnalytics```: not calling any event, only binds every action in ```props.analytics```

##### Example:
```javascript
import React from 'react'
import { withProps } from 'recompose'
import { withTrackOnPageView } from '@siteone/react-analytics'

const Component = ({ analytics }) => (
  <div>
    Hello World
    <button onClick={analytics.onClick}>Measure click!</button>
  </div>
)

const withAnalyticsData = withProps((props) => ({
  analytics: {
    // OPTIONAL: if you want do to fire event after data is loaded
    isReady: !props.countryData.loading,
    // "send" will be called automatically
    send: { type: 'TRACK_PAGEVIEW' }, // action may be action object to be dispatched to redux
    // OPTIONAL: you can define any variables (like "click") and their will be bounded to redux
    onClick: (...args) => { type: 'CLICK', ...args }, // it also accepts function, that will return action object
  }
}))

export default compose(withAnalyticsData, withTrackOnPageView)(Component)
```
Version: 1.3.6
npm package: @siteone/react-image-for-microservice
Description: React image component
Author: Viktor Bezdek
Latest version: 1.0.4

# @siteone/react-image-for-microservice
> React companion component for [image processing microservice](https://git.siteone.cz/frontend/img).


Takes image of any format and when browser supports it returns u webp format of that image. U can tell to miroservice how to take care of your image. Croping, scaling, blur, quality, rotating, flip sides

[Storybook](http://frack.git.siteone.cz/frack)
[Api doc](https://git.siteone.cz/frontend/img#usage)

<!-- 
## Installation

```sh
npm install @siteone/react-image-for-microservice --save
``` 
-->

## Usage example

```javascript
<ImageProvider microserviceUrl="https://img.frontend.company"> // somewhere at top level of app
  <Image
    rotate={50}
    progressive
    flip="x" // x || y
    quality={100} // quality of image in %
    src="https://upload.wikimedia.org/wikipedia/commons/d/d3/Michelangelo_Buonarroti_017.jpg" // img path
    blur={100} // quality of image in %
    scaleMode={scaleMode} // 'fit', 'downfit', 'upfit', 'fill', 'fill_auto', 'fill_center', 'fill_north', 'fill_northeast', 'fill_northwest', 'fill_east', 'fill_west', 'fill_south', 'fill_southeast', 'fill_southwest'
    width={500}
    height={500}
    alt="image description"
  />

    // ImageBox takes all params as Image expect alt, but instead of returning <img /> it will return as inlined backgroundImage
  <ImageBox tag="div" />
</ImageProvider>
```


<!-- 
## Development setup

Describe how to install all development dependencies and how to run an automated test-suite of some kind. Potentially do this for multiple platforms.

```sh
make install
npm test
```


-->
npm package: @siteone/react-server-router
Description: React server router.
Author: Adam Bisek
Latest version: 1.3.10

# Server Router

Router that is completely handled on backend.

Supports directly GraphQL (and also is compatible with for example REST)

### ApolloServerRouter

Declarative React component , that requires only two props:
- ```templates```: simple object, in keys are template names that gives us backend
- ```loadingComponent```: component that is shown while is router communicating with backend
- ```onChange (optional)``` function, that will be invoked when the route is about to re-render

##### Example (for GraphQL):
```javascript
import React from 'react'
import { MemoryRouter, Link, Switch } from 'react-router-dom'
import { ApolloProvider } from 'react-apollo'
import { ServerRouterApollo } from '@siteone/react-server-router'

const templatesMap = {
  DESTINATION: (data) => (<div {...data} />),
  HOMEPAGE: (data) => (<div {...data} />),
  404: (data) => (<div {...data} />),
  500: (data) => (<div {...data} />),
  503: (data) => (<div {...data} />),
  429: (data) => (<div {...data} />),
}

const loading = data => (<div>...loading...<br />{JSON.stringify(data.url)}</div>)

<ApolloProvider client={client}>
  <MemoryRouter>
    <div>
      <div>
        Top menu:
        <Link to="/">Home</Link>
        <Link to="/vole">Destinace: Hurghada</Link>
        <Link to="/kariera">Redir</Link>
        <Link to="/abdef">Error 404</Link>
      </div>
      <Switch>
        <ServerRouterApollo templates={templatesMap} loadingComponent={loading} />
      </Switch>
    </div>
  </MemoryRouter>
</ApolloProvider>
```

Version: 1.3.6
npm package: @siteone/serve-static
Description: Server for static projects which don't need SSR but could use all the other goodies.
Author: Viktor Bezdek
Latest version: 0.0.20

# `serve-static`

> Static app server with option to pass enviroment variables from `.env` files into the browser-only app in a little more secure way than just inlining them into html.

## CLI

### Usage

```sh
$ serve-static serve [options]
```

### Options

* `-v, --views`      
* * Path to views folder containing HTML files. Will use index.html for any route without extension. Looks for status code templates for edge cases (404.html, 500.html...)  (default `./build-static`)
* `-r, --publicRoot`        
* * Path to public root folder  (default `./build-static`)
* `-e, --env`        
* * Path to enviroment variables (`.env` file) which will be inlined into served html template  (default `./.env`)
* `-l, --logs`       
* * Path to logs  (default `./logs`)
* * Pass `false` to disable logging
* `-p, --port`       
* * Port to run server on  (default `8888`)
* `-h, --host`       
* * Application host  (default `0.0.0.0`)
* `-i, --include`    
* * Include only specified variables from env file to browser ex: `srvr-static --include=API_KEY,CLIENT_ID`
* `-h, --help`       
* * Displays this message

### Examples

```sh
$ serve-static srvr-static serve --views ./build-static --publicRoot ./build-static --env ./.env --logs ./logs --port 5050 --host 0.0.0.0 --include=API_KEY,CLIENT_ID
```
## Programmatic

### Usage

```js
const path = require('path')
const serveStatic = require('@siteone/serve-static')

const opts = { 
  views: path.resolve('./static'), 
  publicRoot: path.resolve('./static'), 
  env: path.resolve('./.env'), 
  logs: false, 
  host: '0.0.0.0',
  port: 8080, 
  include: ['NODE_ENV', 'API_KEY', 'WHATEVER']
}

serveStatic(opts)

```
npm package: @siteone/system-base-theme
Description: Base theme for SiteOne design system
Author: Viktor Bezdek
Latest version: 1.0.0


# @siteone/system-base-theme
[![package version](https://img.shields.io/npm/v/@siteone/system-base-theme.svg?style=flat-square)](https://npmjs.org/package/@siteone/system-base-theme)
[![package downloads](https://img.shields.io/npm/dm/@siteone/system-base-theme.svg?style=flat-square)](https://npmjs.org/package/@siteone/system-base-theme)
[![standard-readme compliant](https://img.shields.io/badge/readme%20style-standard-brightgreen.svg?style=flat-square)](https://github.com/RichardLitt/standard-readme)
[![package license](https://img.shields.io/npm/l/@siteone/system-base-theme.svg?style=flat-square)](https://npmjs.org/package/@siteone/system-base-theme)
[![make a pull request](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)

> Base theme for SiteOne design system

## Table of Contents

- [Install](#install)
- [Usage](#usage)
- [Contribute](#contribute)
- [License](#License)

## Install

This project uses [node](https://nodejs.org) and [npm](https://www.npmjs.com). 

```sh
$ npm install @siteone/system-base-theme
$ # OR
$ yarn add @siteone/system-base-theme
```

## Usage



## Contribute

1. Fork it and create your feature branch: `git checkout -b my-new-feature`
2. Commit your changes: `git commit -am "Add some feature"`
3. Push to the branch: `git push origin my-new-feature`
4. Submit a pull request

## License

MIT © [[object Object]]([object Object])
npm package: @siteone/system-components
Description: Essential components for SiteOne design system
Author: Viktor Bezdek
Latest version: 1.0.0

# @siteone/system-components

[![package version](https://img.shields.io/npm/v/@siteone/system-components.svg?style=flat-square)](https://npmjs.org/package/@siteone/system-components)
[![package downloads](https://img.shields.io/npm/dm/@siteone/system-components.svg?style=flat-square)](https://npmjs.org/package/@siteone/system-components)
[![standard-readme compliant](https://img.shields.io/badge/readme%20style-standard-brightgreen.svg?style=flat-square)](https://github.com/RichardLitt/standard-readme)
[![package license](https://img.shields.io/npm/l/@siteone/system-components.svg?style=flat-square)](https://npmjs.org/package/@siteone/system-components)
[![make a pull request](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)

> Essential components for SiteOne design system

## Table of Contents

-   [Install](#install)
-   [Usage](#usage)
-   [Contribute](#contribute)
-   [License](#License)

## Install

This project uses [node](https://nodejs.org) and [npm](https://www.npmjs.com). 

```sh
$ npm install @siteone/system-components
$ # OR
$ yarn add @siteone/system-components
```

## Usage

<!-- Generated by documentation.js. Update this documentation by updating the source code. -->

### size

Column width in cols - n of 12 (unless reconfigured)

### justifyContent

Block axis alignment

### flexDirection

Flex items placement direction

### alignItems

Cross axis alignment

### debug

Debug grid

### Col

Grid column

#### Parameters

-   `size`  {number} Number of grid columns to fill
-   `justifyContent`  {string} Block axis alignment
-   `flexDirection`  {string} Flex items placement direction
-   `alignItems`  {string} Cross axis alignment

Returns **React$Component** Grid column

## Contribute

1.  Fork it and create your feature branch: `git checkout -b my-new-feature`
2.  Commit your changes: `git commit -am "Add some feature"`
3.  Push to the branch: `git push origin my-new-feature`
4.  Submit a pull request

## License

MIT © SiteOne, contributors, sourced packages authors & contributors