initial setup

add theme
add Aux
add Flex
add Card

.babelrc

@@ -0,0 +1,24 @@
+{
+  "env": {
+    "es": {
+      "presets": [
+        ["treebo", {
+          "targets": {},
+          "loose": false,
+          "modules": false,
+          "useBuiltIns": false
+        }]
+      ]
+    },
+    "commonjs": {
+      "presets": [
+        ["treebo", {
+          "targets": {},
+          "loose": false,
+          "modules": "commonjs",
+          "useBuiltIns": false
+        }]
+      ]
+    }
+  }
+}

.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true

.eslintrc

@@ -0,0 +1,6 @@
+{
+  "extends": "treebo",
+  "rules": {
+    "import/no-extraneous-dependencies": ["off"]
+  }
+}

.gitignore

@@ -0,0 +1,10 @@
+.idea
+.vscode
+es
+lib
+build
+coverage
+node_modules
+npm-debug.log*
+lerna-debug.log*
+storybook-static

.storybook/config.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { ThemeProvider } from 'styled-components';
+import { configure, addDecorator } from '@storybook/react';
+import theme from '../src/theme';
+
+addDecorator(story => (
+  <ThemeProvider theme={theme}>
+    {story()}
+  </ThemeProvider>
+));
+
+function loadStories() {
+  const req = require.context('../src', true, /\.story\.js$/);
+  req.keys().forEach(filename => req(filename));
+}
+
+configure(loadStories, module);

.stylelintignore

@@ -0,0 +1,10 @@
+.idea
+.vscode
+es
+lib
+build
+coverage
+node_modules
+npm-debug.log*
+lerna-debug.log*
+storybook-static

.stylelintrc

@@ -0,0 +1,5 @@
+{
+  "extends": [
+    "stylelint-config-standard",
+  ],
+}

package.json

@@ -0,0 +1,63 @@
+{
+  "name": "leaf-ui",
+  "version": "0.0.1",
+  "description": "🍃 Leaf-UI: A component library built using styled-components",
+  "main": "lib/index.js",
+  "module": "es/index.js",
+  "scripts": {
+    "start": "npm run storybook",
+    "storybook": "BABEL_ENV=es start-storybook -p 9000",
+    "storybook:build": "BABEL_ENV=commonjs build-storybook",
+    "prepublish": "run-p lint test build",
+    "build": "run-p build:es build:commonjs",
+    "build:es": "rimraf es && BABEL_ENV=es babel src -d es --ignore *.test.js --ignore *.story.js",
+    "build:commonjs": "rimraf lib && BABEL_ENV=commonjs babel src -d lib --ignore *.test.js --ignore *.story.js",
+    "lint": "run-p lint:*",
+    "lint:eslint": "eslint --ignore-path .gitignore .",
+    "lint:stylelint": "stylelint ./packages/**/*.css",
+    "test": "BABEL_ENV=es NODE_ENV=test jest"
+  },
+  "pre-commit": "lint, test",
+  "files": [
+    "lib/**/*",
+    "es/**/*"
+  ],
+  "dependencies": {
+    "prop-types": "15.6.0"
+  },
+  "devDependencies": {
+    "@storybook/react": "3.2.15",
+    "babel-cli": "6.26.0",
+    "babel-eslint": "8.0.2",
+    "babel-jest": "21.2.0",
+    "babel-preset-treebo": "github:treebohotels/babel-preset-treebo",
+    "eslint": "4.10.0",
+    "eslint-config-treebo": "github:treebohotels/eslint-config-treebo",
+    "jest": "21.2.1",
+    "npm-run-all": "4.1.2",
+    "react": "16.0.0",
+    "react-dom": "16.0.0",
+    "rimraf": "2.6.2",
+    "styled-components": "2.2.3",
+    "stylelint": "8.2.0",
+    "stylelint-config-standard": "17.0.0"
+  },
+  "peerDependencies": {
+    "react": "^15.3.0 || ^16.0.0",
+    "react-dom": "^15.3.0 || ^16.0.0",
+    "styled-components": "^2.2.3"
+  },
+  "optionalDependencies": {
+    "pre-commit": "1.2.2"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/treebohotels/leaf-ui.git"
+  },
+  "author": "Lakshya Ranganath <lakshya.ranganath@gmail.com>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/treebohotels/leaf-ui/issues"
+  },
+  "homepage": "https://github.com/treebohotels/leaf-ui#readme"
+}

src/Aux/Aux.js

@@ -0,0 +1,3 @@
+const Aux = ({ children }) => children;
+
+export default Aux;

src/Aux/index.js

@@ -0,0 +1 @@
+export default from './Aux';

src/Card/Card.js

@@ -0,0 +1,20 @@
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+
+const Card = styled.section`
+  background: ${(props) => props.theme.color[props.color]};
+  border-radius: ${(props) => props.theme.border.radius};
+  box-shadow: ${(props) => props.theme.shadow[props.elevation]};
+`;
+
+Card.propTypes = {
+  color: PropTypes.string,
+  elevation: PropTypes.number,
+};
+
+Card.defaultProps = {
+  color: 'white',
+  elevation: 0,
+};
+
+export default Card;

src/Card/index.js

@@ -0,0 +1 @@
+export default from './Card';

src/Flex/Flex.js

