From 2ed4516a134b8826f4af28dde487ffd30c4b5712 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?C=C3=A1tia=20Antunes?= Date: Wed, 19 Oct 2022 16:28:16 +0100 Subject: [PATCH 1/6] feat: add page to create a team --- .../layouts/DashboardLayout/index.tsx | 2 +- frontend/src/pages/teams/new.tsx | 70 +++++++++++++++++++ 2 files changed, 71 insertions(+), 1 deletion(-) create mode 100644 frontend/src/pages/teams/new.tsx diff --git a/frontend/src/components/layouts/DashboardLayout/index.tsx b/frontend/src/components/layouts/DashboardLayout/index.tsx index b2b00ca27..07b3af3f7 100644 --- a/frontend/src/components/layouts/DashboardLayout/index.tsx +++ b/frontend/src/components/layouts/DashboardLayout/index.tsx @@ -33,7 +33,7 @@ const DashboardLayout = (props: DashboardLayoutProps) => { )} {isTeams && ( - + Create new team diff --git a/frontend/src/pages/teams/new.tsx b/frontend/src/pages/teams/new.tsx new file mode 100644 index 000000000..74ab231bc --- /dev/null +++ b/frontend/src/pages/teams/new.tsx @@ -0,0 +1,70 @@ +import { useCallback } from 'react'; +import { FormProvider, useForm, useWatch } from 'react-hook-form'; +import { NextPage } from 'next'; +import { useRouter } from 'next/router'; +import { joiResolver } from '@hookform/resolvers/joi/dist/joi'; + +import Icon from '../../components/icons/Icon'; +import Button from '../../components/Primitives/Button'; +import Text from '../../components/Primitives/Text'; +import TeamName from '../../components/Teams/CreateTeam/TeamName'; +import TipBar from '../../components/Teams/CreateTeam/TipBar'; +import SchemaCreateTeam from '../../schema/schemaCreateTeamForm'; +import { + Container, + ContentContainer, + InnerContent, + PageHeader, + StyledForm, + SubContainer +} from '../../styles/pages/boards/new.styles'; + +const NewTeam: NextPage = () => { + const router = useRouter(); + + const methods = useForm<{ text: string }>({ + mode: 'onBlur', + reValidateMode: 'onBlur', + defaultValues: { + text: '' + }, + resolver: joiResolver(SchemaCreateTeam) + }); + + const teamName = useWatch({ + control: methods.control, + name: 'text' + }); + + const handleBack = useCallback(() => { + router.back(); + }, [router]); + + return ( + + + + Add new SPLIT board + + + + + + + + + + + + + + + + + + ); +}; + +export default NewTeam; From 74e84e45cea9413a51e87d6f3e03f7f51c6e312a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?C=C3=A1tia=20Antunes?= Date: Wed, 19 Oct 2022 16:28:47 +0100 Subject: [PATCH 2/6] feat: add input for team name --- .../components/Teams/CreateTeam/TeamName.tsx | 24 +++++++++++++++++++ frontend/src/schema/schemaCreateTeamForm.ts | 11 +++++++++ 2 files changed, 35 insertions(+) create mode 100644 frontend/src/components/Teams/CreateTeam/TeamName.tsx create mode 100644 frontend/src/schema/schemaCreateTeamForm.ts diff --git a/frontend/src/components/Teams/CreateTeam/TeamName.tsx b/frontend/src/components/Teams/CreateTeam/TeamName.tsx new file mode 100644 index 000000000..9af171540 --- /dev/null +++ b/frontend/src/components/Teams/CreateTeam/TeamName.tsx @@ -0,0 +1,24 @@ +import Input from '../../Primitives/Input'; +import Text from '../../Primitives/Text'; + +type Props = { teamName: string }; + +const TeamName = ({ teamName }: Props) => { + return ( + <> + Team Name + + + + ); +}; + +export default TeamName; diff --git a/frontend/src/schema/schemaCreateTeamForm.ts b/frontend/src/schema/schemaCreateTeamForm.ts new file mode 100644 index 000000000..0329d4fcc --- /dev/null +++ b/frontend/src/schema/schemaCreateTeamForm.ts @@ -0,0 +1,11 @@ +import Joi from 'joi'; + +const SchemaCreateTeam = Joi.object({ + text: Joi.string().required().trim().max(40).messages({ + 'any.required': 'Please enter the team name', + 'string.empty': 'Please enter the team name', + 'string.max': 'Maximum of 40 characters' + }) +}); + +export default SchemaCreateTeam; From 2eef0d6996e33b6e4525fb38f019e5a82d4c8be1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?C=C3=A1tia=20Antunes?= Date: Wed, 19 Oct 2022 16:29:26 +0100 Subject: [PATCH 3/6] feat: add tipbar --- .../components/Teams/CreateTeam/TipBar.tsx | 51 +++++++++++++++++++ 1 file changed, 51 insertions(+) create mode 100644 frontend/src/components/Teams/CreateTeam/TipBar.tsx diff --git a/frontend/src/components/Teams/CreateTeam/TipBar.tsx b/frontend/src/components/Teams/CreateTeam/TipBar.tsx new file mode 100644 index 000000000..c2dcc4478 --- /dev/null +++ b/frontend/src/components/Teams/CreateTeam/TipBar.tsx @@ -0,0 +1,51 @@ +import { styled } from 'styles/stitches/stitches.config'; + +import Icon from 'components/icons/Icon'; +import Flex from 'components/Primitives/Flex'; +import Text from 'components/Primitives/Text'; + +const TextWhite = styled(Text, { color: 'white', mt: '$24' }); +const LiWhite = styled('li', Text, { color: '$primary100', fontSize: '$14', lineHeight: '$20' }); + +const CreateTeamTipBar = () => { + return ( + + + Team Admin + + + You will be the team admin of this team. You can also choose other team admins later + on out of your team members. + + + + Stakeholders + + + If you select the role stakeholder, this person will not be included in + sub-team retros later on when you create a SPLIT retrospective. + + + ); +}; + +export default CreateTeamTipBar; From e0a503a0f29ff3249564e5ed5588e0713f2fc6af Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?C=C3=A1tia=20Antunes?= Date: Wed, 19 Oct 2022 16:29:56 +0100 Subject: [PATCH 4/6] fix: fix esslint error on sprite --- frontend/src/components/icons/Sprite.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/frontend/src/components/icons/Sprite.tsx b/frontend/src/components/icons/Sprite.tsx index d4fb107f2..e1cd380ab 100644 --- a/frontend/src/components/icons/Sprite.tsx +++ b/frontend/src/components/icons/Sprite.tsx @@ -1,3 +1,5 @@ +/* eslint react/no-unknown-property: 0 */ + const Sprite = () => ( Date: Wed, 19 Oct 2022 16:38:40 +0100 Subject: [PATCH 5/6] feat: add margin bottom to team name title --- frontend/src/components/Teams/CreateTeam/TeamName.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/frontend/src/components/Teams/CreateTeam/TeamName.tsx b/frontend/src/components/Teams/CreateTeam/TeamName.tsx index 9af171540..46ffbc11e 100644 --- a/frontend/src/components/Teams/CreateTeam/TeamName.tsx +++ b/frontend/src/components/Teams/CreateTeam/TeamName.tsx @@ -6,7 +6,9 @@ type Props = { teamName: string }; const TeamName = ({ teamName }: Props) => { return ( <> - Team Name + + Team Name +