Components

Introduction

A component library designed to simplify reusability of components in projects, providing commonly used components, hooks and types.

Installation

To use @phpcreation/frontend-components-react-nextjs-bundle in your project, follow these steps:

Open a terminal in your project root

Create a Github Personnal Access Token

How to create a Github PAT :

Create a Github Personal Access Token


npm login --scope=@phpcreation --auth-type=legacy --registry=https://npm.pkg.github.com

username: your github username in lowercase
password: The PAT you just created

Install the Package


npm install @phpcreation/frontend-components-react-nextjs-bundle

Setup

Environment Variables

Follow these steps to manage environment variables correctly :

Environment Variables Management

.env


# App Id
NEXT_PUBLIC_APP_ID= # The App Id
 
# Feedback form
NEXT_PUBLIC_TICKET_FEEDBACK= # The URL to the feedback form

Translations, Theme and Styles

Follow the steps in the following documentation to setup the Translations, Theme and Styles :

Setup Translations

Setup Theme

Setup Styles

Usage

Step 1: Importing Utilities

Example: Import a Utility Function


import {
  Button,
  CustomInput,
  CustomUnitInput,
} from "@phpcreation/frontend-components-react-nextjs-bundle/components";
 
  return {
    <div>
      <CustomUnitInput
         fqcnBUI={fqcnBUI}
         name="discount"
         label={t("discount")}
         placeholder={t("Placeholder.discount")}
         type="number"
         required
         unit={"%"}
      />
    </div>
  }