imbric-theme 0.3.1 → 0.3.4

package/pages/Login/Login.js

@@ -0,0 +1,102 @@
+import React, { useState } from 'react'
+import PropTypes from 'prop-types'
+
+import styles from './Login.module.css'
+import { options } from './constants'
+import withStyles from '../../hocs/withStyles'
+import Picture from '../../atoms/Picture'
+import Divider from '../../atoms/Divider'
+import Button from '../../atoms/Button'
+import Input from '../../atoms/Input'
+import Label from '../../atoms/Label'
+import Spacer from '../../layout/Spacer'
+import CenteredContent from '../../layout/CenteredContent'
+import { loginSchema } from './validation/loginSchema'
+
+
+export const Login = ({ children, getStyles }) => {
+
+
+
+  // const [formValues, setFormValues] = useState({})
+
+  // const onChange = (key) => (event) => {
+  //   const { value } = event.target
+  //   setFormValues({ ...formValues, [key]: value })
+  // }
+
+
+
+  return (
+
+    <div className={getStyles('login')}>
+
+      <CenteredContent >
+
+        <Picture
+          src="./static/logologin.svg"
+          width={170}
+        />
+
+        <Spacer.Vertical size="md" />
+        <Divider color="highlight" />
+        <Spacer.Vertical size="md" />
+
+        <form id='loginform' onSubmit={handleSubmit}>
+
+          <Label >Email</Label>
+
+          <Input
+            id='email'
+            // value={formValues.email}
+            type="text"
+            name='email'
+            // onChange={formik.handleChange}
+            placeholder="Introduce tu email"
+          />
+
+          {/* <Label color="muted" isHint> {formik.errors.email}</Label> */}
+
+          <Spacer.Vertical size="md" />
+
+          <Label >Contraseña</Label>
+
+          <Input
+            id='password'
+            // value={formValues.password}
+            type="password"
+            name='password'
+            // onChange={formik.handleChange}
+            placeholder="Introduce tu contraseña"
+          />
+
+          {/* <Label color="muted" isHint> {formik.errors.password}</Label> */}
+
+          <Spacer.Vertical size="md" />
+
+          {/* <Button type='primary' isMuted={!(formik.isValid && formik.dirty)}> Acceder </Button> */}
+
+        </form>
+
+        {children}
+
+      </CenteredContent>
+
+    </div>
+  )
+
+
+
+}
+
+Login.propTypes = {
+  children: PropTypes.node,
+  getStyles: PropTypes.func.isRequired,
+  // type: PropTypes.oneOf(options.types),
+}
+
+Login.defaultProps = {
+  getStyles: () => { },
+}
+
+export default withStyles(styles)(Login)

package/pages/Login/Login.module.css

@@ -0,0 +1,5 @@
+.login {
+  display: flex;
+  max-width: 400px;
+  min-width: 300px;
+}

package/pages/Login/Login.stories.js

@@ -0,0 +1,23 @@
+import { Login, styles, options } from '.'
+
+import {
+  getTemplate,
+  getListTemplate,
+  getOptionsArgTypes,
+} from '../../helpers/storybook'
+
+const Template = getTemplate(Login, styles)
+const ListTemplate = getListTemplate(Login, styles)
+
+export default {
+  title: 'Pages/Login',
+  component: Login,
+  args: {},
+  argTypes: {
+    // types: getOptionsArgTypes(options.types),
+  },
+}
+
+export const Default = Template.bind({})
+// export const List = ListTemplate.bind({})
+// List.args = { items: options.types.map((type) => ({ type })) }

package/pages/Login/constants.js

@@ -0,0 +1 @@
+export const options = { types: [] }

package/pages/Login/index.js

@@ -0,0 +1,3 @@
+export { default, Login } from './Login'
+export { options } from './constants'
+export { default as styles } from './Login.module.css'

package/pages/Login/validation/loginSchema.js

@@ -0,0 +1,5 @@
+import * as Yup from 'yup'
+export const loginSchema = Yup.object().shape({
+  email: Yup.string().email().required('Required'),
+  password: Yup.string().required('Required').min(3, 'Too Short!'),
+})

