0.3.196 • Published 11 months ago

@blogwebpl/ui v0.3.196

Weekly downloads
-
License
ISC
Repository
github
Last release
11 months ago

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.

0.3.181

11 months ago

0.3.180

11 months ago

0.3.183

11 months ago

0.3.182

11 months ago

0.3.185

11 months ago

0.3.184

11 months ago

0.3.187

11 months ago

0.3.186

11 months ago

0.3.189

11 months ago

0.3.188

11 months ago

0.3.170

11 months ago

0.3.172

11 months ago

0.3.171

11 months ago

0.3.174

11 months ago

0.3.173

11 months ago

0.3.176

11 months ago

0.3.175

11 months ago

0.3.178

11 months ago

0.3.177

11 months ago

0.3.179

11 months ago

0.3.161

11 months ago

0.3.160

11 months ago

0.3.163

11 months ago

0.3.162

11 months ago

0.3.165

11 months ago

0.3.164

11 months ago

0.3.167

11 months ago

0.3.169

11 months ago

0.3.168

11 months ago

0.3.150

11 months ago

0.3.152

11 months ago

0.3.151

11 months ago

0.3.154

11 months ago

0.3.153

11 months ago

0.3.156

11 months ago

0.3.155

11 months ago

0.3.158

11 months ago

0.3.157

11 months ago

0.3.159

11 months ago

0.3.192

11 months ago

0.3.191

11 months ago

0.3.194

11 months ago

0.3.193

11 months ago

0.3.196

11 months ago

0.3.195

11 months ago

0.3.190

11 months ago

0.3.141

11 months ago

0.3.140

11 months ago

0.3.143

11 months ago

0.3.142

11 months ago

0.3.145

11 months ago

0.3.144

11 months ago

0.3.147

11 months ago

0.3.146

11 months ago

0.3.148

11 months ago

0.3.130

11 months ago

0.3.132

11 months ago

0.3.131

11 months ago

0.3.134

11 months ago

0.3.133

11 months ago

0.3.136

11 months ago

0.3.135

11 months ago

0.3.138

11 months ago

0.3.137

11 months ago

0.3.139

11 months ago

0.3.121

11 months ago

0.3.120

11 months ago

0.3.123

11 months ago

0.3.122

11 months ago

0.3.125

11 months ago

0.3.124

11 months ago

0.3.127

11 months ago

0.3.126

11 months ago

0.3.129

11 months ago

0.3.128

11 months ago

0.3.119

11 months ago

0.3.118

11 months ago

0.3.101

12 months ago

0.3.100

12 months ago

0.3.103

12 months ago

0.3.102

12 months ago

0.3.105

12 months ago

0.3.107

12 months ago

0.3.106

12 months ago

0.3.110

12 months ago

0.3.112

11 months ago

0.3.111

11 months ago

0.3.114

11 months ago

0.3.113

11 months ago

0.3.116

11 months ago

0.3.115

11 months ago

0.3.117

11 months ago

0.3.109

12 months ago

0.3.108

12 months ago

0.3.75

1 year ago

0.3.74

1 year ago

0.3.73

1 year ago

0.3.72

1 year ago

0.3.71

1 year ago

0.3.79

1 year ago

0.3.78

1 year ago

0.3.77

1 year ago

0.3.76

1 year ago

0.3.68

1 year ago

0.3.67

1 year ago

0.3.66

1 year ago

0.3.65

1 year ago

0.3.97

12 months ago

0.3.96

12 months ago

0.3.95

12 months ago

0.3.94

12 months ago

0.3.93

12 months ago

0.3.91

12 months ago

0.3.90

12 months ago

0.3.99

12 months ago

0.3.98

12 months ago

0.3.86

12 months ago

0.3.85

12 months ago

0.3.84

1 year ago

0.3.83

1 year ago

0.3.82

1 year ago

0.3.81

1 year ago

0.3.80

1 year ago

0.3.89

12 months ago

0.3.88

12 months ago

0.3.87

12 months ago

0.3.64

1 year ago

0.3.63

1 year ago

0.3.62

1 year ago

0.3.61

1 year ago

0.3.60

1 year ago

0.3.53

1 year ago

0.3.59

1 year ago

0.3.58

1 year ago

0.3.57

1 year ago

0.3.56

1 year ago

0.3.55

1 year ago

0.3.54

1 year ago

0.3.51

1 year ago

0.3.50

1 year ago

0.3.49

1 year ago

0.3.48

1 year ago

0.3.47

1 year ago

0.3.46

1 year ago

0.3.45

1 year ago

0.3.44

1 year ago

0.3.43

1 year ago

0.3.42

1 year ago

0.3.41

1 year ago

0.3.40

1 year ago

