From 2cd1865d1986f100b56b153d6ada7584ab280212 Mon Sep 17 00:00:00 2001 From: Andre H Date: Thu, 29 Feb 2024 15:30:34 +0700 Subject: [PATCH 01/15] =?UTF-8?q?=F0=9F=94=A7=20chore:=20add=20linkchain?= =?UTF-8?q?=20icon?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../shared/CustomIcon/LinkChainIcon.tsx | 21 +++++++++++++++++++ .../src/components/shared/CustomIcon/index.ts | 1 + 2 files changed, 22 insertions(+) create mode 100644 packages/frontend/src/components/shared/CustomIcon/LinkChainIcon.tsx diff --git a/packages/frontend/src/components/shared/CustomIcon/LinkChainIcon.tsx b/packages/frontend/src/components/shared/CustomIcon/LinkChainIcon.tsx new file mode 100644 index 00000000..66ff9cd4 --- /dev/null +++ b/packages/frontend/src/components/shared/CustomIcon/LinkChainIcon.tsx @@ -0,0 +1,21 @@ +import React from 'react'; +import { CustomIcon, CustomIconProps } from './CustomIcon'; + +export const LinkChainIcon = (props: CustomIconProps) => { + return ( + + + + ); +}; diff --git a/packages/frontend/src/components/shared/CustomIcon/index.ts b/packages/frontend/src/components/shared/CustomIcon/index.ts index b9965188..2d610c48 100644 --- a/packages/frontend/src/components/shared/CustomIcon/index.ts +++ b/packages/frontend/src/components/shared/CustomIcon/index.ts @@ -40,6 +40,7 @@ export * from './GithubStrokeIcon'; export * from './BranchStrokeIcon'; export * from './StorageIcon'; export * from './LinkIcon'; +export * from './LinkChainIcon'; export * from './CursorBoxIcon'; // Templates From d9392c095d748237638caca3f779a272c66d74af Mon Sep 17 00:00:00 2001 From: Andre H Date: Thu, 29 Feb 2024 15:31:10 +0700 Subject: [PATCH 02/15] =?UTF-8?q?=E2=9A=A1=EF=B8=8F=20feat:=20reskin=20tem?= =?UTF-8?q?plate=20header?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../org-slug/projects/create/Template.tsx | 21 ++++++++++++------- 1 file changed, 14 insertions(+), 7 deletions(-) diff --git a/packages/frontend/src/pages/org-slug/projects/create/Template.tsx b/packages/frontend/src/pages/org-slug/projects/create/Template.tsx index d819a6f1..b764e45b 100644 --- a/packages/frontend/src/pages/org-slug/projects/create/Template.tsx +++ b/packages/frontend/src/pages/org-slug/projects/create/Template.tsx @@ -10,6 +10,8 @@ import { Avatar } from '@material-tailwind/react'; import Stepper from '../../../../components/Stepper'; import templates from '../../../../assets/templates'; +import { LinkChainIcon } from 'components/shared/CustomIcon'; +import { Heading } from 'components/shared/Heading'; // TODO: Set dynamic route for template and load details from DB const CreateWithTemplate = () => { @@ -44,19 +46,24 @@ const CreateWithTemplate = () => { return (
-
- -
{template?.name}
+ From a8ad6c6eec9be4b00ac00afc47a9ce2cf1ca4120 Mon Sep 17 00:00:00 2001 From: Andre H Date: Fri, 1 Mar 2024 10:41:12 +0800 Subject: [PATCH 03/15] =?UTF-8?q?=E2=9A=A1=EF=B8=8F=20feat:=20implement=20?= =?UTF-8?q?card=20style=20for=20radio?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/shared/Radio/Radio.theme.ts | 21 ++++++++++++- .../src/components/shared/Radio/Radio.tsx | 5 +-- .../src/components/shared/Radio/RadioItem.tsx | 31 ++++++++++++++----- 3 files changed, 47 insertions(+), 10 deletions(-) diff --git a/packages/frontend/src/components/shared/Radio/Radio.theme.ts b/packages/frontend/src/components/shared/Radio/Radio.theme.ts index 0b84601e..84d8fd01 100644 --- a/packages/frontend/src/components/shared/Radio/Radio.theme.ts +++ b/packages/frontend/src/components/shared/Radio/Radio.theme.ts @@ -2,7 +2,7 @@ import { VariantProps, tv } from 'tailwind-variants'; export const radioTheme = tv({ slots: { - root: ['flex', 'gap-3', 'flex-wrap'], + root: ['flex', 'gap-3'], wrapper: ['flex', 'items-center', 'gap-2', 'group'], label: ['text-sm', 'tracking-[-0.006em]', 'text-elements-high-em'], radio: [ @@ -39,15 +39,34 @@ export const radioTheme = tv({ 'after:data-[state=checked]:group-hover:bg-elements-on-primary', 'after:data-[state=checked]:group-focus-visible:bg-elements-on-primary', ], + icon: ['w-[18px]', 'h-[18px]'], }, variants: { orientation: { vertical: { root: ['flex-col'] }, horizontal: { root: ['flex-row'] }, }, + variant: { + unstyled: {}, + card: { + wrapper: [ + 'px-4', + 'py-3', + 'rounded-lg', + 'border', + 'border-border-interactive', + 'bg-controls-tertiary', + 'shadow-button', + 'w-full', + 'cursor-pointer', + ], + label: ['select-none', 'cursor-pointer'], + }, + }, }, defaultVariants: { orientation: 'vertical', + variant: 'unstyled', }, }); diff --git a/packages/frontend/src/components/shared/Radio/Radio.tsx b/packages/frontend/src/components/shared/Radio/Radio.tsx index 96542493..80468001 100644 --- a/packages/frontend/src/components/shared/Radio/Radio.tsx +++ b/packages/frontend/src/components/shared/Radio/Radio.tsx @@ -49,14 +49,15 @@ export const Radio = ({ className, options, orientation, + variant, ...props }: RadioProps) => { - const { root } = radioTheme({ orientation }); + const { root } = radioTheme({ orientation, variant }); return ( {options.map((option) => ( - + ))} ); diff --git a/packages/frontend/src/components/shared/Radio/RadioItem.tsx b/packages/frontend/src/components/shared/Radio/RadioItem.tsx index 177af9db..4a2c2e37 100644 --- a/packages/frontend/src/components/shared/Radio/RadioItem.tsx +++ b/packages/frontend/src/components/shared/Radio/RadioItem.tsx @@ -1,13 +1,16 @@ -import React, { ComponentPropsWithoutRef } from 'react'; +import React, { ReactNode, ComponentPropsWithoutRef } from 'react'; import { Item as RadixRadio, Indicator as RadixIndicator, RadioGroupItemProps, RadioGroupIndicatorProps, } from '@radix-ui/react-radio-group'; -import { radioTheme } from './Radio.theme'; +import { RadioTheme, radioTheme } from './Radio.theme'; +import { cloneIcon } from 'utils/cloneIcon'; -export interface RadioItemProps extends RadioGroupItemProps { +export interface RadioItemProps + extends RadioGroupItemProps, + Pick { /** * The wrapper props of the radio item. * You can use this prop to customize the wrapper props. @@ -27,6 +30,10 @@ export interface RadioItemProps extends RadioGroupItemProps { * The id of the radio item. */ id?: string; + /** + * The left icon of the radio item. + */ + leftIcon?: ReactNode; /** * The label of the radio item. */ @@ -41,18 +48,26 @@ export const RadioItem = ({ wrapperProps, labelProps, indicatorProps, + leftIcon, label, id, + variant, ...props }: RadioItemProps) => { - const { wrapper, label: labelClass, radio, indicator } = radioTheme(); + const { + wrapper, + label: labelClass, + radio, + indicator, + icon, + } = radioTheme({ variant }); // Generate a unique id for the radio item from the label if the id is not provided const kebabCaseLabel = label?.toLowerCase().replace(/\s+/g, '-'); const componentId = id ?? kebabCaseLabel; return ( -
+
+ ); }; From 0b64ccc36405e8f4be2e37d637758a20a616c90c Mon Sep 17 00:00:00 2001 From: Andre H Date: Fri, 1 Mar 2024 11:12:47 +0800 Subject: [PATCH 04/15] =?UTF-8?q?=F0=9F=94=A7=20chore:=20replace=20space-y?= =?UTF-8?q?-2=20with=20gap-y-2=20for=20input?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/frontend/src/components/shared/Input/Input.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/frontend/src/components/shared/Input/Input.tsx b/packages/frontend/src/components/shared/Input/Input.tsx index fb3fd7d6..5bd5265c 100644 --- a/packages/frontend/src/components/shared/Input/Input.tsx +++ b/packages/frontend/src/components/shared/Input/Input.tsx @@ -87,12 +87,12 @@ export const Input = ({ ); return ( -
+
{renderLabels}
{leftIcon && renderLeftIcon} Date: Fri, 1 Mar 2024 11:13:17 +0800 Subject: [PATCH 05/15] =?UTF-8?q?=F0=9F=94=A7=20chore:=20reskin=20with=20s?= =?UTF-8?q?hared=20components?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../projects/create/template/index.tsx | 144 ++++++++---------- 1 file changed, 64 insertions(+), 80 deletions(-) diff --git a/packages/frontend/src/pages/org-slug/projects/create/template/index.tsx b/packages/frontend/src/pages/org-slug/projects/create/template/index.tsx index 9ff50c84..8f8a0f39 100644 --- a/packages/frontend/src/pages/org-slug/projects/create/template/index.tsx +++ b/packages/frontend/src/pages/org-slug/projects/create/template/index.tsx @@ -1,15 +1,23 @@ import React, { useCallback, useEffect, useState } from 'react'; -import { useForm, Controller, SubmitHandler } from 'react-hook-form'; +import { useForm, SubmitHandler } from 'react-hook-form'; import { useNavigate, useOutletContext, useParams } from 'react-router-dom'; import toast from 'react-hot-toast'; import assert from 'assert'; -import { Button, Option, Typography } from '@material-tailwind/react'; - import { useOctokit } from '../../../../../context/OctokitContext'; import { useGQLClient } from '../../../../../context/GQLClientContext'; -import AsyncSelect from '../../../../../components/shared/AsyncSelect'; import { Template } from '../../../../../types'; +import { Heading } from 'components/shared/Heading'; +import { Input } from 'components/shared/Input'; +import { Radio } from 'components/shared/Radio'; +import { Select } from 'components/shared/Select'; +import { + ArrowRightCircleFilledIcon, + GitIcon, + GitTeaIcon, +} from 'components/shared/CustomIcon'; +import { Checkbox } from 'components/shared/Checkbox'; +import { Button } from 'components/shared/Button'; type SubmitRepoValues = { framework: string; @@ -30,6 +38,19 @@ const CreateRepo = () => { const [gitAccounts, setGitAccounts] = useState([]); const [isLoading, setIsLoading] = useState(false); + const FRAMEWORK_OPTIONS = [ + { + value: 'react-native', + label: 'React Native', + leftIcon: , + }, + { + value: 'expo', + label: 'Expo', + leftIcon: , + }, + ]; + const submitRepoHandler: SubmitHandler = useCallback( async (data) => { assert(data.account); @@ -93,7 +114,7 @@ const CreateRepo = () => { fetchUserAndOrgs(); }, [octokit]); - const { register, handleSubmit, control, reset } = useForm({ + const { handleSubmit, reset } = useForm({ defaultValues: { framework: 'React', repoName: '', @@ -110,86 +131,49 @@ const CreateRepo = () => { return (
-
- - Create a repository - - - The project will be cloned into this repository - -
-
-
Framework
-
- - -
-
-
-
Git account
+
- ( - - {gitAccounts.map((account, key) => ( - - ))} - - )} + Create a repository + + The project will be cloned into this repository + +
+
+ Framework +
-
-
-
Name the repo
+
+ Git account + +
- + +
+
+
-
-
- -
-
-
); From 207b32ce65afc30c7354ddf1d14b80896c16c577 Mon Sep 17 00:00:00 2001 From: Andre H Date: Fri, 1 Mar 2024 11:23:38 +0800 Subject: [PATCH 06/15] =?UTF-8?q?=E2=9A=A1=EF=B8=8F=20feat:=20integrate=20?= =?UTF-8?q?useform?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../projects/create/template/index.tsx | 68 ++++++++++++++----- 1 file changed, 50 insertions(+), 18 deletions(-) diff --git a/packages/frontend/src/pages/org-slug/projects/create/template/index.tsx b/packages/frontend/src/pages/org-slug/projects/create/template/index.tsx index 8f8a0f39..8364f60a 100644 --- a/packages/frontend/src/pages/org-slug/projects/create/template/index.tsx +++ b/packages/frontend/src/pages/org-slug/projects/create/template/index.tsx @@ -1,5 +1,5 @@ import React, { useCallback, useEffect, useState } from 'react'; -import { useForm, SubmitHandler } from 'react-hook-form'; +import { useForm, SubmitHandler, Controller } from 'react-hook-form'; import { useNavigate, useOutletContext, useParams } from 'react-router-dom'; import toast from 'react-hot-toast'; import assert from 'assert'; @@ -10,7 +10,7 @@ import { Template } from '../../../../../types'; import { Heading } from 'components/shared/Heading'; import { Input } from 'components/shared/Input'; import { Radio } from 'components/shared/Radio'; -import { Select } from 'components/shared/Select'; +import { Select, SelectOption } from 'components/shared/Select'; import { ArrowRightCircleFilledIcon, GitIcon, @@ -40,12 +40,12 @@ const CreateRepo = () => { const FRAMEWORK_OPTIONS = [ { - value: 'react-native', + value: 'React', label: 'React Native', leftIcon: , }, { - value: 'expo', + value: 'Expo', label: 'Expo', leftIcon: , }, @@ -114,7 +114,7 @@ const CreateRepo = () => { fetchUserAndOrgs(); }, [octokit]); - const { handleSubmit, reset } = useForm({ + const { handleSubmit, control, reset } = useForm({ defaultValues: { framework: 'React', repoName: '', @@ -140,29 +140,61 @@ const CreateRepo = () => {
Framework - ( + + )} />
Git account - onChange((value as SelectOption).value)} + options={ + gitAccounts.map((account) => ({ + value: account, + label: account, + })) ?? [] + } + /> + )} />
Name the repo - + ( + + )} + />
- + ( + + )} + />