package/public/static/logologin.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="170px" height="42px" viewBox="0 0 170 42" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>logotipo</title>
+    <defs>
+        <linearGradient x1="0%" y1="50.0030427%" x2="100%" y2="50.0030427%" id="linearGradient-1">
+            <stop stop-color="#ED495E" offset="0%"></stop>
+            <stop stop-color="#39B54A" offset="52.6050465%"></stop>
+            <stop stop-color="#00A3FF" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="fullcolor_positivo" transform="translate(-70.000000, -46.000000)" fill="url(#linearGradient-1)">
+            <path d="M175.713077,67.7540277 L175.713077,87.0631181 L182.139472,87.0631181 L182.139472,67.7540277 C182.139472,64.9417213 184.426502,62.6529572 187.239242,62.6529572 L206.049494,62.6529572 L206.049494,56.725834 L186.73997,56.725834 C180.650323,56.725834 175.713077,61.6630808 175.713077,67.7540277 L175.713077,67.7540277 Z M199.623532,87.0631181 L206.049494,87.0631181 L206.049494,65.4973349 L199.623532,65.4973349 L199.623532,87.0631181 Z M224.479224,62.6529572 L240,62.6529572 L240,56.725834 L223.979952,56.725834 C217.889872,56.725834 212.952191,61.6630808 212.952191,67.7540277 L212.952191,76.0349244 C212.952191,82.1258712 217.889872,87.0631181 223.979952,87.0631181 L240,87.0631181 L240,81.1355615 L224.479224,81.1355615 C221.666051,81.1355615 219.378587,78.8472308 219.378587,76.0349244 L219.378587,67.7540277 C219.378587,64.9417213 221.666051,62.6529572 224.479224,62.6529572 L224.479224,62.6529572 Z M158.104632,56.725834 L147.764238,56.725834 C144.951498,56.725834 142.663167,54.4379367 142.663167,51.6260637 L142.663167,46.5718 L136.237639,46.5718 L136.237639,51.6260637 C136.237639,57.7157104 141.175319,62.6529572 147.264966,62.6529572 L157.606227,62.6529572 C160.418966,62.6529572 162.705997,64.9417213 162.705997,67.7540277 L162.705997,76.0349244 C162.705997,78.8472308 160.418966,81.1355615 157.606227,81.1355615 L146.015052,81.1355615 L146.015052,87.0631181 L158.104632,87.0631181 C164.195579,87.0631181 169.132392,82.1258712 169.132392,76.0349244 L169.132392,67.7540277 C169.132392,61.6630808 164.195579,56.725834 158.104632,56.725834 L158.104632,56.725834 Z M199.623532,53.8823231 L206.049494,53.8823231 L206.049494,46.5718 L199.623532,46.5718 L199.623532,53.8823231 Z M84.2140874,87.0631181 L90.639616,87.0631181 L90.639616,65.4973349 L84.2140874,65.4973349 L84.2140874,87.0631181 Z M136.237639,60.0278779 L136.237639,87.0631181 L142.663167,87.0631181 L142.663167,64.7107213 C140.090962,63.8018899 137.86374,62.1575856 136.237639,60.0278779 L136.237639,60.0278779 Z M70,53.8823231 L76.4263953,53.8823231 L76.4263953,46.5718 L70,46.5718 L70,53.8823231 Z M70,87.0631181 L76.4263953,87.0631181 L76.4263953,56.725834 L70,56.725834 L70,87.0631181 Z M98.7714244,56.725834 L84.2140874,56.725834 L84.2140874,62.6529572 L98.2725857,62.6529572 C101.084459,62.6529572 103.371923,64.9417213 103.371923,67.7540277 L103.371923,87.0631181 L109.798318,87.0631181 L109.798318,67.7540277 C109.798318,61.6630808 104.861504,56.725834 98.7714244,56.725834 L98.7714244,56.725834 Z M117.930126,56.725834 L107.173672,56.725834 C109.163393,58.2457537 110.730119,60.291816 111.667555,62.6529572 L117.430854,62.6529572 C120.244027,62.6529572 122.531925,64.9417213 122.531925,67.7540277 L122.531925,87.0631181 L128.957453,87.0631181 L128.957453,67.7540277 C128.957453,61.6630808 124.02064,56.725834 117.930126,56.725834 L117.930126,56.725834 Z" id="logotipo"></path>
+        </g>
+    </g>
+</svg>

package/scripts/create-component.js

@@ -10,6 +10,7 @@ const ATOMIC_DESIGN_TYPES = {
   atom: 'atoms',
   molecule: 'molecules',
   layout: 'layout',
+  pages: 'pages',
 }
 const COMPONENT_TEMPLATE_PATH = 'templates/component'
 
@@ -88,7 +89,7 @@ async function getPromptParams() {
     type: 'select',
     name: 'type',
     message: 'What kind of component would you like to create?',
-    choices: ['atom', 'molecule', 'layout'],
+    choices: ['atom', 'molecule', 'layout', 'pages'],
     initial: 'atom',
   })