Merge branch 'main' into joao/add-storybook

bleu · Nov 9, 2024 · 0fbe953 · 0fbe953
2 parents 2dfd858 + 407d0e6
commit 0fbe953
Show file tree

Hide file tree

Showing 9 changed files with 79 additions and 74 deletions.
diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml
@@ -1,6 +1,3 @@
-# This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
-# For more information see: https://help.github.com/actions/language-and-framework-guides/publishing-nodejs-packages
-
 name: Publish
 
 on:
@@ -27,8 +24,7 @@ jobs:
         with:
           node-version: lts/*
           cache: "yarn"
-          registry-url: "https://npm.pkg.github.com"
-          scope: "@bleu"
+          scope: "@bleu/builders"
 
       - name: Install dependencies
         run: yarn install --immutable
@@ -37,7 +33,7 @@ jobs:
         if: github.ref == 'refs/tags/v*' # Only run on version tags
         run: |
           yarn build
-          npm login --registry=https://npm.pkg.github.com/ --scope=bleu
-          npm publish
+          npm login --scope=bleu.builders
+          npm publish --access public
         env:
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
-  "name": "@bleu/ui",
+  "name": "@bleu.builders/ui",
   "description": "",
-  "version": "0.1.129",
+  "version": "0.1.133",
   "author": "",
   "license": "",
   "keywords": [],
@@ -75,13 +75,9 @@
       "release": true
     },
     "npm": {
-      "publish": true,
-      "publishArgs": "--registry=https://npm.pkg.github.com"
+      "publish": true
     }
   },
-  "publishConfig": {
-    "registry": "https://npm.pkg.github.com"
-  },
   "engines": {
     "node": ">=18.0.0"
   },

diff --git a/src/components/DataTable/DataTablePagination.tsx b/src/components/DataTable/DataTablePagination.tsx
@@ -20,7 +20,7 @@ export function DataTablePagination({
   const pageCount = table.getPageCount() || 1;
   return (
     <div className="flex items-center justify-end px-2">
-      <div className="flex items-center space-x-6 lg:space-x-8">
+      <div className="flex flex-col items-end md:flex-row md:items-center gap-y-2 space-x-6 lg:space-x-8">
         <div className="flex items-center space-x-2">
           <p className="text-sm font-medium">{t("Items per page")}</p>
           <Select.SelectRoot
@@ -43,49 +43,51 @@ export function DataTablePagination({
             </Select.SelectContent>
           </Select.SelectRoot>
         </div>
-        <div className="flex w-[100px] items-center justify-center text-sm font-medium">
-          <Trans>Page {{ currentPage }} of</Trans> {pageCount}
-        </div>
-        <div className="flex items-center space-x-2">
-          <Button
-            // @ts-ignore
-            variant="outline"
-            className="hidden h-8 w-8 p-0 lg:flex"
-            onClick={() => table.setPageIndex(0)}
-            disabled={!table.getCanPreviousPage()}
-          >
-            <span className="sr-only">Go to first page</span>
-            <DoubleArrowLeftIcon className="h-4 w-4" />
-          </Button>
-          <Button
-            // @ts-ignore
-            variant="outline"
-            className="h-8 w-8 p-0"
-            onClick={() => table.previousPage()}
-            disabled={!table.getCanPreviousPage()}
-          >
-            <span className="sr-only">Go to previous page</span>
-            <ChevronLeftIcon className="h-4 w-4" />
-          </Button>
-          <Button
-            // @ts-ignore
-            variant="outline"
-            className="h-8 w-8 p-0"
-            onClick={() => table.nextPage()}
-            disabled={!table.getCanNextPage()}
-          >
-            <span className="sr-only">Go to next page</span>
-            <ChevronRightIcon className="h-4 w-4" />
-          </Button>
-          <Button
-            variant="outline"
-            className="hidden h-8 w-8 p-0 lg:flex"
-            onClick={() => table.setPageIndex(table.getPageCount() - 1)}
-            disabled={!table.getCanNextPage()}
-          >
-            <span className="sr-only">Go to last page</span>
-            <DoubleArrowRightIcon className="h-4 w-4" />
-          </Button>
+        <div className="flex items-center space-x-6 lg:space-x-8">
+          <div className="flex w-[100px] items-center justify-center text-sm font-medium">
+            <Trans>Page {{ currentPage }} of</Trans> {pageCount}
+          </div>
+          <div className="flex items-center space-x-2">
+            <Button
+              // @ts-ignore
+              variant="outline"
+              className="hidden h-8 w-8 p-0 lg:flex"
+              onClick={() => table.setPageIndex(0)}
+              disabled={!table.getCanPreviousPage()}
+            >
+              <span className="sr-only">Go to first page</span>
+              <DoubleArrowLeftIcon className="h-4 w-4" />
+            </Button>
+            <Button
+              // @ts-ignore
+              variant="outline"
+              className="h-8 w-8 p-0"
+              onClick={() => table.previousPage()}
+              disabled={!table.getCanPreviousPage()}
+            >
+              <span className="sr-only">Go to previous page</span>
+              <ChevronLeftIcon className="h-4 w-4" />
+            </Button>
+            <Button
+              // @ts-ignore
+              variant="outline"
+              className="h-8 w-8 p-0"
+              onClick={() => table.nextPage()}
+              disabled={!table.getCanNextPage()}
+            >
+              <span className="sr-only">Go to next page</span>
+              <ChevronRightIcon className="h-4 w-4" />
+            </Button>
+            <Button
+              variant="outline"
+              className="hidden h-8 w-8 p-0 lg:flex"
+              onClick={() => table.setPageIndex(table.getPageCount() - 1)}
+              disabled={!table.getCanNextPage()}
+            >
+              <span className="sr-only">Go to last page</span>
+              <DoubleArrowRightIcon className="h-4 w-4" />
+            </Button>
+          </div>
         </div>
       </div>
     </div>

diff --git a/src/components/DataTable/SWRDataTable/index.tsx b/src/components/DataTable/SWRDataTable/index.tsx
@@ -115,14 +115,19 @@ export const renderDataTableCell = ({ filters, column, row, selectedRows }) => {
     case "actions":
       return <DataTableRowActions row={row} column={column} />;
     case "image":
-      if (!row.getValue("image")?.url) return null;
-      return (
-        <img
-          className="aspect-ratio-1 size-16 rounded-sm object-contain"
-          src={row.getValue("image").url}
-          alt={row.getValue("name")}
-        />
-      );
+      // eslint-disable-next-line no-case-declarations
+      const image = row.getValue("image") || value;
+      if (image?.url) {
+        return (
+          <img
+            className="aspect-ratio-1 size-16 rounded-sm object-contain"
+            src={image.url}
+            alt={image.alt_text}
+          />
+        );
+      }
+      return <div className="max-w-[400px] truncate">{value}</div>;
+
     case "link":
       // eslint-disable-next-line no-case-declarations
       const url = row.getValue("details_url");

diff --git a/src/components/FormBuilder/fields/DatePickerInput.tsx b/src/components/FormBuilder/fields/DatePickerInput.tsx
@@ -37,7 +37,7 @@ export const DatePickerInput = withConditional<DatePickerInputProps>(
         rules={field.required ? { required: true } : undefined}
         defaultValue={field.defaultValue}
         render={({ field: formField }) => (
-          <FormItem className="flex flex-col">
+          <FormItem className="flex flex-col w-full">
             <FormLabel tooltip={field.tooltip}>{field.label}</FormLabel>
             <Popover>
               <PopoverTrigger asChild>
@@ -64,7 +64,7 @@ export const DatePickerInput = withConditional<DatePickerInputProps>(
                   </Button>
                 </FormControl>
               </PopoverTrigger>
-              <PopoverContent className="w-auto p-0" align="start">
+              <PopoverContent className="w-auto p-0 z-[1500]" align="start">
                 {/* @ts-expect-error TS(2739) FIXME: Type '{ mode: string; selected: any; onSelect: any... Remove this comment to see the full error message */}
                 <Calendar
                   mode="single"

