@workday/canvas-kit-docs 7.3.15 → 7.3.16

package/dist/mdx/preview-react/_examples/SelectWithFormik.mdx

@@ -3,6 +3,6 @@ import SelectWithFormik from './examples/SelectWithFormik';
 
 # Canvas Kit Examples
 
-## Select With Formik
+## Select Using Formik
 
 <ExampleCodeBlock code={SelectWithFormik} />

package/dist/mdx/preview-react/_examples/TextInputWithFormik.mdx

@@ -3,6 +3,6 @@ import TextInputWithFormik from './examples/TextInputWithFormik';
 
 # Canvas Kit Examples
 
-## Text Input With Formik
+## Controlled Text Inputs Using Formik
 
 <ExampleCodeBlock code={TextInputWithFormik} />

package/dist/mdx/preview-react/_examples/TextInputWithReactHookForm.mdx

@@ -0,0 +1,8 @@
+import TextInputWithReactHookForm from './examples/TextInputWithReactHookForm';
+
+
+# Canvas Kit Examples
+
+## Uncontrolled Text Inputs Using React Hook Form
+
+<ExampleCodeBlock code={TextInputWithReactHookForm} />

package/dist/mdx/preview-react/_examples/examples/SelectWithFormik.tsx

@@ -6,14 +6,19 @@ import {
   useFormFieldInput,
   useFormFieldModel,
 } from '@workday/canvas-kit-preview-react/form-field';
