feat: migrate to @openlabs/ui and @openlabs/theme (#334)

apps/storybook/package.json

@@ -30,8 +30,8 @@
     "start": "pnpm dlx http-server storybook-static"
   },
   "dependencies": {
-    "@openui-org/react": "2.1.2",
-    "@openui-org/theme": "2.1.2",
+    "@openlabs/theme": "workspace:*",
+    "@openlabs/ui": "workspace:*",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
   },

apps/storybook/tailwind.config.js

@@ -1,10 +1,10 @@
-import { openui } from '@openui-org/theme'
+import { openui } from '@openlabs/theme'
 
 /** @type {import('tailwindcss').Config} */
 export default {
   content: [
     './.storybook/welcome.stories.mdx',
-    './node_modules/@openui-org/theme/dist/**/*.{js,ts,jsx,tsx}',
+    './node_modules/@openlabs/theme/dist/**/*.{js,ts,jsx,tsx}',
     './stories/**/*.{js,ts,jsx,tsx}',
   ],
   plugins: [openui()],

apps/web/app/docs/layout.tsx

@@ -1,4 +1,4 @@
-import { ScrollArea } from '@openui-org/react'
+import { ScrollArea } from '@openlabs/ui'
 import { DocsSidebarNav } from '@/components/sidebar-nav'
 import { docsConfig } from '@/constants/docs'
 

apps/web/app/faq/page.tsx

@@ -1,4 +1,4 @@
-import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@openui-org/react'
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@openlabs/ui'
 import { FAQs } from '@/constants/faqs'
 import Title from '@/components/title'
 

apps/web/components/callout.tsx

@@ -1,4 +1,4 @@
-import { cn } from '@openui-org/theme'
+import { cn } from '@openlabs/theme'
 
 interface CalloutProps {
   icon?: string

apps/web/components/commons.tsx

@@ -1,4 +1,4 @@
-import { Badge, Card, CardContent, CardDescription, CardHeader, CardTitle } from '@openui-org/react'
+import { Badge, Card, CardContent, CardDescription, CardHeader, CardTitle } from '@openlabs/ui'
 import {
   CreditCardIcon,
   FileInputIcon,

apps/web/components/dark-mode.tsx

@@ -9,7 +9,7 @@ import {
   DropdownContent,
   DropdownItem,
   DropdownTrigger,
-} from '@openui-org/react'
+} from '@openlabs/ui'
 
 export function DarkMode() {
   const { setTheme } = useTheme()

apps/web/components/docs-footer.tsx

@@ -1,4 +1,4 @@
-import { cn } from '@openui-org/theme'
+import { cn } from '@openlabs/theme'
 import * as React from 'react'
 
 export function SiteFooter({ className }: React.HTMLAttributes<HTMLElement>) {

apps/web/components/docs-search.tsx

@@ -2,8 +2,8 @@
 
 import * as React from 'react'
 
-import { cn } from '@openui-org/theme'
-import { Input } from '@openui-org/react'
+import { cn } from '@openlabs/theme'
+import { Input } from '@openlabs/ui'
 import { Search } from 'lucide-react'
 
 interface DocsSearchProps extends React.HTMLAttributes<HTMLFormElement> {}

apps/web/components/explore-docs.tsx

@@ -1,6 +1,6 @@
-import { Button } from '@openui-org/react'
+import { Button } from '@openlabs/ui'
 import Link from 'next/link'
-import { cn } from '@openui-org/theme'
+import { cn } from '@openlabs/theme'
 import Title from './title'
 
 export default function ExploreDocs() {

apps/web/components/home.tsx

@@ -1,4 +1,4 @@
-import { Badge, Button } from '@openui-org/react'
+import { Badge, Button } from '@openlabs/ui'
 import Link from 'next/link'
 
 export default function Home() {

apps/web/components/mdx-card.tsx

@@ -1,4 +1,4 @@
-import { cn } from '@openui-org/theme'
+import { cn } from '@openlabs/theme'
 import Link from 'next/link'
 
 interface CardProps extends React.HTMLAttributes<HTMLDivElement> {

apps/web/components/mdx-components.tsx

@@ -4,7 +4,7 @@ import * as React from 'react'
 import Image from 'next/image'
 import { useMDXComponent } from 'next-contentlayer/hooks'
 
-import { cn } from '@openui-org/theme'
+import { cn } from '@openlabs/theme'
 import { PackageManagers } from './package-manager'
 import { Callout } from '@/components/callout'
 import { MdxCard } from '@/components/mdx-card'

apps/web/components/menu.tsx

@@ -1,5 +1,5 @@
 'use client'
-import { Button } from '@openui-org/react'
+import { Button } from '@openlabs/ui'
 import Link from 'next/link'
 import { usePathname } from 'next/navigation'
 import { DocsSearch } from './docs-search'

apps/web/components/mobile-sidebar.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import { Button, ScrollArea, Sheet, SheetContent, SheetTrigger } from '@openui-org/react'
+import { Button, ScrollArea, Sheet, SheetContent, SheetTrigger } from '@openlabs/ui'
 import { DocsSidebarNav } from './sidebar-nav'
 import { docsConfig } from '@/constants/docs'
 

apps/web/components/package-manager.tsx

@@ -1,4 +1,4 @@
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@openui-org/react'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@openlabs/ui'
 
 // create array packages managers
 

apps/web/components/page-header.tsx

@@ -1,4 +1,4 @@
-import { cn } from '@openui-org/theme'
+import { cn } from '@openlabs/theme'
 
 interface DocsPageHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
   heading: string

apps/web/components/pager.tsx

@@ -1,7 +1,7 @@
 import Link from 'next/link'
 import type { Doc } from 'contentlayer/generated'
 import { ArrowLeft, ArrowRight } from 'lucide-react'
-import { Button } from '@openui-org/react'
+import { Button } from '@openlabs/ui'
 import { docsConfig } from '@/constants/docs'
 
 interface DocsPagerProps {

apps/web/components/sidebar-nav.tsx

@@ -2,9 +2,9 @@
 
 import Link from 'next/link'
 import { usePathname } from 'next/navigation'
-import { Button } from '@openui-org/react'
+import { Button } from '@openlabs/ui'
 import type { Dispatch, SetStateAction } from 'react'
-import { cn } from '@openui-org/theme'
+import { cn } from '@openlabs/theme'
 import type { NavItem } from './main-nav'
 
 export type SidebarNavItem = {

apps/web/components/title.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { cn } from '@openui-org/theme'
+import { cn } from '@openlabs/theme'
 
 export interface Comp extends HTMLHeadingElement {}
 export interface Props extends React.HTMLAttributes<HTMLHeadingElement> {}

apps/web/components/toc.tsx

@@ -2,7 +2,7 @@
 
 import * as React from 'react'
 
-import { cn } from '@openui-org/theme'
+import { cn } from '@openlabs/theme'
 import type { TableOfContents } from '@/lib/toc'
 import { useMounted } from '@/hooks/use-mounted'
 

apps/web/content/docs/components/accordion.mdx

@@ -17,7 +17,7 @@ import {
   AccordionItem,
   AccordionTrigger,
   AccordionContent,
-} from '@openui-org/react'
+} from '@openlabs/ui'
 
 function App() {
   return (
@@ -59,7 +59,7 @@ import {
   AccordionItem,
   AccordionTrigger,
   AccordionContent,
-} from '@openui-org/react'
+} from '@openlabs/ui'
 
 function App() {
   return (
@@ -102,7 +102,7 @@ import {
   AccordionItem,
   AccordionTrigger,
   AccordionContent,
-} from '@openui-org/react'
+} from '@openlabs/ui'
 
 function App() {
   return (
@@ -149,7 +149,7 @@ import {
   AccordionItem,
   AccordionTrigger,
   AccordionContent,
-} from '@openui-org/react'
+} from '@openlabs/ui'
 
 function App() {
   return (
@@ -191,7 +191,7 @@ import {
   AccordionItem,
   AccordionTrigger,
   AccordionContent,
-} from '@openui-org/react'
+} from '@openlabs/ui'
 
 function App() {
   return (
@@ -233,7 +233,7 @@ import {
   AccordionItem,
   AccordionTrigger,
   AccordionContent,
-} from '@openui-org/react'
+} from '@openlabs/ui'
 
 function App() {
   return (
@@ -275,7 +275,7 @@ import {
   AccordionItem,
   AccordionTrigger,
   AccordionContent,
-} from '@openui-org/react'
+} from '@openlabs/ui'
 
 function App() {
   return (
@@ -317,7 +317,7 @@ import {
   AccordionItem,
   AccordionTrigger,
   AccordionContent,
-} from '@openui-org/react'
+} from '@openlabs/ui'
 
 function App() {
   return (

apps/web/content/docs/frameworks/astro.mdx

@@ -20,13 +20,13 @@ In your Astro project, run one of the following command to install Open UI:
 ### npm
 
 ```sh
-npm install @openui-org/theme @openui-org/react
+npm install @openlabs/theme @openlabs/ui
 ```
 
 ### pnpm
 
 ```sh
-pnpm add @openui-org/theme @openui-org/react
+pnpm add @openlabs/theme @openlabs/ui
 ```
 
 ### Tailwind CSS Setup
@@ -37,12 +37,12 @@ the following code to your `tailwind.config.mjs` file:
 
 ```js
 // tailwind.config.mjs
-import { openui } from "@openui-org/theme"
+import { openui } from "@openlabs/theme"
 
 export default {
   content: [
     //...
-    "./node_modules/@openui-org/theme/dist/**/*.{js,ts,jsx,tsx}",
+    "./node_modules/@openlabs/theme/dist/**/*.{js,ts,jsx,tsx}",
   ],
   theme: {
     extend: {},
@@ -58,7 +58,7 @@ Now you can import Open UI components and use them in your Astro project:
 ```markdown
 ---
 import Layout from '../layouts/Layout.astro';
-import { Button } from '@openui-org/react';
+import { Button } from '@openlabs/ui';
 ---
 
 <Layout title="Welcome to Astro.">

apps/web/content/docs/frameworks/nextjs.mdx

@@ -22,13 +22,13 @@ In your Next.js project, run one of the following command to install Open UI:
 ### npm
 
 ```sh
-npm install @openui-org/theme @openui-org/react
+npm install @openlabs/theme @openlabs/ui
 ```
 
 ### pnpm
 
 ```sh
-pnpm add @openui-org/theme @openui-org/react
+pnpm add @openlabs/theme @openlabs/ui
 ```
 
 ## Tailwind CSS Setup
@@ -39,13 +39,13 @@ the following code to your `tailwind.config.js` file:
 
 ```js
 // tailwind.config.js
-import { openui } from "@openui-org/theme"
+import { openui } from "@openlabs/theme"
 
 /** @type {import("tailwindcss").Config} */
 export default {
   content: [
     //...
-    "./node_modules/@openui-org/theme/dist/**/*.{js,ts,jsx,tsx}",
+    "./node_modules/@openlabs/theme/dist/**/*.{js,ts,jsx,tsx}",
   ],
   theme: {
     extend: {},
@@ -60,7 +60,7 @@ Now, you can use the component you installed in your application 🎉.
 
 ```jsx
 // src/components/ButtonExample.jsx
-import { Button } from "@openui-org/react"
+import { Button } from "@openlabs/ui"
 
 export default function ButtonExample() {
   return <Button>Press me</Button>

apps/web/content/docs/frameworks/remix.mdx

@@ -15,13 +15,13 @@ In your Remix project, run one of the following command to install Open UI:
 ### npm
 
 ```sh
-npm install @openui-org/theme @openui-org/react
+npm install @openlabs/theme @openlabs/ui
 ```
 
 ### pnpm
 
 ```sh
-pnpm add @openui-org/theme @openui-org/react
+pnpm add @openlabs/theme @openlabs/ui
 ```
 
 ### Tailwind CSS Setup
@@ -33,12 +33,12 @@ the following code to your `tailwind.config.ts` file:
 ```ts
 // tailwind.config.ts
 import type { Config } from 'tailwindcss'
-import { openui } from "@openui-org/theme"
+import { openui } from "@openlabs/theme"
 
 export default {
   content: [
     //...
-    "./node_modules/@openui-org/theme/dist/**/*.{js,ts,jsx,tsx}",
+    "./node_modules/@openlabs/theme/dist/**/*.{js,ts,jsx,tsx}",
   ],
   theme: {
     extend: {},
@@ -53,7 +53,7 @@ Now, you can use the component you installed in your application 🎉.
 
 ```jsx
 // src/components/ButtonExample.tsx
-import { Button } from "@openui-org/react"
+import { Button } from "@openlabs/ui"
 
 export default function ButtonExample() {
   return <Button>Press me</Button>