1.3.1 • Published 2 years ago

@simmalugnt-se/next-components v1.3.1

Weekly downloads
-
License
-
Repository
github
Last release
2 years ago

Next components library

By Simma Lugnt

Info

This project was setup using inspiration from these articles:

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
1.2.0

2 years ago

1.1.0

2 years ago

1.3.1

2 years ago

1.3.0

2 years ago

1.0.3

3 years ago

1.0.2

3 years ago

1.0.1

3 years ago

1.0.0

3 years ago