@beazubi/components NPM

beAzubi Components

Custom components to style your application.

Installation
Usage
Contributing

Installation

Login NPM: This is a private package. You need a npm-account and you must be an invited member to the package to use it.
```
cd your-application
npm login
```
Add package to project:
```
npm install @beazubi/components
```

Update next.config.js:

/** @type {import('next').NextConfig} */
const path = require('path');

const nextConfig = {
   webpack: (config, options) => {
      config.module.rules.push({
         test: /\.tsx?$/,
         include: [path.resolve(__dirname, 'node_modules/@beazubi/components')],
         use: [options.defaultLoaders.babel],
      });

      return config;
   },
}
module.exports = nextConfig

Create a directory "types" in your root and create a file "index.d.ts":
```
declare module "@beazubi/components"
```

Wrap your applications entry-point with MantineProvider and import ColorSchemeScript. Use theme from beazubi/components:

import {Theme} from "@beazubi/components";
import {ColorSchemeScript, MantineProvider} from "@mantine/core";

export default function RootLayout({children,}: {
  children: React.ReactNode;
}) {
  return (
     <html lang="en">
     <head>
        <ColorSchemeScript/><title>Hello</title>
      </head>
     <body>
        <MantineProvider theme={Theme}>
          {children}
        </MantineProvider>
     </body>
  </html>
 );
}

Usage

Use custom component in your application.

Example 1 - Alert:

import {Alert} from "@beazubi/components";
import styles from './page.module.css'

export default function Home() {
   return (
      <main className={styles.main}>
         <div>
            <Alert text={'hello'} type={'warning'}/>
         </div>
      </main>
   )
}

Example 2 - MultiSelect:

import {MultiSelect} from "@beazubi/components";
import styles from './page.module.css'

export default function Home() {
   return (
      <main className={styles.main}>
         <div>
            <MultiSelect data={["React", "Angular", "Vue"]} label={'MyMultiSelect'}/>
         </div>
      </main>
   )
}

Contributing

Start Storybook: Use "npm run storybook" to start the storybook server.
Commit changes: Use "npm run commit" to commit changes. This will start a wizard to help you write a good commit message.