feat #186 - MultipleChoice component, Refac ShortcutMicrocopy

src/components/ChipInput/index.tsx

@@ -8,7 +8,6 @@ import {
 	getInitialValues,
 	getInputValue,
 	getTagDeletionProps,
-	shortcutMicrocopyWidth,
 	useStyles
 } from './utils'
 import { Input, InputProps } from 'components/Input'
@@ -17,6 +16,8 @@ import React, {
 	FC,
 	KeyboardEvent,
 	useEffect,
+	useLayoutEffect,
+	useRef,
 	useState
 } from 'react'
 
@@ -50,22 +51,27 @@ export const ChipInput: FC<ChipInputProps> = ({
 	fullWidth,
 	inputRef,
 	loading = false,
+	onBlur,
 	onFocus,
 	onChange,
 	placeholder,
 	undeleteableValues = [],
 	validate,
 	values
 }: ChipInputProps) => {
+	const shortcutMicrocopyRef = useRef<HTMLDivElement>(null)
+
 	const [addedValues, setAddedValues] = useState<string[]>(
 		getInitialValues(values, defaultValues)
 	)
 	const [inputValue, setInputValue] = useState('')
 	const [isInvalidValue, setIsInvalidValue] = useState(false)
 	const [localError, setLocalError] = useState(false)
 	const [localErrorMsg, setLocalErrorMsg] = useState('')
+	const [shortcutMicrocopyWidth, setShortcutMicrocopyWidth] = useState(101)
+	const [showShortcutMicrocopy, setShowShortcutMicrocopy] = useState(false)
 
-	const componentClasses = useStyles({ fullWidth })
+	const componentClasses = useStyles({ fullWidth, shortcutMicrocopyWidth })
 
 	const addInputValue = () => {
 		const newValues = [
@@ -88,6 +94,12 @@ export const ChipInput: FC<ChipInputProps> = ({
 		if (onChange) onChange(newValues)
 	}
 
+	const onInputBlur = (event: ChangeEvent<HTMLInputElement>) => {
+		setShowShortcutMicrocopy(false)
+
+		if (onBlur) onBlur(event)
+	}
+
 	const onInputChange = (event: ChangeEvent<HTMLInputElement>) => {
 		setInputValue(event.target.value.toLowerCase())
 
@@ -97,6 +109,12 @@ export const ChipInput: FC<ChipInputProps> = ({
 		if (clearErrros) clearErrros()
 	}
 
+	const onInputFocus = () => {
+		setShowShortcutMicrocopy(true)
+
+		if (onFocus) onFocus()
+	}
+
 	const onKeyDown = (e: KeyboardEvent<Element>) => {
 		if (e.key === 'Enter') {
 			e.preventDefault()
@@ -143,10 +161,19 @@ export const ChipInput: FC<ChipInputProps> = ({
 		))
 
 	useEffect(() => {
-		!inputValue || addedValues.includes(inputValue) || localError || error
+		const isDuplicate = addedValues.includes(
+			getInputValue(inputValue, addonBefore, addonAfter)
+		)
+
+		!inputValue || isDuplicate || localError || error
 			? setIsInvalidValue(true)
 			: setIsInvalidValue(false)
-	}, [addedValues, inputValue, localError, error])
+	}, [addonBefore, addonAfter, addedValues, inputValue, localError, error])
+
+	useLayoutEffect(() => {
+		if (shortcutMicrocopyRef.current)
+			setShortcutMicrocopyWidth(shortcutMicrocopyRef.current.scrollWidth)
+	}, [])
 
 	if (values && !onChange)
 		throw new Error('Controlled chip inputs require an onChange prop')
@@ -164,16 +191,18 @@ export const ChipInput: FC<ChipInputProps> = ({
 					fullWidth={fullWidth}
 					inputRef={inputRef}
 					loading={loading}
+					onBlur={onInputBlur}
 					onChange={onInputChange}
-					onFocus={onFocus}
+					onFocus={onInputFocus}
 					onKeyDown={onKeyDown}
 					placeholder={placeholder}
 					value={inputValue}
 				/>
-				<ShortcutMicrocopy
-					loading={loading}
-					width={shortcutMicrocopyWidth}
-				/>
+				{showShortcutMicrocopy && (
+					<ShortcutMicrocopy
+						shortcutMicrocopyRef={shortcutMicrocopyRef}
+					/>
+				)}
 			</div>
 			<div className={componentClasses.tagsWrapper}>
 				{loading ? renderSkeletenTags() : renderTags()}

src/components/ChipInput/utils.ts

@@ -52,8 +52,6 @@ export const getTagDeletionProps: GetTagDeletionProps = (
 
 // -----------------------------------
 
-export const shortcutMicrocopyWidth = 82
-
 export const useStyles = createUseStyles({
 	skeleton: { marginLeft: spacing.m },
 	tag: {
@@ -62,9 +60,9 @@ export const useStyles = createUseStyles({
 	tagsWrapper: {
 		display: 'flex',
 		flexWrap: 'wrap',
-		width: ({ fullWidth }) =>
+		width: ({ fullWidth, shortcutMicrocopyWidth }) =>
 			fullWidth
-				? `calc( 100% - ${shortcutMicrocopyWidth + spacing.m}px)`
+				? `calc( 100% - ${shortcutMicrocopyWidth}px)`
 				: defaultFieldWidth
 	},
 	wrapper: {

src/components/Form/Form.stories.tsx

@@ -21,13 +21,15 @@ export default {
 interface UserModel {
 	firstName: string
 	lastName?: string
+	timeInput?: number
 }
 
 const Template: Story<FormProps<UserModel>> = (args: FormProps<UserModel>) => (
 	<Form
 		{...args}
 		initialValues={{
 			cloudType: 'azure',
+			defaultCheckedKeys: [5],
 			domains: ['@lorem.com'],
 			firstName: 'First Name'
 		}}

src/components/Form/FormChipInput/index.tsx

@@ -1,11 +1,10 @@
 import { Input as AntDInput } from 'antd'
 import { BaseFieldProps } from '../types'
 import cn from 'classnames'
-import FieldLabel from '../FieldLabel'
-import { getFormFieldDataTag } from '../utils'
 import { ChipInput, ChipInputProps } from 'components/ChipInput'
 import { Controller, useFormContext } from 'react-hook-form'
 import FieldContext, { FieldContextProps } from '../FieldContext'
+import { getFormFieldDataTag, renderFieldLabel } from '../utils'
 import React, { FC, useContext, useEffect, useRef } from 'react'
 
 export interface FormChipInputProps
@@ -48,15 +47,13 @@ const FormChipInput: FC<FormChipInputProps> = ({
 
 	return (
 		<div className={cn(containerClasses)}>
-			{label && (
-				<FieldLabel
-					fullWidth={fullWidth}
-					label={label}
-					loading={loading}
-					required={required}
-					skeletonWidth={labelSkeletonWidth}
-				/>
-			)}
+			{renderFieldLabel({
+				fullWidth,
+				label,
+				loading,
+				required,
+				skeletonWidth: labelSkeletonWidth
+			})}
 			<Controller
 				control={control}
 				name={name}

src/components/Form/FormMultipleChoice/FormMultipleChoice.stories.tsx

@@ -0,0 +1,65 @@
+import { multipleChoiceItems } from 'components/MultipleChoice/fixtures'
+import React from 'react'
+import { Form, FormProps } from '../index'
+import { Meta, Story } from '@storybook/react/types-6-0'
+
+export default {
+	argTypes: {
+		initialValues: { control: { disable: true } },
+		onSubmit: { control: { disable: true } }
+	},
+	component: Form,
+	parameters: {
+		storyshots: { disable: true }
+	},
+	title: 'Form/MultipleChoice'
+} as Meta
+
+interface MultipleProps {
+	roles?: string[]
+}
+
+const MultipleTemplate: Story<FormProps<MultipleProps>> = (
+	args: FormProps<MultipleProps>
+) => (
+	<Form
+		{...args}
+		initialValues={{
+			roles: ['sr-leadership', 'devops']
+		}}
+	>
+		<Form.MultipleChoice
+			items={multipleChoiceItems}
+			mode='multiple'
+			name='multipleChoice'
+			required
+		/>
+		<Form.SubmitButton>Submit</Form.SubmitButton>
+	</Form>
+)
+
+export const Multiple = MultipleTemplate.bind({})
+
+interface SingleProps {
+	role?: string
+}
+
+const SingleTemplate: Story<FormProps<SingleProps>> = (
+	args: FormProps<SingleProps>
+) => (
+	<Form
+		{...args}
+		initialValues={{
+			role: 'sr-leadership'
+		}}
+	>
+		<Form.MultipleChoice
+			items={multipleChoiceItems}
+			mode='single'
+			name='multipleChoice'
+			required
+		/>
+	</Form>
+)
+
+export const Single = SingleTemplate.bind({})

src/components/Form/FormMultipleChoice/index.tsx

@@ -0,0 +1,54 @@
+import { BaseFieldProps } from '../types'
+import { Controller, useFormContext } from 'react-hook-form'
+import FieldContext, { FieldContextProps } from '../FieldContext'
+import { getFormFieldDataTag, renderFieldLabel } from '../utils'
+import { MultipleChoice, MultipleChoiceProps } from 'components/MultipleChoice'
+import React, { FC, useContext } from 'react'
+
+export interface FormMultipleChoiceProps
+	extends BaseFieldProps,
+		Omit<MultipleChoiceProps, 'onChange' | 'value'> {}
+
+const FormMultipleChoice: FC<FormMultipleChoiceProps> = ({
+	label,
+	labelSkeletonWidth,
+	name,
+	required,
+	rules = {},
+	...rest
+}: FormMultipleChoiceProps) => {
+	const { control } = useFormContext()
+	const { loading } = useContext<FieldContextProps>(FieldContext)
+
+	if (required) {
+		rules.required = true
+	}
+
+	return (
+		<div>
+			{renderFieldLabel({
+				fullWidth: true,
+				label,
+				loading,
+				required,
+				skeletonWidth: labelSkeletonWidth
+			})}
+			<Controller
+				control={control}
+				name={name}
+				render={({ onChange, value }) => (
+					<MultipleChoice
+						dataTag={getFormFieldDataTag(name)}
+						loading={loading}
+						onChange={onChange}
+						value={value}
+						{...rest}
+					/>
+				)}
+				rules={rules}
+			/>
+		</div>
+	)
+}
+
+export default FormMultipleChoice

src/components/Form/index.tsx

@@ -2,6 +2,7 @@ import { createUseStyles } from 'react-jss'
 import FieldContext from './FieldContext'
 import FormChipInput from './FormChipInput'
 import FormInput from './FormInput'
+import FormMultipleChoice from './FormMultipleChoice'
 import FormRadioGroup from './FormRadioGroup'
 import FormSelect from './FormSelect'
 import FormSubmitButton from './FormSubmitButton'
@@ -70,6 +71,7 @@ export function Form<Model>({
 Form.SubmitButton = FormSubmitButton
 Form.ChipInput = FormChipInput
 Form.Input = FormInput
+Form.MultipleChoice = FormMultipleChoice
 Form.RadioGroup = FormRadioGroup
 Form.Select = FormSelect
 Form.Toggle = FormToggle

src/components/Form/utils.tsx

@@ -0,0 +1,8 @@
+import React from 'react'
+import FieldLabel, { FieldLabelProps } from './FieldLabel'
+
+export const getFormFieldDataTag = (tag: string): string => `field-${tag}`
+
+export const renderFieldLabel = (props: Partial<FieldLabelProps>) => {
+	if (props.label) return <FieldLabel {...(props as FieldLabelProps)} />
+}

src/components/Input/index.tsx

@@ -72,6 +72,7 @@ export const Input: FC<InputProps> = (props: InputProps) => {
 		dataTag,
 		disabled = false,
 		inputRef,
+		onBlur = noop,
 		onChange,
 		onFocus = noop,
 		onKeyDown = noop,
@@ -112,6 +113,7 @@ export const Input: FC<InputProps> = (props: InputProps) => {
 			addonBefore={addonBefore}
 			className={cn(componentClasses.container, inputClasses)}
 			disabled={disabled}
+			onBlur={onBlur}
 			onFocus={onFocus}
 			onKeyDown={onKeyDown}
 			placeholder={placeholder}

src/components/Modal/Modal.stories.tsx

@@ -2,18 +2,26 @@ import { Button } from '../Button'
 import { Emitter } from '@dassana-io/web-utils'
 import { ModalConfig } from './utils'
 import React from 'react'
+import { SbTheme } from '../../../.storybook/preview'
+import { useTheme } from 'react-jss'
 import { Meta, Story } from '@storybook/react/types-6-0'
 import { ModalProvider, useModal } from './index'
-
 const mockEmitter = new Emitter()
 
 export default {
 	decorators: [
-		Story => (
-			<ModalProvider emitter={mockEmitter}>
-				<Story />
-			</ModalProvider>
-		)
+		Story => {
+			const theme: SbTheme = useTheme()
+
+			return (
+				<ModalProvider
+					emitter={mockEmitter}
+					popupContainerSelector={`.${theme.type}`}
+				>
+					<Story />
+				</ModalProvider>
+			)
+		}
 	],
 	title: 'Modal'
 } as Meta