open-index/open-npm huggingface dataset:
npm package: @socialwell-design/alert
Description: Alert component from socialwell ui library
Author: Socialwell
Latest version: 1.0.1

# This is a socialwell web design system

## Installation

```bash
yarn add @socialwell-design/alert

or

npm i @socialwell-design/alert
```

## How to use

```JSX
import { Alert } from "@socialwell-design/alert";

<Alert
  description="This is a description"
  onClose={() => {}}
  state="success"
  title="Title"
/>
```
npm package: @socialwell-design/alert-dialog
Description: Alert Dialog component from socialwell ui library
Author: Socialwell
Latest version: 1.0.1

# This is a socialwell web design system

## Installation

```bash
yarn add @socialwell-design/alert-dialog

or

npm i @socialwell-design/alert-dialog
```

## How to use

```JSX
import { AlertDialog } from "@socialwell-design/alert-dialog";

<AlertDialog
  onClick={() => {}}
  text="Lorem ipsum dolor sit amet?"
  title="Delete user"
/>
```
npm package: @socialwell-design/avatar
Description: Avatar component from socialwell ui library
Author: Socialwell
Latest version: 1.0.4

# This is a socialwell web design system

## Installation

```bash
yarn add @socialwell-design/avatar

or

npm i @socialwell-design/avatar
```

## How to use

```JSX
import { Avatar } from "@socialwell-design/avatar";

<Avatar useName="John Doe" />

or

<Avatar src="...image.png" />
```
npm package: @socialwell-design/badge
Description: Badge component from socialwell ui library
Author: Socialwell
Latest version: 1.0.1

# This is a socialwell web design system

## Installation

```bash
yarn add @socialwell-design/badge

or

npm i @socialwell-design/badge
```

## How to use

```JSX
import { Badge } from "@socialwell-design/badge";

<Badge
  label="default"
  variant="solid" // solid | outline | subtle
/>

```
npm package: @socialwell-design/button
Description: Button component from socialwell ui library
Author: Socialwell
Latest version: 1.0.6

# This is a socialwell web design system

## Installation

```bash
yarn add @socialwell-design/button

or

npm i @socialwell-design/button
```

## How to use

```JSX
import { Button } from "@socialwell-design/button";

<Button
  name="Button"
  onClick={() => {}}
  variant="solid" // solid | outline
/>

```
npm package: @socialwell-design/checkbox
Description: Checkbox component from socialwell ui library
Author: Socialwell
Latest version: 1.1.3

# This is a socialwell web design system

## Installation

```bash
yarn add @socialwell-design/checkbox

or

npm i @socialwell-design/checkbox
```

## How to use

```JSX
import { Checkbox } from "@socialwell-design/checkbox";

<Checkbox onChange={() => {}} isChecked={true} />

```
npm package: @socialwell-design/close-button
Description: Close Button component from socialwell ui library
Author: Socialwell
Latest version: 1.0.4

# This is a socialwell web design system

## Installation

```bash
yarn add @socialwell-design/close-button

or

npm i @socialwell-design/close-button
```

## How to use

```JSX
import { CloseButton } from "@socialwell-design/close-button";

<CloseButton />

```
npm package: @socialwell-design/form-control
Description: Form Control component from socialwell ui library
Author: Socialwell
Latest version: 1.1.7

# This is a socialwell web design system

## Installation

```bash
yarn add @socialwell-design/form-control

or

npm i @socialwell-design/form-control
```

## How to use

```JSX
import { FormControl } from "@socialwell-design/form-control";

<FormControl
  label="Label"
  onChange={() => {}}
  type="text"
/>

or

<FormControl
  label="Label"
  onChange={() => {}}
  type="select"
>
  <option value="1">
    one
  </option>
  <option value="2">
    two
  </option>
</FormControl>

or

<FormControl
  label="description"
  onChange={() => {}}
  type="textarea"
/>

```
npm package: @socialwell-design/icon-button
Description: Icon Button component from socialwell ui library
Author: Socialwell
Latest version: 1.0.2

# This is a socialwell web design system

## Installation

```bash
yarn add @socialwell-design/icon-button

or

npm i @socialwell-design/icon-button
```

## How to use

```JSX
import { IconButton } from "@socialwell-design/icon-button";

<IconButton onClick={() => {}} />

```
npm package: @socialwell-design/input-field
Description: Input Field component from socialwell ui library
Author: Socialwell
Latest version: 1.1.7

# This is a socialwell web design system

## Installation

```bash
yarn add @socialwell-design/input-field

or

npm i @socialwell-design/input-field
```

