Recommended IDE Setup

• Webstorm
• VS Code
  • Volar
  • Volar-ts
  • es6-string-html
  • Editorconfig
  • Tailwind

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.

  • 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