diff --git a/src/components/FormBuilder/fields/InputField.tsx b/src/components/FormBuilder/fields/InputField.tsx
@@ -12,13 +12,14 @@ import { Input } from "#/components/ui/Input";
 
 import { withConditional } from "../withConditional";
 import { BaseField } from "../types";
+import { cn } from "#/lib";
 
 export interface InputFieldProps extends BaseField {
   length?: {
     maximum?: number;
     minimum: number; // undefined or number
   };
-  mode: "text" | "number";
+  mode: "text" | "number" | "time";
   type: "input";
 }
 
@@ -56,7 +57,9 @@ export const InputField = withConditional<InputFieldProps>(
         }
         defaultValue={field.defaultValue}
         render={({ field: formField }) => (
-          <FormItem className="w-full">
+          <FormItem
+            className={cn(field.mode === "time" ? "w-[240px]" : "w-full")}
+          >
             <FormLabel tooltip={field.tooltip}>{field.label}</FormLabel>
             <FormDescription>{field.description}</FormDescription>
             <FormControl>

diff --git a/src/components/ui/RadioGroup.tsx b/src/components/ui/RadioGroup.tsx
@@ -22,7 +22,7 @@ const RadioGroupItem = React.forwardRef<
   <RadioGroupPrimitive.Item
     ref={ref}
     className={cn(
-      "border-primary text-primary ring-offset-background focus-visible:ring-ring data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground aspect-square h-4 w-4 rounded-full border focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+      "border-primary text-primary ring-offset-background focus-visible:ring-ring data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground aspect-square h-4 w-4 min-h-4 min-w-4 rounded-full border focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
       className
     )}
     {...props}

diff --git a/src/components/ui/Toaster.tsx b/src/components/ui/Toaster.tsx
@@ -8,10 +8,13 @@ import {
   ToastViewport,
 } from "#/components/ui/Toast";
 import { useToast } from "#/hooks/useToast";
+import { cn } from "#/lib";
 
 function Toaster({
+  className,
   position = "top-right",
 }: {
+  className?: string;
   position?: "top-right" | "top-left" | "bottom-right" | "bottom-left";
 }) {
   const { toasts } = useToast();
@@ -28,7 +31,7 @@ function Toaster({
           <ToastClose />
         </Toast>
       ))}
-      <ToastViewport position={position} />
+      <ToastViewport className={cn(className)} position={position} />
     </ToastProvider>
   );
 }

diff --git a/yarn.lock b/yarn.lock
@@ -3363,9 +3363,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@bleu/ui@workspace:.":
+"@bleu.builders/ui@workspace:.":
   version: 0.0.0-use.local
-  resolution: "@bleu/ui@workspace:."
+  resolution: "@bleu.builders/ui@workspace:."
   dependencies:
     "@chromatic-com/storybook": "npm:^1.6.1"
     "@commitlint/cli": "npm:19.3.0"