Inicio Explorar Ayuda
Iniciar sesión
tati
/
kitchn
1
0
Fork 0
Archivos Incidencias 0 Pull Requests 0 Wiki
Explorar el Código

Added sass, some styles and some variables

Tati hace 7 años
padre
daaf42a2d0
commit
fd1ad699c0
Se han modificado 19 ficheros con 218 adiciones y 66 borrados
Dividir vista Mostrar estadísticas de diff
  1. 5 2
      recipes/.storybook/config.js
  2. 6 0
      recipes/package.json
  3. 6 1
      recipes/public/index.html
  4. 0 33
      recipes/src/App.css
  5. 14 14
      recipes/src/App.tsx
  6. 40 0
      recipes/src/components/Navbar/index.tsx
  7. 19 0
      recipes/src/components/Navbar/navbar.stories.js
  8. 46 0
      recipes/src/components/Navbar/styles.scss
  9. 0 0
      recipes/src/components/button.stories.js
  10. 0 14
      recipes/src/index.css
  11. 1 1
      recipes/src/index.js
  12. 14 0
      recipes/src/styles/_colors.scss
  13. 17 0
      recipes/src/styles/_fonts.scss
  14. 4 0
      recipes/src/styles/_index.scss
  15. 5 0
      recipes/src/styles/_spacing.scss
  16. 1 0
      recipes/src/styles/_ui.scss
  17. 30 0
      recipes/src/styles/app.scss
  18. 2 1
      recipes/tsconfig.json
  19. 8 0
      recipes/types/@storybook/react.d.ts

+ 5 - 2
recipes/.storybook/config.js
Ver fichero 

@@ -1,7 +1,10 @@
 
 import { configure } from '@storybook/react';
 
+import '../src/index.css';
 
+
 
+const req = require.context('../src/components', true, /\.stories\.js$/);
 
 
 function loadStories() {
 
-  require('../src/stories');
 
+  req.keys().forEach(filename => req(filename));
 
 }
 
 
-configure(loadStories, module);
 
+configure(loadStories, module);

+ 6 - 0
recipes/package.json
Ver fichero 

