From f823841b15e8914250bfeebb7b2382bdeeb16e0e Mon Sep 17 00:00:00 2001 From: Matt Date: Tue, 18 Feb 2025 15:41:00 -0500 Subject: [PATCH] Converting to shadcn, steps, validate page --- inventory/package-lock.json | 31 +++++ inventory/package.json | 1 + inventory/src/components/ui/checkbox.tsx | 28 ++++ .../src/components/ModalCloseButton.tsx | 1 - .../src/steps/Steps.tsx | 65 ++++++--- .../steps/ValidationStep/ValidationStep.tsx | 131 ++++++++++-------- mountremote.command | 4 +- 7 files changed, 181 insertions(+), 80 deletions(-) create mode 100644 inventory/src/components/ui/checkbox.tsx diff --git a/inventory/package-lock.json b/inventory/package-lock.json index 6066e8b..d6ed5bd 100644 --- a/inventory/package-lock.json +++ b/inventory/package-lock.json @@ -31,6 +31,7 @@ "@radix-ui/react-accordion": "^1.2.2", "@radix-ui/react-alert-dialog": "^1.1.4", "@radix-ui/react-avatar": "^1.1.2", + "@radix-ui/react-checkbox": "^1.1.4", "@radix-ui/react-collapsible": "^1.1.2", "@radix-ui/react-dialog": "^1.1.4", "@radix-ui/react-dropdown-menu": "^2.1.4", @@ -3300,6 +3301,36 @@ } } }, + "node_modules/@radix-ui/react-checkbox": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/@radix-ui/react-checkbox/-/react-checkbox-1.1.4.tgz", + "integrity": "sha512-wP0CPAHq+P5I4INKe3hJrIa1WoNqqrejzW+zoU0rOvo1b9gDEJJFl2rYfO1PYJUQCc2H1WZxIJmyv9BS8i5fLw==", + "license": "MIT", + "dependencies": { + "@radix-ui/primitive": "1.1.1", + "@radix-ui/react-compose-refs": "1.1.1", + "@radix-ui/react-context": "1.1.1", + "@radix-ui/react-presence": "1.1.2", + "@radix-ui/react-primitive": "2.0.2", + "@radix-ui/react-use-controllable-state": "1.1.0", + "@radix-ui/react-use-previous": "1.1.0", + "@radix-ui/react-use-size": "1.1.0" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, "node_modules/@radix-ui/react-collapsible": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/@radix-ui/react-collapsible/-/react-collapsible-1.1.3.tgz", diff --git a/inventory/package.json b/inventory/package.json index 4745b58..6d03975 100644 --- a/inventory/package.json +++ b/inventory/package.json @@ -33,6 +33,7 @@ "@radix-ui/react-accordion": "^1.2.2", "@radix-ui/react-alert-dialog": "^1.1.4", "@radix-ui/react-avatar": "^1.1.2", + "@radix-ui/react-checkbox": "^1.1.4", "@radix-ui/react-collapsible": "^1.1.2", "@radix-ui/react-dialog": "^1.1.4", "@radix-ui/react-dropdown-menu": "^2.1.4", diff --git a/inventory/src/components/ui/checkbox.tsx b/inventory/src/components/ui/checkbox.tsx new file mode 100644 index 0000000..0a6a9a5 --- /dev/null +++ b/inventory/src/components/ui/checkbox.tsx @@ -0,0 +1,28 @@ +import * as React from "react" +import * as CheckboxPrimitive from "@radix-ui/react-checkbox" +import { Check } from "lucide-react" + +import { cn } from "@/lib/utils" + +const Checkbox = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + + + + + +)) +Checkbox.displayName = CheckboxPrimitive.Root.displayName + +export { Checkbox } diff --git a/inventory/src/lib/react-spreadsheet-import/src/components/ModalCloseButton.tsx b/inventory/src/lib/react-spreadsheet-import/src/components/ModalCloseButton.tsx index 4bcf7bb..59c735e 100644 --- a/inventory/src/lib/react-spreadsheet-import/src/components/ModalCloseButton.tsx +++ b/inventory/src/lib/react-spreadsheet-import/src/components/ModalCloseButton.tsx @@ -13,7 +13,6 @@ import { AlertDialogPortal, AlertDialogOverlay, } from "@/components/ui/alert-dialog" -import { useState } from "react" import { useRsi } from "../hooks/useRsi" type ModalCloseButtonProps = { diff --git a/inventory/src/lib/react-spreadsheet-import/src/steps/Steps.tsx b/inventory/src/lib/react-spreadsheet-import/src/steps/Steps.tsx index 3a553c2..978af26 100644 --- a/inventory/src/lib/react-spreadsheet-import/src/steps/Steps.tsx +++ b/inventory/src/lib/react-spreadsheet-import/src/steps/Steps.tsx @@ -1,13 +1,13 @@ import { StepState, StepType, UploadFlow } from "./UploadFlow" -import { ModalHeader } from "@chakra-ui/react" -import { useSteps, Step, Steps as Stepper } from "chakra-ui-steps" -import { CgCheck } from "react-icons/cg" - import { useRsi } from "../hooks/useRsi" import { useRef, useState } from "react" import { steps, stepTypeToStepIndex, stepIndexToStepType } from "../utils/steps" +import { CgCheck } from "react-icons/cg" +import { Separator } from "@/components/ui/separator" +// @ts-ignore +import { useSteps, Step, Steps as Stepper } from "chakra-ui-steps" -const CheckIcon = ({ color }: { color: string }) => +const CheckIcon = ({ color }: { color: string }) => export const Steps = () => { const { initialStepState, translations, isNavigationEnabled } = useRsi() @@ -44,18 +44,49 @@ export const Steps = () => { return ( <> - - - {steps.map((key) => ( - - ))} - - +
+ +
) diff --git a/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStep/ValidationStep.tsx b/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStep/ValidationStep.tsx index ce6fa47..847dbd2 100644 --- a/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStep/ValidationStep.tsx +++ b/inventory/src/lib/react-spreadsheet-import/src/steps/ValidationStep/ValidationStep.tsx @@ -1,14 +1,13 @@ import { useCallback, useMemo, useState } from "react" -import { Box, Button, Heading, ModalBody, Switch, useStyleConfig, useToast } from "@chakra-ui/react" -import { ContinueButton } from "../../components/ContinueButton" import { useRsi } from "../../hooks/useRsi" import type { Meta } from "./types" import { addErrorsAndRunHooks } from "./utils/dataMutations" import { generateColumns } from "./components/columns" -import { Table } from "../../components/Table" +// @ts-ignore +import type { Column, RowsChangeData } from "react-data-grid" +// @ts-ignore +import DataGrid from "react-data-grid" import type { Data } from "../../types" -import type { themeOverrides } from "../../theme" -import type { RowsChangeData } from "react-data-grid" import { AlertDialog, AlertDialogAction, @@ -21,6 +20,9 @@ import { AlertDialogPortal, AlertDialogOverlay, } from "@/components/ui/alert-dialog" +import { Button } from "@/components/ui/button" +import { Switch } from "@/components/ui/switch" +import { useToast } from "@/hooks/use-toast" type Props = { initialData: (Data & Meta)[] @@ -30,13 +32,9 @@ type Props = { export const ValidationStep = ({ initialData, file, onBack }: Props) => { const { translations, fields, onClose, onSubmit, rowHook, tableHook, allowInvalidSubmit } = useRsi() - const styles = useStyleConfig( - "ValidationStep", - ) as (typeof themeOverrides)["components"]["ValidationStep"]["baseStyle"] - const toast = useToast() + const { toast } = useToast() const [data, setData] = useState<(Data & Meta)[]>(initialData) - const [selectedRows, setSelectedRows] = useState>(new Set()) const [filterByErrors, setFilterByErrors] = useState(false) const [showSubmitAlert, setShowSubmitAlert] = useState(false) @@ -63,7 +61,7 @@ export const ValidationStep = ({ initialData, file, onBack }: const updateRows = useCallback( (rows: typeof data, changedData?: RowsChangeData<(typeof data)[number]>) => { - const changes = changedData?.indexes.reduce((acc, index) => { + const changes = changedData?.indexes.reduce((acc: Record, index: number) => { // when data is filtered val !== actual index in data const realIndex = data.findIndex((value) => value.__index === rows[index].__index) acc[realIndex] = rows[index] @@ -119,12 +117,9 @@ export const ValidationStep = ({ initialData, file, onBack }: }) .catch((err: Error) => { toast({ - status: "error", - variant: "left-accent", - position: "bottom-left", - title: `${translations.alerts.submitError.title}`, - description: err?.message || `${translations.alerts.submitError.defaultMessage}`, - isClosable: true, + variant: "destructive", + title: translations.alerts.submitError.title, + description: err?.message || translations.alerts.submitError.defaultMessage, }) }) .finally(() => { @@ -149,7 +144,7 @@ export const ValidationStep = ({ initialData, file, onBack }: } return ( - <> +
@@ -177,48 +172,64 @@ export const ValidationStep = ({ initialData, file, onBack }: - - - {translations.validationStep.title} - - +
+ + +
+
+ +
+ + {filterByErrors + ? translations.validationStep.noRowsMessageWhenFiltered + : translations.validationStep.noRowsMessage} +
+ } + /> + + + +
+
+ {onBack && ( + - setFilterByErrors(!filterByErrors)} - > - {translations.validationStep.filterSwitchTitle} - - - - - {filterByErrors - ? translations.validationStep.noRowsMessageWhenFiltered - : translations.validationStep.noRowsMessage} - - ), - }} - /> - - - + )} + + + + ) } diff --git a/mountremote.command b/mountremote.command index 65e1bde..d46fbb4 100755 --- a/mountremote.command +++ b/mountremote.command @@ -1,7 +1,7 @@ #!/bin/zsh #Clear previous mount in case it’s still there -umount /Users/matt/Library/Mobile Documents/com~apple~CloudDocs/Dev/inventory/inventory-server +umount "/Users/matt/Library/Mobile Documents/com~apple~CloudDocs/Dev/inventory/inventory-server" #Mount -sshfs matt@dashboard.kent.pw:/var/www/html/inventory -p 22122 /Users/matt/Library/Mobile Documents/com~apple~CloudDocs/Dev/inventory/inventory-server/ \ No newline at end of file +sshfs matt@dashboard.kent.pw:/var/www/html/inventory -p 22122 "/Users/matt/Library/Mobile Documents/com~apple~CloudDocs/Dev/inventory/inventory-server/" \ No newline at end of file