chore(uix) - update package version and code (#239)

Author: mahaveer0496

uix-basic-input/package.json

@@ -8,7 +8,7 @@
     "start": "next start"
   },
   "dependencies": {
-    "@graphcms/uix-react-sdk": "0.0.19",
+    "@graphcms/uix-react-sdk": "^0.2.5",
     "next": "10.2.3",
     "react": "17.0.2",
     "react-dom": "17.0.2"

uix-basic-input/pages/index.js

@@ -1,38 +1,28 @@
+// @ts-check
 import {
   Wrapper,
-  useUiExtension,
   FieldExtensionType,
   FieldExtensionFeature,
+  useFieldExtension,
+  ExtensionType,
 } from '@graphcms/uix-react-sdk';
-import { useRouter } from 'next/router';
 
 function MyField() {
-  const { value, onChange } = useUiExtension();
-
-  return (
-    <input
-      value={value}
-      onChange={({ target: { value: val } }) => onChange(val)}
-    />
-  );
+  const { value, onChange } = useFieldExtension();
+  return <input value={value} onChange={(e) => onChange(e.target.value)} />;
 }
 
-export default function MyCustomInputExtensionPage() {
-  const router = useRouter();
-
-  const { extensionUid } = router.query;
-
-  if (!extensionUid) return null;
-
-  const declaration = {
-    extensionType: 'field',
-    fieldType: FieldExtensionType.STRING,
-    name: 'My custom field',
-    features: [FieldExtensionFeature.FieldRenderer],
-  };
+/** @type {import('@graphcms/uix-react-sdk').FieldExtensionDeclaration} */
+const declaration = {
+  extensionType: ExtensionType.field,
+  fieldType: FieldExtensionType.STRING,
+  name: 'My custom field',
+  features: [FieldExtensionFeature.FieldRenderer],
+};
 
+export default function MyCustomInputExtensionPage() {
   return (
-    <Wrapper uid={extensionUid} declaration={declaration}>
+    <Wrapper declaration={declaration}>
       <MyField />
     </Wrapper>
   );