@tradesolution/ts-react-iceberg NPM

Iceberg - React 🚀

Tradesolutions React component library using storybook. This is a work in progress and we will add more components and documentation as soon as it's ready.

Make sure to follow and pin our teams channel and check out the newsletters in your inbox 🤓

Available components (as of now)

Button
Alert
Table

How to use

Installation

When in installing the Iceberg component library, you have two options. You can add Iceberg to your existing setup of storybook (if you are already using storybook for project specific components), this means that you can see both your local storybook components and the iceberg components when running storybook, or you can install and use only the Iceberg component library.

Did you install the Tradesolution global styles (ts-styles-iceberg) package already?

Adding Iceberg to existing storybook

If you want to setup storybook for your own project beforehand, follow the official documentation install guidelines here.

In your .storybook/main.js file. Add a ref to the production version of the Iceberg storybook, which is hosted on chromatic.

refs: {
 'design-system': {
   title: 'ts-react-iceberg',
   // The url provided by Chromatic when it was deployed
   url: 'https://master--6011cae127273f0021b47d0d.chromatic.com',
 },

Your .storybook.main.js file should look something like this:

module.exports = {
  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
  refs: {
    'design-system': {
      title: 'ts-react-iceberg',
      // The url provided by Chromatic when it was deployed
      // can use other branches (dev)?
      url: 'https://master--6011cae127273f0021b47d0d.chromatic.com',
    },
  },
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/preset-create-react-app',
  ],
};

Make sure you can see bot projects when launching storybook: npm run storybook

Installing only Iceberg component library

Run npm i @tradesolution/ts-react-iceberg
Run npm run storybook
You should now be able to see the components in your browser.

Importing and using components

import React from 'react';
import { TsAlert } from '@tradesolution/ts-react-iceberg';

const AlertFromIceberg = () => {
  return <TsAlert variant="success">It worked!(?)</TsAlert>;
};

export default AlertFromIceberg;

Contributing

We really hope you want to help us (Really. We need help 🆘🏝) by contributing to to the Iceberg component libraries and the Design System in general. There is several ways to get involved:

🔖 Publish a tip, comment, .gif or whatever to the Developer Hangout channel under Iceberg - Design System on Teams.
🤷‍♂️ Create a new issue on github if you dont have the time, willingness or skills required to create your desired component.
📤 Open a pull request on github. Describe what you are trying to solve and/or your component.
📧 Send us Julie (developer), Karim (UX designer) or Christopher (developer) a direct message on teams or by mail (preferrably the electronic type).

We will look at everything and evaluate every request.