fix(blabla): heavy developement!

packages/components/.babelrc

@@ -0,0 +1,46 @@
+{
+    "presets": [
+        "@babel/env",
+        "@babel/react",
+        "@babel/typescript",
+        "@emotion/babel-preset-css-prop"
+    ],
+    "plugins": [
+        "babel-plugin-typescript-to-proptypes",
+        "@babel/plugin-proposal-class-properties"
+    ],
+    "env": {
+        "build": {
+            "plugins": [
+                "css-modules-transform",
+                {
+                    "generateScopedName": "[name]__[local]___[hash:base64:5]"
+                }
+            ]
+        },
+        "esm": {
+            "presets": [
+                [
+                    "@babel/preset-env",
+                    {
+                        "modules": false
+                    }
+                ]
+            ],
+            "plugins": [
+                [
+                    "css-modules-transform",
+                    {
+                        "generateScopedName": "[name]__[local]___[hash:base64:5]"
+                    }
+                ],
+                [
+                    "@babel/plugin-transform-runtime",
+                    {
+                        "useESModules": true
+                    }
+                ]
+            ]
+        }
+    }
+}

packages/components/.storybook/main.js

@@ -0,0 +1,40 @@
+const path = require('path')
+
+module.exports = {
+    stories: ['../src/components/**/*.stories.tsx'],
+    addons: [
+        {
+            name: '@storybook/preset-typescript',
+            options: {
+                tsLoaderOptions: {
+                    configFile: path.resolve(__dirname, '../tsconfig.json'),
+                },
+                forkTsCheckerWebpackPluginOptions: {
+                    colors: false, // disables built-in colors in logger messages
+                },
+                include: [path.resolve(__dirname, '../src')],
+                transpileManager: true,
+            }
+        },
+        {
+            name: '@storybook/addon-docs',
+            options: {
+                configureJSX: true,
+            },
+        },
+    ],
+    webpackFinal: async (config, { configType }) => {
+        // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
+        // You can change the configuration based on that.
+        // 'PRODUCTION' is used when building the static version of storybook.
+        config.module.rules.push({
+            test: /\.(js|ts)x?$/,
+            exclude: /node_modules/,
+            use: [
+                require.resolve('babel-loader'),
+                require.resolve('react-docgen-typescript-loader'),
+            ],
+        });
+        return config
+    },
+};

packages/components/package.json

@@ -0,0 +1,51 @@
+{
+    "name": "@ruids/components",
+    "version": "0.0.0-dev",
+    "license": "MIT",
+    "files": [
+        "package.json",
+        "dist"
+    ],
+    "publishConfig": {
+        "access": "public"
+    },
+    "devDependencies": {
+        "@babel/core": "^7.11.0",
+        "@babel/plugin-proposal-class-properties": "^7.10.4",
+        "@babel/preset-react": "^7.10.4",
+        "@babel/preset-typescript": "^7.10.4",
+        "@emotion/babel-preset-css-prop": "^10.0.27",
+        "@emotion/core": "^10.0.28",
+        "@ruids/tokens": "^1.0.0",
+        "@storybook/addon-docs": "^5.3.19",
+        "@storybook/preset-typescript": "^3.0.0",
+        "@storybook/react": "^5.3.19",
+        "@types/classnames": "^2.2.10",
+        "@types/jest": "^26.0.8",
+        "@types/react": "^16.9.43",
+        "@types/react-dom": "^16.9.8",
+        "babel-loader": "^8.1.0",
+        "babel-plugin-css-modules-transform": "^1.6.2",
+        "babel-plugin-typescript-to-proptypes": "^1.4.0",
+        "classnames": "^2.2.6",
+        "css-loader": "^4.2.0",
+        "fork-ts-checker-webpack-plugin": "^5.0.13",
+        "jest": "^26.2.2",
+        "postcss": "^7.0.32",
+        "postcss-import": "^12.0.1",
+        "postcss-preset-env": "^6.7.0",
+        "postcss-url": "^8.0.0",
+        "react": "^16.13.1",
+        "react-docgen-typescript-loader": "^3.7.2",
+        "react-dom": "^16.13.1",
+        "storybook": "^5.3.19",
+        "style-loader": "^1.2.1",
+        "ts-jest": "^26.1.4",
+        "ts-loader": "^8.0.1",
+        "typescript": "^3.9.7",
+        "webpack": "^4.44.1"
+    },
+    "scripts": {
+        "start": "start-storybook -p 9001 -c ./.storybook"
+    }
+}

packages/components/postcss.config.js

@@ -0,0 +1,15 @@
+const path = require('path');
+
+module.exports = () => ({
+    plugins: {
+        'postcss-import': {
+            path: [path.resolve(__dirname, './src/styles')]
+        },
+        'postcss-url': {},
+        'postcss-preset-env': {
+            stage: 0,
+            browsers: 'last 2 versions, ie >= 11',
+            preserve: false
+        }
+    },
+});

packages/components/src/components/@types/common.ts

