From fde21e9de10b6b3e3d46a6cf74142266158bb782 Mon Sep 17 00:00:00 2001 From: kaimsfd Date: Mon, 16 Oct 2023 11:29:07 +0000 Subject: [PATCH 1/8] created skeleton for ui --- frontend/src/components/Table.tsx | 82 +++++++++++++++++++++++++++++++ 1 file changed, 82 insertions(+) create mode 100644 frontend/src/components/Table.tsx diff --git a/frontend/src/components/Table.tsx b/frontend/src/components/Table.tsx new file mode 100644 index 00000000..b7c0bddc --- /dev/null +++ b/frontend/src/components/Table.tsx @@ -0,0 +1,82 @@ +import { Box, BoxProps, Heading, Skeleton, Table, Tbody, Td, Th, Thead, Tr } from "@chakra-ui/react"; +import React, { useCallback } from "react"; + +export interface TableProps extends Omit { + /** Table data */ + data: Record[] | null; + /** Table headers and mapping to record keys */ + headers: { key: string; label: string; skeletonWidth?: number }[]; + /** Callback when row is clicked */ + onClick?: (item: Record, index: number) => void; + /** Label to be used when displaying "no data available" message */ + label?: string; + /** Styling variant to use for the rows */ + rowVariant?: string; + // number of rows to be added while the table is loading + loadingRows?: number +} + +const TableView = ({ + data, + headers, + onClick, + label = "data", + rowVariant = "diamondStriped", + loadingRows = 0, + ...props +}: TableProps) => { + const handleClick = useCallback( + (row: React.MouseEvent) => { + if (onClick && data) { + const target = (row.target as HTMLTableCellElement).dataset.id; + if (target) { + const intTarget = parseInt(target); + onClick(data[intTarget], intTarget); + } + } + }, + [data, onClick], + ); + + return ( + + {data === null || data.length === 0 ? ( + + No {label.toLowerCase()} found + + ) : ( + + + + {headers.map((header) => ( + + ))} + + + + {data.map((item, i) => ( + + {headers.map((header) => ( + + ))} + + ))} + {[...Array(loadingRows)].map(() => ( + + {headers.map((header) => ( + + ))} + + ))} + +
{header.label}
+ {item[header.key]} +
+ +
+ )} + + ); +}; + +export { TableView as Table }; \ No newline at end of file From c01d904352131f43dc5d50632cd2c267dea5ea46 Mon Sep 17 00:00:00 2001 From: kaimsfd Date: Wed, 18 Oct 2023 07:04:33 +0000 Subject: [PATCH 2/8] changed error handling to use a Chakra Alert --- .gitignore | 3 ++ frontend/package.json | 4 ++- frontend/yarn.lock | 73 +++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 79 insertions(+), 1 deletion(-) diff --git a/.gitignore b/.gitignore index 31281df2..6ccbcb55 100644 --- a/.gitignore +++ b/.gitignore @@ -3,3 +3,6 @@ # Developer Tooling .vscode + +# Generated Schema +pin_packing.graphql \ No newline at end of file diff --git a/frontend/package.json b/frontend/package.json index 5f9d8162..439f6308 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -59,7 +59,9 @@ "build": "node scripts/build.js", "test": "node scripts/test.js", "format": "prettier --write **/*.js", - "eslint-lint": "node scripts/lint.js" + "eslint-lint": "node scripts/lint.js", + "compile": "graphql-codegen", + "watch": "graphql-codegen -w" }, "eslintConfig": { "extends": [ diff --git a/frontend/yarn.lock b/frontend/yarn.lock index 077847ac..fb2fc575 100644 --- a/frontend/yarn.lock +++ b/frontend/yarn.lock @@ -111,6 +111,27 @@ json5 "^2.2.3" semver "^6.3.1" +"@babel/core@^7.14.0", "@babel/core@^7.22.9": + version "7.23.2" + resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.23.2.tgz#ed10df0d580fff67c5f3ee70fd22e2e4c90a9f94" + integrity sha512-n7s51eWdaWZ3vGT2tD4T7J6eJs3QoBXydv7vkUM06Bf1cbVD2Kc2UrkzhiQwobfV7NwOnQXYL7UBJ5VPU+RGoQ== + dependencies: + "@ampproject/remapping" "^2.2.0" + "@babel/code-frame" "^7.22.13" + "@babel/generator" "^7.23.0" + "@babel/helper-compilation-targets" "^7.22.15" + "@babel/helper-module-transforms" "^7.23.0" + "@babel/helpers" "^7.23.2" + "@babel/parser" "^7.23.0" + "@babel/template" "^7.22.15" + "@babel/traverse" "^7.23.2" + "@babel/types" "^7.23.0" + convert-source-map "^2.0.0" + debug "^4.1.0" + gensync "^1.0.0-beta.2" + json5 "^2.2.3" + semver "^6.3.1" + "@babel/eslint-parser@^7.16.3": version "7.23.3" resolved "https://registry.yarnpkg.com/@babel/eslint-parser/-/eslint-parser-7.23.3.tgz#7bf0db1c53b54da0c8a12627373554a0828479ca" @@ -3471,6 +3492,11 @@ resolved "https://registry.yarnpkg.com/@types/json-stable-stringify/-/json-stable-stringify-1.0.36.tgz#fe6c6001a69ff8160a772da08779448a333c7ddd" integrity sha512-b7bq23s4fgBB76n34m2b3RBf6M369B0Z9uRR8aHTMd8kZISRkmDEpPD8hhpYvDFzr3bJCPES96cm3Q6qRNDbQw== +"@types/json-stable-stringify@^1.0.32": + version "1.0.35" + resolved "https://registry.yarnpkg.com/@types/json-stable-stringify/-/json-stable-stringify-1.0.35.tgz#9cea8628b50a093ae00a7e73de49676f2f9ade27" + integrity sha512-zlCWqsRBI0+ANN7dzGeDFJ4CHaVFTLqBNRS11GjR2mHCW6XxNtnMxhQzBKMzfsnjI8oI+kWq2vBwinyQpZVSsg== + "@types/json5@^0.0.29": version "0.0.29" resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee" @@ -4461,6 +4487,11 @@ astral-regex@^2.0.0: resolved "https://registry.yarnpkg.com/astral-regex/-/astral-regex-2.0.0.tgz#483143c567aeed4785759c0865786dc77d7d2e31" integrity sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ== +astral-regex@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/astral-regex/-/astral-regex-2.0.0.tgz#483143c567aeed4785759c0865786dc77d7d2e31" + integrity sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ== + async@^3.2.3: version "3.2.5" resolved "https://registry.yarnpkg.com/async/-/async-3.2.5.tgz#ebd52a8fdaf7a2289a24df399f8d8485c8a46b66" @@ -4899,6 +4930,15 @@ capital-case@^1.0.4: tslib "^2.0.3" upper-case-first "^2.0.2" +capital-case@^1.0.4: + version "1.0.4" + resolved "https://registry.yarnpkg.com/capital-case/-/capital-case-1.0.4.tgz#9d130292353c9249f6b00fa5852bee38a717e669" + integrity sha512-ds37W8CytHgwnhGGTi88pcPyR15qoNkOpYwmMMfnWqqWgESapLqvDx6huFjQ5vqWSn2Z06173XNA7LtMOeUh1A== + dependencies: + no-case "^3.0.4" + tslib "^2.0.3" + upper-case-first "^2.0.2" + case-sensitive-paths-webpack-plugin@^2.4.0: version "2.4.0" resolved "https://registry.yarnpkg.com/case-sensitive-paths-webpack-plugin/-/case-sensitive-paths-webpack-plugin-2.4.0.tgz#db64066c6422eed2e08cc14b986ca43796dbc6d4" @@ -10450,6 +10490,32 @@ snake-case@^3.0.4: dot-case "^3.0.4" tslib "^2.0.3" +slice-ansi@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/slice-ansi/-/slice-ansi-3.0.0.tgz#31ddc10930a1b7e0b67b08c96c2f49b77a789787" + integrity sha512-pSyv7bSTC7ig9Dcgbw9AuRNUb5k5V6oDudjZoMBSr13qpLBG7tB+zgCkARjq7xIUgdz5P1Qe8u+rSGdouOOIyQ== + dependencies: + ansi-styles "^4.0.0" + astral-regex "^2.0.0" + is-fullwidth-code-point "^3.0.0" + +slice-ansi@^4.0.0: + version "4.0.0" + resolved "https://registry.yarnpkg.com/slice-ansi/-/slice-ansi-4.0.0.tgz#500e8dd0fd55b05815086255b3195adf2a45fe6b" + integrity sha512-qMCMfhY040cVHT43K9BFygqYbUPFZKHOg7K73mtTWJRb8pyP3fzf4Ixd5SzdEJQ6MRUg/WBnOLxghZtKKurENQ== + dependencies: + ansi-styles "^4.0.0" + astral-regex "^2.0.0" + is-fullwidth-code-point "^3.0.0" + +snake-case@^3.0.4: + version "3.0.4" + resolved "https://registry.yarnpkg.com/snake-case/-/snake-case-3.0.4.tgz#4f2bbd568e9935abdfd593f34c691dadb49c452c" + integrity sha512-LAOh4z89bGQvl9pFfNF8V146i7o7/CqFPbqzYgP+yYzDIDeS9HaNFtXABamRW+AQzEVODcvE79ljJ+8a9YSdMg== + dependencies: + dot-case "^3.0.4" + tslib "^2.0.3" + sockjs@^0.3.24: version "0.3.24" resolved "https://registry.yarnpkg.com/sockjs/-/sockjs-0.3.24.tgz#c9bc8995f33a111bea0395ec30aa3206bdb5ccce" @@ -11189,6 +11255,13 @@ unixify@^1.0.0: dependencies: normalize-path "^2.1.1" +unixify@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/unixify/-/unixify-1.0.0.tgz#3a641c8c2ffbce4da683a5c70f03a462940c2090" + integrity sha512-6bc58dPYhCMHHuwxldQxO3RRNZ4eCogZ/st++0+fcC1nr0jiGUtAdBJ2qzmLQWSxbtz42pWt4QQMiZ9HvZf5cg== + dependencies: + normalize-path "^2.1.1" + unpipe@1.0.0, unpipe@~1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/unpipe/-/unpipe-1.0.0.tgz#b2bf4ee8514aae6165b4817829d21b2ef49904ec" From 1cb360e399a5b011b350842281f8f53224aac9c4 Mon Sep 17 00:00:00 2001 From: kaimsfd Date: Wed, 25 Oct 2023 11:58:04 +0000 Subject: [PATCH 3/8] created toggleable dark theme --- .devcontainer/docker-compose.yaml | 4 +- frontend/package.json | 7 +- frontend/src/App.tsx | 14 +- frontend/src/components/DarkModeButton.tsx | 15 + frontend/src/styles/colours.tsx | 20 ++ frontend/src/styles/components.tsx | 325 +++++++++++++++++++++ frontend/src/styles/theme.tsx | 49 ++++ frontend/yarn.lock | 115 +++++++- 8 files changed, 544 insertions(+), 5 deletions(-) create mode 100644 frontend/src/components/DarkModeButton.tsx create mode 100644 frontend/src/styles/colours.tsx create mode 100644 frontend/src/styles/components.tsx create mode 100644 frontend/src/styles/theme.tsx diff --git a/.devcontainer/docker-compose.yaml b/.devcontainer/docker-compose.yaml index 79a156b1..98fe18c4 100644 --- a/.devcontainer/docker-compose.yaml +++ b/.devcontainer/docker-compose.yaml @@ -7,11 +7,13 @@ services: dockerfile: Dockerfile.backend volumes: - ..:/workspace:z - command: sleep infinity + command: cargo run --manifest-path /workspace/backend/Cargo.toml --release -p pin_packing serve --database-url postgres://postgres:password@postgres/pin_packing environment: OPA_URL: http://opa:8181 DATABASE_URL: postgres://postgres:password@postgres RABBITMQ_URL: amqp://rabbitmq:password@rabbitmq + ports: + - "8080:80" frontend: image: docker.io/library/node:20.6.0-bookworm diff --git a/frontend/package.json b/frontend/package.json index 439f6308..7468b944 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -82,7 +82,8 @@ ] }, "dependencies": { - "@apollo/client": "3.8.8", + "@apollo/client": "3.5.4", + "@chakra-ui/icons": "^2.1.1", "@chakra-ui/react": "^2.8.1", "@diamondlightsource/ui-components": "^1.0.2", "@emotion/react": "^11.11.1", @@ -91,7 +92,9 @@ "graphql": "^16.3.0", "http-proxy-middleware": "^2.0.6", "react": "^18.2.0", - "react-dom": "^18.2.0" + "react-dom": "^18.2.0", + "react-helmet": "^6.1.0", + "react-toggle-dark-mode": "^1.1.1" }, "jest": { "roots": [ diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 6aa416fd..ab4444f7 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -1,3 +1,4 @@ +/* eslint-disable no-template-curly-in-string */ import { useQuery } from "@apollo/client"; import { gql } from './__generated__/gql'; import React from "react"; @@ -34,7 +35,16 @@ function DisplayPinInfo(): React.JSX.Element { notifyOnNetworkStatusChange: true, }); + //const [isDarkMode, setDarkMode] = React.useState(false); + + /* const toggleDarkMode = (checked: boolean) => { + setDarkMode(checked); + };*/ + + const { colorMode, toggleColorMode } = useColorMode() + var loadingRows = loading ? 2 : 0 + var bgColour = colorMode === 'dark' ? "black" : "white" if (error) return ( @@ -97,9 +107,10 @@ function DisplayPinInfo(): React.JSX.Element { ]} data={data ? data.libraryPins.edges.map((edge) => edge.node): []} loadingRows={loadingRows} + rowVariant={"diamondStriped"} /> - + + {mutationLoading &&

