mrksbnc / bamboo

Vue 3 UI library built with Vite, Tailwindcss and Storybook

Bamboo

Lightweight and flexible (hence the name) UI Library built with Vite and Vue 3. The documentation is created with Storybook.

Project setup

You need to have node and npm installed on your machine as a prerequisite. You can download and install them from here.

Install dependencies

To install the dependencies, run the following command:

npm install

Run documentation

To start the development server, run the following command:

npm run storybook

This will start the Storybook server and open the browser at http://localhost:6006. Here you can see the documentation for the components and play around with them.

Build for production

To build the components for production, run the following command:

npm run build

This will build the components and generate the static files in the dist folder.

Build storybook for production

To build the Storybook documentation for production, run the following command:

npm run build-storybook

This will build the Storybook documentation and generate the static files in the static folder. GitHub Pages uses the directory to host the documentation.

Run your unit tests

The project uses Vitest for unit and snapshot testing. To run the tests, run the following command:

npm run test

Lints and fixes files

The project uses ESLint and Prettier for linting and formatting. To run the linter, run the following command:

npm run lint

License

MIT

bamboo's Issues

feat: bo-badge component

• Implement a generic badge UI component with custom size, label, type, variant

• Variants are the same with the BoButtonVariant

• Types are default, outline, pill

• Sizing should follow BoSize

• Storybook story

• Tests

bo-avatar component

• Create a new avatar component named bo-avatar
• Support BoSize
• Support img and initial
• Support random bg-color if no image was provided for the component
• Support default bg-img
• Support dark mode

bo-modal-container component

• Create a bo-modal-container component
• Read the modal data from the layout provided by the useLayout composable
• Display components based on the state
• Storybook
• Tests

bo-textarea component

• Create a bo-textarea component
• It should support BoSize
• It should support BoInputVariants
• Should support the input states and enable custom placeholder text
• Support dark mode
• Resize support

bo-input component

• New bo-input component
• It should support multiple input types
• In the case of type="number the input should filter any letter
• It should support multiple variants and sizes
• It should support prefix and suffix icons
• Support dark mode
• Storybook updates
• Tests

class refactor

• separate the style calculation from the ui

bo-toast component

• Create a bo-toast component
• The toast should support multiple variants
• It should enable a custom title and description
• The close action icon should be optional
• Toast position inside the container
• auto-hide
• Make it compatible with the useLayout composable
• Storybook
• Tests

refactor project and separate components

• component separation
• global enums and classes
• code cleanup
• eslint config and version update

bo-loading-spinner and other loader components

• Create bo-loading-spinner component
• It should support BoSize and BoVariant
• Add loader support for the existing components in the library
• Create other loader components like loading dots or shapes
• The loaders should have an optional label property
• Create a bo-loader-view component. The page should support any other loader component from the lib or custom slots.
• Support dark mode

bo-toast-container component

• Create a bo-toast-container component
• Read the toast data from the layout provided by the useLayout composable
• Display components based on the state without disrupting the behaviour of the underlying UI
• Tests
• Storybook

bo-dropdown component

• Create a bo-dropdown component
• Support custom dropdown content with slot
• Support custom button content with slot
• Support BoSize
• Support multiple variants
• Support dark mode
• Storybook
• Tests

useLayout composable

• Create a composable to handle modals and toasts
• It should keep state
• Should provide all necessary functions to modify the state
• Type support
• Tests
• Documentation

bo-file-input component

• Create bo-file-input component
• It should support multiple variants
• It should support BoSize
• It should support prefix and suffix icons
• Support dark mode
• Storybook
• Tests

bo-dropzone component

• Create a bo-dropzone component
• It should support BoSize
• It should support any icon from the Icon enum
• It should support any text inside the component
• Storybook
• Tests

BoText

bo-badge component v2

• Update badge size
• Update badge style
• iconOnly variant

bo-modal component

• Create a bo-modal component
• The modal should have a backdrop
• It should support the clickOutside directive
• It should enable a custom title and description
• The close action icon should be optional
• Make it compatible with the useLayout composable
• Storybook
• Tests

bo-card component

• Create a bo-card component
• The card should support multiple image position
• The card should support dark mode
• It should support custom content with slot