@blogwebpl/ui v0.3.64

BlogWeb UI Library

The BlogWeb UI Library is a comprehensive set of React components designed to build modern and responsive web applications. It provides a wide range of customizable UI elements, including tables, forms, and various input controls, all with a focus on ease of use and accessibility.

Project Goals

• To offer a robust set of UI components for rapid development of web applications.
• To ensure components are accessible and adhere to WCAG guidelines.
• To provide a consistent look and feel across different applications using the library.

Features

• Pre-styled components for quick integration.
• Storybook integration for interactive component documentation and testing.
• Support for theming and customization.
• Responsive design for mobile and desktop compatibility.
• TypeScript support for type safety and developer experience.

Installation

To install the BlogWeb UI Library, run the following command:

npm install @blogwebpl/ui

or if you are using Yarn:

yarn add @blogwebpl/ui

Usage

To use a component from the library, import it into your React component:

import { Button } from '@blogwebpl/ui';

const MyComponent = () => (
<Button variant="primary">Click me</Button>
);

Basic Components

Alert Displays a warning or informational message.

<Alert>Important message</Alert>

AppBar Represents the navigation bar of the application.

   <AppBar title="Title" handleProfileClick={handleProfileClick} />

Button A button that can be used for interaction.

   <Button label="Click me" onClick={handleClick} />

ButtonContainer Container for buttons, allowing for grouping.

   <ButtonContainer>
     <Button label="Button 1" />
     <Button label="Button 2" />
   </ButtonContainer>

Card A component used to display content in a framed card.

 <Card minWidth="300px">
     <p>Card content</p>
   </Card>

CardMenu A list-style menu that can be used within the Card component.

   <CardMenu items={menuItems} />

DeviceItem Displays information about a device, e.g., in a sidebar.

   <DeviceItem name="Device 1" deviceId="123" />

FieldContainer Container for form fields, facilitating layout organization.

   <FieldContainer>
     <TextField label="Name" />
   </FieldContainer>

Form A form component that can contain various input fields.

   <Form onSubmit={handleSubmit}>
     <TextField label="Username" />
   </Form>

IconButton A button with an icon that can be used for interaction.

    <IconButton onClick={handleClick}>
      <SomeIcon />
    </IconButton>

IconSelect A special type of dropdown list with icons.

    <IconSelect options={options} value={value} onChange={handleChange} />

Main The main container for the application content.

    <Main isCovered={true}>
      <p>Main content of the application</p>
    </Main>

Menu A navigation component in the form of a menu.

    <Menu items={menuItems} language="en" />

Player Multimedia player with basic controls.

    <Player isPlaying={isPlaying} onButtonClick={handleButtonClick} />

PlayerSettings Settings for the player, such as device selection.

    <PlayerSettings devices={devices} onLoad={handleLoad} />

Select Dropdown list for selecting options.

    <Select options={options} value={value} onChange={handleChange} />

Sidebar A side navigation panel.

    <Sidebar isSidebarOpen={isSidebarOpen} />

Table Table component for displaying data.

    <Table columns={columns} data={data} />

Tabs Tabs for organizing content into categories.

    <Tabs tabs={tabs} setActiveTab={setActiveTab} />

TextField Text field for entering data.

    <TextField label="Name" value={value} onChange={handleChange} />

Theme Provides global styles and themes for the application.

    <Theme>
      <App />
    </Theme>

Tools A set of tools, such as action buttons in a table.

    <Tools actions={actions} />

Development

To start the development environment and view components in Storybook, run:

npm run storybook

Building

To build the library for production, run:

npm run build

This will generate the dist folder with compiled components ready for deployment.

License

This project is licensed under the MIT License - see the LICENSE.md file for details.