## How to use

```JSX
import { TextField,SelectField,TextAreaField } from "@socialwell-design/input-field";

<TextField onChange={() => {}} /> // type="text"

<TextField
  onChange={() => {}}
  type="number"
/>

<SelectField onChange={() => {}}>
  <option value="1">
    one
  </option>
  <option value="2">
    two
  </option>
</SelectField>

<TextAreaField onChange={() => {}} />

```
npm package: @socialwell-design/next-link
Description: Link component for nextjs from socialwell ui library
Author: Socialwell
Latest version: 1.0.0

# This is a socialwell web design system

## Installation

```bash
yarn add @socialwell-design/next-link

or

npm i @socialwell-design/next-link
```

## How to use

```JSX
import { NextLink } from "@socialwell-design/next-link";

<NextLink linkName="Resources" />

```
npm package: @socialwell-design/radio
Description: Radio component from socialwell ui library
Author: Socialwell
Latest version: 1.0.1

# This is a socialwell web design system

## Installation

```bash
yarn add @socialwell-design/radio

or

npm i @socialwell-design/radio
```

## How to use

```JSX
import { Radio } from "@socialwell-design/radio";

<Radio onChange={() => {}} />

```
npm package: @socialwell-design/tabs
Description: Tabs component from socialwell ui library
Author: Socialwell
Latest version: 1.0.0

# This is a socialwell web design system

## Installation

```bash
yarn add @socialwell-design/tabs

or

npm i @socialwell-design/tabs
```

## How to use

```JSX
import { Tabs } from "@socialwell-design/tabs";

<Tabs
  data={[
    {
      isActive: true,
      name: 'filter'
    },
    {
      isActive: false,
      name: 'book'
    },
    {
      isActive: false,
      name: 'article'
    }
  ]}
 />

```
npm package: @socialwell-design/tag
Description: Tag component from socialwell ui library
Author: Socialwell
Latest version: 1.0.0

# This is a socialwell web design system

## Installation

```bash
yarn add @socialwell-design/tag

or

npm i @socialwell-design/tag
```

## How to use

```JSX
import { Tag } from "@socialwell-design/tag";

<Tag label="Hello" />

```
npm package: @socialwell-design/toast
Description: Toast component from socialwell ui library
Author: Socialwell
Latest version: 1.0.0

# This is a socialwell web design system

## Installation

```bash
yarn add @socialwell-design/toast

or

npm i @socialwell-design/toast
```

## How to use

```JSX
import { Toast } from "@socialwell-design/toast";

<Toast
  description="This is a description"
  onClose={() => {}}
  state="success"
  title="Title"
/>

```
npm package: @socialwell-design/tool-tip
Description: ToolTip component from socialwell ui library
Author: Socialwell
Latest version: 1.0.1

# This is a socialwell web design system

## Installation

```bash
yarn add @socialwell-design/tool-tip

or

npm i @socialwell-design/tool-tip
```

## How to use

```JSX
import { ToolTips } from "@socialwell-design/tool-tip";
import "react-tippy/dist/tippy.css";

<ToolTips
    position="bottom"
    text="Here’s a regular tooltip with some text inside of it that’s supposed to be substantially large."
>
  // any html tags
</ToolTips>

```
npm package: @socialwell-design/typography
Description: Typography component from socialwell ui library
Author: Socialwell
Latest version: 1.0.6

# This is a socialwell web design system

## Installation

```bash
yarn add @socialwell-design/typography

or

npm i @socialwell-design/typography
```

## How to use

```JSX
import { Typography } from "@socialwell-design/typography";

<Typography
  as="h1"
  content="this is heading"
/>
```
npm package: @socian/socian-auth-client
Description: SocianAuthClient is a helper library for SocianAuth
Author: Saifur Rahman
Latest version: 1.1.5

# Socian Auth Server - SDK - Node

npm install
npm run build

## Installation
```shell
npm i @socian/socian-auth-client
```

or  

```shell
yarn add @socian/socian-auth-client
```

## Examples

