claytoncountysd/jotsjailinterface repository overview

⁠React Starter App

⁠Resources

• StoryBook⁠

⁠Setup

⁠NPM Dependencies

• when installing a module, specify a version to lock it in.

• Run 'npm install PackageName@version' to specify the version.

⁠Prettier

Prettier does not include all of the configuration settings we need to enforce our ESLint rules and coding standards. Luckily, ESLint includes a --fix command that will format the code based on the eslint configuration. We will be using a package that combines ESLint --fix with Prettier.

• Install the "Prettier ESLint" VS Code plugin from the marketplace.

• In your editor settings, set the default formatter to "Prettier ESLint" (Settings UI) or add the line "editor.defaultFormatter": "rvest.vs-code-prettier-eslint" to your settings JSON.

• In your editor settings, turn on "Editor: Format on Save" (Settings UI) or add the line "editor.formatOnSave": true to your settings JSON.

• To run prettier manually in the console, run npm run prettier

• Further Prettier documentation can be found at the Prettier website⁠

⁠ESLint

• After configuring "Prettier ESLint", The .eslintrc.json file will be automatically loaded as the ESLint configuration.

⁠Github action - Build and Push Docker images to Docker Hub

• Action triggered on push to Main, Develop, Release/*, the image will be tag with the branch name

• In Github- Setting - secrets - Add the following secrets (by repository owner or authorized personnel)

  • DOCKER_USERNAME = username authorized to the docker hub repo registry
  • DOCKER_PASSWORD = password of the the username authorized to the docker hub repo registry
  • DOCKER_REPO_REGISTRY_NAME = ex: claytoncountysd
  • DOCKER_REPO_NAME = ex: react-starter-app

  

⁠Coding standards checklist

• Booleans should always be named variableNameFlag

• Arrays should be named nameOfVariableList

• Use fully camel-case component names (ComponentName vs componentName)

• A parent component that passes its props to a child should have the same name for those props as the child.

• Do not use "var" to declare variables. Use const for static variables and let for nonstatic

• Use useMemo to simplify stateful logic that only exists to derive a value from one or more other values.

• Use propTypes and defaultProps to reduce non-semantic code to validate variables

• Use specific array functions (map, filter, reduce, etc) over for loops

• Use optional chaining to short-circuit when accessing properties with dot notation or bracket notation

• Simplify if / else statements using ternary operators where possible

• No dangling if statements

• Keep storybook up to date

• Descriptive comments of a section of code's purpose or potential issues are expected use /* C style */ comments. Use /** */ comments to annotate prop types (may need jsdocs to get intellisense working with this). Use /*** ***/ comments for headings or to signify logical sections of code. Use standard // C++ style comments for commenting out code when testing (make sure to clean it up though!), e.g.

/*** prop types ***/
Form.propTypes = {
    /**
     * Title which appears in form frame if applicable
     */
    title: PropTypes.string,
    /**
     * Initial form data E.g. data={{firstName: "Bill", lastName: "Jameson", enabled: true}}
     */
    data: PropTypes.object,
    /** For debugging purposes
     * Show all -- current form data, current form validation, current form status, initial data of form
     */
    showInfo: PropTypes.bool,
    /** For debugging purposes
     * Show current form data
     */
    showData: PropTypes.bool,
    /** For debugging purposes
     * Show current form validation
     */
    showValidation: PropTypes.bool,
    /** For debugging purposes
     * Show current form status
     */
    showStatus: PropTypes.bool,
    /** For debugging purposes
     * Show initial data of form - or last submitted data if submitted
     * Resetting form will change current form data to this value
     */
    showInitialData: PropTypes.bool,
    /**
     * Indicates whether form includes default submit button
     */
    submitButton: PropTypes.bool,
    /**
     * Indicates whether form includes default reset button
     */
    resetButton: PropTypes.bool,
    /**
     * Indicates whether form includes default clear button
     */
    clearButton: PropTypes.bool,
    /**
     * Indicates action to occur on (after) successful submit
     */
    onSubmit: PropTypes.func,
    /**
     * If true, validation errors will display only after first submit attempt
     */
    validateOnlyAfterSubmit: PropTypes.bool,
    /**
     * If true, form may be submitted even if data has not changed (dirty)
     */
    canSubmitUnchanged: PropTypes.bool,
    /**
     * Do not pass children as props. Instead, nest children between the opening and closing tags.
     */
    children: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
};

• Destructure props that are used in the component at the top of the function. Pass all child props generically, e.g.:

const Component = props => {
    const { prop1, prop3 } = props;

    return <Child {...props} />;
};

• If there are multiple children that require different props from the parent, destructure them into their own objects, e.g.:

const Component = props => {
    const { prop1, prop3 } = props;
    const child1Props = useMemo(() => {
        child1prop1 = props.uniqueProp1;
    }, [props]);

    const child2Props = useMemo(() => {
        child2prop1 = props.uniqueProp2;
    }, [props]);

    return (
        <>
            <Child1 {...child1Props} />
            <Child2 {...child2Props} />
        </>
    );
};

⁠Before Requesting a Review

• Look at standup notes for things that need to be changed and make those

• Look over every changed / new file and verify usage

• Remove unused declarations / imports

• Remove unused props

• Look for optimizations (useMemo etc)

• Find and resolve any todo statements if possible

• Look over every changed / new file it GitHub and verify file structure and naming

• Look over changed / new files and make sure no defunct code is present

• Pull the latest dev code and merge into your branch

• Verify usage of latest CJIS, hooks, utils, etc.

• Make sure there are no errors or warnings in the console or unused declarations/props remove console logs

• Verify that there are default props and prop types for every new file/prop in changed files

• Move update ticket column and add any needed notes

⁠Creating a new react app based off react-starter-app

• (In this example let's say we are creating a new repo called "new-react-app")

• (optional) Create a new blank repo on GitHub. Make no configuration changes.

  • For production use https://github.com/RicWilliamsCC/new-react-app⁠
  • For test you can use a test repo or https://github.com/bill-jameson/new-react-app⁠ (remember to delete the repo and replace with a blank repo if it already exists)

• Run the following commands on your local pc (e.g. in your repos folder):

  • git clone https://github.com/RicWilliamsCC/react-starter-app⁠ new-react-app

  • cd new-react-app

  • If you are working on or testing the init-script itself in development, change to your feature branch

    • git checkout (feature branch name)
    • For testing, update REMOTE_TARGET_URL in settings at the top of scripts/init-app.js

  • npm run init-app

    • When prompted, enter the name of your new repo (e.g. new-react-app)
    • Enter your GitHub credentials whenever prompted
    • When prompted, enter environment variable values
    • When prompted, confirm/enter default git flow settings
      • Branch name for production releases: [main]
      • Branch name for "next release" development: [develop]
      • Feature branches? [feature/]
      • Bugfix branches? [bugfix/]
      • Release branches? [release/]
      • Hotfix branches? [hotfix/]
      • Support branches? [support/]
      • Version tag prefix? 2.0 (you will have to enter this)
      • Hooks and filters directory? select default

• To contirm app runs properly

  • npm run start