diff --git a/README.md b/README.md index c72bcf02..a4980745 100644 --- a/README.md +++ b/README.md @@ -1 +1,27 @@ # snowballtools + +- Clone the `snowballtools` repo + + ```bash + git clone git@github.com:deep-stack/snowballtools.git + ``` + +- In root of the repo, install depedencies + + ```bash + yarn + ``` + +- Change directory to `packages/frontend` + + ```bash + cd packages/frontend + ``` + +- Start the React application + + ```bash + yarn start + ``` + +- The React application will be running in `http://localhost:3000/` diff --git a/packages/frontend/package.json b/packages/frontend/package.json index 78989f6a..0f29f66a 100644 --- a/packages/frontend/package.json +++ b/packages/frontend/package.json @@ -12,6 +12,7 @@ "@types/react-dom": "^18.2.17", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-router-dom": "^6.20.1", "react-scripts": "5.0.1", "typescript": "^4.9.5", "web-vitals": "^2.1.4" diff --git a/packages/frontend/public/index.html b/packages/frontend/public/index.html index aa069f27..e65acb3d 100644 --- a/packages/frontend/public/index.html +++ b/packages/frontend/public/index.html @@ -1,4 +1,4 @@ - + diff --git a/packages/frontend/src/App.tsx b/packages/frontend/src/App.tsx index 2e929cf6..199945f3 100644 --- a/packages/frontend/src/App.tsx +++ b/packages/frontend/src/App.tsx @@ -1,29 +1,19 @@ import React from 'react'; -import logo from './logo.svg'; +import { createBrowserRouter, RouterProvider } from 'react-router-dom'; + +import Dashboard from './pages/dashboard'; +import { dashboardRoutes } from './pages/dashboard/routes'; + +const router = createBrowserRouter([ + { + path: '/', + element: , + children: dashboardRoutes, + }, +]); function App() { - return ( -
-
- logo -

- Edit src/App.tsx and save to reload. -

- - Learn React - -
-
- ); + return ; } export default App; diff --git a/packages/frontend/src/components/dashboard/Sidebar.tsx b/packages/frontend/src/components/dashboard/Sidebar.tsx new file mode 100644 index 00000000..cde31862 --- /dev/null +++ b/packages/frontend/src/components/dashboard/Sidebar.tsx @@ -0,0 +1,37 @@ +import React from 'react'; +import { NavLink } from 'react-router-dom'; + +const Sidebar = () => { + return ( +
+
+
+

Snowball

+
+
Organization
+
+ (isActive ? 'text-blue-500' : '')} + > + Projects + +
+
+ (isActive ? 'text-blue-500' : '')} + > + Settings + +
+
+
+
Documentation
+
Support
+
+
+ ); +}; + +export default Sidebar; diff --git a/packages/frontend/src/pages/dashboard/CreateProject.tsx b/packages/frontend/src/pages/dashboard/CreateProject.tsx new file mode 100644 index 00000000..36f2f493 --- /dev/null +++ b/packages/frontend/src/pages/dashboard/CreateProject.tsx @@ -0,0 +1,9 @@ +import React from 'react'; + +const CreateProject = () => { + return ( +
Create new project page
+ ); +}; + +export default CreateProject; diff --git a/packages/frontend/src/pages/dashboard/Project.tsx b/packages/frontend/src/pages/dashboard/Project.tsx new file mode 100644 index 00000000..0b98f12e --- /dev/null +++ b/packages/frontend/src/pages/dashboard/Project.tsx @@ -0,0 +1,10 @@ +import React from 'react'; +import { useParams } from 'react-router-dom'; + +const Project = () => { + const { id } = useParams(); + + return
Project page: {id}
; +}; + +export default Project; diff --git a/packages/frontend/src/pages/dashboard/Projects.tsx b/packages/frontend/src/pages/dashboard/Projects.tsx new file mode 100644 index 00000000..5a69975c --- /dev/null +++ b/packages/frontend/src/pages/dashboard/Projects.tsx @@ -0,0 +1,7 @@ +import React from 'react'; + +const Projects = () => { + return
Projects
; +}; + +export default Projects; diff --git a/packages/frontend/src/pages/dashboard/Settings.tsx b/packages/frontend/src/pages/dashboard/Settings.tsx new file mode 100644 index 00000000..cf834b75 --- /dev/null +++ b/packages/frontend/src/pages/dashboard/Settings.tsx @@ -0,0 +1,7 @@ +import React from 'react'; + +const Settings = () => { + return
Settings page
; +}; + +export default Settings; diff --git a/packages/frontend/src/pages/dashboard/index.tsx b/packages/frontend/src/pages/dashboard/index.tsx new file mode 100644 index 00000000..f522e177 --- /dev/null +++ b/packages/frontend/src/pages/dashboard/index.tsx @@ -0,0 +1,19 @@ +import React from 'react'; +import { Outlet } from 'react-router-dom'; + +import Sidebar from '../../components/dashboard/Sidebar'; + +const Dashboard = () => { + return ( +
+
+ +
+
+ +
+
+ ); +}; + +export default Dashboard; diff --git a/packages/frontend/src/pages/dashboard/routes.tsx b/packages/frontend/src/pages/dashboard/routes.tsx new file mode 100644 index 00000000..1533321f --- /dev/null +++ b/packages/frontend/src/pages/dashboard/routes.tsx @@ -0,0 +1,25 @@ +import React from 'react'; + +import Projects from './Projects'; +import Project from './Project'; +import Settings from './Settings'; +import CreateProject from './CreateProject'; + +export const dashboardRoutes = [ + { + path: '/', + element: , + }, + { + path: 'settings', + element: , + }, + { + path: ':id', + element: , + }, + { + path: 'create', + element: , + }, +]; diff --git a/yarn.lock b/yarn.lock index 685fa29d..d2096e98 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2014,6 +2014,11 @@ schema-utils "^3.0.0" source-map "^0.7.3" +"@remix-run/router@1.13.1": + version "1.13.1" + resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.13.1.tgz#07e2a8006f23a3bc898b3f317e0a58cc8076b86e" + integrity sha512-so+DHzZKsoOcoXrILB4rqDkMDy7NLMErRdOxvzvOKb507YINKUP4Di+shbTZDhSE/pBZ+vr7XGIpcOO0VLSA+Q== + "@rollup/plugin-babel@^5.2.0": version "5.3.1" resolved "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz" @@ -10140,6 +10145,21 @@ react-refresh@^0.11.0: resolved "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz" integrity sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A== +react-router-dom@^6.20.1: + version "6.20.1" + resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.20.1.tgz#e34f8075b9304221420de3609e072bb349824984" + integrity sha512-npzfPWcxfQN35psS7rJgi/EW0Gx6EsNjfdJSAk73U/HqMEJZ2k/8puxfwHFgDQhBGmS3+sjnGbMdMSV45axPQw== + dependencies: + "@remix-run/router" "1.13.1" + react-router "6.20.1" + +react-router@6.20.1: + version "6.20.1" + resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.20.1.tgz#e8cc326031d235aaeec405bb234af77cf0fe75ef" + integrity sha512-ccvLrB4QeT5DlaxSFFYi/KR8UMQ4fcD8zBcR71Zp1kaYTC5oJKYAp1cbavzGrogwxca+ubjkd7XjFZKBW8CxPA== + dependencies: + "@remix-run/router" "1.13.1" + react-scripts@5.0.1: version "5.0.1" resolved "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz"