{"id":15062716,"url":"https://github.com/fyndiq/fyndiq-ui","last_synced_at":"2025-09-12T19:42:32.386Z","repository":{"id":57144813,"uuid":"86671923","full_name":"fyndiq/fyndiq-ui","owner":"fyndiq","description":"Library of reusable web frontend components for Fyndiq","archived":false,"fork":false,"pushed_at":"2018-06-14T12:46:15.000Z","size":10565,"stargazers_count":39,"open_issues_count":0,"forks_count":4,"subscribers_count":30,"default_branch":"master","last_synced_at":"2025-04-06T09:43:12.959Z","etag":null,"topics":["component-library","design-systems","fyndiq","fyndiq-ui","lerna","react-components","reusable-components","storybook"],"latest_commit_sha":null,"homepage":"https://fyndiq.github.io/fyndiq-ui","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/fyndiq.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-03-30T07:22:47.000Z","updated_at":"2021-12-23T09:46:05.000Z","dependencies_parsed_at":"2022-09-06T08:53:37.276Z","dependency_job_id":null,"html_url":"https://github.com/fyndiq/fyndiq-ui","commit_stats":null,"previous_names":[],"tags_count":317,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fyndiq%2Ffyndiq-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fyndiq%2Ffyndiq-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fyndiq%2Ffyndiq-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fyndiq%2Ffyndiq-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fyndiq","download_url":"https://codeload.github.com/fyndiq/fyndiq-ui/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248233935,"owners_count":21069493,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["component-library","design-systems","fyndiq","fyndiq-ui","lerna","react-components","reusable-components","storybook"],"created_at":"2024-09-24T23:45:15.867Z","updated_at":"2025-04-10T14:22:15.959Z","avatar_url":"https://github.com/fyndiq.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\n![fyndiq-ui logo](https://github.com/fyndiq/fyndiq-ui/blob/master/docs/logo.jpg?raw=true)\n\n# fyndiq-ui\n\n[![Build Status](https://travis-ci.org/fyndiq/fyndiq-ui.svg?branch=master)](https://travis-ci.org/fyndiq/fyndiq-ui) [![Sketch exports](https://img.shields.io/badge/%F0%9F%92%8E%20sketch-exports-eaa119.svg)](https://fyndiq.github.io/fyndiq-ui/?selectedKind=💎%20Sketch\u0026selectedStory=default) [![Codecov](https://img.shields.io/codecov/c/github/fyndiq/fyndiq-ui.svg)](https://codecov.io/gh/fyndiq/fyndiq-ui) [![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lernajs.io/) [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier)\n\nLibrary of reusable components for Fyndiq\n\n# Usage\n\u003c/div\u003e\n\nInstall one of the provided packages (see list below) in your React project:\n\n``` bash\nnpm i -S fyndiq-component-button\n```\n\nEvery 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:\n\n``` js\nmodule: {\n  rules: [\n    {\n      test: /\\.css$/,\n      use: ExtractTextPlugin.extract({\n        fallback: 'style-loader',\n        use: [\n          {\n            loader: 'css-loader',\n            options: {\n              importLoaders: 1,\n              sourceMap: true,\n              modules: true,\n            },\n          }, {\n            loader: 'postcss-loader',\n            options: {\n              plugins: () =\u003e ([\n                require('postcss-import'),\n                require('postcss-cssnext'),\n              ]),\n            },\n          },\n        ],\n      }),\n    },\n  ],\n},\n```\n\nYou will need the following loaders:\n\n``` bash\nnpm i -D postcss-loader css-loader style-loader extract-text-webpack-plugin postcss-import postcss-cssnext\n```\n\n\u003cdiv align=\"center\"\u003e\n\n# Packages\n\u003c/div\u003e\n\nThis git repository is a monorepo built using [Lerna](//lernajs.io). It contains several packages:\n\n| Package | Version | Description |\n|------|----|----|\n| [`fyndiq-component-alert`](/packages/fyndiq-component-alert) | [![npm](https://img.shields.io/npm/v/fyndiq-component-alert.svg?maxAge=3600)](https://www.npmjs.com/package/fyndiq-component-alert) | Alert component |\n| [`fyndiq-component-article`](/packages/fyndiq-component-article) | [![npm](https://img.shields.io/npm/v/fyndiq-component-article.svg?maxAge=3600)](https://www.npmjs.com/package/fyndiq-component-article) | Article component |\n| [`fyndiq-component-brand`](/packages/fyndiq-component-brand)  | [![npm](https://img.shields.io/npm/v/fyndiq-component-brand.svg?maxAge=3600)](https://www.npmjs.com/package/fyndiq-component-brand) | Brand component |\n| [`fyndiq-component-button`](/packages/fyndiq-component-button) | [![npm](https://img.shields.io/npm/v/fyndiq-component-button.svg?maxAge=3600)](https://www.npmjs.com/package/fyndiq-component-button) | Button component |\n| [`fyndiq-component-checkbox`](/packages/fyndiq-component-checkbox) | [![npm](https://img.shields.io/npm/v/fyndiq-component-checkbox.svg?maxAge=3600)](https://www.npmjs.com/package/fyndiq-component-checkbox) | Checkbox component |\n| [`fyndiq-component-dropdown`](/packages/fyndiq-component-dropdown) | [![npm](https://img.shields.io/npm/v/fyndiq-component-dropdown.svg?maxAge=3600)](https://www.npmjs.com/package/fyndiq-component-dropdown) | Dropdown component |\n| [`fyndiq-component-input`](/packages/fyndiq-component-input) | [![npm](https://img.shields.io/npm/v/fyndiq-component-input.svg?maxAge=3600)](https://www.npmjs.com/package/fyndiq-component-input) | Input component |\n| [`fyndiq-component-loader`](/packages/fyndiq-component-loader) | [![npm](https://img.shields.io/npm/v/fyndiq-component-loader.svg?maxAge=3600)](https://www.npmjs.com/package/fyndiq-component-loader) | Loader component |\n| [`fyndiq-component-message`](/packages/fyndiq-component-message) | [![npm](https://img.shields.io/npm/v/fyndiq-component-message.svg?maxAge=3600)](https://www.npmjs.com/package/fyndiq-component-message) | Message component |\n| [`fyndiq-component-modal`](/packages/fyndiq-component-modal) | [![npm](https://img.shields.io/npm/v/fyndiq-component-modal.svg?maxAge=3600)](https://www.npmjs.com/package/fyndiq-component-modal) | Modal component |\n| [`fyndiq-component-productcard`](/packages/fyndiq-component-productcard) | [![npm](https://img.shields.io/npm/v/fyndiq-component-productcard.svg?maxAge=3600)](https://www.npmjs.com/package/fyndiq-component-productcard) | Product card component |\n| [`fyndiq-component-productlist`](/packages/fyndiq-component-productlist) | [![npm](https://img.shields.io/npm/v/fyndiq-component-productlist.svg?maxAge=3600)](https://www.npmjs.com/package/fyndiq-component-productlist) | Product list component |\n| [`fyndiq-component-stars`](/packages/fyndiq-component-stars) | [![npm](https://img.shields.io/npm/v/fyndiq-component-stars.svg?maxAge=3600)](https://www.npmjs.com/package/fyndiq-component-stars) | Stars component |\n| [`fyndiq-component-table`](/packages/fyndiq-component-table) | [![npm](https://img.shields.io/npm/v/fyndiq-component-table.svg?maxAge=3600)](https://www.npmjs.com/package/fyndiq-component-table) | Table component |\n| [`fyndiq-component-timeline`](/packages/fyndiq-component-timeline) | [![npm](https://img.shields.io/npm/v/fyndiq-component-timeline.svg?maxAge=3600)](https://www.npmjs.com/package/fyndiq-component-timeline) | Timeline component |\n| [`fyndiq-component-tooltip`](/packages/fyndiq-component-tooltip) | [![npm](https://img.shields.io/npm/v/fyndiq-component-tooltip.svg?maxAge=3600)](https://www.npmjs.com/package/fyndiq-component-tooltip) | Tooltip component |\n| [`fyndiq-icons`](/packages/fyndiq-icons) | [![npm](https://img.shields.io/npm/v/fyndiq-icons.svg?maxAge=3600)](https://www.npmjs.com/package/fyndiq-icons) | Icons |\n| [`fyndiq-illustrations`](/packages/fyndiq-illustrations) | [![npm](https://img.shields.io/npm/v/fyndiq-illustrations.svg?maxAge=3600)](https://www.npmjs.com/package/fyndiq-illustrations) | Illustrations |\n| [`fyndiq-styles-colors`](/packages/fyndiq-styles-colors) | [![npm](https://img.shields.io/npm/v/fyndiq-styles-colors.svg?maxAge=3600)](https://www.npmjs.com/package/fyndiq-styles-colors) | Default colors |\n| [`fyndiq-styles-fonts`](/packages/fyndiq-styles-fonts) | [![npm](https://img.shields.io/npm/v/fyndiq-styles-fonts.svg?maxAge=3600)](https://www.npmjs.com/package/fyndiq-styles-fonts) | Default Fonts and helpers |\n| [`fyndiq-styles-medias`](/packages/fyndiq-styles-medias) | [![npm](https://img.shields.io/npm/v/fyndiq-styles-medias.svg?maxAge=3600)](https://www.npmjs.com/package/fyndiq-styles-medias) | Default media queries |\n\n\u003cdiv align=\"center\"\u003e\n\n# Contribute\n\u003c/div\u003e\n\nClone the repository, then run\n\n```\nnpm i\nnpm run bootstrap\nnpm run dev\n```\n\nThe Storybook will be available on port `6006`.\n\nTo 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`.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffyndiq%2Ffyndiq-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffyndiq%2Ffyndiq-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffyndiq%2Ffyndiq-ui/lists"}