Add prettier (#36)

* Add prettier

* Add scss to formatted files

* format

Co-authored-by: Paco <34928425+pacocoursey@users.noreply.github.com>

Author: flaviouk

.github/workflows/test.yml

@@ -15,8 +15,9 @@ jobs:
       - uses: actions/setup-node@v3
       - run: npm install pnpm -g
       - run: pnpm install
-      - run: pnpm playwright install --with-deps
       - run: pnpm build
+      - run: pnpm test:format
+      - run: pnpm playwright install --with-deps
       - run: pnpm test
       - name: Upload test results
         if: always()

.prettierignore

@@ -0,0 +1,3 @@
+.next
+dist
+pnpm-lock.yaml

website/.prettierrc.js .prettierrc.jswebsite/.prettierrc.js renamed to .prettierrc.js

@@ -1,7 +1,7 @@
 module.exports = {
-  useTabs: false,
-  semi: true,
-  trailingComma: "all",
+  semi: false,
   singleQuote: true,
+  tabWidth: 2,
+  trailingComma: 'all',
   printWidth: 120,
-};
+}

cmdk/src/index.tsx

@@ -272,7 +272,7 @@ const Command = React.forwardRef<HTMLDivElement, CommandProps>((props, forwarded
       inputId,
       labelId,
     }),
-    []
+    [],
   )
 
   function score(value: string) {
@@ -568,7 +568,7 @@ const Item = React.forwardRef<HTMLDivElement, ItemProps>((props, forwardedRef) =
   const store = useStore()
   const selected = useCmdk((state) => state.value && state.value === value.current)
   const render = useCmdk((state) =>
-    context.filter() === false ? true : !state.search ? true : state.filtered.items.get(id) > 0
+    context.filter() === false ? true : !state.search ? true : state.filtered.items.get(id) > 0,
   )
 
   React.useEffect(() => {
@@ -617,7 +617,9 @@ const Group = React.forwardRef<HTMLDivElement, GroupProps>((props, forwardedRef)
   const headingRef = React.useRef<HTMLDivElement>(null)
   const headingId = React.useId()
   const context = useCommand()
-  const render = useCmdk((state) => context.filter() === false ? true : (!state.search ? true : state.filtered.groups.has(id)))
+  const render = useCmdk((state) =>
+    context.filter() === false ? true : !state.search ? true : state.filtered.groups.has(id),
+  )
 
   useLayoutEffect(() => {
     return context.group(id)
@@ -884,7 +886,7 @@ function useCmdk<T = any>(selector: (state: State) => T) {
 function useValue(
   id: string,
   ref: React.RefObject<HTMLElement>,
-  deps: (string | React.ReactNode | React.RefObject<HTMLElement>)[]
+  deps: (string | React.ReactNode | React.RefObject<HTMLElement>)[],
 ) {
   const valueRef = React.useRef<string>()
   const context = useCommand()

package.json

@@ -6,12 +6,15 @@
     "dev": "pnpm -F cmdk build --watch",
     "website": "pnpm -F cmdk-website dev",
     "testsite": "pnpm -F cmdk-tests dev",
+    "format": "prettier '**/*.{js,jsx,ts,tsx,json,md,mdx,css,scss,yaml,yml}' --write",
+    "test:format": "prettier '**/*.{js,jsx,ts,tsx,json,md,mdx,css,scss,yaml,yml}' --check",
     "test": "playwright test"
   },
   "devDependencies": {
     "@playwright/test": "1.24.1",
     "tsup": "6.2.1",
-    "typescript": "4.6.4"
+    "typescript": "4.6.4",
+    "prettier": "2.7.1"
   },
   "packageManager": "pnpm@7.9.0"
 }

pnpm-lock.yaml

@@ -1,8 +1,8 @@
-import { Command } from 'cmdk';
-import React from 'react';
+import { Command } from 'cmdk'
+import React from 'react'
 
 export function FramerCMDK() {
-  const [value, setValue] = React.useState('button');
+  const [value, setValue] = React.useState('button')
   return (
     <div className="framer">
       <Command value={value} onValueChange={(v) => setValue(v)}>
@@ -51,19 +51,19 @@ export function FramerCMDK() {
         </Command.List>
       </Command>
     </div>
-  );
+  )
 }
 
 function Button() {
-  return <button>Primary</button>;
+  return <button>Primary</button>
 }
 
 function Input() {
-  return <input type="text" placeholder="Placeholder" />;
+  return <input type="text" placeholder="Placeholder" />
 }
 
 function Badge() {
-  return <div cmdk-framer-badge="">Badge</div>;
+  return <div cmdk-framer-badge="">Badge</div>
 }
 
 function Radio() {
@@ -72,23 +72,23 @@ function Radio() {
       <input type="radio" defaultChecked />
       Radio Button
     </label>
-  );
+  )
 }
 
 function Slider() {
   return (
     <div cmdk-framer-slider="">
       <div />
     </div>
-  );
+  )
 }
 
 function Avatar() {
-  return <img src="/rauno.jpeg" alt="Avatar of Rauno" />;
+  return <img src="/rauno.jpeg" alt="Avatar of Rauno" />
 }
 
 function Container() {
-  return <div cmdk-framer-container="" />;
+  return <div cmdk-framer-container="" />
 }
 
 function Item({ children, value, subtitle }: { children: React.ReactNode; value: string; subtitle: string }) {
@@ -100,7 +100,7 @@ function Item({ children, value, subtitle }: { children: React.ReactNode; value:
         <span cmdk-framer-item-subtitle="">{subtitle}</span>
       </div>
     </Command.Item>
-  );
+  )
 }
 
 function ButtonIcon() {
@@ -113,7 +113,7 @@ function ButtonIcon() {
         clipRule="evenodd"
       ></path>
     </svg>
-  );
+  )
 }
 
 function InputIcon() {
@@ -126,7 +126,7 @@ function InputIcon() {
         clipRule="evenodd"
       ></path>
     </svg>
-  );
+  )
 }
 
 function RadioIcon() {
@@ -139,7 +139,7 @@ function RadioIcon() {
         clipRule="evenodd"
       ></path>
     </svg>
-  );
+  )
 }
 
 function BadgeIcon() {
@@ -152,7 +152,7 @@ function BadgeIcon() {
         clipRule="evenodd"
       ></path>
     </svg>
-  );
+  )
 }
 
 function ToggleIcon() {
@@ -165,7 +165,7 @@ function ToggleIcon() {
         clipRule="evenodd"
       ></path>
     </svg>
-  );
+  )
 }
 
 function AvatarIcon() {
@@ -178,7 +178,7 @@ function AvatarIcon() {
         clipRule="evenodd"
       ></path>
     </svg>
-  );
+  )
 }
 
 function ContainerIcon() {
@@ -191,7 +191,7 @@ function ContainerIcon() {
         clipRule="evenodd"
       ></path>
     </svg>
-  );
+  )
 }
 
 function SearchIcon() {
@@ -206,7 +206,7 @@ function SearchIcon() {
     >
       <path strokeLinecap="round" strokeLinejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
     </svg>
-  );
+  )
 }
 
 function SliderIcon() {
@@ -219,5 +219,5 @@ function SliderIcon() {
         clipRule="evenodd"
       ></path>
     </svg>
-  );
+  )
 }

