feat!: rename package from @triyanox/react-video to video-kit

BREAKING CHANGE: Package has been renamed from @triyanox/react-video to video-kit

This is a major version bump (v1.0.0) that renames the package for better
discoverability and removes the scope prefix.

Changes:
- Renamed package from @triyanox/react-video to video-kit
- Updated repository URLs from triyanox/react-video to chaqchase/video-kit
- Updated homepage from react-video.achaq.dev to video-kit.chaqchase.com
- Updated all import statements and documentation
- Set up changeset for automated publishing
- Updated GitHub Actions workflow for release automation

Migration:
Users should:
1. Uninstall: npm uninstall @triyanox/react-video
2. Install: npm install video-kit
3. Update imports: Change '@triyanox/react-video' to 'video-kit'

The old package will be deprecated on npm with a migration notice.

Author: chaqchase

.changeset/config.json

@@ -4,7 +4,7 @@
   "commit": false,
   "fixed": [],
   "linked": [],
-  "access": "restricted",
+  "access": "public",
   "baseBranch": "main",
   "updateInternalDependencies": "patch",
   "ignore": []

.changeset/package-rename-to-video-kit.md

@@ -0,0 +1,34 @@
+---
+"video-kit": major
+---
+
+# Package Renamed: @triyanox/react-video → video-kit
+
+This is a major release marking the rename of the package from `@triyanox/react-video` to `video-kit`.
+
+## Breaking Changes
+
+- Package name changed from `@triyanox/react-video` to `video-kit`
+- Import statements must be updated:
+  ```diff
+  - import { Video } from '@triyanox/react-video';
+  + import { Video } from 'video-kit';
+  ```
+- Installation command changed:
+  ```diff
+  - npm install @triyanox/react-video
+  + npm install video-kit
+  ```
+
+## Migration Guide
+
+1. Uninstall the old package: `npm uninstall @triyanox/react-video`
+2. Install the new package: `npm install video-kit`
+3. Update all import statements in your code from `@triyanox/react-video` to `video-kit`
+
+## Repository Updates
+
+- GitHub repository: `chaqchase/video-kit` (previously `triyanox/react-video`)
+- Homepage: `https://video-kit.chaqchase.com`
+
+All functionality remains the same. This is purely a rebranding/rename.

.github/workflows/release.yml

@@ -13,18 +13,23 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout Repo
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
 
-      - name: Setup Node.js 18.x
-        uses: actions/setup-node@v2
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
         with:
-          node-version: 20.x
+          node-version: 18
 
-      - name: Setup pnpm
-        run: npm install -g pnpm
+      - name: Install pnpm
+        uses: pnpm/action-setup@v2
+        with:
+          version: 8.9.0
 
       - name: Install Dependencies
-        run: pnpm i
+        run: pnpm install --frozen-lockfile
+
+      - name: Build packages
+        run: pnpm build
 
       - name: Create Release PR or Publish Packages
         id: changesets

README.md

@@ -1,18 +1,22 @@
-# `@triyanox/react-video` a unified customizable video playback experience across all browsers for react
+# `video-kit` a unified customizable video playback experience across all browsers for react
 
-<img src="https://raw.githubusercontent.com/triyanox/react-video/main/assets/cover.png" alt="react-video banner"
-title="react-video" align="center" height="auto" width="100%"/>
+<img src="https://raw.githubusercontent.com/chaqchase/video-kit/main/assets/cover.png" alt="video-kit banner"
+title="video-kit" align="center" height="auto" width="100%"/>
 
 ## Introduction
 
-The `@triyanox/react-video` component is a highly customizable and easy-to-use React component for playing video content in your react applications inspired by apple tv video player. It offers extensive control over video playback and is fully compatible with TailwindCSS, allowing for seamless styling integration.
+The `video-kit` component is a highly customizable and easy-to-use React component for playing video content in your react applications inspired by apple tv video player. It offers extensive control over video playback and is fully compatible with TailwindCSS, allowing for seamless styling integration.
 
 ## Installation
 
 To install the component, use the following command:
 
 ```bash
-pnpm add @triyanox/react-video
+npm install video-kit
+# or
+pnpm add video-kit
+# or
+yarn add video-kit
 ```
 
 ## Usage
@@ -22,7 +26,7 @@ pnpm add @triyanox/react-video
 You can use the video component simply by importing `Video` from the package
 
  ```tsx
- import { Video } from "@triyanox/react-video";
+ import { Video } from "video-kit";
 
  export default function Page() {
   return (
@@ -81,7 +85,7 @@ You can use the video component simply by importing `Video` from the package
 
 ```javascript
 import React from 'react';
