# @woolgens/web-library

> A component library for WoolGens web apps

Latest version **0.1.4** (published 2021-11-29) · MIT license · 0 weekly downloads

## Install

```sh
npm install @woolgens/web-library
pnpm add @woolgens/web-library
yarn add @woolgens/web-library
bun add @woolgens/web-library
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.4 |
| Published | 2021-11-29 |
| First published | 2021-11-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 82.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Woolgens |
| Maintainers | tsuukii |

## Links

- npm: https://www.npmjs.com/package/@woolgens/web-library
- Repository: https://github.com/woolgens-network/web-library
- Homepage: https://woolgens.net
- Issues: https://github.com/woolgens-network/web-library/issues
- npm.io page: https://npm.io/package/@woolgens/web-library

## Recent versions

- 0.1.4 (latest) — 2021-11-29
- 0.1.3 — 2021-11-29
- 0.1.2 — 2021-11-29
- 0.1.1 — 2021-11-29
- 0.1.0 — 2021-11-29

## README

# Woolgens Web Library

Welcome to the Woolgens Web Library. In this repository you will find a collection
of usefull react components and functions to help you interact with our APIs. 

Below you will find a development guide for extending the library as well as a guide to adding the
package to existing projects.

## Installation

```shell
yarn add @woolgens/web-library
npm install @woolgens/web-library
```

## Development
When developing a new Component create a new folder for the component in the `/components` folder.

Inside each component folder the following files must exist:
- React file
- Type file
- Storybook file

### Types
Every React Component needs to come with type declaration, as we develop our pages in 
TypeScript. 

Example type file:
```ts
// ExampleTypes.ts

import React, {MouseEventHandler} from "react";

export interface ExampleProps {
    string?: string, // String Type
    boolean?: boolean, // Boolean Type
    children?: React.ReactNode, // Children inside the component
    onClick?: MouseEventHandler<HTMLButtonElement>, // Click event
    select: "option1" | "option2" | "option3" | "option4", // Selection from differnet options
}
```
_Note: Add a `?` after the variable name if it can also be left as undefined._

### Storybook
As this project does not require an existing website we develop components with
[Storybook](https://storybook.js.org/). A framework that lets us easily develop and preview
React Components.

In order to start Storybook use the command

```shell
yarn dev
```

Example Storybook file:

```js
// ExampleComponent.stories.js

// Import your Component
import React from 'react';
import { ExampleComponent } from "./ExampleComponent";

// Export a default function
// This is where you define your components and what props are needed
// All other argTypes can be found here: https://storybook.js.org/docs/react/essentials/controls#annotation
export default {
    title: 'Guides/Example Component',
    component: ExampleComponent,
    argTypes: {
        // Add a color selection
        color: { control: 'color' },
        // Add a select dropdown (Can be removed and set in the React Component)
        size: { control: { type: 'select', options: ['text-sm', 'text-lg', 'text-2xl'] } },
        // Actions can be used to mock functions. More info: https://storybook.js.org/docs/react/essentials/actions
        testFunction: { action: "testFunction" }
    },
};

// Create a default Template
const Template = (args) => <ExampleComponent {...args} />;

// For each version of the Component create a new story
export const Default = Template.bind({});
// You can change the args and props to modify the story here
Default.args = {
    label: 'Test Text',
    color: 'black'
};
```
More helpful links: [Storybook Getting started guide](https://storybook.js.org/docs/react/writing-stories/introduction)

---
_Source: https://npm.io/package/@woolgens/web-library · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._