lincd-cli 0.2.65 → 0.2.66
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.husky/post-merge +3 -3
- package/.husky/pre-commit +4 -4
- package/.prettierignore +3 -3
- package/.prettierrc.json +23 -23
- package/LICENSE +373 -373
- package/README.md +24 -24
- package/defaults/app/Gruntfile.js +5 -5
- package/defaults/app/index.html +12 -12
- package/defaults/app/package.json +30 -30
- package/defaults/app/src/App.scss +2 -2
- package/defaults/app/src/App.tsx +4 -4
- package/defaults/app/src/index.tsx +10 -10
- package/defaults/app/tsconfig-es5.json +18 -18
- package/defaults/app/tsconfig.json +21 -21
- package/defaults/app-static/capacitor.config.ts +48 -48
- package/defaults/app-static/src/index-static.tsx +27 -27
- package/defaults/app-static/web/index.html +21 -21
- package/defaults/app-with-backend/.env-cmdrc.json +16 -16
- package/defaults/app-with-backend/.eslintignore +2 -2
- package/defaults/app-with-backend/.eslintrc.json +40 -40
- package/defaults/app-with-backend/.husky/post-merge +3 -3
- package/defaults/app-with-backend/.husky/pre-commit +4 -4
- package/defaults/app-with-backend/.prettierignore +3 -3
- package/defaults/app-with-backend/.prettierrc.json +27 -27
- package/defaults/app-with-backend/.run/start.run.xml +11 -11
- package/defaults/app-with-backend/.vscode/launch.json +11 -11
- package/defaults/app-with-backend/.yarn/plugins/@yarnpkg/plugin-version.cjs +550 -550
- package/defaults/app-with-backend/.yarn/releases/yarn-3.6.1.cjs +874 -874
- package/defaults/app-with-backend/babel.config.js +4 -4
- package/defaults/app-with-backend/gitignore.template +22 -22
- package/defaults/app-with-backend/lincd.config.js +7 -7
- package/defaults/app-with-backend/package.json +92 -92
- package/defaults/app-with-backend/pm2.config.js +12 -12
- package/defaults/app-with-backend/readme.md +8 -8
- package/defaults/app-with-backend/scripts/build.js +41 -41
- package/defaults/app-with-backend/scripts/setup_storage.js +6 -6
- package/defaults/app-with-backend/scripts/start-server.js +11 -11
- package/defaults/app-with-backend/src/App.scss +6 -6
- package/defaults/app-with-backend/src/App.tsx +34 -34
- package/defaults/app-with-backend/src/backend.ts +1 -1
- package/defaults/app-with-backend/src/components/Error.scss +9 -9
- package/defaults/app-with-backend/src/components/Error.tsx +14 -14
- package/defaults/app-with-backend/src/components/Spinner.scss +17 -17
- package/defaults/app-with-backend/src/components/Spinner.tsx +12 -12
- package/defaults/app-with-backend/src/index.tsx +32 -32
- package/defaults/app-with-backend/src/layout/DefaultLayout.scss +6 -6
- package/defaults/app-with-backend/src/layout/DefaultLayout.tsx +13 -13
- package/defaults/app-with-backend/src/layout/Header.scss +10 -10
- package/defaults/app-with-backend/src/layout/Header.tsx +23 -23
- package/defaults/app-with-backend/src/package.ts +14 -14
- package/defaults/app-with-backend/src/pages/Home.scss +15 -15
- package/defaults/app-with-backend/src/pages/Home.tsx +21 -21
- package/defaults/app-with-backend/src/pages/Page1.tsx +11 -11
- package/defaults/app-with-backend/src/pages/PageNotFound.tsx +11 -11
- package/defaults/app-with-backend/src/pages/Signin.tsx +12 -12
- package/defaults/app-with-backend/src/routes.tsx +72 -72
- package/defaults/app-with-backend/src/scss/global-overwrites.scss +11 -11
- package/defaults/app-with-backend/src/scss/variables.scss +23 -23
- package/defaults/app-with-backend/tsconfig.json +21 -21
- package/defaults/app-with-backend/yarnrc.yml.template +8 -8
- package/defaults/capacitor/scripts/fix-namespace.js +41 -41
- package/defaults/component.scss +2 -2
- package/defaults/component.tsx +11 -11
- package/defaults/package/package.json +38 -38
- package/defaults/package/src/components/ExampleComponent.tsx +8 -8
- package/defaults/package/src/data/example-ontology.json +20 -20
- package/defaults/package/src/data/example-ontology.json.d.ts +1 -1
- package/defaults/package/src/index.ts +7 -7
- package/defaults/package/src/ontologies/example-ontology.ts +36 -36
- package/defaults/package/src/package.ts +4 -4
- package/defaults/package/src/shapes/ExampleShapeClass.ts +29 -29
- package/defaults/set-component.tsx +15 -15
- package/defaults/shape.ts +8 -8
- package/expose-grunt.js +1 -1
- package/lib/cli-methods.js +4 -1
- package/lib/config-grunt.js +5 -5
- package/lib/plugins/check-imports.js +1 -1
- package/package.json +1 -1
- package/.yarn/plugins/@yarnpkg/plugin-version.cjs +0 -550
- package/.yarn/versions/d035ef78.yml +0 -0
|
@@ -1,32 +1,32 @@
|
|
|
1
|
-
import {initFrontend} from 'lincd-server-utils/lib/utils/Frontend';
|
|
2
|
-
import {hydrateRoot} from 'react-dom/client';
|
|
3
|
-
import {BrowserRouter} from 'react-router-dom';
|
|
4
|
-
import App from './App';
|
|
5
|
-
import React from 'react';
|
|
6
|
-
import {Storage} from 'lincd/lib/utils/Storage';
|
|
7
|
-
import {BackendAPIStore} from 'lincd-server/lib/shapes/BackendAPIStore';
|
|
8
|
-
import {AppContextProvider} from 'lincd-server-utils/lib/components/AppContext';
|
|
9
|
-
|
|
10
|
-
window['$RefreshReg$'] = () => {};
|
|
11
|
-
window['$RefreshSig$'] = () => () => {};
|
|
12
|
-
|
|
13
|
-
//forward all storage requests to the backend
|
|
14
|
-
export const store = new BackendAPIStore();
|
|
15
|
-
Storage.setDefaultStore(store);
|
|
16
|
-
|
|
17
|
-
initFrontend().then(() => {
|
|
18
|
-
hydrateRoot(
|
|
19
|
-
document,
|
|
20
|
-
<React.StrictMode>
|
|
21
|
-
<BrowserRouter>
|
|
22
|
-
<AppContextProvider
|
|
23
|
-
assets={window['assetManifest']}
|
|
24
|
-
requestLD={document.getElementById('request-ld')?.innerText}
|
|
25
|
-
requestObject={document.getElementById('request-json')?.innerText}
|
|
26
|
-
>
|
|
27
|
-
<App />
|
|
28
|
-
</AppContextProvider>
|
|
29
|
-
</BrowserRouter>
|
|
30
|
-
</React.StrictMode>,
|
|
31
|
-
);
|
|
32
|
-
});
|
|
1
|
+
import {initFrontend} from 'lincd-server-utils/lib/utils/Frontend';
|
|
2
|
+
import {hydrateRoot} from 'react-dom/client';
|
|
3
|
+
import {BrowserRouter} from 'react-router-dom';
|
|
4
|
+
import App from './App';
|
|
5
|
+
import React from 'react';
|
|
6
|
+
import {Storage} from 'lincd/lib/utils/Storage';
|
|
7
|
+
import {BackendAPIStore} from 'lincd-server/lib/shapes/BackendAPIStore';
|
|
8
|
+
import {AppContextProvider} from 'lincd-server-utils/lib/components/AppContext';
|
|
9
|
+
|
|
10
|
+
window['$RefreshReg$'] = () => {};
|
|
11
|
+
window['$RefreshSig$'] = () => () => {};
|
|
12
|
+
|
|
13
|
+
//forward all storage requests to the backend
|
|
14
|
+
export const store = new BackendAPIStore();
|
|
15
|
+
Storage.setDefaultStore(store);
|
|
16
|
+
|
|
17
|
+
initFrontend().then(() => {
|
|
18
|
+
hydrateRoot(
|
|
19
|
+
document,
|
|
20
|
+
<React.StrictMode>
|
|
21
|
+
<BrowserRouter>
|
|
22
|
+
<AppContextProvider
|
|
23
|
+
assets={window['assetManifest']}
|
|
24
|
+
requestLD={document.getElementById('request-ld')?.innerText}
|
|
25
|
+
requestObject={document.getElementById('request-json')?.innerText}
|
|
26
|
+
>
|
|
27
|
+
<App />
|
|
28
|
+
</AppContextProvider>
|
|
29
|
+
</BrowserRouter>
|
|
30
|
+
</React.StrictMode>,
|
|
31
|
+
);
|
|
32
|
+
});
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
.main {
|
|
2
|
-
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
|
|
3
|
-
Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
|
|
4
|
-
width: 66.6%;
|
|
5
|
-
margin: auto;
|
|
6
|
-
}
|
|
1
|
+
.main {
|
|
2
|
+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
|
|
3
|
+
Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
|
|
4
|
+
width: 66.6%;
|
|
5
|
+
margin: auto;
|
|
6
|
+
}
|
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import {Header} from './Header';
|
|
3
|
-
import './DefaultLayout.scss';
|
|
4
|
-
import style from './DefaultLayout.scss.json';
|
|
5
|
-
|
|
6
|
-
export function DefaultLayout({children}) {
|
|
7
|
-
return (
|
|
8
|
-
<main className={style.main}>
|
|
9
|
-
<Header />
|
|
10
|
-
{children}
|
|
11
|
-
</main>
|
|
12
|
-
);
|
|
13
|
-
}
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import {Header} from './Header';
|
|
3
|
+
import './DefaultLayout.scss';
|
|
4
|
+
import style from './DefaultLayout.scss.json';
|
|
5
|
+
|
|
6
|
+
export function DefaultLayout({children}) {
|
|
7
|
+
return (
|
|
8
|
+
<main className={style.main}>
|
|
9
|
+
<Header />
|
|
10
|
+
{children}
|
|
11
|
+
</main>
|
|
12
|
+
);
|
|
13
|
+
}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
.header {
|
|
2
|
-
display: block;
|
|
3
|
-
}
|
|
4
|
-
|
|
5
|
-
.menu {
|
|
6
|
-
margin: 1rem 0;
|
|
7
|
-
display: grid;
|
|
8
|
-
grid-template-columns: repeat(6, 1fr);
|
|
9
|
-
grid-gap: 1rem;
|
|
10
|
-
}
|
|
1
|
+
.header {
|
|
2
|
+
display: block;
|
|
3
|
+
}
|
|
4
|
+
|
|
5
|
+
.menu {
|
|
6
|
+
margin: 1rem 0;
|
|
7
|
+
display: grid;
|
|
8
|
+
grid-template-columns: repeat(6, 1fr);
|
|
9
|
+
grid-gap: 1rem;
|
|
10
|
+
}
|
|
@@ -1,23 +1,23 @@
|
|
|
1
|
-
import {Link} from 'react-router-dom';
|
|
2
|
-
import React from 'react';
|
|
3
|
-
import style from './Header.scss.json';
|
|
4
|
-
import './Header.scss';
|
|
5
|
-
import {ROUTES} from '../routes';
|
|
6
|
-
|
|
7
|
-
export function Header() {
|
|
8
|
-
return (
|
|
9
|
-
<header className={style.header}>
|
|
10
|
-
<h1>${name}</h1>
|
|
11
|
-
<nav className={style.menu}>
|
|
12
|
-
{Object.keys(ROUTES).map((key) => {
|
|
13
|
-
if (ROUTES[key].excludeFromMenu) return null;
|
|
14
|
-
return (
|
|
15
|
-
<Link key={key} to={ROUTES[key].path}>
|
|
16
|
-
{ROUTES[key].label || key}
|
|
17
|
-
</Link>
|
|
18
|
-
);
|
|
19
|
-
})}
|
|
20
|
-
</nav>
|
|
21
|
-
</header>
|
|
22
|
-
);
|
|
23
|
-
}
|
|
1
|
+
import {Link} from 'react-router-dom';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import style from './Header.scss.json';
|
|
4
|
+
import './Header.scss';
|
|
5
|
+
import {ROUTES} from '../routes';
|
|
6
|
+
|
|
7
|
+
export function Header() {
|
|
8
|
+
return (
|
|
9
|
+
<header className={style.header}>
|
|
10
|
+
<h1>${name}</h1>
|
|
11
|
+
<nav className={style.menu}>
|
|
12
|
+
{Object.keys(ROUTES).map((key) => {
|
|
13
|
+
if (ROUTES[key].excludeFromMenu) return null;
|
|
14
|
+
return (
|
|
15
|
+
<Link key={key} to={ROUTES[key].path}>
|
|
16
|
+
{ROUTES[key].label || key}
|
|
17
|
+
</Link>
|
|
18
|
+
);
|
|
19
|
+
})}
|
|
20
|
+
</nav>
|
|
21
|
+
</header>
|
|
22
|
+
);
|
|
23
|
+
}
|
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
import {linkedPackage} from 'lincd/lib/utils/Module';
|
|
2
|
-
|
|
3
|
-
export const {
|
|
4
|
-
linkedComponent,
|
|
5
|
-
linkedSetComponent,
|
|
6
|
-
linkedComponentClass,
|
|
7
|
-
linkedShape,
|
|
8
|
-
linkedUtil,
|
|
9
|
-
linkedOntology,
|
|
10
|
-
registerPackageExport,
|
|
11
|
-
registerPackageModule,
|
|
12
|
-
packageExports,
|
|
13
|
-
packageName,
|
|
14
|
-
} = linkedPackage('${hyphen_name}');
|
|
1
|
+
import {linkedPackage} from 'lincd/lib/utils/Module';
|
|
2
|
+
|
|
3
|
+
export const {
|
|
4
|
+
linkedComponent,
|
|
5
|
+
linkedSetComponent,
|
|
6
|
+
linkedComponentClass,
|
|
7
|
+
linkedShape,
|
|
8
|
+
linkedUtil,
|
|
9
|
+
linkedOntology,
|
|
10
|
+
registerPackageExport,
|
|
11
|
+
registerPackageModule,
|
|
12
|
+
packageExports,
|
|
13
|
+
packageName,
|
|
14
|
+
} = linkedPackage('${hyphen_name}');
|
|
@@ -1,15 +1,15 @@
|
|
|
1
|
-
.Home {
|
|
2
|
-
display: block;
|
|
3
|
-
margin: 1rem 0;
|
|
4
|
-
|
|
5
|
-
code {
|
|
6
|
-
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
|
|
7
|
-
monospace;
|
|
8
|
-
margin: 0.5rem 0;
|
|
9
|
-
|
|
10
|
-
pre {
|
|
11
|
-
padding: 1rem;
|
|
12
|
-
background-color: #bfe7fc;
|
|
13
|
-
}
|
|
14
|
-
}
|
|
15
|
-
}
|
|
1
|
+
.Home {
|
|
2
|
+
display: block;
|
|
3
|
+
margin: 1rem 0;
|
|
4
|
+
|
|
5
|
+
code {
|
|
6
|
+
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
|
|
7
|
+
monospace;
|
|
8
|
+
margin: 0.5rem 0;
|
|
9
|
+
|
|
10
|
+
pre {
|
|
11
|
+
padding: 1rem;
|
|
12
|
+
background-color: #bfe7fc;
|
|
13
|
+
}
|
|
14
|
+
}
|
|
15
|
+
}
|
|
@@ -1,21 +1,21 @@
|
|
|
1
|
-
import {DefaultLayout} from '../layout/DefaultLayout';
|
|
2
|
-
import './Home.scss';
|
|
3
|
-
import style from './Home.scss.json';
|
|
4
|
-
|
|
5
|
-
export default function Home() {
|
|
6
|
-
return (
|
|
7
|
-
<DefaultLayout>
|
|
8
|
-
<div className={style.Home}>
|
|
9
|
-
<h2>Get started</h2>
|
|
10
|
-
<p>
|
|
11
|
-
Your LINCD App is ready to go!
|
|
12
|
-
<br />
|
|
13
|
-
To edit this file, open:
|
|
14
|
-
</p>
|
|
15
|
-
<code>
|
|
16
|
-
<pre>/src/pages/Home.tsx</pre>
|
|
17
|
-
</code>
|
|
18
|
-
</div>
|
|
19
|
-
</DefaultLayout>
|
|
20
|
-
);
|
|
21
|
-
}
|
|
1
|
+
import {DefaultLayout} from '../layout/DefaultLayout';
|
|
2
|
+
import './Home.scss';
|
|
3
|
+
import style from './Home.scss.json';
|
|
4
|
+
|
|
5
|
+
export default function Home() {
|
|
6
|
+
return (
|
|
7
|
+
<DefaultLayout>
|
|
8
|
+
<div className={style.Home}>
|
|
9
|
+
<h2>Get started</h2>
|
|
10
|
+
<p>
|
|
11
|
+
Your LINCD App is ready to go!
|
|
12
|
+
<br />
|
|
13
|
+
To edit this file, open:
|
|
14
|
+
</p>
|
|
15
|
+
<code>
|
|
16
|
+
<pre>/src/pages/Home.tsx</pre>
|
|
17
|
+
</code>
|
|
18
|
+
</div>
|
|
19
|
+
</DefaultLayout>
|
|
20
|
+
);
|
|
21
|
+
}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import {DefaultLayout} from '../layout/DefaultLayout';
|
|
2
|
-
|
|
3
|
-
export default function Page1() {
|
|
4
|
-
return (
|
|
5
|
-
<DefaultLayout>
|
|
6
|
-
<div>
|
|
7
|
-
<h2>Page 1</h2>
|
|
8
|
-
</div>
|
|
9
|
-
</DefaultLayout>
|
|
10
|
-
);
|
|
11
|
-
}
|
|
1
|
+
import {DefaultLayout} from '../layout/DefaultLayout';
|
|
2
|
+
|
|
3
|
+
export default function Page1() {
|
|
4
|
+
return (
|
|
5
|
+
<DefaultLayout>
|
|
6
|
+
<div>
|
|
7
|
+
<h2>Page 1</h2>
|
|
8
|
+
</div>
|
|
9
|
+
</DefaultLayout>
|
|
10
|
+
);
|
|
11
|
+
}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import {DefaultLayout} from '../layout/DefaultLayout';
|
|
2
|
-
|
|
3
|
-
export default function PageNotFound() {
|
|
4
|
-
return (
|
|
5
|
-
<DefaultLayout>
|
|
6
|
-
<div>
|
|
7
|
-
<h2>Page not found</h2>
|
|
8
|
-
</div>
|
|
9
|
-
</DefaultLayout>
|
|
10
|
-
);
|
|
11
|
-
}
|
|
1
|
+
import {DefaultLayout} from '../layout/DefaultLayout';
|
|
2
|
+
|
|
3
|
+
export default function PageNotFound() {
|
|
4
|
+
return (
|
|
5
|
+
<DefaultLayout>
|
|
6
|
+
<div>
|
|
7
|
+
<h2>Page not found</h2>
|
|
8
|
+
</div>
|
|
9
|
+
</DefaultLayout>
|
|
10
|
+
);
|
|
11
|
+
}
|
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
import {DefaultLayout} from '../layout/DefaultLayout';
|
|
2
|
-
|
|
3
|
-
export default function Signin() {
|
|
4
|
-
return (
|
|
5
|
-
<DefaultLayout>
|
|
6
|
-
<div>
|
|
7
|
-
<h2>Sign In</h2>
|
|
8
|
-
See lincd.org for different ways to sign in.
|
|
9
|
-
</div>
|
|
10
|
-
</DefaultLayout>
|
|
11
|
-
);
|
|
12
|
-
}
|
|
1
|
+
import {DefaultLayout} from '../layout/DefaultLayout';
|
|
2
|
+
|
|
3
|
+
export default function Signin() {
|
|
4
|
+
return (
|
|
5
|
+
<DefaultLayout>
|
|
6
|
+
<div>
|
|
7
|
+
<h2>Sign In</h2>
|
|
8
|
+
See lincd.org for different ways to sign in.
|
|
9
|
+
</div>
|
|
10
|
+
</DefaultLayout>
|
|
11
|
+
);
|
|
12
|
+
}
|
|
@@ -1,72 +1,72 @@
|
|
|
1
|
-
import React, {lazy, Suspense} from 'react';
|
|
2
|
-
import {Route, Routes} from 'react-router-dom';
|
|
3
|
-
import {Spinner} from './components/Spinner';
|
|
4
|
-
import {RequireAuth} from 'lincd-auth/lib/components/RequireAuth';
|
|
5
|
-
import PageNotFound from './pages/PageNotFound';
|
|
6
|
-
|
|
7
|
-
//In React 18 you can use 'lazy' to import pages only when you need them.
|
|
8
|
-
//This will cause webpack to create multiple bundles, and the right bundles are automatically loaded
|
|
9
|
-
interface RouteObj {
|
|
10
|
-
path: string;
|
|
11
|
-
component?: React.LazyExoticComponent<() => JSX.Element>;
|
|
12
|
-
render?: () => JSX.Element;
|
|
13
|
-
requireAuth?: boolean;
|
|
14
|
-
excludeFromMenu?: boolean;
|
|
15
|
-
label?: string;
|
|
16
|
-
}
|
|
17
|
-
export const ROUTES: {[key: string]: RouteObj} = {
|
|
18
|
-
index: {
|
|
19
|
-
path: '/',
|
|
20
|
-
component: lazy(() => import('./pages/Home' /* webpackPrefetch: true */)),
|
|
21
|
-
label: 'Home',
|
|
22
|
-
},
|
|
23
|
-
page1: {
|
|
24
|
-
path: '/page1',
|
|
25
|
-
component: lazy(() => import('./pages/Page1' /* webpackPrefetch: true */)),
|
|
26
|
-
label: 'Protected page',
|
|
27
|
-
requireAuth: true,
|
|
28
|
-
},
|
|
29
|
-
signin: {
|
|
30
|
-
path: '/signin',
|
|
31
|
-
component: lazy(() => import('./pages/Signin' /* webpackPrefetch: true */)),
|
|
32
|
-
label: 'Sign In',
|
|
33
|
-
excludeFromMenu: true,
|
|
34
|
-
},
|
|
35
|
-
};
|
|
36
|
-
|
|
37
|
-
export default function AppRoutes() {
|
|
38
|
-
return (
|
|
39
|
-
<Routes>
|
|
40
|
-
{Object.keys(ROUTES).map((routeName) => {
|
|
41
|
-
const route = ROUTES[routeName];
|
|
42
|
-
const Component = route.component;
|
|
43
|
-
|
|
44
|
-
//if a route is marked as requireAuth, wrap it in the RequireAuth component and pass the signinRoute
|
|
45
|
-
const AuthGuard = route.requireAuth ? RequireAuth : React.Fragment;
|
|
46
|
-
const authProps = route.requireAuth
|
|
47
|
-
? {signinRoute: ROUTES.signin.path}
|
|
48
|
-
: {};
|
|
49
|
-
|
|
50
|
-
// define a render function that determines what to render based on the component and route.render
|
|
51
|
-
const renderRoute = () =>
|
|
52
|
-
// if a Component is defined, render it using JSX syntax (<Component />)
|
|
53
|
-
// if not, check if a route.render function is defined and call that render function if available.
|
|
54
|
-
// if neither Component nor route.render is defined, return null
|
|
55
|
-
Component ? <Component /> : route.render ? route.render() : null;
|
|
56
|
-
|
|
57
|
-
return (
|
|
58
|
-
<Route
|
|
59
|
-
key={route.path}
|
|
60
|
-
path={route.path}
|
|
61
|
-
element={
|
|
62
|
-
<AuthGuard {...authProps}>
|
|
63
|
-
<Suspense fallback={<Spinner />}>{renderRoute()}</Suspense>
|
|
64
|
-
</AuthGuard>
|
|
65
|
-
}
|
|
66
|
-
/>
|
|
67
|
-
);
|
|
68
|
-
})}
|
|
69
|
-
<Route path="*" element={<PageNotFound />} />
|
|
70
|
-
</Routes>
|
|
71
|
-
);
|
|
72
|
-
}
|
|
1
|
+
import React, {lazy, Suspense} from 'react';
|
|
2
|
+
import {Route, Routes} from 'react-router-dom';
|
|
3
|
+
import {Spinner} from './components/Spinner';
|
|
4
|
+
import {RequireAuth} from 'lincd-auth/lib/components/RequireAuth';
|
|
5
|
+
import PageNotFound from './pages/PageNotFound';
|
|
6
|
+
|
|
7
|
+
//In React 18 you can use 'lazy' to import pages only when you need them.
|
|
8
|
+
//This will cause webpack to create multiple bundles, and the right bundles are automatically loaded
|
|
9
|
+
interface RouteObj {
|
|
10
|
+
path: string;
|
|
11
|
+
component?: React.LazyExoticComponent<() => JSX.Element>;
|
|
12
|
+
render?: () => JSX.Element;
|
|
13
|
+
requireAuth?: boolean;
|
|
14
|
+
excludeFromMenu?: boolean;
|
|
15
|
+
label?: string;
|
|
16
|
+
}
|
|
17
|
+
export const ROUTES: {[key: string]: RouteObj} = {
|
|
18
|
+
index: {
|
|
19
|
+
path: '/',
|
|
20
|
+
component: lazy(() => import('./pages/Home' /* webpackPrefetch: true */)),
|
|
21
|
+
label: 'Home',
|
|
22
|
+
},
|
|
23
|
+
page1: {
|
|
24
|
+
path: '/page1',
|
|
25
|
+
component: lazy(() => import('./pages/Page1' /* webpackPrefetch: true */)),
|
|
26
|
+
label: 'Protected page',
|
|
27
|
+
requireAuth: true,
|
|
28
|
+
},
|
|
29
|
+
signin: {
|
|
30
|
+
path: '/signin',
|
|
31
|
+
component: lazy(() => import('./pages/Signin' /* webpackPrefetch: true */)),
|
|
32
|
+
label: 'Sign In',
|
|
33
|
+
excludeFromMenu: true,
|
|
34
|
+
},
|
|
35
|
+
};
|
|
36
|
+
|
|
37
|
+
export default function AppRoutes() {
|
|
38
|
+
return (
|
|
39
|
+
<Routes>
|
|
40
|
+
{Object.keys(ROUTES).map((routeName) => {
|
|
41
|
+
const route = ROUTES[routeName];
|
|
42
|
+
const Component = route.component;
|
|
43
|
+
|
|
44
|
+
//if a route is marked as requireAuth, wrap it in the RequireAuth component and pass the signinRoute
|
|
45
|
+
const AuthGuard = route.requireAuth ? RequireAuth : React.Fragment;
|
|
46
|
+
const authProps = route.requireAuth
|
|
47
|
+
? {signinRoute: ROUTES.signin.path}
|
|
48
|
+
: {};
|
|
49
|
+
|
|
50
|
+
// define a render function that determines what to render based on the component and route.render
|
|
51
|
+
const renderRoute = () =>
|
|
52
|
+
// if a Component is defined, render it using JSX syntax (<Component />)
|
|
53
|
+
// if not, check if a route.render function is defined and call that render function if available.
|
|
54
|
+
// if neither Component nor route.render is defined, return null
|
|
55
|
+
Component ? <Component /> : route.render ? route.render() : null;
|
|
56
|
+
|
|
57
|
+
return (
|
|
58
|
+
<Route
|
|
59
|
+
key={route.path}
|
|
60
|
+
path={route.path}
|
|
61
|
+
element={
|
|
62
|
+
<AuthGuard {...authProps}>
|
|
63
|
+
<Suspense fallback={<Spinner />}>{renderRoute()}</Suspense>
|
|
64
|
+
</AuthGuard>
|
|
65
|
+
}
|
|
66
|
+
/>
|
|
67
|
+
);
|
|
68
|
+
})}
|
|
69
|
+
<Route path="*" element={<PageNotFound />} />
|
|
70
|
+
</Routes>
|
|
71
|
+
);
|
|
72
|
+
}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
/**
|
|
2
|
-
This file allows you to overwrite specific css classes.
|
|
3
|
-
It is configured in such a way that the classes will not be converted to css modules, like the other .scss files.
|
|
4
|
-
If you need to target specific classes of your app that you have defined yourself, you'll need to use the converted class name from the .scss.json file
|
|
5
|
-
|
|
6
|
-
Example: lets say Matches.tsx renders a Material UI component that uses a class "MuiBox-root"
|
|
7
|
-
It also imports Matches.scss, which has a class .matchesContainer
|
|
8
|
-
If you check the Matches.scss.json file, you'll see that the class name has been converted to .appname_Matches_matchesContainer
|
|
9
|
-
So to overwrite styles of "MuiBox-root" you would use:
|
|
10
|
-
.appname_Matches_matchesContainer .MuiBox-root {
|
|
11
|
-
*/
|
|
1
|
+
/**
|
|
2
|
+
This file allows you to overwrite specific css classes.
|
|
3
|
+
It is configured in such a way that the classes will not be converted to css modules, like the other .scss files.
|
|
4
|
+
If you need to target specific classes of your app that you have defined yourself, you'll need to use the converted class name from the .scss.json file
|
|
5
|
+
|
|
6
|
+
Example: lets say Matches.tsx renders a Material UI component that uses a class "MuiBox-root"
|
|
7
|
+
It also imports Matches.scss, which has a class .matchesContainer
|
|
8
|
+
If you check the Matches.scss.json file, you'll see that the class name has been converted to .appname_Matches_matchesContainer
|
|
9
|
+
So to overwrite styles of "MuiBox-root" you would use:
|
|
10
|
+
.appname_Matches_matchesContainer .MuiBox-root {
|
|
11
|
+
*/
|
|
@@ -1,23 +1,23 @@
|
|
|
1
|
-
$primaryColor: #b872da;
|
|
2
|
-
$primaryColorDark: #8e39b8;
|
|
3
|
-
$secondaryColor: #4ddad7;
|
|
4
|
-
$textColorGrey: #5f6d7e;
|
|
5
|
-
$textColor: #141414;
|
|
6
|
-
$textColorSmall: #6d6d6d;
|
|
7
|
-
$borderRadius: 8px;
|
|
8
|
-
$gray200: #e5e5e5;
|
|
9
|
-
$gray50: #f3f3f3;
|
|
10
|
-
$boxPadding: 8px;
|
|
11
|
-
$errorColor: #ff0000;
|
|
12
|
-
$warningColor: #ffa500;
|
|
13
|
-
$infoColor: #0000ff;
|
|
14
|
-
$successColor: #008000;
|
|
15
|
-
$backgroundColor: #ffffff;
|
|
16
|
-
$grayColor: #cccccc;
|
|
17
|
-
|
|
18
|
-
// breakpoints
|
|
19
|
-
$breakpoint-xs: 320px;
|
|
20
|
-
$breakpoint-sm: 640px;
|
|
21
|
-
$breakpoint-md: 768px;
|
|
22
|
-
$breakpoint-lg: 1024px;
|
|
23
|
-
$breakpoint-xl: 1300px;
|
|
1
|
+
$primaryColor: #b872da;
|
|
2
|
+
$primaryColorDark: #8e39b8;
|
|
3
|
+
$secondaryColor: #4ddad7;
|
|
4
|
+
$textColorGrey: #5f6d7e;
|
|
5
|
+
$textColor: #141414;
|
|
6
|
+
$textColorSmall: #6d6d6d;
|
|
7
|
+
$borderRadius: 8px;
|
|
8
|
+
$gray200: #e5e5e5;
|
|
9
|
+
$gray50: #f3f3f3;
|
|
10
|
+
$boxPadding: 8px;
|
|
11
|
+
$errorColor: #ff0000;
|
|
12
|
+
$warningColor: #ffa500;
|
|
13
|
+
$infoColor: #0000ff;
|
|
14
|
+
$successColor: #008000;
|
|
15
|
+
$backgroundColor: #ffffff;
|
|
16
|
+
$grayColor: #cccccc;
|
|
17
|
+
|
|
18
|
+
// breakpoints
|
|
19
|
+
$breakpoint-xs: 320px;
|
|
20
|
+
$breakpoint-sm: 640px;
|
|
21
|
+
$breakpoint-md: 768px;
|
|
22
|
+
$breakpoint-lg: 1024px;
|
|
23
|
+
$breakpoint-xl: 1300px;
|
|
@@ -1,21 +1,21 @@
|
|
|
1
|
-
{
|
|
2
|
-
"compilerOptions": {
|
|
3
|
-
"module": "commonjs",
|
|
4
|
-
"moduleResolution": "node",
|
|
5
|
-
"sourceMap": true,
|
|
6
|
-
"target": "es2019",
|
|
7
|
-
"declaration": false,
|
|
8
|
-
"experimentalDecorators": true,
|
|
9
|
-
"emitDecoratorMetadata": true,
|
|
10
|
-
"esModuleInterop": true,
|
|
11
|
-
"resolveJsonModule": true,
|
|
12
|
-
"jsx": "react-jsx",
|
|
13
|
-
"types": ["node", "react", "react-dom"],
|
|
14
|
-
"paths": {
|
|
15
|
-
"react": ["../node_modules/@types/react","../../../node_modules/@types/react"]
|
|
16
|
-
},
|
|
17
|
-
"pretty": true
|
|
18
|
-
},
|
|
19
|
-
"files": ["./src/index.tsx"],
|
|
20
|
-
"include": ["./src/backend.ts"]
|
|
21
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"compilerOptions": {
|
|
3
|
+
"module": "commonjs",
|
|
4
|
+
"moduleResolution": "node",
|
|
5
|
+
"sourceMap": true,
|
|
6
|
+
"target": "es2019",
|
|
7
|
+
"declaration": false,
|
|
8
|
+
"experimentalDecorators": true,
|
|
9
|
+
"emitDecoratorMetadata": true,
|
|
10
|
+
"esModuleInterop": true,
|
|
11
|
+
"resolveJsonModule": true,
|
|
12
|
+
"jsx": "react-jsx",
|
|
13
|
+
"types": ["node", "react", "react-dom"],
|
|
14
|
+
"paths": {
|
|
15
|
+
"react": ["../node_modules/@types/react","../../../node_modules/@types/react"]
|
|
16
|
+
},
|
|
17
|
+
"pretty": true
|
|
18
|
+
},
|
|
19
|
+
"files": ["./src/index.tsx"],
|
|
20
|
+
"include": ["./src/backend.ts"]
|
|
21
|
+
}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
nodeLinker: "node-modules"
|
|
2
|
-
npmRegistryServer: "https://registry.npmjs.org/"
|
|
3
|
-
|
|
4
|
-
plugins:
|
|
5
|
-
- path: .yarn/plugins/@yarnpkg/plugin-version.cjs
|
|
6
|
-
spec: "@yarnpkg/plugin-version"
|
|
7
|
-
|
|
8
|
-
yarnPath: .yarn/releases/yarn-3.6.1.cjs
|
|
1
|
+
nodeLinker: "node-modules"
|
|
2
|
+
npmRegistryServer: "https://registry.npmjs.org/"
|
|
3
|
+
|
|
4
|
+
plugins:
|
|
5
|
+
- path: .yarn/plugins/@yarnpkg/plugin-version.cjs
|
|
6
|
+
spec: "@yarnpkg/plugin-version"
|
|
7
|
+
|
|
8
|
+
yarnPath: .yarn/releases/yarn-3.6.1.cjs
|