Initialization with Box, Button, Card, Divider, Layer and Modal compo…

…nents + storybook

.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["@babel/preset-env", "@babel/preset-react"]
+}

.gitignore

@@ -0,0 +1,2 @@
+node_modules
+dist

.prettierrc

@@ -0,0 +1,4 @@
+{
+  "singleQuote": true,
+  "jsxSingleQuote": false
+}

.storybook/main.js

@@ -0,0 +1,3 @@
+module.exports = {
+  stories: ['../components/**/*.stories.js'],
+};

.storybook/manager.js

@@ -0,0 +1,8 @@
+import 'storybook-addon-jsx/register';
+import '@storybook/addon-knobs/register';
+import { addons } from '@storybook/addons';
+import theme from './theme';
+
+addons.setConfig({
+  theme,
+});

.storybook/theme.js

@@ -0,0 +1,37 @@
+import { create } from '@storybook/theming/create';
+
+export default create({
+  base: 'light',
+
+  colorPrimary: '#0070F3',
+  colorSecondary: '#146DD6',
+
+  // UI
+  appBg: '#fff',
+  appContentBg: '#fff',
+  appBorderColor: '#ddd',
+  appBorderRadius: 5,
+
+  // Typography
+  fontBase: '"Open Sans", sans-serif',
+  fontCode: 'monospace',
+
+  // Text colors
+  textColor: '#333',
+  textInverseColor: 'rgba(255,255,255,0.9)',
+
+  // Toolbar default and active colors
+  barTextColor: '#333',
+  barSelectedColor: '#999',
+  barBg: '#eaeaea',
+
+  // Form colors
+  inputBg: 'white',
+  inputBorder: 'silver',
+  inputTextColor: 'black',
+  inputBorderRadius: 5,
+
+  brandTitle: 'Composion',
+  brandUrl: 'https://blog.dema.in',
+  brandImage: '',
+});

.storybook/utils.js

@@ -0,0 +1,6 @@
+import { jsxDecorator } from 'storybook-addon-jsx';
+import { withKnobs } from '@storybook/addon-knobs';
+
+const decorators = [jsxDecorator, withKnobs];
+
+export default decorators;

README.md