0.3.39

1 year ago

0.3.38

1 year ago

0.3.37

1 year ago

0.3.36

1 year ago

0.3.35

1 year ago

0.3.34

1 year ago

0.3.30

1 year ago

0.3.33

1 year ago

0.3.32

1 year ago

0.3.29

1 year ago

0.3.28

1 year ago

0.3.27

1 year ago

0.3.25

1 year ago

0.3.24

1 year ago

0.3.23

1 year ago

0.3.22

1 year ago

0.3.21

1 year ago

0.3.20

1 year ago

0.3.19

1 year ago

0.3.8

1 year ago

0.3.7

1 year ago

0.3.18

1 year ago

0.3.9

1 year ago

0.3.17

1 year ago

0.3.16

1 year ago

0.3.15

1 year ago

0.3.14

1 year ago

0.3.13

1 year ago

0.3.12

1 year ago

0.3.11

1 year ago

0.3.10

1 year ago

0.3.6

1 year ago

0.3.5

1 year ago

0.3.2

1 year ago

0.3.4

1 year ago

0.3.3

1 year ago

0.2.96

1 year ago

0.2.95

1 year ago

0.2.94

1 year ago

0.2.98

1 year ago

0.2.97

1 year ago

0.3.0

1 year ago

0.2.93

1 year ago

0.2.92

1 year ago

0.2.91

1 year ago

0.2.90

1 year ago

0.2.89

1 year ago

0.2.88

1 year ago

0.2.87

1 year ago

0.2.86

1 year ago

0.2.85

1 year ago

0.2.84

1 year ago

0.2.83

1 year ago

0.2.82

1 year ago

0.2.81

1 year ago

0.2.80

1 year ago

0.2.79

1 year ago

0.2.74

1 year ago

0.2.73

1 year ago

0.2.72

1 year ago

0.2.71

1 year ago

0.2.70

1 year ago

0.2.78

1 year ago

0.2.77

1 year ago

0.2.76

1 year ago

0.2.75

1 year ago

0.2.69

1 year ago

0.2.68

1 year ago

0.2.67

1 year ago

0.2.66

1 year ago

0.2.63

1 year ago

0.2.62

1 year ago

0.2.65

1 year ago

0.2.64

1 year ago

0.2.61

1 year ago

0.2.60

1 year ago

0.2.58

2 years ago

0.2.57

2 years ago

0.2.56

2 years ago

0.2.55

2 years ago

0.2.54

2 years ago

0.2.52

2 years ago

0.2.53

2 years ago

0.2.51

2 years ago

0.2.50

2 years ago

0.2.49

2 years ago

0.2.48

2 years ago

0.2.47

2 years ago

0.2.46

2 years ago

0.2.45

2 years ago

0.2.44

2 years ago

0.2.43

2 years ago

0.2.42

2 years ago

0.2.41

2 years ago

0.2.40

2 years ago

0.2.39

2 years ago

0.2.38

2 years ago

0.2.37

2 years ago

0.2.34

2 years ago

0.2.33

2 years ago

0.2.30

2 years ago

0.2.32

2 years ago

0.2.31

2 years ago

0.2.29

2 years ago

0.2.27

2 years ago

0.2.25

2 years ago

0.2.24

2 years ago

0.2.23

2 years ago

0.2.22

2 years ago

0.2.21

2 years ago

0.2.20

2 years ago

0.2.19

2 years ago

0.2.18

2 years ago

0.2.17

2 years ago

0.2.16

2 years ago

0.2.15

2 years ago

0.2.14

2 years ago

0.2.13

2 years ago

0.2.12

2 years ago

0.2.11

2 years ago

0.2.9

2 years ago

0.2.7

2 years ago

0.1.52

2 years ago

0.0.84

2 years ago

0.1.53

2 years ago

0.0.85

2 years ago

0.1.54

2 years ago

0.0.86

2 years ago

0.1.55

2 years ago

0.0.87

2 years ago

0.1.56

2 years ago

0.0.88

2 years ago

0.1.57

2 years ago

0.0.89

2 years ago

0.1.58

2 years ago

0.1.59

2 years ago

0.0.80

2 years ago

0.0.81

2 years ago

0.1.50

2 years ago

0.0.82

2 years ago

0.1.51

2 years ago

0.0.83

2 years ago

0.1.49

2 years ago

0.1.41

2 years ago

0.0.73

2 years ago

0.1.42

2 years ago

0.0.74

2 years ago

0.1.43

2 years ago

0.0.75

2 years ago

0.1.44

2 years ago

0.1.45

2 years ago

0.0.77

2 years ago

0.1.46

2 years ago

0.0.78

2 years ago

0.1.47

2 years ago

0.1.48

2 years ago

