@poap/poap-components

@poap/poap-components is a collection of reusable styles and components for building POAP specific applications. The library includes a variety of components such as text, buttons, forms, and layouts with the latest POAP style.

Hosted examples: https://poap-xyz.github.io/poap-components/

Requirements

• Core-js (if using Vite)

Installation

You can install @poap/poap-components via npm:

npm install @poap/poap-components

Usage

You can use components like this

import { Button } from '@poap/poap-components'

function MyPage() {
    return (
        <Button>Click me!</Button>
    )
}

Making changes

To start using this library, first run the following command to install the necessary dependencies:

npm i

Once the installation is complete, run the following command to start the development server:

npm start

This will start a local instance of Storybook, where you can view and interact with the library's components.

To sumbit a change:

• [ ] edit the components in the src/components folder
• [ ] increment the version number in package.json
• [ ] commit and push your feature branch

Modifying Components/Modules

If you need to make changes to a component, navigate to the relevant file in src/components/ and modify or add it as needed. Take a look in the Button folder for file and folder structure.

Note: When adding or exporting new components, make sure to do so in the appropriate index.js file.

Creating Stories

If new components are created make sure to also create a story to showcase it in Storybook. To do this, create a new story file in the component folder and use the title tag to properly add the story to the right section, heading, or chapter. For example:

export default {
  title: 'Form fields/Atoms/Button',
  component: Button,
};

This will add the Button component to the "Form fields" section, under the "Atoms" heading.

Once you have created your story, it will automatically be added to the Storybook UI, where you can view it and make sure it is working as intended.