Refactor and simplify

.storybook/custom.css

@@ -0,0 +1,11 @@
+.docblock-typeset > div > div:first-child {
+    width: 25%;
+}
+
+.docblock-typeset > div > div:last-child {
+    width: 75%;
+}
+
+a {
+    color: var(--hot-color-primary-700)
+}

.storybook/main.ts

@@ -1,7 +1,6 @@
 import type { StorybookConfig } from "@storybook/web-components-vite";
-
 const config: StorybookConfig = {
-  stories: ["./stories/**/*.stories.ts"],
+  stories: ["./stories/**/*.mdx", "./stories/**/*.stories.ts"],
   staticDirs: ["./static"],
   addons: ["@storybook/addon-links", "@storybook/addon-essentials"],
   framework: {

.storybook/preview-head.html

@@ -0,0 +1,7 @@
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link
+  href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
+  rel="stylesheet"
+/>
+<link href="https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">

.storybook/preview.ts

@@ -1,5 +1,8 @@
 import type { Preview } from "@storybook/web-components";
 
+import '../src/style.css';
+import './custom.css';
+
 const preview: Preview = {
   parameters: {
     controls: {

.storybook/stories/0_index.mdx

@@ -0,0 +1,50 @@
+import { Meta } from '@storybook/blocks';
+import { Logo, Button } from '../../src/react';
+
+<Meta title="Intro" />
+
+<Logo /><br />
+
+# HOTOSM UI
+
+## Shared UI Components with HOT Theming
+
+This repository contains HOT themed UI components to reduce code duplication
+and simplify the lives of developers needing to prototype and develop well
+designed web applications quickly.
+
+They are available as
+[Web Components](https://developer.mozilla.org/en-US/docs/Web/API/Web_components)
+and has first-class React support.
+
+The main goal of this project is not to re-invent the wheel, or add an extra burden
+of development and maintenance.
+
+## Install
+
+`npm install @hotosm/ui`
+
+And import the styles:
+
+```js
+  import '@hotosm/dist/style.css';
+```
+
+## Use
+
+Now you can use any component, you can try with a button:
+
+```html
+<hot-button variant="primary">Click me!</hot-button>
+```
+
+<Button variant="primary">Click me!</Button>
+
+Or the HOT logo!
+
+```html
+<hot-logo></hot-logo>
+```
+
+<Logo />
+