bonkers-ui
v2.0.3
Published
Bonkers ui library
Downloads
212
Readme
Recommended IDE Setup
Setup project
Use bun to install all dependencies with the frozen lockfile
bun i
To run the storybook
bun storybook
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
andpostcss
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 orsrc/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 withmoduleResolution
set toBundler
orNodeNext
(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 clientspostcss.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 notrebase
) 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
tomaster
- After you merge to master, the patch version will upgrade x.x.^x and you can use this version in the package