Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/fyndiq/fyndiq-ui
Library of reusable web frontend components for Fyndiq
https://github.com/fyndiq/fyndiq-ui
component-library design-systems fyndiq fyndiq-ui lerna react-components reusable-components storybook
Last synced: 4 months ago
JSON representation
Library of reusable web frontend components for Fyndiq
- Host: GitHub
- URL: https://github.com/fyndiq/fyndiq-ui
- Owner: fyndiq
- License: mit
- Created: 2017-03-30T07:22:47.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2018-06-14T12:46:15.000Z (over 6 years ago)
- Last Synced: 2024-10-09T09:50:56.555Z (4 months ago)
- Topics: component-library, design-systems, fyndiq, fyndiq-ui, lerna, react-components, reusable-components, storybook
- Language: JavaScript
- Homepage: https://fyndiq.github.io/fyndiq-ui
- Size: 10.1 MB
- Stars: 39
- Watchers: 32
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# fyndiq-ui
[](https://travis-ci.org/fyndiq/fyndiq-ui) [](https://fyndiq.github.io/fyndiq-ui/?selectedKind=💎%20Sketch&selectedStory=default) [](https://codecov.io/gh/fyndiq/fyndiq-ui) [](https://lernajs.io/) [](https://github.com/prettier/prettier)
Library of reusable components for Fyndiq
# Usage
Install one of the provided packages (see list below) in your React project:
``` bash
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:
``` js
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:
``` bash
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](//lernajs.io). It contains several packages:
| Package | Version | Description |
|------|----|----|
| [`fyndiq-component-alert`](/packages/fyndiq-component-alert) |Â [](https://www.npmjs.com/package/fyndiq-component-alert) | Alert component |
| [`fyndiq-component-article`](/packages/fyndiq-component-article) |Â [](https://www.npmjs.com/package/fyndiq-component-article) | Article component |
| [`fyndiq-component-brand`](/packages/fyndiq-component-brand) |Â [](https://www.npmjs.com/package/fyndiq-component-brand) | Brand component |
| [`fyndiq-component-button`](/packages/fyndiq-component-button) |Â [](https://www.npmjs.com/package/fyndiq-component-button) | Button component |
| [`fyndiq-component-checkbox`](/packages/fyndiq-component-checkbox) |Â [](https://www.npmjs.com/package/fyndiq-component-checkbox) | Checkbox component |
| [`fyndiq-component-dropdown`](/packages/fyndiq-component-dropdown) |Â [](https://www.npmjs.com/package/fyndiq-component-dropdown) | Dropdown component |
| [`fyndiq-component-input`](/packages/fyndiq-component-input) |Â [](https://www.npmjs.com/package/fyndiq-component-input) | Input component |
| [`fyndiq-component-loader`](/packages/fyndiq-component-loader) |Â [](https://www.npmjs.com/package/fyndiq-component-loader) | Loader component |
| [`fyndiq-component-message`](/packages/fyndiq-component-message) |Â [](https://www.npmjs.com/package/fyndiq-component-message) | Message component |
| [`fyndiq-component-modal`](/packages/fyndiq-component-modal) |Â [](https://www.npmjs.com/package/fyndiq-component-modal) | Modal component |
| [`fyndiq-component-productcard`](/packages/fyndiq-component-productcard) |Â [](https://www.npmjs.com/package/fyndiq-component-productcard) | Product card component |
| [`fyndiq-component-productlist`](/packages/fyndiq-component-productlist) |Â [](https://www.npmjs.com/package/fyndiq-component-productlist) | Product list component |
| [`fyndiq-component-stars`](/packages/fyndiq-component-stars) |Â [](https://www.npmjs.com/package/fyndiq-component-stars) | Stars component |
| [`fyndiq-component-table`](/packages/fyndiq-component-table) |Â [](https://www.npmjs.com/package/fyndiq-component-table) | Table component |
| [`fyndiq-component-timeline`](/packages/fyndiq-component-timeline) |Â [](https://www.npmjs.com/package/fyndiq-component-timeline) | Timeline component |
| [`fyndiq-component-tooltip`](/packages/fyndiq-component-tooltip) |Â [](https://www.npmjs.com/package/fyndiq-component-tooltip) | Tooltip component |
| [`fyndiq-icons`](/packages/fyndiq-icons) |Â [](https://www.npmjs.com/package/fyndiq-icons) | Icons |
| [`fyndiq-illustrations`](/packages/fyndiq-illustrations) |Â [](https://www.npmjs.com/package/fyndiq-illustrations) | Illustrations |
| [`fyndiq-styles-colors`](/packages/fyndiq-styles-colors) |Â [](https://www.npmjs.com/package/fyndiq-styles-colors) | Default colors |
| [`fyndiq-styles-fonts`](/packages/fyndiq-styles-fonts) |Â [](https://www.npmjs.com/package/fyndiq-styles-fonts) | Default Fonts and helpers |
| [`fyndiq-styles-medias`](/packages/fyndiq-styles-medias) |Â [](https://www.npmjs.com/package/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`.