Skip to content

Commit

Permalink
framing and routing i guess?
Browse files Browse the repository at this point in the history
  • Loading branch information
sphinxrave committed Sep 14, 2023
1 parent 308687a commit 6a4e363
Show file tree
Hide file tree
Showing 8 changed files with 1,419 additions and 749 deletions.
1,536 changes: 1,158 additions & 378 deletions packages/react/package-lock.json

Large diffs are not rendered by default.

42 changes: 22 additions & 20 deletions packages/react/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -10,42 +10,44 @@
"preview": "vite preview"
},
"dependencies": {
"@radix-ui/themes": "^0.0.43",
"@tanstack/react-query": "^4.32.6",
"@radix-ui/themes": "^1.1.2",
"@tanstack/react-query": "^4.35.0",
"date-fns": "^2.30.0",
"i18next": "^23.4.2",
"i18next": "^23.5.1",
"i18next-browser-languagedetector": "^7.1.0",
"i18next-http-backend": "^2.2.1",
"i18next-http-backend": "^2.2.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-grid-layout": "^1.3.4",
"react-grid-layout": "^1.4.0",
"react-helmet-async": "^1.3.0",
"react-i18next": "^13.0.3",
"react-icons": "^4.10.1",
"react-player": "^2.12.0",
"react-i18next": "^13.2.2",
"react-icons": "^4.11.0",
"react-player": "^2.13.0",
"react-query": "^3.39.3",
"react-router-dom": "^6.14.2",
"react-router-dom": "^6.15.0",
"react-use": "^17.4.0",
"valtio": "^1.11.1",
"valtio": "^1.11.2",
"zustand": "^4.4.1"
},
"devDependencies": {
"@types/react": "^18.2.18",
"@types/react": "^18.2.21",
"@types/react-dom": "^18.2.7",
"@typescript-eslint/eslint-plugin": "^6.2.1",
"@typescript-eslint/parser": "^6.2.1",
"@typescript-eslint/eslint-plugin": "^6.7.0",
"@typescript-eslint/parser": "^6.7.0",
"@vitejs/plugin-react": "^4.0.4",
"@vitejs/plugin-react-swc": "^3.3.2",
"autoprefixer": "^10.4.14",
"autoprefixer": "^10.4.15",
"cross-env": "^7.0.3",
"eslint": "^8.46.0",
"eslint": "^8.49.0",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.3",
"postcss": "^8.4.27",
"prettier": "^3.0.1",
"postcss": "^8.4.29",
"prettier": "^3.0.3",
"react-git-info": "^2.0.1",
"sass": "^1.66.1",
"tailwindcss": "^3.3.3",
"typescript": "^5.1.6",
"vite": "^4.4.8"
"typescript": "^5.2.2",
"typescript-plugin-css-modules": "^5.0.1",
"vite": "^4.4.9"
}
}
}
44 changes: 44 additions & 0 deletions packages/react/src/components/layout/Frame.module.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
$header-height: 40px;
$sidebar-width: 300px;
$responsive-breakpoint: 768px;

.layout {
display: grid;
grid-template-rows: $header-height auto;
grid-template-columns: $sidebar-width auto;
grid-template-areas:
'sidebar header'
'sidebar content'
;
height: 100vh;

>header {
grid-area: header;
}

>aside {
grid-area: sidebar;
}

>main {
grid-area: content;
overflow-y: auto;
}

@media (--sm) {
grid-template-areas:
'header header'
'content content'
;

>aside {
grid-area: content;
position: relative;
left: 0;
}

>aside.collapsed {
left: -100%;
}
}
}
358 changes: 14 additions & 344 deletions packages/react/src/components/layout/Frame.tsx

Large diffs are not rendered by default.

3 changes: 2 additions & 1 deletion packages/react/src/main.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,8 @@ import { Frame } from "./components/layout/Frame.tsx";
ReactDOM.createRoot(document.getElementById("root")!).render(
<React.StrictMode>
<Theme accentColor="amber" appearance="dark">
<Frame />
<Frame>
</Frame>
</Theme>
</React.StrictMode>,
);
151 changes: 151 additions & 0 deletions packages/react/src/routes/router.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,151 @@
import { Outlet, createBrowserRouter, redirect } from "react-router-dom";

