Skip to content

Commit 07ce630

Browse files
seanforyou23seanforyou23
authored
Merge pull request #9 from ibolton336/initial-styles
feat(startup view): implements success message & basic component load
2 parents 3d4e667 + a726d84 commit 07ce630

9 files changed

Lines changed: 310 additions & 75 deletions

File tree

‎babel.config.js‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
11
module.exports = {
2-
presets: [
3-
"@babel/preset-env",
4-
"@babel/preset-react"
5-
]
6-
}
2+
presets: ['@babel/preset-env', '@babel/preset-react'],
3+
plugins: ['@babel/plugin-proposal-class-properties']
4+
};

‎package.json‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,16 +12,19 @@
1212
},
1313
"devDependencies": {
1414
"@babel/core": "^7.1.6",
15+
"@babel/plugin-proposal-class-properties": "^7.1.0",
1516
"@babel/preset-env": "^7.1.6",
1617
"@babel/preset-react": "^7.0.0",
1718
"@patternfly/react-core": "^1.35.0",
1819
"babel-loader": "^8.0.4",
20+
"css-loader": "^1.0.1",
21+
"file-loader": "^2.0.0",
1922
"html-webpack-plugin": "^3.2.0",
2023
"react": "^16.6.3",
2124
"react-dom": "^16.6.3",
25+
"style-loader": "^0.23.1",
2226
"webpack": "^4.25.1",
2327
"webpack-cli": "^3.1.2",
2428
"webpack-dev-server": "^3.1.10"
25-
},
26-
"dependencies": {}
29+
}
2730
}

‎src/App/app.css‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
:root {
2+
--myApp-global--spacer--md: 30px;
3+
}
4+
5+
.app-container {
6+
display: flex;
7+
align-items: center;
8+
justify-content: center;
9+
margin-top: var(--myApp-global--spacer--md);
10+
}
11+
12+
.notification-container {
13+
flex: 0 1 auto;
14+
}

‎src/App/index.js‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import React, { Component } from 'react';
2+
import { Alert, Button } from '@patternfly/react-core';
3+
import './app.css';
4+
import '@patternfly/react-core/dist/styles/base.css';
5+
6+
export default class App extends Component {
7+
state = {
8+
isShowing: true
9+
};
10+
dismissNotification = () => {
11+
this.setState({ isShowing: false });
12+
};
13+
render() {
14+
const { isShowing } = this.state;
15+
return (
16+
<div className="app-container">
17+
{isShowing && (
18+
<div className="notification-container">
19+
<Alert
20+
variant="success"
21+
title="Setup Complete"
22+
action={
23+
<Button onClick={this.dismissNotification} variant="secondary">
24+
Dismiss
25+
</Button>
26+
}
27+
>
28+
You have successfully launched your patternfly starter project.
29+
</Alert>
30+
</div>
31+
)}
32+
</div>
33+
);
34+
}
35+
}

‎src/app/app.js‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎src/index.html‎

Lines changed: 11 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,13 @@
1-
<!doctype html>
1+
<!DOCTYPE html>
22
<html lang="en-US">
3-
4-
<head>
5-
<meta charset="utf-8">
6-
<title>Patternfly Seed</title>
7-
<meta http-equiv="x-ua-compatible" content="ie=edge">
8-
<meta name="viewport" content="width=device-width, initial-scale=1">
9-
<base href="/">
10-
11-
<link id="touchIcon" rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
12-
<link id="favicon32" rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
13-
<link id="favicon16" rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
14-
<link rel="manifest" href="/manifest.webapp">
15-
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#cc0000">
16-
<meta id="appTitle" name="apple-mobile-web-app-title" content="Patternfly Seed">
17-
<meta id="appName" name="application-name" content="Patternfly Seed">
18-
<meta name="theme-color" content="#ffffff">
19-
</head>
20-
21-
<body class="pf-c-background-image">
22-
<noscript>Enabling JavaScript is required to run this app.</noscript>
23-
<div id="pf-seed"></div>
24-
</body>
25-
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Patternfly Seed</title>
6+
<meta id="appName" name="application-name" content="Patternfly Seed" />
7+
</head>
8+
9+
<body>
10+
<noscript>Enabling JavaScript is required to run this app.</noscript>
11+
<div id="root"></div>
12+
</body>
2613
</html>

‎src/index.js‎

Lines changed: 4 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,5 @@
1-
import React from 'react';
2-
import { Progress } from '@patternfly/react-core';
3-
import { Button } from '@patternfly/react-core';
4-
import { greeting } from './app/app';
1+
import React from "react";
2+
import ReactDOM from "react-dom";
3+
import App from "./App";
54

6-
const transpiled = () => {
7-
console.log(greeting());
8-
};
9-
10-
transpiled();
11-
12-
export class ProgressMeter extends React.Component {
13-
14-
render() {
15-
return (
16-
<div>
17-
<Progress value={33} title="test" />
18-
<Button variant="primary">Button</Button>
19-
</div>
20-
);
21-
}
22-
}
5+
ReactDOM.render(<App />, document.getElementById("root"));

‎webpack.config.js‎

Lines changed: 33 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,56 @@
1-
const path = require('path');
2-
const srcDir = path.resolve(__dirname, 'src');
3-
const distDir = path.resolve(__dirname, 'dist');
4-
const HtmlWebpackPlugin = require('html-webpack-plugin');
1+
const HtmlWebpackPlugin = require("html-webpack-plugin");
2+
const HOST = process.env.HOST || "localhost";
3+
const PORT = process.env.PORT || "9000";
4+
const path = require("path");
5+
const srcDir = path.resolve(__dirname, "src");
6+
const distDir = path.resolve(__dirname, "dist");
57

68
module.exports = {
7-
mode: 'development',
8-
devtool: 'cheap-module-source-map',
9-
entry: [
10-
path.join(srcDir, 'index.js')
11-
],
9+
mode: "development",
10+
devtool: "cheap-module-source-map",
11+
entry: [path.join(srcDir, "index.js")],
1212
output: {
1313
path: distDir,
14-
filename: '[name].bundle.js'
14+
filename: "[name].bundle.js"
1515
},
1616
devServer: {
17-
contentBase: distDir,
18-
historyApiFallback: true,
17+
host: HOST,
18+
port: PORT,
1919
compress: true,
20-
clientLogLevel: 'info',
21-
host: 'localhost',
22-
port: 9001
20+
inline: true,
21+
historyApiFallback: true,
22+
hot: true,
23+
overlay: true,
24+
open: true
2325
},
2426
module: {
2527
rules: [
2628
{
2729
test: /\.js?$/,
2830
use: [
2931
{
30-
loader: 'babel-loader'
32+
loader: "babel-loader"
3133
}
3234
]
35+
},
36+
{
37+
test: /\.css$/,
38+
use: ["style-loader", "css-loader"]
39+
},
40+
{
41+
test: /\.(ttf|eot|woff|woff2)$/,
42+
use: {
43+
loader: "file-loader",
44+
options: {
45+
name: "fonts/[name].[ext]"
46+
}
47+
}
3348
}
3449
]
3550
},
3651
plugins: [
3752
new HtmlWebpackPlugin({
38-
template: path.join(srcDir, 'index.html')
53+
template: path.join(srcDir, "index.html")
3954
})
4055
]
41-
}
56+
};

0 commit comments

Comments
 (0)