0.1.40

2 years ago

0.1.38

2 years ago

0.1.39

2 years ago

0.1.30

2 years ago

0.1.31

2 years ago

0.1.33

2 years ago

0.1.34

2 years ago

0.1.35

2 years ago

0.1.36

2 years ago

0.1.37

2 years ago

0.1.27

2 years ago

0.1.28

2 years ago

0.1.29

2 years ago

0.1.20

2 years ago

0.1.21

2 years ago

0.1.22

2 years ago

0.1.23

2 years ago

0.1.24

2 years ago

0.1.25

2 years ago

0.1.26

2 years ago

0.1.16

2 years ago

0.1.17

2 years ago

0.1.18

2 years ago

0.1.19

2 years ago

0.1.96

2 years ago

0.1.97

2 years ago

0.1.98

2 years ago

0.1.10

2 years ago

0.1.99

2 years ago

0.1.11

2 years ago

0.1.12

2 years ago

0.1.13

2 years ago

0.1.14

2 years ago

0.1.15

2 years ago

0.1.90

2 years ago

0.1.91

2 years ago

0.1.92

2 years ago

0.1.93

2 years ago

0.1.94

2 years ago

0.1.95

2 years ago

0.1.85

2 years ago

0.1.87

2 years ago

0.1.88

2 years ago

0.1.89

2 years ago

0.1.80

2 years ago

0.1.81

2 years ago

0.1.82

2 years ago

0.1.83

2 years ago

0.1.84

2 years ago

0.1.2

2 years ago

0.1.1

2 years ago

0.1.8

2 years ago

0.1.7

2 years ago

0.1.9

2 years ago

0.1.4

2 years ago

0.1.3

2 years ago

0.1.6

2 years ago

0.1.5

2 years ago

0.1.74

2 years ago

0.1.75

2 years ago

0.1.76

2 years ago

0.1.77

2 years ago

0.1.78

2 years ago

0.1.70

2 years ago

0.1.71

2 years ago

0.1.73

2 years ago

0.1.63

2 years ago

0.0.95

2 years ago

0.1.64

2 years ago

0.0.96

2 years ago

0.1.65

2 years ago

0.0.97

2 years ago

0.1.66

2 years ago

0.0.99

2 years ago

0.1.68

2 years ago

0.1.69

2 years ago

0.0.90

2 years ago

0.1.60

2 years ago

0.0.92

2 years ago

0.1.61

2 years ago

0.0.93

2 years ago

0.1.62

2 years ago

0.0.94

2 years ago

0.2.1

2 years ago

0.2.0

2 years ago

0.2.6

2 years ago

0.2.3

2 years ago

0.2.2

2 years ago

0.2.5

2 years ago

0.2.4

2 years ago

0.0.70

2 years ago

0.0.67

2 years ago

0.0.68

2 years ago

0.0.69

2 years ago

0.0.66

2 years ago

0.0.62

2 years ago

0.0.63

2 years ago

0.0.64

2 years ago

0.0.65

2 years ago

0.0.43

2 years ago

0.0.44

2 years ago

0.0.45

2 years ago

0.0.46

2 years ago

0.0.47

2 years ago

0.0.60

2 years ago

0.0.61

2 years ago

0.0.59

2 years ago

0.0.51

2 years ago

0.0.52

2 years ago

0.0.53

2 years ago

0.0.54

2 years ago

0.0.55

2 years ago

0.0.56

2 years ago

0.0.57

2 years ago

0.0.58

2 years ago

0.0.50

2 years ago

0.0.40

2 years ago

0.0.41

2 years ago

0.0.42

2 years ago

0.0.37

3 years ago

0.0.38

2 years ago

0.0.39

2 years ago

0.0.33

3 years ago

0.0.34

3 years ago

0.0.35

3 years ago

0.0.36

3 years ago

0.0.32

3 years ago

0.0.31

3 years ago

0.0.30

3 years ago

0.0.29

3 years ago

0.0.28

3 years ago

0.0.27

3 years ago

0.0.26

3 years ago

0.0.25

3 years ago

0.0.24

3 years ago

0.0.23

3 years ago

0.0.22

3 years ago

0.0.21

3 years ago

0.0.20

3 years ago

0.0.19

3 years ago

0.0.17

3 years ago

0.0.16

3 years ago

0.0.15

3 years ago

0.0.14

3 years ago

0.0.13

3 years ago

0.0.12

3 years ago

0.0.11

3 years ago

0.0.10

3 years ago

0.0.9

3 years ago

0.0.7

3 years ago

0.0.6

3 years ago

0.0.5

3 years ago

0.0.4

3 years ago

0.0.3

3 years ago

0.0.2

3 years ago

0.0.1

3 years ago