const settings = {}; // TODO: replace with your actual settings store
const site = {}; // TODO: replace with your actual site store

const router = createBrowserRouter([
{
path: "/",
element: <div />,
loader: async ({ params }) => {
// Replace with your logic
const orgInParam = params.org; // TODO: Get the parameter from the current location

if (orgInParam || settings.defaultOpen === "Home" || !site.jwtToken) {
// Do the necessary redirect logic here
return redirect('/org/' + params.org)
} else {
// Do the necessary redirect logic here
return redirect('/favorites/')
// return <div>Redirecting to Favorites...</div>;
}
}
},
{
path: "/favorites",
element: <div>Favorites</div>,
},
{
path: "/search",
element: <div>Search</div>,
},
{
path: "/org/:org",
element: <div>Home_Org</div>,
},
{
path: "/channels",
element: <RedirectToChannelsOrg />,
},
{
path: "/org404",
element: <div>OrgNotFound</div>,
},
{
path: "/org/:org/channels",
element: <div>Channels_Org</div>,
},
{
path: "/channel/:id",
element: <Channel />,
children: [
{
path: "about",
element: <div>Channel_About</div>,
},
{
path: "clips",
element: <div>Channel_Clips</div>,
},
{
path: "collabs",
element: <div>Channel_Collabs</div>,
},
{
path: "music",
element: <RedirectToMusicdex />,
},
{
path: "",
element: <div>Channel</div>,
},
],
},
{
path: "/profile",
element: <div>Profile</div>,
},
{
path: "/settings",
element: <Settings />,
children: [
// Add children routes similar to above pattern
],
},
{
path: "/playlists",
element: <div>Playlists</div>,
},
{
path: "/about",
element: <About />,
children: [
// Add children routes similar to above pattern
],
},
{
path: "/kitchensink",
element: <div>Kitchen Sink</div>,
},
{
path: "/login",
element: <div>Login</div>,
},
{
path: "/tlclient",
element: <div>Translation Client</div>,
},
{
path: "/scripteditor",
element: <div>Translation Scripter</div>,
},
{
path: "/watch/:id",
element: <div>Watch</div>,
},
{
path: "/debug",
element: <div>Debug</div>,
},
{
path: "/debug/run",
element: <div>Debug Run</div>,
},
]);

export default router;

function RedirectToChannelsOrg() {
// Replace with your logic
return <div>Redirecting to Channels_Org...</div>;
}

function Channel() {
// Add logic if needed
return <div>Channel main page<Outlet /></div>;
}

function RedirectToMusicdex() {
// Add logic for redirection
return <div>Redirecting to Musicdex...</div>;
}

function Settings() {
// Add logic if needed
return <div>Settings main page<Outlet /></div>;
}

function About() {
// Add logic if needed
return <div>About main page<Outlet /></div>;
}
29 changes: 23 additions & 6 deletions packages/react/tsconfig.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,24 +2,41 @@
"compilerOptions": {
"target": "ES2020",
"useDefineForClassFields": true,
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"lib": [
"ES2020",
"DOM",
"DOM.Iterable"
],
"module": "ESNext",
"skipLibCheck": true,

/* Plugins */
"plugins": [
{
"name": "typescript-plugin-css-modules",
"options": {
"classnameTransform": "camelCaseOnly",
}
}
],
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx",

/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true
},
"include": ["src"],
"references": [{ "path": "./tsconfig.node.json" }]
}
"include": [
"src"
],
"references": [
{
"path": "./tsconfig.node.json"
}
]
}
5 changes: 5 additions & 0 deletions packages/react/vite.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,4 +6,9 @@ import react from "@vitejs/plugin-react-swc";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
css: {
modules: {
localsConvention: 'camelCaseOnly'
}
}
});

0 comments on commit 6a4e363

Please sign in to comment.