Skip to content

Commit

Permalink
Merge pull request #993 from JGreenlee/label-screen-react-migration
Browse files Browse the repository at this point in the history
🏷️ Migration of Label Screen Components
  • Loading branch information
shankari authored Jun 28, 2023
2 parents 5bb0eee + c0cf400 commit c724ac1
Show file tree
Hide file tree
Showing 68 changed files with 2,126 additions and 2,120 deletions.
18 changes: 13 additions & 5 deletions package.cordovabuild.json
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,9 @@
"type": "git",
"url": "git+https://github.com/e-mission/e-mission-phone.git"
},
"scripts": {
"build": "npx webpack --config webpack.prod.js && npx cordova build"
},
"devDependencies": {
"@babel/core": "^7.21.3",
"@babel/plugin-proposal-class-properties": "^7.18.6",
Expand All @@ -17,6 +20,7 @@
"@babel/preset-typescript": "^7.21.4",
"@ionic/cli": "6.20.8",
"babel-loader": "^9.1.2",
"babel-plugin-angularjs-annotate": "^0.10.0",
"babel-plugin-optional-require": "^0.3.1",
"concurrently": "^8.0.1",
"cordova": "^11.1.0",
Expand Down Expand Up @@ -89,6 +93,10 @@
}
},
"dependencies": {
"@havesource/cordova-plugin-push": "git+https://github.com/havesource/cordova-plugin-push.git#4.0.0-dev.0",
"@react-navigation/native": "^6.1.7",
"@react-navigation/stack": "^6.3.17",
"@shopify/flash-list": "^1.3.1",
"angular": "1.6.7",
"angular-animate": "1.6.7",
"angular-local-storage": "^0.7.1",
Expand All @@ -100,7 +108,6 @@
"angular-ui-router": "0.2.13",
"animate.css": "^3.5.2",
"bottleneck": "^2.19.5",
"core-js": "^2.5.7",
"cordova-android": "11.0.0",
"cordova-ios": "6.2.0",
"cordova-plugin-advanced-http": "3.3.1",
Expand All @@ -122,8 +129,7 @@
"cordova-plugin-ionic-webview": "5.0.0",
"cordova-plugin-local-notification-12": "github:e-mission/cordova-plugin-local-notification-12#v0.1.4-fix-android-action",
"cordova-plugin-x-socialsharing": "6.0.4",
"phonegap-plugin-barcodescanner": "git+https://github.com/phonegap/phonegap-plugin-barcodescanner#v8.1.0",
"@havesource/cordova-plugin-push": "git+https://github.com/havesource/cordova-plugin-push.git#4.0.0-dev.0",
"core-js": "^2.5.7",
"enketo-core": "^6.1.7",
"fast-xml-parser": "^4.2.2",
"fs-extra": "^9.0.1",
Expand All @@ -140,14 +146,16 @@
"ng-i18next": "^1.0.7",
"npm": "^9.6.3",
"nvd3": "^1.8.6",
"phonegap-plugin-barcodescanner": "git+https://github.com/phonegap/phonegap-plugin-barcodescanner#v8.1.0",
"prop-types": "^15.8.1",
"react": "^18.2.*",
"react-dom": "^18.2.*",
"react-i18next": "^12.3.1",
"react-native-paper": "^5.8.0",
"react-native-safe-area-context": "^4.5.3",
"react-native-safe-area-context": "^4.6.3",
"react-native-screens": "^3.22.0",
"react-native-vector-icons": "^9.2.0",
"react-native-web": "^0.19.*",
"react-native-web": "^0.18.10",
"react-native-web-webview": "^1.0.2",
"react-qr-code": "^2.0.11",
"shelljs": "^0.8.5"
Expand Down
10 changes: 7 additions & 3 deletions package.serve.json
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
},
"scripts": {
"setup-serve": "./bin/download_settings_controls.js && ./bin/setup_autodeploy.js",
"serve": "webpack && concurrently -k \"phonegap --verbose serve\" \"webpack --watch\"",
"serve": "webpack --config webpack.dev.js && concurrently -k \"phonegap --verbose serve\" \"webpack --config webpack.dev.js --watch\"",
"serve-only": "phonegap --verbose serve"
},
"devDependencies": {
Expand Down Expand Up @@ -41,6 +41,9 @@
"webpack-cli": "^5.0.1"
},
"dependencies": {
"@react-navigation/native": "^6.1.7",
"@react-navigation/stack": "^6.3.17",
"@shopify/flash-list": "^1.3.1",
"angular": "1.6.7",
"angular-animate": "1.6.7",
"angular-local-storage": "^0.7.1",
Expand Down Expand Up @@ -74,9 +77,10 @@
"react-dom": "^18.2.*",
"react-i18next": "^12.3.1",
"react-native-paper": "^5.8.0",
"react-native-safe-area-context": "^4.5.3",
"react-native-safe-area-context": "^4.6.3",
"react-native-screens": "^3.22.0",
"react-native-vector-icons": "^9.2.0",
"react-native-web": "^0.19.*",
"react-native-web": "^0.18.10",
"react-native-web-webview": "^1.0.2",
"react-qr-code": "^2.0.11",
"shelljs": "^0.8.5"
Expand Down
14 changes: 14 additions & 0 deletions tsconfig.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
{
"compilerOptions": {
"outDir": "./dist/",
"sourceMap": true,
"module": "es6",
"target": "es5",
"esModuleInterop": true,
"jsx": "react",
"allowJs": true,
"moduleResolution": "node"
},
"include": ["www/**/*"],
"exclude": ["**/www/manual_lib/*", "**/node_modules/*", "**/dist/*"],
}
80 changes: 32 additions & 48 deletions webpack.config.js
Original file line number Diff line number Diff line change
@@ -1,11 +1,8 @@
const path = require('path')
const glob = require('glob')
const webpack = require('webpack')

module.exports = {
mode: 'development',
entry: './www/index.js',
devtool: 'inline-source-map',
output: {
path: path.resolve(__dirname, 'www/dist'),
filename: 'bundle.js',
Expand All @@ -15,59 +12,47 @@ module.exports = {
// to load CSS and SCSS (enketo-core only supplies SCSS)
{
test: /\.(scss|css)$/,
include: [path.resolve(__dirname, 'www/css'),
path.resolve(__dirname, 'www/manual_lib'),
path.resolve(__dirname, 'node_modules/enketo-core'),
path.resolve(__dirname, 'node_modules/leaflet')],
use: ['style-loader', 'css-loader', 'sass-loader'],
},
// to resolve url() in CSS
{
test: /\.(png|jpg)$/,
loader: 'url-loader'
include: [path.resolve(__dirname, 'www/css'),
path.resolve(__dirname, 'node_modules/react-native-paper'),
path.resolve(__dirname, 'node_modules/@react-navigation/elements')],
use: 'url-loader',
},
// necessary for react-native-web to bundle JSX
{
test: /\.jsx$/,
exclude: /node_modules\/(?!()\/).*/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env', '@babel/preset-react'],
},
test: /\.(js|jsx|ts|tsx)$/,
include: [path.resolve(__dirname, 'www'),
path.resolve(__dirname, 'node_modules/react-native-vector-icons')],
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env', '@babel/preset-react', '@babel/preset-typescript'],
},
},
// necessary to load TypeScript files
{
test: /\.(ts|tsx)?$/,
include: path.resolve(__dirname, 'www'),
loader: 'ts-loader',
options: {
transpileOnly: true,
experimentalWatchApi: true,
},
},
// necessary for react-native-paper to load images, fonts, and vector graphics
{
test: /\.(jpg|png|woff|woff2|eot|ttf|svg)$/,
include: [path.resolve(__dirname, 'www'),
path.resolve(__dirname, 'node_modules/react-native-vector-icons')],
type: 'asset/resource',
},
// necessary for react-native-paper to load icons
{
test: /\.js$/,
exclude: /node_modules[/\\](?!react-native-vector-icons)/,
use: {
loader: 'babel-loader',
options: {
// Disable reading babel configuration
babelrc: false,
configFile: false,

// The configuration for compilation
presets: [
['@babel/preset-env', { useBuiltIns: 'usage' }],
'@babel/preset-react',
'@babel/preset-flow',
"@babel/preset-typescript"
],
plugins: [
'@babel/plugin-proposal-class-properties',
'@babel/plugin-proposal-object-rest-spread'
],
},
},
},
// necessary to load html files
{
test: /\.html$/i,
loader: 'file-loader'
}
],
},
plugins: [
Expand All @@ -77,20 +62,19 @@ module.exports = {
jQuery: 'jquery',
moment: 'moment',
L: 'leaflet',
})
}),
new webpack.DefinePlugin({
// __DEV__ is needed by FlashList; it's set false for production so that certain debugging
// checks can be skipped and performance can be improved
__DEV__: process.env.NODE_ENV !== 'production' || true,
}),
],
devServer: {
historyApiFallback: true,
contentBase: './',
hot: true,
},
// "react-native" must be aliased to "react-native-web"
// https://necolas.github.io/react-native-web/docs/setup/#package-aliasing
resolve: {
alias: {
'react-native$': 'react-native-web',
'react-native-webview': 'react-native-web-webview',
'react-native-vector-icons': false,
/* Enketo expects its per-app configuration to be available as 'enketo-config',
so we have to alias it here.
https://github.com/enketo/enketo-core#global-configuration */
Expand Down
12 changes: 12 additions & 0 deletions webpack.dev.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
const { merge } = require('webpack-merge');
const common = require('./webpack.config.js');

module.exports = merge(common, {
mode: 'development',
devtool: 'inline-source-map',
devServer: {
historyApiFallback: true,
contentBase: './',
hot: true,
},
});
29 changes: 29 additions & 0 deletions webpack.prod.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
const path = require('path')
const common = require('./webpack.config.js');
const { merge } = require('webpack-merge');

module.exports = merge(common, {
mode: 'production',
devtool: 'source-map',
module: {
rules: [
/* In production, Webpack minifies JS files and randomizes variable names.
This causes problems with AngularJS unless you use explicit annotations,
which we don't.
https://docs.angularjs.org/error/$injector/strictdi
(The syntax we use is like the 'bad' example: implicit annotations)
So rather than change every file in our codebase, I'm adding this
babel plugin which basically preprocesses our 'bad' code into 'good' code.
Only needed on production because minification doesn't happen on dev. */
{
test: /\.(js)$/,
include: path.resolve(__dirname, 'www'),
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
plugins: ["angularjs-annotate"],
},
},
],
},
});
46 changes: 6 additions & 40 deletions www/css/main.diary.css
Original file line number Diff line number Diff line change
Expand Up @@ -190,6 +190,12 @@ a.item-content {
width: 230px;
}

.popover .scroll-content {
height: auto;
margin: 0 !important;
border-radius: 0 0 10px 10px !important;
}

.big-popover {
height: 40%;
width: 75%;
Expand Down Expand Up @@ -549,43 +555,3 @@ div.labelfilterlist {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}

enketo-notes-list, .notes-list {
width: 100%;
margin-bottom: 0px;
}

.notes-list {
padding: 0 12px 5px 12px;
text-align: center;
}

.notes-list-grid {
display: grid;
grid-template-columns: auto auto min-content;
grid-auto-rows: 30px;
align-items: center;
gap: 0 8px;
font-size: 12px;
}

.notes-list-grid > li {
display: contents;
}

/* the trash can should appear a bit larger */
.notes-list-grid .icon {
font-size: 22px;
}

/* the note's label will be left-aligned */
.notes-list-grid b {
text-align: left;
margin-left: 5px;
}

.notes-list-grid p {
font-size: inherit;
color: inherit;
margin: 0;
}
Loading

0 comments on commit c724ac1

Please sign in to comment.