@amber-engine/amber-content v1.4.1

Amber Lib (js)

A wonderful place for all of our shareable components! :information_desk_person:

• Shared components: No more copy-pasting. Share your components with the world (of Amber Engine)!
• Storybooks: Easily see what's available for your project by checking out the storybook. Run yarn start and navigate to http://localhost:6006!

API

• Components

Getting Started

Install amber-lib-js using yarn:

yarn add @amber-engine/amber-lib

There's some additional webpack configuration necessary noted in the Webpack Configuration section.

Need a Button component that adheres to our brand standard?

import { components } from 'amber-lib-js';
const { Button } = components;

Sweet!

Webpack Configuration

The amber-lib-js project should have all of its dependencies included in the project, but the library is simply transpiled by babel rather than completely bundled by webpack (usually you'll be doing this in your project).

Make sure you have a way to load the following:

Rather than including a specific path to resolve content included in amber-lib-js, you'll need to include these files via a regex in the Webpack loader.

Example (for SVG):

{
  test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/, /\.svg/],
  loader: require.resolve('url-loader'),
  exclude: [
    /icons/,
  ],
},
{
  test: /\.svg$/,
  include: [
    /icons/,
  ],
  use: [
    { loader: 'babel-loader' },
    {
      loader: 'react-svg-loader',
      options: { jsx: true },
    },
  ],
},

To see how things are being used in a real project, check out the Apollo project!

Development

Available Commands

Deploying Changes

After a change has been made and merged into master, you'll need to deploy your changes to npm.

Connecting your NPM Account

Create an npm account and login on your machine by running npm adduser.

You'll also need to be added to the Amber Engine npm organization, which will need to be done by an existing member.

Deploying to NPM

Build all packages by running yarn build followed up by yarn ship.

When running yarn ship, you'll be prompted with Lerna's deployment helper.

We should be following semver for all packages, which means that we should be making updates in the following format:

Adding a new package

The amber-lib-js project uses Plop to make generating new packages easy. Just run yarn plop and you'll be prompted for your package's name + what kind of project it is and it will automatically be created and configured in the workspaces directory.