feat(formatting): switch prettier to oxfmt

.github/workflows/lint.yml

@@ -16,7 +16,7 @@ jobs:
       - uses: actions/setup-node@v6
         with:
           node-version: 24
-          cache: 'pnpm'
+          cache: "pnpm"
 
       - run: pnpm install
 

.github/workflows/publish.yml

@@ -24,7 +24,7 @@ jobs:
         uses: actions/setup-node@v6
         with:
           node-version: 24
-          cache: 'pnpm'
+          cache: "pnpm"
       - name: Install dependencies
         run: pnpm install
       - name: Semantic Release

.github/workflows/published-test.yml

@@ -5,7 +5,6 @@ on:
     branches:
       - main
 
-
 jobs:
   test:
     runs-on: ubuntu-latest
@@ -17,7 +16,7 @@ jobs:
       - uses: actions/setup-node@v6
         with:
           node-version: 24
-          cache: 'pnpm'
+          cache: "pnpm"
 
       - run: pnpm install
       - run: pnpm pack
@@ -28,6 +27,5 @@ jobs:
       - run: pnpm install --no-frozen-lockfile
         working-directory: integration
 
-
       - run: pnpm test
         working-directory: integration

.github/workflows/test.yml

@@ -16,7 +16,7 @@ jobs:
       - uses: actions/setup-node@v6
         with:
           node-version: 24
-          cache: 'pnpm'
+          cache: "pnpm"
 
       - run: pnpm install
 

.github/workflows/typecheck.yml

@@ -16,7 +16,7 @@ jobs:
       - uses: actions/setup-node@v6
         with:
           node-version: 24
-          cache: 'pnpm'
+          cache: "pnpm"
 
       - run: pnpm install
 

.oxfmtrc.json

@@ -0,0 +1,18 @@
+{
+  "$schema": "./node_modules/oxfmt/configuration_schema.json",
+  "printWidth": 80,
+  "experimentalSortPackageJson": false,
+  "ignorePatterns": ["/src/components/Icon/names.ts", "/types/utilities.d.ts"],
+  "overrides": [
+    {
+      "files": ["src/**"],
+      "options": {
+        "sortTailwindcss": {
+          "stylesheet": "./src/global.css",
+          "functions": ["clsx", "cn"],
+          "preserveWhitespace": true
+        }
+      }
+    }
+  ]
+}

.storybook/fonts.css

@@ -44,4 +44,4 @@
   font-weight: 100;
   font-style: normal;
   font-display: block;
-}
+}

.storybook/main.ts

@@ -1,46 +1,46 @@
-import type { StorybookConfig } from '@storybook/react-vite'
-import { resolve } from 'path'
+import type { StorybookConfig } from "@storybook/react-vite";
+import { resolve } from "path";
 
 const config: StorybookConfig = {
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
   addons: [
-    '@storybook/addon-links',
-    '@storybook/addon-themes',
-    '@storybook/addon-docs',
-    '@storybook/addon-mcp',
+    "@storybook/addon-links",
+    "@storybook/addon-themes",
+    "@storybook/addon-docs",
+    "@storybook/addon-mcp",
   ],
   framework: {
-    name: '@storybook/react-vite',
+    name: "@storybook/react-vite",
     options: {},
   },
   features: {
     sidebarOnboardingChecklist: false,
   },
-  staticDirs: ['./public'],
+  staticDirs: ["./public"],
   async viteFinal(config) {
-    const { mergeConfig } = await import('vite')
+    const { mergeConfig } = await import("vite");
 
     return mergeConfig(config, {
       plugins: [
         {
           // MDX compiler generates file:// imports for pnpm virtual store paths
           // that Vite can't resolve. Normalize them to absolute paths.
-          name: 'resolve-file-protocol-imports',
+          name: "resolve-file-protocol-imports",
           resolveId(id) {
-            if (!id.startsWith('file://')) return
-            const path = id.slice('file://'.length)
-            return path.startsWith('/') ? path : resolve(process.cwd(), path)
+            if (!id.startsWith("file://")) return;
+            const path = id.slice("file://".length);
+            return path.startsWith("/") ? path : resolve(process.cwd(), path);
           },
         },
       ],
       optimizeDeps: {
         // https://github.com/storybookjs/storybook/issues/28542#issuecomment-2268031095
         exclude: [
-          'node_modules/.cache/sb-vite',
-          'node_modules/.cache/storybook',
+          "node_modules/.cache/sb-vite",
+          "node_modules/.cache/storybook",
         ],
       },
-    })
+    });
   },
-}
-export default config
+};
+export default config;

.storybook/manager.ts

