Workflows

Create Patterns

The Storefront comes included with a CLI to help you generate all necessary files for new patterns and register them, so they will show up in the Pattern library.

npx storefront create:pattern PatternName

npx storefront create:pattern Pattern1 Pattern2 Patten3

Add project specific colors/fonts/icons

This application comes with a default palette of colors, icons, and typography. The related configuration files can be found in the config/core directory.

We use these config files to generate CSS custom properties (found in patterns/core/BaseLayout/colors.styl) and render basic overviews in the pattern library (e.g. see library/internal/ColorView.js).

Of course, it is possible to override the default configuration with your own, project-specific colors, fonts, and icons. In the config directory you can find three empty files

colors.json
icons.json
fonts.json

These configuration files are empty by default, therefore the application uses the default configuration. As soon as you start adding your own colors, icons, or fonts to the empty configuration files, these will be used instead of the default files.

Colors

To add your own colors, configure config/colors.json. Each color has the following pattern:

"Primary": {
    "value": "#4F5967",
    "variableName": "--primary",
    "group": "core"
 },


`value`	must contain a valid CSS color. This can be a HEX color like in the example `#4F5967` but it can also be a rgba or even a gradient
`variableName`	is the name of the CSS variable we will provide. The above example could be used as `var(--primary)`
`group`	is only important for the Pali. If you navigate to the "Colors" area within the Pali you can see, that the colors are grouped. You can choose whatever name you want for a group

Fonts

For your own fonts, we expect your files to be placed within public/assets/fonts.

To add custom fonts, configure config/fonts.json. Each font has the following pattern:

"FiraSans Light": {
"family": "FiraSans",
"fileName": "FiraSans-Light",
"weight": 300,
"isItalic": false,
"fileTypes": ["woff2", "woff", "ttf"]
},

Based on this configuration our build process generates a fonts.styl file within patterns/core/BaseLayout. This file contains all CSS font-face we use in the project.

Within this file, the above configuration will result in this:

@font-face
  font-display fallback
  font-family FiraSans
  font-weight 300
  src url('/assets/fonts/core/FiraSans-Light.woff2') format('woff2'), url('/assets/fonts/core/FiraSans-Light.woff') format('woff'), url('/assets/fonts/core/FiraSans-Light.ttf') format('truetype')

Important note: When you add you own font family you'll have to change or override the --font-family-regular CSS variable from patterns/core/BaseLayout/variables.styl.

Icons

Icon files must be placed as SVG within public/assets/svgs.

To add custom icons, configure config/icons.json. Each icon has the following pattern:

"Shopping Cart": {
  "value": "cart"
},


`value`	is both the name of the file (`cart.svg`) and the value of the `symbol` property of the `Icon` component (e.g `<Icon symbol="cart"/>`)

Make use of base components

In order to reduce code duplications and to prevent us from writing components for common use cases over and over again we have some "Base components" which we use almost everywhere.

For example for headlines, buttons and text content: We don't want to define markup and CSS for these things in every pattern again and again if we know that they always look the same.

So take a look into these components:

<Heading /> for headlines
<CopyText /> for text content
<ConditionalLink /> if you might have an anchor, but it's also possible that you don't
<Button /> for any kind of button
<Icon /> for icons that you defined in the icon configuration (see Icons)

They cover some common cases.

Make use of base utility functions

Get image links

By default, we store images that are added via Makaira components either in an Amazon S3 Bucket or in Cloudinary. Usually images of products are stored there during the import into Makaira as well.

In order to get tie image links we have a utility function getImageLink which is defined within our <ConfigurationProvider />

Running Tests

Running test is very simple just enter npm run test

Building

Just push to the GitHub Repository in the stable branch - we will cover everything else.