Reuse Package

Front-end Components

Link to the Package github : frontend-components-react (opens in a new tab)

Quick Tutorial

To reuse the package @phpcreation/frontend-components-react which is hosted privately in NPM privately through Github packages as a Registry, you will need to follow these steps:

Set up Github Account: Make sure that your Github account is authorized to access the organization's private repository where the package is hosted. Then, follow the instructions in Github's documentation to configure your project to use Github Packages.
Install the package: In your React project, you will need to either run npm install @phpcreation/frontend-components-react or add it to your package.json dependencies list and run npm install to install the package.
Import the components: Once the package is installed, you can import the components from @phpcreation/frontend-components-react in your React code. For example, if you want to use a component called Button, you can import it like this: the following are components that you can reuse from the package @phpcreation/frontend-components-react

import { Button } from '@phpcreation/frontend-components-react';

Use the components: With the components imported, you can use them in your React code just like any other component. For example, if you want to use the Button component, you can render it like this:

<Button onClick={() => console.log('Button clicked!')}>Click me</Button>

Update the package: you can update the package in your project by running npm update or yarn upgrade.

Exported components:

The package does actually export 3 types of modules

Basic components

CRUD components

Context

AppContextProvider: this module is used to config the data when using the Crud Components.

How to reuse the Package?

Simple components

As ususal for any react app, we need to import the desired component as follows:

import { Button } from '@phpcreation/frontend-components-react';
 
...
<Button variant="primary" title="click" />

Crud components

To use the Crud components component for exemple, you need first to wrap your app with the Context module, i.e the AppContextProvider. the easy way is to wrap the parent, i.e entry app file with the Context provider, so it can be possible to place Crud components anywhere in the tree. However, you can optimize and anly wrap the closest parent to the CRUD components in you app. For exemple, here is how you can wrap you parent component in Next.js with the context provider: _app.tsx

 
import AppConextProvider from  '@phpcreation/frontend-components-react';
...
function MyApp({ Component, pageProps }: AppProps) {
 
  return (
        <AppConextProvider>
          <Component {...pageProps} />
         </AppConextProvider>
 
  );
}

Later, you can use the CRUD components in your app, here is an exemple of using the Dashboard Component:

import Dashboard from '@phpcreation/frontend-components-react';
...
 
export default const Homepage = ()=>{
...
return
(<Dashboard
  appNav={appNav}
  heroTitle="Welcome on board"
  heroDesc="Our users can use this plateform to manage the tenants, hostnames , paramters and much more features to discover!"
  arraySections={[
    {
      resource: 'hostname',
      title: 'Manage hostnames',
      desc: `Configure hostnames, search hostnames and more features.`,
      icon: <IconHostname className="w-20 h-16 text-gray-700" />,
      href: '/hostnames',
    },
    {
      resource: 'tenant',
      title: 'Manage tenants',
      desc: 'Overview of the tenants, simple way to manage every aspect.',
      icon: <IconTenant className="w-20 h-16 text-gray-700 " />,
      href: '/tenants',
    },
    {
      resource: 'parameter',
 
      title: 'Change parameters',
      desc: `Manage parameters tied to each tenant, easy way to filter and configure.`,
      icon: <IconParameter className="w-20 h-16 text-gray-700" />,
      href: '/parameters',
    },
  ]}
  fqcn_bui={{
    Bundle: 'appBunlde',
    Unit: 'dashboard',
    Interface: 'homepage',
  }}
/>)
  }

Releases Roles