feat: Focus ring button when state open

Author: thevuong

README.md

@@ -15,7 +15,7 @@ pnpm add -D prettier-plugin-packagejson prettier-plugin-tailwindcss
 # pre-commit
 pnpm add -D lint-staged simple-git-hooks
 # other
-pnpm add class-variance-authority zod react-hook-form @hookform/resolvers @prisma/client @next-auth/prisma-adapter next-auth tailwind-merge date-fns path-to-regexp slugify lucide-react pluralize
+pnpm add class-variance-authority zod react-hook-form @hookform/resolvers @prisma/client @auth/prisma-adapter next-auth@beta tailwind-merge date-fns path-to-regexp slugify lucide-react pluralize
 pnpm add -D prisma @types/pluralize @faker-js/faker
 ```
 
@@ -86,6 +86,7 @@ Update `tsconfig.json`
 -   "isolatedModules": true,
 -   "jsx": "preserve",
 -   "incremental": true,
++   "declaration": false,
     "plugins": [
       {
         "name": "next"
@@ -146,12 +147,18 @@ datasource db {
 + }
 ```
 
-Create `/src/lib/database/index.ts`
+Create `/src/lib/prisma.ts`
 
 ```ts
-import { PrismaClient } from '@prisma/client';
+import { PrismaClient } from '@prisma/client/edge';
 
-const globalForPrisma = globalThis as unknown as { prisma?: PrismaClient };
+// PrismaClient is attached to the `global` object in development to prevent
+// exhausting your database connection limit.
+//
+// Learn more:
+// https://pris.ly/d/help/next-js-best-practices
+
+const globalForPrisma = global as unknown as { prisma?: PrismaClient };
 
 export const prisma = globalForPrisma.prisma || new PrismaClient();
 

packages/ui/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @codefixlabs/ui
 
+## 0.1.33
+
+### Patch Changes
+
+- Button focus on state open
+
 ## 0.1.32
 
 ### Patch Changes

packages/ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codefixlabs/ui",
-  "version": "0.1.32",
+  "version": "0.1.33",
   "license": "MIT",
   "exports": {
     "./package.json": "./package.json",

packages/ui/src/cva/button.ts

@@ -115,6 +115,7 @@ export const buttonVariants = cva(
   [
     'relative select-none items-center gap-2 overflow-hidden whitespace-nowrap text-sm font-medium transition-colors',
     'focus:ring-ring/40 focus:outline-none focus:ring-2',
+    'data-state-open:ring-ring/20 data-state-open:outline-none data-state-open:ring-2',
     'data-disabled:cursor-not-allowed data-disabled:ring-0',
   ],
   {

packages/ui/src/react/data-table.tsx

@@ -475,6 +475,24 @@ export function DataTablePagination<TData>({
  * Component: DataTableContent
  * -------------------------------------------------------------------------- */
 
+interface TableClassNames {
+  root?: string;
+  container?: string;
+  table?: string;
+  header?: string;
+  headerRow?: string;
+  footer?: string;
+  footerRow?: string;
+  headerCell?: string;
+  body?: string;
+  row?: string;
+  cell?: string;
+  emptyRow?: string;
+  emptyCell?: string;
+  toolbar?: string;
+  pagination?: string;
+}
+
 export function DataTableContent<TData, TValue>({
   table,
   columns = [],
@@ -484,23 +502,7 @@ export function DataTableContent<TData, TValue>({
   table: TableType<TData>;
   columns: ColumnDef<TData, TValue>[];
   showFooter?: boolean;
-  classNames?: {
-    root?: string;
-    container?: string;
-    table?: string;
-    header?: string;
-    headerRow?: string;
-    footer?: string;
-    footerRow?: string;
-    headerCell?: string;
-    body?: string;
-    row?: string;
-    cell?: string;
-    emptyRow?: string;
-    emptyCell?: string;
-    toolbar?: string;
-    pagination?: string;
-  };
+  classNames?: TableClassNames;
 }): React.JSX.Element {
   return (
     <div
@@ -768,7 +770,7 @@ export function DataTable<TData>({
   endToolbar,
   ...props
 }: Omit<TableOptions<TData>, 'getCoreRowModel'> & {
-  classNames?: React.ComponentProps<typeof DataTableContent>['classNames'];
+  classNames?: TableClassNames;
   showFooter?: boolean;
   startToolbar?: React.ReactNode;
   endToolbar?: React.ReactNode;