bonkers-ui
v2.0.2
Published
Bonkers ui library
Downloads
295
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.
- Insure
autoprefixer
,postcss
andtailwindcss
are installed
- Insure
In your
tailwind.config.ts
, add the Bonkers-UI tailwind plugin to yourplugins
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: [
/* ...other directories containing Tailwind styled components/pages */
"./node_modules/react-ui/**/*.{js,ts,tsx}",
],
plugins: [bonkersUiConfig],
};
import type { Config } from "tailwindcss";
import bonkersUiConfig from "react-ui/plugin";
import { PluginCreator } from "tailwindcss/types/config";
const config = {
content: [
/* ...other directories containing Tailwind styled components/pages */
"./node_modules/react-ui/**/*.{js,ts,tsx}",
],
plugins: [
bonkersUiConfig as { handler: PluginCreator; config?: Partial<Config> },
],
} satisfies Config;
export default config;
- 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 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" }]
}
- 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";
import { EInputKinds } from "bonkers-ui/types";
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