update input component and add types

XanderD99 · Sep 20, 2024 · bf84761 · bf84761
1 parent f4713f5
commit bf84761
Show file tree

Hide file tree

Showing 5 changed files with 96 additions and 62 deletions.
diff --git a/admin/src/components/PluginIcon.tsx b/admin/src/components/PluginIcon.tsx
@@ -1,5 +1,3 @@
-import { PuzzlePiece } from '@strapi/icons';
-
 const PluginIcon = () => {
   return (
     <svg

diff --git a/admin/src/components/SnowflakeField.tsx b/admin/src/components/SnowflakeField.tsx
@@ -1,61 +1,93 @@
-import { useRef } from 'react'
+import * as React from "react";
 import { useIntl } from 'react-intl'
 
-import { Box, Field, Flex } from '@strapi/design-system';
-
-const Input = ({
-  description,
-  placeholder,
-  disabled,
-  error,
-  intlLabel,
-  labelAction,
-  name,
-  onChange,
-  value: initialValue = "",
-  ...props
-}: {
-  description: any
-  placeholder: string
-  disabled: boolean
-  error: boolean
-  intlLabel: any
-  labelAction: string
-  name: string
-  onChange(v: any): void
-  value: string
-}) => {
+import { Field, Flex } from '@strapi/design-system';
+import { Box } from "@strapi/design-system";
+import { FieldValue, InputProps } from "@strapi/strapi/admin";
+
+
+type Props = InputProps & FieldValue;
+
+const Input = React.forwardRef<HTMLButtonElement, Props>((props, _ref) => {
   const { formatMessage } = useIntl()
-  const ref = useRef("")
+
+  const { name, value, error, hint, labelAction, label } = props;
+  console.log(props)
 
   return (
-    <Box>
-      <Field
-        id={name}
-        name={name}
-        hint={description && formatMessage(description)}
-        error={error}
-      >
-        <Flex spacing={1}>
-          <Flex>
-            <Field.Label>{formatMessage(intlLabel)}</Field.Label>
-          </Flex>
-          <Field.Input
-            onChange={onChange}
-            labelAction={labelAction}
-            placeholder={placeholder}
-            disabled={true}
-            required
-            value={initialValue}
-            ref={ref}
-            readOnly
-          />
-          <Field.Hint />
-          <Field.Error />
-        </Flex>
-      </Field>
-    </Box>
+    <Field.Root name={name} id={name} error={error} hint={hint} required={true}>
+      <Flex direction="column" alignItems="stretch" gap={1}>
+        <Field.Label action={labelAction}>{label}</Field.Label>
+
+        <Field.Input
+          value={value}
+          placeholder={label}
+          readOnly
+          disabled
+          required
+        />
+      </Flex>
+    </Field.Root>
   )
-}
+});
+
+export default Input;
+
+
+
+// const Input = ({
+//   description,
+//   placeholder,
+//   disabled,
+//   error,
+//   intlLabel,
+//   labelAction,
+//   name,
+//   onChange,
+//   value: initialValue = "",
+//   ...props
+// }: {
+//   description: any
+//   placeholder: string
+//   disabled: boolean
+//   error: boolean
+//   intlLabel: any
+//   labelAction: string
+//   name: string
+//   onChange(v: any): void
+//   value: string
+// }) => {
+//   const { formatMessage } = useIntl()
+//   const ref = React.useRef("")
+
+//   return (
+//     <Box>
+//       <Field
+//         id={name}
+//         name={name}
+//         hint={description}
+//         error={error}
+//       >
+//         <Flex spacing={1}>
+//           <Flex>
+//             <Field.Label>{formatMessage(intlLabel)}</Field.Label>
+//           </Flex>
+//           <Field.Input
+//             onChange={onChange}
+//             labelAction={labelAction}
+//             placeholder={placeholder}
+//             disabled={true}
+//             required
+//             value={initialValue}
+//             ref={ref}
+//             readOnly
+//           />
+//           <Field.Hint />
+//           <Field.Error />
+//         </Flex>
+//       </Field>
+//     </Box>
+//   )
+// }
 
-export default Input
+// export default Input
diff --git a/admin/src/index.ts b/admin/src/index.ts
@@ -8,13 +8,13 @@ export default {
     app.customFields.register({
       name: 'snowflake',
       pluginId: PLUGIN_ID,
-      type: "string",
+      type: "uid",
       intlLabel: {
-        id: getTranslation("form.label"),
+        id: getTranslation("label"),
         defaultMessage: "snowflake",
       },
       intlDescription: {
-        id: getTranslation("form.description"),
+        id: getTranslation("description"),
         defaultMessage: "Generates a unique snowflake",
       },
       icon: PluginIcon,

diff --git a/changelog.md b/changelog.md
@@ -7,7 +7,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
-## [0.0.2] - 2024-09-13
+### Changed
+
+- update to strapi v5 format
+
+## [1.0.0] - 2024-09-13
 
 ### Added
 

diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
   "name": "strapi-plugin-snowflake",
   "version": "2.0.0",
   "description": "",
-  "keywords": ["strapi"],
+  "keywords": ["strapi", "snowflake"],
   "license": "MIT",
   "author": {
       "name": "XanderD",
@@ -78,7 +78,7 @@
   },
   "strapi": {
     "name": "snowflake",
-    "description": "Description of strapi-auto-snowflake plugin",
+    "description": "A plugin that allows users to use snowflake IDs",
     "kind": "plugin"
   }
 }