Development Guidelines

Guideline to work with Custom Components

These guidelines outline the best practices and requirements for developing custom components in Limio.

How to create new Custom Components

To create a Custom Components, you can:

• take an existing Limio Component and turn it into a Custom Component to accelerate your development.

• Create one from scratch.

It is important to note that all Custom Components are owned and maintained by your development team once created or forked. Each Custom Component can be laid out as you wish, spit into multiple files or a single file containing all of your logic.

Styling

Use .css files for styling your components. Ensure all visual designs and layouts are implemented using CSS, as other styling methods (e.g., SCSS or inline styles) are not supported.

Understanding your Key files

There are some key files you should know about:

1. Component Entry Point:

   • File Path: ./components/[componentDir]/index.js

   • This is the main file of your component where your React component is exported.

   • Your component must be exported as the default export from this file.

2. Storybook File:

   • File Path: ./component-playground/src/stories/[componentDir].stories.js

   • This file defines your component's stories for Storybook, allowing you to display and test your component in various states and configurations.

   • Use Storybook to test and showcase your component in various states. This ensures functionality across multiple scenarios and datasets.

3. Component Package JSON:

   • File Path: ./components/[componentDir]/package.json

   • Contains:

     • Dependencies: Manage external packages required by your component. These packages will be bundled with your component during the build process.

     • Limio Props: Define custom properties (e.g., string, boolean, picklist) to make your component customizable within the Limio ecosystem. This allows users to adapt the component's behavior and appearance according to their needs. You can learn more about each Prop Types here.

   • Keep the "react": "*" dependency to ensure compatibility between your component and Limio's version of React.

   • Keep your package.json clean and test fields to ensure smooth integration with Limio.

   • The name, description, and version for your component are defined in the package.json file. These fields:

     • Appear to the user in Limio's Page Builder.

     • Are pulled into your component during rendering.

Example package.json

jsonCopyEdit{
  "name": "headings",
  "version": "1.0.0",
  "description": "A headings component",
  "main": "./index.js",
  "dependencies": {
    "@limio/catalog": "^2.1.0",
    "react": "^16.14.0",
    "react-i18next": "^11.3.1"
  },
  "limioProps": [
    {
      "id": "heading",
      "label": "Heading",
      "type": "string",
      "default": "Lorem ipsum dolor sit amet"
    },
    {
      "id": "subheading",
      "label": "Subheading",
      "type": "string",
      "default": "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
    },
    {
      "id": "componentId",
      "label": "Component Id",
      "type": "string",
      "default": "headings-limio"
    }
  ]
}

SEO best practices

• Use Semantic Headings (h1, h2, etc.) Properly

  • Each component should use appropriate heading levels (h2, h3, etc.) based on its placement in the page.

  • Avoid multiple <h1> tags unless the component is the primary heading of the page.

• Ensure Proper Use of ARIA Attributes

  • If the component is interactive (e.g., buttons, modals, dropdowns), use proper ARIA roles (e.g., role="button", aria-expanded, aria-labelledby).

  • This helps screen readers and improves usability, indirectly benefiting SEO.

• Use Descriptive alt Attributes for Images

  • If the component includes an image, always provide an alt attribute.

  • Avoid generic descriptions like "image"; use meaningful content.

• Avoid Excessive Nesting

  • Use only the necessary number of divs (<div>), spans, or other elements. Over-nesting can make the HTML structure difficult to interpret.

• Use Meaningful Link Text

  • If the component includes links, avoid generic anchor text like "Click here".

  • Instead, use descriptive text like <a href="example.com">Learn more about our services</a>.