spectre-react v0.3.0
Spectre React Components
React components for the Spectre CSS library.
This project was started during the React Riot Hackathon. It's not fully complete, you can view the components in a Storybook. ( see link below )
View the components on the GitHub Page
Setup Instructions
Install with npm i spectre-react
Spectre.css is not included - download CSS files here
Contributing Instructions
- Fork the repo and download / clone your fork.
- Make a new branch name it something like
add-{ComponentName}
- Run
npm install
- Make your changes following the Standard JS style ( run
npm run lint
andnpm run lint-fix
if you don't want to install Standard ) - Make sure all tests pass
npm test
and there are no issues when you runnpm run lint
Commands
npm run storybook
- starts storybook on localhost:6006
This is the main way to preview the components. You make a component, add stories for it and play around with it.
npm test
- runs unit tests using Jest
npm run lint
- runs the Standard JS linter
npm run lint-fix
- runs Standard and tries to fix detected issues
npm run build
- outputs minified, processed code into dist/index.js
Use this to test the components like you would if you had installed the package from npm. i.e import { Button } from 'dist'
storybook-deploy
- deploys storybook to gh-pages branch.
Component Layout
Add this snippet in VS Code > preferences > user snippets > JavaScript
for quick component creation.
"reactFunctionalComponent-propTypes": {
"prefix": "rfc-pt",
"body": [
"import React from 'react'",
"import PropTypes from 'prop-types'",
"import classnames from 'classnames'",
"",
"const propTypes = {",
" children: PropTypes.node,",
" renderAs: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),",
" className: PropTypes.string",
"}",
"",
"const defaultProps = {",
" renderAs: 'div'",
"}",
"",
"const ${1:${TM_FILENAME_BASE}} = ({ children, ...props }) => {",
" const { className, renderAs: Element, ...attributes } = props",
" const classNames = classnames('my-class', className)",
"",
" return (",
" <Element {...attributes} className={classNames}>",
" { children }",
" </Element>",
" )",
"}",
"",
"${1:${TM_FILENAME_BASE}}.propTypes = propTypes",
"${1:${TM_FILENAME_BASE}}.defaultProps = defaultProps",
"",
"export default ${1:${TM_FILENAME_BASE}}",
""
],
"description": "Creates a React Functional Component with prop types"
}