{"id":18817293,"url":"https://github.com/blueberryapps/react-bluekit","last_synced_at":"2025-05-16T09:03:17.750Z","repository":{"id":43121873,"uuid":"46792794","full_name":"blueberryapps/react-bluekit","owner":"blueberryapps","description":"Automatically generating a component library from your React components (ES5, ES6, Typescript)","archived":false,"fork":false,"pushed_at":"2023-02-10T02:28:32.000Z","size":2356,"stargazers_count":646,"open_issues_count":27,"forks_count":33,"subscribers_count":50,"default_branch":"master","last_synced_at":"2025-04-09T05:06:32.238Z","etag":null,"topics":["blueberry-opensource","react","react-components","tooling","typescript","visualization"],"latest_commit_sha":null,"homepage":"http://bluekit.blueberry.io","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/blueberryapps.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":"2015-11-24T13:17:51.000Z","updated_at":"2024-10-17T08:21:55.000Z","dependencies_parsed_at":"2023-02-13T23:45:36.375Z","dependency_job_id":null,"html_url":"https://github.com/blueberryapps/react-bluekit","commit_stats":null,"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/blueberryapps%2Freact-bluekit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/blueberryapps%2Freact-bluekit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/blueberryapps%2Freact-bluekit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/blueberryapps%2Freact-bluekit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/blueberryapps","download_url":"https://codeload.github.com/blueberryapps/react-bluekit/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253403342,"owners_count":21903035,"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":["blueberry-opensource","react","react-components","tooling","typescript","visualization"],"created_at":"2024-11-08T00:10:39.380Z","updated_at":"2025-05-16T09:03:17.730Z","avatar_url":"https://github.com/blueberryapps.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React BlueKit [![CircleCI](https://circleci.com/gh/blueberryapps/react-bluekit/tree/master.svg?style=svg)](https://circleci.com/gh/blueberryapps/react-bluekit/tree/master) [![Dependency Status](https://dependencyci.com/github/blueberryapps/react-bluekit/badge)](https://dependencyci.com/github/blueberryapps/react-bluekit)\n\n![BlueKit usage](http://bb-share.s3.amazonaws.com/BlueKit_usage.gif)\n\nBlueKit automatically generates a library from your React components with editable props and live preview.\n\nPoint BlueKit to folders with your React components and it will generate a library for you. You'll be able to browse through the components, tweak their props, and see the changes live. Furthermore, any changes that you make to your components' code will be reflected in the library.\n\nDEMO here: [http://bluekit.blueberry.io](http://bluekit.blueberry.io)\n\n## Install\n\n```sh\n$ npm install --save react-bluekit\n```\n\nYou can use BlueKit via npm script or gulp\n\n## Npm script\n```js\n\"scripts\": {\n  \"bluekit\": \"bluekit --baseDir ./components --paths . --exclude \\\"./(Layout|StyledComponent).tsx\\\"\"\n}\n```\n\n## Gulpfile configuration\n\n```js\nimport createBlueKit from 'react-bluekit/lib/createBlueKit';\n\ncreateBlueKit({\n  // your directory where components are located\n  baseDir: `${__dirname}/src/browser`,\n  // relative paths from base dir where to look for components\n  paths: ['./components/', './auth'],\n  // relative paths from base dir of files or directories you want to exclude from indexing\n  exclude: ['./components/Foo'],\n  // set to true when providing simple components such as `export default function MyComponent() { \u003cdiv\u003eHello\u003c/div\u003e }`\n  noSpecialReplacements: true\n});\n```\n\nThis will provide you with two gulp tasks: `build-bluekit` and `watch-bluekit`, which perform static analysis of your components.\n\nYou can setup the build of BlueKit on application start and then watch components for changes by editing the `default` task to:\n\n```js\n// from gulp.task('default', ['server']); to:\ngulp.task('default', ['build-bluekit', 'server', 'watch-bluekit']);\n```\n\nDo not forget to add it to build process (for example on stage or production):\n```js\ngulp.task('build', ['build-bluekit', 'build-webpack']);\n// make sure that component build is before webpack\n```\nIt will be built when needed.\n\n## Add it to your project\n\nLook at the `example` directory, you only need to add:\n\n```js\nimport BlueKit from 'react-bluekit';\nimport componentsIndex from '../componentsIndex';\nimport React, { Component } from 'react';\n\nexport default class PageWithBlueKit extends Component {\n  render() {\n    return (\n      \u003cBlueKit\n        componentsIndex={componentsIndex}\n\n        // display inline (not full page)\n        inline\n\n        // this name is used for bluekit local storage as namespace\n        // it is optional\n        name=\"MyProjectName\"\n      /\u003e\n    );\n  }\n}\n```\nYou can also pass `children` to BlueKit, which will be displayed above the search field (e.g. for themes or other stuff).\n\nTo add jsdoc **descriptions** see example [example_components/Checkbox.react.js](https://github.com/blueberryapps/react-bluekit/blob/master/example_components/Checkbox.react.js).\n\n## Typescript support\n\nBluekit automatically finds `.tsx` files and uses [react-docgen-typescript](https://github.com/imtoo/react-docgen-typescript) parser for it.\n\n## BlueKit development\n```\nnpm install\ncd ./example\nnpm install\ngulp\nopen http://localhost:3000\n```\nThis will start the development server and then you can play with components in BlueKit.\n\n## Gulp tasks\n```\n# generate svg icons from src/icons directory\ngulp svg-icon\n\n# run unit tests\ngulp ava\n\n# run eslint\ngulp eslint\n```\n\n## Additional info\n\nBlueKit automatically hides props that don’t affect the component’s look.\n\nIf you get some kind of weird error and BlueKit doesn't load at all, try to reset localStorage by running `localStorage.clear();`.\n\n## Made with love by\n[![](https://camo.githubusercontent.com/d88ee6842f3ff2be96d11488aa0d878793aa67cd/68747470733a2f2f7777772e676f6f676c652e636f6d2f612f626c75656265727279617070732e636f6d2f696d616765732f6c6f676f2e676966)](https://www.blueberry.io)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fblueberryapps%2Freact-bluekit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fblueberryapps%2Freact-bluekit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fblueberryapps%2Freact-bluekit/lists"}