website/components/cmdk/framer.tsx

@@ -1,4 +1,4 @@
-import { Command } from 'cmdk';
+import { Command } from 'cmdk'
 
 export function LinearCMDK() {
   return (
@@ -15,16 +15,16 @@ export function LinearCMDK() {
                 {label}
                 <div cmdk-linear-shortcuts="">
                   {shortcut.map((key) => {
-                    return <kbd key={key}>{key}</kbd>;
+                    return <kbd key={key}>{key}</kbd>
                   })}
                 </div>
               </Command.Item>
-            );
+            )
           })}
         </Command.List>
       </Command>
     </div>
-  );
+  )
 }
 
 const items = [
@@ -63,14 +63,14 @@ const items = [
     label: 'Set due date...',
     shortcut: ['⇧', 'D'],
   },
-];
+]
 
 function AssignToIcon() {
   return (
     <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
       <path d="M7 7a2.5 2.5 0 10.001-4.999A2.5 2.5 0 007 7zm0 1c-1.335 0-4 .893-4 2.667v.666c0 .367.225.667.5.667h2.049c.904-.909 2.417-1.911 4.727-2.009v-.72a.27.27 0 01.007-.063C9.397 8.404 7.898 8 7 8zm4.427 2.028a.266.266 0 01.286.032l2.163 1.723a.271.271 0 01.013.412l-2.163 1.97a.27.27 0 01-.452-.2v-.956c-3.328.133-5.282 1.508-5.287 1.535a.27.27 0 01-.266.227h-.022a.27.27 0 01-.249-.271c0-.046 1.549-3.328 5.824-3.509v-.72a.27.27 0 01.153-.243z" />
     </svg>
-  );
+  )
 }
 
 function AssignToMeIcon() {
@@ -84,7 +84,7 @@ function AssignToMeIcon() {
       />
       <path d="M6.72511 14.718C6.80609 14.7834 6.91767 14.7955 7.01074 14.749C7.10407 14.7036 7.16321 14.6087 7.16295 14.5047L7.1605 13.7849C11.4352 13.5894 12.9723 10.3023 12.9722 10.2563C12.9722 10.1147 12.8634 9.9971 12.7225 9.98626L12.7009 9.98634C12.5685 9.98689 12.4561 10.0833 12.4351 10.2142C12.4303 10.2413 10.4816 11.623 7.15364 11.7666L7.1504 10.8116C7.14981 10.662 7.02829 10.5412 6.87896 10.5418C6.81184 10.5421 6.74721 10.5674 6.69765 10.6127L4.54129 12.5896C4.43117 12.6906 4.42367 12.862 4.52453 12.9723C4.53428 12.9829 4.54488 12.9928 4.55621 13.0018L6.72511 14.718Z" />
     </svg>
-  );
+  )
 }
 
 function ChangeStatusIcon() {
@@ -97,7 +97,7 @@ function ChangeStatusIcon() {
         d="M7 12.5C10.0376 12.5 12.5 10.0376 12.5 7C12.5 3.96243 10.0376 1.5 7 1.5C3.96243 1.5 1.5 3.96243 1.5 7C1.5 10.0376 3.96243 12.5 7 12.5ZM7 14C10.866 14 14 10.866 14 7C14 3.13401 10.866 0 7 0C3.13401 0 0 3.13401 0 7C0 10.866 3.13401 14 7 14Z"
       />
     </svg>
-  );
+  )
 }
 
 function ChangePriorityIcon() {
@@ -107,7 +107,7 @@ function ChangePriorityIcon() {
       <rect x="6" y="5" width="3" height="9" rx="1"></rect>
       <rect x="11" y="2" width="3" height="12" rx="1"></rect>
     </svg>
-  );
+  )
 }
 
 function ChangeLabelsIcon() {
@@ -119,7 +119,7 @@ function ChangeLabelsIcon() {
         d="M10.2105 4C10.6337 4 11.0126 4.18857 11.24 4.48L14 8L11.24 11.52C11.0126 11.8114 10.6337 12 10.2105 12L3.26316 11.9943C2.56842 11.9943 2 11.4857 2 10.8571V5.14286C2 4.51429 2.56842 4.00571 3.26316 4.00571L10.2105 4ZM11.125 9C11.6773 9 12.125 8.55228 12.125 8C12.125 7.44772 11.6773 7 11.125 7C10.5727 7 10.125 7.44772 10.125 8C10.125 8.55228 10.5727 9 11.125 9Z"
       />
     </svg>
-  );
+  )
 }
 
 function RemoveLabelIcon() {
@@ -131,7 +131,7 @@ function RemoveLabelIcon() {
         d="M10.2105 4C10.6337 4 11.0126 4.18857 11.24 4.48L14 8L11.24 11.52C11.0126 11.8114 10.6337 12 10.2105 12L3.26316 11.9943C2.56842 11.9943 2 11.4857 2 10.8571V5.14286C2 4.51429 2.56842 4.00571 3.26316 4.00571L10.2105 4ZM11.125 9C11.6773 9 12.125 8.55228 12.125 8C12.125 7.44772 11.6773 7 11.125 7C10.5727 7 10.125 7.44772 10.125 8C10.125 8.55228 10.5727 9 11.125 9Z"
       />
     </svg>
-  );
+  )
 }
 
 function SetDueDateIcon() {
@@ -143,5 +143,5 @@ function SetDueDateIcon() {
         d="M15 5C15 2.79086 13.2091 1 11 1H5C2.79086 1 1 2.79086 1 5V11C1 13.2091 2.79086 15 5 15H6.25C6.66421 15 7 14.6642 7 14.25C7 13.8358 6.66421 13.5 6.25 13.5H5C3.61929 13.5 2.5 12.3807 2.5 11V6H13.5V6.25C13.5 6.66421 13.8358 7 14.25 7C14.6642 7 15 6.66421 15 6.25V5ZM11.5001 8C11.9143 8 12.2501 8.33579 12.2501 8.75V10.75L14.2501 10.75C14.6643 10.75 15.0001 11.0858 15.0001 11.5C15.0001 11.9142 14.6643 12.25 14.2501 12.25L12.2501 12.25V14.25C12.2501 14.6642 11.9143 15 11.5001 15C11.0859 15 10.7501 14.6642 10.7501 14.25V12.25H8.75C8.33579 12.25 8 11.9142 8 11.5C8 11.0858 8.33579 10.75 8.75 10.75L10.7501 10.75V8.75C10.7501 8.33579 11.0859 8 11.5001 8Z"
       />
     </svg>
-  );
+  )
 }