Loading...

} + {mutationError &&

Error :( Please try again

} + + ); + }); +} + // Displays libraryPins query in table component. The table can load more data if required function DisplayPinInfo(): React.JSX.Element { const { loading, error, data, fetchMore } = useQuery( @@ -35,13 +86,7 @@ function DisplayPinInfo(): React.JSX.Element { notifyOnNetworkStatusChange: true, }); - //const [isDarkMode, setDarkMode] = React.useState(false); - - /* const toggleDarkMode = (checked: boolean) => { - setDarkMode(checked); - };*/ - - const { colorMode, toggleColorMode } = useColorMode() + const { toggleColorMode } = useColorMode() var loadingRows = loading ? 2 : 0 const bgColour = useColorModeValue('white', 'black') @@ -130,6 +175,7 @@ export default function App(): React.JSX.Element { return ( + ); } From 8bb0057b62d7a300ad08da6c2299f910983915f5 Mon Sep 17 00:00:00 2001 From: kaimsfd Date: Fri, 3 Nov 2023 09:47:45 +0000 Subject: [PATCH 6/8] added edit icon --- frontend/src/components/Table.tsx | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/frontend/src/components/Table.tsx b/frontend/src/components/Table.tsx index b7c0bddc..54a89ca9 100644 --- a/frontend/src/components/Table.tsx +++ b/frontend/src/components/Table.tsx @@ -1,4 +1,5 @@ -import { Box, BoxProps, Heading, Skeleton, Table, Tbody, Td, Th, Thead, Tr } from "@chakra-ui/react"; +import { EditIcon } from "@chakra-ui/icons"; +import { Box, BoxProps, HStack, Heading, Skeleton, Spacer, Stack, Table, Tbody, Td, Th, Thead, Tr, Text } from "@chakra-ui/react"; import React, { useCallback } from "react"; export interface TableProps extends Omit { @@ -53,16 +54,25 @@ const TableView = ({ ))} + {data.map((item, i) => ( {headers.map((header) => ( + + {item[header.key]} + + + {header.key === 'status' ? : []} + + ))} ))} + {[...Array(loadingRows)].map(() => ( {headers.map((header) => ( @@ -73,6 +83,7 @@ const TableView = ({ ))} + )} From 926aaf3bd14c7cf0f02c0268aad2481eda255eb7 Mon Sep 17 00:00:00 2001 From: kaimsfd Date: Mon, 6 Nov 2023 07:51:56 +0000 Subject: [PATCH 7/8] created UpdatePinStatus mutation --- frontend/src/App.tsx | 55 +-------------------- frontend/src/components/Table.tsx | 21 ++++++-- frontend/src/components/UpdatePinStatus.tsx | 51 +++++++++++++++++++ 3 files changed, 71 insertions(+), 56 deletions(-) create mode 100644 frontend/src/components/UpdatePinStatus.tsx diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index ab7319ce..d2be215a 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -1,5 +1,5 @@ /* eslint-disable no-template-curly-in-string */ -import { useMutation, useQuery } from "@apollo/client"; +import { useQuery } from "@apollo/client"; import { gql } from './__generated__/gql'; import React from "react"; import { theme } from "@diamondlightsource/ui-components" @@ -27,57 +27,6 @@ query pinInfo ($after: String) { } `); -const UPDATE_PIN_STATUS = gql(` - mutation updatePinStatus($barcode: String!, $status: PinStatus!) { - updateLibraryPinStatus(barcode: $barcode, status: $status) { - barcode - status - } - } -`); - -function UpdatePin() { - const { loading, error, data } = useQuery( - GET_INFO, - { - notifyOnNetworkStatusChange: true, - }); - const [ - updateLibraryPinStatus, - { loading: mutationLoading, error: mutationError } - ] = useMutation(UPDATE_PIN_STATUS); - - if (loading) return

