Skip to content

Commit 0e1f636

Browse files
ahmnouiraahmnouira
committed
docs: add empty example
1 parent 6fe8ff1 commit 0e1f636

25 files changed

+16479
-1
lines changed

‎.npmignore

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,3 @@
11
*.md
2+
src
3+
example

‎example/.gitignore

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
/.pnp
6+
.pnp.js
7+
8+
# testing
9+
/coverage
10+
11+
# production
12+
/build
13+
14+
# misc
15+
.DS_Store
16+
.env.local
17+
.env.development.local
18+
.env.test.local
19+
.env.production.local
20+
.vscode
21+
.idea
22+
23+
npm-debug.log*
24+
yarn-debug.log*
25+
yarn-error.log*
26+
27+
# Optional eslint cache
28+
.eslintcache

‎example/ionic.config.json

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"name": "example",
3+
"integrations": {},
4+
"type": "react"
5+
}

‎example/package-lock.json

Lines changed: 15680 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎example/package.json

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
{
2+
"name": "example",
3+
"version": "0.0.1",
4+
"private": true,
5+
"dependencies": {
6+
"@ionic/react": "^5.5.0",
7+
"@ionic/react-router": "^5.5.0",
8+
"@testing-library/jest-dom": "^5.11.9",
9+
"@testing-library/react": "^11.2.5",
10+
"@testing-library/user-event": "^12.6.3",
11+
"@types/jest": "^26.0.20",
12+
"@types/node": "^12.19.15",
13+
"@types/react": "^16.14.3",
14+
"@types/react-dom": "^16.9.10",
15+
"@types/react-router": "^5.1.11",
16+
"@types/react-router-dom": "^5.1.7",
17+
"ionicons": "^5.4.0",
18+
"react": "^17.0.1",
19+
"react-dom": "^17.0.1",
20+
"react-router": "^5.2.0",
21+
"react-router-dom": "^5.2.0",
22+
"react-scripts": "4.0.2",
23+
"typescript": "^4.1.3",
24+
"web-vitals": "^0.2.4",
25+
"workbox-background-sync": "^5.1.4",
26+
"workbox-broadcast-update": "^5.1.4",
27+
"workbox-cacheable-response": "^5.1.4",
28+
"workbox-core": "^5.1.4",
29+
"workbox-expiration": "^5.1.4",
30+
"workbox-google-analytics": "^5.1.4",
31+
"workbox-navigation-preload": "^5.1.4",
32+
"workbox-precaching": "^5.1.4",
33+
"workbox-range-requests": "^5.1.4",
34+
"workbox-routing": "^5.1.4",
35+
"workbox-strategies": "^5.1.4",
36+
"workbox-streams": "^5.1.4"
37+
},
38+
"scripts": {
39+
"start": "react-scripts start",
40+
"build": "react-scripts build",
41+
"test": "react-scripts test",
42+
"eject": "react-scripts eject"
43+
},
44+
"eslintConfig": {
45+
"extends": [
46+
"react-app",
47+
"react-app/jest"
48+
]
49+
},
50+
"browserslist": {
51+
"production": [
52+
">0.2%",
53+
"not dead",
54+
"not op_mini all"
55+
],
56+
"development": [
57+
"last 1 chrome version",
58+
"last 1 firefox version",
59+
"last 1 safari version"
60+
]
61+
},
62+
"description": "An Ionic project"
63+
}

‎example/public/assets/icon/favicon.png

930 Bytes
Loading

‎example/public/assets/icon/icon.png

23.2 KB
Loading

‎example/public/assets/shapes.svg

Lines changed: 1 addition & 0 deletions
Loading

‎example/public/index.html

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Ionic App</title>
6+
7+
<base href="/" />
8+
9+
<meta name="color-scheme" content="light dark" />
10+
<meta
11+
name="viewport"
12+
content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
13+
/>
14+
<meta name="format-detection" content="telephone=no" />
15+
<meta name="msapplication-tap-highlight" content="no" />
16+
17+
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
18+
19+
<link rel="shortcut icon" type="image/png" href="%PUBLIC_URL%/assets/icon/favicon.png" />
20+
21+
<!-- add to homescreen for ios -->
22+
<meta name="apple-mobile-web-app-capable" content="yes" />
23+
<meta name="apple-mobile-web-app-title" content="Ionic App" />
24+
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
25+
</head>
26+
27+
<body>
28+
<div id="root"></div>
29+
</body>
30+
31+
</html>