@@ -4,11 +4,17 @@
 
   "private": true,
 
   "dependencies": {
 
     "@types/jest": "^24.0.11",
 
+    "@types/muicss": "^0.9.1",
 
     "@types/node": "^11.13.0",
 
     "@types/react": "^16.8.12",
 
     "@types/react-dom": "^16.8.3",
 
     "@types/react-router-dom": "^4.3.1",
 
+    "@types/storybook__addon-actions": "^3.4.2",
 
+    "@types/storybook__addon-links": "^3.3.4",
 
+    "@types/storybook__react": "^4.0.1",
 
     "axios": "^0.18.0",
 
+    "muicss": "^0.9.41",
 
+    "node-sass": "^4.11.0",
 
     "react": "^16.8.4",
 
     "react-dom": "^16.8.4",
 
     "react-router-dom": "^5.0.0",

+ 6 - 1
recipes/public/index.html
Ver fichero 

@@ -22,7 +22,12 @@
 
       work correctly both with client-side routing and a non-root public URL.
 
       Learn how to configure a non-root public URL by running `npm run build`.
 
     -->
 
-    <title>React App</title>
 
+    <title>Recipes</title>
 
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
 
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lekton">
 
+    <link href="//cdn.muicss.com/mui-0.9.41/css/mui.min.css" rel="stylesheet" type="text/css" />
 
+    <script src="//cdn.muicss.com/mui-0.9.41/js/mui.min.js"></script>
 
+
 
   </head>
 
   <body>
 
     <noscript>You need to enable JavaScript to run this app.</noscript>

+ 0 - 33
recipes/src/App.css
Ver fichero 

@@ -1,33 +0,0 @@
 
-.App {
 
-  text-align: center;
 
-}
 
-
 
-.App-logo {
 
-  animation: App-logo-spin infinite 20s linear;
 
-  height: 40vmin;
 
-  pointer-events: none;
 
-}
 
-
 
-.App-header {
 
-  background-color: #282c34;
 
-  min-height: 100vh;
 
-  display: flex;
 
-  flex-direction: column;
 
-  align-items: center;
 
-  justify-content: center;
 
-  font-size: calc(10px + 2vmin);
 
-  color: white;
 
-}
 
-
 
-.App-link {
 
-  color: #61dafb;
 
-}
 
-
 
-@keyframes App-logo-spin {
 
-  from {
 
-    transform: rotate(0deg);
 
-  }
 
-  to {
 
-    transform: rotate(360deg);
 
-  }
 
-}

+ 14 - 14
recipes/src/App.tsx
Ver fichero 

@@ -1,7 +1,7 @@
 
 import { BrowserRouter as Router, Route, Link } from "react-router-dom";
 
 import React, { Component, Props } from 'react';
 
 import axios from 'axios';
 
-import './App.css';
 
+import Navbar from './components/Navbar';
 
 
 function Index() {
 
   return <h2>Home</h2>;
 
@@ -45,23 +45,23 @@ class Recipes extends Component {
 
 }
 
 
 class App extends Component {
 
+  navbarItems: { title: string, path: string }[]
 
+
 
+  constructor(props: any) {
 
+    super(props);
 
+    this.navbarItems = [
 
+      { title: 'home', path: '/' },
 
+      { title: 'recipes', path: '/recipes' },
 
+      { title: 'planner', path: '/planner' },
 
+      { title: 'shoplist', path: '/shoplist' },
 
+    ];
 
+  }
 
+
 
   render() {
 
     return (
 
       <Router>
 
         <div>
 
-          <nav>
 
-            <ul>
 
-              <li>
 
-                <Link to="/">Home</Link>
 
-              </li>
 
-              <li>
 
-                <Link to="/recipes/">Recipes</Link>
 
-              </li>
 
-              <li>
 
-                <Link to="/users/">Users</Link>
 
-              </li>
 
-            </ul>
 
-          </nav>
 
+          <Navbar items={this.navbarItems}></Navbar>
 
 
           <Route path="/" exact component={Index} />
 
           <Route path="/recipes/" component={Recipes} />

+ 40 - 0
recipes/src/components/Navbar/index.tsx
Ver fichero 

@@ -0,0 +1,40 @@
 
+import React from 'react';
 
+import { BrowserRouter as Router, Route, Link } from "react-router-dom";
 
+
 
+import './styles.scss';
 
+
 
+type Props = {
 
+  items: {
 
+    title: string,
 
+    path: string,
 
+  }[]
 
+}
 
+
 
+function Navbar(props: Props) {
 
+  return (
 
+    <nav
 
+      className='Navbar'
 
+    >
 
+      <ul className='Navbar__items'>
 
+        <li
 
+          key='brand'
 
+          className='Navbar__brand'
 
+        >
 
+          <h1>Cookbook</h1>
 
+        </li>
 
+        {
 
+          props.items.map((item: any) => (
 
+            <li 
+              key={item.title}
 
+              className='Navbar__items__links'
 
+            >
 
+              <Link to={item.path}>{item.title}</Link>
 
+            </li>
 
+          ))
 
+        }
 
+      </ul>
 
+    </nav>
 
+  );
 
+}
 
+
 
+export default Navbar;

+ 19 - 0
recipes/src/components/Navbar/navbar.stories.js
Ver fichero 

@@ -0,0 +1,19 @@
 
+import React from 'react';
 
+import { BrowserRouter as Router } from 'react-router-dom';
 
+import { storiesOf } from '@storybook/react';
 
+
 
+import Navbar from './index';
 
+
 
+const navbarItems = [
 
+  { title: 'home', path: '/' },
 
+  { title: 'recipes', path: '/recipes' },
 
+  { title: 'planner', path: '/planner' },
 
+  { title: 'shoplist', path: '/shoplist' },
 
+];
 
+
 
+storiesOf('Navbar', module)
 
+  .add('default', () => (
 
+    <Router>
 
+      <Navbar items={navbarItems}></Navbar>
 
+    </Router>
 
+  ))

+ 46 - 0
recipes/src/components/Navbar/styles.scss
Ver fichero 

@@ -0,0 +1,46 @@
 
+@import './../../styles/_index.scss';
 
+
 
+.Navbar {
 
+  width: 264px;
 
+  background-color: #BDBDBD;
 
+  position: fixed;
 
+  top: 0;
 
+  bottom: 0;
 
+  height: 100%;
 
+  padding-top: $spacing-xx-large;
 
+  text-align: center;
 
+  box-shadow: $box-shadow;
 
+  &__brand {
 
+    color: white;
 
+    padding-bottom: $spacing-large;
 
+  }
 
+}
 
+
 
+.Navbar__items__links {
 
+  text-transform: uppercase;
 
+  padding: $spacing-small 0;
 
+  font-family: $font-family-display;
 
+  font-weight: $font-weight-bold;
 
+  font-size: $font-size-x-large;
 
+  line-height: 40px;
 
+  
+  a {
 
+    color: $white;
 
+  }
 
+
 
+  a:hover {
 
+    text-decoration: none;
 
+  
+  }
 
+
 
+  a:hover::after {
 
+    content: "";
 
+    display: block;
 
+    margin: 0 auto;
 
+    width: 56px;
 
+    opacity: 50%;
 
+    margin-top: -20px;
 
+    border-bottom: 10px solid;
 
+    border-bottom-color: $grey-500;
 
+  }
 
+}

recipes/src/stories/index.js → recipes/src/components/button.stories.js
Ver fichero


+ 0 - 14
recipes/src/index.css
Ver fichero 

@@ -1,14 +0,0 @@
 
-body {
 
-  margin: 0;
 
-  padding: 0;
 
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
 
-    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
 
-    sans-serif;
 
-  -webkit-font-smoothing: antialiased;
 
-  -moz-osx-font-smoothing: grayscale;
 
-}
 
-
 
-code {
 
-  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
 
-    monospace;
 
-}

+ 1 - 1
recipes/src/index.js
Ver fichero 

@@ -1,6 +1,6 @@
 
 import React from 'react';
 
 import ReactDOM from 'react-dom';
 
-import './index.css';
 
+import './styles/app.scss';
 
 import App from './App';
 
 import * as serviceWorker from './serviceWorker';

+ 14 - 0
recipes/src/styles/_colors.scss
Ver fichero 

@@ -0,0 +1,14 @@
 
+$primary-color: #9E9E9E;
 
+
 
+$white: #FFFFFF;
 
+$black: #000000;
 
+
 
+$grey-100: #FAFAFA;
 
+$grey-200: #EEEEEE;
 
+$grey-300: #E0E0E0;
 
+$grey-400: #BDBDBD;
 
+$grey-500: #9E9E9E;
 
+$grey-600: #757575;
 
+$grey-700: #616161;
 
+$grey-800: #424242;
 
+$grey-900: #212121;

+ 17 - 0
recipes/src/styles/_fonts.scss
Ver fichero 

@@ -0,0 +1,17 @@
 
+$font-family-text: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
 
+"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
 
+sans-serif;
 
+$font-family-display: 'Lekton', sans-serif;
 
+
 
+$font-weight-light: 300;
 
+$font-weight-regular: 400;
 
+$font-weight-bold: 600;
 
+
 
+$font-size-x-small: 10px;
 
+$font-size-small: 12px;
 
+$font-size-regular: 14px;
 
+$font-size-large: 16px;
 
+$font-size-x-large: 20px;
 
+$font-size-xx-large: 24px;
 
+$font-size-xxx-large: 32px;
 
+$font-size-xxxx-large: 34px;

+ 4 - 0
recipes/src/styles/_index.scss
Ver fichero 

@@ -0,0 +1,4 @@
 
+@import './_colors.scss';
 
+@import './_fonts.scss';
 
+@import './ui.scss';
 
+@import './spacing.scss';

+ 5 - 0
recipes/src/styles/_spacing.scss
Ver fichero 

@@ -0,0 +1,5 @@
 
+$spacing-small: 16px;
 
+$spacing-regular: 22px;
 
+$spacing-large: 48px;
 
+$spacing-x-large: 62px;
 
+$spacing-xx-large: 92px;

+ 1 - 0
recipes/src/styles/_ui.scss
Ver fichero 

@@ -0,0 +1 @@
 
+$box-shadow: 0 2px 2px 0 rgba(0,0,0,.16), 0 0 2px 0 rgba(0,0,0,.12);

+ 30 - 0
recipes/src/styles/app.scss
Ver fichero 

@@ -0,0 +1,30 @@
 
+@import './_index.scss';
 
+
 
+body {
 
+  margin: 0;
 
+  padding: 0;
 
+  font-family: $font-family-text;
 
+  font-size: $font-size-regular;
 
+  color: $grey-900;
 
+  -webkit-font-smoothing: antialiased;
 
+  -moz-osx-font-smoothing: grayscale;
 
+}
 
+
 
+ul {
 
+  list-style-type: none;
 
+  margin: 0;
 
+  padding: 0;
 
+
 
+}
 
+
 
+h1 {
 
+  font-family: $font-family-display;
 
+  text-transform: uppercase;
 
+  font-weight: $font-weight-bold;
 
+  font-size: $font-size-xx-large;
 
+}
 
+
 
+code {
 
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
 
+    monospace;
 
+}

+ 2 - 1
recipes/tsconfig.json
Ver fichero 

@@ -20,6 +20,7 @@
 
     "jsx": "preserve"
 
   },
 
   "include": [
 
-    "src"
 
+    "src",
 
+    ".storybook/button.stories.js"
 
   ]
 
 }

+ 8 - 0
recipes/types/@storybook/react.d.ts
Ver fichero 

@@ -0,0 +1,8 @@
 
+export const addDecorator: any;
 
+export const addParameters: any;
 
+export const configure: any;
 
+export const forceReRender: any;
 
+export const getStorybook: any;
 
+export const raw: any;
 
+export const setAddon: any;
 
+export const storiesOf: any;