Run prettier and separate dependencies

Author: mayan-000

.storybook/main.ts

@@ -15,7 +15,7 @@ const config: StorybookConfig = {
     getAbsolutePath("@storybook/addon-docs"),
     getAbsolutePath("@storybook/addon-onboarding"),
     getAbsolutePath("@storybook/addon-a11y"),
-    getAbsolutePath('@storybook/addon-themes'),
+    getAbsolutePath("@storybook/addon-themes"),
   ],
   framework: {
     name: getAbsolutePath("@storybook/react-vite"),

.storybook/manager.ts

@@ -1,11 +1,12 @@
-import { addons } from 'storybook/manager-api';
-import { create } from 'storybook/theming';
+import { addons } from "storybook/manager-api";
+import { create } from "storybook/theming";
 
 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
+    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
     brandUrl: undefined, // disables link on the title
-    brandImage: undefined
+    brandImage: undefined,
   }),
-});
+});

.storybook/modeDecorator.tsx

@@ -1,11 +1,11 @@
-import { withThemeByClassName } from '@storybook/addon-themes';
+import { withThemeByClassName } from "@storybook/addon-themes";
 
 export const decorators = [
   withThemeByClassName({
     themes: {
-      light: '', // Class name for light mode
-      dark: 'dark',  // Class name for dark mode
+      light: "", // Class name for light mode
+      dark: "dark", // Class name for dark mode
     },
-    defaultTheme: 'light', // Default theme
+    defaultTheme: "light", // Default theme
   }),
 ];

.storybook/preview.ts

@@ -1,7 +1,8 @@
 import type { Preview } from "@storybook/react-vite";
-import {decorators} from "./modeDecorator";
 import "@rtcamp/frappe-ui-react/theme.css";
 
+import { decorators } from "./modeDecorator";
+
 const preview: Preview = {
   decorators,
   parameters: {

.storybook/vitest.setup.ts

@@ -1,7 +1,8 @@
 import * as a11yAddonAnnotations from "@storybook/addon-a11y/preview";
-import { setProjectAnnotations } from '@storybook/react-vite';
-import * as projectAnnotations from './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.
 // More info at: https://storybook.js.org/docs/api/portable-stories/portable-stories-vitest#setprojectannotations
-setProjectAnnotations([a11yAddonAnnotations, projectAnnotations]);
+setProjectAnnotations([a11yAddonAnnotations, projectAnnotations]);

babel.config.cjs

@@ -1,21 +1,21 @@
 module.exports = function (api) {
-  const isProduction = api.env('production');
+  const isProduction = api.env("production");
 
   return {
     presets: [
-      ['@babel/preset-env'],
+      ["@babel/preset-env"],
       [
-        '@babel/preset-react',
+        "@babel/preset-react",
         {
           development: !isProduction,
-          runtime: 'automatic',
+          runtime: "automatic",
         },
       ],
-      '@babel/preset-typescript',
+      "@babel/preset-typescript",
     ],
     plugins: [
-      ['@babel/plugin-transform-react-jsx', {runtime: 'automatic'}],
-      ['babel-plugin-styled-components'],
+      ["@babel/plugin-transform-react-jsx", { runtime: "automatic" }],
+      ["babel-plugin-styled-components"],
     ],
     sourceMaps: true,
   };

package.json

@@ -22,7 +22,8 @@
     "publish:remote": "npm run publish:remote -w @rtcamp/frappe-ui-react",
     "build:publish:remote": "npm run build && npm run publish:remote",
     "local-registry:start": "bash ./bin/setup-local-registry.sh",
-    "local-registry:stop": "bash ./bin/stop-local-registry.sh"
+    "local-registry:stop": "bash ./bin/stop-local-registry.sh",
+    "pretty": "prettier --write \"./**/*.{js,jsx,mjs,cjs,ts,tsx,json}\""
   },
   "devDependencies": {
     "@babel/plugin-transform-react-jsx": "^7.22.5",

packages/frappe-ui-react/src/@types/index.d.ts

@@ -13,18 +13,18 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-declare module '*.svg' {
+declare module "*.svg" {
   // eslint-disable-next-line @typescript-eslint/no-require-imports
-  import React = require('react');
+  import React = require("react");
   const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>;
   export default ReactComponent;
 }
 
-declare module '*.svg?react' {
-  import * as React from 'react';
+declare module "*.svg?react" {
+  import * as React from "react";
 
   const ReactComponent: React.FunctionComponent<
-    React.ComponentProps<'svg'> & {
+    React.ComponentProps<"svg"> & {
       title?: string;
       titleId?: string;
       desc?: string;
@@ -43,7 +43,7 @@ type BulletListItem = {
   pubDate?: string;
 };
 
-declare module 'entities/decode' {
+declare module "entities/decode" {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   type EntityDecoder = any;
   export { EntityDecoder };

packages/frappe-ui-react/src/common/types.ts

@@ -1,17 +1,17 @@
-export type SizeTypes = {sm: string; md: string};
+export type SizeTypes = { sm: string; md: string };
 
 export type TextInputTypes =
-  | 'date'
-  | 'datetime-local'
-  | 'email'
-  | 'file'
-  | 'month'
-  | 'number'
-  | 'password'
-  | 'search'
-  | 'tel'
-  | 'text'
-  | 'time'
-  | 'url'
-  | 'week'
-  | 'range';
+  | "date"
+  | "datetime-local"
+  | "email"
+  | "file"
+  | "month"
+  | "number"
+  | "password"
+  | "search"
+  | "tel"
+  | "text"
+  | "time"
+  | "url"
+  | "week"
+  | "range";

packages/frappe-ui-react/src/components/alert/alert.tsx

@@ -1,4 +1,5 @@
 import React, { useMemo } from "react";
+
 import type { AlertProps } from "./types";
 
 const Alert: React.FC<AlertProps> = ({
@@ -11,7 +12,7 @@ const Alert: React.FC<AlertProps> = ({
   const classes = useMemo(() => {
     const typeClasses: { [type: string]: string } = {
       warning: "text-ink-gray-7 bg-surface-blue-1",
-    }
+    };
     return typeClasses[type] || typeClasses["warning"];
   }, [type]);