Jogogo Custom Components :rocket:

(Mostly) Stateless React Components.

Getting Started

Installing

Install the package from NPM.

yarn add jogogo-components

Import the required component within your files.

import {Checkbox} from 'jogogo-components';

Also, import the required LESS within your styles.

@import `~jogogo-components/lib/Spinner/Spinner`;

Documenting Components

To document a component, use the JSDoc-style /** */ markup which is recognized by Storybooks.

• Above the interface properties, write some lines describing the porperty.
• Above the class, write a title or a short description of the class.

import * as React from 'react';

/**
 * Checkbox properties.
 */
export interface Props {
  /** Describes if the checkbox is checked (true) or not (false) */
  checked: boolean;
  /** onChange handler executed when the Checkbox is clicked */
  onChange: (nextState: boolean) => void;
  /** Describes if the checkbox is unclickable (true) or functional (false). Default is false */
  disabled?: boolean;
};

/**
 * Form Checkbox.
 */
class Checkbox extends React.Component<Props> {
  constructor(props: Props) {
    super(props);
    this.onChange = this.onChange.bind(this);
  }

  render(): React.ReactNode {
    return <input
      type="checkbox"
      checked={this.props.checked}
      onChange={(e) => this.onChange(e.target.checked)}
      disabled={this.props.disabled || false}
    />
  }

  onChange(nextState: boolean) {
    this.props.onChange(nextState);
  }
}

export default Checkbox;

Also, make sure to include a story (*.stories.js) to correctly expose the component (both for development and documentation.)

Developing

To start Storybooks, run yarn storybook.

Publishing the package

To NPM

To publish the package, run yarn version, and enter the correct version (see the documentation). After this suceeds, verify the version number is what you expect and merge a PR into master to publish the package. The package can be viewed here. The storybook can also be viewed here.

Pack locally (for testing)

Running yarn pack will generate a .tgz file, which contains the library ready for installation.

You can install the local package by running

yarn add ~/path/to/this/repo/jogogo-components-v{version}.tgz.

Install locally (for testing)

Sometimes, testing & developing strictly within the context of the storybook gets hard. To test the package in another local codebase, run yarn build:lib && yarn add ~/path/to/this/repo. Ensure that the changes to the package.json and yarn.lock don't get commited, as this will likely break the codebase you're testing on.