rafaelrozon

Naming conventions

What	Format	Example
Component	MyComponentName	Button, LoginModal
Action Type	[VERB]_[NOUN]	TOGGLE_TODO
Action Creator	[verb][Noun]	toggleTodo
Reducer	set[PathToStateKey]	setTodosFilter
Selector	get/is[PathToStateKey]	getTodosById, isTodoCompleted
Story	[Feature]Stories	TodoStories

rafaelrozon

import React from 'react';
import { storiesOf } from '@storybook/react';

// 1. import axios and MockAdapter
import  axios from 'axios';
import  MockAdapter from 'axios-mock-adapter';

// 2. create the mock
const mock = new MockAdapter(axios);

rafaelrozon

import React from "react";
import Button from ".";

// Args Setup
const Template = (args) => <Button {...args} />;

export const Playground = Template.bind({});

const buttonTypes = {
  SUBMIT: 'submit',

rafaelrozon

const getUser = (overrides = {}) => {
    const defaultValues = {
        username: "Some User",
        anchor: "@someuser",
        image: "https://webapp/static/images/someuser.png"
    };
    return Object.assign(defaultValues, overrides);
};
export default getUser;

rafaelrozon

const path = require('path');
const cp = require('child_process');

function runScript(scriptFile) {
    cp.execFile(path.resolve(__dirname, `../scripts/${scriptFile}`), (error, stdout, stderr) => {
        if (error) {
            console.log('runScript/error: ', error);
        }

        if (stderr) {

rafaelrozon

1. Bootstrap project

  npm i -g yo generator-eslint
  mkdir eslint-plugin-my-plugin
  cd eslint-plugin-my-plugin
  yo eslint:plugin
  yo eslint:rule
  npm i

2. Go to https://astexplorer.net/

rafaelrozon

import React from "react";
import {storiesOf} from "@storybook/react";
import { withKnobs, text } from '@storybook/addon-knobs';
import Button from ".";


const storiesOf("Button", module).
    addDecorator(withKnobs)
    add("Default", () => {
        return <Button type="button" text="Click me" />

rafaelrozon

/components
    - only global components

/features
    - widgets of the app grouped by domain
    /feature (todo)
        /components
            SomeFeature.jsx (TodoSomeFeature)
            AnotherFeature.jsx (TodoAnotherFeature)

rafaelrozon

|-- workspace
    |-- src
        |-- pages
        |   |-- Home.jsx
        |   |-- Todos.jsx

rafaelrozon

import React from 'react';
import getDisplayName from 'react-display-name';
import { withNamespaces } from 'react-i18next';

const translate = (WrappedComponent) => {

    class Container extends React.Component {
        static displayName = `TranslateContainer(${getDisplayName(WrappedComponent)})`;
        render() {
          return (