BUI (Basic UI Library)

BUI is a component library that provides a set of UI components for building modern web applications. It includes components like Grid, Box, Stack, and Button, each with extensive customization options.

How Can you Contribute in there

First clone this Repositories

git clone 'https://github.com/Sbholu/BUI.git'

Create A seperate Branch

 git checkout -b your-branch-name

Start Installation Using Yarn or NPM

Open your Command Prompt or Terminal and Run This command

yarn

For Start the Local Server

yarn storybook

For Build fiile for production

yarn build

Component Breakdown for a UI Library

1. Core Components

These are the fundamental building blocks of the library.

• Typography: Headings, paragraphs, captions, and other text styles.
• Color System: Theme colors, palettes, and utilities for color manipulation.
• Icon: A system to include and display icons.

2. Input Components

Used for user interaction and data input.

• Button: Primary, secondary, outlined, text, icon buttons.
• IconButton: Button with just an icon.
• Checkbox: Basic and with labels.
• Radio Button: Single radio button and grouped options.
• Switch: Toggle switch.
• TextField: Basic input, textarea, number input.
• Select: Dropdown menu for selection.
• Slider: Range slider for input.
• Toggle Button: Single and group toggle buttons.
• Autocomplete: Input with suggestions.
• Rating: Star or custom rating component.

3. Data Display Components

Components to show information in a formatted way.

• Avatar: Image or initials for user representation.
• Badge: Notification count or status indicator.
• Chip: Tags, selectable, deletable.
• Tooltip: Pop-up information on hover.
• Typography: Display text with varying styles.
• Divider: A horizontal or vertical line divider.
• Progress: Linear and circular progress indicators.
• Skeleton: Placeholder for loading content.

4. Navigation Components

For routing and guiding users through the application.

• AppBar: Top navigation bar.
• Drawer: Side panel for navigation or settings.
• Breadcrumbs: Show navigation path.
• Tabs: Switch between views.
• BottomNavigation: Bottom tab navigation.
• Link: For navigating between pages.

5. Layout Components

For creating page structures and layouts.

• Container: A fixed-width layout container.
• Grid: A responsive grid system.
• Stack: Vertical or horizontal arrangement.
• Box: A versatile container with spacing, padding, etc.
• Paper: A basic card-like container.
• Hidden: Conditional rendering based on screen size.

6. Feedback Components

Components that provide feedback to user actions.

• Alert: Success, error, info, and warning alerts.
• Snackbar: Temporary messages and notifications.
• Dialog: Pop-up modals for confirmation or input.
• Backdrop: Overlay to emphasize content focus.
• Spinner: Loading spinner for async actions.

7. Surfaces

Components that provide a surface to display content.

• Card: Container with optional media, actions, etc.
• Accordion: Expandable content section.
• Paper: A surface that raises elements on a background.
• Expansion Panel: More complex expandable content sections.

8. Utilities

Small, reusable components or functions to enhance usability.

• Portal: For rendering content outside of the parent DOM hierarchy.
• Popover: Displays floating content relative to another element.
• Transitions: Animations and transitions for components.
• ClickAwayListener: Detects clicks outside of a target element.
• Modal: Higher-level dialog component for showing custom content.

9. Form Components

For more complex forms and user input scenarios.

• FormControl: Provides context for form inputs.
• FormLabel: Label for form controls.
• FormHelperText: Text to help with form inputs.
• InputAdornment: Icons, text, or other adornments for input fields.

10. Charts and Visualization

For representing data visually.

• Line Chart
• Bar Chart
• Pie Chart
• Heatmap
• Scatter Plot

11. Advanced Components

More sophisticated, composite components.

• Date Picker: For date selection.
• Time Picker: For time selection.
• Calendar: Full calendar view with events.
• DataGrid/Table: Complex tables with sorting, filtering, pagination.
• Stepper: Step-based navigation.

12. Theme and Customization

For theming and customizing the UI components.

• ThemeProvider: Context provider for theme customization.
• GlobalStyles: Inject global CSS styles.
• CSS Baseline: Normalize default browser styles.
• Styled Components: For custom styling components.

13. Animation and Effects

Adding animations to components for better UX.