@@ -0,0 +1,58 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+
+const Flex = styled(({
+  alignContent,
+  alignItems,
+  alignSelf,
+  children,
+  display,
+  element,
+  flex,
+  flexBasis,
+  flexDirection,
+  flexGrow,
+  flexShrink,
+  flexWrap,
+  justifyContent,
+  order,
+  ...props
+}) => React.createElement(element, props, children))`
+  ${(props) => (props.alignContent ? `align-content: ${props.alignContent};` : '')}
+  ${(props) => (props.alignSelf ? `align-self: ${props.alignSelf};` : '')}
+  ${(props) => (props.alignItems ? `align-items: ${props.alignItems};` : '')}
+  ${(props) => (props.display ? `display: ${props.display};` : '')}
+  ${(props) => (props.flex ? `flex: ${props.flex};` : '')}
+  ${(props) => (props.flexBasis ? `flex-basis: ${props.flexBasis};` : '')}
+  ${(props) => (props.flexDirection ? `flex-direction: ${props.flexDirection};` : '')}
+  ${(props) => (props.flexGrow ? `flex-grow: ${props.flexGrow};` : '')}
+  ${(props) => (props.flexShrink ? `flex-shrink: ${props.flexShrink};` : '')}
+  ${(props) => (props.flexWrap ? `flex-wrap: ${props.flexWrap};` : '')}
+  ${(props) => (props.justifyContent ? `justify-content: ${props.justifyContent};` : '')}
+  ${(props) => (props.order ? `order: ${props.order};` : '')}
+`;
+
+Flex.propTypes = {
+  alignContent: PropTypes.oneOf(['center', 'flex-end', 'flex-start', 'space-around', 'space-between', 'stretch']),
+  alignItems: PropTypes.oneOf(['baseline', 'center', 'flex-end', 'flex-start', 'stretch']),
+  alignSelf: PropTypes.oneOf(['baseline', 'center', 'flex-end', 'flex-start', 'stretch']),
+  children: PropTypes.node,
+  display: PropTypes.oneOf(['flex', 'inline-flex']),
+  element: PropTypes.oneOf(['article', 'aside', 'div', 'figure', 'footer', 'header', 'main', 'nav', 'section']),
+  flex: PropTypes.string,
+  flexBasis: PropTypes.string,
+  flexDirection: PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row']),
+  flexGrow: PropTypes.number,
+  flexShrink: PropTypes.number,
+  flexWrap: PropTypes.oneOf(['nowrap', 'wrap-reverse', 'wrap']),
+  justifyContent: PropTypes.oneOf(['center', 'flex-end', 'flex-start', 'space-around', 'space-between']),
+  order: PropTypes.number,
+};
+
+Flex.defaultProps = {
+  display: 'flex',
+  element: 'div',
+};
+
+export default Flex;

src/Flex/index.js

@@ -0,0 +1 @@
+export default from './Flex';

src/index.js

@@ -0,0 +1,4 @@
+export Aux from './Aux';
+export Card from './Card';
+export Flex from './Flex';
+export theme from './theme';

src/theme/border/index.js

@@ -0,0 +1,3 @@
+export default {
+  radius: '2px',
+};

src/theme/color/index.js

@@ -0,0 +1,38 @@
+export default {
+  leaf: '#25a63f',
+  leafDark: '#1d8432',
+  emerald: '#088337',
+  emeraldDark: '#06682c',
+  lagoon: '#007989',
+  lagoonDark: '#00606d',
+  teal: '#00a08b',
+  tealDark: '#008070',
+  chill: '#bcdcd6',
+  chillDark: '#96b0ab',
+  ink: '#272f67',
+  inkDark: '#1b2552',
+  royal: '#5768e9',
+  royalDark: '#4553ba',
+  rio: '#ced500',
+  rioDark: '#8a8f00',
+  warningLighter: '#fcf0cd',
+  warningLight: '#ffea8a',
+  warning: '#edc200',
+  warningDark: '#9c6f19',
+  dangerLighter: '#fbeae5',
+  dangerLight: '#fdac9a',
+  danger: '#ed6347',
+  dangerDark: '#bf0711',
+  successLighter: '#e3f1df',
+  successLight: '#bbe5b3',
+  success: '#50b83c',
+  successDark: '#108043',
+  black: '#4a4a4a',
+  blackTranslucent: 'rgba(0, 0, 0, 0.1)',
+  slate: '#717171',
+  rock: '#aeaeae',
+  smoke: '#d9d9d9',
+  cloud: '#e6e6e6',
+  snow: '#ebebeb',
+  white: '#ffffff',
+};

src/theme/font/index.js

@@ -0,0 +1,21 @@
+export default {
+  size: {
+    xxxl: '28px',
+    xxl: '24px',
+    xl: '20px',
+    l: '18px',
+    m: '16px',
+    s: '14px',
+    xs: '12px',
+    xxs: '10px',
+  },
+  weight: {
+    normal: 400,
+    semi: 500,
+    bold: 700,
+  },
+  family: {
+    roboto: 'Roboto',
+    averta: 'Averta',
+  },
+};

src/theme/index.js

@@ -0,0 +1,13 @@
+import border from './border';
+import color from './color';
+import font from './font';
+import px from './px';
+import shadow from './shadow';
+
+export default {
+  border,
+  color,
+  font,
+  px,
+  shadow,
+};

src/theme/px/index.js

@@ -0,0 +1,10 @@
+const PX_UNIT = 8;
+
+const px = (value) => {
+  if (typeof value === 'number') return `${value * PX_UNIT}px`;
+  if (Array.isArray(value)) return value.map((v) => px(v)).join(' ');
+  if (typeof value === 'string') return value;
+  return '';
+};
+
+export default px;

src/theme/shadow/index.js

@@ -0,0 +1,5 @@
+export default [
+  'none',
+  '0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12)',
+  '0 14px 28px 0 rgba(0, 0, 0, 0.25), 0 10px 10px 0 rgba(0, 0, 0, 0.26)',
+];