mercarto-ui-library v1.0.0

UI Library

Setup

cd ui-library
yarn

Testing

yarn test

Building

yarn build

Usage

General usage

The default export for the UI Library is the components which are available for the user to build their app. The export is an object, where each key is also a React Component:

import AvailableComponents from 'ui-library'

Object.keys(AvailableComponents).forEach(key => {
  console.log('Component name', key);
  console.log('The renderable Component', AvailableComponents[key])
})

The exported getAvailableComponents function, expects to be passed the page (one of homepage, plp, pdp or blog) and will then return only the components available for that page:

import { getAvailableComponents } from 'ui-library'

const availableComponents = getAvailableComponents('homepage')

Object.keys(availableComponents).forEach(key => {
  console.log('Component name', key);
  console.log('The renderable Component', availableComponents[key])
})

All available components are also available via the destructuring method:

import { DragOrDropComponent, ProductList, ... } from 'ui-library'

The idea behind this is, any components which should be available to the user for editing their site would be within the default export object, or by using getAvailableComponents.

Others are purely for use by developers.

Metadata

Each component also has meta-data associated with it.

An allowedPages array, a defaultProps object and an optional maximumPerPage number:

Object.keys(availableComponents).forEach(key => {
  const { allowedPages, defaultProps, maximumPerPage } = availableComponents[key]
  console.log(allowedPages)
  /*
    ['homepage', 'pdp', 'plp']
  */
  console.log(defaultProps)
  /*
    {
      config: { // The component specific configuration
      },
      ...otherProps // Any other default props configured
    }
  */
 console.log(maximumPerPage)
  /*
    1
  */
})

DragOrDropComponent

To use the DragOrDropComponent, you will need to add the provider as the highest parent in your app's root component. e.g.:

// App.js

import React from 'react'
import { DragOrDropProvider } from 'ui-library'

const App = () => (
  <DragOrDropProvider>
    // rest of your app
  </DragOrDropProvider>
);

export default App

Using Locally

In this repo:

yarn link

In the repo you want to use it in:

yarn link "ui-library"

And add the following to your package.json dependencies:

"ui-library": "file:../ui-library"

To prevent the Invalid Hook Call Warning when using yarn link, you will need to have this repo use your app's react instance:

npm link ../app-name/node_modules/react

Alternatively, you can use webpack to resolve the conflicting modules. For example with Create React App: https://github.com/facebook/create-react-app/issues/6953#issuecomment-496725439

Assets

Files in the assets directory are converted into datauri strings and stored as a key/value object in the assets file, by the build process. Which makes using them more portable.

Themes

The themes are available as a Javascript object of CSS strings in dist/themes.js.

The themes provide CSS webfonts. Which expect the font files to be in the front-end app available at /fonts/font-name/font-file.woff