open-index/open-npm huggingface dataset:
npm package: @simmalugnt-se/next-components
Description: React and Next components created by Simma Lugnt
Latest version: 1.3.1

# 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](https://articles.wesionary.team/react-component-library-with-vite-and-deploy-in-npm-579c2880d6ff)
* [How to Create and Publish React TypeScript npm Package With Demo and Automated Build](https://betterprogramming.pub/how-to-create-and-publish-react-typescript-npm-package-with-demo-and-automated-build-80c40ec28aca#a15d)

## Using this library
### 1. Install into your project
```bash
cd path/to/my-project
npm i @simmalugnt-se/next-components
```

### 2. Import the components you like
```Javascript
// 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:
```bash
src/lib/components/MyComponent.tsx
```

Export the component in src/index.ts:
```diff
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](#guidelines) 

### 3. Testing your component
1. Build this project:   
   ``` npm run build ```
2. Import locally in a test project  
   ```bash 
   cd path/to/test-project   
   npm install ../path/to/next-components
   ```
3. Import and use your component to make sure it works as intended!  
   ```Typescript
   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```


## <a name="guidelines">Guidelines</a> 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
*