Loading...

; - if (error) return

Error :(

; - - return data.libraryPins.edges.map((edge) => { - let input; - - return ( -
-

-
{ - e.preventDefault(); - updateLibraryPinStatus({ variables: { barcode: edge.node.barcode, status: input.value } }); - - input.value = ""; - }} - > - { - input = node; - }} - /> - -
- {mutationLoading &&

Loading...

} - {mutationError &&

Error :( Please try again

} -
- ); - }); -} - // Displays libraryPins query in table component. The table can load more data if required function DisplayPinInfo(): React.JSX.Element { const { loading, error, data, fetchMore } = useQuery( @@ -175,7 +124,7 @@ export default function App(): React.JSX.Element { return ( - + {/* */} ); } diff --git a/frontend/src/components/Table.tsx b/frontend/src/components/Table.tsx index 54a89ca9..5867a196 100644 --- a/frontend/src/components/Table.tsx +++ b/frontend/src/components/Table.tsx @@ -1,6 +1,7 @@ import { EditIcon } from "@chakra-ui/icons"; -import { Box, BoxProps, HStack, Heading, Skeleton, Spacer, Stack, Table, Tbody, Td, Th, Thead, Tr, Text } from "@chakra-ui/react"; -import React, { useCallback } from "react"; +import { Box, BoxProps, HStack, Heading, Skeleton, Table, Tbody, Td, Th, Thead, Tr, Text, IconButton } from "@chakra-ui/react"; +import React, { useCallback, useState } from "react"; +import { UpdatePinStatus } from "./UpdatePinStatus"; export interface TableProps extends Omit { /** Table data */ @@ -39,6 +40,8 @@ const TableView = ({ [data, onClick], ); + const [show, setShow] = useState(true); + return ( {data === null || data.length === 0 ? ( @@ -65,9 +68,21 @@ const TableView = ({ {item[header.key]} - {header.key === 'status' ? : []} + {header.key === 'status' ? + } + colorScheme='black' + variant={'unstyled'} + onClick={() => setShow(!show)} + /> + : null} + + + {header.key === 'status' && show ? : null} + ))} diff --git a/frontend/src/components/UpdatePinStatus.tsx b/frontend/src/components/UpdatePinStatus.tsx new file mode 100644 index 00000000..0011aed7 --- /dev/null +++ b/frontend/src/components/UpdatePinStatus.tsx @@ -0,0 +1,51 @@ +import { useMutation } from "@apollo/client"; +import React from "react"; +import { gql } from "../__generated__/gql"; + + +export interface UpdatePinStatusProps { + item: Record + } + +const UpdatePinStatus = ({item }: UpdatePinStatusProps) => { + + const UPDATE_PIN_STATUS = gql(` + mutation updatePinStatus($barcode: String!, $status: PinStatus!) { + updateLibraryPinStatus(barcode: $barcode, status: $status) { + barcode + status + } + } + `); + + const [ + updateLibraryPinStatus, + { loading: mutationLoading, error: mutationError } + ] = useMutation(UPDATE_PIN_STATUS); + + let input; + + return ( +
+
{ + e.preventDefault(); + updateLibraryPinStatus({ variables: { barcode: item['barcode'], status: input.value } }); + + input.value = ""; + }} + > + { + input = node; + }} + /> + +
+ {mutationLoading &&

Loading...

} + {mutationError &&

Error :( Please try again

} +
+ ) +} + +export { UpdatePinStatus } \ No newline at end of file From 50b3615b6697ef46340afa96f1046135d1648b27 Mon Sep 17 00:00:00 2001 From: kaimsfd Date: Mon, 6 Nov 2023 12:39:22 +0000 Subject: [PATCH 8/8] created dropdown menu and refetched defualt query after mutation so that page updates instantly --- .devcontainer/docker-compose.yaml | 4 +- .gitignore | 3 - frontend/package.json | 8 +- frontend/src/App.tsx | 108 ++++++- frontend/src/components/DarkModeButton.tsx | 24 -- frontend/src/components/PaginationTable.tsx | 27 +- frontend/src/components/Table.tsx | 108 ------- frontend/src/components/UpdatePinStatus.tsx | 51 --- frontend/src/styles/colours.tsx | 20 -- frontend/src/styles/components.tsx | 325 -------------------- frontend/src/styles/theme.tsx | 49 --- frontend/yarn.lock | 234 ++++---------- 12 files changed, 189 insertions(+), 772 deletions(-) delete mode 100644 frontend/src/components/DarkModeButton.tsx delete mode 100644 frontend/src/components/Table.tsx delete mode 100644 frontend/src/components/UpdatePinStatus.tsx delete mode 100644 frontend/src/styles/colours.tsx delete mode 100644 frontend/src/styles/components.tsx delete mode 100644 frontend/src/styles/theme.tsx diff --git a/.devcontainer/docker-compose.yaml b/.devcontainer/docker-compose.yaml index 98fe18c4..79a156b1 100644 --- a/.devcontainer/docker-compose.yaml +++ b/.devcontainer/docker-compose.yaml @@ -7,13 +7,11 @@ services: dockerfile: Dockerfile.backend volumes: - ..:/workspace:z - command: cargo run --manifest-path /workspace/backend/Cargo.toml --release -p pin_packing serve --database-url postgres://postgres:password@postgres/pin_packing + command: sleep infinity environment: OPA_URL: http://opa:8181 DATABASE_URL: postgres://postgres:password@postgres RABBITMQ_URL: amqp://rabbitmq:password@rabbitmq - ports: - - "8080:80" frontend: image: docker.io/library/node:20.6.0-bookworm diff --git a/.gitignore b/.gitignore index 6ccbcb55..31281df2 100644 --- a/.gitignore +++ b/.gitignore @@ -3,6 +3,3 @@ # Developer Tooling .vscode - -# Generated Schema -pin_packing.graphql \ No newline at end of file diff --git a/frontend/package.json b/frontend/package.json index 7468b944..5ac80468 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -59,9 +59,7 @@ "build": "node scripts/build.js", "test": "node scripts/test.js", "format": "prettier --write **/*.js", - "eslint-lint": "node scripts/lint.js", - "compile": "graphql-codegen", - "watch": "graphql-codegen -w" + "eslint-lint": "node scripts/lint.js" }, "eslintConfig": { "extends": [ @@ -92,9 +90,7 @@ "graphql": "^16.3.0", "http-proxy-middleware": "^2.0.6", "react": "^18.2.0", - "react-dom": "^18.2.0", - "react-helmet": "^6.1.0", - "react-toggle-dark-mode": "^1.1.1" + "react-dom": "^18.2.0" }, "jest": { "roots": [ diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index d2be215a..23bc1588 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -1,10 +1,10 @@ -/* eslint-disable no-template-curly-in-string */ -import { useQuery } from "@apollo/client"; +import { useMutation, useQuery } from "@apollo/client"; import { gql } from './__generated__/gql'; import React from "react"; import { theme } from "@diamondlightsource/ui-components" -import { ChakraProvider, Alert, AlertIcon, AlertTitle, AlertDescription, Button, HStack } from "@chakra-ui/react"; +import { ChakraProvider, Alert, AlertIcon, AlertTitle, AlertDescription, Button, HStack, Select } from "@chakra-ui/react"; import { PaginationTable } from "./components/PaginationTable"; +import { PinStatus } from "./__generated__/graphql"; const GET_INFO = gql(` query pinInfo ($after: String) { @@ -27,6 +27,98 @@ query pinInfo ($after: String) { } `); +const UPDATE_PIN_STATUS = gql(` + mutation updatePinStatus($barcode: String!, $status: PinStatus!) { + updateLibraryPinStatus(barcode: $barcode, status: $status) { + barcode + status + } + } + `); + +const PIN_FRAGMENT = gql(` +fragment pin on LibraryPin { + barcode, + status +} +`) + + +const LIBRARY_PINS_FRAGMENT = gql(` +fragment pinPage on LibraryPinConnection { + edges { + cursor + node { + ...pin + loopSize, + } + } +} + +`) + +export interface UpdatePinStatusProps { + item: Record +} + +const UpdatePinStatus = ({item }: UpdatePinStatusProps) => { + + const [status, setStatus] = React.useState(item['status']); + + const handleStatusChange = (event) => { + setStatus(event.target.value); + }; + const [ + updateLibraryPinStatus, + { error: mutationError } + ] = useMutation(UPDATE_PIN_STATUS, { + + update(cache, {data: {updateLibraryPinStatus}}) { + + cache.writeFragment({ + fragment: PIN_FRAGMENT, + data: updateLibraryPinStatus, + fragmentName: "pin", + }); + + const libraryPins = cache.readFragment({ + id: "barcode", + fragment: LIBRARY_PINS_FRAGMENT, + fragmentName: 'pinPage' + }); + if (libraryPins) { + const newEdges = [...libraryPins.edges, updateLibraryPinStatus] + cache.writeFragment({ + id: "barcode", + fragment: LIBRARY_PINS_FRAGMENT, + fragmentName: 'pinPage', + data: { ...libraryPins, edges: newEdges } + }); + } + } + }) + + return ( +
+
{ + e.preventDefault(); + updateLibraryPinStatus({ variables: { barcode: item['barcode'], status: status } }); + + ; + }} + > + + +
+ {mutationError &&

Error :( Please try again

} +
+ ) + } + // Displays libraryPins query in table component. The table can load more data if required function DisplayPinInfo(): React.JSX.Element { const { loading, error, data, fetchMore } = useQuery( @@ -35,10 +127,7 @@ function DisplayPinInfo(): React.JSX.Element { notifyOnNetworkStatusChange: true, }); - const { toggleColorMode } = useColorMode() - var loadingRows = loading ? 2 : 0 - const bgColour = useColorModeValue('white', 'black') if (error) return ( @@ -104,7 +193,7 @@ function DisplayPinInfo(): React.JSX.Element { rowVariant={"diamondStriped"} /> - - - {mutationLoading &&

