Self Serve Components

This repository holds React components that are shared across Self Serve projects.

Create NPM account

Before you start development of the components, you need to create an account on NPM.

1. Go to the npm website and create an account.
2. Create an access token for your user (go to user profile).
3. Create an environment variable on your machine and expose the token: NPM_TOKEN = <your_access_token>.
4. Get access to the k3imagine organzation (ask Team Lead or Admin).

Running the project

npm install
npm run dev

Creating a new component

Create a new component

Create a new react component under src/components/{Basic|Structure}/{component-name}

Expose component in index.tsx

Add import {component-name} from './components/{Basic|Structure}/{component-name}/{component-name}'; and export it from there.

Write stories for the new component

We write stories for our components as a way to document them. If suitable we write a 'default' story that contains only required props. For each event we use the storybook Action addon. If a component contains many props to manipulate the component we can use the Knobs addon.

Using the components in our projects

Install

npm i @k3imagine/self-serve-components

Usage

import React from 'react';

import { MyComponent } from '@k3imagine/self-serve-components';

class Example extends React.Component {
  render() {
    return <MyComponent />;
  }
}