chore: use prettier (#3198)

.github/FUNDING.yml

@@ -9,4 +9,4 @@ community_bridge: # Replace with a single Community Bridge project-name e.g., cl
 liberapay: # Replace with a single Liberapay username
 issuehunt: # Replace with a single IssueHunt username
 otechie: # Replace with a single Otechie username
-custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']
+custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -1,6 +1,6 @@
 name: 'Bug Report'
 description: 'Submit a bug report'
-labels: ["triage"]
+labels: ['triage']
 body:
   - type: 'markdown'
     attributes:

.github/composite-actions/install/action.yml

@@ -8,7 +8,6 @@ runs:
       with:
         bun-version: latest
 
-
     - name: Setup Git User
       shell: bash
       run: |

.github/workflows/release.yml

@@ -37,7 +37,7 @@ jobs:
     steps:
       - uses: actions/checkout@v4
       - uses: oven-sh/setup-bun@v2
-    
+
       - name: Setup Git User
         shell: bash
         run: |
@@ -73,4 +73,3 @@ jobs:
           NPM_TOKEN: ${{secrets.NPM_TOKEN}}
           NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
           GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
-

.prettierrc

@@ -5,9 +5,16 @@
   "arrowParens": "always",
   "semi": false,
   "htmlWhitespaceSensitivity": "ignore",
-  "plugins": ["prettier-plugin-svelte"],
+  "plugins": [
+    "prettier-plugin-svelte"
+  ],
   "overrides": [
-    { "files": "*.svelte", "options": { "parser": "svelte" } },
+    {
+      "files": "*.svelte",
+      "options": {
+        "parser": "svelte"
+      }
+    },
     {
       "files": "*.md",
       "options": {
@@ -16,4 +23,4 @@
       }
     }
   ]
-}
+}

.vscode/settings.json

@@ -3,11 +3,7 @@
     "**/templates": true
   },
   "typescript.tsdk": "node_modules/typescript/lib",