‎example/public/manifest.json

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
{
2+
"short_name": "Ionic App",
3+
"name": "My Ionic App",
4+
"icons": [
5+
{
6+
"src": "assets/icon/favicon.png",
7+
"sizes": "64x64 32x32 24x24 16x16",
8+
"type": "image/x-icon"
9+
},
10+
{
11+
"src": "assets/icon/icon.png",
12+
"type": "image/png",
13+
"sizes": "512x512",
14+
"purpose": "maskable"
15+
}
16+
],
17+
"start_url": ".",
18+
"display": "standalone",
19+
"theme_color": "#ffffff",
20+
"background_color": "#ffffff"
21+
}

‎example/src/App.test.tsx

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import React from 'react';
2+
import { render } from '@testing-library/react';
3+
import App from './App';
4+
5+
test('renders without crashing', () => {
6+
const { baseElement } = render(<App />);
7+
expect(baseElement).toBeDefined();
8+
});

‎example/src/App.tsx

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import { Redirect, Route } from 'react-router-dom';
2+
import { IonApp, IonRouterOutlet } from '@ionic/react';
3+
import { IonReactRouter } from '@ionic/react-router';
4+
import Home from './pages/Home';
5+
6+
/* Core CSS required for Ionic components to work properly */
7+
import '@ionic/react/css/core.css';
8+
9+
/* Basic CSS for apps built with Ionic */
10+
import '@ionic/react/css/normalize.css';
11+
import '@ionic/react/css/structure.css';
12+
import '@ionic/react/css/typography.css';
13+
14+
/* Optional CSS utils that can be commented out */
15+
import '@ionic/react/css/padding.css';
16+
import '@ionic/react/css/float-elements.css';
17+
import '@ionic/react/css/text-alignment.css';
18+
import '@ionic/react/css/text-transformation.css';
19+
import '@ionic/react/css/flex-utils.css';
20+
import '@ionic/react/css/display.css';
21+
22+
/* Theme variables */
23+
import './theme/variables.css';
24+
25+
const App: React.FC = () => (
26+
<IonApp>
27+
<IonReactRouter>
28+
<IonRouterOutlet>
29+
<Route exact path="/home">
30+
<Home />
31+
</Route>
32+
<Route exact path="/">
33+
<Redirect to="/home" />
34+
</Route>
35+
</IonRouterOutlet>
36+
</IonReactRouter>
37+
</IonApp>
38+
);
39+
40+
export default App;

‎example/src/components/ExploreContainer.css

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
.container {
2+
text-align: center;
3+
position: absolute;
4+
left: 0;
5+
right: 0;
6+
top: 50%;
7+
transform: translateY(-50%);
8+
}
9+
10+
.container strong {
11+
font-size: 20px;
12+
line-height: 26px;
13+
}
14+
15+
.container p {
16+
font-size: 16px;
17+
line-height: 22px;
18+
color: #8c8c8c;
19+
margin: 0;
20+
}
21+
22+
.container a {
23+
text-decoration: none;
24+
}

‎example/src/components/ExploreContainer.tsx

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import './ExploreContainer.css';
2+
3+
interface ContainerProps { }
4+
5+
const ExploreContainer: React.FC<ContainerProps> = () => {
6+
return (
7+
<div className="container">
8+
<strong>Ready to create an app?</strong>
9+
<p>Start with Ionic <a target="_blank" rel="noopener noreferrer" href="https://ionicframework.com/docs/components">UI Components</a></p>
10+
</div>
11+
);
12+
};
13+
14+
export default ExploreContainer;

‎example/src/index.tsx

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import React from 'react';
2+
import ReactDOM from 'react-dom';
3+
import App from './App';
4+
import * as serviceWorkerRegistration from './serviceWorkerRegistration';
5+
import reportWebVitals from './reportWebVitals';
6+
7+
ReactDOM.render(
8+
<React.StrictMode>
9+
<App />
10+
</React.StrictMode>,
11+
document.getElementById('root')
12+
);
13+
14+
// If you want your app to work offline and load faster, you can change
15+
// unregister() to register() below. Note this comes with some pitfalls.
16+
// Learn more about service workers: https://cra.link/PWA
17+
serviceWorkerRegistration.unregister();
18+
19+
// If you want to start measuring performance in your app, pass a function
20+
// to log results (for example: reportWebVitals(console.log))
21+
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
22+
reportWebVitals();

‎example/src/pages/Home.css

Whitespace-only changes.