```javascript
// Sign In Example
import SocianAuthSDKClient from '@socian/socian-auth-node-sdk';

class MyClass {
	async runSignIn() {
		const authClientConfig = {
			"app_id": "socian-consumerbuzz-client_app_id_E3WDTFR77ZD7Q0J7",
			"app_secret": "socian-consumerbuzz-client_app_id_OMRHHVTAOD6A3EUG",
		}

		const authClient =   new SocianAuthSDKClient(authClientConfig)

		const credentials = {
			"email": "srhasan@socian.ai",
			"password": "password"
		}

		await authClient.signIn("credential", credentials)
		const authUser = await authClient.fetchUser()

		console.log('##### Socian Auth Server - SignIn Response #####')

		console.log({
			'intentId': authClient.getIntentId(),
			'intentObject': authClient.getIntentObject(),
			'loggedIn': authClient.getLoggedIn(),
			'authUser': authUser
		})

		if(authClient.getLoggedIn()){
			console.log("You are signed in - ", authUser?.name)
		}else{
			console.log("Sign In Failed - ", authUser?.name)
		}
	}
}

(new MyClass).runSignIn()
```

```javascript
// Sign Up Example

import SocianAuthSDKClient from '@socian/socian-auth-node-sdk';

class MyClass {
	// ...
    
	async runSignUp() {
		try{
			const authClientConfig = {
				"app_id": "socian-consumerbuzz-client_app_id_E3WDTFR77ZD7Q0J7",
				"app_secret": "socian-consumerbuzz-client_app_id_OMRHHVTAOD6A3EUG",
			}

			const authClient =   new SocianAuthSDKClient(authClientConfig)

			const randomId = this.generateId(1, 500)
			const newUserFormData = {
				"name": `AUTH SDK USER - ${randomId}`,
				"email": `auth-skd-user-${randomId}@socian.ai`,
				"password": "password"
			}

			await authClient.signUp("credential", newUserFormData)
			const newUserData = authClient.getNewUser()

			console.log('##### Socian Auth Server - Sign Up Response #####')

			console.log({
				'intentId': authClient.getIntentId(),
				'authUserEmail': newUserData?.email,
				'newUserData': newUserData
			})

			if(authClient.getNewUser()){
				console.log("Your account has been created - ", newUserData?.name)
			}else{
				console.log("Sign Up Failed.")
			}
		}catch(error) {
			console.error('Sign up Error:')
			console.error(error)
		}
	}

	generateId(min, max) {
		return Math.floor(Math.random() * (max - min + 1)) + min;
	}
}

(new MyClass).runSignUp()
```
npm package: @socian/socian-auth-client-react
Description: I wasn't able to find a suitable repository that satisfied the following: * Minimum configuration (for flexibility) * Latest versions of Tailwind, Webpack Plugins * Storybook integration * Typescript support
Author: Saifur Rahman
Latest version: 1.0.0

<p align="center">
  <h3 align="center">Component Library/Tailwind Starter</h3>

  <p align="center">
     A starter template to create your own React component library using TailwindCSS
    <br />
    <br />
    <br />
    <a href="https://github.com/kokiebisu/component-library-tailwind-starter/issues">Report Bug</a>
    ·
    <a href="https://github.com/kokiebisu/component-library-tailwind-starter/issues">Request Feature</a>
  </p>
</p>



<!-- TABLE OF CONTENTS -->
<details open="open">
  <summary>Table of Contents</summary>
  <ol>
    <li>
      <a href="#motive">Motive</a>
      <ul>
        <li><a href="#built-with">Built With</a></li>
      </ul>
    </li>
    <li>
      <a href="#getting-started">Getting Started</a>
      <ul>
        <li><a href="#prerequisites">Prerequisites</a></li>
        <li><a href="#installation">Installation</a></li>
      </ul>
    </li>
    <li><a href="#usage">Usage</a></li>
  </ol>
</details>



<!-- ABOUT THE PROJECT -->
## Motive

I wasn't able to find a suitable repository that satisfied the following:
* Minimum configuration (for flexibility)
* Latest versions of Tailwind, Webpack Plugins
* Storybook integration
* Typescript support

### Built With

* [React](https://reactjs.org)
* [Webpack](https://webpack.js.org)
* [Storybook](https://storybook.js.org)
* [Typescript](https://www.typescriptlang.org)


<!-- GETTING STARTED -->
## Getting Started

This is an example of how you may give instructions on setting up your project locally.
To get a local copy up and running follow these simple example steps.

### Prerequisites

This is an example of how to list things you need to use the software and how to install them.
* npm
  ```sh
  npm install npm@latest -g
  ```

### Installation

1. Clone the repo
   ```sh
   git clone https://github.com/kokiebisu/component-library-tailwind-starter.git
   ```
2. Install NPM packages
   ```sh
   yarn
   ```



<!-- USAGE EXAMPLES -->
## Usage

1. Import the library into your project
   ```sh
   yarn add component-library-tailwind-starter
   ```
  
2. Try importing the Button component
    ```JS
    import { Button } from 'component-library-tailwind-starter';
    ```