From 596f1025c0c903cea3d9c8df11084447e74bb88a Mon Sep 17 00:00:00 2001 From: llorentegerman Date: Wed, 24 Jul 2019 19:47:01 +1200 Subject: [PATCH] github pages, readme and license --- LICENSE | 7 ++ README.es.md | 321 ++++++++++++++++++++++++++++++++++++++++++++++++++ README.md | 327 +++++++++++++++++++++++++++++++++++++++++++++------ package.json | 10 +- yarn.lock | 109 ++++++++++++++++- 5 files changed, 732 insertions(+), 42 deletions(-) create mode 100644 LICENSE create mode 100644 README.es.md diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..fc9ad7a --- /dev/null +++ b/LICENSE @@ -0,0 +1,7 @@ +Copyright 2019 Germán Llorente + +Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. \ No newline at end of file diff --git a/README.es.md b/README.es.md new file mode 100644 index 0000000..da17e78 --- /dev/null +++ b/README.es.md @@ -0,0 +1,321 @@ +# Construyendo una UI desde cero, en base a un diseño con ReactJS + +En este articulo construiremos una UI siguiendo un diseño. Como herramienta para visualizar el diseño utilizaremos `Figma`, pero se puede utilizar cualquier otra herramienta que te permita extraer el codigo CSS de los elementos, como por ejemplo `invisionapp`, `zeplin`, etc. + +*Leer en [Inglés](README.md)* + +**Live demo**: [https://llorentegerman.github.io/react-admin-dashboard/](https://llorentegerman.github.io/react-admin-dashboard/) + +**Repositorio**: [https://github.com/llorentegerman/react-admin-dashboard](https://github.com/llorentegerman/react-admin-dashboard) + +### Cargando un diseño en Figma +No entrare en detalles sobre esta herramienta, solo necesitamos un diseño. +1. Crear una cuenta en [https://www.figma.com](https://www.figma.com) (es gratis). +2. He seleccionado al azar un *Figma file* desde [https://www.figmafreebies.com](https://www.figmafreebies.com) (es gratis). El archivo seleccionado es: [Figma Admin Dashboard UI Kit](https://www.figmafreebies.com/download/figma-admin-dashboard-ui-kit/). +Estoy usando la version web, solo es necesario hacer click en el boton `DOWNLOAD FREEBIES` y el diseño se adjuntara a tu cuenta automaticamente. +3. Puedes hacer doble click sobre los diferentes elementos y ver el codigo css de cada uno en la pestaña `code` que esta en la columna de la derecha. + +![screenshot3](https://i.postimg.cc/76vy3ckT/screenshot3.png) + +### Creando la app +Para este paso utilizaremos [Create React App](https://facebook.github.io/create-react-app/): +``` +npx create-react-app react-admin-dashboard +``` + +Utilizaremos [aphrodite](https://www.npmjs.com/package/aphrodite) para los estilos y [simple-flexbox](https://www.npmjs.com/package/simple-flexbox) para hacer el layout. + +`yarn add aphrodite simple-flexbox` o `npm install aphrodite simple-flexbox` + +### Estructura de carpetas +Para este caso mantendremos una estructura simple: +``` +/src + /assets + /components + App.js +``` + +## Manos a la obra +Ya tenemos todo listo para comenzar, lo primero que debemos hacer es identificar los bloques principales del diseño. Yo he decidido separarlo en 4 bloques principales de la siguiente manera: +``` +1- Sidebar +2- Main Block + 3- Header + 4- Content +``` + +Como pueden ver en la imagen, los bloques 3 y 4 estan dentro del 2. + +![Screenshot1](https://i.postimg.cc/bNxzNq1S/screenshot1.png) + +### Sidebar +Podemos separar el Sidebar en 2 partes, el bloque del `Logo` y el bloque de la lista de `MenuItem`. +Para esto necesitaremos 3 componentes: +``` +1- SidebarComponent + 2- LogoComponent + 3- MenuItemComponent (lista) +``` + + + +**Comenzaremos por definir el Logo y los Items del Menu** + +#### LogoComponent.js +Primero necesitamos descargar el Logo (doble click sobre el logo, ir a la pestaña `Design` y hacer click en el boton exportar que esta abajo del todo). Yo lo he descargado en formato `svg` y lo he importado como un componente de React, puedes verlo y copiarlo haciendo [click aqui](https://github.com/llorentegerman/react-admin-dashboard/blob/master/src/assets/icon-logo.js). + +`LogoComponent.js` es una `Row` centrada vertical y horizontalmente, con el `Logo` y el `title`. + +``` + + + Dashboard Kit + +``` + +Para los estilos, primero necesitamos importar la `font family` `Muli`, la manera facil de hacerlo es incluir esta linea en el archivo [App.css](https://github.com/llorentegerman/react-admin-dashboard/blob/master/src/App.css) (y podemos borrar todo el resto del archivo ya que no lo vamos a usar): + +``` +@import url('https://fonts.googleapis.com/css?family=Muli'); +``` + +Estos son los estilos que utilizaremos para el container y el titulo. + +```javascript +container: { + marginLeft: 32, + marginRight: 32 +}, +title: { + fontFamily: 'Muli', + fontStyle: 'normal', + fontWeight: 'bold', + fontSize: 19, + lineHeight: '24px', + letterSpacing: '0.4px', + color: '#A4A6B3', + opacity: 0.7, + marginLeft: 12 // <--- necesario para separar el titulo y el logo. +} +``` + +[Ver archivo completo: LogoComponent.js](https://github.com/llorentegerman/react-admin-dashboard/blob/master/src/components/sidebar/LogoComponent.js) + +#### MenuItemComponent.js +Este componente representa un item del menu, esta compuesto por un `icon`, un `title` y tiene diferentes estilos dependiendo de su estado (`activo`, `inactivo`, `hover`). + +``` + + {active &&
} + + {title} + +``` + +Como puedes ver, hay algunos estilos especiales dependiendo de la propiedad `active`, por ejemplo el `title` tiene un color diferente cuando `active` es `true`. Para los iconos, `fill` por defecto es `#9FA2B4` y la opacity por defecto es `1`, estos valores cambian dependiendo el estado de la propiedad antes mencionada. +Un elemento especial que aparece cuando el item esta activo, es esa barra blanca a la izquierda (`activeBar`). + +Estos son los estilos: +```javascript +activeBar: { + height: 56, + width: 3, + backgroundColor: '#DDE2FF', + position: 'absolute', + left: 0 +}, +activeContainer: { + backgroundColor: 'rgba(221,226,255, 0.08)' +}, +activeTitle: { + color: '#DDE2FF' +}, +container: { + height: 56, + cursor: 'pointer', + ':hover': { + backgroundColor: 'rgba(221,226,255, 0.08)' + }, + paddingLeft: 32, + paddingRight: 32 +}, +title: { + fontFamily: 'Muli', + fontSize: 16, + lineHeight: '20px', + letterSpacing: '0.2px', + color: '#A4A6B3', + marginLeft: 24 +} +``` +[Ver archivo completo: MenuItemComponent.js](https://github.com/llorentegerman/react-admin-dashboard/blob/master/src/components/sidebar/MenuItemComponent.js) + +#### SidebarComponent.js +Al igual que hicimos con el Logo, necesitamos descargar los iconos que utilizaremos en este componente, es posible hacerlo desde el diseño o puedes copiarlos desde la carepta `assets` del repositorio haciendo [click aqui](https://github.com/llorentegerman/react-admin-dashboard/tree/master/src/assets). +``` +... +import IconOverview from '../../assets/icon-overview.js'; +... + + + + + + + + + +
+ + + + +``` + +Basandonos en css extraido del diseño, podemos definir los estilos con estas 3 clases: +```javascript +container: { + backgroundColor: '#363740', + width: 255, + paddingTop: 32 +}, +menuItemList: { + marginTop: 52 +}, +separator: { + borderTop: '1px solid #DFE0EB', + marginTop: 16, + marginBottom: 16, + opacity: 0.06 +} +``` +[Ver archivo completo: SidebarComponent.js](https://github.com/llorentegerman/react-admin-dashboard/blob/master/src/components/sidebar/SidebarComponent.js) + + +Ya tenemos listo el `SidebarComponent`, en el repositorio he agregado unos eventos `onClick` y un `state` para hacerlo interactivo y poder ir seleccionado los diferentes items. + +### MainComponent (App.js) +Ahora solo hace falta trabajar en nuestro `App.js`, que como habiamos dicho antes tiene la siguiente estructura: +``` +1- Sidebar +2- Main Block + 3- Header + 4- Content +``` + +Y podemos definirlo de la siguiente manera: +``` + + + + +
+ Content +
+ + +``` + +Aqui los estilos: + +```javascript +container: { + height: '100vh' // para que el menu ocupe todo el alto de la pantalla +}, +content: { + marginTop: 54 +}, +mainBlock: { + backgroundColor: '#F7F8FC', + padding: 30 +} +``` +[Ver archivo completo: App.js](https://github.com/llorentegerman/react-admin-dashboard/blob/master/src/App.js) + +#### HeaderComponent.js +Por ultimo, definiremos el Header, con la siguiente estructura. +``` +1- Row ({ vertical: center, horizontal: space-between }) + 2- Title + 3- Row ({ vertical: center }) + 4- Icons + 5- Separator + 6- Row ({ vertical: center }) + 7- Name + 8- Avatar +``` + +![screenshot4](https://i.postimg.cc/zGkw4J1F/screenshot41.png) + +``` + + {title} + +
+ +
+
+ +
+
+ + Germán Llorente + avatar + + + +``` + +y estos estilos: + +```javascript +avatar: { + height: 35, + width: 35, + borderRadius: 50, + marginLeft: 14, + border: '1px solid #DFE0EB', +}, +container: { + height: 40 +}, +cursorPointer: { + cursor: 'pointer' +}, +name: { + fontFamily: 'Muli', + fontStyle: 'normal', + fontWeight: 600, + fontSize: 14, + lineHeight: '20px', + textAlign: 'right', + letterSpacing: 0.2 +}, +separator: { + borderLeft: '1px solid #DFE0EB', + marginLeft: 32, + marginRight: 32, + height: 32, + width: 2 +}, +title: { + fontFamily: 'Muli', + fontStyle: 'normal', + fontWeight: 'bold', + fontSize: 24, + lineHeight: '30px', + letterSpacing: 0.3 +} +``` +[Ver archivo completo: HeaderComponent.js](https://github.com/llorentegerman/react-admin-dashboard/blob/master/src/components/header/HeaderComponent.js) + +License +------- +This software is released under the [MIT License](https://github.com/llorentegerman/react-admin-dashboard/blob/master/LICENSE). + +Author +------- +![me](https://avatars3.githubusercontent.com/u/21162888?s=100&v=4) + +[Germán Llorente](https://github.com/llorentegerman) \ No newline at end of file diff --git a/README.md b/README.md index 9d9614c..27458ac 100644 --- a/README.md +++ b/README.md @@ -1,68 +1,321 @@ -This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). +# Building a UI from scratch, based on a design with ReactJS -## Available Scripts +In this article we will build a UI following a design. We will use `Figma` to visualize the design, but is also possible to use any other tool that allow you to extract the CSS code from the elements, such as `invisionapp`, `zeplin`, etc. -In the project directory, you can run: +*Read this in [Spanish](README.es.md)* -### `npm start` +**Live demo**: [https://llorentegerman.github.io/react-admin-dashboard/](https://llorentegerman.github.io/react-admin-dashboard/) -Runs the app in the development mode.
-Open [http://localhost:3000](http://localhost:3000) to view it in the browser. +**Repository**: [https://github.com/llorentegerman/react-admin-dashboard](https://github.com/llorentegerman/react-admin-dashboard) -The page will reload if you make edits.
-You will also see any lint errors in the console. +### Uploading a design to Figma +I will not enter in details about the tool, we only need a design. +1. Create an account in [https://www.figma.com](https://www.figma.com) (free). +2. I have selected a random *Figma file* from [https://www.figmafreebies.com](https://www.figmafreebies.com) (free). The selected file is: [Figma Admin Dashboard UI Kit](https://www.figmafreebies.com/download/figma-admin-dashboard-ui-kit/). +I'm using web version of Figma, so, you have to click `DOWNLOAD FREEBIES` button, and the design will be added to your account. +3. You can double click on each element and see the css code related to it in the `code` tab that is in the right column. -### `npm test` +![screenshot3](https://i.postimg.cc/76vy3ckT/screenshot3.png) -Launches the test runner in the interactive watch mode.
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. +### Creating the app +For this step we will use [Create React App](https://facebook.github.io/create-react-app/): +``` +npx create-react-app react-admin-dashboard +``` -### `npm run build` +We will use [aphrodite](https://www.npmjs.com/package/aphrodite) for the styles and [simple-flexbox](https://www.npmjs.com/package/simple-flexbox) to make the layout. -Builds the app for production to the `build` folder.
-It correctly bundles React in production mode and optimizes the build for the best performance. +`yarn add aphrodite simple-flexbox` or `npm install aphrodite simple-flexbox` -The build is minified and the filenames include the hashes.
-Your app is ready to be deployed! +### Folder structure: +For this case we can keep a simple structure: +``` +/src + /assets + /components + App.js +``` -See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. +## Let's do it +We are ready to start, first we need to identify the main blocks of the design. I have decided to split it into 4 main blocks as follows: +``` +1- Sidebar +2- Main Block + 3- Header + 4- Content +``` -### `npm run eject` +As you can see in the image, blocks 3 and 4 are inside block 2. -**Note: this is a one-way operation. Once you `eject`, you can’t go back!** +![Screenshot1](https://i.postimg.cc/bNxzNq1S/screenshot1.png) -If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. +### Sidebar +We can split the Sidebar in 2 parts, `Logo` block, and `MenuItem` list. +We need 3 components for this: +``` +1- SidebarComponent + 2- LogoComponent + 3- MenuItemComponent (list) +``` -Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own. + -You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it. +**We will start defining the Logo and Menu Items** -## Learn More +#### LogoComponent.js +First we need to download the Logo (double click on the logo, go to the `Design` tab and click on export button bellow). I downloaded it in `svg` format and imported it as a React Component, you can see it and copy it doing [click here](https://github.com/llorentegerman/react-admin-dashboard/blob/master/src/assets/icon-logo.js). -You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). +`LogoComponent.js` is a `Row` centered vertically and horizontally, with the `Logo` and the `title`. -To learn React, check out the [React documentation](https://reactjs.org/). +``` + + + Dashboard Kit + +``` -### Code Splitting +For styles, we need to import `Muli` font family, the easy way is include this line in [App.css](https://github.com/llorentegerman/react-admin-dashboard/blob/master/src/App.css) (we can remove the rest of the content, we don't need it): -This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting +``` +@import url('https://fonts.googleapis.com/css?family=Muli'); +``` -### Analyzing the Bundle Size +These are the styles for `container` and `title` -This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size +```javascript +container: { + marginLeft: 32, + marginRight: 32 +}, +title: { + fontFamily: 'Muli', + fontStyle: 'normal', + fontWeight: 'bold', + fontSize: 19, + lineHeight: '24px', + letterSpacing: '0.4px', + color: '#A4A6B3', + opacity: 0.7, + marginLeft: 12 // <--- necessary to separate title and logo +} +``` -### Making a Progressive Web App +[View full file: LogoComponent.js](https://github.com/llorentegerman/react-admin-dashboard/blob/master/src/components/sidebar/LogoComponent.js) -This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app +#### MenuItemComponent.js +It represents an item of the menu, it's composed by an `icon`, a `title` and has different styles depending of its own state (`active`, `unactive`, `hover`). If it's active, has a white bar at the left. -### Advanced Configuration +``` + + {active &&
} + + {title} + +``` -This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration +As you can see, there are some special styles depending on `active` property, for example the `title` has a different color when `active` is `true`. For the icons, default fill is `#9FA2B4` and default opacity is `1`, these values change depending on the state of the above mentioned property. +A special element that appears when the item is `active`, is that white bar on the left (`activeBar`). -### Deployment +These are the styles: +```javascript +activeBar: { + height: 56, + width: 3, + backgroundColor: '#DDE2FF', + position: 'absolute', + left: 0 +}, +activeContainer: { + backgroundColor: 'rgba(221,226,255, 0.08)' +}, +activeTitle: { + color: '#DDE2FF' +}, +container: { + height: 56, + cursor: 'pointer', + ':hover': { + backgroundColor: 'rgba(221,226,255, 0.08)' + }, + paddingLeft: 32, + paddingRight: 32 +}, +title: { + fontFamily: 'Muli', + fontSize: 16, + lineHeight: '20px', + letterSpacing: '0.2px', + color: '#A4A6B3', + marginLeft: 24 +} +``` +[View full file: MenuItemComponent.js](https://github.com/llorentegerman/react-admin-dashboard/blob/master/src/components/sidebar/MenuItemComponent.js) -This section has moved here: https://facebook.github.io/create-react-app/docs/deployment +#### SidebarComponent.js +As we did with the Logo, we need to download the icons that we will use in this component, it's possible do it from the design or you can copy them from the folder `assets` of the repository doing [click here](https://github.com/llorentegerman/react-admin-dashboard/tree/master/src/assets). +``` +... +import IconOverview from '../../assets/icon-overview.js'; +... + + + + + + + + + +
+ + + + +``` -### `npm run build` fails to minify +Based on `css` extracted from the design, we can define the styles with these 3 classes: +```javascript +container: { + backgroundColor: '#363740', + width: 255, + paddingTop: 32 +}, +menuItemList: { + marginTop: 52 +}, +separator: { + borderTop: '1px solid #DFE0EB', + marginTop: 16, + marginBottom: 16, + opacity: 0.06 +} +``` +[View full file: SidebarComponent.js](https://github.com/llorentegerman/react-admin-dashboard/blob/master/src/components/sidebar/SidebarComponent.js) -This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify + +`SidebarComponent` is ready, in the repository I have added some `onClick` events and a `state` to do it interactive, so you can select the differents menu items. + +### MainComponent (App.js) +Now we only need to work in `App.js`, as we said, has the following structure: +``` +1- Sidebar +2- Main Block + 3- Header + 4- Content +``` + +It can be defined as follows: +``` + + + + +
+ Content +
+ + +``` + +Styles: + +```javascript +container: { + height: '100vh' // menu has to take all the height of the screen +}, +content: { + marginTop: 54 +}, +mainBlock: { + backgroundColor: '#F7F8FC', + padding: 30 +} +``` +[View full file: App.js](https://github.com/llorentegerman/react-admin-dashboard/blob/master/src/App.js) + +#### HeaderComponent.js +To finish, we will define the Header, with the following structure. +``` +1- Row ({ vertical: center, horizontal: space-between }) + 2- Title + 3- Row ({ vertical: center }) + 4- Icons + 5- Separator + 6- Row ({ vertical: center }) + 7- Name + 8- Avatar +``` + +![screenshot4](https://i.postimg.cc/zGkw4J1F/screenshot41.png) + +``` + + {title} + +
+ +
+
+ +
+
+ + Germán Llorente + avatar + + + +``` + +Header styles: + +```javascript +avatar: { + height: 35, + width: 35, + borderRadius: 50, + marginLeft: 14, + border: '1px solid #DFE0EB', +}, +container: { + height: 40 +}, +cursorPointer: { + cursor: 'pointer' +}, +name: { + fontFamily: 'Muli', + fontStyle: 'normal', + fontWeight: 600, + fontSize: 14, + lineHeight: '20px', + textAlign: 'right', + letterSpacing: 0.2 +}, +separator: { + borderLeft: '1px solid #DFE0EB', + marginLeft: 32, + marginRight: 32, + height: 32, + width: 2 +}, +title: { + fontFamily: 'Muli', + fontStyle: 'normal', + fontWeight: 'bold', + fontSize: 24, + lineHeight: '30px', + letterSpacing: 0.3 +} +``` +[View full file: HeaderComponent.js](https://github.com/llorentegerman/react-admin-dashboard/blob/master/src/components/header/HeaderComponent.js) + +License +------- +This software is released under the [MIT License](https://github.com/llorentegerman/react-admin-dashboard/blob/master/LICENSE). + +Author +------- +![me](https://avatars3.githubusercontent.com/u/21162888?s=100&v=4) + +[Germán Llorente](https://github.com/llorentegerman) \ No newline at end of file diff --git a/package.json b/package.json index 48d6b44..2b2974d 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,8 @@ { - "name": "admin-dashboard", + "name": "react-admin-dashboard", "version": "0.1.0", "private": true, + "homepage": "https://llorentegerman.github.io/react-admin-dashboard", "dependencies": { "aphrodite": "^2.3.1", "prop-types": "^15.7.2", @@ -14,7 +15,9 @@ "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", - "eject": "react-scripts eject" + "eject": "react-scripts eject", + "predeploy": "npm run build", + "deploy": "gh-pages -d build" }, "eslintConfig": { "extends": "react-app" @@ -30,5 +33,8 @@ "last 1 firefox version", "last 1 safari version" ] + }, + "devDependencies": { + "gh-pages": "^2.0.1" } } diff --git a/yarn.lock b/yarn.lock index 5497b0a..c23b3a6 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1824,7 +1824,7 @@ async@^1.5.2: resolved "https://registry.yarnpkg.com/async/-/async-1.5.2.tgz#ec6a61ae56480c0c3cb241c95618e20892f9672a" integrity sha1-7GphrlZIDAw8skHJVhjiCJL5Zyo= -async@^2.1.2: +async@^2.1.2, async@^2.6.1: version "2.6.3" resolved "https://registry.yarnpkg.com/async/-/async-2.6.3.tgz#d72625e2344a3656e3a3ad4fa749fa83299d82ff" integrity sha512-zflvls11DCy+dQWzTW2dzuilv8Z5X/pjfmZOWba6TNIVDm+2UDaJmXSOXlasHKfNBs8oo3M0aT50fDEWfKZjXg== @@ -2638,7 +2638,7 @@ commander@2.17.x: resolved "https://registry.yarnpkg.com/commander/-/commander-2.17.1.tgz#bd77ab7de6de94205ceacc72f1716d29f20a77bf" integrity sha512-wPMUt6FnH2yzG95SA6mzjQOEKUU3aLaDEmzs1ti+1E9h+CsrZghRlqEM/EJ4KscsQVG8uNN4uVreUeT8+drlgg== -commander@^2.11.0, commander@^2.19.0, commander@~2.20.0: +commander@^2.11.0, commander@^2.18.0, commander@^2.19.0, commander@~2.20.0: version "2.20.0" resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.0.tgz#d58bb2b5c1ee8f87b0d340027e9e94e222c5a422" integrity sha512-7j2y+40w61zy6YC2iRNpUe/NwhNyoXrYpHMrSunaMG64nRnaf96zO/KMQR4OyN/UnE5KLyEBnKHd4aG3rskjpQ== @@ -3481,6 +3481,11 @@ elliptic@^6.0.0: minimalistic-assert "^1.0.0" minimalistic-crypto-utils "^1.0.0" +email-addresses@^3.0.1: + version "3.0.3" + resolved "https://registry.yarnpkg.com/email-addresses/-/email-addresses-3.0.3.tgz#fc3c6952f68da24239914e982c8a7783bc2ed96d" + integrity sha512-kUlSC06PVvvjlMRpNIl3kR1NRXLEe86VQ7N0bQeaCZb2g+InShCeHQp/JvyYNTugMnRN2NvJhHlc3q12MWbbpg== + emoji-regex@^7.0.1, emoji-regex@^7.0.2: version "7.0.3" resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-7.0.3.tgz#933a04052860c85e83c122479c4748a8e4c72156" @@ -4046,6 +4051,28 @@ file-loader@3.0.1: loader-utils "^1.0.2" schema-utils "^1.0.0" +filename-reserved-regex@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/filename-reserved-regex/-/filename-reserved-regex-1.0.0.tgz#e61cf805f0de1c984567d0386dc5df50ee5af7e4" + integrity sha1-5hz4BfDeHJhFZ9A4bcXfUO5a9+Q= + +filenamify-url@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/filenamify-url/-/filenamify-url-1.0.0.tgz#b32bd81319ef5863b73078bed50f46a4f7975f50" + integrity sha1-syvYExnvWGO3MHi+1Q9GpPeXX1A= + dependencies: + filenamify "^1.0.0" + humanize-url "^1.0.0" + +filenamify@^1.0.0: + version "1.2.1" + resolved "https://registry.yarnpkg.com/filenamify/-/filenamify-1.2.1.tgz#a9f2ffd11c503bed300015029272378f1f1365a5" + integrity sha1-qfL/0RxQO+0wABUCknI3jx8TZaU= + dependencies: + filename-reserved-regex "^1.0.0" + strip-outer "^1.0.0" + trim-repeated "^1.0.0" + filesize@3.6.1: version "3.6.1" resolved "https://registry.yarnpkg.com/filesize/-/filesize-3.6.1.tgz#090bb3ee01b6f801a8a8be99d31710b3422bb317" @@ -4331,6 +4358,20 @@ getpass@^0.1.1: dependencies: assert-plus "^1.0.0" +gh-pages@^2.0.1: + version "2.0.1" + resolved "https://registry.yarnpkg.com/gh-pages/-/gh-pages-2.0.1.tgz#aefe47a43b8d9d2aa3130576b33fe95641e29a2f" + integrity sha512-uFlk3bukljeiWKQ2XvPfjcSi/ou7IfoDf2p+Fj672saLAr8bnOdFVqI/JSgrSgInKpCg5BksxEwGUl++dbg8Dg== + dependencies: + async "^2.6.1" + commander "^2.18.0" + email-addresses "^3.0.1" + filenamify-url "^1.0.0" + fs-extra "^7.0.0" + globby "^6.1.0" + graceful-fs "^4.1.11" + rimraf "^2.6.2" + glob-parent@^3.1.0: version "3.1.0" resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-3.1.0.tgz#9e6af6299d8d3bd2bd40430832bd113df906c5ae" @@ -4711,6 +4752,14 @@ https-browserify@^1.0.0: resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-1.0.0.tgz#ec06c10e0a34c0f2faf199f7fd7fc78fffd03c73" integrity sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM= +humanize-url@^1.0.0: + version "1.0.1" + resolved "https://registry.yarnpkg.com/humanize-url/-/humanize-url-1.0.1.tgz#f4ab99e0d288174ca4e1e50407c55fbae464efff" + integrity sha1-9KuZ4NKIF0yk4eUEB8VfuuRk7/8= + dependencies: + normalize-url "^1.0.0" + strip-url-auth "^1.0.0" + hyphenate-style-name@^1.0.2: version "1.0.3" resolved "https://registry.yarnpkg.com/hyphenate-style-name/-/hyphenate-style-name-1.0.3.tgz#097bb7fa0b8f1a9cf0bd5c734cf95899981a9b48" @@ -5138,7 +5187,7 @@ is-path-inside@^1.0.0: dependencies: path-is-inside "^1.0.1" -is-plain-obj@^1.1.0: +is-plain-obj@^1.0.0, is-plain-obj@^1.1.0: version "1.1.0" resolved "https://registry.yarnpkg.com/is-plain-obj/-/is-plain-obj-1.1.0.tgz#71a50c8429dfca773c92a390a4a03b39fcd51d3e" integrity sha1-caUMhCnfync8kqOQpKA7OfzVHT4= @@ -6610,6 +6659,16 @@ normalize-range@^0.1.2: resolved "https://registry.yarnpkg.com/normalize-range/-/normalize-range-0.1.2.tgz#2d10c06bdfd312ea9777695a4d28439456b75942" integrity sha1-LRDAa9/TEuqXd2laTShDlFa3WUI= +normalize-url@^1.0.0: + version "1.9.1" + resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-1.9.1.tgz#2cc0d66b31ea23036458436e3620d85954c66c3c" + integrity sha1-LMDWazHqIwNkWENuNiDYWVTGbDw= + dependencies: + object-assign "^4.0.1" + prepend-http "^1.0.0" + query-string "^4.1.0" + sort-keys "^1.0.0" + normalize-url@^3.0.0: version "3.3.0" resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-3.3.0.tgz#b2e1c4dc4f7c6d57743df733a4f5978d18650559" @@ -7837,6 +7896,11 @@ prelude-ls@~1.1.2: resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54" integrity sha1-IZMqVJ9eUv/ZqCf1cOBL5iqX2lQ= +prepend-http@^1.0.0: + version "1.0.4" + resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-1.0.4.tgz#d4f4562b0ce3696e41ac52d0e002e57a635dc6dc" + integrity sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw= + pretty-bytes@^5.1.0: version "5.2.0" resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-5.2.0.tgz#96c92c6e95a0b35059253fb33c03e260d40f5a1f" @@ -8003,6 +8067,14 @@ qs@6.5.2, qs@~6.5.2: resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.2.tgz#cb3ae806e8740444584ef154ce8ee98d403f3e36" integrity sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA== +query-string@^4.1.0: + version "4.3.4" + resolved "https://registry.yarnpkg.com/query-string/-/query-string-4.3.4.tgz#bbb693b9ca915c232515b228b1a02b609043dbeb" + integrity sha1-u7aTucqRXCMlFbIosaArYJBD2+s= + dependencies: + object-assign "^4.1.0" + strict-uri-encode "^1.0.0" + querystring-es3@^0.2.0: version "0.2.1" resolved "https://registry.yarnpkg.com/querystring-es3/-/querystring-es3-0.2.1.tgz#9ec61f79049875707d69414596fd907a4d711e73" @@ -8935,6 +9007,13 @@ sockjs@0.3.19: faye-websocket "^0.10.0" uuid "^3.0.1" +sort-keys@^1.0.0: + version "1.1.2" + resolved "https://registry.yarnpkg.com/sort-keys/-/sort-keys-1.1.2.tgz#441b6d4d346798f1b4e49e8920adfba0e543f9ad" + integrity sha1-RBttTTRnmPG05J6JIK37oOVD+a0= + dependencies: + is-plain-obj "^1.0.0" + source-list-map@^2.0.0: version "2.0.1" resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-2.0.1.tgz#3993bd873bfc48479cca9ea3a547835c7c154b34" @@ -9127,6 +9206,11 @@ stream-shift@^1.0.0: resolved "https://registry.yarnpkg.com/stream-shift/-/stream-shift-1.0.0.tgz#d5c752825e5367e786f78e18e445ea223a155952" integrity sha1-1cdSgl5TZ+eG944Y5EXqIjoVWVI= +strict-uri-encode@^1.0.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz#279b225df1d582b1f54e65addd4352e18faa0713" + integrity sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM= + string-hash@^1.1.3: version "1.1.3" resolved "https://registry.yarnpkg.com/string-hash/-/string-hash-1.1.3.tgz#e8aafc0ac1855b4666929ed7dd1275df5d6c811b" @@ -9240,6 +9324,18 @@ strip-json-comments@^2.0.1, strip-json-comments@~2.0.1: resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a" integrity sha1-PFMZQukIwml8DsNEhYwobHygpgo= +strip-outer@^1.0.0: + version "1.0.1" + resolved "https://registry.yarnpkg.com/strip-outer/-/strip-outer-1.0.1.tgz#b2fd2abf6604b9d1e6013057195df836b8a9d631" + integrity sha512-k55yxKHwaXnpYGsOzg4Vl8+tDrWylxDEpknGjhTiZB8dFRU5rTo9CAzeycivxV3s+zlTKwrs6WxMxR95n26kwg== + dependencies: + escape-string-regexp "^1.0.2" + +strip-url-auth@^1.0.0: + version "1.0.1" + resolved "https://registry.yarnpkg.com/strip-url-auth/-/strip-url-auth-1.0.1.tgz#22b0fa3a41385b33be3f331551bbb837fa0cd7ae" + integrity sha1-IrD6OkE4WzO+PzMVUbu4N/oM164= + style-loader@0.23.1: version "0.23.1" resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-0.23.1.tgz#cb9154606f3e771ab6c4ab637026a1049174d925" @@ -9484,6 +9580,13 @@ tr46@^1.0.1: dependencies: punycode "^2.1.0" +trim-repeated@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/trim-repeated/-/trim-repeated-1.0.0.tgz#e3646a2ea4e891312bf7eace6cfb05380bc01c21" + integrity sha1-42RqLqTokTEr9+rObPsFOAvAHCE= + dependencies: + escape-string-regexp "^1.0.2" + trim-right@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/trim-right/-/trim-right-1.0.1.tgz#cb2e1203067e0c8de1f614094b9fe45704ea6003"