Component Generation

To view the templates I have created as part of this research, follow this link: https://github.com/flexera/ui-react-components/tree/UI-3120/_templates

Introduction

An area for improvement for the component library would also involve the addition of component generation, or component templating. This would mean that if the team needed to create a new component, the generator would instantly create:

• componentName.tsx
• styled.ts
• types.ts
• index.ts
• / tests
• componentName.test.tsx

This both benefits existing members of Team Obsidian, but would also assist new hires to the team so that they have a consistent syntax and coding patterns to follow for each component.

For the component generation I have used a tool called hygen, which uses *.ejs.t files as it's templating engine.

For this demo purpose I have created a script called yarn generate which you can run in the terminal. This will allow anyone to generate their own custom component.

The name of our component comes from a prompt.js file which allows you to add custom prompts, as seen in the previous gif.

    // see types of prompts:
    // https://github.com/enquirer/enquirer/tree/master/examples
    //
    module.exports = [
      {
        type: 'input',
        name: 'name',
        message: "What would you like to call your component?"
      },
    ]
    

<%= name %> is derived from the prompt "What would you like to call your component?", which we can then feed into our template files like the below code snippet.

    ---
    to: packages/ui-react-components/components/components/<%= name %>/<%= name %>.tsx
    ---
  
    import React, { FC } from 'react';
    import { Styled<%= name %> } from './styled';
    import { <%= name %>Props } from './types';
  
    export const <%= name %>: FC<<%= name %>Props> = ({ children }) => (
      <Styled<%= name %>>{children}</Styled<%= name %>>
    );
    

For a more real life example, below is a screenshot of the file structure when creating a new component titled "Accordion":