open-index/open-npm huggingface dataset:
npm package: @hredubru/dev-pg
Description: Welcome to the Playground! This document provides an overview of the project, its structure, and how to run it.
Latest version: 1.5.0

# Dev's Playground

Welcome to the Playground! This document provides an overview of the project, its structure, and how to run it.

This project gives the `Front-end Developers and UI Designners` to learn experiment and have an outcome of the components 
the way they would look and functions. 

## Vision

The vision of this project is to provide a space where developers and designers can collaborate, learn, and experiment with different components. By coding once and having a reusable library of components, the aim is to streamline the development process and encourage a more efficient workflow.


## Technologies Used

- React
- Tailwind CSS
- Storybook
- HTML5 EventSource


## Development tools:
- Git
- Yarn/Npm ([note: yarn install not working for instance level privet gitlab package](https://forum.gitlab.com/t/yarn-install-from-gitlab-package-registry-not-working-with-instance-level/68709))
- An IDE of your choice

## Directories and files
Below is a list of the folders in the root directory of source code:
- `src` - the source code (both source code and junit test cases)
- [stories](./src/stories) - the documentations using story files

These are the folders generated by the build tools (not to be included in the git repository):
- `node_modules` - Folder third-party dependencies downloaded by build tool
- `dist` - Output built artifacts
- `.idea` - Created by Intellij IDE, if used for development
- `yarn.lock/package-lock.json` - Created by yarn/npm

These are the main files in the root folder:
- `.gitignore` - List of files and folders to be ignored by git
- `ci.yml` - gitlab build configuration file
- `tainwind.config.json` - Configuration file used by Tailwind CSS
- `package.json` - Holds the js libraries dependencies
- `readme.md` - the project documentation index file
- `tsconfig.*` - TypeScript compiler configuration.
- `tslint.json` - Tslint configuration

## Overview of directory

```base
├── src
│   
├── App.tsx
├── assets
├── plates
│   └── Component
│       ├── Component.iterface.ts
│       ├── Component.tsx  
│       └── Component.scss
├── test
│   └── Component.test.tsx
│   
├── stories
│   ├── assests
│   ├── Component
│   │   ├── Component.mdx
│   │   └── Component.stories.txs
│   └──Configure.mdx
│
├── index.scss
├── main.tsx
├── setupTests.ts
└── vite-env.d.ts
```

main.tsx is the main entry point of the app


## Project Setup

1. Clone the repository:

```bash
git clone https://github.com/Hredoysen/devPlayground.git
cd devPlayground
```
2. Run StoryBook:

```bash
npm run storybook 
```

3. Run Test:

```bash
npm run test
```