All Projects → fyndiq → fyndiq-ui

fyndiq / fyndiq-ui

Licence: MIT license
Library of reusable web frontend components for Fyndiq

Programming Languages

javascript
184084 projects - #8 most used programming language
CSS
56736 projects
HTML
75241 projects

Projects that are alternatives of or similar to fyndiq-ui

lerna-starter
Simple React UI Development environment boilerplate to develop, test and publish your React components.
Stars: ✭ 55 (+41.03%)
Mutual labels:  react-components, lerna, storybook, component-library
shared-react-components-example
An example of a mono-repository of shared React components libraries!
Stars: ✭ 85 (+117.95%)
Mutual labels:  design-systems, react-components, lerna, storybook
Baseweb
A React Component library implementing the Base design language
Stars: ✭ 7,213 (+18394.87%)
Mutual labels:  design-systems, react-components, component-library
smores-react
🍭 Marshmallow React components
Stars: ✭ 34 (-12.82%)
Mutual labels:  react-components, storybook, component-library
Neumorphic Ui
📚 A library of components based on the concept of neumorphism
Stars: ✭ 82 (+110.26%)
Mutual labels:  design-systems, react-components, component-library
Material Ui
MUI (formerly Material-UI) is the React UI library you always wanted. Follow your own design system, or start with Material Design.
Stars: ✭ 73,739 (+188974.36%)
Mutual labels:  design-systems, react-components
pattern-library
AXA CH UI component library. Please share, comment, create issues and work with us!
Stars: ✭ 103 (+164.1%)
Mutual labels:  lerna, storybook
hv-uikit-react
React UI library for the Hitachi Vantara Design System.
Stars: ✭ 29 (-25.64%)
Mutual labels:  design-systems, react-components
react-bones
💀 Dead simple content loading components for React and React-Native. 💀
Stars: ✭ 42 (+7.69%)
Mutual labels:  lerna, storybook
Evergreen
🌲 Evergreen React UI Framework by Segment
Stars: ✭ 11,340 (+28976.92%)
Mutual labels:  design-systems, component-library
moon-design
Moon Design System for React
Stars: ✭ 209 (+435.9%)
Mutual labels:  design-systems, react-components
paragon
💎 An accessible, theme-ready design system built for learning applications and Open edX.
Stars: ✭ 85 (+117.95%)
Mutual labels:  react-components, component-library
Storybook
📓 The UI component explorer. Develop, document, & test React, Vue, Angular, Web Components, Ember, Svelte & more!
Stars: ✭ 67,445 (+172835.9%)
Mutual labels:  design-systems, storybook
Awesome Design Systems
A curated list of bookmarks, resources and articles about design systems focused on developers.
Stars: ✭ 222 (+469.23%)
Mutual labels:  design-systems, storybook
Vue Design System
An open source tool for building UI Design Systems with Vue.js
Stars: ✭ 2,077 (+5225.64%)
Mutual labels:  design-systems, component-library
design-systems
A list of famous design systems, design languages and guidelines
Stars: ✭ 403 (+933.33%)
Mutual labels:  design-systems, component-library
react-library-template
Jumpstart your team's shared react library
Stars: ✭ 26 (-33.33%)
Mutual labels:  storybook, component-library
react-uswds
USWDS 3.0 components built in React
Stars: ✭ 108 (+176.92%)
Mutual labels:  storybook, component-library
tiny-ui
⚛️ A friendly UI component set for React.js
Stars: ✭ 202 (+417.95%)
Mutual labels:  react-components, component-library
Nostyle
Design System
Stars: ✭ 101 (+158.97%)
Mutual labels:  design-systems, component-library

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.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].