{"id":18244414,"url":"https://github.com/flotiq/flotiq-components-react","last_synced_at":"2025-04-04T13:31:33.368Z","repository":{"id":38632037,"uuid":"447215254","full_name":"flotiq/flotiq-components-react","owner":"flotiq","description":"Components package for React made by and for Flotiq","archived":false,"fork":false,"pushed_at":"2024-08-27T20:51:55.000Z","size":6948,"stargazers_count":5,"open_issues_count":3,"forks_count":1,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-08-28T08:54:12.212Z","etag":null,"topics":["components-library","flotiq","react"],"latest_commit_sha":null,"homepage":"https://flotiq.github.io/flotiq-components-react/","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/flotiq.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-01-12T12:47:45.000Z","updated_at":"2024-08-27T18:22:36.000Z","dependencies_parsed_at":"2024-04-08T20:04:03.150Z","dependency_job_id":"7403d25c-68a8-4a93-a9e5-6cb59ac7644f","html_url":"https://github.com/flotiq/flotiq-components-react","commit_stats":null,"previous_names":[],"tags_count":22,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flotiq%2Fflotiq-components-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flotiq%2Fflotiq-components-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flotiq%2Fflotiq-components-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flotiq%2Fflotiq-components-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/flotiq","download_url":"https://codeload.github.com/flotiq/flotiq-components-react/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223143826,"owners_count":17094722,"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":["components-library","flotiq","react"],"created_at":"2024-11-05T09:16:36.455Z","updated_at":"2024-11-05T09:16:37.021Z","avatar_url":"https://github.com/flotiq.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Flotiq components for React\n\n![](https://img.shields.io/npm/v/flotiq-components-react)\n\nThis project uses eslint. This project do not have React app to start, it only has storybook part.\nThe build storybook is available on [https://flotiq.github.io/flotiq-components-react/](https://flotiq.github.io/flotiq-components-react)\n\n## Available Scripts\n\nIn the project directory, you can run:\n\n### `yarn install`\n\nTo install all dependencies. Please DO NOT use npm for that.\n\n### `yarn dev`\n\nTo start storybook server. It will be available on [http://localhost:6006/](http://localhost:6006/)\n\n### `yarn compile`\n\nTo compile components into dist directory and prepare them for publish on npm registry.\n\n### `yarn test`\n\nTo test the package, tests are written using [gherkin](https://cucumber.io/docs/gherkin/reference/), [cucumber](https://cucumber.io/) and [jest](https://www.npmjs.com/package/jest-cucumber).\n\n### `npm run eject`\n\n**Note: this is a one-way operation. Once you `eject`, you can't go back!**\n\nIf you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.\n\nInstead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.\n\nYou don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.\n\n## Usage\n\n```\nCaution!\nThis project is in development stage. The below steps could change.\n```\n\nTo include this library in your own project you should follow these steps.\n\n### 1. Add module\n\nAdd Flotiq Components module\n```\nyarn add flotiq-components-react\n```\n\n### 2a. Include component styles (Projects using Tailwind)\n\nTo use Tailwind benefits include Flotiq Components to your `tailwind.config.js`\n\n```js\nmodule.exports = {\n    content: [\n        './node_modules/flotiq-components-react/dist/**/*.{js,jsx,ts,tsx}', // Flotiq Components location\n        './src/**/*.{js,jsx,ts,tsx}',\n    ],\n    theme: {\n        extend: {}, // Your theme overrides\n    },\n    presets: [\n        require('./node_modules/flotiq-components-react/dist/tailwind.preset'), // Flotiq Component theme presets\n    ],\n    plugins: [],\n    // Below configuration is required if you use the Cards component\n    safelist: require('./node_modules/flotiq-components-react/dist/tailwind.safelist'),\n};\n```\n\nTip: You can also reduce the `safelist` by replacing it with the array of classes that you use before pushing the code for production.\n\n### 2b. Include component styles (Projects without TailwindCSS)\n\nYou can use Flotiq Components without Tailwind. Just import stylesheets from Flotiq Component.\n\nIf you are using Sass the following line can be included in a src/App.scss\n```\n@import '~flotiq-components-react/dist/index-including-tailwind.css';\n```\n\nIf using css the following line can be included in your src/index.js or App.js file\n```\nimport 'flotiq-components-react/dist/index-including-tailwind.css';\n```\n\n\n### 3. Use components in your code\n\n```\nimport { Button } from 'flotiq-components-react';\n//...\n\u003cButton label=\"Hello Component!\"/\u003e\n```\n\n## NPM publish\n\nTo publish a new package in NPM, you need to update the version in the packages.json file and then commit the changes with the message \"Release x.y.z\".\nWhere x.y.z is the new version of the package.\nCommit about this on the master branch will start building a tag about this version and publishing a new version to npm.\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fflotiq%2Fflotiq-components-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fflotiq%2Fflotiq-components-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fflotiq%2Fflotiq-components-react/lists"}