feat: update TextField props and remove props that have default (#164)

Because - Design system is under refactoring of input field's default value - Once a prop has default value, we could remove it when use the component if there is no need to change that - https://github.com/instill-ai/design-system/issues/27 This commit - Update TextField TextField props
instill-ai · Jul 14, 2022 · 7d2a8b6 · 7d2a8b6
1 parent 3c49122
commit 7d2a8b6
Show file tree

Hide file tree

Showing 12 changed files with 8 additions and 127 deletions.
diff --git a/package.json b/package.json
@@ -23,7 +23,7 @@
   },
   "dependencies": {
     "@amplitude/analytics-browser": "^0.4.1",
-    "@instill-ai/design-system": "^0.0.88",
+    "@instill-ai/design-system": "^0.0.89",
     "@types/json-schema": "^7.0.11",
     "axios": "^0.27.2",
     "clsx": "^1.1.1",

diff --git a/src/components/formik/FormikField/TextField/TextField.tsx b/src/components/formik/FormikField/TextField/TextField.tsx
@@ -5,7 +5,7 @@ import { FC } from "react";
 
 export type TextFieldProps = Omit<BasicTextFieldProps, "onChangeInput"> & {
   name: string;
-  additionalOnChangeCb: Nullable<(value: string) => void>;
+  additionalOnChangeCb?: Nullable<(value: string) => void>;
 };
 
 const TextField: FC<TextFieldProps & FieldProps> = ({

diff --git a/src/components/forms/connector/destination/CreateDestinationForm/CreateDestinationForm.tsx b/src/components/forms/connector/destination/CreateDestinationForm/CreateDestinationForm.tsx
@@ -287,14 +287,8 @@ const CreateDestinationForm: FC<CreateDestinationFormProps> = ({
           id="id"
           label="ID"
           key="id"
-          additionalMessageOnLabel={null}
           description="Pick a name to help you identify this destination in Instill"
-          disabled={false}
-          readOnly={false}
           required={true}
-          placeholder=""
-          type="text"
-          autoComplete="off"
           value={fieldValues ? (fieldValues.id as string) ?? null : null}
           error={fieldErrors ? (fieldErrors.id as string) ?? null : null}
           onChangeInput={(id, value) => updateFieldValues(id, value)}

diff --git a/src/components/forms/mgmt/OnboardingForm/OnboardingForm.tsx b/src/components/forms/mgmt/OnboardingForm/OnboardingForm.tsx
@@ -157,34 +157,18 @@ const OnboardingForm: FC<OnBoardingFormProps> = ({ user }) => {
                 id="email"
                 name="email"
                 label="Your email"
-                additionalMessageOnLabel={null}
-                value={formik.values.email || ""}
-                additionalOnChangeCb={null}
                 description="Fill your email address"
-                disabled={false}
-                readOnly={false}
-                required={false}
-                placeholder=""
-                type="email"
-                autoComplete="on"
+                value={formik.values.email || ""}
                 error={formik.errors.email || null}
               />
               <TextField
                 id="companyName"
                 name="companyName"
                 label="Your company"
-                additionalMessageOnLabel={null}
+                description="Fill your company name"
                 value={
                   formik.values.companyName ? formik.values.companyName : ""
                 }
-                additionalOnChangeCb={null}
-                description="Fill your company name"
-                disabled={false}
-                readOnly={false}
-                required={false}
-                placeholder=""
-                type="text"
-                autoComplete="off"
                 error={formik.errors.companyName || null}
               />
               <SingleSelect

diff --git a/src/components/forms/model/ConfigureModelInstanceForm/ConfigureModelInstanceForm.tsx b/src/components/forms/model/ConfigureModelInstanceForm/ConfigureModelInstanceForm.tsx
@@ -60,16 +60,10 @@ const ConfigureModelInstanceForm: FC<ConfigureModelInstanceFormProps> = ({
               <BasicTextField
                 id="modelRepo"
                 label="GitHub repository"
-                additionalMessageOnLabel={null}
                 description="The name of a public GitHub repository, e.g. `instill-ai/yolov4`."
                 value={modelInstance.configuration.repository}
-                error={null}
                 disabled={true}
-                readOnly={false}
                 required={true}
-                placeholder=""
-                type="text"
-                autoComplete="off"
                 onChangeInput={handler}
               />
             </>
@@ -79,31 +73,19 @@ const ConfigureModelInstanceForm: FC<ConfigureModelInstanceFormProps> = ({
               <BasicTextField
                 id="tag"
                 label="ArtiVC version"
-                additionalMessageOnLabel={null}
                 description="Tag of the ArtiVC, e.g., `v0.1.0`."
                 value={modelInstance.configuration.tag}
-                error={null}
                 disabled={true}
-                readOnly={false}
                 required={true}
-                placeholder=""
-                type="text"
-                autoComplete="off"
                 onChangeInput={handler}
               />
               <BasicTextField
                 id="url"
                 label="Cloud storage url"
-                additionalMessageOnLabel={null}
                 description="the cloud storage url, e.g. `gs://public-europe-west2-c-artifacts/vdp/public-models/yolov4`."
                 value={modelInstance.configuration.url}
-                error={null}
                 disabled={true}
-                readOnly={false}
                 required={true}
-                placeholder=""
-                type="text"
-                autoComplete="off"
                 onChangeInput={handler}
               />
             </>

diff --git a/src/components/forms/model/CreateModelForm/CreateModelForm.tsx b/src/components/forms/model/CreateModelForm/CreateModelForm.tsx
@@ -490,17 +490,11 @@ const CreateNewModelFlow: FC = () => {
               id="modelId"
               name="id"
               label="ID"
-              additionalMessageOnLabel={null}
               description="Pick a name to help you identify this source in Instill"
               value={values.id}
               error={errors.id || null}
-              additionalOnChangeCb={null}
               disabled={modelCreated ? true : false}
-              readOnly={false}
               required={true}
-              placeholder=""
-              type="text"
-              autoComplete="off"
             />
             <SingleSelect
               name="modelDefinition"
@@ -529,17 +523,11 @@ const CreateNewModelFlow: FC = () => {
                   id="modelRepo"
                   name="repo"
                   label="GitHub repository"
-                  additionalMessageOnLabel={null}
                   description="The name of a public GitHub repository, e.g. `instill-ai/yolov4`."
                   value={values.repo}
                   error={errors.repo || null}
-                  additionalOnChangeCb={null}
                   disabled={modelCreated ? true : false}
-                  readOnly={false}
                   required={true}
-                  placeholder=""
-                  type="text"
-                  autoComplete="off"
                 />
               </>
             ) : null}
@@ -585,17 +573,10 @@ const CreateNewModelFlow: FC = () => {
                   id="gcsBucketPath"
                   name="gcsBucketPath"
                   label="GCS Bucket Path"
-                  additionalMessageOnLabel={null}
                   description="The bucket path string of Google Cloud Storage (GCS), e.g. `gs://mybucket/path/to/mymodel/`."
                   value={values.gcsBucketPath}
                   error={errors.gcsBucketPath || null}
-                  additionalOnChangeCb={null}
-                  disabled={false}
-                  readOnly={false}
                   required={true}
-                  placeholder=""
-                  type="text"
-                  autoComplete="off"
                 />
                 <TextArea
                   id="credentials"
@@ -624,17 +605,11 @@ const CreateNewModelFlow: FC = () => {
                   id="huggingFaceRepo"
                   name="huggingFaceRepo"
                   label="HuggingFace model ID"
-                  additionalMessageOnLabel={null}
                   description="The name of a public HuggingFace model ID, e.g. `google/vit-base-patch16-224`."
                   value={values.huggingFaceRepo}
                   error={errors.huggingFaceRepo || null}
-                  additionalOnChangeCb={null}
                   disabled={modelCreated ? true : false}
-                  readOnly={false}
                   required={true}
-                  placeholder=""
-                  type="text"
-                  autoComplete="off"
                 />
               </>
             ) : null}

diff --git a/...nents/forms/pipeline/CreatePipelineForm/SetupDestinationStep/CreateNewDestinationFlow.tsx b/...nents/forms/pipeline/CreatePipelineForm/SetupDestinationStep/CreateNewDestinationFlow.tsx
@@ -128,17 +128,10 @@ const CreateNewDestinationFlow: FC<CreateNewDestinationFlowProps> = ({
         id="destinationId"
         name="destination.new.id"
         label="ID"
-        additionalMessageOnLabel={null}
         description="Pick a name to help you identify this source in Instill"
         value={values.destination.new.id}
         error={errors.destination?.new?.id || null}
-        additionalOnChangeCb={null}
-        disabled={false}
-        readOnly={false}
         required={true}
-        placeholder=""
-        type="text"
-        autoComplete="off"
       />
       <SingleSelect
         id="destinationDefinition"

diff --git a/...omponents/forms/pipeline/CreatePipelineForm/SetupModelStep/CreateNewModelInstanceFlow.tsx b/...omponents/forms/pipeline/CreatePipelineForm/SetupModelStep/CreateNewModelInstanceFlow.tsx
@@ -487,17 +487,11 @@ const CreateNewModelInstanceFlow: FC<CreateNewModelInstanceFlowProps> = ({
         id="modelId"
         name="model.new.id"
         label="ID"
-        additionalMessageOnLabel={null}
         description="Pick a name to help you identify this source in Instill"
         value={values.model.new.id}
         error={errors.model?.new?.id || null}
-        additionalOnChangeCb={null}
         disabled={modelCreated ? true : false}
-        readOnly={false}
         required={true}
-        placeholder=""
-        type="text"
-        autoComplete="off"
       />
       <SingleSelect
         id="modelDefinition"
@@ -525,17 +519,11 @@ const CreateNewModelInstanceFlow: FC<CreateNewModelInstanceFlowProps> = ({
             id="modelRepo"
             name="model.new.repo"
             label="GitHub repository"
-            additionalMessageOnLabel={null}
             description="The name of a public GitHub repository, e.g. `instill-ai/yolov4`."
             value={values.model.new.repo}
             error={errors.model?.new?.repo || null}
-            additionalOnChangeCb={null}
             disabled={modelCreated ? true : false}
-            readOnly={false}
             required={true}
-            placeholder=""
-            type="text"
-            autoComplete="off"
           />
         </>
       ) : null}
@@ -579,17 +567,10 @@ const CreateNewModelInstanceFlow: FC<CreateNewModelInstanceFlowProps> = ({
             id="gcsBucketPath"
             name="model.new.gcsBucketPath"
             label="GCS Bucket Path"
-            additionalMessageOnLabel={null}
             description="The bucket path string of Google Cloud Storage (GCS), e.g. `gs://mybucket/path/to/mymodel/`."
             value={values.model.new.gcsBucketPath}
             error={errors.model?.new?.gcsBucketPath || null}
-            additionalOnChangeCb={null}
-            disabled={false}
-            readOnly={false}
             required={true}
-            placeholder=""
-            type="text"
-            autoComplete="off"
           />
           <TextArea
             id="credentials"
@@ -615,17 +596,11 @@ const CreateNewModelInstanceFlow: FC<CreateNewModelInstanceFlowProps> = ({
             id="huggingFaceRepo"
             name="model.new.huggingFaceRepo"
             label="HuggingFace model ID"
-            additionalMessageOnLabel={null}
             description="The name of a public HuggingFace model ID, e.g. `google/vit-base-patch16-224`."
             value={values.model.new.huggingFaceRepo}
             error={errors.model?.new?.huggingFaceRepo || null}
-            additionalOnChangeCb={null}
             disabled={modelCreated ? true : false}
-            readOnly={false}
             required={true}
-            placeholder=""
-            type="text"
-            autoComplete="off"
           />
           <TextArea
             id="description"

diff --git a/...s/forms/pipeline/CreatePipelineForm/SetupPipelineDetailsStep/SetupPipelineDetailsStep.tsx b/...s/forms/pipeline/CreatePipelineForm/SetupPipelineDetailsStep/SetupPipelineDetailsStep.tsx
@@ -256,17 +256,10 @@ const SetupPipelineDetailsStep: FC = () => {
           id="pipelineId"
           name="pipeline.id"
           label="ID"
-          additionalMessageOnLabel={null}
           description="Pick a name to help you identify this source in Instill"
           value={values.pipeline.id}
           error={errors.pipeline?.id || null}
-          additionalOnChangeCb={null}
-          disabled={false}
-          readOnly={false}
           required={true}
-          placeholder=""
-          type="text"
-          autoComplete="off"
         />
         <TextArea
           id="pipelineDescription"

diff --git a/src/components/forms/pipeline/CreatePipelineForm/SetupSourceStep/CreateNewSourceFlow.tsx b/src/components/forms/pipeline/CreatePipelineForm/SetupSourceStep/CreateNewSourceFlow.tsx
@@ -106,17 +106,10 @@ const CreateNewSourceFlow: FC<CreateNewSourceFlowProps> = ({
         id="sourceId"
         name="source.new.id"
         label="ID"
-        additionalMessageOnLabel={null}
         description="Pick a name to help you identify this source in Instill"
         value={values.source.new.id}
         error={errors.source?.new?.id || null}
-        additionalOnChangeCb={null}
-        disabled={false}
-        readOnly={false}
         required={true}
-        placeholder=""
-        type="text"
-        autoComplete="off"
       />
       <SingleSelect
         id="sourceDefinition"

diff --git a/src/components/modals/DeleteResourceModal/DeleteResourceModal.tsx b/src/components/modals/DeleteResourceModal/DeleteResourceModal.tsx
@@ -140,16 +140,8 @@ const DeleteResourceModal: FC<DeleteResourceModalProps> = ({
           id="confirmationCode"
           type="text"
           label={`Please type "${resource ? resource.id : ""}" to confirm.`}
-          additionalMessageOnLabel={null}
           onChangeInput={handleCodeChange}
           value={confirmationCode}
-          autoComplete="off"
-          placeholder={""}
-          error={null}
-          disabled={false}
-          readOnly={false}
-          required={false}
-          description=""
         />
         <div className="grid grid-cols-2 gap-x-5">
           <OutlineButton

diff --git a/yarn.lock b/yarn.lock
@@ -1742,10 +1742,10 @@
   resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz#b520529ec21d8e5945a1851dfd1c32e94e39ff45"
   integrity sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==
 
-"@instill-ai/design-system@^0.0.88":
-  version "0.0.88"
-  resolved "https://registry.yarnpkg.com/@instill-ai/design-system/-/design-system-0.0.88.tgz#596b49c24d071e763c2d7ea46f35200a0db35ad9"
-  integrity sha512-yqLQ4YDhxogU38Fo8GXiA4s4+VNj4RV9Zy0o91h3MziX92oVvT/p61+Ju399GnoJt9W+jOh+CrKdQhGffOqOhg==
+"@instill-ai/design-system@^0.0.89":
+  version "0.0.89"
+  resolved "https://registry.yarnpkg.com/@instill-ai/design-system/-/design-system-0.0.89.tgz#652d3b8775a7055830ebe6ef4ee1de459792166a"
+  integrity sha512-EybyZoJ5Z4xO8I52FYNxktNI/4nNVp+EDlLfePVMddnGObuh0FBkaU61uNS96YU5mzkVsKbwpVBoDt+F7A4ATQ==
   dependencies:
     sanitize-html "^2.7.0"