‎example/src/pages/Home.tsx

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
2+
import ExploreContainer from '../components/ExploreContainer';
3+
import './Home.css';
4+
5+
const Home: React.FC = () => {
6+
return (
7+
<IonPage>
8+
<IonHeader>
9+
<IonToolbar>
10+
<IonTitle>Blank</IonTitle>
11+
</IonToolbar>
12+
</IonHeader>
13+
<IonContent fullscreen>
14+
<IonHeader collapse="condense">
15+
<IonToolbar>
16+
<IonTitle size="large">Blank</IonTitle>
17+
</IonToolbar>
18+
</IonHeader>
19+
<ExploreContainer />
20+
</IonContent>
21+
</IonPage>
22+
);
23+
};
24+
25+
export default Home;

‎example/src/react-app-env.d.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
/// <reference types="react-scripts" />

‎example/src/reportWebVitals.ts

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { ReportHandler } from 'web-vitals';
2+
3+
const reportWebVitals = (onPerfEntry?: ReportHandler) => {
4+
if (onPerfEntry && onPerfEntry instanceof Function) {
5+
import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
6+
getCLS(onPerfEntry);
7+
getFID(onPerfEntry);
8+
getFCP(onPerfEntry);
9+
getLCP(onPerfEntry);
10+
getTTFB(onPerfEntry);
11+
});
12+
}
13+
};
14+
15+
export default reportWebVitals;

‎example/src/service-worker.ts

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
/// <reference lib="webworker" />
2+
/* eslint-disable no-restricted-globals */
3+
4+
// This service worker can be customized!
5+
// See https://developers.google.com/web/tools/workbox/modules
6+
// for the list of available Workbox modules, or add any other
7+
// code you'd like.
8+
// You can also remove this file if you'd prefer not to use a
9+
// service worker, and the Workbox build step will be skipped.
10+
11+
import { clientsClaim } from 'workbox-core';
12+
import { ExpirationPlugin } from 'workbox-expiration';
13+
import { precacheAndRoute, createHandlerBoundToURL } from 'workbox-precaching';
14+
import { registerRoute } from 'workbox-routing';
15+
import { StaleWhileRevalidate } from 'workbox-strategies';
16+
17+
declare const self: ServiceWorkerGlobalScope;
18+
19+
clientsClaim();
20+
21+
// Precache all of the assets generated by your build process.
22+
// Their URLs are injected into the manifest variable below.
23+
// This variable must be present somewhere in your service worker file,
24+
// even if you decide not to use precaching. See https://cra.link/PWA
25+
precacheAndRoute(self.__WB_MANIFEST);
26+
27+
// Set up App Shell-style routing, so that all navigation requests
28+
// are fulfilled with your index.html shell. Learn more at
29+
// https://developers.google.com/web/fundamentals/architecture/app-shell
30+
const fileExtensionRegexp = new RegExp('/[^/?]+\\.[^/]+$');
31+
registerRoute(
32+
// Return false to exempt requests from being fulfilled by index.html.
33+
({ request, url }: { request: Request; url: URL }) => {
34+
// If this isn't a navigation, skip.
35+
if (request.mode !== 'navigate') {
36+
return false;
37+
}
38+
39+
// If this is a URL that starts with /_, skip.
40+
if (url.pathname.startsWith('/_')) {
41+
return false;
42+
}
43+
44+
// If this looks like a URL for a resource, because it contains
45+
// a file extension, skip.
46+
if (url.pathname.match(fileExtensionRegexp)) {
47+
return false;
48+
}
49+
50+
// Return true to signal that we want to use the handler.
51+
return true;
52+
},
53+
createHandlerBoundToURL(process.env.PUBLIC_URL + '/index.html')
54+
);
55+
56+
// An example runtime caching route for requests that aren't handled by the
57+
// precache, in this case same-origin .png requests like those from in public/
58+
registerRoute(
59+
// Add in any other file extensions or routing criteria as needed.
60+
({ url }) => url.origin === self.location.origin && url.pathname.endsWith('.png'),
61+
// Customize this strategy as needed, e.g., by changing to CacheFirst.
62+
new StaleWhileRevalidate({
63+
cacheName: 'images',
64+
plugins: [
65+
// Ensure that once this runtime cache reaches a maximum size the
66+
// least-recently used images are removed.
67+
new ExpirationPlugin({ maxEntries: 50 }),
68+
],
69+
})
70+
);
71+
72+
// This allows the web app to trigger skipWaiting via
73+
// registration.waiting.postMessage({type: 'SKIP_WAITING'})
74+
self.addEventListener('message', (event) => {
75+
if (event.data && event.data.type === 'SKIP_WAITING') {
76+
self.skipWaiting();
77+
}
78+
});
79+
80+
// Any other custom service worker logic can go here.

0 commit comments

Comments
 (0)