Feat/beaker/vue3

.editorconfig

@@ -0,0 +1,19 @@
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+insert_final_newline = true
+indent_style = space
+indent_size = 4
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+trim_trailing_whitespace = false
+
+[*.{html,css,mts,ts,mjs,js,vue,yml,yaml,less,json}]
+indent_size = 2
+
+[composer.json]
+indent_size = 4

.github/workflows/pr-check.yml

@@ -0,0 +1,21 @@
+name: PR Validation
+
+on:
+  pull_request:
+    branches: [ master, v0.x ]
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build library
+        run: npm run build

.github/workflows/release.yml

@@ -0,0 +1,55 @@
+name: Release Beaker Library
+
+on:
+  push:
+    tags:
+      - 'v*.*.*'
+
+jobs:
+  release:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          registry-url: 'https://registry.npmjs.org'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build Beaker library
+        run: npm run build:publish
+
+      - name: Determine version info
+        id: version
+        run: |
+          VERSION=${GITHUB_REF#refs/tags/v}
+          MAJOR=$(echo $VERSION | cut -d. -f1)
+          echo "version=$VERSION" >> $GITHUB_OUTPUT
+          echo "major=$MAJOR" >> $GITHUB_OUTPUT
+
+      - name: Publish to npm with appropriate tag
+        run: |
+          if [[ "${{ steps.version.outputs.major }}" == "0" ]]; then
+            npm publish --tag legacy
+          else
+            npm publish --tag latest
+          fi
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+
+      - name: Generate changelog
+        run: npx conventional-changelog-cli -p angular -i CHANGELOG.md -s
+
+      - name: Create GitHub Release
+        uses: softprops/action-gh-release@v1
+        with:
+          tag_name: ${{ github.ref }}
+          name: Release ${{ steps.version.outputs.version }}
+          body_path: CHANGELOG.md
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

CONTRIBUTING.md

@@ -0,0 +1,24 @@
+# Contributing Guide
+
+## Development Workflow
+
+1. **Fork and clone** the repository
+2. **Create feature branch** from appropriate base:
+   - For new features: branch from `master` | Vue 3
+   - For legacy fixes: branch from `v0.x` | Vue 2
+3. **Make changes** and test locally
+4. **Create PR** to the appropriate branch
+5. **Wait for review** and address feedback
+
+## Branch Guidelines
+
+- **master**: New features and breaking changes (v1.x.x)
+- **v0.x**: Bug fixes and patches for legacy version (v0.x.x)
+
+## Commit Message Format
+
+Use conventional commits:
+```bash
+feat: add new component
+fix: resolve component bug
+docs: update documentation

README.md

@@ -1,39 +1,218 @@
-# beaker
+# Streamlabs Beaker
 
-## Project setup
-```
-yarn install
-```
+[![npm version](https://badge.fury.io/js/%5Blibrary%20name%5D.svg)](https://badge.fury.io/js/%5Blibrary%20name%5D)
+[![Vue 2](https://img.shields.io/badge/Vue-2.x-brightgreen.svg)](https://v2.vuejs.org/)
+[![Vue 3](https://img.shields.io/badge/Vue-3.x-brightgreen.svg)](https://vuejs.org/)
+[![TypeScript](https://img.shields.io/badge/TypeScript-5.4.5-blue.svg)](https://www.typescriptlang.org/)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 
-### Compiles and hot-reloads for development
-```
-yarn run dev
-```
+A comprehensive design system built for Streamlabs related products, providing a consistent and reusable component library for Vue applications.
 
-### Compiles for production on GitHub
-```
-yarn run build
-```
+## 📦 Installation
 
-### Compiles for production
+### Prerequisites
+- Node.js 20+
+- Vue 2.x or Vue 3.x
+
+### Install the Package
+```bash
+npm install streamlabs-beaker
 ```
-yarn run build:publish
+
+### Version Compatibility
+- **v1.x.x** - Vue 3 support (latest)
+- **v0.x.x** - Vue 2 support (legacy maintenance)
+
+```bash
+# For Vue 3 projects
+npm install streamlabs-beaker@latest
+
+# For Vue 2 projects  
+npm install streamlabs-beaker@legacy
 ```
 
-### Run your tests
+### Peer Dependencies
+Install required peer dependencies based on your Vue version:
+
+```bash
+# Vue 3 projects
+npm install @febe95/vue-js-modal moment fuse.js
+
+# Vue 2 projects
+npm install vue-js-modal moment fuse.js
 ```
-yarn run test
+
+## 🛠️ Setup
+
+### 1. Import Styles
+Add the CSS import to your main application file:
+
+```javascript
+// main.js or App.vue
+import 'streamlabs-beaker/dist/style.css';
 ```
 
-### Lints and fixes files
+### 2. Import Components
+Import components as needed in your Vue components:
+
+```vue
+<template>
+  <div>
+    <Button variation="default" @click="handleClick">
+      Show Modal
+    </Button>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { MyButton, MyModal } from 'streamlabs-beaker';
+
+const showModal = ref(false);
+
+function handleClick() {
+  showModal.value = true;
+}
+</script>
 ```
-yarn run lint
+
+
+## 🤝 Contributing
+
+We welcome contributions from the community! Please follow our guidelines below.
+
+### Development Workflow
+
+1. **Fork and Clone**
+   ```bash
+   git clone https://github.com/your-username/beaker.git
+   cd beaker
+   npm install
+   ```
+
+2. **Create Feature Branch**
+   ```bash
+   # For new features (Vue 3)
+   git checkout -b feature/your-feature-name
+
+   # For Vue 2 legacy fixes
+   git checkout v0.x
+   git checkout -b hotfix/your-fix-name
+   ```
+
+3. **Make Changes**
+   - Write your code
+   - Update documentation if needed
+
+4. **Create Pull Request**
+   - **New features**: Create PR to `master` branch
+   - **Legacy fixes**: Create PR to `v0.x` branch
+
+### Commit Message Guidelines
+
+We use [Conventional Commits](https://www.conventionalcommits.org/) for automated changelog generation:
+
+```bash
+# Features
+feat: add new DatePicker component
+feat(button): add loading state prop
+
+# Bug fixes
+fix: resolve component reactivity issue
+fix(modal): prevent body scroll on mobile
+
+# Documentation
+docs: update installation instructions
+docs(forms): add validation examples
+
+# Other types
+refactor: simplify prop validation logic
+test: add unit tests for Button component
+chore: update dependencies
+perf: optimize table rendering performance
 ```
 
-### Publish docs to GitHub Pages
+### Branch Guidelines
+
+- **master** - New features and breaking changes (v1.x.x for Vue 3)
+- **v0.x** - Bug fixes and patches for legacy version (v0.x.x for Vue 2)
+
+### Code Standards
+
+- Follow existing code style and conventions
+- Add TypeScript types for new components
+- Include JSDoc comments for public APIs
+- Ensure all tests pass before submitting PR
+
+## 📋 Version Support
+
+### Current Versions
+- **v1.x** (Vue 3) - Active development with new features
+- **v0.x** (Vue 2) - Maintenance mode with critical bug fixes
+
+### Installation by Version
+```bash
+npm install [library name]@latest  # Vue 3 (v1.x)
+npm install [library name]@legacy  # Vue 2 (v0.x)
 ```
-yarn deploy
+
+## 🐛 Issues & Support
+
+- **Bug Reports**: [Create an Issue](https://github.com/streamlabs/beaker/issues)
+- **Feature Requests**: [Create an Issue](https://github.com/streamlabs/beaker/issues)
+- **Documentation**: [View Docs](https://streamlabs.github.io/beaker/#/installation)
+
+When reporting issues, please include:
+- Vue version
+- Library version
+- Browser and version
+- Minimal reproduction example
+
+## 📖 Documentation
+
+Complete documentation with examples and API references:
+**[https://streamlabs.github.io/beaker/#/installation](https://streamlabs.github.io/beaker/#/installation)**
+
+## 🔧 Development
+
+```bash
+# Install dependencies
+npm install
+
+# Start development server
+npm run dev
+
+# Build library
+npm run build
+
+# Generate documentation
+npm run changelog
 ```
 
-- Base folder should be included first in every project.
--
+## 📜 License
+
+MIT License
+
+Copyright (c) 2019 Streamlabs
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+---
+
+**Built with ❤️ by Streamlabs**