chore(eslint): setup eslint and autofix errors

.github/workflows/lint.yml

@@ -0,0 +1,32 @@
+name: Lint
+
+on:
+  pull_request:
+    branches: ["*"]
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4
+
+      - uses: pnpm/action-setup@fe02b34f77f8bc703788d5817da081398fad5dd2 # v4.0.0
+
+      - name: Install Node.js
+        uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b # v4
+        with:
+          node-version: 18
+          cache: "pnpm"
+
+      - name: Install Dependencies
+        run: pnpm i --frozen-lockfile
+
+      - name: Lint Format
+        run: pnpm lint:prettier
+
+      - name: Check Types
+        run: pnpm build --filter=./packages/*
+
+      - name: Run ESLint
+        run: pnpm lint

.prettierignore

@@ -0,0 +1,4 @@
+pnpm-lock.yaml
+.github/**/*.md
+
+.content-collections/**/*

.vscode/settings.json

@@ -4,4 +4,9 @@
       "mode": "auto"
     }
   ],
+  "tailwindCSS.experimental.classRegex": [
+    ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
+    ["cn\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
+  ],
+  "editor.defaultFormatter": "esbenp.prettier-vscode"
 }

CODE_OF_CONDUCT.md

@@ -17,23 +17,23 @@ diverse, inclusive, and healthy community.
 Examples of behavior that contributes to a positive environment for our
 community include:
 
-* Demonstrating empathy and kindness toward other people
-* Being respectful of differing opinions, viewpoints, and experiences
-* Giving and gracefully accepting constructive feedback
-* Accepting responsibility and apologizing to those affected by our mistakes,
+- Demonstrating empathy and kindness toward other people
+- Being respectful of differing opinions, viewpoints, and experiences
+- Giving and gracefully accepting constructive feedback
+- Accepting responsibility and apologizing to those affected by our mistakes,
   and learning from the experience
-* Focusing on what is best not just for us as individuals, but for the
+- Focusing on what is best not just for us as individuals, but for the
   overall community
 
 Examples of unacceptable behavior include:
 
-* The use of sexualized language or imagery, and sexual attention or
+- The use of sexualized language or imagery, and sexual attention or
   advances of any kind
-* Trolling, insulting or derogatory comments, and personal or political attacks
-* Public or private harassment
-* Publishing others' private information, such as a physical or email
+- Trolling, insulting or derogatory comments, and personal or political attacks
+- Public or private harassment
+- Publishing others' private information, such as a physical or email
   address, without their explicit permission
-* Other conduct which could reasonably be considered inappropriate in a
+- Other conduct which could reasonably be considered inappropriate in a
   professional setting
 
 ## Enforcement Responsibilities
@@ -106,7 +106,7 @@ Violating these terms may lead to a permanent ban.
 ### 4. Permanent Ban
 
 **Community Impact**: Demonstrating a pattern of violation of community
-standards, including sustained inappropriate behavior,  harassment of an
+standards, including sustained inappropriate behavior, harassment of an
 individual, or aggression toward or disparagement of classes of individuals.
 
 **Consequence**: A permanent ban from any sort of public interaction within