Loading...

} - {mutationError &&

Error :( Please try again

} - - ) -} - -export { UpdatePinStatus } \ No newline at end of file diff --git a/frontend/src/styles/colours.tsx b/frontend/src/styles/colours.tsx deleted file mode 100644 index f8c40280..00000000 --- a/frontend/src/styles/colours.tsx +++ /dev/null @@ -1,20 +0,0 @@ -const colours = { - diamond: { - 50: { default: "#FBFBFB", _dark: "#525151" }, - 75: "#F7F7F7", - 100: { default: "#E7ECEF", _dark: "#383838" }, - 200: { default: "#CBD5E0", _dark: "#030303" }, - 300: "#39435E", - 400: "#9BBBFA", - 500: "#fcd021", - 600: "#385BBD", - 700: "#1040A1", - 800: "#001d55" - }, - }; - - const fillColours = ["#ff5733", "#19D3FF", "#FF9B40", "#FF2677", "#FF9B40"]; - - const getFillColour = (j: number) => fillColours[j % fillColours.length]; - - export { colours, getFillColour }; \ No newline at end of file diff --git a/frontend/src/styles/components.tsx b/frontend/src/styles/components.tsx deleted file mode 100644 index 8f8cccf5..00000000 --- a/frontend/src/styles/components.tsx +++ /dev/null @@ -1,325 +0,0 @@ -import { - defineStyleConfig, - defineStyle, - createMultiStyleConfigHelpers, - UseToastOptions, - } from "@chakra-ui/react"; - import { - cardAnatomy, - tabsAnatomy, - inputAnatomy, - numberInputAnatomy, - selectAnatomy, - } from "@chakra-ui/anatomy"; - - const baseToast: UseToastOptions = { - id: "main-toast", - status: "success", - duration: 6000, - isClosable: true, - }; - - const baseInput = { - field: { - bg: "white", - border: "solid 1px", - borderColor: "diamond.200", - borderRadius: 0, - }, - }; - - const Accordion = defineStyleConfig({ - baseStyle: { - container: { - border: "1px solid var(--chakra-colors-diamond-100)", - }, - }, - }); - - const Text = defineStyleConfig({ - variants: { - infoGroupText: { - wordBreak: "break-all", - display: "inline", - fontSize: "xs", - }, - }, - }); - - const Checkbox = defineStyleConfig({ - sizes: { - sm: { - control: { - height: "16px", - width: "16px", - }, - icon: { - height: "16px", - fontSize: "10px", - }, - label: { - fontSize: "14px", - height: "16px", - }, - }, - }, - baseStyle: { - control: { - borderColor: "diamond.600", - backgroundColor: "#FFF", - _checked: { - backgroundColor: "diamond.600", - borderColor: "diamond.600", - }, - }, - }, - }); - - const Table = defineStyleConfig({ - variants: { - diamondStriped: { - tbody: { - tr: { - _odd: { - bg: "diamond.100", - }, - _even: { - bg: "diamond.50", - }, - _hover: { - bg: "diamond.200", - }, - - }, - } - } - }, - }); - - const CardHeader = defineStyleConfig({ - baseStyle: { - p: "10px !important", - h: "10%", - }, - }); - - const CardBody = defineStyleConfig({ - baseStyle: { - p: 2, - h: "90%", - }, - }); - - const { definePartsStyle, defineMultiStyleConfig } = createMultiStyleConfigHelpers( - cardAnatomy.keys, - ); - - const baseCardStyle = definePartsStyle({ - container: { - p: 1, - borderWidth: "1px", - borderRadius: "lg", - borderColor: "diamond.200", - _hover: { - borderColor: "diamond.400", - cursor: "pointer", - }, - _selected: { - bg: "diamond.100", - fontWeight: "600", - borderBottomWidth: "3px", - }, - }, - header: { - p: 2, - cursor: "pointer", - _hover: { - color: "diamond.300", - }, - }, - body: { - px: 2, - height: "90%", - }, - }); - - const Card = defineMultiStyleConfig({ - baseStyle: baseCardStyle, - defaultProps: { variant: "outline" }, - }); - - const Button = defineStyleConfig({ - defaultProps: { - variant: "default", - }, - baseStyle: { - borderBottom: "2px solid rgba(0,0,0,0.2)", - }, - variants: { - default: { - color: "diamond.50", - bg: "diamond.600", - _hover: { - bgImage: "linear-gradient(rgb(0 0 0/30%) 0 0)", - _disabled: { - bg: "diamond.600", - }, - }, - }, - pgSelected: { - bg: "diamond.600", - color: "diamond.50", - cursor: "default", - }, - pgNotSelected: { - bg: "gray.200", - color: "charcoal", - fontSize: "sm", - _hover: { - bg: "diamond.200", - }, - }, - onBlue: { - color: "diamond.500", - borderColor: "diamond.500", - border: "1px solid", - fontSize: "sm", - _hover: { - color: "diamond.300", - bg: "diamond.500", - }, - }, - }, - }); - - const notFound = defineStyle({ - textAlign: "center", - color: "diamond.300", - }); - - const Heading = defineStyleConfig({ - variants: { - collection: { - fontSize: 20, - py: "4px", - }, - notFound, - notFoundSubtitle: { - ...notFound, - fontWeight: 200, - fontSize: 20, - paddingBottom: 10, - }, - }, - }); - - const { definePartsStyle: defineInputStyle, defineMultiStyleConfig: defineInputConfig } = - createMultiStyleConfigHelpers(inputAnatomy.keys); - - const hiContrastInput = defineInputStyle({ - field: { - borderWidth: "1px", - borderColor: "diamond.800", - borderRadius: 0, - _invalid: { - borderColor: "red.500", - }, - }, - }); - - const baseInputStyle = defineInputStyle({ - ...baseInput, - addon: { - border: "solid 1px", - borderColor: "diamond.200", - background: "diamond.100", - }, - }); - - const Input = defineInputConfig({ - baseStyle: baseInputStyle, - variants: { "hi-contrast": hiContrastInput, default: baseInputStyle }, - defaultProps: { variant: "default" }, - }); - - const { defineMultiStyleConfig: defineNumberInputConfig } = createMultiStyleConfigHelpers( - numberInputAnatomy.keys, - ); - - const NumberInput = defineNumberInputConfig({ - defaultProps: { variant: "default" }, - variants: { default: baseInput }, - }); - - const { defineMultiStyleConfig: defineSelectConfig } = createMultiStyleConfigHelpers( - selectAnatomy.keys, - ); - - const Select = defineSelectConfig({ - defaultProps: { variant: "default" }, - variants: { default: baseInput, "hi-contrast": hiContrastInput }, - }); - - const { definePartsStyle: defineTabsStyle, defineMultiStyleConfig: defineTabsConfig } = - createMultiStyleConfigHelpers(tabsAnatomy.keys); - - const baseTabsStyle = defineTabsStyle({ - tab: { - border: "1px solid", - borderColor: "diamond.200", - bg: "diamond.75", - borderBottom: "none", - _selected: { - bg: "diamond.50", - color: "diamond.700", - borderColor: "inherit", - borderBottom: "none", - borderTopColor: "diamond.700", - mb: "-2px", - }, - }, - tablist: { - borderBottom: "none", - }, - tabpanel: { - p: "2", - bg: "diamond.50", - border: "1px solid", - borderColor: "inherit", - }, - }); - - const Tabs = defineTabsConfig({ - baseStyle: baseTabsStyle, - defaultProps: { variant: "none" }, - }); - - const Code = defineStyleConfig({ - baseStyle: { - backgroundColor: "diamond.100", - color: "diamond.800", - }, - }); - - const Textarea = defineStyleConfig({ - variants: { "hi-contrast": hiContrastInput.field }, - }); - - export { - Accordion, - Button, - Table, - Text, - Heading, - Card, - CardHeader, - CardBody, - Tabs, - baseToast, - Checkbox, - Code, - Input, - Textarea, - NumberInput, - Select, - }; \ No newline at end of file diff --git a/frontend/src/styles/theme.tsx b/frontend/src/styles/theme.tsx deleted file mode 100644 index 748731bb..00000000 --- a/frontend/src/styles/theme.tsx +++ /dev/null @@ -1,49 +0,0 @@ -import { ThemeConfig, extendTheme } from "@chakra-ui/react"; -import { colours } from "./colours"; -import { - Accordion, - Button, - Checkbox, - Heading, - Table, - Card, - Tabs, - Code, - Text, - Input, - Textarea, - NumberInput, - Select, -} from "./components"; - -const config: ThemeConfig = { - initialColorMode: 'light', - useSystemColorMode: false, -} - -export const theme = extendTheme({ - semanticTokens: { colors: colours }, - components: { - Accordion, - Checkbox, - Button, - Text, - Heading, - Table, - Card, - Tabs, - Code, - Input, - Textarea, - NumberInput, - Select, - }, - breakpoints: { - sm: "30em", - md: "48em", - lg: "62em", - xl: "80em", - "2xl": "150em", - }, - config -}); \ No newline at end of file diff --git a/frontend/yarn.lock b/frontend/yarn.lock index 42f38012..37e3af5e 100644 --- a/frontend/yarn.lock +++ b/frontend/yarn.lock @@ -85,15 +85,23 @@ "@babel/highlight" "^7.23.4" chalk "^2.4.2" +"@babel/code-frame@^7.23.5": + version "7.23.5" + resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.23.5.tgz#9009b69a8c602293476ad598ff53e4562e15c244" + integrity sha512-CgH3s1a96LipHCmSUmYFPwY7MNx8C3avkq7i4Wl3cfa662ldtUe4VM1TPXX70pfmrlWTb6jLqTYrZyT2ZTJBgA== + dependencies: + "@babel/highlight" "^7.23.4" + chalk "^2.4.2" + "@babel/compat-data@^7.20.5", "@babel/compat-data@^7.22.6", "@babel/compat-data@^7.22.9", "@babel/compat-data@^7.23.3": version "7.23.3" resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.23.3.tgz#3febd552541e62b5e883a25eb3effd7c7379db11" integrity sha512-BmR4bWbDIoFJmJ9z2cZ8Gmm2MXgEDgjdWgpKmKWUt54UGFJdlj31ECtbaDvCG/qVdG3AQ1SfpZEs01lUFbzLOQ== -"@babel/core@^7.11.1", "@babel/core@^7.11.6", "@babel/core@^7.12.3", "@babel/core@^7.14.0", "@babel/core@^7.16.0", "@babel/core@^7.21.3", "@babel/core@^7.22.9", "@babel/core@^7.23.5": - version "7.23.5" - resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.23.5.tgz#6e23f2acbcb77ad283c5ed141f824fd9f70101c7" - integrity sha512-Cwc2XjUrG4ilcfOw4wBAK+enbdgwAcAJCfGUItPBKR7Mjw4aEfAFYrLxeRp4jWgtNIKn3n2AlBOfwwafl+42/g== +"@babel/core@^7.11.1", "@babel/core@^7.11.6", "@babel/core@^7.12.3", "@babel/core@^7.16.0", "@babel/core@^7.21.3", "@babel/core@^7.23.3": + version "7.23.3" + resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.23.3.tgz#5ec09c8803b91f51cc887dedc2654a35852849c9" + integrity sha512-Jg+msLuNuCJDyBvFv5+OKOUjWMZgd85bKjbICd3zWrKAo+bJ49HJufi7CQE0q0uR8NGyO6xkCACScNqyjHSZew== dependencies: "@ampproject/remapping" "^2.2.0" "@babel/code-frame" "^7.23.5" @@ -151,6 +159,16 @@ "@jridgewell/trace-mapping" "^0.3.17" jsesc "^2.5.1" +"@babel/generator@^7.23.0", "@babel/generator@^7.23.5": + version "7.23.5" + resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.23.5.tgz#17d0a1ea6b62f351d281350a5f80b87a810c4755" + integrity sha512-BPssCHrBD+0YrxviOa3QzpqwhNIXKEtOa2jQrm4FlmkC2apYgRnQcmPWiGZDlGxiNtltnUFolMe8497Esry+jA== + dependencies: + "@babel/types" "^7.23.5" + "@jridgewell/gen-mapping" "^0.3.2" + "@jridgewell/trace-mapping" "^0.3.17" + jsesc "^2.5.1" + "@babel/helper-annotate-as-pure@^7.22.5": version "7.22.5" resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.22.5.tgz#e7f06737b197d580a01edf75d97e2c8be99d3882" @@ -245,7 +263,7 @@ dependencies: "@babel/types" "^7.22.15" -"@babel/helper-module-transforms@^7.23.3": +"@babel/helper-module-transforms@^7.23.0", "@babel/helper-module-transforms@^7.23.3": version "7.23.3" resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.23.3.tgz#d7d12c3c5d30af5b3c0fcab2a6d5217773e2d0f1" integrity sha512-7bBs4ED9OmswdfDzpz4MpWgSrV7FXlc3zIagvLFjS5H+Mk7Snr21vQ6QwrsoCGMfNC4e4LQPdoULEt4ykz0SRQ== @@ -354,6 +372,11 @@ resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.23.5.tgz#37dee97c4752af148e1d38c34b856b2507660563" integrity sha512-hOOqoiNXrmGdFbhgCzu6GiURxUgM27Xwd/aPuu8RfHEZPBzL1Z54okAHAQjXfcQNwvrlkAmAp4SlRTZ45vlthQ== +"@babel/parser@^7.23.0", "@babel/parser@^7.23.5": + version "7.23.5" + resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.23.5.tgz#37dee97c4752af148e1d38c34b856b2507660563" + integrity sha512-hOOqoiNXrmGdFbhgCzu6GiURxUgM27Xwd/aPuu8RfHEZPBzL1Z54okAHAQjXfcQNwvrlkAmAp4SlRTZ45vlthQ== + "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@^7.23.3": version "7.23.3" resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.23.3.tgz#5cd1c87ba9380d0afb78469292c954fee5d2411a" @@ -1221,7 +1244,32 @@ debug "^4.1.0" globals "^11.1.0" -"@babel/types@^7.0.0", "@babel/types@^7.16.8", "@babel/types@^7.18.13", "@babel/types@^7.20.7", "@babel/types@^7.21.3", "@babel/types@^7.22.15", "@babel/types@^7.22.19", "@babel/types@^7.22.5", "@babel/types@^7.23.0", "@babel/types@^7.23.4", "@babel/types@^7.23.5", "@babel/types@^7.3.3", "@babel/types@^7.4.4": +"@babel/traverse@^7.23.2": + version "7.23.5" + resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.23.5.tgz#f546bf9aba9ef2b042c0e00d245990c15508e7ec" + integrity sha512-czx7Xy5a6sapWWRx61m1Ke1Ra4vczu1mCTtJam5zRTBOonfdJ+S/B6HYmGYu3fJtr8GGET3si6IhgWVBhJ/m8w== + dependencies: + "@babel/code-frame" "^7.23.5" + "@babel/generator" "^7.23.5" + "@babel/helper-environment-visitor" "^7.22.20" + "@babel/helper-function-name" "^7.23.0" + "@babel/helper-hoist-variables" "^7.22.5" + "@babel/helper-split-export-declaration" "^7.22.6" + "@babel/parser" "^7.23.5" + "@babel/types" "^7.23.5" + debug "^4.1.0" + globals "^11.1.0" + +"@babel/types@^7.0.0", "@babel/types@^7.16.8", "@babel/types@^7.18.13", "@babel/types@^7.20.7", "@babel/types@^7.21.3", "@babel/types@^7.22.15", "@babel/types@^7.22.19", "@babel/types@^7.22.5", "@babel/types@^7.23.0", "@babel/types@^7.23.3", "@babel/types@^7.23.4", "@babel/types@^7.3.3", "@babel/types@^7.4.4": + version "7.23.4" + resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.23.4.tgz#7206a1810fc512a7f7f7d4dace4cb4c1c9dbfb8e" + integrity sha512-7uIFwVYpoplT5jp/kVv6EF93VaJ8H+Yn5IczYiaAi98ajzjfoZfslet/e0sLh+wVBjb2qqIut1b0S26VSafsSQ== + dependencies: + "@babel/helper-string-parser" "^7.23.4" + "@babel/helper-validator-identifier" "^7.22.20" + to-fast-properties "^2.0.0" + +"@babel/types@^7.23.5": version "7.23.5" resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.23.5.tgz#48d730a00c95109fa4393352705954d74fb5b602" integrity sha512-ON5kSOJwVO6xXVRTvOI0eOnWe7VdUcIpsovGo9U/Br4Ie4UVFQTboO2cYnDhAGU6Fp+UxSiT+pMft0SMHfuq6w== @@ -1433,6 +1481,13 @@ dependencies: "@chakra-ui/shared-utils" "2.0.5" +"@chakra-ui/icons@^2.1.1": + version "2.1.1" + resolved "https://registry.yarnpkg.com/@chakra-ui/icons/-/icons-2.1.1.tgz#58ff0f9e703f2f4f89debd600ce4e438f43f9c9a" + integrity sha512-3p30hdo4LlRZTT5CwoAJq3G9fHI0wDc0pBaMHj4SUn0yomO+RcDRlzhdXqdr5cVnzax44sqXJVnf3oQG0eI+4g== + dependencies: + "@chakra-ui/icon" "3.2.0" + "@chakra-ui/image@2.1.0": version "2.1.0" resolved "https://registry.yarnpkg.com/@chakra-ui/image/-/image-2.1.0.tgz#6c205f1ca148e3bf58345b0b5d4eb3d959eb9f87" @@ -2994,85 +3049,6 @@ resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.8.tgz#6b79032e760a0899cd4204710beede972a3a185f" integrity sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A== -"@react-spring/animated@~9.7.3": - version "9.7.3" - resolved "https://registry.yarnpkg.com/@react-spring/animated/-/animated-9.7.3.tgz#4211b1a6d48da0ff474a125e93c0f460ff816e0f" - integrity sha512-5CWeNJt9pNgyvuSzQH+uy2pvTg8Y4/OisoscZIR8/ZNLIOI+CatFBhGZpDGTF/OzdNFsAoGk3wiUYTwoJ0YIvw== - dependencies: - "@react-spring/shared" "~9.7.3" - "@react-spring/types" "~9.7.3" - -"@react-spring/core@~9.7.3": - version "9.7.3" - resolved "https://registry.yarnpkg.com/@react-spring/core/-/core-9.7.3.tgz#60056bcb397f2c4f371c6c9a5f882db77ae90095" - integrity sha512-IqFdPVf3ZOC1Cx7+M0cXf4odNLxDC+n7IN3MDcVCTIOSBfqEcBebSv+vlY5AhM0zw05PDbjKrNmBpzv/AqpjnQ== - dependencies: - "@react-spring/animated" "~9.7.3" - "@react-spring/shared" "~9.7.3" - "@react-spring/types" "~9.7.3" - -"@react-spring/konva@~9.7.3": - version "9.7.3" - resolved "https://registry.yarnpkg.com/@react-spring/konva/-/konva-9.7.3.tgz#16bd29dd4860a99e960a72987c8bcfc828b22119" - integrity sha512-R9sY6SiPGYqz1383P5qppg5z57YfChVknOC1UxxaGxpw+WiZa8fZ4zmZobslrw+os3/+HAXZv8O+EvU/nQpf7g== - dependencies: - "@react-spring/animated" "~9.7.3" - "@react-spring/core" "~9.7.3" - "@react-spring/shared" "~9.7.3" - "@react-spring/types" "~9.7.3" - -"@react-spring/native@~9.7.3": - version "9.7.3" - resolved "https://registry.yarnpkg.com/@react-spring/native/-/native-9.7.3.tgz#ee38d7c23482cfb4916c9b3c021de2995a4f553a" - integrity sha512-4mpxX3FuEBCUT6ae2fjhxcJW6bhr2FBwFf274eXB7n+U30Gdg8Wo2qYwcUnmiAA0S3dvP8vLTazx3+CYWFShnA== - dependencies: - "@react-spring/animated" "~9.7.3" - "@react-spring/core" "~9.7.3" - "@react-spring/shared" "~9.7.3" - "@react-spring/types" "~9.7.3" - -"@react-spring/shared@~9.7.3": - version "9.7.3" - resolved "https://registry.yarnpkg.com/@react-spring/shared/-/shared-9.7.3.tgz#4cf29797847c689912aec4e62e34c99a4d5d9e53" - integrity sha512-NEopD+9S5xYyQ0pGtioacLhL2luflh6HACSSDUZOwLHoxA5eku1UPuqcJqjwSD6luKjjLfiLOspxo43FUHKKSA== - dependencies: - "@react-spring/types" "~9.7.3" - -"@react-spring/three@~9.7.3": - version "9.7.3" - resolved "https://registry.yarnpkg.com/@react-spring/three/-/three-9.7.3.tgz#4358a0c4640efe2972c4f7d0f7cd4efe927471c1" - integrity sha512-Q1p512CqUlmMK8UMBF/Rj79qndhOWq4XUTayxMP9S892jiXzWQuj+xC3Xvm59DP/D4JXusXpxxqfgoH+hmOktA== - dependencies: - "@react-spring/animated" "~9.7.3" - "@react-spring/core" "~9.7.3" - "@react-spring/shared" "~9.7.3" - "@react-spring/types" "~9.7.3" - -"@react-spring/types@~9.7.3": - version "9.7.3" - resolved "https://registry.yarnpkg.com/@react-spring/types/-/types-9.7.3.tgz#ea78fd447cbc2612c1f5d55852e3c331e8172a0b" - integrity sha512-Kpx/fQ/ZFX31OtlqVEFfgaD1ACzul4NksrvIgYfIFq9JpDHFwQkMVZ10tbo0FU/grje4rcL4EIrjekl3kYwgWw== - -"@react-spring/web@~9.7.3": - version "9.7.3" - resolved "https://registry.yarnpkg.com/@react-spring/web/-/web-9.7.3.tgz#d9f4e17fec259f1d65495a19502ada4f5b57fa3d" - integrity sha512-BXt6BpS9aJL/QdVqEIX9YoUy8CE6TJrU0mNCqSoxdXlIeNcEBWOfIyE6B14ENNsyQKS3wOWkiJfco0tCr/9tUg== - dependencies: - "@react-spring/animated" "~9.7.3" - "@react-spring/core" "~9.7.3" - "@react-spring/shared" "~9.7.3" - "@react-spring/types" "~9.7.3" - -"@react-spring/zdog@~9.7.3": - version "9.7.3" - resolved "https://registry.yarnpkg.com/@react-spring/zdog/-/zdog-9.7.3.tgz#8ccc7316f6d3460ed244d9e3f60de9b4c4a848ac" - integrity sha512-L+yK/1PvNi9n8cldiJ309k4LdxcPkeWE0W18l1zrP1IBIyd5NB5EPA8DMsGr9gtNnnIujtEzZk+4JIOjT8u/tw== - dependencies: - "@react-spring/animated" "~9.7.3" - "@react-spring/core" "~9.7.3" - "@react-spring/shared" "~9.7.3" - "@react-spring/types" "~9.7.3" - "@repeaterjs/repeater@^3.0.4": version "3.0.5" resolved "https://registry.yarnpkg.com/@repeaterjs/repeater/-/repeater-3.0.5.tgz#b77571685410217a548a9c753aa3cdfc215bfc78" @@ -3566,11 +3542,6 @@ resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.15.tgz#596a1747233694d50f6ad8a7869fcb6f56cf5841" integrity sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA== -"@types/json-stable-stringify@^1.0.32": - version "1.0.36" - resolved "https://registry.yarnpkg.com/@types/json-stable-stringify/-/json-stable-stringify-1.0.36.tgz#fe6c6001a69ff8160a772da08779448a333c7ddd" - integrity sha512-b7bq23s4fgBB76n34m2b3RBf6M369B0Z9uRR8aHTMd8kZISRkmDEpPD8hhpYvDFzr3bJCPES96cm3Q6qRNDbQw== - "@types/json-stable-stringify@^1.0.32": version "1.0.35" resolved "https://registry.yarnpkg.com/@types/json-stable-stringify/-/json-stable-stringify-1.0.35.tgz#9cea8628b50a093ae00a7e73de49676f2f9ade27" @@ -4566,11 +4537,6 @@ astral-regex@^2.0.0: resolved "https://registry.yarnpkg.com/astral-regex/-/astral-regex-2.0.0.tgz#483143c567aeed4785759c0865786dc77d7d2e31" integrity sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ== -astral-regex@^2.0.0: - version "2.0.0" - resolved "https://registry.yarnpkg.com/astral-regex/-/astral-regex-2.0.0.tgz#483143c567aeed4785759c0865786dc77d7d2e31" - integrity sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ== - async@^3.2.3: version "3.2.5" resolved "https://registry.yarnpkg.com/async/-/async-3.2.5.tgz#ebd52a8fdaf7a2289a24df399f8d8485c8a46b66" @@ -5009,15 +4975,6 @@ capital-case@^1.0.4: tslib "^2.0.3" upper-case-first "^2.0.2" -capital-case@^1.0.4: - version "1.0.4" - resolved "https://registry.yarnpkg.com/capital-case/-/capital-case-1.0.4.tgz#9d130292353c9249f6b00fa5852bee38a717e669" - integrity sha512-ds37W8CytHgwnhGGTi88pcPyR15qoNkOpYwmMMfnWqqWgESapLqvDx6huFjQ5vqWSn2Z06173XNA7LtMOeUh1A== - dependencies: - no-case "^3.0.4" - tslib "^2.0.3" - upper-case-first "^2.0.2" - case-sensitive-paths-webpack-plugin@^2.4.0: version "2.4.0" resolved "https://registry.yarnpkg.com/case-sensitive-paths-webpack-plugin/-/case-sensitive-paths-webpack-plugin-2.4.0.tgz#db64066c6422eed2e08cc14b986ca43796dbc6d4" @@ -9877,7 +9834,7 @@ react-error-overlay@^6.0.11: resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.11.tgz#92835de5841c5cf08ba00ddd2d677b6d17ff9adb" integrity sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg== -react-fast-compare@3.2.2, react-fast-compare@^3.1.1: +react-fast-compare@3.2.2: version "3.2.2" resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.2.tgz#929a97a532304ce9fee4bcae44234f1ce2c21d49" integrity sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ== @@ -9894,16 +9851,6 @@ react-focus-lock@^2.9.4: use-callback-ref "^1.3.0" use-sidecar "^1.1.2" -react-helmet@^6.1.0: - version "6.1.0" - resolved "https://registry.yarnpkg.com/react-helmet/-/react-helmet-6.1.0.tgz#a750d5165cb13cf213e44747502652e794468726" - integrity sha512-4uMzEY9nlDlgxr61NL3XbKRy1hEkXmKNXhjbAIOVw5vcFrsdYbH2FEwcNyWvWinl103nXgzYNlns9ca+8kFiWw== - dependencies: - object-assign "^4.1.1" - prop-types "^15.7.2" - react-fast-compare "^3.1.1" - react-side-effect "^2.1.0" - react-icons@^4.11.0: version "4.12.0" resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-4.12.0.tgz#54806159a966961bfd5cdb26e492f4dafd6a8d78" @@ -9948,23 +9895,6 @@ react-remove-scroll@^2.5.6: use-callback-ref "^1.3.0" use-sidecar "^1.1.2" -react-side-effect@^2.1.0: - version "2.1.2" - resolved "https://registry.yarnpkg.com/react-side-effect/-/react-side-effect-2.1.2.tgz#dc6345b9e8f9906dc2eeb68700b615e0b4fe752a" - integrity sha512-PVjOcvVOyIILrYoyGEpDN3vmYNLdy1CajSFNt4TDsVQC5KpTijDvWVoR+/7Rz2xT978D8/ZtFceXxzsPwZEDvw== - -react-spring@^9.0.0-rc.3: - version "9.7.3" - resolved "https://registry.yarnpkg.com/react-spring/-/react-spring-9.7.3.tgz#3211dea4c4d7c5b541260af5100261b87becb5d5" - integrity sha512-oTxDpFV5gzq7jQX6+bU0SVq+vX8VnuuT5c8Zwn6CpDErOPvCmV+DRkPiEBtaL3Ozgzwiy5yFx83N0h303j/r3A== - dependencies: - "@react-spring/core" "~9.7.3" - "@react-spring/konva" "~9.7.3" - "@react-spring/native" "~9.7.3" - "@react-spring/three" "~9.7.3" - "@react-spring/web" "~9.7.3" - "@react-spring/zdog" "~9.7.3" - react-style-singleton@^2.2.1: version "2.2.1" resolved "https://registry.yarnpkg.com/react-style-singleton/-/react-style-singleton-2.2.1.tgz#f99e420492b2d8f34d38308ff660b60d0b1205b4" @@ -9974,13 +9904,6 @@ react-style-singleton@^2.2.1: invariant "^2.2.4" tslib "^2.0.0" -react-toggle-dark-mode@^1.1.1: - version "1.1.1" - resolved "https://registry.yarnpkg.com/react-toggle-dark-mode/-/react-toggle-dark-mode-1.1.1.tgz#ca738d4c7cd613f5091fe08e5c174d091ef5d2f3" - integrity sha512-25dH8tvQucpW9c024WQ6gXLxJ6Irc5iTFgAIKuwCUUfbbahyVd1OKEq5TqExzoPHoORIXlQKYXV/+fuyclr6FQ== - dependencies: - react-spring "^9.0.0-rc.3" - react-use-measure@^2.0.4: version "2.1.1" resolved "https://registry.yarnpkg.com/react-use-measure/-/react-use-measure-2.1.1.tgz#5824537f4ee01c9469c45d5f7a8446177c6cc4ba" @@ -10603,32 +10526,6 @@ snake-case@^3.0.4: dot-case "^3.0.4" tslib "^2.0.3" -slice-ansi@^3.0.0: - version "3.0.0" - resolved "https://registry.yarnpkg.com/slice-ansi/-/slice-ansi-3.0.0.tgz#31ddc10930a1b7e0b67b08c96c2f49b77a789787" - integrity sha512-pSyv7bSTC7ig9Dcgbw9AuRNUb5k5V6oDudjZoMBSr13qpLBG7tB+zgCkARjq7xIUgdz5P1Qe8u+rSGdouOOIyQ== - dependencies: - ansi-styles "^4.0.0" - astral-regex "^2.0.0" - is-fullwidth-code-point "^3.0.0" - -slice-ansi@^4.0.0: - version "4.0.0" - resolved "https://registry.yarnpkg.com/slice-ansi/-/slice-ansi-4.0.0.tgz#500e8dd0fd55b05815086255b3195adf2a45fe6b" - integrity sha512-qMCMfhY040cVHT43K9BFygqYbUPFZKHOg7K73mtTWJRb8pyP3fzf4Ixd5SzdEJQ6MRUg/WBnOLxghZtKKurENQ== - dependencies: - ansi-styles "^4.0.0" - astral-regex "^2.0.0" - is-fullwidth-code-point "^3.0.0" - -snake-case@^3.0.4: - version "3.0.4" - resolved "https://registry.yarnpkg.com/snake-case/-/snake-case-3.0.4.tgz#4f2bbd568e9935abdfd593f34c691dadb49c452c" - integrity sha512-LAOh4z89bGQvl9pFfNF8V146i7o7/CqFPbqzYgP+yYzDIDeS9HaNFtXABamRW+AQzEVODcvE79ljJ+8a9YSdMg== - dependencies: - dot-case "^3.0.4" - tslib "^2.0.3" - sockjs@^0.3.24: version "0.3.24" resolved "https://registry.yarnpkg.com/sockjs/-/sockjs-0.3.24.tgz#c9bc8995f33a111bea0395ec30aa3206bdb5ccce" @@ -11368,13 +11265,6 @@ unixify@^1.0.0: dependencies: normalize-path "^2.1.1" -unixify@^1.0.0: - version "1.0.0" - resolved "https://registry.yarnpkg.com/unixify/-/unixify-1.0.0.tgz#3a641c8c2ffbce4da683a5c70f03a462940c2090" - integrity sha512-6bc58dPYhCMHHuwxldQxO3RRNZ4eCogZ/st++0+fcC1nr0jiGUtAdBJ2qzmLQWSxbtz42pWt4QQMiZ9HvZf5cg== - dependencies: - normalize-path "^2.1.1" - unpipe@1.0.0, unpipe@~1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/unpipe/-/unpipe-1.0.0.tgz#b2bf4ee8514aae6165b4817829d21b2ef49904ec"