(Refactor) Documentation of file/folder names and variable names.

[SamuelPelletierEvraire]

Description

Refactor the FertiScan project by documenting and standardizing the naming conventions for files, folders, and variables. This involves creating a comprehensive guide that outlines the project's naming scheme to improve code readability, maintainability, and consistency throughout the codebase.

Task

• [ ] Creation of a new page on the wiki named ConventionNaming
• [ ] All folders in the project follow the naming convention.
• [ ] All files in the project follow the naming convention.
• [ ] New GitHub check created for the naming convention compliance.

Child tasks

Next task to do

188

[SamuelPelletierEvraire]

Enhanced Documentation for FertiScan Refactoring

As FertiScan embarks on the process of refactoring, it's imperative to establish a robust nomenclature and coding conventions to ensure that our React.js application maintains its readability and maintainability, even as it scales in complexity. React.js offers a powerful framework for building user interfaces, and by incorporating these guidelines, the FertiScan team can uphold a standard of code quality that matches this innovative platform.

Nomenclature Guidelines for FertiScan Programming

These guidelines define the rules for naming within the FertiScan application. By adhering to these conventions, we promote clarity and consistency across our codebase.

Descriptive Naming Best Practices

Descriptive naming within React.js involves selecting names that are meaningful and self-explanatory, thereby enhancing the understandability of variables, functions, components, files, and other code elements.

Detailed Guidelines for Descriptive Naming

Components

Assign component names that precisely convey their functionality or place in the application. Opt for descriptive nouns or noun phrases for a transparent indication of the component's role. Use TitleCase.

// Preferred: Descriptive and clear component name
<UserProfile />

// Discouraged: Ambiguous or non-descriptive component name
<Component1 />

Variables and Functions

Choose variable and function names that articulate their role or the information they manage. Stick to camelCase naming for variables and verbs in lowercase for functions.

// Preferred: Clear and descriptive variable and function names
const userDisplayName = 'John Doe';

function calculateTotalPrice(items) {
  // Implementation details
}

// Discouraged: Vague or non-intuitive names
const uName = 'John Doe';

function calcPrice(items) {
  // Implementation details
}

Files and Directories

Ensure that file and directory names accurately reflect their content. Employ TitleCase for enhanced legibility.

// Preferred: Descriptive file and directory naming
UserProfile/UserProfile.tsx
InputComponent.css

Props and State

Name props and state variables in a manner that reflects their objective and the type of data they contain.

// Preferred: Clear and descriptive props and state naming
<ProfileCard fullName={user.fullName} age={user.age} />

class UserProfile extends React.Component {
  state = {
    fetchingData: true,
    userDetails: null,
  };
  // Other methods and rendering
}

// Discouraged: Generic or ambiguous names
<ProfileCard n={user.fullName} a={user.age} />

class UserProfile extends React.Component {
  state = {
    loading: true,
    info: null,
  };
  // Other methods and rendering
}

Event Handlers

Name event handlers in a way that describes the triggered action or the specific event they respond to.

// Preferred: Intuitive event handler naming
function handleSubmitProfileForm() {
  // Event handling logic
}

// Discouraged: Vague event handler naming
function onFormSubmit() {
  // Event handling logic
}

By implementing these naming conventions, we aim to create code that is not only efficient but also intuitive and easy to navigate. This is a collaborative effort to enhance our development practices, and our front-end team is encouraged to embody these standards throughout the refactoring process.

Reference Sources

• Clean Code Practices in React: React.js Clean Code Best Practices

[SamuelPelletierEvraire]

Here is some rought implementation of a workflow for looking at the naming convention

For in code :

module.exports = {
  extends: [
    // Assuming you're extending recommended configurations for React
    "eslint:recommended",
    "plugin:react/recommended"
  ],
  parserOptions: {
    // Be sure to set the ECMAScript version you are using
    ecmaVersion: 2020,
    sourceType: "module",
    ecmaFeatures: {
      jsx: true
    }
  },
  settings: {
    react: {
      version: "detect"
    }
  },
  rules: {
    // Naming of components in PascalCase/TitleCase
    "react/jsx-pascal-case": ["error", {
      "allowAllCaps": true,
      "ignore": [],
    }],
   "camelcase": ["error", {
    "properties": "never",
    "ignoreDestructuring": false,
    "ignoreImports": false,
    "ignoreGlobals": false,
  }],
  },
  // ...
};

Custom script for lowercase const

module.exports = {
  meta: {
    type: 'suggestion',
    docs: {
      description: 'enforce lowercase naming for constant variables',
      category: 'Stylistic Issues',
      recommended: false,
    },
    fixable: null,
    schema: [],
  },
  create(context) {
    return {
      VariableDeclaration(node) {
        if (node.kind === 'const') {
          for (const declarator of node.declarations) {
            const identifier = declarator.id;

            // Basic check to ensure that the variable is a constant (primitive value, not an object)
            if (typeof identifier.name === 'string' && /^[A-Z]+$/.test(identifier.name)) {
              context.report({
                node: identifier,
                message: 'Constant name "{{ name }}" should be in lowercase.',
                data: {
                  name: identifier.name
                }
              });
            }
          }
        }
      }
    };
  }
};

For file and directory

 - name: Run ESLint for code convention checks
        run: npx eslint 'src/**/*.{js,jsx,ts,tsx}'

      - name: Check Naming Convention for Directories
        run: >
          find src -type d ! -name 'src' ! -path 'src/__*' ! -path 'src/**/*.test.*' -print0 |
          xargs -0 -n1 bash -c 'if [[ ! "$0" =~ src/([A-Z][A-Za-z0-9]+)+$ ]]; 
          then echo "Directory name not in TitleCase: $0"; exit 1; fi'

      - name: Check Naming Convention for Files
        run: >
          find src -type f \( -name '*.js' -o -name '*.jsx' -o -name '*.ts' -o -name '*.tsx' \) 
          ! -path 'src/__*' ! -path 'src/**/*.test.*' -print0 |
          xargs -0 -n1 bash -c 'if [[ ! "$0" =~ src/([A-Z][A-Za-z0-9]+)+/*[A-Z][A-Za-z0-9]*\.[jt]sx?$ ]]; 
          then echo "File name not in TitleCase: $0"; exit 1; fi'