Snabcomponents NPM

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