Soverein/sanasto-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Tweaked app shell

Browse Source
This commit is contained in:
Max Lynch
2022-10-02 10:50:56 -05:00
parent 2b16b043b3
commit 0a69f76c32
9 changed files with 203 additions and 244 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/AppShell.jsx
+36 -9
View File
@@ -1,11 +1,14 @@
import { IonApp, IonRouterOutlet, IonSplitPane, setupIonicReact } from '@ionic/react'; import { IonApp, IonLabel, IonRouterOutlet, setupIonicReact, IonTabs, IonTabBar, IonTabButton, IonIcon } from '@ionic/react';
import { cog, flash, list } from 'ionicons/icons';
import { StatusBar, Style } from '@capacitor/status-bar'; import { StatusBar, Style } from '@capacitor/status-bar';
import { IonReactRouter } from '@ionic/react-router'; import { IonReactRouter } from '@ionic/react-router';
import { Redirect, Route } from 'react-router-dom'; import { Redirect, Route } from 'react-router-dom';
import Menu from './Menu';
import Tabs from './pages/Tabs'; import Feed from './pages/Feed';
import Lists from './pages/Lists';
import ListDetail from './pages/ListDetail';
import Settings from './pages/Settings';
setupIonicReact({}); setupIonicReact({});
@@ -21,13 +24,37 @@ const AppShell = () => {
return ( return (
<IonApp> <IonApp>
<IonReactRouter> <IonReactRouter>
<IonSplitPane contentId="main"> <IonTabs>
<Menu /> <IonRouterOutlet>
<IonRouterOutlet id="main"> <Route path="/tabs/feed" exact={true}>
<Route path="/tabs" render={() => <Tabs />} /> <Feed />
<Route exact path="/" render={() => <Redirect to="/tabs" />} /> </Route>
<Route path="/tabs/lists" exact={true}>
<Lists />
</Route>
<Route path="/tabs/lists/:listId" exact={true}>
<ListDetail />
</Route>
<Route path="/tabs/settings" exact={true}>
<Settings />
</Route>
<Route path="/" render={() => <Redirect to="/tabs/feed" />} exact={true} />
</IonRouterOutlet> </IonRouterOutlet>
</IonSplitPane> <IonTabBar slot="bottom">
<IonTabButton tab="tab1" href="/tabs/feed">
<IonIcon icon={flash} />
<IonLabel>Feed</IonLabel>
</IonTabButton>
<IonTabButton tab="tab2" href="/tabs/lists">
<IonIcon icon={list} />
<IonLabel>Lists</IonLabel>
</IonTabButton>
<IonTabButton tab="tab3" href="/tabs/settings">
<IonIcon icon={cog} />
<IonLabel>Settings</IonLabel>
</IonTabButton>
</IonTabBar>
</IonTabs>
</IonReactRouter> </IonReactRouter>
</IonApp> </IonApp>
); );
components/Menu.jsx
-80
View File
@@ -1,80 +0,0 @@
import { StatusBar, Style } from '@capacitor/status-bar';
import {
IonContent,
IonHeader,
IonIcon,
IonItem,
IonLabel,
IonList,
IonMenu,
IonMenuToggle,
IonTitle,
IonToolbar,
} from '@ionic/react';
import { useEffect, useState } from 'react';
import { cog, flash, list } from 'ionicons/icons';
const pages = [
{
title: 'Feed',
icon: flash,
url: '/tabs/feed',
},
{
title: 'Lists',
icon: list,
url: '/tabs/lists',
},
{
title: 'Settings',
icon: cog,
url: '/tabs/settings',
},
];
const Menu = () => {
const [isDark, setIsDark] = useState(false);
const handleOpen = async () => {
try {
await StatusBar.setStyle({
style: isDark ? Style.Dark : Style.Light,
});
} catch {}
};
const handleClose = async () => {
try {
await StatusBar.setStyle({
style: isDark ? Style.Dark : Style.Light,
});
} catch {}
};
useEffect(() => {
setIsDark(window.matchMedia('(prefers-color-scheme: dark)').matches);
}, []);
return (
<IonMenu side="start" contentId="main" onIonDidOpen={handleOpen} onIonDidClose={handleClose}>
<IonHeader>
<IonToolbar>
<IonTitle>Menu</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent>
<IonList>
{pages.map((p, k) => (
<IonMenuToggle autoHide={false} key={k}>
<IonItem routerLink={p.url} routerDirection="none" detail={false} lines="none">
<IonIcon icon={p.icon} slot="start" />
<IonLabel>{p.title}</IonLabel>
</IonItem>
</IonMenuToggle>
))}
</IonList>
</IonContent>
</IonMenu>
);
};
export default Menu;
components/pages/ListDetail.jsx
+4 -4
View File
@@ -11,6 +11,7 @@ import {
IonTitle, IonTitle,
IonToolbar, IonToolbar,
} from '@ionic/react'; } from '@ionic/react';
import { useParams } from 'react-router-dom';
import Store from '../../store'; import Store from '../../store';
import * as actions from '../../store/actions'; import * as actions from '../../store/actions';
@@ -35,14 +36,13 @@ const ListItemEntry = ({ list, item }) => (
const ListDetail = ({ match }) => { const ListDetail = ({ match }) => {
const lists = Store.useState(selectors.getLists); const lists = Store.useState(selectors.getLists);
const { const params = useParams();
params: { listId }, const { listId } = params;
} = match;
const loadedList = lists.find(l => l.id === listId); const loadedList = lists.find(l => l.id === listId);
return ( return (
<IonPage> <IonPage>
<IonHeader> <IonHeader translucent>
<IonToolbar> <IonToolbar>
<IonButtons slot="start"> <IonButtons slot="start">
<IonBackButton defaultHref="/tabs/lists" /> <IonBackButton defaultHref="/tabs/lists" />
components/pages/Lists.jsx
+4 -1
View File
@@ -9,6 +9,7 @@ import {
IonContent, IonContent,
IonItem, IonItem,
IonLabel, IonLabel,
IonList,
} from '@ionic/react'; } from '@ionic/react';
const ListEntry = ({ list, ...props }) => ( const ListEntry = ({ list, ...props }) => (
@@ -43,7 +44,9 @@ const Lists = () => {
<IonTitle size="large">Lists</IonTitle> <IonTitle size="large">Lists</IonTitle>
</IonToolbar> </IonToolbar>
</IonHeader> </IonHeader>
<AllLists /> <IonList>
<AllLists />
</IonList>
</IonContent> </IonContent>
</IonPage> </IonPage>
); );
components/pages/Tabs.jsx
-39
View File
@@ -1,39 +0,0 @@
import { Redirect, Route } from 'react-router-dom';
import { IonRouterOutlet, IonTabs, IonTabBar, IonTabButton, IonIcon, IonLabel } from '@ionic/react';
import { IonReactRouter } from '@ionic/react-router';
import { cog, flash, list } from 'ionicons/icons';
import Home from './Feed';
import Lists from './Lists';
import ListDetail from './ListDetail';
import Settings from './Settings';
const Tabs = () => {
return (
<IonTabs>
<IonRouterOutlet>
<Route path="/tabs/feed" component={Home} exact={true} />
<Route path="/tabs/lists" component={Lists} exact={true} />
<Route path="/tabs/lists/:listId" component={ListDetail} exact={true} />
<Route path="/tabs/settings" component={Settings} exact={true} />
<Route path="/tabs" render={() => <Redirect to="/tabs/feed" />} exact={true} />
</IonRouterOutlet>
<IonTabBar slot="bottom">
<IonTabButton tab="tab1" href="/tabs/feed">
<IonIcon icon={flash} />
<IonLabel>Feed</IonLabel>
</IonTabButton>
<IonTabButton tab="tab2" href="/tabs/lists">
<IonIcon icon={list} />
<IonLabel>Lists</IonLabel>
</IonTabButton>
<IonTabButton tab="tab3" href="/tabs/settings">
<IonIcon icon={cog} />
<IonLabel>Settings</IonLabel>
</IonTabButton>
</IonTabBar>
</IonTabs>
);
};
export default Tabs;
next.config.js
+9 -2
View File
@@ -1,7 +1,14 @@
module.exports = { const withTM = require('next-transpile-modules')([
'@ionic/react',
'@ionic/core',
'@stencil/core',
'ionicons',
]);
module.exports = withTM({
basePath: '', basePath: '',
images: { images: {
domains: ['images.unsplash.com'], domains: ['images.unsplash.com'],
}, },
swcMinify: true, swcMinify: true,
}; });
package-lock.json
Generated
+136 -105
View File
@@ -12,8 +12,8 @@
"@capacitor/core": "^4.0.0", "@capacitor/core": "^4.0.0",
"@capacitor/ios": "^4.0.0", "@capacitor/ios": "^4.0.0",
"@capacitor/status-bar": "^4.0.0", "@capacitor/status-bar": "^4.0.0",
"@ionic/react": "^6.1.12", "@ionic/react": "^6.2.9",
"@ionic/react-router": "^6.1.12", "@ionic/react-router": "^6.2.9",
"autoprefixer": "^10.2.6", "autoprefixer": "^10.2.6",
"classnames": "^2.2.6", "classnames": "^2.2.6",
"next": "^12.2.0", "next": "^12.2.0",
@@ -28,7 +28,8 @@
"@capacitor/cli": "^4.0.0", "@capacitor/cli": "^4.0.0",
"eslint": "^7.28.0", "eslint": "^7.28.0",
"eslint-config-next": "^11.0.0", "eslint-config-next": "^11.0.0",
"ionicons": "^5.2.3", "ionicons": "^6.0.3",
"next-transpile-modules": "^9.0.0",
"prettier": "^2.2.1", "prettier": "^2.2.1",
"pullstate": "1.24", "pullstate": "1.24",
"react-use-gesture": "^9.1.3", "react-use-gesture": "^9.1.3",
@@ -224,46 +225,26 @@
"dev": true "dev": true
}, },
"node_modules/@ionic/core": { "node_modules/@ionic/core": {
"version": "6.1.12", "version": "6.2.9",
"resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.1.12.tgz", "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.2.9.tgz",
"integrity": "sha512-CISprIpbGJHMjxsx0OAQ6grnsbBuhcImaiL5rRBI7MtncIW56nge4IO064n86bwhxRqvoXCA6EGq9D1S5Cn45g==", "integrity": "sha512-d2KBXYUKBND2AD8aMgash3O/t04IDc/DHHMshcOydfNJ5qqAxwJYzZR7hs96UknCcIlhHk1pb5C29epkv7gOcQ==",
"dependencies": { "dependencies": {
"@stencil/core": "^2.16.0", "@stencil/core": "^2.18.0",
"ionicons": "^6.0.2", "ionicons": "^6.0.3",
"tslib": "^2.1.0" "tslib": "^2.1.0"
} }
}, },
"node_modules/@ionic/core/node_modules/@stencil/core": {
"version": "2.16.1",
"resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.16.1.tgz",
"integrity": "sha512-s/UJp9qxExL3DyQPT70kiuWeb3AdjbUZM+5lEIXn30I2DLcLYPOPXfsoWJODieQywq+3vPiLZeIdkoqjf6jcSw==",
"bin": {
"stencil": "bin/stencil"
},
"engines": {
"node": ">=12.10.0",
"npm": ">=6.0.0"
}
},
"node_modules/@ionic/core/node_modules/ionicons": {
"version": "6.0.2",
"resolved": "https://registry.npmjs.org/ionicons/-/ionicons-6.0.2.tgz",
"integrity": "sha512-AyKfFaUKVoBz4eB8XkU7H1R5HFnVsgq5ijqSdbXC0lES9PDK/J6LUQz6XUJq0mVVQF5k9kczSPOLMW3mszG0mQ==",
"dependencies": {
"@stencil/core": "~2.16.0"
}
},
"node_modules/@ionic/core/node_modules/tslib": { "node_modules/@ionic/core/node_modules/tslib": {
"version": "2.4.0", "version": "2.4.0",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz", "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
"integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==" "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
}, },
"node_modules/@ionic/react": { "node_modules/@ionic/react": {
"version": "6.1.12", "version": "6.2.9",
"resolved": "https://registry.npmjs.org/@ionic/react/-/react-6.1.12.tgz", "resolved": "https://registry.npmjs.org/@ionic/react/-/react-6.2.9.tgz",
"integrity": "sha512-k5Nv63fRCcEXOXl+LBeoO8HoqLHJFRoLj+vRBdlaQm660WYd5wu5MGfrzJq+d/1bd7ZzRJaQxz/jNwYOFThqMw==", "integrity": "sha512-zQdzdfLvhJX9lnjAO5sAQfUqy2pqk5v5qpHKQLCzDv+JxwCkrnfIAd1maQDsnEmDaJHvMCBY+/yj5VdZOJrqCA==",
"dependencies": { "dependencies": {
"@ionic/core": "^6.1.12", "@ionic/core": "^6.2.9",
"ionicons": "^6.0.2", "ionicons": "^6.0.2",
"tslib": "*" "tslib": "*"
}, },
@@ -273,11 +254,11 @@
} }
}, },
"node_modules/@ionic/react-router": { "node_modules/@ionic/react-router": {
"version": "6.1.12", "version": "6.2.9",
"resolved": "https://registry.npmjs.org/@ionic/react-router/-/react-router-6.1.12.tgz", "resolved": "https://registry.npmjs.org/@ionic/react-router/-/react-router-6.2.9.tgz",
"integrity": "sha512-PxD6luLT6g0zpSN6tRUtrt7UkWaVkBgEL1zRwM/1uK3ZMAYlDTYuRhftTURsEmHUIdXedl3UMehpQYWYvoMRUA==", "integrity": "sha512-IrwnwnHhPWrwJZefBaW6myijEmNmgEtVdi/zI7nJPgwoH4O0MhxVM2yOsV3Q+v88ICEW29P+boX/paQ1bntvpA==",
"dependencies": { "dependencies": {
"@ionic/react": "^6.1.12", "@ionic/react": "^6.2.9",
"tslib": "*" "tslib": "*"
}, },
"peerDependencies": { "peerDependencies": {
@@ -287,26 +268,6 @@
"react-router-dom": "^5.0.1" "react-router-dom": "^5.0.1"
} }
}, },
"node_modules/@ionic/react/node_modules/@stencil/core": {
"version": "2.16.1",
"resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.16.1.tgz",
"integrity": "sha512-s/UJp9qxExL3DyQPT70kiuWeb3AdjbUZM+5lEIXn30I2DLcLYPOPXfsoWJODieQywq+3vPiLZeIdkoqjf6jcSw==",
"bin": {
"stencil": "bin/stencil"
},
"engines": {
"node": ">=12.10.0",
"npm": ">=6.0.0"
}
},
"node_modules/@ionic/react/node_modules/ionicons": {
"version": "6.0.2",
"resolved": "https://registry.npmjs.org/ionicons/-/ionicons-6.0.2.tgz",
"integrity": "sha512-AyKfFaUKVoBz4eB8XkU7H1R5HFnVsgq5ijqSdbXC0lES9PDK/J6LUQz6XUJq0mVVQF5k9kczSPOLMW3mszG0mQ==",
"dependencies": {
"@stencil/core": "~2.16.0"
}
},
"node_modules/@ionic/utils-array": { "node_modules/@ionic/utils-array": {
"version": "2.1.5", "version": "2.1.5",
"resolved": "https://registry.npmjs.org/@ionic/utils-array/-/utils-array-2.1.5.tgz", "resolved": "https://registry.npmjs.org/@ionic/utils-array/-/utils-array-2.1.5.tgz",
@@ -703,6 +664,18 @@
"integrity": "sha512-Myxw//kzromB9yWgS8qYGuGVf91oBUUJpNvy5eM50sqvmKLbKjwLxohJnkWGTeeI9v9IBMtPLxz5Gc60FIfvCA==", "integrity": "sha512-Myxw//kzromB9yWgS8qYGuGVf91oBUUJpNvy5eM50sqvmKLbKjwLxohJnkWGTeeI9v9IBMtPLxz5Gc60FIfvCA==",
"dev": true "dev": true
}, },
"node_modules/@stencil/core": {
"version": "2.18.0",
"resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.18.0.tgz",
"integrity": "sha512-NLEY8Jq59smyiivBAxHKipsp9YkkW/K/Vm90zAyXQqukb12i2SFucWHJ1Ik7ropVlhmMVvigyxXgRfQ9quIqtg==",
"bin": {
"stencil": "bin/stencil"
},
"engines": {
"node": ">=12.10.0",
"npm": ">=6.0.0"
}
},
"node_modules/@swc/helpers": { "node_modules/@swc/helpers": {
"version": "0.4.2", "version": "0.4.2",
"resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.4.2.tgz", "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.4.2.tgz",
@@ -1590,6 +1563,19 @@
"integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==", "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
"dev": true "dev": true
}, },
"node_modules/enhanced-resolve": {
"version": "5.10.0",
"resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.10.0.tgz",
"integrity": "sha512-T0yTFjdpldGY8PmuXXR0PyQ1ufZpEGiHVrp7zHKB7jdR4qlmZHhONVM5AQOAWXuF/w3dnHbEQVrNptJgt7F+cQ==",
"dev": true,
"dependencies": {
"graceful-fs": "^4.2.4",
"tapable": "^2.2.0"
},
"engines": {
"node": ">=10.13.0"
}
},
"node_modules/enquirer": { "node_modules/enquirer": {
"version": "2.3.6", "version": "2.3.6",
"resolved": "https://registry.npmjs.org/enquirer/-/enquirer-2.3.6.tgz", "resolved": "https://registry.npmjs.org/enquirer/-/enquirer-2.3.6.tgz",
@@ -2848,10 +2834,24 @@
} }
}, },
"node_modules/ionicons": { "node_modules/ionicons": {
"version": "5.3.0", "version": "6.0.3",
"resolved": "https://registry.npmjs.org/ionicons/-/ionicons-5.3.0.tgz", "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-6.0.3.tgz",
"integrity": "sha512-HU8g9fnuoBF3GUBXq4GcWYoOZ6mjMRUL2X1s/QyPsbZjGRrwBcsK+I20kxdho+YDPBqa+BQM0h+gzh4H4c9P2A==", "integrity": "sha512-kVOWER991EMqLiVShrCSWKMHkgHZP7XfVdyN6YPMuoO33W7pc5CPNVNfR8OMe/I8rYEbaunyBs6dXNYpR6gGZw==",
"dev": true "dependencies": {
"@stencil/core": "~2.16.0"
}
},
"node_modules/ionicons/node_modules/@stencil/core": {
"version": "2.16.1",
"resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.16.1.tgz",
"integrity": "sha512-s/UJp9qxExL3DyQPT70kiuWeb3AdjbUZM+5lEIXn30I2DLcLYPOPXfsoWJODieQywq+3vPiLZeIdkoqjf6jcSw==",
"bin": {
"stencil": "bin/stencil"
},
"engines": {
"node": ">=12.10.0",
"npm": ">=6.0.0"
}
}, },
"node_modules/is-arrayish": { "node_modules/is-arrayish": {
"version": "0.3.2", "version": "0.3.2",
@@ -3440,6 +3440,16 @@
} }
} }
}, },
"node_modules/next-transpile-modules": {
"version": "9.0.0",
"resolved": "https://registry.npmjs.org/next-transpile-modules/-/next-transpile-modules-9.0.0.tgz",
"integrity": "sha512-VCNFOazIAnXn1hvgYYSTYMnoWgKgwlYh4lm1pKbSfiB3kj5ZYLcKVhfh3jkPOg1cnd9DP+pte9yCUocdPEUBTQ==",
"dev": true,
"dependencies": {
"enhanced-resolve": "^5.7.0",
"escalade": "^3.1.1"
}
},
"node_modules/node-emoji": { "node_modules/node-emoji": {
"version": "1.10.0", "version": "1.10.0",
"resolved": "https://registry.npmjs.org/node-emoji/-/node-emoji-1.10.0.tgz", "resolved": "https://registry.npmjs.org/node-emoji/-/node-emoji-1.10.0.tgz",
@@ -5013,6 +5023,15 @@
"node": ">=8" "node": ">=8"
} }
}, },
"node_modules/tapable": {
"version": "2.2.1",
"resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
"integrity": "sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==",
"dev": true,
"engines": {
"node": ">=6"
}
},
"node_modules/tar": { "node_modules/tar": {
"version": "6.1.11", "version": "6.1.11",
"resolved": "https://registry.npmjs.org/tar/-/tar-6.1.11.tgz", "resolved": "https://registry.npmjs.org/tar/-/tar-6.1.11.tgz",
@@ -5542,28 +5561,15 @@
} }
}, },
"@ionic/core": { "@ionic/core": {
"version": "6.1.12", "version": "6.2.9",
"resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.1.12.tgz", "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.2.9.tgz",
"integrity": "sha512-CISprIpbGJHMjxsx0OAQ6grnsbBuhcImaiL5rRBI7MtncIW56nge4IO064n86bwhxRqvoXCA6EGq9D1S5Cn45g==", "integrity": "sha512-d2KBXYUKBND2AD8aMgash3O/t04IDc/DHHMshcOydfNJ5qqAxwJYzZR7hs96UknCcIlhHk1pb5C29epkv7gOcQ==",
"requires": { "requires": {
"@stencil/core": "^2.16.0", "@stencil/core": "^2.18.0",
"ionicons": "^6.0.2", "ionicons": "^6.0.3",
"tslib": "^2.1.0" "tslib": "^2.1.0"
}, },
"dependencies": { "dependencies": {
"@stencil/core": {
"version": "2.16.1",
"resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.16.1.tgz",
"integrity": "sha512-s/UJp9qxExL3DyQPT70kiuWeb3AdjbUZM+5lEIXn30I2DLcLYPOPXfsoWJODieQywq+3vPiLZeIdkoqjf6jcSw=="
},
"ionicons": {
"version": "6.0.2",
"resolved": "https://registry.npmjs.org/ionicons/-/ionicons-6.0.2.tgz",
"integrity": "sha512-AyKfFaUKVoBz4eB8XkU7H1R5HFnVsgq5ijqSdbXC0lES9PDK/J6LUQz6XUJq0mVVQF5k9kczSPOLMW3mszG0mQ==",
"requires": {
"@stencil/core": "~2.16.0"
}
},
"tslib": { "tslib": {
"version": "2.4.0", "version": "2.4.0",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz", "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
@@ -5572,36 +5578,21 @@
} }
}, },
"@ionic/react": { "@ionic/react": {
"version": "6.1.12", "version": "6.2.9",
"resolved": "https://registry.npmjs.org/@ionic/react/-/react-6.1.12.tgz", "resolved": "https://registry.npmjs.org/@ionic/react/-/react-6.2.9.tgz",
"integrity": "sha512-k5Nv63fRCcEXOXl+LBeoO8HoqLHJFRoLj+vRBdlaQm660WYd5wu5MGfrzJq+d/1bd7ZzRJaQxz/jNwYOFThqMw==", "integrity": "sha512-zQdzdfLvhJX9lnjAO5sAQfUqy2pqk5v5qpHKQLCzDv+JxwCkrnfIAd1maQDsnEmDaJHvMCBY+/yj5VdZOJrqCA==",
"requires": { "requires": {
"@ionic/core": "^6.1.12", "@ionic/core": "^6.2.9",
"ionicons": "^6.0.2", "ionicons": "^6.0.2",
"tslib": "*" "tslib": "*"
},
"dependencies": {
"@stencil/core": {
"version": "2.16.1",
"resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.16.1.tgz",
"integrity": "sha512-s/UJp9qxExL3DyQPT70kiuWeb3AdjbUZM+5lEIXn30I2DLcLYPOPXfsoWJODieQywq+3vPiLZeIdkoqjf6jcSw=="
},
"ionicons": {
"version": "6.0.2",
"resolved": "https://registry.npmjs.org/ionicons/-/ionicons-6.0.2.tgz",
"integrity": "sha512-AyKfFaUKVoBz4eB8XkU7H1R5HFnVsgq5ijqSdbXC0lES9PDK/J6LUQz6XUJq0mVVQF5k9kczSPOLMW3mszG0mQ==",
"requires": {
"@stencil/core": "~2.16.0"
}
}
} }
}, },
"@ionic/react-router": { "@ionic/react-router": {
"version": "6.1.12", "version": "6.2.9",
"resolved": "https://registry.npmjs.org/@ionic/react-router/-/react-router-6.1.12.tgz", "resolved": "https://registry.npmjs.org/@ionic/react-router/-/react-router-6.2.9.tgz",
"integrity": "sha512-PxD6luLT6g0zpSN6tRUtrt7UkWaVkBgEL1zRwM/1uK3ZMAYlDTYuRhftTURsEmHUIdXedl3UMehpQYWYvoMRUA==", "integrity": "sha512-IrwnwnHhPWrwJZefBaW6myijEmNmgEtVdi/zI7nJPgwoH4O0MhxVM2yOsV3Q+v88ICEW29P+boX/paQ1bntvpA==",
"requires": { "requires": {
"@ionic/react": "^6.1.12", "@ionic/react": "^6.2.9",
"tslib": "*" "tslib": "*"
} }
}, },
@@ -5868,6 +5859,11 @@
"integrity": "sha512-Myxw//kzromB9yWgS8qYGuGVf91oBUUJpNvy5eM50sqvmKLbKjwLxohJnkWGTeeI9v9IBMtPLxz5Gc60FIfvCA==", "integrity": "sha512-Myxw//kzromB9yWgS8qYGuGVf91oBUUJpNvy5eM50sqvmKLbKjwLxohJnkWGTeeI9v9IBMtPLxz5Gc60FIfvCA==",
"dev": true "dev": true
}, },
"@stencil/core": {
"version": "2.18.0",
"resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.18.0.tgz",
"integrity": "sha512-NLEY8Jq59smyiivBAxHKipsp9YkkW/K/Vm90zAyXQqukb12i2SFucWHJ1Ik7ropVlhmMVvigyxXgRfQ9quIqtg=="
},
"@swc/helpers": { "@swc/helpers": {
"version": "0.4.2", "version": "0.4.2",
"resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.4.2.tgz", "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.4.2.tgz",
@@ -6505,6 +6501,16 @@
"integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==", "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
"dev": true "dev": true
}, },
"enhanced-resolve": {
"version": "5.10.0",
"resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.10.0.tgz",
"integrity": "sha512-T0yTFjdpldGY8PmuXXR0PyQ1ufZpEGiHVrp7zHKB7jdR4qlmZHhONVM5AQOAWXuF/w3dnHbEQVrNptJgt7F+cQ==",
"dev": true,
"requires": {
"graceful-fs": "^4.2.4",
"tapable": "^2.2.0"
}
},
"enquirer": { "enquirer": {
"version": "2.3.6", "version": "2.3.6",
"resolved": "https://registry.npmjs.org/enquirer/-/enquirer-2.3.6.tgz", "resolved": "https://registry.npmjs.org/enquirer/-/enquirer-2.3.6.tgz",
@@ -7473,10 +7479,19 @@
} }
}, },
"ionicons": { "ionicons": {
"version": "5.3.0", "version": "6.0.3",
"resolved": "https://registry.npmjs.org/ionicons/-/ionicons-5.3.0.tgz", "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-6.0.3.tgz",
"integrity": "sha512-HU8g9fnuoBF3GUBXq4GcWYoOZ6mjMRUL2X1s/QyPsbZjGRrwBcsK+I20kxdho+YDPBqa+BQM0h+gzh4H4c9P2A==", "integrity": "sha512-kVOWER991EMqLiVShrCSWKMHkgHZP7XfVdyN6YPMuoO33W7pc5CPNVNfR8OMe/I8rYEbaunyBs6dXNYpR6gGZw==",
"dev": true "requires": {
"@stencil/core": "~2.16.0"
},
"dependencies": {
"@stencil/core": {
"version": "2.16.1",
"resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.16.1.tgz",
"integrity": "sha512-s/UJp9qxExL3DyQPT70kiuWeb3AdjbUZM+5lEIXn30I2DLcLYPOPXfsoWJODieQywq+3vPiLZeIdkoqjf6jcSw=="
}
}
}, },
"is-arrayish": { "is-arrayish": {
"version": "0.3.2", "version": "0.3.2",
@@ -7895,6 +7910,16 @@
"use-sync-external-store": "1.1.0" "use-sync-external-store": "1.1.0"
} }
}, },
"next-transpile-modules": {
"version": "9.0.0",
"resolved": "https://registry.npmjs.org/next-transpile-modules/-/next-transpile-modules-9.0.0.tgz",
"integrity": "sha512-VCNFOazIAnXn1hvgYYSTYMnoWgKgwlYh4lm1pKbSfiB3kj5ZYLcKVhfh3jkPOg1cnd9DP+pte9yCUocdPEUBTQ==",
"dev": true,
"requires": {
"enhanced-resolve": "^5.7.0",
"escalade": "^3.1.1"
}
},
"node-emoji": { "node-emoji": {
"version": "1.10.0", "version": "1.10.0",
"resolved": "https://registry.npmjs.org/node-emoji/-/node-emoji-1.10.0.tgz", "resolved": "https://registry.npmjs.org/node-emoji/-/node-emoji-1.10.0.tgz",
@@ -9048,6 +9073,12 @@
} }
} }
}, },
"tapable": {
"version": "2.2.1",
"resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
"integrity": "sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==",
"dev": true
},
"tar": { "tar": {
"version": "6.1.11", "version": "6.1.11",
"resolved": "https://registry.npmjs.org/tar/-/tar-6.1.11.tgz", "resolved": "https://registry.npmjs.org/tar/-/tar-6.1.11.tgz",
package.json
+5 -4
View File
@@ -16,8 +16,8 @@
"@capacitor/core": "^4.0.0", "@capacitor/core": "^4.0.0",
"@capacitor/ios": "^4.0.0", "@capacitor/ios": "^4.0.0",
"@capacitor/status-bar": "^4.0.0", "@capacitor/status-bar": "^4.0.0",
"@ionic/react": "^6.1.12", "@ionic/react": "^6.2.9",
"@ionic/react-router": "^6.1.12", "@ionic/react-router": "^6.2.9",
"autoprefixer": "^10.2.6", "autoprefixer": "^10.2.6",
"classnames": "^2.2.6", "classnames": "^2.2.6",
"next": "^12.2.0", "next": "^12.2.0",
@@ -32,10 +32,11 @@
"@capacitor/cli": "^4.0.0", "@capacitor/cli": "^4.0.0",
"eslint": "^7.28.0", "eslint": "^7.28.0",
"eslint-config-next": "^11.0.0", "eslint-config-next": "^11.0.0",
"ionicons": "^5.2.3", "ionicons": "^6.0.3",
"next-transpile-modules": "^9.0.0",
"prettier": "^2.2.1", "prettier": "^2.2.1",
"pullstate": "1.24", "pullstate": "1.24",
"react-use-gesture": "^9.1.3", "react-use-gesture": "^9.1.3",
"reselect": "^4.0.0" "reselect": "^4.0.0"
} }
} }
pages/_app.js
+9
View File
@@ -1,8 +1,17 @@
import Head from 'next/head'; import Head from 'next/head';
import Script from 'next/script'; import Script from 'next/script';
import { setupIonicReact } from '@ionic/react';
import 'tailwindcss/tailwind.css'; import 'tailwindcss/tailwind.css';
/* Core CSS required for Ionic components to work properly */
import '@ionic/react/css/core.css'; import '@ionic/react/css/core.css';
/* Basic CSS for apps built with Ionic */
import '@ionic/react/css/normalize.css';
import '@ionic/react/css/structure.css';
import '@ionic/react/css/typography.css';
/* Optional CSS utils that can be commented out */
import '@ionic/react/css/padding.css'; import '@ionic/react/css/padding.css';
import '@ionic/react/css/float-elements.css'; import '@ionic/react/css/float-elements.css';
import '@ionic/react/css/text-alignment.css'; import '@ionic/react/css/text-alignment.css';