ui

- Keep it simple. Use the least amount of class names as possible - We like to rely mostly on Flexbox layout. Instead of `w-full` try `flex-1` instead. - UI primitives are defined in packages/ui. Use them whenever possible. Be very careful when you add custom class names to a primitive components, it should be last resort for a very local exception: we want the design system to be respected. - You can write `useEffect` only if syncing with external storage or with DOM event. Otherwise, just derive values from others. - Sort component props: values first, functions last - Never add explicit type annotations on callback parameters when the type can be inferred from the component prop. e.g. `onValueCommit={(name) =>` not `onValueCommit={(name: string) =>` - Use `cn()` when conditionally applying Tailwind classes that may conflict (e.g. border colors). - In React components, order declarations as follows: 1. Context hooks (useWorkspace, useTranslate, etc.) 2. useState / useRef 3. useQuery 4. useMutation 5. Handlers 6. Derived variables