@@ -1,2 +1,20 @@
-# composion
-A component library made with React and Emotion
+# Composion
+
+A component library made with [React](https://reactjs.org) and [Emotion](https://emotion.sh).
+
+## Rationale
+
+My desire is to create a library that is **lighter** than Grommet and closer to the **Flexbox** specification than other libraries like Blueprint, PrimeReact, Rebass or Semantic UI.
+
+The idea is that someone who knows the [Flexible Layout Box Model](https://www.w3.org/TR/css-flexbox-1) should **know how to use** the library and that someone who does not know Flex Boxes should be able to **learn by using it**.
+
+I believe that a good library is a library that is **simple to teach**. But Flexbox is not always an easy concept. Composion, in addition to its implementation should provide documentation covering all the Flexbox properties and providing examples of the main use cases.
+
+## Run examples
+
+yarn start-storybook
+
+## Inspirations
+
+<https://github.com/grommet/grommet>
+<https://github.com/ooade/component-library/tree/final>

components/Box/Box.js

@@ -0,0 +1,63 @@
+import styled from '@emotion/styled';
+
+const justifyMap = {
+  start: 'flex-start',
+  end: 'flex-end',
+  'space-between': 'space-between',
+  'space-around': 'space-around',
+  center: 'center',
+  'space-evenly': 'space-evenly',
+};
+
+const alignMap = {
+  start: 'flex-start',
+  end: 'flex-end',
+  center: 'center',
+  baseline: 'baseline',
+  stretch: 'stretch',
+};
+
+const directionMap = {
+  column: 'column',
+  row: 'row',
+};
+
+const alignItems = ({ align = 'left' }) => alignMap[align];
+const direction = ({ direction = 'column' }) => directionMap[direction];
+const grow = ({ grow }) => (grow ? 1 : 0);
+const justifyContent = ({ justify = 'left' }) => justifyMap[justify];
+const wrap = ({ wrap }) => (wrap ? 'wrap' : 'no-wrap');
+
+const background = ({background}) => background;
+const basis = ({basis}) => basis;
+const border = ({border}) => border;
+const borderRadius = ({borderRadius}) => borderRadius;
+const boxShadow = ({boxShadow}) => boxShadow;
+const color = ({color}) => color;
+const focus = ({focus}) => focus;
+const height = ({height}) => height;
+const margin = ({ margin }) => margin;
+const padding = ({ padding }) => padding;
+const shrink = ({shrink}) => shrink;
+const width = ({width}) => width;
+
+export const Box = styled.div`
+  align-items: ${alignItems};
+  background: ${background};
+  border: ${border};
+  border-radius: ${borderRadius};
+  box-shadow: ${boxShadow};
+  color: ${color};
+  display: flex;
+  height: ${height};
+  justify-content: ${justifyContent};
+  flex-direction: ${direction};
+  flex-grow: ${grow};
+  flex-shrink: ${shrink};
+  flex-basis: ${basis};
+  flex-wrap: ${wrap};
+  margin: ${margin};
+  padding: ${padding};
+  width: ${width};
+  &:focus: ${focus};
+`;

components/Box/Box.stories.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import { select } from '@storybook/addon-knobs';
+import styled from '@emotion/styled';
+
+import decorators from '../../.storybook/utils';
+import { Box } from './';
+
+export default {
+  title: 'Components/Box',
+  decorators,
+};
+
+const colorValues = ["#eaeaea", "#ea00ea", "#00eaea"];
+const paddingValues = ["8px", "16px", "24px", "32px"];
+
+const Container = styled.div`
+  max-width: 480px;
+`;
+
+export const boxWithBackground = () => {
+  return (
+    <Box background={select('background', colorValues, "#eaeaea")}>
+      Simple Box Component
+    </Box>
+  );
+};
+
+export const boxWithPadding = () => {
+  return (
+    <Box
+      background={select('background', colorValues, "#eaeaea")}
+      padding={select('padding', paddingValues, '16px')}
+    >
+      Simple Box Component
+    </Box>
+  );
+};
+
+export const boxWithChildren = () => {
+  return (
+    <Container>
+      <Box
+        direction="row"
+        border="12px solid #003061"
+        padding={select('padding', paddingValues, '24px')}
+      >
+        <Box padding="12px" background="rgb(119, 119, 119)" />
+        <Box padding="24px" background="rgb(237, 237, 237)" />
+      </Box>
+    </Container>
+  );
+};

components/Box/index.js

@@ -0,0 +1 @@
+export * from './Box';

components/Button/Button.js

@@ -0,0 +1,23 @@
+import styled from '@emotion/styled';
+
+export const Button = styled.button`
+  background: ${props => props.background ? props.background : 'transparent' };
+  border: ${props => props.border ? props.border : '1px solid'};
+  borderRadius: ${props => props.borderRadius};
+  boxShadow: ${props => props.boxShadow};
+  color: ${props => props.color};
+  cursor: 'pointer';
+  fontFamily: ${props => props.fontFamily};
+  fontSize: ${props => props.fontSize};
+  fontWeight: ${(fontWeight = 500) => fontWeight};
+  opacity: ${props => props.disabled && 0.7};
+  outline: none;
+  padding: ${props => props.padding};
+  position: relative;
+  transition: 'all 0.3s linear';
+  &:hover { ${props => !props.disabled && props.hover} }
+  &::after { ${props => props.after} }
+  &:hover::after { ${props => props.hoverAfter} }
+  &::before { ${props => props.before} }
+  &:hover::before { ${props => props.hoverBefore} }
+`;

components/Button/Button.stories.js

@@ -0,0 +1,70 @@
+import React from 'react';
+import { select } from '@storybook/addon-knobs';
+import decorators from '../../.storybook/utils';
+import { Button } from './';
+
+export default {
+  title: 'Components/Button',
+  decorators,
+};
+
+const colorValues = ["red", "#003061", "rgb(40, 41, 54)"];
+const paddingValues = ["8px", "12px", "24px", "32px"];
+
+export const defaultButton = () => {
+  return <Button>Default Solid Button</Button>;
+};
+
+export const buttonWithProps = () => {
+  return (
+    <Button
+      color={select('color', colorValues, "red")}
+      padding={select('padding', paddingValues, '12px')}
+    >
+      Solid Button
+    </Button>
+  );
+};
+
+export const hoverButtonWithProps = () => {
+  return (
+    <Button
+      color={select('color', colorValues, "red")}
+      padding={select('padding', paddingValues, '12px')}
+      hover={{color: "white", background: select('color', colorValues, "red")}}
+    >
+      Solid Button
+    </Button>
+  );
+};
+
+export const advancedButton = () => {
+  return (
+    <Button
+      border="solid 2px"
+      borderRadius="6px"
+      color="#484d51"
+      padding="10px 20px"
+      hover={{color: select('hover color', colorValues, "#003061")}}
+      after={{
+        content: '""',
+        display: "block",
+        position: "absolute",
+        width: "20%",
+        height: "20%",
+        border: "2px solid",
+        borderRadius: "6px",
+        bottom: "1px",
+        right: "1px",
+        borderColor: "#484d51",
+      }}
+      hoverAfter={{
+        borderColor: "#003061",
+        width: "100%",
+        height: "100%",
+      }}
+    >
+      Solid Button
+    </Button>
+  );
+}

components/Button/index.js

@@ -0,0 +1 @@
+export * from './Button';

components/Card/Card.js

@@ -0,0 +1,76 @@
+import styled from '@emotion/styled';
+import {
+  cardTheme,
+  cardTitleTheme
+} from './themes';
+
+import { Box } from '../Box';
+
+export const CardRoot = ({theme, children}) => {
+
+  const themeWithBaseTheme = cardTheme(theme);
+  return <Box
+    background={themeWithBaseTheme.Card_backgroundColor}
+    border={`1px solid ${themeWithBaseTheme.Card_borderColor}`}
+    borderRadius={themeWithBaseTheme.Card_borderRadius}
+    boxShadow = {themeWithBaseTheme.Card_boxShadow}
+    padding= {themeWithBaseTheme.Card_padding}
+    focus={{
+      boxShadow: themeWithBaseTheme.Card_boxShadow_focus
+    }}
+    width={themeWithBaseTheme.Card_width}
+    basis={themeWithBaseTheme.Card_basis}
+    margin={themeWithBaseTheme.Card_margin}
+  >
+    {children}
+  </Box>;
+};
+
+export const CardAnchor = styled.a`
+    width: ${(props) => props.theme.Card_width};
+    flex-basis: ${(props) => props.theme.Card_basis};
+    margin: ${(props) => props.theme.Card_margin};
+    &:hover {
+      color: #003061;
+      box-shadow: 0 1px 2px #003061;
+      border-radius: 6px;
+    }
+    color: #30363c;
+    text-decoration: none;
+`;
+
+export const CardRow = ({theme, children}) => {
+    //const theme = cardTheme(theme);
+    return <Box padding={theme.CardRow_padding}>{children}</Box>;
+};
+
+export const CardBody = ({theme, children}) => 
+  <Box 
+    height={theme.CardBody_height}
+    padding={theme.CardRow_padding}
+  >
+    {children}
+  </Box>;
+
+export const CardTitleContent = styled('h3')(({ theme: baseTheme }) => {
+  const theme = cardTitleTheme(baseTheme);
+  const fontSize = theme.CardTitle_fontSize;
+  return {
+    color: theme.CardTitle_color,
+    flex: theme.CardTitle_flex, // 1 1 auto
+    fontSize,
+    fontWeight: theme.CardTitle_fontWeight,
+    margin: 0,
+  };
+});
+
+export const Card = ({title, description, theme={}}) => (
+    <CardRoot theme={theme}>
+        <CardRow theme={theme}>
+            {title}
+        </CardRow>
+        <CardBody theme={theme}>
+            {description}
+        </CardBody>
+    </CardRoot>
+);