-  "editor.defaultFormatter": "biomejs.biome",
-  "editor.codeActionsOnSave": {
-    "quickfix.biome": "always",
-    "source.organizeImports.biome": "always"
-  },
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
   "material-icon-theme.files.associations": {
     "**.recipe.ts": "panda",
     "**.stories.vue": "storybook"

README.md

@@ -8,7 +8,8 @@
 
 ## What is Ark UI?
 
-Ark UI is a headless UI library with over 45+ components designed to build reusable, scalable Design Systems that works for a wide range of JS frameworks.
+Ark UI is a headless UI library with over 45+ components designed to build reusable, scalable Design
+Systems that works for a wide range of JS frameworks.
 
 ## Documentation
 

biome.json

@@ -1,23 +1,5 @@
 {
   "$schema": "./node_modules/@biomejs/biome/configuration_schema.json",
-  "organizeImports": {
-    "enabled": true
-  },
-  "formatter": {
-    "enabled": true,
-    "indentStyle": "space",
-    "indentWidth": 2,
-    "lineWidth": 100
-  },
-  "javascript": {
-    "formatter": {
-      "enabled": true,
-      "indentStyle": "space",
-      "quoteStyle": "single",
-      "semicolons": "asNeeded",
-      "trailingCommas": "all"
-    }
-  },
   "linter": {
     "enabled": true,
     "rules": {

lefthook.yml

@@ -1,8 +1,5 @@
 pre-commit:
   commands:
-    check:
-      glob: "*.{js,ts,cjs,mjs,d.cts,d.mts,jsx,tsx,json,jsonc,vue}"
-      run: bun biome check --write --no-errors-on-unmatched --files-ignore-unknown=true {staged_files} && git update-index --again
-
-
-
+    format:
+      glob: '*.{js,ts,cjs,mjs,d.cts,d.mts,jsx,tsx,json,jsonc,vue}'
+      run: bun prettier {staged_files} --ignore-unknown --write

package.json

@@ -2,14 +2,19 @@
   "name": "root",
   "type": "module",
   "private": true,
-  "workspaces": ["packages/*", "scripts", "website"],
+  "workspaces": [
+    "packages/*",
+    "scripts",
+    "website"
+  ],
   "scripts": {
     "postinstall": "lefthook install",
     "build": "turbo run build --filter='!./templates/**' --filter='!./website/**'",
     "exports:check": "bun scripts check:exports",
     "exports:sync": "bun scripts exports:sync",
     "local:sync": "bun scripts local:sync",
     "local:revert": "bun scripts local:sync --revert",
+    "format": "bun prettier --write .",
     "lint": "turbo run lint",
     "test": "turbo run test:ci",
     "typecheck": "turbo run typecheck",
@@ -18,9 +23,7 @@
     "solid": "bun run --cwd packages/solid",
     "svelte": "bun run --cwd packages/svelte",
     "vue": "bun run --cwd packages/vue",
-    "web": "bun run --cwd website",
-    "setup": "vc link --scope=chakra-ui -p ark-docs -y && vc env pull website/.env",
-    "setup:prod": "vc link --scope=chakra-ui -p ark-docs -y && vc env pull --environment production website/.env"
+    "web": "bun run --cwd website"
   },
   "dependencies": {
     "root": "."
@@ -29,10 +32,14 @@
     "@biomejs/biome": "1.9.4",
     "@types/bun": "1.1.14",
     "lefthook": "1.10.1",
+    "prettier": "3.4.2",
+    "prettier-plugin-svelte": "3.3.2",
     "turbo": "2.3.3",
     "typescript": "5.7.2",
     "vercel": "39.2.6"
   },
   "packageManager": "[email protected]",
-  "trustedDependencies": ["@ark-ui/website"]
-}
+  "trustedDependencies": [
+    "@ark-ui/website"
+  ]
+}

packages/react/.storybook/main.css

@@ -1,36 +1,36 @@
-@import url("./styles/accordion.css");
-@import url("./styles/avatar.css");
-@import url("./styles/carousel.css");
-@import url("./styles/checkbox.css");
-@import url("./styles/collapsible.css");
-@import url("./styles/color-picker.css");
-@import url("./styles/combobox.css");
-@import url("./styles/date-picker.css");
-@import url("./styles/dialog.css");
-@import url("./styles/field.css");
-@import url("./styles/file-upload.css");
-@import url("./styles/hover-card.css");
-@import url("./styles/menu.css");
-@import url("./styles/number-input.css");
-@import url("./styles/pagination.css");
-@import url("./styles/pin-input.css");
-@import url("./styles/popover.css");
-@import url("./styles/presence.css");
-@import url("./styles/progress.css");
-@import url("./styles/qr-code.css");
-@import url("./styles/radio-group.css");
-@import url("./styles/segment-group.css");
-@import url("./styles/select.css");
-@import url("./styles/signature-pad.css");
-@import url("./styles/slider.css");
-@import url("./styles/splitter.css");
-@import url("./styles/steps.css");
-@import url("./styles/switch.css");
-@import url("./styles/tabs.css");
-@import url("./styles/tags-input.css");
-@import url("./styles/time-picker.css");
-@import url("./styles/timer.css");
-@import url("./styles/toast.css");
-@import url("./styles/toggle-group.css");
-@import url("./styles/tooltip.css");
-@import url("./styles/tree-view.css");
+@import url('./styles/accordion.css');
+@import url('./styles/avatar.css');
+@import url('./styles/carousel.css');
+@import url('./styles/checkbox.css');
+@import url('./styles/collapsible.css');
+@import url('./styles/color-picker.css');
+@import url('./styles/combobox.css');
+@import url('./styles/date-picker.css');
+@import url('./styles/dialog.css');
+@import url('./styles/field.css');
+@import url('./styles/file-upload.css');
+@import url('./styles/hover-card.css');
+@import url('./styles/menu.css');
+@import url('./styles/number-input.css');
+@import url('./styles/pagination.css');
+@import url('./styles/pin-input.css');
+@import url('./styles/popover.css');
+@import url('./styles/presence.css');
+@import url('./styles/progress.css');
+@import url('./styles/qr-code.css');
+@import url('./styles/radio-group.css');
+@import url('./styles/segment-group.css');
+@import url('./styles/select.css');
+@import url('./styles/signature-pad.css');
+@import url('./styles/slider.css');
+@import url('./styles/splitter.css');
+@import url('./styles/steps.css');
+@import url('./styles/switch.css');
+@import url('./styles/tabs.css');
+@import url('./styles/tags-input.css');
+@import url('./styles/time-picker.css');
+@import url('./styles/timer.css');
+@import url('./styles/toast.css');
+@import url('./styles/toggle-group.css');
+@import url('./styles/tooltip.css');
+@import url('./styles/tree-view.css');

packages/react/.storybook/styles/accordion.css

@@ -19,7 +19,6 @@
     height: 0;
   }
 }
