Improve storybook UI and getting started guide (#58)

Author: mohdsayed

.storybook/manager-head.html

@@ -1,12 +1,27 @@
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet">
+
 <style>
+
+  body, html, div, span, p, h1, h2, h3, h4, h5, h6, 
+  button, input, textarea, select, label {
+    font-family: "Inter", sans-serif ;
+    font-optical-sizing: auto;
+  }
+
   /* Title */
   .sidebar-header div a {
     font-size: 20px !important;
     font-weight: 600;
   }
 
   #fur-title {
-    font-size: 25px;
+    font-size: 22px;
+    font-weight: 700;
+    color: #000000;
+    letter-spacing: -0.02em;
+    line-height: 1.2;
   }
 
   #fur-version {
@@ -15,4 +30,43 @@
     display: block;
     color: grey;
   }
+
+  #root .sidebar-container {
+    background-color: rgb(243, 243, 243);
+  }
+
+  #root > div > div {
+    border-right: 1px solid rgba(226, 226, 226, 0.3);
+  }
+
+  #storybook-explorer-tree .sidebar-item > button > div > svg {
+    visibility: hidden;
+  }
+
+  #storybook-explorer-tree .sidebar-item > button > div::before {
+    content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='currentColor' d='m28.504 8.136l-12-7a1 1 0 0 0-1.008 0l-12 7A1 1 0 0 0 3 9v14a1 1 0 0 0 .496.864l12 7a1 1 0 0 0 1.008 0l12-7A1 1 0 0 0 29 23V9a1 1 0 0 0-.496-.864M16 3.158L26.016 9L16 14.842L5.984 9ZM5 10.74l10 5.833V28.26L5 22.426Zm12 17.52V16.574l10-5.833v11.685Z'/></svg>");
+    color: #999999;
+    display: inline-block;
+    width: 14px;
+    height: 14px;
+    vertical-align: middle;
+    transform: translate(34px, 0px);
+    opacity: 0.5;
+  }
+
+  #storybook-explorer-tree .sidebar-item[data-selected="true"]{
+    font-weight: normal;
+  }
+
+  #storybook-explorer-tree .sidebar-item[data-selected="true"]:hover {
+    background-color: rgb(124, 124, 124);
+  }
+
+  #storybook-explorer-tree .sidebar-subheading > button {
+    text-transform: none;
+    font-weight: normal;
+    letter-spacing: normal;
+    font-size: 14px;
+  }
+
 </style>

.storybook/manager.ts

@@ -5,8 +5,17 @@ addons.setConfig({
   theme: create({
     base: "light",
     brandTitle:
-      '<span id="fur-title">frappe-ui-react</span> <span id="fur-version">(v1.0.0-beta.0)</span>', // update version as per package.json
+      '<h1 id="fur-title">frappe-ui-react</h1> <span id="fur-version">(v1.0.0-beta.0)</span>', // update version as per package.json
     brandUrl: undefined, // disables link on the title
     brandImage: undefined,
+
+      // Sidebar/Toolbar active state color
+    barSelectedColor: 'rgb(153, 153, 153)', 
+                                          
+    // Primary accent color for buttons, links, focus states
+    colorPrimary: 'rgb(153, 153, 153)',   
+    colorSecondary: 'rgb(153, 153, 153)',
+    fontBase: '"Inter", sans-serif',
   }),
+  panelPosition: 'right', // Options: 'bottom' (default), 'right'
 });

.storybook/preview-styles.css

@@ -0,0 +1,21 @@
+ #storybook-docs, 
+ #storybook-docs .sbdocs-title, 
+ #storybook-docs > .sbdocs > .sbdocs > h1  {
+  font-family: "Inter", sans-serif;
+  font-optical-sizing: auto;
+ }
+
+ #storybook-docs .sbdocs-title, 
+ #storybook-docs > .sbdocs > .sbdocs > h1  {
+    font-weight: 800;
+    font-size: 36px;
+ }
+
+ #storybook-docs .sbdocs-content p {
+    font-size: 16px;
+ }
+
+ #storybook-docs .sbdocs-content h2 {
+   font-weight: 800;
+   font-size: 24px;
+ }

.storybook/preview.ts

@@ -1,4 +1,5 @@
 import type { Preview } from "@storybook/react-vite";
+import './preview-styles.css';
 import "@rtcamp/frappe-ui-react/theme.css";
 
 import { decorators } from "./modeDecorator";

GETTING-STARTED.md

@@ -1,6 +1,4 @@
-# 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.
+Frappe UI React is a modern component library designed for building frontend applications in React, specifically tailored for the [Frappe Framework](https://frappe.io/framework). It is inspired by the original [frappe-ui](https://github.com/frappe/frappe-ui), which is created in Vue, offering a similar components and aesthetic in React. 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
 
@@ -9,35 +7,53 @@ Frappe UI React is a component library designed for rapid UI development using R
 
 ## Usage
 
+You can set up frappe-ui-react in the following simple steps.
+
+### Step 1: Installation
+
+Install the package using npm.
+
 ```bash
 npm install @rtcamp/frappe-ui-react
-# or
-yarn add @rtcamp/frappe-ui-react
 ```
 
-### Now, you can use the package in the following page
+### Step 2: Configuration
 
-#### index.css
+**Option 1 (Recommended):** If you already have a Tailwind configuration, import the tailwind configuration from `frappe-ui-react` and use it as a preset or extend your existing configuration.
+
+```js
+// tailwind.config.js in your project
+module.exports = {
+  presets: [
+    require('@rtcamp/frappe-ui-react/tailwind/preset')
+  ],
+  // Additional configuration...
+}
+```
+
+**Option 2:** Import the theme CSS directly into your project (e.g., in `index.css`).
 
 ```css
-@import @rtcamp/frappe-ui-react/theme.css
+@import '@rtcamp/frappe-ui-react/theme.css';
 ```
 
-#### app.tsx
+### Step 3: Import and Use Components
 
-```js
+You can now import components and use them in your project.
+
+```jsx
 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" />
+        theme="gray"
+        size="md"
+        variant="subtle" 
+      />
     </div>
   );
 }
