admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat: onboarding ui flow (#464)

Browse Source 
* feat: onboarding ui flow

* fix: route naming and auth

* fix: clean unused imports

* fix: remove react.fc

* fix: infra dev remove package.json

* fix: remove usefull memoization

* fix: button stories

* fix: use type instead of interface

* fix: remove debug
This commit is contained in:
Jérémy M
2023-06-30 08:26:06 +02:00
committed by GitHub
parent 3731380ce6
commit 433962321a
45 changed files with 1461 additions and 401 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
front/src/App.tsx
View File

@ -1,10 +1,15 @@
import { Navigate, Route, Routes } from 'react-router-dom';
import { Navigate, Route, Routes, useLocation } from 'react-router-dom';
import { AnimatePresence, LayoutGroup } from 'framer-motion';
import { useTrackPageView } from '@/analytics/hooks/useTrackPageView';
import { RequireAuth } from '@/auth/components/RequireAuth';
import { RequireNotAuth } from '@/auth/components/RequireNotAuth';
import { AuthModal } from '@/auth/components/ui/Modal';
import { useGoToHotkeys } from '@/hotkeys/hooks/useGoToHotkeys';
import { AuthLayout } from '@/ui/layout/AuthLayout';
import { DefaultLayout } from '@/ui/layout/DefaultLayout';
import { CreateProfile } from '~/pages/auth/CreateProfile';
import { CreateWorkspace } from '~/pages/auth/CreateWorkspace';
import { Index } from '~/pages/auth/Index';
import { PasswordLogin } from '~/pages/auth/PasswordLogin';
import { Verify } from '~/pages/auth/Verify';
@ -13,6 +18,29 @@ import { Opportunities } from '~/pages/opportunities/Opportunities';
import { People } from '~/pages/people/People';
import { SettingsProfile } from '~/pages/settings/SettingsProfile';
/**
* AuthRoutes is used to allow transitions between auth pages with framer-motion.
*/
function AuthRoutes() {
const location = useLocation();
return (
<LayoutGroup>
<AuthModal>
<AnimatePresence mode="wait">
<Routes location={location} key={location.pathname}>
<Route path="" element={<Index />} />
<Route path="callback" element={<Verify />} />
<Route path="password-login" element={<PasswordLogin />} />
<Route path="create/workspace" element={<CreateWorkspace />} />
<Route path="create/profile" element={<CreateProfile />} />
</Routes>
</AnimatePresence>
</AuthModal>
</LayoutGroup>
);
}
export function App() {
useGoToHotkeys('p', '/people');
useGoToHotkeys('c', '/companies');
@ -49,11 +77,9 @@ export function App() {
path="auth/*"
element={
<RequireNotAuth>
<Routes>
<Route path="" element={<Index />} />
<Route path="callback" element={<Verify />} />
<Route path="password-login" element={<PasswordLogin />} />
</Routes>
<AuthLayout>
<AuthRoutes />
</AuthLayout>
</RequireNotAuth>
}
/>