@blogwebpl/ui NPM

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.

@total-typescript/ts-reset dayjs lodash sweetalert2

@infinitebrahmanuniverse/nolb-_blog @everything-registry/sub-chunk-132

1 year ago

1 year ago

1 year ago

1 year ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago