diff --git a/package.json b/package.json index be15300..f1f0622 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ "@tanstack/react-router": "^1.136.18", "@tanstack/react-router-devtools": "^1.136.18", "clsx": "^2.1.1", + "formik": "^2.4.9", "konva": "^10.0.11", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/src/features/output/components/BearerTypeCard.tsx b/src/features/output/components/BearerTypeCard.tsx new file mode 100644 index 0000000..23f9b51 --- /dev/null +++ b/src/features/output/components/BearerTypeCard.tsx @@ -0,0 +1,14 @@ +import Card from "../../../ui/Card"; +import CardHeader from "../../../ui/CardHeader"; +import BearerTypeFields from "./BearerTypeFields"; + +const BearerTypeCard = () => { + return ( + + + + + ); +}; + +export default BearerTypeCard; diff --git a/src/features/output/components/BearerTypeFields.tsx b/src/features/output/components/BearerTypeFields.tsx new file mode 100644 index 0000000..a4d0a31 --- /dev/null +++ b/src/features/output/components/BearerTypeFields.tsx @@ -0,0 +1,30 @@ +import { Field } from "formik"; + +const BearerTypeFields = () => { + return ( + <> + + + + + + + + + ); +}; + +export default BearerTypeFields; diff --git a/src/features/output/components/ChannelCard.tsx b/src/features/output/components/ChannelCard.tsx new file mode 100644 index 0000000..1468c4d --- /dev/null +++ b/src/features/output/components/ChannelCard.tsx @@ -0,0 +1,17 @@ +import { useFormikContext } from "formik"; +import Card from "../../../ui/Card"; +import CardHeader from "../../../ui/CardHeader"; +import ChannelFields from "./ChannelFields"; + +const ChannelCard = () => { + const { values } = useFormikContext(); + console.log(values); + return ( + + + + + ); +}; + +export default ChannelCard; diff --git a/src/features/output/components/ChannelFields.tsx b/src/features/output/components/ChannelFields.tsx new file mode 100644 index 0000000..88e9adc --- /dev/null +++ b/src/features/output/components/ChannelFields.tsx @@ -0,0 +1,67 @@ +import { Field } from "formik"; + +type ChannelFieldsProps = { + format: string; +}; + +const ChannelFields = ({ format }: ChannelFieldsProps) => { + return ( +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ ); +}; + +export default ChannelFields; diff --git a/src/features/output/components/Output.tsx b/src/features/output/components/Output.tsx new file mode 100644 index 0000000..ece7d10 --- /dev/null +++ b/src/features/output/components/Output.tsx @@ -0,0 +1,32 @@ +import { Formik, Form } from "formik"; +import BearerTypeCard from "./BearerTypeCard"; +import ChannelCard from "./ChannelCard"; + +const Output = () => { + const handleSubmit = (values) => { + console.log(values); + }; + + const inititalValues = { + format: "JSON", + enabled: true, + backOfficeURL: "", + username: "", + password: "", + connectTimeoutSeconds: Number(5), + readTimeoutSeconds: Number(15), + overviewQuality: "HIGH", + cropSizeFactor: "3/4", + }; + + return ( + +
+ + + +
+ ); +}; + +export default Output; diff --git a/src/routes/output.tsx b/src/routes/output.tsx index 430d04d..10b16e8 100644 --- a/src/routes/output.tsx +++ b/src/routes/output.tsx @@ -1,9 +1,14 @@ -import { createFileRoute } from '@tanstack/react-router' +import { createFileRoute } from "@tanstack/react-router"; +import Output from "../features/output/components/Output"; -export const Route = createFileRoute('/output')({ +export const Route = createFileRoute("/output")({ component: RouteComponent, -}) +}); function RouteComponent() { - return
Hello "/output"!
+ return ( +
+ +
+ ); } diff --git a/yarn.lock b/yarn.lock index b567169..ceebd90 100644 --- a/yarn.lock +++ b/yarn.lock @@ -994,6 +994,13 @@ resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.8.tgz#958b91c991b1867ced318bedea0e215ee050726e" integrity sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w== +"@types/hoist-non-react-statics@^3.3.1": + version "3.3.7" + resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.7.tgz#306e3a3a73828522efa1341159da4846e7573a6c" + integrity sha512-PQTyIulDkIDro8P+IHbKCsw7U2xxBYflVzW/FgWdCAePD9xGSidgA76/GeJ6lBKoblyhf9pBY763gbrN+1dI8g== + dependencies: + hoist-non-react-statics "^3.3.0" + "@types/json-schema@^7.0.15": version "7.0.15" resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.15.tgz#596a1747233694d50f6ad8a7869fcb6f56cf5841" @@ -1351,6 +1358,11 @@ deep-is@^0.1.3: resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.4.tgz#a6f2dce612fadd2ef1f519b73551f17e85199831" integrity sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ== +deepmerge@^2.1.1: + version "2.2.1" + resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-2.2.1.tgz#5d3ff22a01c00f645405a2fbc17d0778a1801170" + integrity sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA== + detect-libc@^2.0.3: version "2.1.2" resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-2.1.2.tgz#689c5dcdc1900ef5583a4cb9f6d7b473742074ad" @@ -1601,6 +1613,20 @@ flatted@^3.2.9: resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.3.3.tgz#67c8fad95454a7c7abebf74bb78ee74a44023358" integrity sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg== +formik@^2.4.9: + version "2.4.9" + resolved "https://registry.yarnpkg.com/formik/-/formik-2.4.9.tgz#7e5b81e9c9e215d0ce2ac8fed808cf7fba0cd204" + integrity sha512-5nI94BMnlFDdQRBY4Sz39WkhxajZJ57Fzs8wVbtsQlm5ScKIR1QLYqv/ultBnobObtlUyxpxoLodpixrsf36Og== + dependencies: + "@types/hoist-non-react-statics" "^3.3.1" + deepmerge "^2.1.1" + hoist-non-react-statics "^3.3.0" + lodash "^4.17.21" + lodash-es "^4.17.21" + react-fast-compare "^2.0.1" + tiny-warning "^1.0.2" + tslib "^2.0.0" + fraction.js@^5.3.4: version "5.3.4" resolved "https://registry.yarnpkg.com/fraction.js/-/fraction.js-5.3.4.tgz#8c0fcc6a9908262df4ed197427bdeef563e0699a" @@ -1679,6 +1705,13 @@ hermes-parser@^0.25.1: dependencies: hermes-estree "0.25.1" +hoist-non-react-statics@^3.3.0: + version "3.3.2" + resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45" + integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw== + dependencies: + react-is "^16.7.0" + ignore@^5.2.0: version "5.3.2" resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.3.2.tgz#3cd40e729f3643fd87cb04e50bf0eb722bc596f5" @@ -1886,11 +1919,21 @@ locate-path@^6.0.0: dependencies: p-locate "^5.0.0" +lodash-es@^4.17.21: + version "4.17.21" + resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.21.tgz#43e626c46e6591b7750beb2b50117390c609e3ee" + integrity sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw== + lodash.merge@^4.6.2: version "4.6.2" resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a" integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ== +lodash@^4.17.21: + version "4.17.21" + resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c" + integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg== + loose-envify@^1.4.0: version "1.4.0" resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf" @@ -2087,7 +2130,12 @@ react-dom@^19.2.0: dependencies: scheduler "^0.27.0" -react-is@^16.13.1: +react-fast-compare@^2.0.1: + version "2.0.4" + resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-2.0.4.tgz#e84b4d455b0fec113e0402c329352715196f81f9" + integrity sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw== + +react-is@^16.13.1, react-is@^16.7.0: version "16.13.1" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ== @@ -2287,7 +2335,7 @@ tiny-invariant@^1.3.3: resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.3.3.tgz#46680b7a873a0d5d10005995eb90a70d74d60127" integrity sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg== -tiny-warning@^1.0.3: +tiny-warning@^1.0.2, tiny-warning@^1.0.3: version "1.0.3" resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754" integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA== @@ -2312,7 +2360,7 @@ ts-api-utils@^2.1.0: resolved "https://registry.yarnpkg.com/ts-api-utils/-/ts-api-utils-2.1.0.tgz#595f7094e46eed364c13fd23e75f9513d29baf91" integrity sha512-CUgTZL1irw8u29bzrOD/nH85jqyc74D6SshFgujOIA7osm2Rz7dYH77agkx7H4FBNxDq7Cjf+IjaX/8zwFW+ZQ== -tslib@^2.0.1, tslib@^2.4.0: +tslib@^2.0.0, tslib@^2.0.1, tslib@^2.4.0: version "2.8.1" resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.8.1.tgz#612efe4ed235d567e8aba5f2a5fab70280ade83f" integrity sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==