fyndiq-ui

Library of reusable components for Fyndiq

Usage

Install one of the provided packages (see list below) in your React project:

npm i -S fyndiq-component-button

Every component provide their own style using CSSNext. Thus, you need to be able to import CSS files inside your project. Using Webpack2, you can have an entry similar to this:

module: {
  rules: [
    {
      test: /\.css$/,
      use: ExtractTextPlugin.extract({
        fallback: 'style-loader',
        use: [
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1,
              sourceMap: true,
              modules: true,
            },
          }, {
            loader: 'postcss-loader',
            options: {
              plugins: () => ([
                require('postcss-import'),
                require('postcss-cssnext'),
              ]),
            },
          },
        ],
      }),
    },
  ],
},

You will need the following loaders:

npm i -D postcss-loader css-loader style-loader extract-text-webpack-plugin postcss-import postcss-cssnext

Packages

This git repository is a monorepo built using Lerna. It contains several packages:

Package	Version	Description
fyndiq-component-alert		Alert component
fyndiq-component-article		Article component
fyndiq-component-brand		Brand component
fyndiq-component-button		Button component
fyndiq-component-checkbox		Checkbox component
fyndiq-component-dropdown		Dropdown component
fyndiq-component-input		Input component
fyndiq-component-loader		Loader component
fyndiq-component-message		Message component
fyndiq-component-modal		Modal component
fyndiq-component-productcard		Product card component
fyndiq-component-productlist		Product list component
fyndiq-component-stars		Stars component
fyndiq-component-table		Table component
fyndiq-component-timeline		Timeline component
fyndiq-component-tooltip		Tooltip component
fyndiq-icons		Icons
fyndiq-illustrations		Illustrations
fyndiq-styles-colors		Default colors
fyndiq-styles-fonts		Default Fonts and helpers
fyndiq-styles-medias		Default media queries

Contribute

Clone the repository, then run

npm i
npm run bootstrap
npm run dev

The Storybook will be available on port 6006.

To create a new component, create a new folder in the packages/ directory and put your code in src/. Then, add your newly created package to the dependencies of fyndiq-ui-test's package.json file, run npm run bootstrap and restart npm run dev.