README
React Components
A collection of React components which are shared across products.
Licence
Copyright 2017 CoreFiling S.A.R.L.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
Installation
npm install -S @cfl/react-components
Dependencies
There are some CSS dependencies which consumers must provide themselves:
In addition, some components require a Radium StyleRoot
component to wrap the application
Example Usage
Usage in TypeScript:
import { Card } from '@cfl/react-components';
function MyComponent(props: {}): JSX.Element {
return (
<Card />
);
}
Icons
import { CheckIcon } from '@cfl/react-components/icons';
function MyComponent(props: {}): JSX.Element {
return (
<CheckIcon />
);
}
Development
Setup
npm install
Build
npm pack # produces `react-components-$VERSION.tgz`
Storybook
npm config set react-components:storybook-port $PORT # optional, defaults to 9001
npm start
We use storybook to provide a development environment for components. Next to each component (e.g., Foo
in foo.tsx
), there is a story file (e.g., foo.story.tsx
) which renders the component in different ways to demonstrate its features.
Running Tests
Single Run
npm test
Watch Tests
npm run dev:test
Debug Tests
npm install -g node
npm run test:mocha -- --debug-brk
node-inspector
Then go to http://localhost:8080/?port=5858, which will allow you to debug the application.
It's usually worth adding a debugger;
statement to the top of one of your spec files, so you can continue execution until your files are loaded.