Small updates for FTC wizard

Author: lukefrogger

packages/sitebuilder/sitebuilder.d.ts

@@ -67,6 +67,7 @@ declare global {
 		url?: string;
 		target?: '_blank' | '_self';
 		wizardHash?: string;
+		target?: string;
 	}
 
 	interface SetupCardInterface {

packages/sitebuilder/src/wizards/first-time-configuration/components/ScreenWrapper.tsx

@@ -1,23 +1,23 @@
 import { Box } from '@mui/material';
 import { styled } from '@mui/material/styles';
 
-const mBottom = '68px';
-const mTop = '57px';
+const screenBottomMargin = '68px';
+const screenTopMargin = '57px';
 
 const ScreenWrapper: any = styled(Box, {
 	name: 'FtcWrapper',
-	slot: 'Root',
+	slot: 'Root'
 })(() => ({
 	display: 'flex',
 	flexDirection: 'column',
 	justifyContent: 'center',
 	alignItems: 'center',
-	marginTop: mTop,
-	marginBottom: mBottom,
-	minHeight: `calc(100vh - ${ mTop } - ${ mBottom })`,
+	marginTop: screenTopMargin,
+	marginBottom: screenBottomMargin,
+	minHeight: `calc(100vh - ${ screenTopMargin } - ${ screenBottomMargin })`,
 	'& .WmeFormRoot': {
-		marginTop: '16px',
-	},
+		marginTop: '16px'
+	}
 }));
 
 export default ScreenWrapper;

packages/sitebuilder/src/wizards/first-time-configuration/screens/Goals.tsx

@@ -1,7 +1,12 @@
 import { CardSelectGroup, CardSelectItem } from '@moderntribe/wme-ui';
 import { Box, Stack, Typography } from '@mui/material';
 import { useFirstTimeConfiguration } from '@sb/hooks';
-import { NewspaperIcon, GraduationIcon, ShoppingBagIcon, TicketIcon } from '@sb/icons';
+import {
+	NewspaperIcon,
+	GraduationIcon,
+	ShoppingBagIcon,
+	TicketIcon
+} from '@sb/icons';
 import { FtcStringData } from '@ftc/data/constants';
 const { siteDetails } = FtcStringData;
 
@@ -29,16 +34,21 @@ const cards = [
 ];
 
 const Goals = () => {
-	const { ftcState: { form }, setFormValue } = useFirstTimeConfiguration();
+	const {
+		ftcState: { form },
+		setFormValue
+	} = useFirstTimeConfiguration();
 
 	const handleSelect = (value: string[]) => {
 		setFormValue('goals', value);
 	};
 
 	return (
-		<Box sx={ { maxWidth: 560, width: 560 } }>
+		<Box sx={ { maxWidth: 560 } }>
 			<Stack spacing={ 2 }>
-				<Typography component="h3" sx={ { fontWeight: 500 } }>{ siteDetails.goalsSelectText }</Typography>
+				<Typography component="h3" sx={ { fontWeight: 500 } }>
+					{ siteDetails.goalsSelectText }
+				</Typography>
 				<CardSelectGroup
 					orientation="vertical"
 					cardPadding="sm"
@@ -55,7 +65,6 @@ const Goals = () => {
 						/>
 					)) }
 				</CardSelectGroup>
-
 			</Stack>
 		</Box>
 	);

packages/wme-ui/src/components/chips-input/chips-input.stories.mdx

@@ -36,11 +36,17 @@ import { ChipInput } from "..";
 	}}
 />
 
-export const Template = (args) => (
-	<div style={{ width: 350 }}>
-		<ChipInput {...args} />
-	</div>
-);
+export const Template = (args) => {
+	const [tags, setTags] = React.useState(args.tags);
+	const handleSelect = (listOfChips) => {
+    	setTags(listOfChips);
+    }
+	return (
+		<div style={{ width: 350 }}>
+			<ChipInput {...args} tags={tags} selectedTags={ handleSelect } />
+		</div>
+		);
+};
 
 # Text Input
 
@@ -60,16 +66,23 @@ A styled version of <a href="https://mui.com/material-ui/api/input-base/" target
 import React from 'react';
 import { ChipInput } from '@moderntribe/wme';
 
-const handleSelect = (listOfChips) => {
-	console.log(listOfChips);
-}
+export const MyChipInput = (props) => {
+	const [tags, setTags] = useState([]);
+
+	const handleSelect = (listOfChips) => {
+		console.log(listOfChips);
+		setTags(listOfChips);
+	}
 
-export const MyChipInput = (props) => (
-  <ChipInput
-	tags={['chip 1', 'chip 2']}
-    placeholder="Placeholder text"
-  />
-)
+	return (
+		<ChipInput
+			selectedTags={ handleSelect }
+			placeholder="Type tags here..."
+			tags={ tags }
+		/>
+	);
+
+}
 
 export default MyChipInput;
 ```

packages/wme-ui/src/components/chips-input/chips-input.tsx

@@ -49,11 +49,7 @@ const StyledChipInput = styled(TextField, {
   },
 }));
 
-const ChipsInput: React.FC<ChipsInputProps> = ({
-  tags,
-  selectedTags,
-  ...rest
-}) => {
+const ChipsInput: React.FC<ChipsInputProps> = ({ tags = [], selectedTags, ...rest }) => {
   const [inputValue, setInputValue] = useState('');
 
   const deleteChip = (item: string) => () => {
@@ -71,7 +67,7 @@ const ChipsInput: React.FC<ChipsInputProps> = ({
     if (isEnter || isComma) {
       evt.preventDefault();
       const newSelectedItems = [...tags];
-      const duplicatedValues = newSelectedItems.indexOf(inputValue.trim());
+      const duplicatedValues = newSelectedItems.indexOf(trimmedInput);
 
       if (duplicatedValues !== -1) {
         setInputValue('');
@@ -83,9 +79,7 @@ const ChipsInput: React.FC<ChipsInputProps> = ({
       setInputValue('');
     }
 
-    if (
-      isBackspace && inputValue.length === 0 && tags.length > 0
-    ) {
+    if (isBackspace && inputValue.length === 0 && tags.length > 0) {
       selectedTags(tags.slice(0, tags.length - 1));
     }
   };
@@ -97,13 +91,7 @@ const ChipsInput: React.FC<ChipsInputProps> = ({
         fullWidth: true,
         autoComplete: 'false',
         startAdornment: tags.map((item) => (
-          <Chip
-            size="small"
-            key={item}
-            tabIndex={-1}
-            label={item}
-            onDelete={deleteChip(item)}
-          />
+          <Chip size="small" key={item} tabIndex={-1} label={item} onDelete={deleteChip(item)} />
         )),
         value: inputValue,
         onKeyUp: handleKeyDown,