From 20d91ab45720c75bdbcdf6d52edb02b0c73875be Mon Sep 17 00:00:00 2001 From: "johancs.mm@gmail.com" Date: Sat, 30 Mar 2024 15:41:16 -0500 Subject: [PATCH 1/3] build(react): new version @openui-org/react 0.10.3 --- packages/react/CHANGELOG.md | 6 ++++++ packages/react/package.json | 2 +- 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md index 7c08651..0fc58f3 100644 --- a/packages/react/CHANGELOG.md +++ b/packages/react/CHANGELOG.md @@ -1,5 +1,11 @@ # @openui-org/react +## 0.10.3 + +### Patch Changes + +- Remove p-6 in component card + ## 0.10.2 ### Patch Changes diff --git a/packages/react/package.json b/packages/react/package.json index d3a4640..ac20b97 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -1,7 +1,7 @@ { "name": "@openui-org/react", "type": "module", - "version": "0.10.2", + "version": "0.10.3", "description": "", "author": "", "license": "MIT", From 869fb551fde8f91e4fd88f38411a13f3141a2f74 Mon Sep 17 00:00:00 2001 From: "johancs.mm@gmail.com" Date: Sun, 31 Mar 2024 09:32:33 -0500 Subject: [PATCH 2/3] feat(react): add new component `scroll-area` (#56) --- packages/react/package.json | 1 + packages/react/src/components/scroll-area.tsx | 48 +++++++++++++++++++ pnpm-lock.yaml | 32 +++++++++++++ 3 files changed, 81 insertions(+) create mode 100644 packages/react/src/components/scroll-area.tsx diff --git a/packages/react/package.json b/packages/react/package.json index ac20b97..c3eace4 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -27,6 +27,7 @@ "@radix-ui/react-checkbox": "1.0.4", "@radix-ui/react-dialog": "1.0.5", "@radix-ui/react-label": "2.0.2", + "@radix-ui/react-scroll-area": "1.0.5", "@radix-ui/react-select": "2.0.0", "@radix-ui/react-separator": "1.0.3", "@radix-ui/react-slot": "1.0.2", diff --git a/packages/react/src/components/scroll-area.tsx b/packages/react/src/components/scroll-area.tsx new file mode 100644 index 0000000..13a5b2d --- /dev/null +++ b/packages/react/src/components/scroll-area.tsx @@ -0,0 +1,48 @@ +import * as React from 'react' +import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area' + +import { cn } from '../lib/cn' + +const ScrollBar = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, orientation = 'vertical', ...props }, ref) => ( + + + +)) + +ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName + +const ScrollArea = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + + + {children} + + + + +)) + +ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName + +export { ScrollArea, ScrollBar } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 4a53030..5c84d30 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -196,6 +196,9 @@ importers: '@radix-ui/react-label': specifier: 2.0.2 version: 2.0.2(@types/react-dom@18.2.22)(@types/react@18.2.69)(react-dom@18.2.0)(react@18.2.0) + '@radix-ui/react-scroll-area': + specifier: 1.0.5 + version: 1.0.5(@types/react-dom@18.2.22)(@types/react@18.2.69)(react-dom@18.2.0)(react@18.2.0) '@radix-ui/react-select': specifier: 2.0.0 version: 2.0.0(@types/react-dom@18.2.22)(@types/react@18.2.69)(react-dom@18.2.0)(react@18.2.0) @@ -2226,6 +2229,35 @@ packages: react-dom: 18.2.0(react@18.2.0) dev: false + /@radix-ui/react-scroll-area@1.0.5(@types/react-dom@18.2.22)(@types/react@18.2.69)(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-b6PAgH4GQf9QEn8zbT2XUHpW5z8BzqEc7Kl11TwDrvuTrxlkcjTD5qa/bxgKr+nmuXKu4L/W5UZ4mlP/VG/5Gw==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + dependencies: + '@babel/runtime': 7.24.1 + '@radix-ui/number': 1.0.1 + '@radix-ui/primitive': 1.0.1 + '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.69)(react@18.2.0) + '@radix-ui/react-context': 1.0.1(@types/react@18.2.69)(react@18.2.0) + '@radix-ui/react-direction': 1.0.1(@types/react@18.2.69)(react@18.2.0) + '@radix-ui/react-presence': 1.0.1(@types/react-dom@18.2.22)(@types/react@18.2.69)(react-dom@18.2.0)(react@18.2.0) + '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.22)(@types/react@18.2.69)(react-dom@18.2.0)(react@18.2.0) + '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.69)(react@18.2.0) + '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.2.69)(react@18.2.0) + '@types/react': 18.2.69 + '@types/react-dom': 18.2.22 + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + dev: false + /@radix-ui/react-select@2.0.0(@types/react-dom@18.2.22)(@types/react@18.2.69)(react-dom@18.2.0)(react@18.2.0): resolution: {integrity: sha512-RH5b7af4oHtkcHS7pG6Sgv5rk5Wxa7XI8W5gvB1N/yiuDGZxko1ynvOiVhFM7Cis2A8zxF9bTOUVbRDzPepe6w==} peerDependencies: From 75136847fcf8382bb26cd524da70e334968172e2 Mon Sep 17 00:00:00 2001 From: "johancs.mm@gmail.com" Date: Sun, 31 Mar 2024 09:37:50 -0500 Subject: [PATCH 3/3] feat(react): add new variant ligth to components --- examples/with-vitejs/index.html | 2 +- examples/with-vitejs/src/App.tsx | 46 ++++++++++++------- .../react/src/components/alert-dialog.tsx | 10 ++-- packages/react/src/components/alert.tsx | 9 ++-- packages/react/src/components/badge.tsx | 3 +- packages/react/src/components/card.tsx | 2 +- packages/react/src/components/dialog.tsx | 2 +- packages/react/src/components/select.tsx | 8 ++-- packages/react/src/components/table.tsx | 21 ++++++--- packages/react/src/index.ts | 1 + 10 files changed, 65 insertions(+), 39 deletions(-) diff --git a/examples/with-vitejs/index.html b/examples/with-vitejs/index.html index e4b78ea..bcd079d 100644 --- a/examples/with-vitejs/index.html +++ b/examples/with-vitejs/index.html @@ -6,7 +6,7 @@ Vite + React + TS - +
diff --git a/examples/with-vitejs/src/App.tsx b/examples/with-vitejs/src/App.tsx index 107d659..9f33085 100644 --- a/examples/with-vitejs/src/App.tsx +++ b/examples/with-vitejs/src/App.tsx @@ -1,5 +1,5 @@ import { useState } from 'react' -import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, Badge, Button, Card, CardContent, CardDescription, CardHeader, CardTitle, Input, Label, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Separator, Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow } from '@openui-org/react' +import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, Badge, Button, Card, CardContent, CardDescription, CardHeader, CardTitle, Input, Label, ScrollArea, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Separator, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow } from '@openui-org/react' import reactLogo from './assets/react.svg' import viteLogo from '/vite.svg' import imgPrueba from '/bghome.png' @@ -10,9 +10,19 @@ function App() { return ( <> - + Open @@ -30,11 +40,11 @@ function App() { - + Examples - + @@ -44,9 +54,8 @@ function App() { iPhone 12 combines elegant design with cutting-edge technology, giving you the best mobile experience. With its A14 Bionic chip, the fastest in a smartphone, intense games and professional applications run effortlessly. - - +
@@ -55,6 +64,14 @@ function App() { An open-source UI component library.

+ + Jokester began sneaking into the castle in the middle of the night and leaving + jokes all over the place: under the king's pillow, in his soup, even in the + royal toilet. The king was furious, but he couldn't seem to stop Jokester. And + then, one day, the people of the kingdom discovered that the jokes left by + Jokester were so funny that they couldn't help but laugh. And once they + started laughing, they couldn't stop. +
Blog
@@ -122,19 +139,14 @@ function App() { $250.00 + + + Total + $2,500.00 + + - - ) } diff --git a/packages/react/src/components/alert-dialog.tsx b/packages/react/src/components/alert-dialog.tsx index 66853db..7608bde 100644 --- a/packages/react/src/components/alert-dialog.tsx +++ b/packages/react/src/components/alert-dialog.tsx @@ -25,7 +25,7 @@ const AlertDialogOverlay = React.forwardRef< >(({ className, ...props }, ref) => ( ) } + AlertDialogHeader.displayName = 'AlertDialogHeader' function AlertDialogFooter({ @@ -94,6 +95,7 @@ const AlertDialogTitle = React.forwardRef< {...props} /> )) + AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName const AlertDialogDescription = React.forwardRef< @@ -102,7 +104,7 @@ const AlertDialogDescription = React.forwardRef< >(({ className, ...props }, ref) => ( )) @@ -115,7 +117,7 @@ const AlertDialogAction = React.forwardRef< >(({ className, ...props }, ref) => ( )) diff --git a/packages/react/src/components/alert.tsx b/packages/react/src/components/alert.tsx index ebf7fab..ba72c77 100644 --- a/packages/react/src/components/alert.tsx +++ b/packages/react/src/components/alert.tsx @@ -8,10 +8,11 @@ const alertVariants = cva( { variants: { variant: { - dark: 'bg-dark-900 text-white', - error: 'bg-error-500 dark:bg-error-500', - success: 'bg-success-500 dark:bg-success-500', - warn: 'bg-warn-500 dark:bg-warn-500', + dark: 'bg-dark-900 text-white hover:bg-dark-900/90', + error: 'bg-error-500 dark:bg-error-500 hover:bg-error-500/90', + success: 'bg-success-500 dark:bg-success-500 hover:bg-success-500/90', + warn: 'bg-warn-500 dark:bg-warn-500 hover:bg-warn-500/90', + ligth: 'bg-white dark:bg-white hover:bg-white/90', }, }, defaultVariants: { diff --git a/packages/react/src/components/badge.tsx b/packages/react/src/components/badge.tsx index 1b01a8e..e1dce66 100644 --- a/packages/react/src/components/badge.tsx +++ b/packages/react/src/components/badge.tsx @@ -4,7 +4,7 @@ import { type VariantProps, cva } from 'class-variance-authority' import { cn } from '../lib/cn' const badgeVariants = cva( - 'inline-flex items-center rounded border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-white shadow', + 'inline-flex items-center rounded border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-white shadow cursor-pointer', { variants: { variant: { @@ -14,6 +14,7 @@ const badgeVariants = cva( dark: 'bg-dark-900 hover:bg-dark-900/90', warn: 'bg-warn-500 hover:bg-warn-500/90', error: 'bg-error-500 hover:bg-error-500/90', + ligth: 'bg-white hover:bg-white/90 text-black', }, }, defaultVariants: { diff --git a/packages/react/src/components/card.tsx b/packages/react/src/components/card.tsx index f270e88..2cc6e2f 100644 --- a/packages/react/src/components/card.tsx +++ b/packages/react/src/components/card.tsx @@ -9,7 +9,7 @@ const Card = React.forwardRef<
)) + SelectContent.displayName = SelectPrimitive.Content.displayName const SelectLabel = React.forwardRef< @@ -117,7 +118,7 @@ const SelectItem = React.forwardRef< )) + SelectSeparator.displayName = SelectPrimitive.Separator.displayName export { diff --git a/packages/react/src/components/table.tsx b/packages/react/src/components/table.tsx index 31565a6..11a91ae 100644 --- a/packages/react/src/components/table.tsx +++ b/packages/react/src/components/table.tsx @@ -9,11 +9,12 @@ const Table = React.forwardRef<
)) + Table.displayName = 'Table' const TableHeader = React.forwardRef< @@ -22,6 +23,7 @@ const TableHeader = React.forwardRef< >(({ className, ...props }, ref) => ( )) + TableHeader.displayName = 'TableHeader' const TableBody = React.forwardRef< @@ -30,10 +32,11 @@ const TableBody = React.forwardRef< >(({ className, ...props }, ref) => ( )) + TableBody.displayName = 'TableBody' const TableFooter = React.forwardRef< @@ -43,12 +46,13 @@ const TableFooter = React.forwardRef< tr]:last:border-b-0', + 'border-t border-dark-700/50 bg-dark-800/50 font-medium [&>tr]:last:border-b-0', className, )} {...props} /> )) + TableFooter.displayName = 'TableFooter' const TableRow = React.forwardRef< @@ -58,12 +62,13 @@ const TableRow = React.forwardRef< )) + TableRow.displayName = 'TableRow' const TableHead = React.forwardRef< @@ -73,12 +78,13 @@ const TableHead = React.forwardRef<
[role=checkbox]]:translate-y-[2px]', + 'h-12 px-4 text-left align-middle font-medium text-dark-200 [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]', className, )} {...props} /> )) + TableHead.displayName = 'TableHead' const TableCell = React.forwardRef< @@ -88,12 +94,13 @@ const TableCell = React.forwardRef< [role=checkbox]]:translate-y-[2px]', + 'p-4 align-middle [&:has([role=checkbox])]:pr-0', className, )} {...props} /> )) + TableCell.displayName = 'TableCell' const TableCaption = React.forwardRef< @@ -102,7 +109,7 @@ const TableCaption = React.forwardRef< >(({ className, ...props }, ref) => (
)) diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts index bb40ce4..6cc3969 100644 --- a/packages/react/src/index.ts +++ b/packages/react/src/index.ts @@ -18,3 +18,4 @@ export * from './components/select' export * from './components/card' export * from './components/separator' export * from './components/checkbox' +export * from './components/scroll-area'