• Fade
• Slide
• Grow
• Collapse
• Zoom

Completed Component

Layouts

• Grid
• Stack
• Container
• Box

Inputs

• Button
• IconButton
• Checkbox
• Radio Button
• Switch
• TextField
• Select
• Slider

Component Breakdown for a UI Library

1. Core Components

These are the fundamental building blocks of the library.

• Typography: Headings, paragraphs, captions, and other text styles.
• Color System: Theme colors, palettes, and utilities for color manipulation.
• Icon: A system to include and display icons.

2. Input Components

Used for user interaction and data input.

• Button: Primary, secondary, outlined, text, icon buttons.
• IconButton: Button with just an icon.
• Checkbox: Basic and with labels.
• Radio Button: Single radio button and grouped options.
• Switch: Toggle switch.
• TextField: Basic input, textarea, number input.
• Select: Dropdown menu for selection.
• Slider: Range slider for input.
• Toggle Button: Single and group toggle buttons.
• Autocomplete: Input with suggestions.
• Rating: Star or custom rating component.

3. Data Display Components

Components to show information in a formatted way.

• Avatar: Image or initials for user representation.
• Badge: Notification count or status indicator.
• Chip: Tags, selectable, deletable.
• Tooltip: Pop-up information on hover.
• Typography: Display text with varying styles.
• Divider: A horizontal or vertical line divider.
• Progress: Linear and circular progress indicators.
• Skeleton: Placeholder for loading content.

4. Navigation Components

For routing and guiding users through the application.

• AppBar: Top navigation bar.
• Drawer: Side panel for navigation or settings.
• Breadcrumbs: Show navigation path.
• Tabs: Switch between views.
• BottomNavigation: Bottom tab navigation.
• Link: For navigating between pages.

5. Layout Components

For creating page structures and layouts.

• Container: A fixed-width layout container.
• Grid: A responsive grid system.
• Stack: Vertical or horizontal arrangement.
• Box: A versatile container with spacing, padding, etc.
• Paper: A basic card-like container.
• Hidden: Conditional rendering based on screen size.

6. Feedback Components

Components that provide feedback to user actions.

• Alert: Success, error, info, and warning alerts.
• Snackbar: Temporary messages and notifications.
• Dialog: Pop-up modals for confirmation or input.
• Backdrop: Overlay to emphasize content focus.
• Spinner: Loading spinner for async actions.

7. Surfaces

Components that provide a surface to display content.

• Card: Container with optional media, actions, etc.
• Accordion: Expandable content section.
• Paper: A surface that raises elements on a background.
• Expansion Panel: More complex expandable content sections.

8. Utilities

Small, reusable components or functions to enhance usability.

• Portal: For rendering content outside of the parent DOM hierarchy.
• Popover: Displays floating content relative to another element.
• Transitions: Animations and transitions for components.
• ClickAwayListener: Detects clicks outside of a target element.
• Modal: Higher-level dialog component for showing custom content.

9. Form Components

For more complex forms and user input scenarios.

• FormControl: Provides context for form inputs.
• FormLabel: Label for form controls.
• FormHelperText: Text to help with form inputs.
• InputAdornment: Icons, text, or other adornments for input fields.

10. Charts and Visualization

For representing data visually.

• Line Chart
• Bar Chart
• Pie Chart
• Heatmap
• Scatter Plot

11. Advanced Components

More sophisticated, composite components.

• Date Picker: For date selection.
• Time Picker: For time selection.
• Calendar: Full calendar view with events.
• DataGrid/Table: Complex tables with sorting, filtering, pagination.
• Stepper: Step-based navigation.

12. Theme and Customization

For theming and customizing the UI components.

• ThemeProvider: Context provider for theme customization.
• GlobalStyles: Inject global CSS styles.
• CSS Baseline: Normalize default browser styles.
• Styled Components: For custom styling components.

13. Animation and Effects

Adding animations to components for better UX.

• Fade
• Slide
• Grow
• Collapse
• Zoom

Completed Component

Layouts

• Grid
• Stack
• Container
• Box

Inputs

• Button
• IconButton
• Checkbox
• Radio Button
• Switch
• TextField
• Select
• Slider
• ToggleButton

Thank You & Happy Coding.