@cogeco-web/components v5.1.10

< Back to main

@cogeco-web/components

Library of React components used at Cogeco across multiple projects

Installation

yarn add @cogeco-web/components

or

npm install @cogeco-web/components

Usage

Example

import { ExampleButton } from '@cogeco-web/components'

const myComponent = () => JSX.Element {
  return (
    <ExampleButton title='My Button' />
  )
}

Adding a new component

Here are the steps in order to add a new component to the library.

1. Create a folder with the name of your component within /packages/components/src/. Use PascalCase to name your folder.
2. Create an ComponentName.tsx file within the new folder.
3. Put your code in the ComponentName.tsx file and make sure you export it with same name as the folder you created. For simple component (as form field component, simple container, wrapper of an HTML tag), please implement the React forwardRef method, For Example:

import { ForwardRefRenderFunction, ForwardedRef, forwardRef } from 'react'

interface ExampleButtonProps {
  label: string
}

const ExampleButton: ForwardRefRenderFunction<HTMLButtonElement, ExampleButtonProps> = (
  props: ExampleButtonProps,
  ref: ForwardedRef<HTMLButtonElement>
): JSX.Element => {
  return <button ref={ref}>{props.label}</button>
}

export default forwardRef<HTMLButtonElement, ExampleButtonProps>(ExampleButton)

Here is a common example for other components

interface ComplexComponentExampleProps {
  title: string
  description: string
}

const ComplexComponentExample = (props: ComplexComponentExampleProps): JSX.Element => {
  return (
    <div>
      <h1>{props.title}</h1>
      <p>{props.description}</p>
    </div>
  )
}

export default ComplexComponentExample

4. Adding a dependency library for your new component (OPTIONAL)
   If you need to install a dependency library for your new component, install it using the following script (via terminal, at the root fo the repo, NOT within the /packages/components folder)
   A - If it's a dev dependency

   yarn workspace @cogeco-web/components add -D my-npm-library-name

   B - Otherwise

   yarn workspace @cogeco-web/components add my-npm-library-name

5. Open the ./src/index.ts file and then:

        - Add an import for your newly created component

import ExampleButton from './ExampleButton'

        - Add the component to the list of exported components (Note: Please try to keep the exports organized alphabetically)

export {
  ...
  ExampleButton
  ...
}

6. Now that you are done, run the follwing scripts (at the root fo the repo, NOT within the /packages/components folder).
   This will update the definition files and create a new build, hence making your new component available to use within other packages of the library.

yarn install
yarn build

7. Create a story for the StoryBook documentation
   Follow the steps documented here to learn how to add stories to the Storybook documentation

Reference

For reference, check the ExampleButton