Feature: Add ButtonGroup, RadioButton, Tag, Spacer and Slider components based on Espresso by Frappe

.editorConfig

@@ -14,4 +14,9 @@ indent_size = 2
 
 # Markdown files
 [*.md]
-trim_trailing_whitespace = false
+trim_trailing_whitespace = false
+
+# Style files
+[*.css]
+indent_size = 4
+

.github/dependabot.yml

@@ -0,0 +1,34 @@
+version: 2
+updates:
+  - package-ecosystem: "composer"
+    directory: "/"
+    schedule:
+      interval: "daily"
+  - package-ecosystem: "npm"
+    directory: "/"
+    schedule:
+      interval: "daily"
+  - package-ecosystem: "docker"
+    directory: "/"
+    schedule:
+      interval: "monthly"
+  - package-ecosystem: "pip"
+    directory: "/"
+    schedule:
+      interval: "daily"
+  - package-ecosystem: "bundler"
+    directory: "/"
+    schedule:
+      interval: "daily"
+  - package-ecosystem: "gomod"
+    directory: "/"
+    schedule:
+      interval: "daily"
+  - package-ecosystem: "github-actions"
+    directory: "/"
+    schedule:
+      interval: "daily"
+  - package-ecosystem: "terraform"
+    directory: "/"
+    schedule:
+      interval: "daily"

.github/workflows/deploy.yaml

@@ -19,30 +19,33 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v4
+        uses: actions/checkout@v6
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
 
       - name: Setup Node.js
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v6
         with:
           node-version-file: '.nvmrc'
-          cache: 'npm'
+          cache: 'pnpm'
 
       - name: Install dependencies
         run: |
           ls 
           pwd 
           rm -rf **/node_modules
           rm -rf package-lock.json
-          npm install || true
+          pnpm install || true
 
       - name: Build Storybook
-        run: npm run build-storybook
+        run: pnpm build-storybook
 
       - name: Setup Pages
         uses: actions/configure-pages@v5
 
       - name: Upload artifact
-        uses: actions/upload-pages-artifact@v3
+        uses: actions/upload-pages-artifact@v4
         with:
           path: './storybook-static'
 

.husky/pre-commit

@@ -1,4 +1 @@
-#!/usr/bin/env sh
-. "$(dirname -- "$0")/_/husky.sh"
-
 npx lint-staged --relative

.npmrc

@@ -0,0 +1 @@
+engine-strict = true

.prettierignore

@@ -0,0 +1,3 @@
+.github
+pnpm-lock.yaml
+storybook-static

.prettierrc

@@ -0,0 +1,3 @@
+{
+  "trailingComma": "es5"
+}

.storybook/main.ts

@@ -11,11 +11,10 @@ const config: StorybookConfig = {
     "../**/src/**/*.stories.@(js|jsx|mjs|ts|tsx)",
   ],
   addons: [
-    getAbsolutePath("@chromatic-com/storybook"),
     getAbsolutePath("@storybook/addon-docs"),
-    getAbsolutePath("@storybook/addon-onboarding"),
     getAbsolutePath("@storybook/addon-a11y"),
     getAbsolutePath("@storybook/addon-themes"),
+    getAbsolutePath("@storybook/addon-vitest"),
   ],
   framework: {
     name: getAbsolutePath("@storybook/react-vite"),
@@ -40,7 +39,8 @@ const config: StorybookConfig = {
     check: true,
     skipCompiler: true,
     reactDocgenTypescriptOptions: {
-      propFilter: (prop) => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true),
+      propFilter: (prop) =>
+        prop.parent ? !/node_modules/.test(prop.parent.fileName) : true,
     },
   },
 };

.storybook/manager.ts

@@ -5,17 +5,17 @@ addons.setConfig({
   theme: create({
     base: "light",
     brandTitle:
-      '<h1 id="fur-title">frappe-ui-react</h1> <span id="fur-version">(v1.0.0-beta.3)</span>', // update version as per package.json
+      '<h1 id="fur-title">frappe-ui-react</h1> <span id="fur-version">(v1.0.4)</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)', 
-                                          
+    // 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)',
+    colorPrimary: "rgb(153, 153, 153)",
+    colorSecondary: "rgb(153, 153, 153)",
     fontBase: '"Inter", sans-serif',
   }),
-  panelPosition: 'right', // Options: 'bottom' (default), 'right'
+  panelPosition: "right", // Options: 'bottom' (default), 'right'
 });

.storybook/preview.ts

@@ -1,8 +1,12 @@
 import type { Preview } from "@storybook/react-vite";
-import { themes } from 'storybook/theming';
-import { DocsRenderer } from '@storybook/addon-docs';
-import type { DocsContextProps, Parameters, Renderer } from 'storybook/internal/types';
-import './preview-styles.css';
+import { themes } from "storybook/theming";
+import { DocsRenderer } from "@storybook/addon-docs";
+import type {
+  DocsContextProps,
+  Parameters,
+  Renderer,
+} from "storybook/internal/types";
+import "./preview-styles.css";
 import "@rtcamp/frappe-ui-react/theme.css";
 
 import { decorators } from "./modeDecorator";
