chore(ci): 🤖 remove contributors workflow file (#98)

Author: navin-moorthy

.github/workflows/contributors.yml

@@ -1,5 +1,5 @@
 <div align="center">
- <h1 align="center"><a aria-label="Frappe UI React" href="https://github.com/timelessco/frappe-ui-react">Frappe UI React</a></h1>
+ <h1 align="center"><a aria-label="Frappe UI React" href="https://github.com/timelessco/frappe-ui-react">Frappe UI React & React Native</a></h1>
  <p align="center">A React component library implementing Frappe's Espresso UI design system.</p>
 </div>
 
@@ -20,13 +20,13 @@
 
 ## Overview
 
-frappe-ui-react is a comprehensive React component library that implements Frappe's Espresso UI design system. While Frappe officially uses Vue.js internally, this library bridges the gap for React developers in the Frappe ecosystem who want to maintain consistent design language across their applications.
+frappe-ui-react is a comprehensive React & React Native component library that implements Frappe's Espresso UI design system. While Frappe officially uses Vue.js internally, this library bridges the gap for React developers in the Frappe ecosystem who want to maintain consistent design language across their applications.
 
 ## Why This Library?
 
 ### Community Need
 
-The Frappe ecosystem provides excellent tools including a [React SDK](https://github.com/The-Commit-Company/frappe-react-sdk) for backend interactions, but lacks official React UI components. This forces React developers to either:
+The Frappe ecosystem provides excellent tools including a [React SDK](https://github.com/The-Commit-Company/frappe-react-sdk) for backend interactions, but lacks official React components. This forces React developers to either:
 
 - Build UI components from scratch
 - Use inconsistent UI libraries that don't match Frappe's design language
@@ -58,10 +58,29 @@ This library ensures React applications can maintain the same look and feel as o
 ### Built With
 
 - React 18+
+- React Native
 - TypeScript
 - Tailwind CSS
 - Radix UI (for accessible primitives)
 
+### Build the nextjs registry with docs website
+
+```bash
+turbo run build
+```
+
+### Build and start the nextjs registry with docs website
+
+```bash
+turbo run start
+```
+
+## Available demos
+
+- [`/gameplan`](https://frappe-ui-react.tmls.dev/gameplan) - showcases the Frappe Gameplan app block
+- [`/lms`](https://frappe-ui-react.tmls.dev/lms) - showcases the Frappe LMS app block
+- [`/kitchen-sink`](https://frappe-ui-react.tmls.dev/kitchen-sink) - showcases all components
+
 ### Design System
 
 Components are built following the [Espresso UI Design System](https://www.figma.com/community/file/1407648399328528443) specifications, ensuring:
@@ -76,13 +95,15 @@ Components are built following the [Espresso UI Design System](https://www.figma
 
 ```txt
 .
-└── apps
-    └── registry (shadcn component registry with nextjs website)
+├── apps
+│   └── registry (shadcn component registry with nextjs website)
+└── native-app (react native app)
 ```
 
 ## Apps
 
 - [apps/registry](./apps/registry): Next.js, Typescript [README](./apps/registry/README.md) | [CHANGELOG](./apps/registry/CHANGELOG.md)
+- [native-app](./native-app): Frappe UI React Native, Typescript [README](./native-app/README.md)
 
 ## Development
 

README.md

@@ -1,20 +1,82 @@
-# registry-template
+# Frappe UI React Registry
 
-You can use the `shadcn` CLI to run your own component registry. Running your own
-component registry allows you to distribute your custom components, hooks, pages, and
-other files to any React project.
+A design-driven React component collection built with Espresso UI principles and Shadcn compatibility. Offers a distributed library of accessible, beautifully-crafted UI elements.
+
+## Features
+
+- Built on Next.js and TypeScript
+- Fully compatible with Shadcn CLI
+- Dark/light theme support
+- Comprehensive design tokens system
+- Component distribution via registry.json
+- Built-in documentation and kitchen sink demo
 
 ## Getting Started
 
 This is a template for creating a custom registry using Next.js.
 
-- The template uses a `registry.json` file to define components and their files.
-- The `shadcn build` command is used to build the registry.
-- The registry items are served as static files under `public/r/[name].json`.
-- The template also includes a route handler for serving registry items.
-- Every registry item are compatible with the `shadcn` CLI.
-- We have also added v0 integration using the `Open in v0` api.
+```bash
+pnpm install
+pnpm dev
+```
+
+## Project Structure
+
+```bash
+.
+├── app
+│   ├── docs             # Documentation
+│   ├── favicon.ico
+│   ├── gameplan         # /gameplan block demo
+│   ├── kitchen-sink     # /kitchen-sink block demo
+│   ├── lms              # /lms block demo
+│   ├── page.tsx
+├── components
+│   └── ui               # Component library
+│       ├── avatar-group.tsx
+│       ├── avatar.tsx
+│       ├── badge.tsx
+│       ├── button-group.tsx
+│       ├── button.tsx
+│       ├── dropdown-menu.tsx
+│       ├── icon.tsx
+│       └── input.tsx
+├── icons              # Icon components
+├── components/        # React components
+├── lib/               # Utility functions
+├── public/            # Static files
+└── registry.json      # Component registry config
+```
+
+## Build and deploy
+
+Build the registry:
+
+```shell
+pnpm run registry:build
+```
+
+Then build the registry app:
+
+```shell
+pnpm run build
+```
+
+## Available demos
+
+- [`/gameplan`](https://frappe-ui-react.tmls.dev/gameplan) - showcases the Frappe Gameplan app block
+- [`/lms`](https://frappe-ui-react.tmls.dev/lms) - showcases the Frappe LMS app block
+- [`/kitchen-sink`](https://frappe-ui-react.tmls.dev/kitchen-sink) - showcases all components
 
 ## Documentation
 
-Visit the [shadcn documentation](https://ui.shadcn.com/docs/registry) to view the full documentation.
+Visit the [shadcn documentation](https://ui.shadcn.com/docs/registry) to learn more about:
+
+- Registry configuration
+- Component development
+- Distribution setup
+- CLI usage
+
+## License
+
+MIT License - See [LICENSE](LICENSE) for details.

apps/registry/README.md

@@ -3,6 +3,7 @@
 import { redirect, usePathname } from "next/navigation";
 
 import { DocsSidebarNav } from "@/components/docs-sidebar";
+import { Navbar } from "@/components/navbar";
 import registry from "@/registry.json";
 
 interface RegistryItem {
@@ -79,6 +80,10 @@ export default function DocsLayout({
 					title: "LMS",
 					href: "/lms",
 				},
+				{
+					title: "All Components",
+					href: "/kitchen-sink",
+				},
 			],
 		},
 		...Object.entries(categoryGroups).map(([category, categoryItems]) => {
@@ -102,13 +107,16 @@ export default function DocsLayout({
 	];
 
 	return (
-		<div className="relative mx-auto w-full max-w-[540px] px-4 md:max-w-[720px] lg:max-w-[960px] xl:max-w-[1140px]">
-			<div className="grid grid-cols-1 gap-8 py-8 md:grid-cols-[250px_1fr]">
-				<aside className="border-r pr-4">
-					<DocsSidebarNav items={items} />
-				</aside>
-				<main className="prose max-w-none dark:prose-invert">{children}</main>
+		<>
+			<Navbar />
+			<div className="relative mx-auto w-full max-w-[540px] px-4 md:max-w-[720px] lg:max-w-[960px] xl:max-w-[1140px]">
+				<div className="grid grid-cols-1 gap-8 py-8 md:grid-cols-[250px_1fr]">
+					<aside className="border-r pr-4">
+						<DocsSidebarNav items={items} />
+					</aside>
+					<main className="prose max-w-none dark:prose-invert">{children}</main>
+				</div>
 			</div>
-		</div>
+		</>
 	);
 }

apps/registry/app/docs/layout.tsx

@@ -27,7 +27,7 @@ export default function Home() {
 	return (
 		<div className="relative mx-auto w-full max-w-[540px] px-4 py-8 md:max-w-[720px] lg:max-w-[960px] xl:max-w-[1140px]">
 			<header className="relative flex flex-col gap-1 py-8">
-				<h1 className="text-3xl font-bold tracking-tight">Kitchen Sink</h1>
+				<h1 className="text-3xl font-bold tracking-tight">All Components</h1>
 				<p className="text-outline-gray-5">
 					A collection of components to test the frappe-ui-react library.
 				</p>

apps/registry/app/kitchen-sink/page.tsx

@@ -14,6 +14,7 @@ import { PeopleIcon } from "@/icons/line/people";
 import { SmallDownIcon } from "@/icons/line/small-down";
 import { SmallRightChevronIcon } from "@/icons/line/small-right-chevron";
 import { SortIcon } from "@/icons/line/sort";
+import Logo from "@/icons/logo";
 
 import CourseImg1 from "./lms/_images/course-img-1.png";
 
@@ -123,15 +124,18 @@ export default function IndexPage() {
 						size="sm"
 						prefix={<SmallRightChevronIcon />}
 					>
-						<Link href="/gameplan">Browse examples</Link>
+						<Link href="/gameplan">
+							Browse examples
+							<SmallRightChevronIcon />
+						</Link>
 					</Badge>
 					<h1 className="pb-4 text-[42px] font-ef-bold leading-[115%] tracking-[0.18px] text-ink-gray-8">
 						Frappe UI Component Registry
 					</h1>
 					<p className="max-w-[555px] text-[18px] font-ef-regular leading-[150%] tracking-[0.18px] text-ink-gray-7">
-						A design-driven React component collection built with Espresso UI
-						principles and Shadcn compatibility. Offers a distributed library of
-						accessible, beautifully-crafted UI elements.
+						A design-driven React and React Native component collection built
+						with Espresso UI principles and Shadcn compatibility. Offers a
+						distributed library of accessible, beautifully-crafted UI elements.
 					</p>
 					<div className="mt-5 flex items-center space-x-2">
 						<Button variant="solid" size="lg" asChild>
@@ -686,7 +690,8 @@ function Navbar() {
 	return (
 		<header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
 			<div className="container relative mx-auto flex items-center justify-between p-4">
-				<div className="flex items-center gap-6">
+				<div className="flex items-center gap-2">
+					<Logo className="text-lg" />
 					<Link href="/" className="font-semibold">
 						Frappe UI React
 					</Link>

apps/registry/app/page.tsx

@@ -2,14 +2,16 @@ import Link from "next/link";
 import { GithubIcon } from "lucide-react";
 
 import { ModeToggle } from "@/components/mode-toggle";
+import Logo from "@/icons/logo";
 
 import { Button } from "./ui/button";
 
 export function Navbar() {
 	return (
 		<header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
 			<div className="relative mx-auto flex w-full max-w-[540px] items-center justify-between p-4 md:max-w-[720px] lg:max-w-[960px] xl:max-w-[1140px]">
-				<div className="flex items-center gap-6">
+				<div className="flex items-center gap-2">
+					<Logo className="text-lg" />
 					<Link href="/" className="font-semibold">
 						Frappe UI React
 					</Link>

apps/registry/components/navbar.tsx

@@ -0,0 +1,22 @@
+import * as React from "react";
+
+import { Icon } from "@/components/ui/icon";
+
+function Logo(props: React.SVGProps<SVGSVGElement>) {
+	return (
+		<Icon
+			viewBox="0 0 24 20"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+			{...props}
+		>
+			<path
+				d="M5.446 1.873c.86-.499 11.98-.81 12.962 0 1.014.842 4.454 6.173 4.27 6.828-.522 1.777-9.276 9.79-10.75 9.79-1.598 0-10.352-8.169-10.751-9.79-.154-.592 3.378-6.298 4.27-6.828zM17.547 8.596l-5.61 10.029m5.61-10.029h5.282m-5.282 0L14.46 1.375m3.086 7.221H1.418"
+				stroke="#050505"
+				strokeWidth={1.5}
+			/>
+		</Icon>
+	);
+}
+
+export default Logo;