Skip to content

Library of reusable web frontend components for Fyndiq

License

Notifications You must be signed in to change notification settings

fyndiq/fyndiq-ui

Repository files navigation

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:

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