Fixt Component Library

Welcome to the Fixt Component Library. A shared repository of React components.

Usage

1. Install

  npm install @fixt/components
  npm install styled-components --save

2. Include these stylesheets in your html file

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">

3. Wrap your root component with the styled-components ThemeProvider

import React from 'react';
import { ThemeProvider } from 'styled-components'
import { themes } from '@fixt/components';

import App from './index'

const Root = () => (
<ThemeProvider theme={themes.standard}>
  <App />
</ThemeProvider>);

4. Using the React components

import React from ‘react’;
import { Button } from '@fixt/components';

const BoringButton = () => (
  <Button />
);

Storybook Development

1. Install & Build dependencies

  npm run build

2. Start the Storybook server

  npm run storybook:dev

3. Runs storybook at http://localhost:6006

Storybook Deployment to Github Pages

  npm run storybook:deploy

Publish New Versions

  npm run publish

Updating Versions

Make version changes to package.json:

1. Create a branch of component-library. Open the package.json file and locate the package to be modified. Change the version number to the new version number.

  "material-table": {
      "version": "1.64.0", 

2. Go to the top of the file and find the version number of the component-library. Bump the version up by 1 point (1.1.8 will be changed to 1.1.9).

    {
  "name": "@fixt/components",
  "version": "1.1.13",

3. After modifying the file, be sure to update the .lock file with

yarn install

4. Push changes of branch (git add, git commit, git push) and submit a pull request to be merged into master.

Publish changes to @fixt/components using npm:

1. If you are not already logged into npm, in the terminal command line

    npm login

This will bring up a prompt for Username: and Password:

2. Change into the component-library master directory (make sure it is not the branch) and type in the command

  npm publish

3. This should start the process of publishing the new version. Check at https://www.npmjs.com/settings/fixt/packages to make sure the new version is published.

Update the version number in HQ:

1. Create a branch of HQ. Go to the client directory and in the package.json file locate @fixt/components. Change the version to match the new published version.

    "@fixt/components": "^1.1.8",

2. After modifying the file, be sure to update the .lock file with

    yarn install

3. Push the changes and submit a pull request to merge into HQ.