From 4b5949cd8192f4a3e6ffbef47a0db35ad2172d8b Mon Sep 17 00:00:00 2001 From: Nabarun Gogoi Date: Wed, 13 Dec 2023 13:55:25 +0530 Subject: [PATCH] Implement page for creating new project (#8) * Implement basic layout to create new project * Use dummy datas to populate the cards * Format repository updated time using luxon * Move repository list to components folder --------- Co-authored-by: neeraj --- packages/frontend/package.json | 4 ++- packages/frontend/public/index.html | 2 +- packages/frontend/src/assets/repository.json | 26 +++++++++++++++++ packages/frontend/src/assets/template.json | 22 ++++++++++++++ .../src/components/ProjectRepoCard.tsx | 24 +++++++++++++++ .../src/components/RepositoryList.tsx | 29 +++++++++++++++++++ .../frontend/src/components/TemplateCard.tsx | 20 +++++++++++++ packages/frontend/src/pages/Projects.tsx | 9 ++++-- .../src/pages/projects/CreateProject.tsx | 29 ++++++++++++++++++- yarn.lock | 10 +++++++ 10 files changed, 169 insertions(+), 6 deletions(-) create mode 100644 packages/frontend/src/assets/repository.json create mode 100644 packages/frontend/src/assets/template.json create mode 100644 packages/frontend/src/components/ProjectRepoCard.tsx create mode 100644 packages/frontend/src/components/RepositoryList.tsx create mode 100644 packages/frontend/src/components/TemplateCard.tsx diff --git a/packages/frontend/package.json b/packages/frontend/package.json index df74602b..4f713602 100644 --- a/packages/frontend/package.json +++ b/packages/frontend/package.json @@ -16,7 +16,8 @@ "react-router-dom": "^6.20.1", "react-scripts": "5.0.1", "typescript": "^4.9.5", - "web-vitals": "^2.1.4" + "web-vitals": "^2.1.4", + "luxon": "^3.4.4" }, "scripts": { "start": "react-scripts start", @@ -46,6 +47,7 @@ ] }, "devDependencies": { + "@types/luxon": "^3.3.7", "@typescript-eslint/eslint-plugin": "^6.13.2", "@typescript-eslint/parser": "^6.13.2", "eslint": "^8.55.0", diff --git a/packages/frontend/public/index.html b/packages/frontend/public/index.html index e65acb3d..27fb9d99 100644 --- a/packages/frontend/public/index.html +++ b/packages/frontend/public/index.html @@ -24,7 +24,7 @@ work correctly both with client-side routing and a non-root public URL. Learn how to configure a non-root public URL by running `npm run build`. --> - React App + Snowball diff --git a/packages/frontend/src/assets/repository.json b/packages/frontend/src/assets/repository.json new file mode 100644 index 00000000..a1f5d644 --- /dev/null +++ b/packages/frontend/src/assets/repository.json @@ -0,0 +1,26 @@ +[ + { + "title": "Project-101", + "updatedTime": "2023-05-15T08:30:00" + }, + { + "title": "Project-102", + "updatedTime": "2023-05-15T08:30:00" + }, + { + "title": "Project-103", + "updatedTime": "2023-12-11T04:20:00" + }, + { + "title": "Project-104", + "updatedTime": "2023-12-11T04:27:00" + }, + { + "title": "Project-105", + "updatedTime": "2023-12-11T04:41:00" + }, + { + "title": "Project-106", + "updatedTime": "2023-12-11T04:32:00" + } +] diff --git a/packages/frontend/src/assets/template.json b/packages/frontend/src/assets/template.json new file mode 100644 index 00000000..b6008915 --- /dev/null +++ b/packages/frontend/src/assets/template.json @@ -0,0 +1,22 @@ +[ + { + "framework": "React", + "icon": "^" + }, + { + "framework": "Reactnative", + "icon": "^" + }, + { + "framework": "Kotlin", + "icon": "^" + }, + { + "framework": "Swift", + "icon": "^" + }, + { + "framework": "Webapp", + "icon": "^" + } +] diff --git a/packages/frontend/src/components/ProjectRepoCard.tsx b/packages/frontend/src/components/ProjectRepoCard.tsx new file mode 100644 index 00000000..684da84f --- /dev/null +++ b/packages/frontend/src/components/ProjectRepoCard.tsx @@ -0,0 +1,24 @@ +import React from 'react'; +import { DateTime } from 'luxon'; + +interface RepositoryDetails { + title: string; + updatedTime: string; +} +interface ProjectRepoCardProps { + repository: RepositoryDetails; +} + +const ProjectRepoCard: React.FC = ({ repository }) => { + return ( +
+
^
+
+

{repository.title}

+

{DateTime.fromISO(repository.updatedTime).toRelative()}

+
+
+ ); +}; + +export default ProjectRepoCard; diff --git a/packages/frontend/src/components/RepositoryList.tsx b/packages/frontend/src/components/RepositoryList.tsx new file mode 100644 index 00000000..4b2cf24d --- /dev/null +++ b/packages/frontend/src/components/RepositoryList.tsx @@ -0,0 +1,29 @@ +import React from 'react'; + +import SearchBar from './SearchBar'; +import ProjectRepoCard from './ProjectRepoCard'; +import repositoryDetails from '../assets/repository.json'; + +const RepositoryList = () => { + return ( +
+
+
+ +
+
+ {}} placeholder="Search for repositorry" /> +
+
+ {repositoryDetails.map((repo, key) => { + return ; + })} +
+ ); +}; + +export default RepositoryList; diff --git a/packages/frontend/src/components/TemplateCard.tsx b/packages/frontend/src/components/TemplateCard.tsx new file mode 100644 index 00000000..1c9b567f --- /dev/null +++ b/packages/frontend/src/components/TemplateCard.tsx @@ -0,0 +1,20 @@ +import React from 'react'; + +interface TemplateDetails { + framework: string; + icon: string; +} +interface TemplateCardProps { + framework: TemplateDetails; +} + +const TemplateCard: React.FC = ({ framework }) => { + return ( +
+ {framework.icon} + {framework.framework} +
+ ); +}; + +export default TemplateCard; diff --git a/packages/frontend/src/pages/Projects.tsx b/packages/frontend/src/pages/Projects.tsx index c45b154c..e5d9181e 100644 --- a/packages/frontend/src/pages/Projects.tsx +++ b/packages/frontend/src/pages/Projects.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import { Link } from 'react-router-dom'; import SearchBar from '../components/SearchBar'; import Card from '../components/Card'; @@ -21,9 +22,11 @@ const Projects = () => {
{/* TODO: Create button component */} - + + +
diff --git a/packages/frontend/src/pages/projects/CreateProject.tsx b/packages/frontend/src/pages/projects/CreateProject.tsx index 36f2f493..c80054d0 100644 --- a/packages/frontend/src/pages/projects/CreateProject.tsx +++ b/packages/frontend/src/pages/projects/CreateProject.tsx @@ -1,8 +1,35 @@ import React from 'react'; +import { Link } from 'react-router-dom'; + +import templateDetails from '../../assets/template.json'; +import TemplateCard from '../../components/TemplateCard'; +import RepositoryList from '../../components/RepositoryList'; const CreateProject = () => { return ( -
Create new project page
+
+
+
+

Create new project

+
+
+ + + +
+
+
+
Start with template
+
+ {templateDetails.map((framework, key) => { + return ; + })} +
+
Import a repository
+ +
); }; diff --git a/yarn.lock b/yarn.lock index c30b9485..182982f2 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2475,6 +2475,11 @@ resolved "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz" integrity sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ== +"@types/luxon@^3.3.7": + version "3.3.7" + resolved "https://registry.yarnpkg.com/@types/luxon/-/luxon-3.3.7.tgz#043d413b6492a012de47503907bdf3ec4f827933" + integrity sha512-gKc9P2d4g5uYwmy4s/MO/yOVPmvHyvzka1YH6i5dM03UrFofHSmgc0D0ymbDRStFWHusk6cwwF6nhLm/ckBbbQ== + "@types/mime@*", "@types/mime@^1": version "1.3.5" resolved "https://registry.npmjs.org/@types/mime/-/mime-1.3.5.tgz" @@ -8070,6 +8075,11 @@ lru-cache@^7.4.4, lru-cache@^7.5.1, lru-cache@^7.7.1: resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-10.1.0.tgz#2098d41c2dc56500e6c88584aa656c84de7d0484" integrity sha512-/1clY/ui8CzjKFyjdvwPWJUYKiFVXG2I2cY0ssG7h4+hwk+XOIX7ZSG9Q7TW8TW3Kp3BUSqgFWBLgL4PJ+Blag== +luxon@^3.4.4: + version "3.4.4" + resolved "https://registry.yarnpkg.com/luxon/-/luxon-3.4.4.tgz#cf20dc27dc532ba41a169c43fdcc0063601577af" + integrity sha512-zobTr7akeGHnv7eBOXcRgMeCP6+uyYsczwmeRCauvpvaAltgNyTbLH/+VaEAPUeWBT+1GuNmz4wC/6jtQzbbVA== + lz-string@^1.5.0: version "1.5.0" resolved "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz"