Skip to content

Commit

Permalink
Merge pull request #161 from Phanindra-tw/master
Browse files Browse the repository at this point in the history
Add Webpack & babel and create a HomePage Component
  • Loading branch information
Phanindra-tw authored Apr 16, 2024
2 parents 524625c + 1e338f2 commit 3412545
Show file tree
Hide file tree
Showing 10 changed files with 2,512 additions and 47 deletions.
6 changes: 6 additions & 0 deletions .babelrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
]
}
20 changes: 18 additions & 2 deletions .github/workflows/build_publish.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -26,9 +26,25 @@ jobs:
- name: Build the app
run: yarn build-prod

- name: Zip the build
run: zip -r person-management-app.zip build
- id: versionCheck
uses: EndBug/version-check@v2
with:
file-url: https://unpkg.com/person-management-app@latest/package.json
static-checking: localIsNew

- name: Version guard
if: steps.versionCheck.outputs.changed == 'false'
uses: actions/github-script@v3
with:
script: |
core.setFailed('No version change detected. You should run `yarn bump:<patch|minor|major>` to bump the version')
- name: Publish
env:
NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
run: |
npm config set '//registry.npmjs.org/:_authToken' "${NPM_TOKEN}"
yarn publish --new-version ${{ steps.versionCheck.outputs.version }}
- id: versionCheck
uses: EndBug/version-check@v2
with:
Expand Down
3 changes: 2 additions & 1 deletion .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,15 @@

# production
/build

/dist
# misc
.DS_Store
-tmp.js
.env.local
.env.development.local
.env.test.local
.env.production.local
.idea

npm-debug.log*
yarn-debug.log*
Expand Down
28 changes: 24 additions & 4 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
{
"name": "person-management-app",
"version": "0.1.0",
"private": true,
"homepage": "./",
"author": "bahmni@thoughtworks.com",
"description": "Person Management App",
"main": "dist/index.js",
"dependencies": {
"enzyme": "^3.3.0",
"enzyme-adapter-react-16": "^1.1.1",
Expand All @@ -26,8 +27,8 @@
"scripts": {
"precommit": "lint-staged",
"start": "react-scripts start",
"build": "react-scripts build",
"build-prod": "react-scripts build && node modify-build-index.js",
"build": "webpack --mode development",
"build-prod": "webpack --mode production",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"bump:patch": "yarn version --no-git-tag-version --patch",
Expand All @@ -40,5 +41,24 @@
"**/**/set-value": "^2.0.1",
"**/**/lodash": "^4.17.12",
"**/**/mixin-deep": "^1.3.2"
},
"devDependencies": {
"@babel/core": "^7.24.4",
"@babel/preset-env": "^7.24.4",
"@babel/preset-react": "^7.24.1",
"babel-loader": "^9.1.3",
"css-loader": "5.2.6",
"file-loader": "^6.2.0",
"html-webpack-plugin": "^5.6.0",
"style-loader": "1.3.0",
"svg-inline-loader": "^0.8.2",
"webpack": "^5.91.0",
"webpack-cli": "^5.1.4"
},
"exports": {
".": {
"import": "./dist/index.js",
"require": "./dist/index.js"
}
}
}
18 changes: 3 additions & 15 deletions src/App.js
Original file line number Diff line number Diff line change
@@ -1,22 +1,10 @@
import React, { Component } from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import CreatePerson from './containers/CreatePerson';
import PersonDashboard from './containers/PersonDashboard';
import './index.css';
import EditPerson from './containers/EditPerson';
import './containers/HomePage.css';
import HomePage from './containers/HomePage';

class App extends Component {
render() {
return (
<BrowserRouter basename="/person-management">
<Switch>
<Route path="/new" exact component={CreatePerson} />
<Route path="/search" exact component={PersonDashboard} />
<Route path="/edit/:uuid" exact component={EditPerson} />
<Route path="/" component={PersonDashboard} />
</Switch>
</BrowserRouter>
);
return <HomePage />;
}
}

Expand Down
4 changes: 2 additions & 2 deletions src/index.css → src/containers/HomePage.css
Original file line number Diff line number Diff line change
Expand Up @@ -93,11 +93,11 @@ input[type='checkbox'] + label span {
margin: 0 10px;
width: var(--height);
height: var(--height);
background: url('../src/assets/checkbox_unchecked.svg') 0px center no-repeat;
background: url('../assets/checkbox_unchecked.svg') 0px center no-repeat;
}

input[type='checkbox']:checked + label span {
background: url('../src/assets/checkbox_checked.svg') 0px center no-repeat;
background: url('../assets/checkbox_checked.svg') 0px center no-repeat;
}

input[type='checkbox']:disabled + label span {
Expand Down
23 changes: 23 additions & 0 deletions src/containers/HomePage.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import React, { Component } from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import CreatePerson from './CreatePerson';
import PersonDashboard from './PersonDashboard';
import './HomePage.css';
import EditPerson from './EditPerson';

class App extends Component {
render() {
return (
<BrowserRouter basename="/person-management">
<Switch>
<Route path="/new" exact component={CreatePerson} />
<Route path="/search" exact component={PersonDashboard} />
<Route path="/edit/:uuid" exact component={EditPerson} />
<Route path="/" component={PersonDashboard} />
</Switch>
</BrowserRouter>
);
}
}

export default App;
13 changes: 1 addition & 12 deletions src/index.js
Original file line number Diff line number Diff line change
@@ -1,12 +1 @@
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(
<App />,

document.getElementById('root')
);
registerServiceWorker();
export { default as HomePage } from './containers/HomePage';
57 changes: 57 additions & 0 deletions webpack.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
entry: {
index: './src/index.js'
}, // Entry point of your application
output: {
path: path.resolve(__dirname, 'dist'), // Output directory
library: "PersonManagementApp",
libraryTarget: "umd",
umdNamedDefine: true,
clean: true,
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader' // Use Babel for JavaScript and JSX files
},
resolve: {
fullySpecified: false,
},
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader'] // Use style-loader and css-loader for CSS files
},
{
test: /\.svg$/,
use: ['svg-inline-loader'] // Use svg-inline-loader for SVG files
},
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'file-loader', // Use file-loader for other file types like images
options: {
name: '[name].[ext]',
outputPath: 'images/'
}
}
]
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './public/index.html' // HTML template
})
],
resolve: {
extensions: ['.ts', '.js'],
}
};
Loading

0 comments on commit 3412545

Please sign in to comment.