-
 
 [data-scope='accordion'][data-part='item-indicator'][data-state='open'] {
   rotate: 90deg;
@@ -36,18 +35,17 @@
   height: 1em;
 }
 
-
-[data-scope="accordion"][data-part="item-content"] {
+[data-scope='accordion'][data-part='item-content'] {
   overflow: hidden;
   max-width: 400px;
   background-color: cadetblue;
-  color:white;
+  color: white;
 }
 
-[data-scope="accordion"][data-part="item-content"][data-state="open"] {
+[data-scope='accordion'][data-part='item-content'][data-state='open'] {
   animation: slideDown 250ms cubic-bezier(0, 0, 0.38, 0.9);
 }
 
-[data-scope="accordion"][data-part="item-content"][data-state="closed"] {
+[data-scope='accordion'][data-part='item-content'][data-state='closed'] {
   animation: slideUp 200ms cubic-bezier(0, 0, 0.38, 0.9);
 }

packages/react/.storybook/styles/carousel.css

@@ -1,25 +1,25 @@
-[data-scope="carousel"][data-part="root"] {
+[data-scope='carousel'][data-part='root'] {
   display: flex;
   align-items: flex-start;
   flex-direction: column;
   gap: 16px;
 }
 
-[data-scope="carousel"][data-part="root"][data-orientation="horizontal"] {
+[data-scope='carousel'][data-part='root'][data-orientation='horizontal'] {
   max-width: 400px;
 }
 
-[data-scope="carousel"][data-part="root"][data-orientation="vertical"] {
+[data-scope='carousel'][data-part='root'][data-orientation='vertical'] {
   max-height: 400px;
 }
 
-[data-scope="carousel"][data-part="control"] {
+[data-scope='carousel'][data-part='control'] {
   display: flex;
   gap: 8px;
   align-self: stretch;
 }
 
-[data-scope="carousel"][data-part="item-group"] {
+[data-scope='carousel'][data-part='item-group'] {
   align-self: stretch;
   /* Hide scrollbar */
   scrollbar-width: none;
@@ -30,38 +30,38 @@
   }
 }
 
-[data-scope="carousel"][data-part="item"] {
+[data-scope='carousel'][data-part='item'] {
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: 24px;
   border: 1px solid lightgray;
 }
 
-[data-scope="carousel"][data-part="item"] img {
+[data-scope='carousel'][data-part='item'] img {
   margin: 0;
   object-fit: cover;
 }
 
-[data-scope="carousel"][data-part="item"][data-orientation="horizontal"] img {
+[data-scope='carousel'][data-part='item'][data-orientation='horizontal'] img {
   height: 300px;
   width: 100%;
 }
 
-[data-scope="carousel"][data-part="item"][data-orientation="vertical"] img {
+[data-scope='carousel'][data-part='item'][data-orientation='vertical'] img {
   height: 100%;
   width: 400px;
 }
 
-[data-scope="carousel"][data-part="indicator-group"] {
+[data-scope='carousel'][data-part='indicator-group'] {
   display: flex;
   justify-content: center;
   align-items: center;
   margin-block: 8px;
   gap: 8px;
 }
 
-[data-scope="carousel"][data-part="indicator"] {
+[data-scope='carousel'][data-part='indicator'] {
   display: flex;
   border: none;
   justify-content: center;
@@ -74,11 +74,11 @@
   transition: background-color 0.2s ease-in-out;
 }
 
-[data-scope="carousel"][data-part="indicator"][data-current] {
+[data-scope='carousel'][data-part='indicator'][data-current] {
   background-color: blue;
 }
 
-[data-scope="carousel"][data-part="autoplay-trigger"] {
+[data-scope='carousel'][data-part='autoplay-trigger'] {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -88,7 +88,7 @@
   flex-grow: 1;
 }
 
-[data-scope="carousel"][data-part="autoplay-trigger"] svg {
+[data-scope='carousel'][data-part='autoplay-trigger'] svg {
   width: 12px;
   height: 12px;
 }

packages/react/.storybook/styles/checkbox.css

@@ -28,7 +28,6 @@
   }
 }
 
-
 [data-scope='checkbox'][data-part='indicator']:not([hidden]) {
   display: flex;
   align-items: center;