-import { Video } from '@triyanox/react-video';
+import { Video } from 'video-kit';
 
 // Import custom icons (assuming these are available in your project)
 import {

apps/web/app/layout.tsx

@@ -93,7 +93,7 @@ export default function RootLayout({
               <Link
                 target="_blank"
                 className="text-default-900"
-                href="https://achaq.dev"
+                href="https://chaqchase.com"
               >
                 Mohamed Achaq
               </Link>

apps/web/app/page.tsx

@@ -7,18 +7,18 @@ import { Input } from '@nextui-org/input';
 import { Select, SelectItem } from '@nextui-org/select';
 import { Snippet } from '@nextui-org/snippet';
 import { Switch } from '@nextui-org/switch';
-import { Video } from '@triyanox/react-video';
+import { Video } from 'video-kit';
 import { AnimatePresence, motion } from 'framer-motion';
 import Link from 'next/link';
 import { useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 
 const packages = [
-  { label: 'pnpm', value: 'pnpm add @triyanox/react-video' },
-  { label: 'npm', value: 'npm add @triyanox/react-video' },
-  { label: 'yarn', value: 'yarn add @triyanox/react-video' },
-  { label: 'bun', value: 'bun add @triyanox/react-video' },
+  { label: 'pnpm', value: 'pnpm add video-kit' },
+  { label: 'npm', value: 'npm add video-kit' },
+  { label: 'yarn', value: 'yarn add video-kit' },
+  { label: 'bun', value: 'bun add video-kit' },
 ];
 
 const schema = z.object({
@@ -35,7 +35,7 @@ const schema = z.object({
 
 export default function Home() {
   const [value, setValue] = useState<Selection>(
-    new Set(['pnpm add @triyanox/react-video']) as unknown as Selection,
+    new Set(['pnpm add video-kit']) as unknown as Selection,
   );
   const [loading, setLoading] = useState(true);
 
@@ -56,7 +56,7 @@ export default function Home() {
   return (
     <section className="flex flex-col items-center justify-center gap-4 py-8">
       <div className="flex w-full justify-center items-center flex-col gap-4 px-4">
-        <h3 className={title()}>@triyanox/react-video</h3>
+        <h3 className={title()}>video-kit</h3>
         <p className={subtitle({ class: 'text-center' })}>
           A highly customizable react video component for your app
         </p>
@@ -192,7 +192,7 @@ export default function Home() {
             className="bg-default-900 text-default-100 mt-4"
             as={Link}
             size="lg"
-            href="https://github.com/triyanox/react-video"
+            href="https://github.com/chaqchase/video-kit"
           >
             Read Docs <GithubIcon className="text-default-100" />
           </Button>

apps/web/components/navbar.tsx

@@ -29,7 +29,7 @@ export const Navbar = () => {
             size="md"
             variant="light"
           >
-            <p className="font-bold text-inherit">@triyanox/react-video</p>
+            <p className="font-bold text-inherit">video-kit</p>
           </Button>
         </NavbarBrand>
       </NavbarContent>

apps/web/config/site.ts

@@ -1,7 +1,7 @@
 export type SiteConfig = typeof siteConfig;
 
 export const siteConfig = {
-  name: "React Video",
+  name: "Video Kit",
   description: "A react video component inspired by the ios video player",
   navItems: [
     {
@@ -10,8 +10,8 @@ export const siteConfig = {
     },
   ],
   links: {
-    github: "https://github.com/triyanox/react-video",
+    github: "https://github.com/chaqchase/video-kit",
     twitter: "https://twitter.com/ac__haq",
-    docs: "https://github.com/triyanox/react-video",
+    docs: "https://github.com/chaqchase/video-kit",
   },
 };

apps/web/package.json

@@ -25,7 +25,7 @@
     "@nextui-org/theme": "2.1.17",
     "@react-aria/ssr": "^3.8.0",
     "@react-aria/visually-hidden": "^3.8.6",
-    "@triyanox/react-video": "workspace:^",
+    "video-kit": "workspace:^",
     "@types/node": "20.5.7",
     "@types/react": "18.2.21",
     "@types/react-dom": "18.2.7",

packages/core/README.md

@@ -1,15 +1,19 @@
-# `@triyanox/react-video` a unified customizable video playback experience across all browsers for react
+# `video-kit` a unified customizable video playback experience across all browsers for react
 
 ## Introduction
 
-The `@triyanox/react-video` component is a highly customizable and easy-to-use React component for playing video content in your react applications inspired by apple tv video player. It offers extensive control over video playback and is fully compatible with TailwindCSS, allowing for seamless styling integration.
+The `video-kit` component is a highly customizable and easy-to-use React component for playing video content in your react applications inspired by apple tv video player. It offers extensive control over video playback and is fully compatible with TailwindCSS, allowing for seamless styling integration.
 
 ## Installation
 
 To install the component, use the following command:
 
 ```bash
-pnpm add @triyanox/react-video
+npm install video-kit
+# or
+pnpm add video-kit
+# or
+yarn add video-kit
 ```
 
 ## Usage
@@ -19,7 +23,7 @@ pnpm add @triyanox/react-video
 You can use the video component simply by importing `Video` from the package
 
  ```tsx
- import { Video } from "@triyanox/react-video";
+ import { Video } from "video-kit";
 
  export default function Page() {
   return (
@@ -78,7 +82,7 @@ You can use the video component simply by importing `Video` from the package
 
 ```javascript
 import React from 'react';
-import { Video } from '@triyanox/react-video';
+import { Video } from 'video-kit';
 
 // Import custom icons (assuming these are available in your project)
 import {