@@ -1,40 +1,40 @@
-import { addons } from 'storybook/manager-api'
-import { create } from 'storybook/theming'
+import { addons } from "storybook/manager-api";
+import { create } from "storybook/theming";
 
 export const speakeasyTheme = create({
-  base: 'light',
+  base: "light",
 
   // Speakeasy's brand colors
-  colorPrimary: 'hsl(53, 96%, 40%)', // Primary brand color
-  colorSecondary: 'hsl(53, 96%, 40%)', // Accent color
+  colorPrimary: "hsl(53, 96%, 40%)", // Primary brand color
+  colorSecondary: "hsl(53, 96%, 40%)", // Accent color
 
   // UI elements
-  appBg: 'hsl(0, 0%, 100%)',
+  appBg: "hsl(0, 0%, 100%)",
 
   // Docs bg
-  appContentBg: 'hsl(0, 0%, 100%)',
-  appBorderColor: 'hsl(0, 0%, 20%)',
+  appContentBg: "hsl(0, 0%, 100%)",
+  appBorderColor: "hsl(0, 0%, 20%)",
   appBorderRadius: 4,
 
   // Text colors
-  textColor: 'hsl(0, 0%, 10%)',
-  textInverseColor: 'hsl(0, 0%, 100%)',
+  textColor: "hsl(0, 0%, 10%)",
+  textInverseColor: "hsl(0, 0%, 100%)",
 
   // Toolbar default and active colors
-  barTextColor: 'hsl(0, 0%, 10%)',
-  barSelectedColor: 'hsl(0, 0%, 10%)',
-  barBg: 'hsl(0, 0%, 100%)',
+  barTextColor: "hsl(0, 0%, 10%)",
+  barSelectedColor: "hsl(0, 0%, 10%)",
+  barBg: "hsl(0, 0%, 100%)",
 
   // Form colors
-  inputBg: 'hsl(0, 0%, 100%)',
-  inputBorder: 'hsl(0, 0%, 20%)',
-  inputTextColor: 'hsl(0, 0%, 10%)',
+  inputBg: "hsl(0, 0%, 100%)",
+  inputBorder: "hsl(0, 0%, 20%)",
+  inputTextColor: "hsl(0, 0%, 10%)",
   inputBorderRadius: 4,
 
-  brandTitle: 'Speakeasy Moonshine',
-  brandUrl: 'https://speakeasy.com',
-})
+  brandTitle: "Speakeasy Moonshine",
+  brandUrl: "https://speakeasy.com",
+});
 
 addons.setConfig({
   theme: speakeasyTheme,
-})
+});

.storybook/modes.ts

@@ -1,23 +1,23 @@
 export const allModes = {
   desktop: {
-    viewport: 'large',
+    viewport: "large",
   },
   dark: {
-    backgrounds: { value: 'hsl(0, 0%, 7%)' },
-    theme: 'dark',
+    backgrounds: { value: "hsl(0, 0%, 7%)" },
+    theme: "dark",
   },
   light: {
-    backgrounds: { value: '#fff' },
-    theme: 'light',
+    backgrounds: { value: "#fff" },
+    theme: "light",
   },
-  'dark desktop': {
-    backgrounds: { value: 'hsl(0, 0%, 7%)' },
-    theme: 'dark',
-    viewport: 'large',
+  "dark desktop": {
+    backgrounds: { value: "hsl(0, 0%, 7%)" },
+    theme: "dark",
+    viewport: "large",
   },
-  'light desktop': {
-    backgrounds: { value: '#fff' },
-    theme: 'light',
-    viewport: 'large',
+  "light desktop": {
+    backgrounds: { value: "#fff" },
+    theme: "light",
+    viewport: "large",
   },
-}
+};

.storybook/preview.tsx

@@ -1,43 +1,43 @@
-import type { Preview, Decorator } from '@storybook/react-vite'
-import '../src/global.css'
-import './fonts.css'
-import React from 'react'
-import { withThemeByClassName } from '@storybook/addon-themes'
-import { ThemedDocsContainer } from './themedDocsContainer'
+import type { Preview, Decorator } from "@storybook/react-vite";
+import "../src/global.css";
+import "./fonts.css";
+import React from "react";
+import { withThemeByClassName } from "@storybook/addon-themes";
+import { ThemedDocsContainer } from "./themedDocsContainer";
 
-import { MoonshineConfigProvider } from '../src/context/ConfigContext'
+import { MoonshineConfigProvider } from "../src/context/ConfigContext";
 
 const moonshineConfigProviderDecorator: Decorator = (story, context) => {
   return (
     <MoonshineConfigProvider theme={context.globals.theme} setTheme={() => {}}>
       {story()}
     </MoonshineConfigProvider>
-  )
-}
+  );
+};
 
 export const decorators: Decorator[] = [
   withThemeByClassName({
-    themes: { light: 'light', dark: 'dark' },
-    defaultTheme: 'light',
+    themes: { light: "light", dark: "dark" },
+    defaultTheme: "light",
   }),
   moonshineConfigProviderDecorator,
-]
+];
 
 const preview: Preview = {
   parameters: {
     viewport: {
       options: {
-        small: { name: 'Small', styles: { width: '640px', height: '800px' } },
+        small: { name: "Small", styles: { width: "640px", height: "800px" } },
         large: {
-          name: 'Large',
-          styles: { width: '1024px', height: '1000px' },
+          name: "Large",
+          styles: { width: "1024px", height: "1000px" },
         },
       },
     },
     backgrounds: {
       options: {
-        light: { name: 'light', value: '#fff' },
-        dark: { name: 'dark', value: 'hsl(0, 0%, 7%)' },
+        light: { name: "light", value: "#fff" },
+        dark: { name: "dark", value: "hsl(0, 0%, 7%)" },
       },
     },
 
@@ -51,6 +51,6 @@ const preview: Preview = {
       },
     },
   },
-}
+};
 
-export default preview
+export default preview;