Add a New Component to RS-Components

Create the component

• Decide the size of your component (atom, molecule, organism, template). View existing components in these directories to get the idea of the component's scope.
• Follow the file naming convention. Your component will have a directory name, and a .vue file prefixed with _ (ex: _form-select.vue).
• Prefix your component's reference name with rs-. Example:
• Where possible, import and use existing components to achieve your result.
• If desired, add an mdx file for Storybook to test the component with (use other component's Storybook mdx files as an example).
• When you are finished your component and want it to be used in a consumer UI app, run npx lerna run build:generate in the monorepo's root to trigger the regeneration of a distributable file called components.js that exports all components in the rs-components package.
• Your component can now be used in the UI consumer app.

Sample Component

A component that takes two props defined in src/components/atoms/my-component/_my-component.vue:

<template>
<h3>Hi, I'm {{ fullName }}</h3>
</template>
<script lang="ts">
import Vue from 'vue';

export default Vue.extends({
  name: 'rs-my-component',
  props: {
    firstName: String,
    lastName: String,
  },
  computed: {
    fullName() {
      return `${this.firstName} ${this.lastName}`;
    }
  },
});
</script>
<style lang="scss" scoped>
h3 {
  color: red;
}
</style>

To implement this component after running the generate script, I'll use it in rs-admin-ui/src/views/main/Home.vue:

<template>
  <div>
    <rs-my-component :firstName="person.first" :lastName="person.last" />
  </div>
</template>
<script lang="ts">
  import Vue from 'vue';
  
  export default Vue.extends({
    name: 'home',
    data() {
      return {
        person: {
          first: 'Alex',
          last: 'Davis',
        },
      };
    }
  });
</script>