@@ -125,4 +125,4 @@ enforcement ladder](https://github.com/mozilla/diversity).
 
 For answers to common questions about this code of conduct, see the FAQ at
 https://www.contributor-covenant.org/faq. Translations are available at
-https://www.contributor-covenant.org/translations.
+https://www.contributor-covenant.org/translations.

CONTRIBUTING.md

@@ -1,4 +1,3 @@
-
 # Contribution Guidelines
 
 Welcome to our project! We appreciate your interest in contributing. Before you get started, please take a moment to review the following guidelines.

apps/www/.eslintrc.cjs

@@ -0,0 +1,3 @@
+module.exports = {
+  extends: "next/core-web-vitals",
+};

apps/www/app/api/search/route.ts

@@ -1,7 +1,7 @@
-import { getPages } from '@/app/source';
-import { createSearchAPI } from 'fumadocs-core/search/server';
+import { getPages } from "@/app/source";
+import { createSearchAPI } from "fumadocs-core/search/server";
 
-export const { GET } = createSearchAPI('advanced', {
+export const { GET } = createSearchAPI("advanced", {
   indexes: getPages().map((page) => ({
     title: page.data.title,
     structuredData: page.data.exports.structuredData,

apps/www/app/docs/layout.tsx

@@ -1,6 +1,6 @@
-import { DocsLayout } from 'fumadocs-ui/layout';
-import type { ReactNode } from 'react';
-import { docsOptions } from '../layout.config';
+import { DocsLayout } from "fumadocs-ui/layout";
+import type { ReactNode } from "react";
+import { docsOptions } from "../layout.config";
 
 export default function Layout({ children }: { children: ReactNode }) {
   return <DocsLayout {...docsOptions}>{children}</DocsLayout>;

apps/www/app/source.ts

@@ -2,7 +2,7 @@ import { map } from "@/.map";
 import { createMDXSource, defaultSchemas } from "fumadocs-mdx";
 import { BuildPageTreeOptions, loader } from "fumadocs-core/source";
 import { PageTree } from "fumadocs-core/server";
-import { z } from 'zod';
+import { z } from "zod";
 
 // @ts-ignore
 export const {
@@ -13,7 +13,7 @@ export const {
   getPage: (slugs: string[], language?: string) => any;
   getPages: (language?: string) => any[];
   pageTree: (
-    slug?: string[] | undefined
+    slug?: string[] | undefined,
   ) => Partial<Omit<BuildPageTreeOptions, "storage" | "getUrl">>;
   // pageTree: PageTree.Root;
 } = loader({

apps/www/components/preview/index.tsx

@@ -4,11 +4,11 @@ import { Wrapper } from "./wrapper";
 import { Avatar, AvatarWithBadge } from "ruru-ui/components/avatar";
 
 const Button = dynamic(() =>
-  import("ruru-ui/components/button").then((m) => m.Button)
+  import("ruru-ui/components/button").then((m) => m.Button),
 );
 
 const Spinner = dynamic(() =>
-  import("ruru-ui/components/spinner").then((m) => m.Spinner)
+  import("ruru-ui/components/spinner").then((m) => m.Spinner),
 );
 
 export default {

apps/www/components/preview/wrapper.tsx

@@ -1,5 +1,5 @@
-import type { HTMLAttributes } from 'react';
-import { cn } from '@/utils/cn';
+import type { HTMLAttributes } from "react";
+import { cn } from "@/utils/cn";
 
 export function Wrapper(
   props: HTMLAttributes<HTMLDivElement>,
@@ -8,7 +8,7 @@ export function Wrapper(
     <div
       {...props}
       className={cn(
-        'rounded-xl bg-primary-foreground/30 p-4 prose-no-margin border',
+        "rounded-xl bg-primary-foreground/30 p-4 prose-no-margin border",
         props.className,
       )}
     >

apps/www/content/docs/changelog.mdx

@@ -1,9 +1,8 @@
 ---
-title: Changelog  
+title: Changelog
 description: Latest updates and announcements.
 ---
 
-import { Callout } from 'fumadocs-ui/components/callout';
+import { Callout } from "fumadocs-ui/components/callout";
 
-<Callout title="Component coming soon">
-</Callout>
+<Callout title="Component coming soon"></Callout>

apps/www/content/docs/components/avatar.mdx

@@ -18,7 +18,7 @@ import { Callout } from "fumadocs-ui/components/callout";
 
   issue: [#9](https://github.com/ruru-m07/ruru-ui/issues/9)
 
-  if you can fix this then feel free to submit a PR : ) 
+if you can fix this then feel free to submit a PR : )
 
 </Callout>
 

apps/www/content/docs/components/button.mdx

@@ -46,7 +46,9 @@ import { buttonVariants } from "ruru-ui/components/button";
 ```
 
 ```tsx
-<Link href={"/"} className={buttonVariants({ variant: "secondary" })}>Click here</Link>
+<Link href={"/"} className={buttonVariants({ variant: "secondary" })}>
+  Click here
+</Link>
 ```
 
 Alternatively, you can set the `asChild` parameter and nest the link component.
@@ -226,8 +228,8 @@ The `Button` component allows you to show a loading spinner when the button is i
 
 You can show a loading spinner by passing the `loading` prop to the `Button` component. This will display a spinner in place of the button text, indicating to the user that something is happening in the background.
 
-| Name        | Type    | Default | Description                                       |
-| ----------- | ------- | ------- | ------------------------------------------------- |
+| Name        | Type    | Default | Description                                        |
+| ----------- | ------- | ------- | -------------------------------------------------- |
 | **loading** | boolean | false   | If `true` , the button will be in a loading state. |
 
 So go ahead, show a loading spinner on your button and let your users know that something is happening behind the scenes!
@@ -297,7 +299,7 @@ The `Button` component allows you to disable the button by passing the `disabled
 | Name         | Type                                   | Default   | Description                                      |
 | ------------ | -------------------------------------- | --------- | ------------------------------------------------ |
 | **children** | ReactNode                              | -         | The content of the button.                       |
-| **disabled** | boolean                                | false     | If `true` , the button will be disabled.          |
+| **disabled** | boolean                                | false     | If `true` , the button will be disabled.         |
 | **onClick**  | ( ) => void                            | -         | The function to call when the button is clicked. |
 | **type**     | 'button' \| 'submit' \| 'reset'        | 'button'  | The type of the button.                          |
 | **variant**  | 'primary' \| 'secondary' \| 'tertiary' | 'primary' | The variant of the button.                       |

apps/www/content/docs/components/spinner.mdx

@@ -60,4 +60,4 @@ You can customize the size of the spinner by passing the `size` prop.
 | Name      | Type   | Default | Description                    |
 | --------- | ------ | ------- | ------------------------------ |
 | size      | number | 20      | The size of the spinner.       |
-| className | string | -      | The class name of the spinner. |
+| className | string | -       | The class name of the spinner. |

apps/www/content/docs/dark-mode.mdx

@@ -3,7 +3,6 @@ title: Dark Mode
 description: How to enable dark mode in your app.
 ---
 
-import { Callout } from 'fumadocs-ui/components/callout';
+import { Callout } from "fumadocs-ui/components/callout";
 
-<Callout title="Component coming soon">
-</Callout>
+<Callout title="Component coming soon"></Callout>

apps/www/content/docs/index.mdx

@@ -5,7 +5,7 @@ description: Welcome to ruru UI, a modern and flexible UI library designed to he
 
 # Welcome to ruru UI
 
-Welcome to **ruru UI**, a modern and flexible UI library designed to help you build beautiful, responsive, and accessible web applications with ease. 
+Welcome to **ruru UI**, a modern and flexible UI library designed to help you build beautiful, responsive, and accessible web applications with ease.
 
 ## Why ruru UI?
 

apps/www/content/docs/installation.mdx

@@ -3,34 +3,17 @@ title: Installation
 description: To get started with ruru UI, you'll need to install the necessary dependencies and set up your project structure. This guide will walk you through the process step by step.
 ---
 
-import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
-
+import { Tab, Tabs } from "fumadocs-ui/components/tabs";
 
 ## Install Dependencies
 
 First, you'll need to install **ruru UI** and its peer dependencies. You can do this using npm or yarn:
 
-<Tabs items={['npm', 'pnpm', 'yarn', 'bun']}>
-  <Tab value="npm">
-    ```bash
-    npm install ruru-ui
-    ```
-  </Tab>
-  <Tab value="pnpm">
-    ```bash
-    pnpm install ruru-ui
-    ```
-  </Tab>
-  <Tab value="yarn">
-    ```bash
-    yarn add ruru-ui
-    ```
-  </Tab>
-  <Tab value="bun">
-    ```bash
-    bun add ruru-ui
-    ```
-  </Tab>
+<Tabs items={["npm", "pnpm", "yarn", "bun"]}>
+  <Tab value="npm">```bash npm install ruru-ui ```</Tab>
+  <Tab value="pnpm">```bash pnpm install ruru-ui ```</Tab>
+  <Tab value="yarn">```bash yarn add ruru-ui ```</Tab>
+  <Tab value="bun">```bash bun add ruru-ui ```</Tab>
 </Tabs>
 
 ## Import Styles
@@ -63,16 +46,16 @@ That's it! You're now ready to start building beautiful interfaces with **ruru U
     title="Explore the Components"
     description="Discover all the components and features ruru UI has to offer."
   />
-    <Card
-        href="/docs/examples"
-        title="View the Examples"
-        description="Explore the examples to see ruru UI in action and get inspired."
-    />
-    <Card
-        href="/docs/contributing"
-        title="Contribute to the Library"
-        description="Help make ruru UI even better by contributing to the library."
-    />
+  <Card
+    href="/docs/examples"
+    title="View the Examples"
+    description="Explore the examples to see ruru UI in action and get inspired."
+  />
+  <Card
+    href="/docs/contributing"
+    title="Contribute to the Library"
+    description="Help make ruru UI even better by contributing to the library."
+  />
 </Cards>
 
 ---

apps/www/content/docs/typography.mdx

@@ -1,9 +1,8 @@
 ---
-title: Typography  
+title: Typography
 description: Styles for headings, paragraphs, lists...etc.
 ---
 
-import { Callout } from 'fumadocs-ui/components/callout';
+import { Callout } from "fumadocs-ui/components/callout";
 
-<Callout title="Component coming soon">
-</Callout>
+<Callout title="Component coming soon"></Callout>