Next components library

By Simma Lugnt

Info

This project was setup using inspiration from these articles:

• React Component Library with Vite and Deploy in NPM
• How to Create and Publish React TypeScript npm Package With Demo and Automated Build

Using this library

1. Install into your project

cd path/to/my-project
npm i @simmalugnt-se/next-components

2. Import the components you like

// Page.jsx

import { Hero, Button } from "next-components"

const Page = () => {
  return (
    <Hero title="Do you like buttons?">
      <Button label="I do!" />
      <Button label="I don't..." />
    </Hero>
  )
}

Creating components

1. Create a new branch

Create a new branch for your work. Examples:

• feature/slider-component
• fix/slider-max-width

Create a PR for your branch and describe the purpose.
Examples:

Add a slider component that shows images with text

or

Set a max width for slider to avoid it extending the window width

2. Add your component

Add a file under src/lib. Example:

src/lib/components/MyComponent.tsx

Export the component in src/index.ts:

import Button from "./lib/components/Button";
import Hero from "./lib/components/Hero";
+ import MyComponent from "./lib/components/MyComponent";

- export { Button, Hero };
+ export { Button, Hero, MyComponent };

2. Develop according to guidelines

You must follow the guidelines

3. Testing your component

1. Build this project:
   npm run build
2. Import locally in a test project

   cd path/to/test-project   
   npm install ../path/to/next-components

3. Import and use your component to make sure it works as intended!

   import { MyComponent } from 'next-components'
   // ...
   <MyComponent someProp='Test content' />

3. Write an automated test

@TODO: Add a guide for tests here

3. Update and publish this package

1. Build the project
   npm run build
2. Bump the version
   @TODO: Add info here
3. Publish the package
   npm publish

Guidelines for developing components

These are very important in order to keep the components library usable and maintainable.

1. Plan

• Identify the use cases for your component and decide which properties and features it really needs
• Check with a co-worker to test your idea before proceeding

2. Write

• Avoid complexity - write clean and readable code
• Comment your code where needed
• Avoid ESLint errors and warnings (or else your code won't build)

3. Test

• Test your code with different options and props
• Let someone else review your code