Awesome

fyndiq-ui

Library of reusable components for Fyndiq

Usage

</div>

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

</div>

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

</div>

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.