Bonkers-ui NPM

Recommended IDE Setup

Setup project

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

For use in a consuming project

Install the component library with your desired package manager. - Insure autoprefixer, postcss and tailwindcss are installed
In your tailwind.config.js, add the Bonkers-UI tailwind plugin to your plugins array. Note: the content array should include the path to the Bonkers-UI source files once installed.

import bonkersUiConfig from "bonkers-ui/plugin";

export default {
	content: [
		"./node_modules/bonkers-ui/**/*.{vue,js,ts,jsx,tsx}",
	],
	plugins: [ bonkersUiConfig ],	
}

Ensure that the tailwind directives are included in your main.css file

@tailwind base;
@tailwind components;
@tailwind utilities;

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",
    "useDefineForClassFields": true,
    "module": "NodeNext",
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "skipLibCheck": true,
    "baseUrl": ".",

    /* Bundler mode */
    "moduleResolution": "NodeNext",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "preserve",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,


  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

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

<template>
	<div>
		<ui-button 
			:size="EButtonSizes.LARGE" 
			:kind="EButtonTypes.PRIMARY"
			>
			I'm a Bonkers Button
		</ui-button>

		<ui-input
			:kinds="EInputKinds.PRIMARY"
			placeholder="Placeholder"
			full-width
			class="mb-md"
			heading="Heading"
			sub-label="Sub Label"
		/>	
	</div>
</template>

<script setup lang="ts">
	import { UiButton, EButtonTypes, EButtonSizes } from "bonkers-ui";
	import UiInput from "bonkers-ui/ui-input"; // Deprecated Import Method
	import { EInputKinds } from "bonkers-ui/types";
</script>

Flow to develop

We use only develop to create new branch
First pull all changes and 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.vue): change header to .header
- fix([file[s]-name]): [message]
- add([file[s]-name]): [message]
When you are ready to push just merge(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 test staging you can 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 package