added some atoms

Author: juicycleff

README.md

@@ -1,8 +1,6 @@
 # chatql-ui-react
 
-A component library template based on [create-react-app](https://github.com/facebook/create-react-app). Including documentation. This template is used by [generator-react-exhibit](generator-react-exhibit).
-
-View it live [here](https://au-re.github.io/react-exhibit-template/).
+A react chat and general UI kit for Chatql
 
 ## Tech Stack
 
@@ -24,9 +22,6 @@ updating [npm](https://www.npmjs.com/) to version >=5.
 
 ## Getting started
 
-You will need [Yeoman](http://yeoman.io/) installed to use this generator.
-You can install both with the following commands:
-
 ```sh
 npm install
 ```
@@ -84,22 +79,6 @@ npm run build:storybook
 
 This will create a folder called `storybook-static` with your documentation.
 
-### Deploy
-
-After building your documentation, you can deploy it as a gh-page.
-Make sure to add a homepage entry in your `package.json` like so:
-
-```json
-{
-  "homepage": "https://juicycleff.github.io/chatql-ui-react/",
-}
-```
-
-Then simply run:
-```sh
-npm run deploy
-```
-
 You can also publish your library to `npm`. To do that, simply run:
 
 ```sh

src/components/Button/Button.js renamed to src/components/atom/Button/Button.js

@@ -0,0 +1,18 @@
+import styled from "styled-components";
+
+const Input = styled.input`
+  text-align: left;
+  line-height: 2.5rem;
+  font-size: 1rem;
+  font-family: sans-serif;
+  font-weight: 700;
+  padding: 0 12px;
+  transition: all 0.2s;
+  border-radius: 2px;
+
+  :hover {
+    border-color: blueviolet;
+  }
+`;
+
+export default Input;

src/components/Button/Button.stories.js renamed to src/components/atom/Button/Button.stories.js

@@ -0,0 +1,13 @@
+import { storiesOf } from "@storybook/react";
+import React, { Fragment } from "react";
+import { withDocs } from "storybook-readme";
+
+import Input from "./Input";
+import readme from "./README.md";
+
+storiesOf("Input", module)
+  .addDecorator(withDocs(readme))
+  .add("a simple input", () =>
+    <Fragment>
+      <Input placeholder="Type a message" />
+    </Fragment>);

src/components/Button/Button.test.js renamed to src/components/atom/Button/Button.test.js

@@ -0,0 +1,14 @@
+import "jest-styled-components";
+
+import React from "react";
+import renderer from "react-test-renderer";
+
+import Input from "./Input";
+
+describe("Input", () => {
+
+  it("renders without props", () => {
+    const tree = renderer.create(<Input />).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});

src/components/Button/README.md renamed to src/components/atom/Button/README.md

@@ -0,0 +1,10 @@
+Input
+===
+
+A simple Input to showcase the library.
+
+```jsx
+  <Input placeholder="Type a message" />
+```
+
+<!-- STORY -->