Snabcomponents

A set of generic components that should be used on the platform.

Getting Started

Prerequisites

npm (Node Package Manager)
bit (bit-bin)

Installing

NPM

For installing NPM follow the installation instruction on : https://www.npmjs.com/get-npm

Bin

npm i -g bit-bin

For more and detailed information see: https://docs.bitsrc.io/

Dependencies:

npm i

Run tests

To run the tests, type

npm test

Write tests

To write your own tests, create a subdirectory called __tests__ inside the directory of your component. The test files should be names like:

[test-name].test.tsx

Here's a small mock-up for a test:

// mockup.test.tsx
import * as React from 'react';
import Component from '../index';
import { shallow } from 'enzyme';

describe('Component', () => {
  it('renders', () => {
    const wrapper = shallow(
      <Component/>
    );

    /* actual test setup */

    expect(1).toEqual(1);
  });
});

Storyboard

npm run storyboard

it runs on port: 9001 by default

for implementation details see the 'package.json', scripts object

Add a component to remote bit repository

Open a terminal a navigate to the root directory of the project:

cd path/to/snabcomponents

Add to local bit repository

Add the new or modified component to your local bit repository:

bit a -i componentID path/to/Component

Add component dependencies

Show the current status. If the status is ok, you can proceed with tagging your component. Else you probably need to add dependencies, that are outside of your component folder (e.g. styles/master.scss). Add these dependecies to your component repository:

bit a path/to/other/components -i componentID

Important: Use the same componentID as before. Else, you'd add a second component, which is probably not what you want.

Tagging your component

Add the component to a new remote version and give it a version number:

bit tag -a -mi

Export to remote bit repository

Export your component to the remote bit repository. louho.snabcomponents is the name of the scope we are saving the components in.

bit e louho.snabcomponents

Example

bit add -i inputs/button -e src/components/inputs/Button/showcase.tsx src/components/inputs/Button
bit tag -a -mi
bit export louho.snabcomponents

Add your component to snabproj

Install the component in snabproj. Insert componentID from above and replace any '/' (slash) with a '.' (dot).

docker-compose exec web yarn add @bit/louho.snabcomponents.componentID

Example

For example, if you componentID was inputs/button, your install command would be:

docker-compose exec web yarn add @bit/louho.snabcomponents.inputs.button