Merge pull request #56 from rtCamp/chore/readme-fix

Fix: Readme and update instructions

Author: mohdsayed

GETTING-STARTED.md

@@ -0,0 +1,58 @@
+# Frappe UI React
+
+Frappe UI React is a component library designed for rapid UI development using React 19 and Tailwind 4. It is inspired by the original [frappe-ui](https://github.com/frappe/frappe-ui), offering a similar aesthetic for a consistent user experience. However, we are not limited to a one-to-one port and also provide a growing collection of custom-built components to give developers more power and flexibility.
+
+## Prerequisites
+
+- Node.js v20
+- TailwindCSS v4
+
+## Usage
+
+```bash
+npm install @rtcamp/frappe-ui-react
+# or
+yarn add @rtcamp/frappe-ui-react
+```
+
+### Now, you can use the package in the following page
+
+#### index.css
+
+```css
+@import @rtcamp/frappe-ui-react/theme.css
+```
+
+#### app.tsx
+
+```js
+import './index.css';
+import { Button } from "@rtcamp/frappe-ui-react";
+
+
+function App() {
+  return (
+    <div className="app-container">
+      <Button 
+        label="Default Button"
+        theme= "gray"
+        size= "md"
+        variant= "subtle" />
+    </div>
+  );
+}
+
+export default App;
+```
+
+## Under the Hood
+
+- [TailwindCSS](https://github.com/tailwindlabs/tailwindcss): Utility first CSS Framework to build design system based UI.
+- [Headless UI](https://github.com/tailwindlabs/headlessui): Unstyled and accessible UI components.
+- [Radix UI](https://github.com/radix-ui/themes): Unstyled and accessible UI components.
+- [TipTap](https://github.com/ueberdosis/tiptap): ProseMirror based rich-text editor with a Vue API.
+- [dayjs](https://github.com/iamkun/dayjs): Minimal javascript library for working with dates.
+
+## Does this interest you?
+
+<a href="https://rtcamp.com/"><img src="https://rtcamp.com/wp-content/uploads/sites/2/2019/04/github-banner@2x.png" alt="Join us at rtCamp, we specialize in providing high performance enterprise WordPress solutions"></a>

README.md

@@ -1,9 +1,3 @@
-[![Tests](https://img.shields.io/badge/tests-passing-brightgreen)](#)
-[![Build](https://img.shields.io/badge/build-passing-brightgreen?logo=githubactions)](#)
-[![ESLint](https://img.shields.io/badge/code%20style-eslint-4B32C3?logo=eslint)](#)
-[![Prettier](https://img.shields.io/badge/code%20style-prettier-ff69b4?logo=prettier)](#)
-[![License](https://img.shields.io/badge/license-MIT-blue.svg)](./LICENSE)
-
 # Frappe UI React
 
 Frappe UI React is a component library designed for rapid UI development using React 19 and Tailwind 4. It is inspired by the original [frappe-ui](https://github.com/frappe/frappe-ui), offering a similar aesthetic for a consistent user experience. However, we are not limited to a one-to-one port and also provide a growing collection of custom-built components to give developers more power and flexibility.
@@ -16,15 +10,25 @@ Frappe UI React is a component library designed for rapid UI development using R
 ## Usage
 
 ```bash
-npm install @frappe-ui-react/frappe-ui-react
+npm install @rtcamp/frappe-ui-react
 # or
-yarn add @frappe-ui-react/frappe-ui-react
+yarn add @rtcamp/frappe-ui-react
 ```
 
-Now, import the required components in your React app:
+### Now, you can use the package in the following page
+
+#### index.css
+
+```css
+@import @rtcamp/frappe-ui-react/theme.css
+```
+
+#### app.tsx
 
 ```js
-import { Button } from "@frappe-ui-react/frappe-ui-react";
+import './index.css';
+import { Button } from "@rtcamp/frappe-ui-react";
+
 
 function App() {
   return (
@@ -49,7 +53,6 @@ export default App;
 - [TipTap](https://github.com/ueberdosis/tiptap): ProseMirror based rich-text editor with a Vue API.
 - [dayjs](https://github.com/iamkun/dayjs): Minimal javascript library for working with dates.
 
-
 ## Does this interest you?
 
 <a href="https://rtcamp.com/"><img src="https://rtcamp.com/wp-content/uploads/sites/2/2019/04/github-banner@2x.png" alt="Join us at rtCamp, we specialize in providing high performance enterprise WordPress solutions"></a>

README.mdx

@@ -1,8 +1,8 @@
 import { Meta, Markdown } from '@storybook/addon-docs/blocks';
-import README from './README.md?raw';
+import GETTINGSTARTED from './GETTING-STARTED.md?raw';
 
 <Meta title="Getting Started" />
 
 # Getting Started
 
-<Markdown>{README}</Markdown>
+<Markdown>{GETTINGSTARTED}</Markdown>

packages/frappe-ui-react/package.json

@@ -18,7 +18,9 @@
       "import": "./dist/index.js",
       "require": "./dist/index.js",
       "types": "./dist-types/index.d.ts"
-    }
+    },
+    "./theme.css": "./src/theme.css",
+    "./tailwind/preset": "./src/utils/tailwind.config.js"
   },
   "scripts": {
     "build": "tsc -b",

packages/frappe-ui-react/src/utils/tailwind.config.js

@@ -0,0 +1,3 @@
+import preset from '../../../../tailwind.config.cjs'
+
+export default preset;