npm package: @partslogic/pages
Description: React components for SunHammer
Author: Oscar Mauricio Yepes Morato
Latest version: 0.0.32-pre-alpha.0

## Deprecation notice
This library is deprecated, all components and logic was moved to [@partslogic/ui](https://www.npmjs.com/package/@partslogic/ui) repository.
***

# Partslogic

`@partslogic/pages` is a library of [React](https://reactjs.org/) components that helps you build e-commerce sites faster and easier.

This library privides fully functional pages, like a SearchPage.

At this moment we don't support customization via properties, if you want to build your page using our components, please have a look at [sunhammer](https://ui.sunhammer.io/) library.

## Installation

`@partslogic/pages` is available as an [npm package](https://www.npmjs.com/package/@partslogic/pages).

```
// with npm
npm i @partslogic/pages

// with yarn
yarn add @partslogic/pages
```

Please note that react >= 17.0.1 and react-dom >= 17.0.1 are peer dependencies. So you need to install those libraries as well.

- If you are using a bundler like [webpack](https://webpack.js.org/) you can install react in this way:

```
// with npm
npm i react react-dom

// with yarn
yarn add react react-dom
```

You can also use the react [CDN](https://reactjs.org/docs/add-react-to-a-website.html#tip-minify-javascript-for-production) to add react to your application if you are not using a bundler:

```
<script src="https://unpkg.com/react@17/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js" crossorigin></script>
```

## Usage

**IMPORTANT:** To use the SearchPage component, you will need a FitmentSelector `groupId`.

## ESM modules

As early as possible in your application, require and configure your `API_KEY`:

```
import { config } from @partslogic/pages;
config({APY_KEY: "Your api key"})
```

Then you can import pages and styles:

```
// Import pages using absolute path
import { SearchPage } from @partslogic/pages;
// Using relative path per page
import SearchPage from @partslogic/pages/build/SearchPage';

// Import all styles
import '@partslogic/pages/build/index.css';
// Import styles per page
import '@partslogic/pages/build/SearchPage/index.css';
```

```
import React from 'react';
import ReactDOM from 'react-dom';
import SearchPage from '@partslogic/pages/build/SearchPage';

function App() {
  return (
    <SearchPage groupId="{FITMENT_SELECTOR_GROUP_ID}" />);
}

ReactDOM.render(<App />, document.querySelector('#app'));
```

## CDN

You can add `@partslogic/pages` as a `<script>` tags:

```
<!-- All pages and all styles -->
<script crossorigin src="https://unpkg.com/@partslogic/pages@0.0.32-pre-alpha.0/build/index.umd.js" />
<link href="https://unpkg.com/@partslogic/pages@0.0.32-pre-alpha.0/build/index.css" rel="stylesheet" type="text/css" />
<!--  Add a specific page -->
<script crossorigin src="https://unpkg.com/@partslogic/pages@0.0.32-pre-alpha.0/build/[COMPONENT]/index.umd.js" />
<link href="https://unpkg.com/@partslogic/pages@0.0.32-pre-alpha.0/build/[COMPONENT]/index.css" rel="stylesheet" type="text/css" />
```

As early as possible in your application, require and configure your `API_KEY`:

```
window.PartslogicPages.config({ API_KEY: 'YOUR_API_KEY' });
```

Add a div with the id you want to use as container for your component, in this example is `#search-page`.

```

const searchPageContainer = document.querySelector('#search-page');
const SearchPage = window.PartslogicPages.SearchPage;
ReactDOM.render(
React.createElement(SearchPage, {
  groupId: "{FITMENT_SELECTOR_GROUP_ID}"
}),
searchPageContainer
);

```

## Styles (css)

You can customize styles using classes with the prefix `Pl-` and `Sui-`.
Example:

```
.Pl-SearchPage--container
.Pl-filter-results--button
.Sui-ListControls--container
```

## List of pages


  * SearchBar
  
  * SearchPage
  

## Customization

You can customize components using CSS.