@@ -22,12 +26,21 @@ const preview: Preview = {
         const renderer = new DocsRenderer();
         const oldRender = renderer.render;
 
-        renderer.render = async (context: DocsContextProps<Renderer>, docsParameter: Parameters, element: HTMLElement) => {
+        renderer.render = async (
+          context: DocsContextProps<Renderer>,
+          docsParameter: Parameters,
+          element: HTMLElement
+        ) => {
           const theme = (context as any).store.userGlobals.globals.theme;
 
-          docsParameter.theme = theme === 'dark' ? themes.dark : themes.light;
+          docsParameter.theme = theme === "dark" ? themes.dark : themes.light;
 
-          const result = await oldRender.call(renderer, context, docsParameter, element);
+          const result = await oldRender.call(
+            renderer,
+            context,
+            docsParameter,
+            element
+          );
 
           return result;
         };

.storybook/vitest.setup.ts

@@ -1,6 +1,5 @@
 import * as a11yAddonAnnotations from "@storybook/addon-a11y/preview";
 import { setProjectAnnotations } from "@storybook/react-vite";
-
 import * as projectAnnotations from "./preview";
 
 // This is an important step to apply the right configuration when testing your stories.

CONTRIBUTING.md

@@ -71,12 +71,11 @@ git checkout main
 git pull upstream main
 ```
 
-4. Install the dependencies with npm and run storybook.
+4. Install the dependencies with pnpm and run storybook.
 
 ```bash
-nvm use # To ensure correct node version.
-npm install
-npm run storybook
+pnpm install
+pnpm storybook
 ```
 
 5. Create a new topic branch:
@@ -116,9 +115,9 @@ Make sure the following is true:
 We will only merge a PR when all tests pass.
 The following statements must be true:
 
-- The code is formatted. If the code was changed, run `npm run lint:js:fix`.
-- The code is linted. If the code was changed, run `npm run lint:js`.
-- The code is type-safe. If TypeScript sources or declarations were changed, run `npm run lint:types` to confirm that the check passes.
+- The code is formatted. If the code was changed, run `pnpm lint:js:fix`.
+- The code is linted. If the code was changed, run `pnpm lint:js`.
+- The code is type-safe. If TypeScript sources or declarations were changed, run `pnpm lint:types` to confirm that the check passes.
 - The pull request title follows the pattern `[Component/Area] Imperative commit message`. (See: [How to Write a Git Commit Message](https://chris.beams.io/posts/git-commit/) for a great explanation).
 
 Don't worry if you miss a step—the Continuous Integration will run a thorough set of tests on your commits, and the maintainers of the project can assist you if you run into problems.
@@ -152,9 +151,9 @@ This ensures the package can be built successfully for distribution.
 Please follow the coding style of the project.
 It uses Prettier and ESLint, so if possible, enable linting in your editor to get real-time feedback.
 
-- `npm run lint:js:fix` reformats the code and fixes linting issues.
-- `npm run lint:js` runs the linting rules.
-- `npm run lint:types` checks TypeScript types.
+- `pnpm lint:js:fix` reformats the code and fixes linting issues.
+- `pnpm lint:js` runs the linting rules.
+- `pnpm lint:types` checks TypeScript types.
 
 When you submit a PR, these checks are run again by our continuous integration tools, but hopefully your code is already clean!
 
@@ -220,7 +219,7 @@ export const Default: Story = {
 Run Storybook locally to ensure your new story appears and works correctly:
 
 ```bash
-npm run storybook
+pnpm storybook
 ```
 
 #### 4. Submit your PR

GETTING-STARTED.md

@@ -11,11 +11,16 @@ You can set up `frappe-ui-react` in your existing Frappe app with the following
 
 ### Step 1: Installation
 
-Install the package using npm.
+Install the packages.
 
 ```bash
 npm install @rtcamp/frappe-ui-react
 ```
+OR
+
+```bash
+pnpm add @rtcamp/frappe-ui-react
+```
 
 ### Step 2: Configuration
 
@@ -85,7 +90,6 @@ 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.
 
 ## Inspiration & Credits

README.md

@@ -16,11 +16,16 @@ You can set up `frappe-ui-react` in your existing Frappe app with the following
 
 ### Step 1: Installation
 
-Install the package using npm.
+Install the packages.
 
 ```bash
 npm install @rtcamp/frappe-ui-react
 ```
+OR
+
+```bash
+pnpm add @rtcamp/frappe-ui-react
+```
 
 ### Step 2: Configuration
 
@@ -91,7 +96,6 @@ 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.
 
 ## Inspiration & Credits

bin/setup-local-registry.sh

@@ -16,7 +16,7 @@ curdir=$(dirname "$(realpath $0)")
 
 (cd && nohup npx verdaccio --config "$curdir/verdaccio-config.yml" &>$tmp_registry_log &)
 
-npm i --global verdaccio-memory
+pnpm i --global verdaccio-memory
 
 # Wait for Verdaccio to boot.
 grep -q 'http address' <(tail -f $tmp_registry_log)

eslint.config.js

@@ -5,27 +5,25 @@ import globals from "globals";
 import reactHooks from "eslint-plugin-react-hooks";
 import reactRefresh from "eslint-plugin-react-refresh";
 import tseslint from "typescript-eslint";
-import { globalIgnores } from "eslint/config";
+import { defineConfig, globalIgnores } from "eslint/config";
 
-export default tseslint.config(
-  [
-    globalIgnores(["dist"]),
-    {
-      files: ["**/*.{ts,tsx}"],
-      extends: [
-        js.configs.recommended,
-        tseslint.configs.recommended,
-        reactHooks.configs["recommended-latest"],
-        reactRefresh.configs.vite,
-      ],
-      languageOptions: {
-        ecmaVersion: 2020,
-        globals: globals.browser,
-      },
-      rules: {
-        "@typescript-eslint/no-explicit-any": "warn",
-      },
+export default defineConfig([
+  globalIgnores(["dist", "storybook-static"]),
+  reactHooks.configs.flat.recommended,
+  {
+    files: ["**/*.{ts,tsx}"],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommended,
+      reactRefresh.configs.vite,
+      storybook.configs["flat/recommended"],
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
     },
-  ],
-  storybook.configs["flat/recommended"]
-);
+    rules: {
+      "@typescript-eslint/no-explicit-any": "warn",
+    },
+  },
+]);