+import {VStack} from '@workday/canvas-kit-react/layout';
+import {PrimaryButton} from '@workday/canvas-kit-react/button';
 
 export default () => {
   const formik = useFormik({
     initialValues: {
       selectedBook: '',
     },
-    onSubmit: data => {
-      console.log(data);
+    onSubmit: values => {
+      // Send data to server
+      setTimeout(() => {
+        alert(JSON.stringify(values, null, 2));
+      }, 0);
     },
   });
 
@@ -21,18 +26,21 @@ export default () => {
   const formFieldInputProps = useFormFieldInput(model);
 
   return (
-    <form onSubmit={formik.handleSubmit}>
-      <FormField orientation="vertical" alignItems="stretch">
-        <FormField.Label>Choose a book</FormField.Label>
-        <Select
-          name="selectedBook"
-          options={bookList}
-          onChange={event => formik.setFieldValue('selectedBook', event.currentTarget.value)}
-          value={formik.values.selectedBook}
-          grow
-          {...formFieldInputProps}
-        />
-      </FormField>
+    <form onSubmit={formik.handleSubmit} action=".">
+      <VStack spacing="xs" alignItems="flex-start">
+        <FormField orientation="vertical" alignSelf="stretch" alignItems="normal">
+          <FormField.Label>Choose a book</FormField.Label>
+          <Select
+            name="selectedBook"
+            options={bookList}
+            onChange={event => formik.setFieldValue('selectedBook', event.currentTarget.value)}
+            value={formik.values.selectedBook}
+            grow
+            {...formFieldInputProps}
+          />
+        </FormField>
+        <PrimaryButton type="submit">Submit</PrimaryButton>
+      </VStack>
     </form>
   );
 };

package/dist/mdx/preview-react/_examples/examples/TextInputWithFormik.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import {useFormik} from 'formik';
-import * as yup from 'yup';
+import {object, SchemaOf, string} from 'yup';
 
 import {TextInput} from '@workday/canvas-kit-preview-react/text-input';
 import {HStack, VStack} from '@workday/canvas-kit-react/layout';
@@ -9,23 +9,26 @@ import {TertiaryButton, PrimaryButton} from '@workday/canvas-kit-react/button';
 import {visibleIcon, invisibleIcon} from '@workday/canvas-system-icons-web';
 import {useUniqueId} from '@workday/canvas-kit-react/common';
 
-export default () => {
-  const passwordMinimum = 8;
-  const passwordHint = `Password should be of minimum ${passwordMinimum} characters length`;
-  const emailRequired = 'Email is required';
-  const passwordRequired = 'Password is required';
+interface LoginSchema {
+  email: string;
+  password: string;
+}
 
-  const validationSchema = yup.object({
-    email: yup
-      .string()
-      .email('Enter a valid email')
-      .required(emailRequired),
-    password: yup
-      .string()
-      .min(passwordMinimum, passwordHint)
-      .required(passwordRequired),
-  });
+const passwordMinimum = 8;
+const passwordHint = `Password should be of minimum ${passwordMinimum} characters length`;
+const emailRequired = 'Email is required';
+const passwordRequired = 'Password is required';
+
+const validationSchema: SchemaOf<LoginSchema> = object({
+  email: string()
+    .email('Enter a valid email')
+    .required(emailRequired),
+  password: string()
+    .min(passwordMinimum, passwordHint)
+    .required(passwordRequired),
+});
 
+export default () => {
   const passwordRef = React.useRef<HTMLInputElement>(null);
   const [showPassword, setShowPassword] = React.useState(false);
   const passwordId = useUniqueId();
@@ -37,8 +40,7 @@ export default () => {
     },
     validationSchema: validationSchema,
     onSubmit: values => {
-      passwordRef.current.type = 'password';
-
+      setShowPassword(false);
       // Send data to server
       setTimeout(() => {
         alert(JSON.stringify(values, null, 2));
@@ -90,7 +92,7 @@ export default () => {
               aria-controls={`input-${passwordId}`}
               onClick={() => {
                 setShowPassword(state => !state);
-                passwordRef.current.focus();
+                passwordRef.current?.focus();
               }}
             />
           </HStack>

package/dist/mdx/preview-react/_examples/examples/TextInputWithReactHookForm.tsx

@@ -0,0 +1,137 @@
+import React from 'react';
+
+import {useForm, FieldErrorsImpl} from 'react-hook-form';
+import {object, SchemaOf, string} from 'yup';
+
+import {TextInput} from '@workday/canvas-kit-preview-react/text-input';
+import {HStack, VStack} from '@workday/canvas-kit-react/layout';
+import {TertiaryButton, PrimaryButton} from '@workday/canvas-kit-react/button';
+import {visibleIcon, invisibleIcon} from '@workday/canvas-system-icons-web';
+import {useUniqueId} from '@workday/canvas-kit-react/common';
+
+type YupValidationResolver = <T extends {}>(
+  validationSchema: SchemaOf<T>
+) => (data: T) => Promise<{values: T; errors: {}} | {values: {}; errors: FieldErrorsImpl<T>}>;
+
+const useYupValidationResolver: YupValidationResolver = validationSchema => {
+  return React.useCallback(
+    async data => {
+      try {
+        const values = await validationSchema.validate(data, {abortEarly: false});
+        return {values, errors: {}};
+      } catch (errors) {
+        return {
+          values: {},
+          errors: errors.inner.reduce(
+            (allErrors, currentError) => ({
+              ...allErrors,
+              [currentError.path]: {
+                type: currentError.type ?? 'validation',
+                message: currentError.message,
+              },
+            }),
+            {}
+          ),
+        };
+      }
+    },
+    [validationSchema]
+  );
+};
+
+interface LoginSchema {
+  email: string;
+  password: string;
+}
+
+const passwordMinimum = 8;
+const passwordHint = `Password should be of minimum ${passwordMinimum} characters length`;
+const emailRequired = 'Email is required';
+const passwordRequired = 'Password is required';
+
+const validationSchema: SchemaOf<LoginSchema> = object({
+  email: string()
+    .email('Enter a valid email')
+    .required(emailRequired),
+  password: string()
+    .min(passwordMinimum, passwordHint)
+    .required(passwordRequired),
+});
+
+export default () => {
+  const {
+    handleSubmit,
+    register,
+    formState: {errors},
+  } = useForm<LoginSchema>({
+    defaultValues: {
+      email: 'example@baz.com',
+      password: 'foobarbaz',
+    },
+    resolver: useYupValidationResolver(validationSchema),
+    mode: 'onTouched',
+  });
+
+  const onSubmit = handleSubmit(values => {
+    setShowPassword(false);
+    // Send data to server
+    setTimeout(() => {
+      alert(JSON.stringify(values, null, 2));
+    }, 0);
+  });
+
+  const [showPassword, setShowPassword] = React.useState(false);
+  const passwordId = useUniqueId();
+  const passwordRef = React.useRef<HTMLInputElement | null>(null);
+  const {ref: passwordCallbackRef, ...passwordRegistration} = register('password');
+  const combinePasswordRef = (ref: HTMLInputElement | null) => {
+    passwordCallbackRef(ref);
+    passwordRef.current = ref;
+  };
+
+  return (
+    <form onSubmit={onSubmit} action=".">
+      <VStack spacing="xs" alignItems="flex-start">
+        <TextInput orientation="vertical" isRequired={true} hasError={!!errors.email}>
+          <TextInput.Label>Email</TextInput.Label>
+          <TextInput.Field
+            {...register('email')}
+            autoComplete="username"
+            placeholder="yourName@example.com"
+          />
+          <TextInput.Hint>{errors.email?.message}</TextInput.Hint>
+        </TextInput>
+        <TextInput
+          orientation="vertical"
+          id={passwordId}
+          isRequired={true}
+          hasError={!!errors.password}
+        >
+          <TextInput.Label>Password</TextInput.Label>
+          <HStack spacing="xxs">
+            <TextInput.Field
+              {...passwordRegistration}
+              type={showPassword ? 'text' : 'password'}
+              autoComplete="current-password"
+              spellCheck={false}
+              ref={combinePasswordRef}
+            />
+            <TertiaryButton
+              type="button"
+              icon={showPassword ? invisibleIcon : visibleIcon}
+              aria-label={showPassword ? 'Hide Password' : 'Show Password'}
+              aria-controls={`input-${passwordId}`}
+              onClick={() => {
+                setShowPassword(state => !state);
+                passwordRef.current?.focus();
+              }}
+            />
+          </HStack>
+          <TextInput.Hint>{errors.password?.message || passwordHint}</TextInput.Hint>
+        </TextInput>
+
+        <PrimaryButton type="submit">Submit</PrimaryButton>
+      </VStack>
+    </form>
+  );
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "7.3.15",
+  "version": "7.3.16",
   "description": "Documentation components of Canvas Kit components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -42,7 +42,7 @@
   ],
   "dependencies": {
     "@storybook/csf": "0.0.1",
-    "@workday/canvas-kit-react": "^7.3.15"
+    "@workday/canvas-kit-react": "^7.3.16"
   },
   "devDependencies": {
     "fs-extra": "^10.0.0",
@@ -50,5 +50,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "4.1"
   },
-  "gitHead": "fd5ab8a8e931a200a15f7fa2640f917805b044e9"
+  "gitHead": "a5be6896cbc5baaeb6a6b0ba2ea40a7ab3b2315b"
 }