@@ -0,0 +1,43 @@
+import React from 'react'
+
+export interface StandardProps {
+    /** You can use a custom element for this component */
+    componentClass?: React.ElementType | string;
+
+    /** Additional classes */
+    className?: string;
+
+    /** Primary content */
+    children?: React.ReactNode;
+
+    /** Additional style */
+    style?: React.CSSProperties;
+
+}
+
+export declare namespace TypeAttributes {
+    type Appearance = 'default' | 'primary' | 'link' | 'subtle' | 'ghost'
+    type Size = 'lg' | 'md' | 'sm' | 'xs'
+    type Status = 'success' | 'warning' | 'error' | 'info'
+    type Color = 'red' | 'orange' | 'yellow' | 'green' | 'cyan' | 'blue' | 'violet'
+}
+
+export interface AnimationEventProps {
+    /** Callback fired before the Modal transitions in */
+    onEnter?: (node: null | Element | Text) => void;
+
+    /** Callback fired as the Modal begins to transition in */
+    onEntering?: (node: null | Element | Text) => void;
+
+    /** Callback fired after the Modal finishes transitioning in */
+    onEntered?: (node: null | Element | Text) => void;
+
+    /** Callback fired right before the Modal transitions out */
+    onExit?: (node: null | Element | Text) => void;
+
+    /** Callback fired as the Modal begins to transition out */
+    onExiting?: (node: null | Element | Text) => void;
+
+    /** Callback fired after the Modal finishes transitioning out */
+    onExited?: (node: null | Element | Text) => void;
+}

packages/components/src/components/Button/Button.stories.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import { Button } from './Button'
+
+export default {
+    title: 'Button'
+}
+
+export const Default = () => {
+    return (
+        <Button>
+            button
+        </Button>
+    )
+}

packages/components/src/components/Button/Button.tsx

@@ -0,0 +1,31 @@
+import { ButtonProps } from './types'
+import React from 'react'
+import { button } from './styles'
+
+export const Button = React.forwardRef((props: ButtonProps, ref: React.Ref<HTMLButtonElement>) => {
+    const {
+        buttonType = 'primary',
+        className,
+        children,
+        color,
+        componentClass: Component = 'button',
+        disabled,
+        loading,
+        type = 'button',
+        ...rest
+    } = props
+
+    console.log(button)
+
+    return (
+        <Component
+            css={button}
+            type={type}
+            ref={ref}
+            disabled={disabled}
+        >
+            {children}
+        </Component>
+    )
+})
+

packages/components/src/components/Button/styles.ts

@@ -0,0 +1,14 @@
+import { css } from '@emotion/core'
+// @ts-ignore
+import tokens from '@ruids/tokens'
+
+export const button = () => css`
+    box-sizing: border-box;
+    height: calc(1rem * (40 / ${tokens.fontBaseDefault}));
+    display: inline-block;
+    padding: 0;
+    border: calc(1rem * (1 / ${tokens.fontBaseDefault})) solid var(--color-element-dark);
+    border-radius: calc(1rem * (2 / ${tokens.fontBaseDefault}));
+    font-family: ${tokens.fontSans};
+    font-size: calc(1rem * (14 / ${tokens.fontBaseDefault}));
+`

packages/components/src/components/Button/types.ts

@@ -0,0 +1,36 @@
+import { StandardProps, TypeAttributes } from '../@types/common';
+
+export interface ButtonProps extends StandardProps, React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /** A button can have different appearances. */
+    buttonType?: 'primary' | 'positive' | 'negative' | 'warning' | 'muted' | 'naked';
+
+    /** A button can show it is currently the active user selection */
+    active?: boolean;
+
+    /** A button can have different sizes */
+    size?: TypeAttributes.Size;
+
+    /** A button can have different colors */
+    color?: TypeAttributes.Color;
+
+    /** Format button to appear inside a content bloc */
+    block?: boolean;
+
+    /** Providing a `href` will render an `<a>` element, _styled_ as a button */
+    href?: string;
+
+    /** A button can show a loading indicator */
+    loading?: boolean;
+
+    /** A button can show it is currently unable to be interacted with */
+    disabled?: boolean;
+
+    /** Called when the button is clicked. */
+    onClick?: (event: React.SyntheticEvent) => void;
+
+    /** Ripple after button click */
+    ripple?: boolean;
+
+    /** Defines HTML button type attribute */
+    type?: 'button' | 'reset' | 'submit';
+}

packages/components/src/components/Icon/Icon.stories.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import { Icon } from './Icon'
+
+export default {
+    title: 'Icon'
+}
+
+export const Default = () => {
+    return (
+        <Icon
+            icon="error"
+        />
+    )
+}

packages/components/src/components/Icon/Icon.tsx

@@ -0,0 +1,35 @@
+import React from 'react'
+import { IconProps, SVGIcon, defaultProps } from './types'
+import cn from 'classnames'
+
+export class Icon extends React.Component<IconProps> {
+    static defaultProps = defaultProps
+
+    render() {
+        const {
+            className,
+            icon,
+            rotate,
+            style,
+            componentClass: Component,
+            ...props
+        } = this.props
+
+        const classes = cn(className)
+
+        const styles = rotate ? { transform: `rotate(${rotate}deg)`, ...style } : style;
+
+        const isSvgIcon = typeof icon === 'object' && icon.id && icon.viewBox;
+
+        if (isSvgIcon) {
+            const svgIcon = icon as SVGIcon
+            return (
+                <Component {...props} className={classes} style={styles}>
+
+                </Component>
+            )
+        }
+
+        return <Component {...props} className={classes} style={styles} />
+    }
+}

packages/components/src/components/Icon/types.ts

@@ -0,0 +1,22 @@
+import { StandardProps } from '../@types/common'
+
+export type IconNames = 'error'
+
+export interface SVGIcon {
+    viewBox: string;
+    id: string;
+}
+
+export const defaultProps = {
+    componentClass: 'i'
+}
+
+
+export type IconProps = {
+    /** Icon name */
+    icon: IconNames | SVGIcon
+    /** Rotate the icon */
+    rotate?: number
+    /** Set SVG style when using custom SVG Icon */
+    svgStyle?: React.CSSProperties
+} & typeof defaultProps & StandardProps

packages/components/src/components/Overlay/BaseOverlay.tsx

@@ -0,0 +1,3 @@
+export interface BaseOverlayState {
+    exited?: boolean;
+}