Unverified Commit b1633a8e authored by Mauko Quiroga's avatar Mauko Quiroga Committed by Mauko Quiroga

Initial commit

parents
# See more at http://EditorConfig.org
root = true # this is the topmost editorconfig file
[**/*]
charset = utf-8
end_of_line = lf
indent_size = 4
indent_style = space
insert_final_newline = true
trim_trailing_whitespace = true
{
"parser": "babel-eslint",
"parserOptions": {
"ecmaVersion": 9,
"ecmaFeatures": {
"jsx": true,
},
"sourceType": "module",
},
"env": {
"browser": true,
"es6": true,
"node": true,
},
"plugins": [
"react",
],
"extends": [
"eslint:recommended",
"plugin:react/recommended",
],
"settings": {
"react": {
"version": "detect",
},
},
"rules": {
"arrow-spacing": "error",
"comma-dangle": ["error", "always-multiline"],
"eol-last": "error",
"indent": ["error", 4],
"jsx-quotes": "error",
"key-spacing": ["error", { "beforeColon": false, "afterColon": true }],
"keyword-spacing": "error",
"no-console": "off",
"no-trailing-spaces": "error",
"quotes": ["error", "double", { "avoidEscape": true }],
"react/display-name": "off",
"react/jsx-no-target-blank": "off",
"react/no-unescaped-entities": "off",
"react/prop-types": "off",
"react/react-in-jsx-scope": "off",
"semi": ["error", "never"],
"space-before-blocks": "error",
"space-infix-ops": "error",
},
}
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# Runtime data
pids
*.pid
*.seed
*.pid.lock
# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov
# Coverage directory used by tools like istanbul
coverage
# nyc test coverage
.nyc_output
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
.grunt
# Bower dependency directory (https://bower.io/)
bower_components
# node-waf configuration
.lock-wscript
# Compiled binary addons (http://nodejs.org/api/addons.html)
build/Release
# Dependency directories
node_modules/
jspm_packages/
# Typescript v1 declaration files
typings/
# Optional npm cache directory
.npm
# Optional eslint cache
.eslintcache
# Optional REPL history
.node_repl_history
# Output of 'npm pack'
*.tgz
# Yarn Integrity file
.yarn-integrity
# dotenv environment variables file
.env
app/build
.DS_Store
yarn.lock
11.10.0
This diff is collapsed.
# Introduction
LexImpact - Client
# How to use
```
npm install
npm run dev
```
# Screenshot
<img width="1280" alt="Capture d’écran 2019-04-25 à 03 08 30" src="https://user-images.githubusercontent.com/329236/56703045-6517c780-6707-11e9-9947-9f4e3d72aac2.png">
const express = require("express")
const path = require("path")
const cookieParser = require("cookie-parser")
const bodyParser = require("body-parser")
const next = require("./next")
const app = express()
// Put in place textbook middlewares for express.
if (process.env.NODE_ENV !== "production") {
// app.use(logger('dev'));
}
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({ extended: false }))
app.use(cookieParser())
app.use("/", express.static(path.join(__dirname, "public")))
const start = async (port) => {
// Couple Next.js with our express server.
// app and handle from "next" will now be available as req.app and req.handle.
await next(app)
// Normal routing, if you need it.
// Use your SSR logic here.
// Even if you don't do explicit routing the pages inside app/pages
// will still get rendered as per their normal route.
app.get("/main", (req, res) => req.app.render(req, res, "/", {
routeParam: req.params.routeParam,
}))
app.listen(port)
}
// Start the express server.
start(9001)
{
"plugins": [
[
"module-resolver", {
"root": ["."],
"alias": {
"styles": "./styles"
},
"cwd": "babelrc"
}],
[
"wrap-in-js",
{
"extensions": ["css$", "scss$"]
}
]
],
"presets": [
"next/babel"
],
"ignore": []
}
import React from "react"
import PropTypes from "prop-types"
import Paper from "@material-ui/core/Paper"
import { withStyles } from "@material-ui/core/styles/"
import Plotly from "plotly.js/dist/plotly"
import createPlotComponent from "react-plotly.js/factory"
import {bar, layout} from "plotly-js-material-design-theme"
const styles = theme => ({
root: {
...theme.mixins.gutters(),
paddingBottom: theme.spacing.unit * 2,
paddingTop: theme.spacing.unit * 2,
margin: `${theme.spacing.unit / 2}em auto`,
width: "25em",
},
})
class Plot extends React.Component {
render() {
const { classes } = this.props
const Graph = createPlotComponent(Plotly)
return (
<Paper className={classes.root} elevation={1}>
<Graph
data={[
bar({
type: "bar",
x: ["Avant"],
y: [700],
marker: {color: "E5DC07"},
showlegend: false,
hoverinfo: ["y"],
}),
bar({
type: "bar",
x: ["Après"],
y: [900],
marker: {color: "00A3FF"},
showlegend: false,
hoverinfo: ["y"],
}),
]}
layout={
layout({
width: 320,
height: 240,
title: "Effet redistributif",
legend: {
orientation: "h",
},
})
}
config={{
displayModeBar: false,
}}
/>
</Paper>
)
}
}
Plot.propTypes = {
classes: PropTypes.object.isRequired,
}
export default withStyles(styles)(Plot)
import PropTypes from "prop-types"
const Theme = ({ children }) => (
<div>{children}</div>
)
Theme.propTypes = {
children: PropTypes.oneOfType([
PropTypes.arrayOf(PropTypes.element),
PropTypes.element,
]).isRequired,
}
export default Theme
import { SheetsRegistry } from "jss"
import { createMuiTheme } from "@material-ui/core/styles"
import { createGenerateClassName } from "@material-ui/core/styles"
// A theme with custom primary and secondary color.
// It's optional.
const theme = createMuiTheme({
typography: {
useNextVariants: true,
},
})
function createPageContext() {
return {
theme,
// This is needed in order to deduplicate the injection of CSS in the page.
sheetsManager: new Map(),
// This is needed in order to inject the critical CSS.
sheetsRegistry: new SheetsRegistry(),
// The standard class name generator.
generateClassName: createGenerateClassName(),
}
}
export default function getPageContext() {
// Make sure to create a new context for every server-side request so that data
// isn't shared between connections (which would be bad).
if (!process.browser) {
return createPageContext()
}
// Reuse context on the client-side.
if (!global.__INIT_MATERIAL_UI__) {
global.__INIT_MATERIAL_UI__ = createPageContext()
}
return global.__INIT_MATERIAL_UI__
}
import React from "react"
import PropTypes from "prop-types"
import { MuiThemeProvider } from "@material-ui/core/styles/"
import CssBaseline from "@material-ui/core/CssBaseline"
import getPageContext from "./getPageContext"
function withRoot(Component) {
let pageContext = null
class WithRoot extends React.Component {
constructor(props, context) {
super(props, context)
pageContext = this.props.pageContext || getPageContext()
}
componentDidMount() {
// Remove the server-side injected CSS.
const jssStyles = document.querySelector("#jss-server-side")
if (jssStyles && jssStyles.parentNode) {
jssStyles.parentNode.removeChild(jssStyles)
}
}
render() {
// MuiThemeProvider makes the theme available down the React tree thanks to React context.
return (
<MuiThemeProvider
theme={pageContext.theme}
sheetsManager={pageContext.sheetsManager}
>
{/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
<CssBaseline />
<Component {...this.props} />
</MuiThemeProvider>
)
}
}
WithRoot.propTypes = {
pageContext: PropTypes.object,
}
WithRoot.getInitialProps = ctx => {
if (Component.getInitialProps) {
return Component.getInitialProps(ctx)
}
return {}
}
return WithRoot
}
export default withRoot
const path = require("path")
const glob = require("glob")
module.exports = {
webpack: (config) => {
config.module.rules.push(
{
test: /\.(css|scss)/,
loader: "emit-file-loader",
options: {
name: "dist/[path][name].[ext]",
},
}
,
{
test: /\.css$/,
use: ["babel-loader", "raw-loader", "postcss-loader"],
}
,
{
test: /\.s(a|c)ss$/,
use: ["babel-loader", "raw-loader", "postcss-loader",
{
loader: "sass-loader",
options: {
includePaths: ["styles", "node_modules"]
.map((d) => path.join(__dirname, d))
.map((g) => glob.sync(g))
.reduce((a, c) => a.concat(c), []),
},
},
],
}
)
return config
},
exportPathMap() {
return {
"/": { page: "/" },
}
},
distDir: "build",
}
import React from "react"
import Document, { Head, Main, NextScript } from "next/document"
import JssProvider from "react-jss/lib/JssProvider"
import getPageContext from "../lib/getPageContext"
class MyDocument extends Document {
static getInitialProps(ctx) {
// Resolution order
//
// On the server:
// 1. page.getInitialProps
// 2. document.getInitialProps
// 3. page.render
// 4. document.render
//
// On the server with error:
// 2. document.getInitialProps
// 3. page.render
// 4. document.render
//
// On the client
// 1. page.getInitialProps
// 3. page.render
// Get the context of the page to collected side effects.
const pageContext = getPageContext()
const page = ctx.renderPage(Component => props => (
<JssProvider
registry={pageContext.sheetsRegistry}
generateClassName={pageContext.generateClassName}
>
<Component pageContext={pageContext} {...props} />
</JssProvider>
))
return {
...page,
pageContext,
styles: (
<style
id="jss-server-side"
// eslint-disable-next-line react/no-danger
dangerouslySetInnerHTML={{ __html: pageContext.sheetsRegistry.toString() }}
/>
),
}
}
render() {
const { pageContext } = this.props
return (
<html lang="en" dir="ltr">
<Head>
<meta charSet="utf-8" />
{/* Use minimum-scale=1 to enable GPU rasterization */}
<meta
name="viewport"
content={
"user-scalable=0, initial-scale=1, " +
"minimum-scale=1, width=device-width, height=device-height"
}
/>
{/* PWA primary color */}
<meta name="theme-color" content={pageContext.theme.palette.primary[500]} />
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500"
/>
</Head>
<body>
<Main />
<NextScript />
</body>
</html>
)
}
}
export default MyDocument
import React, {Fragment} from "react"
import Head from "next/head"
import dynamic from "next/dynamic"
import PropTypes from "prop-types"
import Button from "@material-ui/core/Button"
import {
Dialog,
DialogTitle,
DialogContent,
DialogContentText,
DialogActions,
} from "@material-ui/core"
import Typography from "@material-ui/core/Typography"
import { withStyles } from "@material-ui/core/styles/"
import withRoot from "../lib/withRoot"
const Plot = dynamic(import("../components/Plot"), {
ssr: false,
})
const styles = theme => ({
root: {
paddingTop: theme.spacing.unit * 5,
textAlign: "center",
},
paper: {
...theme.mixins.gutters(),
paddingBottom: theme.spacing.unit * 2,
paddingTop: theme.spacing.unit * 2,
margin: "1em auto",
width: "25em",
},
})
class Index extends React.Component {
constructor(props) {
super(props)
this.state = {
open: false,
}
this.handleClick = this.handleClick.bind(this)
this.handleClose = this.handleClose.bind(this)
}
handleClose() {
this.setState({
open: false,
})
}
handleClick() {
this.setState({
open: true,
})
}
render() {
const { classes } = this.props
const { open } = this.state
return (
<Fragment>
<Head><title>LexImpact</title></Head>
<div className={classes.root}>
<Dialog open={open} onClose={this.handleClose}>
<DialogTitle>Combien ça coûte ?</DialogTitle>
<DialogContent>
<DialogContentText>1 000 000 €</DialogContentText>
</DialogContent>
<DialogActions>
<Button color="primary" onClick={this.handleClose}>OK</Button>
</DialogActions>
</Dialog>
<Typography variant="h1" gutterBottom>LexImpact</Typography>
<Plot />
<Button variant="contained" color="secondary" onClick={this.handleClick}>Calculer</Button>
</div>
</Fragment>
)
}
}
Index.propTypes = {
classes: PropTypes.object.isRequired,
}
export default withRoot(withStyles(styles)(Index))
module.exports = {
plugins: [
require("postcss-easy-import")({ prefix: "_" }),
require("autoprefixer")({ /* ...options */ }),
],
}
@import 'normalize.css';
$primary-color: black;
.heading {
display: flex;
justify-content: center;
font-size: 20px;
font-weight: bold;
margin-top: 5em;
}
.text {
display: flex;
justify-content: center;
margin-top: 2em;
}
.img-container {
justify-content: center;