Version 0.40.0

Code Guidelines

React component contributing guidelines

To create a react component with its documentation follow this structure to start in saagie-ui/src/react/

+-- 📁 atomicComponentSection
|   +-- 📁 yourComponentFolder
|   |   +-- 📄 Documentation.js
|   |   +-- 📄 YourComponent.js
|   |   +-- 📄 YourChildComponent.js
|   |   +-- 📄 Example.html
|   |   +-- 📄 Example.js

Now create your react component and follow the sample bellow to create documentation properly.

Import your component for production

⚠️ Don't forget to import your components on saagie-ui/src/react/index.js for production use.

Documentation.js sample

Documentation based on JSDoc so for other kind of params check JSDoc param page

/**
 * @kind component
 *
 * @name saagie-ui/AtomicSection/YourComponent
 *
 * @requires React
 * @requires PropTypes
 *
 * @param componentName - YourComponent params
 * @param {node} children - Children elements.
 * @param {string} [className] - custom CSS class names.
 * @param {bool} [asModifier] - True for <code>as--modifier</code> behavior.
 * @param {...object} attributes - Things to pass on element.
 * @param componentName - YourChildComponent params
 * @param {node} children - Children elements.
 * @param {string} [className] - custom CSS class names.
 * @param {...object} attributes - Things to pass on element.
 *
 * @example
 * Example.html
 *
 * @usage
 * Example.js
 *
 */

Example.js sample

import React from 'react';
import { YourComponent } from 'saagie-ui/react';

class YourComponentExample extends React.Component {
  render() {
    return (
      <div>
        <YourComponent>
          <YourChildComponent>
            test
          </YourChildComponent>
        </YourComponent>
      </div>
    );
  }
}

export default YourComponentExample;

Import your component for documentation

⚠️ import your Example component on saagie-ui/src/react/examples.js to load it on documentation only.

Example.html sample

<div>
  <YourComponentExample/>
</div>