Bonkers-ui NPM

Recommended IDE Setup

Setup project

Use bun to install all dependencies with the frozen lockfile
```
bun i
```
To run the storybook
```
bun storybook
```
open http://localhost:6006/

For use in a consuming project

Install the component library with your desired package manager.
```
	- This projects uses TailwindCSS @ v4, which does not require a tailwind.config.{js,ts} file. _Note:_ Please refer to the TailwindCSS documentation for more information and up-to-date instructions.
```
- If the client is built with Next.js, please ensure tailwindcss, @tailwindcss/postcss and postcss are installed.
- If the client is built with Vite, please ensure tailwindcss and @tailwindcss/vite are installed.
Previously the Bonkers-UI tailwind plugin was implemented by adding it to the plugins array of the tailwind config file. Now, all that is required is to add the Bonkers-UI CSS theme file to the styles entry point of the client.
Ensure that the Bonkers-UI theme is included in the project's CSS entry point, eg. src/app/globals.css in a Next.js project or src/styles.css in a Vite project.
It is also required, at time of writing, to add the Bonkers-UI library as a source in the CSS entry point. Note: the path to the Bonkers-UI source files in the node_modules directory should be relative to the CSS entry point.

@import 'bonkers-ui/theme';;
@source "../node_modules/bonkers-ui";

Please ensure that your tsconfig file is configured with moduleResolution set to Bundler or NodeNext (depending on your project setup) to allow for the Bonkers-UI types to be resolved. Example:

{
	"compilerOptions": {
		"target": "ES2020",
		"module": "ESNext",
		"strict": true /* Specify what module code is generated. */,
		"verbatimModuleSyntax": true,

		"esModuleInterop": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */,
		"forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */,
		"skipLibCheck": true /* Skip type checking all .d.ts files. */,
		/* Bun Settings */
		"moduleResolution": "node",
		"noEmit": true,
		"allowImportingTsExtensions": true,
		"moduleDetection": "force",
		"resolveJsonModule": true,
		"isolatedModules": true,
		"jsx": "preserve"
	},
	"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx"],
	"references": [{ "path": "./tsconfig.node.json" }]
}

Within a Next.js project, it is requiredd to add the Tailwind PostCSS plugin to the clients postcss.config.mjs file.

/** @type {import('postcss-load-config').Config} */
const config = {
	plugins: {
		"@tailwindcss/postcss": {},
	},
};

export default config;

Bonkers-UI has been successfully installed to your project, now import any components you need!

import React from "react";
import { UiButton, EButtonTypes, EButtonSizes } from "bonkers-ui/UiButton";
import { UiInput, EInputKind } from "bonkers-ui/UiInput";

export type TNewComponent = {
	placeholder: string;
	heading: string;
	subLabel?: string;
	children: React.ReactNode;
};

export const NewComponent: React.FC<TNewComponent> = ({
	children,
	placeholder,
	heading,
	subLabel,
	...props
}) => (
	<div {...props}>
		<UiButton size={EButtonSizes.LARGE} kind={EButtonTypes.PRIMARY}>
			{children}
		</UiButton>

		<UiInput
			kind={EInputKind.PRIMARY}
			placeholder={placeholder}
			full-width
			className="mb-md"
			heading={heading}
			sub-label={subLabel}
		/>
	</div>
);

Flow to develop

We use only the develop branch as a base for creating new branches
Ensure to pull the latest changes before creating a new branch
Preferred naming of branches:
- feature/[feature-name]
- hotfix/[fix-name]
Preferred commit message
- update([file[s]-name]): [message] for example - update(main.css, header.tsx): change header to .header
- fix([file[s]-name]): [message]
- add([file[s]-name]): [message
When you are ready to push just merge (do not rebase) develop into the current branch
Fix any merge conflicts that this creates
Next create pull request to develop (you can squash multiple commits when merging)
After the pull request is merged to develop you can see it in staging https://bonkers-ie.github.io/bonkers-ui
Only after reviewing and testing the changes in staging, then create a merge request from develop to master
After you merge to master, the patch version will upgrade x.x.^x and you can use this version in the package