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

12 months ago

0.3.180

12 months ago

0.3.183

11 months ago

0.3.182

12 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

12 months ago

0.3.172

12 months ago

0.3.171

12 months ago

0.3.174

12 months ago

0.3.173

12 months ago

0.3.176

12 months ago

0.3.175

12 months ago

0.3.178

12 months ago

0.3.177

12 months ago

0.3.179

12 months ago

0.3.161

12 months ago

0.3.160

12 months ago

0.3.163

12 months ago

0.3.162

12 months ago

0.3.165

12 months ago

0.3.164

12 months ago

0.3.167

12 months ago

0.3.169

12 months ago

0.3.168

12 months ago

0.3.150

12 months ago

0.3.152

12 months ago

0.3.151

12 months ago

0.3.154

12 months ago

0.3.153

12 months ago

0.3.156

12 months ago

0.3.155

12 months ago

0.3.158

12 months ago

0.3.157

12 months ago

0.3.159

12 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

12 months ago

0.3.140

12 months ago

0.3.143

12 months ago

0.3.142

12 months ago

0.3.145

12 months ago

0.3.144

12 months ago

0.3.147

12 months ago

0.3.146

12 months ago

0.3.148

12 months ago

0.3.130

12 months ago

0.3.132

12 months ago

0.3.131

12 months ago

0.3.134

12 months ago

0.3.133

12 months ago

0.3.136

12 months ago

0.3.135

12 months ago

0.3.138

12 months ago

0.3.137

12 months ago

0.3.139

12 months ago

0.3.121

12 months ago

0.3.120

12 months ago

0.3.123

12 months ago

0.3.122

12 months ago

0.3.125

12 months ago

0.3.124

12 months ago

0.3.127

12 months ago

0.3.126

12 months ago

0.3.129

12 months ago

0.3.128

12 months ago

0.3.119

12 months ago

0.3.118

12 months ago

0.3.101

1 year ago

0.3.100

1 year ago

0.3.103

1 year ago

0.3.102

1 year ago

0.3.105

1 year ago

0.3.107

1 year ago

0.3.106

1 year ago

0.3.110

1 year ago

0.3.112

12 months ago

0.3.111

12 months ago

0.3.114

12 months ago

0.3.113

12 months ago

0.3.116

12 months ago

0.3.115

12 months ago

0.3.117

12 months ago

0.3.109

1 year ago

0.3.108

1 year 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

1 year ago

0.3.96

1 year ago

0.3.95

1 year ago

0.3.94

1 year ago

0.3.93

1 year ago

0.3.91

1 year ago

0.3.90

1 year ago

0.3.99

1 year ago

0.3.98

1 year ago

0.3.86

1 year ago

0.3.85

1 year 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

1 year ago

0.3.88

1 year ago

0.3.87

1 year 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

2 years ago

0.2.82

2 years ago

0.2.81

2 years ago

0.2.80

2 years ago

0.2.79

2 years ago

0.2.74

2 years ago

0.2.73

2 years ago

0.2.72

2 years ago

0.2.71

2 years ago

0.2.70

2 years ago

0.2.78

2 years ago

0.2.77

2 years ago

0.2.76

2 years ago

0.2.75

2 years ago

0.2.69

2 years ago

0.2.68

2 years ago

0.2.67

2 years ago

0.2.66

2 years ago

0.2.63

2 years ago

0.2.62

2 years ago

0.2.65

2 years ago

0.2.64

2 years ago

0.2.61

2 years ago

0.2.60

2 years 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

3 years ago

0.0.44

3 years ago

0.0.45

3 years ago

0.0.46

3 years ago

0.0.47

3 years ago

0.0.60

2 years ago

0.0.61

2 years ago

0.0.59

2 years ago

0.0.51

3 years ago

0.0.52

3 years ago

0.0.53

3 years ago

0.0.54

3 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

3 years ago

0.0.40

3 years ago

0.0.41

3 years ago

0.0.42

3 years ago

0.0.37

3 years ago

0.0.38

3 years ago

0.0.39

3 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