Add example folder

README.md

@@ -140,6 +140,10 @@ Here's what's coming up for Microbundle:
 - [mdx-deck-live-code](https://github.com/JReinhold/mdx-deck-live-code) A library for [mdx-deck](https://github.com/jxnblk/mdx-deck) to do live React and JS coding directly in slides.
 - [react-router-ext](https://github.com/ri7nz/react-router-ext) An Extended [react-router-dom](https://github.com/ReactTraining/react-router/tree/master/packages/react-router-dom) with simple usage.
 
+## 👀 Examples
+
+- [react-ui-typescript-microbundle](examples/react-ui-typescript-storybook) A React UI library created with Typescript, styled-components, styled-system & Storybook
+
 ## 🥂 License
 
 [MIT](https://oss.ninja/mit/developit/)

examples/react-ui-typescript-storybook/.storybook/Decorators.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { ThemeProvider } from '../src/theme/styled-components';
+import { Box, theme } from '../src'
+
+export const Theming = (storyFn) => (
+	<ThemeProvider theme={theme}>
+		<Box m={2}>
+			{storyFn()}
+		</Box>
+	</ThemeProvider>
+);

examples/react-ui-typescript-storybook/.storybook/addons.js

@@ -0,0 +1,4 @@
+import '@storybook/addon-actions/register';
+import '@storybook/addon-links/register';
+import '@storybook/addon-storysource/register';
+import '@storybook/addon-knobs/register';

examples/react-ui-typescript-storybook/.storybook/config.js

@@ -0,0 +1,24 @@
+import { addParameters, configure, addDecorator } from '@storybook/react';
+import { withKnobs } from '@storybook/addon-knobs';
+import { themes } from '@storybook/theming';
+import { Theming } from './Decorators'
+
+// Option defaults.
+addParameters({
+  options: {
+    name: 'Theme',
+    theme: themes.dark,
+  },
+});
+
+// Decorators
+addDecorator(Theming);
+addDecorator(withKnobs);
+
+// automatically import all files ending in *.stories.js
+const req = require.context('../src', true, /\.stories\.tsx$/);
+function loadStories() {
+  req.keys().forEach(filename => req(filename));
+}
+
+configure(loadStories, module);

examples/react-ui-typescript-storybook/.storybook/webpack.config.js

@@ -0,0 +1,23 @@
+module.exports = ({ config, mode }) => {
+  config.module.rules.push({
+    test: /\.(ts|tsx)$/,
+    loader: require.resolve('babel-loader'),
+    options: {
+      presets: [['react-app', { flow: false, typescript: true }]],
+    },
+  });
+
+  config.module.rules.push({
+    test: /\.stories\.tsx?$/,
+    loaders: [
+      {
+        loader: require.resolve('@storybook/addon-storysource/loader'),
+        options: { parser: 'typescript' },
+      },
+    ],
+    enforce: 'pre',
+  });
+
+  config.resolve.extensions.push('.ts', '.tsx');
+  return config;
+};

examples/react-ui-typescript-storybook/README.md

@@ -0,0 +1,44 @@
+# react-ui-typescript-microbundle
+
+React UI Library created with Typescript & microbundle (storybook included)
+
+## Features
+
+- Components Built with React & Typescript
+- styled-components
+- styled-system
+- polished
+- Storybook setup for development isolation in Typescript
+
+---
+
+## Setup
+
+```shell
+git clone <REPO>
+cd react-ui-typescript-microbundle
+yarn # or npm i
+yarn storybook
+```
+
+## Build
+
+```shell
+yarn build
+```
+
+## Build storybook
+
+```shell
+yarn build:storybook
+```
+
+## Example in the wild
+
+- [coeli-ui-staging](https://www.npmjs.com/package/coeli-ui-staging): testing the library with some basics
+
+## Questions?
+
+Please send me any question via [Twitter](https://twitter.com/hhg2288)
+
+### Thanks! ;)

examples/react-ui-typescript-storybook/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "react-ui-typescript-microbundle",
+  "version": "0.1.3",
+  "description": "React UI Library created with Typescript & microbundle (storybook included)",
+  "main": "dist/index.js",
+  "umd:main": "dist/index.umd.js",
+  "module": "dist/index.mjs",
+  "source": "src/index.ts",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "dev": "microbundle watch --jsx react  -f es,cjs",
+    "build": "microbundle --jsx react -f es,cjs",
+    "test": "jest",
+    "storybook": "start-storybook -p 6006",
+    "build:storybook": "build-storybook"
+  },
+  "keywords": [
+    "ui",
+    "react",
+    "library",
+    "design system"
+  ],
+  "author": "Horacio Herrera <me@hherrerag.com> (twitter: @hhg2288)",
+  "license": "MIT",
+  "devDependencies": {
+    "@babel/core": "^7.4.0",
+    "@storybook/addon-actions": "^5.0.5",
+    "@storybook/addon-knobs": "^5.0.5",
+    "@storybook/addon-links": "^5.0.5",
+    "@storybook/addon-storysource": "^5.0.5",
+    "@storybook/addons": "^5.0.5",
+    "@storybook/react": "^5.0.5",
+    "@types/jest": "^24.0.11",
+    "@types/storybook__addon-actions": "^3.4.2",
+    "@types/storybook__addon-links": "^3.3.4",
+    "@types/storybook__react": "^4.0.1",
+    "@types/styled-system": "^4.0.0",
+    "babel-loader": "^8.0.5",
+    "core-js": "^3.0.0",
+    "jest": "^24.5.0",
+    "microbundle": "^0.11.0",
+    "ts-jest": "^24.0.0"
+  },
+  "peerDependencies": {
+    "polished": ">=3.1.0",
+    "react": ">=16",
+    "react-dom": ">=16",
+    "react-feather": ">=1.1.6",
+    "styled-components": ">=4.0.0",
+    "styled-system": ">=4.0.8"
+  },
+  "dependencies": {
+    "polished": "^3.1.0",
+    "react-feather": "^1.1.6",
+    "styled-components": "^4.2.0",
+    "styled-system": "^4.0.8"
+  }
+}

examples/react-ui-typescript-storybook/src/components/Box/Box.stories.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { storiesOf } from "@storybook/react";
+import { number } from '@storybook/addon-knobs';
+
+
+import { Box } from "./Box";
+
+storiesOf("Box", module)
+  .add("Base Box", () => (
+    <Box
+		bg="white"
+		color="primary"
+    >
+      <span>margin: 2, padding: 2</span>
+    </Box>
+	))
+	.add("Box with Margin & Padding", () => (
+    <Box
+	  m={number("Equal Margin", 2)}
+		p={number("Equal Padding", 2)}
+		bg="white"
+		color="primary"
+    >
+      <span>margin: 2, padding: 2</span>
+    </Box>
+  ));

examples/react-ui-typescript-storybook/src/components/Box/Box.tsx

@@ -0,0 +1,42 @@
+import styled from "../../theme/styled-components";
+
+import {
+  color,
+  ColorProps,
+  space,
+  SpaceProps,
+  width,
+  WidthProps,
+  fontSize,
+  FontSizeProps,
+  flex,
+  FlexProps,
+  order,
+  OrderProps,
+  alignSelf,
+  AlignSelfProps
+} from "styled-system";
+
+import { css, themed } from "../../theme/utils";
+
+export type BoxProps = ColorProps &
+  SpaceProps &
+  WidthProps &
+  FontSizeProps &
+  FlexProps &
+  OrderProps &
+  AlignSelfProps;
+
+export const Box = styled<BoxProps>('div')`
+  ${space}
+  ${width}
+  ${fontSize}
+  ${color}
+  ${flex}
+  ${order}
+  ${alignSelf}
+  ${themed("Box")}
+  ${css}
+`;
+
+Box.displayName = "Box";

examples/react-ui-typescript-storybook/src/components/Button/Button.stories.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+import { storiesOf } from "@storybook/react";
+import { action } from "@storybook/addon-actions";
+import { text, select, boolean } from "@storybook/addon-knobs";
+
+import { Button } from "./Button";
+
+const knobs = {
+  variant: {
+    label: "Variant",
+    options: ["primary", "secondary"]
+  },
+  icon: {
+    label: "Icon",
+    options: []
+  },
+  disabled: {
+    label: 'disabled',
+    defaultValue: false
+  }
+};
+
+storiesOf("Button", module)
+  .add("Primary Button", () => (
+    <Button
+      variant={select(knobs.variant.label, knobs.variant.options, "primary")}
+      onClick={action("clicked")}
+      disabled={boolean(knobs.disabled.label, knobs.disabled.defaultValue)}
+    >
+      {text("Label", "Primary Button")}
+    </Button>
+  ))
+  .add("Secondary Button", () => (
+    <Button
+      variant={select(knobs.variant.label, knobs.variant.options, "secondary")}
+      onClick={action("clicked")}
+      disabled={boolean(knobs.disabled.label, knobs.disabled.defaultValue)}
+    >
+      {text("Label", "Secondary Button")}
+    </Button>
+  ));

examples/react-ui-typescript-storybook/src/components/Button/Button.tsx

@@ -0,0 +1,66 @@
+import * as React from "react";
+import styled from "../../theme/styled-components";
+import {
+  fontWeight,
+  borders,
+  borderColor,
+  buttonStyle,
+  borderRadius
+} from "styled-system";
+import { themed } from "../../theme/utils";
+import { Flex } from "../Flex/Flex";
+import { COLOR_PRIMARY } from "../../theme/theme";
+
+
+const BaseButton = styled<ButtonProps>(Flex)`
+  appearance: none;
+  text-align: center;
+  line-height: inherit;
+  text-decoration: none;
+  transition: background-color 0.25s;
+  white-space: nowrap;
+  cursor: ${({ disabled }) => (disabled ? "not-allowed" : "pointer")};
+  opacity: ${({ disabled }) => (disabled ? 0.2 : 1)};
+  transition: opacity 0.2s ease;
+
+  ${fontWeight}
+  ${borders}
+  ${borderColor}
+  ${borderRadius}
+  ${buttonStyle}
+  ${themed("Button")}
+
+  > * {
+    margin: 0 4px;
+    color: inherit;
+  }
+`;
+
+export interface ButtonProps {
+  disabled?: boolean;
+  onClick: () => void;
+  variant?: "primary" | "secondary";
+}
+
+export const Button: React.FunctionComponent<ButtonProps> = ({
+  children,
+  disabled = false,
+  onClick,
+  variant = "primary",
+  ...rest
+}) => (
+  <BaseButton
+    as="button"
+    disabled={disabled}
+    onClick={disabled ? null : onClick}
+    fontSize={14}
+    m={0}
+    p={2}
+    variant={variant}
+    border={0}
+    borderRadius={4}
+    {...rest}
+  >
+    {children}
+  </BaseButton>
+);

examples/react-ui-typescript-storybook/src/components/Flex/Flex.stories.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import { storiesOf } from "@storybook/react";
+import { number } from '@storybook/addon-knobs';
+
+
+import { Flex } from "./Flex";
+
+storiesOf("Flex", module)
+.add("Base Flex", () => (
+  <Flex
+		bg="white"
+		color="primary"
+	>
+      <span>Base Flex</span>
+    </Flex>
+	))
+	.add("Flex with Margin & Padding", () => {
+		const margin = number("Equal Margin", 2);
+		const padding = number("Equal Padding", 2)
+		return (
+			<Flex
+				m={margin}
+				p={padding}
+				bg="white"
+				color="primary"
+			>
+				<span>{`margin: ${margin}, padding: ${padding}`}</span>
+			</Flex>
+		)
+	});