@@ -47,12 +63,14 @@ 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.
+This library is built on top of several excellent open-source projects:
+
+- **[TailwindCSS](https://github.com/tailwindlabs/tailwindcss)**: Utility-first CSS framework for building design system-based UIs.
+- **[Headless UI](https://github.com/tailwindlabs/headlessui)**: Unstyled and accessible UI components.
+- **[Radix UI](https://github.com/radix-ui/themes)**: Low-level, unstyled, and accessible UI primitives.
+- **[React Quill](https://github.com/zenoamaro/react-quill)**: Rich text editor component for React.
+- **[dayjs](https://github.com/iamkun/dayjs)**: Lightweight JavaScript library for working with dates.
 
-## Does this interest you?
+## Inspiration & Credits
 
-<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>
+This project, **Frappe UI React**, is heavily inspired by the original **[Frappe UI](https://github.com/frappe/frappe-ui)** project. Frappe UI is a fantastic Vue.js component library, and our goal with Frappe UI React is to bring a similar aesthetic and component experience to the React ecosystem.

README.md

@@ -1,6 +1,9 @@
 # Frappe UI React
+[![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 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.
+Frappe UI React is a modern component library designed for building frontend applications in React, specifically tailored for the [Frappe Framework](https://frappe.io/framework). It is inspired by the original [frappe-ui](https://github.com/frappe/frappe-ui), which is created in Vue, offering a similar components and aesthetic in React. 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
 
@@ -9,35 +12,53 @@ Frappe UI React is a component library designed for rapid UI development using R
 
 ## Usage
 
+You can set up frappe-ui-react in the following simple steps.
+
+### Step 1: Installation
+
+Install the package using npm.
+
 ```bash
 npm install @rtcamp/frappe-ui-react
-# or
-yarn add @rtcamp/frappe-ui-react
 ```
 
-### Now, you can use the package in the following page
+### Step 2: Configuration
+
+**Option 1 (Recommended):** If you already have a Tailwind configuration, import the tailwind configuration from `frappe-ui-react` and use it as a preset or extend your existing configuration.
+
+```js
+// tailwind.config.js in your project
+module.exports = {
+  presets: [
+    require('@rtcamp/frappe-ui-react/tailwind/preset')
+  ],
+  // Additional configuration...
+}
+```
 
-#### index.css
+**Option 2:** Import the theme CSS directly into your project (e.g., in `index.css`).
 
 ```css
-@import @rtcamp/frappe-ui-react/theme.css
+@import '@rtcamp/frappe-ui-react/theme.css';
 ```
 
-#### app.tsx
+### Step 3: Import and Use Components
 
-```js
+You can now import components and use them in your project.
+
+```jsx
 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" />
+        theme="gray"
+        size="md"
+        variant="subtle" 
+      />
     </div>
   );
 }
@@ -47,12 +68,14 @@ 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.
+This library is built on top of several excellent open-source projects:
+
+- **[TailwindCSS](https://github.com/tailwindlabs/tailwindcss)**: Utility-first CSS framework for building design system-based UIs.
+- **[Headless UI](https://github.com/tailwindlabs/headlessui)**: Unstyled and accessible UI components.
+- **[Radix UI](https://github.com/radix-ui/themes)**: Low-level, unstyled, and accessible UI primitives.
+- **[React Quill](https://github.com/zenoamaro/react-quill)**: Rich text editor component for React.
+- **[dayjs](https://github.com/iamkun/dayjs)**: Lightweight JavaScript library for working with dates.
 
-## Does this interest you?
+## Inspiration & Credits
 
-<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>
+This project, **Frappe UI React**, is heavily inspired by the original **[Frappe UI](https://github.com/frappe/frappe-ui)** project. Frappe UI is a fantastic Vue.js component library, and our goal with Frappe UI React is to bring a similar aesthetic and component experience to the React ecosystem.

packages/frappe-ui-react/src/components/themeShowCase/ThemeShowcase.css

@@ -1,3 +1,12 @@
+/**
+ * Theme Showcase Component Styles
+ * 
+ * This CSS file contains all styles for the ThemeShowcase component, which is used
+ * to display and demonstrate the Frappe UI React component library.
+ * 
+ * - Used primarily in Storybook documentation and component demos
+ */
+
 .theme-showcase {
   --showcase-max-width: 1200px;
   --showcase-padding: 2rem;
@@ -10,7 +19,8 @@
   --showcase-tab-active-border: var(--outline-blue-1);
 
   padding: var(--showcase-padding);
-  font-family: "Reddit Sans", sans-serif;
+  font-family: "Inter", sans-serif;
+  font-optical-sizing: auto;
   color: var(--showcase-font-color);
   max-width: var(--showcase-max-width);
   margin: 0 auto;