fyndiq-ui logo

fyndiq-ui

Build Status Sketch exports Codecov lerna code style: prettier

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:

PackageVersionDescription
fyndiq-component-alert npmAlert component
fyndiq-component-article npmArticle component
fyndiq-component-brand npmBrand component
fyndiq-component-button npmButton component
fyndiq-component-checkbox npmCheckbox component
fyndiq-component-dropdown npmDropdown component
fyndiq-component-input npmInput component
fyndiq-component-loader npmLoader component
fyndiq-component-message npmMessage component
fyndiq-component-modal npmModal component
fyndiq-component-productcard npmProduct card component
fyndiq-component-productlist npmProduct list component
fyndiq-component-stars npmStars component
fyndiq-component-table npmTable component
fyndiq-component-timeline npmTimeline component
fyndiq-component-tooltip npmTooltip component
fyndiq-icons npmIcons
fyndiq-illustrations npmIllustrations
fyndiq-styles-colors npmDefault colors
fyndiq-styles-fonts npmDefault Fonts and helpers
fyndiq-styles-medias npmDefault 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.