Security News
The Push to Ban Ransom Payments Is Gaining Momentum
Ransomware costs victims an estimated $30 billion per year and has gotten so out of control that global support for banning payments is gaining momentum.
react-bluekit
Advanced tools
Readme
BlueKit automatically generates a library from your React components with editable props and live preview.
Point 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.
DEMO here: http://bluekit.blueberry.io
$ npm install --save react-bluekit
You can use BlueKit via npm script or gulp
"scripts": {
"bluekit": "bluekit --baseDir ./components --paths . --exclude \"./(Layout|StyledComponent).tsx\""
}
import createBlueKit from 'react-bluekit/lib/createBlueKit';
createBlueKit({
// your directory where components are located
baseDir: `${__dirname}/src/browser`,
// relative paths from base dir where to look for components
paths: ['./components/', './auth'],
// relative paths from base dir of files or directories you want to exclude from indexing
exclude: ['./components/Foo'],
// set to true when providing simple components such as `export default function MyComponent() { <div>Hello</div> }`
noSpecialReplacements: true
});
This will provide you with two gulp tasks: build-bluekit
and watch-bluekit
, which perform static analysis of your components.
You can setup the build of BlueKit on application start and then watch components for changes by editing the default
task to:
// from gulp.task('default', ['server']); to:
gulp.task('default', ['build-bluekit', 'server', 'watch-bluekit']);
Do not forget to add it to build process (for example on stage or production):
gulp.task('build', ['build-bluekit', 'build-webpack']);
// make sure that component build is before webpack
It will be built when needed.
Look at the example
directory, you only need to add:
import BlueKit from 'react-bluekit';
import componentsIndex from '../componentsIndex';
import React, { Component } from 'react';
export default class PageWithBlueKit extends Component {
render() {
return (
<BlueKit
componentsIndex={componentsIndex}
// display inline (not full page)
inline
// this name is used for bluekit local storage as namespace
// it is optional
name="MyProjectName"
/>
);
}
}
You can also pass children
to BlueKit, which will be displayed above the search field (e.g. for themes or other stuff).
To add jsdoc descriptions see example example_components/Checkbox.react.js.
Bluekit automatically finds .tsx
files and uses react-docgen-typescript parser for it.
npm install
cd ./example
npm install
gulp
open http://localhost:3000
This will start the development server and then you can play with components in BlueKit.
# generate svg icons from src/icons directory
gulp svg-icon
# run unit tests
gulp ava
# run eslint
gulp eslint
BlueKit automatically hides props that don’t affect the component’s look.
If you get some kind of weird error and BlueKit doesn't load at all, try to reset localStorage by running localStorage.clear();
.
FAQs
Visualisation and Playground generated from Components
We found that react-bluekit demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 5 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Ransomware costs victims an estimated $30 billion per year and has gotten so out of control that global support for banning payments is gaining momentum.
Application Security
New SEC disclosure rules aim to enforce timely cyber incident reporting, but fear of job loss and inadequate resources lead to significant underreporting.
Security News
The Python Software Foundation has secured a 5-year sponsorship from Fastly that supports PSF's activities and events, most notably the security and reliability of the Python Package Index (PyPI).