plurall-components v0.0.26

Plurall React Componetes

How to run

Clone this repository and cd plurall-react-components

The first time you need run

yarn && yarn build

To run project

yarn bootstrap && yarn start

if yout development components or new component you nedd run this in other terminal tab

yarn start:watch

to publish in npm

export NPM_TOKEN=token-do-plurall-dev
yarn deploy

open localhost:6006/

Using components locally

To test a component locally in an external application, uninstall the component and reinstall it pointing to the location on your machine where the component source code is located.

For exemple, if you cloned the repository inside a folder called projects and want to test locally the Header component, run

npm uninstall plurall-header
npm install --save ~/projects/plurall-react-components/packages/plurall-component-header

Your package.json will be updated, and will now fetch the component from your local disk, instead of a remote repository:

"plurall-header": "file:../plurall-react-components/packages/plurall-component-header"

Create a new component

• Create a new folder in /packages/ with this format plurall-component-nomeComponent
• run npm init for create a new component - Follow the steps to create or look at the button, for example.
• Create a src folder inside

• Crate a index.js

  • For example:

        import YourComponetName from './YourComponetName';
    
        export {
            YourComponetName,
        };

• Create a YourComponetName.js

  • For Example

    import React from 'react'
    import PropTypes from 'prop-types'
    
    class YourComponetName extends React.Component {
        render() {
        const { children } = this.props;
        return (
          <div>
            {children}
            <style jsx>{`
                div { color: red }
            `}</style>
          </div>
        );
      }
    }
    
    YourComponetName.propTypes = {
        children: PropTypes.node
    };
    
    export default YourComponetName

• Now goto stories/index.js and add new component, for example:

import { MyComponent } from '../packages/plurall-component-YourComponetName/src'
storiesOf('MyComponent', module)
  .addWithInfo('Default', () => (
    <MyComponent />
  ))