Integrated storybook

.storybook/main.js

@@ -0,0 +1,18 @@
+module.exports = {
+  "stories": [
+    "../src/**/*.stories.mdx",
+    "../src/**/*.stories.@(js|jsx|ts|tsx)"
+  ],
+  "addons": [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials"
+  ],
+  webpackFinal: async config => {
+    config.module.rules.push({
+      test: /\.scss$/,
+      use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader']
+    });
+
+    return config;
+  }
+}

.storybook/preview.js

@@ -0,0 +1,11 @@
+import "../styles/globals.css";
+
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+}

lib/components/Slide.over.d.ts

@@ -1,18 +1,18 @@
 import { ReactNode } from "react";
-interface SlideOverProps {
+export interface SlideOverProps {
     onClose: () => void;
     children: ReactNode;
 }
-interface SlideOverFooterProps {
+export interface SlideOverFooterProps {
     children: ReactNode;
     className?: string;
 }
-interface SlideOverHeaderProps {
+export interface SlideOverHeaderProps {
     title: string;
     description?: string;
     children?: ReactNode;
 }
 export declare const SlideOverHeader: ({ title, description, children }: SlideOverHeaderProps) => JSX.Element;
 export declare const SlideOverFooter: ({ children, className }: SlideOverFooterProps) => JSX.Element;
-declare const SlideOver: ({ children, onClose }: SlideOverProps) => JSX.Element;
+export declare const SlideOver: ({ children, onClose }: SlideOverProps) => JSX.Element;
 export default SlideOver;

lib/components/Top.over.d.ts

@@ -1,9 +1,9 @@
 import { ReactNode } from "react";
-interface TopOverProps {
+export interface TopOverProps {
     children: ReactNode;
     width?: "max-w-sm" | "max-w-md" | "max-w-full";
 }
-interface TopOverHeaderProps {
+export interface TopOverHeaderProps {
     title?: string;
     description?: string;
 }

lib/components/dividers/Label.divider.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-interface LabelDividerProps {
+export interface LabelDividerProps {
     text: string;
 }
 export declare const LabelDivider: ({ text }: LabelDividerProps) => JSX.Element;

lib/components/fields/Input.field.d.ts

@@ -1,6 +1,6 @@
 import { InputHTMLAttributes } from "react";
 import { UseFormReturn } from "react-hook-form";
-interface InputFieldProps extends InputHTMLAttributes<HTMLInputElement> {
+export interface InputFieldProps extends InputHTMLAttributes<HTMLInputElement> {
     formRef: UseFormReturn<any>;
     name: string;
     label: string;

lib/components/fields/Textarea.field.d.ts

@@ -1,6 +1,6 @@
 import { TextareaHTMLAttributes } from "react";
 import { UseFormReturn } from "react-hook-form";
-interface TextareaFieldProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+export interface TextareaFieldProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
     formRef: UseFormReturn<any>;
     name: string;
     label: string;

package.json

@@ -5,7 +5,9 @@
   "main": "index.js",
   "scripts": {
     "build": "npx rimraf ./lib && tsc",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
   },
   "repository": {
     "type": "git",
@@ -18,10 +20,20 @@
   },
   "homepage": "https://github.com/om-network/ui-kit#readme",
   "devDependencies": {
+    "@babel/core": "^7.14.3",
+    "@storybook/addon-actions": "^6.2.9",
+    "@storybook/addon-essentials": "^6.2.9",
+    "@storybook/addon-links": "^6.2.9",
+    "@storybook/react": "^6.2.9",
+    "@tailwindcss/postcss7-compat": "^2.1.2",
     "@types/classnames": "^2.3.1",
     "@types/react": "^17.0.5",
     "@types/react-dom": "^17.0.5",
+    "autoprefixer": "^9",
+    "babel-loader": "^8.2.2",
+    "postcss": "^7",
     "rimraf": "^3.0.2",
+    "tailwindcss": "npm:@tailwindcss/postcss7-compat",
     "typescript": "^4.2.4"
   },
   "dependencies": {

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

src/components/Slide.over.tsx

@@ -2,61 +2,61 @@ import { Dialog, Transition } from "@headlessui/react";
 import classNames from "classnames";
 import React, { Fragment, ReactNode } from "react";
 
-interface SlideOverProps {
-    onClose: () => void;
-    children: ReactNode;
+export interface SlideOverProps {
+  onClose: () => void;
+  children: ReactNode;
 }
 
-interface SlideOverFooterProps {
-    children: ReactNode;
-    className?: string;
+export interface SlideOverFooterProps {
+  children: ReactNode;
+  className?: string;
 }
 
-interface SlideOverHeaderProps {
-    title: string;
-    description?: string;
-    children?: ReactNode;
+export interface SlideOverHeaderProps {
+  title: string;
+  description?: string;
+  children?: ReactNode;
 }
 
 export const SlideOverHeader = ({ title, description, children }: SlideOverHeaderProps) => (
-    <div className="py-6 px-4 bg-gray-100 sm:px-6">
-        <div className="flex items-center justify-between">
-            <Dialog.Title className="text-lg font-medium text-gray-600">{title}</Dialog.Title>
-            {children}
-        </div>
-        {description && (
-            <div className="mt-2">
-                <p className="text-xs text-gray-600">{description}</p>
-            </div>
-        )}
+  <div className="py-6 px-4 bg-gray-100 sm:px-6">
+    <div className="flex items-center justify-between">
+      <Dialog.Title className="text-lg font-medium text-gray-600">{title}</Dialog.Title>
+      {children}
     </div>
+    {description && (
+      <div className="mt-2">
+        <p className="text-xs text-gray-600">{description}</p>
+      </div>
+    )}
+  </div>
 );
 
 export const SlideOverFooter = ({ children, className = "justify-end" }: SlideOverFooterProps) => (
-    <div className={classNames("flex-shrink-0 px-4 py-4 flex bg-gray-100", className)}>{children}</div>
+  <div className={classNames("flex-shrink-0 px-4 py-4 flex bg-gray-100", className)}>{children}</div>
 );
 
-const SlideOver = ({ children, onClose }: SlideOverProps) => (
-    <Transition.Root show as={Fragment}>
-        <Dialog as="div" static className="fixed inset-0 overflow-hidden z-50" open onClose={onClose}>
-            <div className="absolute inset-0 overflow-hidden">
-                <Dialog.Overlay className="absolute inset-0 bg-black opacity-10" />
-                <div className="fixed items-center inset-y-0 pr-16 max-w-full left-0 flex">
-                    <Transition.Child
-                        as={Fragment}
-                        enter="transform transition ease-in-out duration-500 sm:duration-700"
-                        enterFrom="translate-x-full"
-                        enterTo="translate-x-0"
-                        leave="transform transition ease-in-out duration-500 sm:duration-700"
-                        leaveFrom="translate-x-0"
-                        leaveTo="translate-x-full"
-                    >
-                        <div className="w-screen max-w-md">{children}</div>
-                    </Transition.Child>
-                </div>
-            </div>
-        </Dialog>
-    </Transition.Root>
+export const SlideOver = ({ children, onClose }: SlideOverProps) => (
+  <Transition.Root show as={Fragment}>
+    <Dialog as="div" static className="fixed inset-0 overflow-hidden z-50" open onClose={onClose}>
+      <div className="absolute inset-0 overflow-hidden">
+        <Dialog.Overlay className="absolute inset-0 bg-black opacity-10" />
+        <div className="fixed items-center inset-y-0 pr-16 max-w-full left-0 flex">
+          <Transition.Child
+            as={Fragment}
+            enter="transform transition ease-in-out duration-500 sm:duration-700"
+            enterFrom="translate-x-full"
+            enterTo="translate-x-0"
+            leave="transform transition ease-in-out duration-500 sm:duration-700"
+            leaveFrom="translate-x-0"
+            leaveTo="translate-x-full"
+          >
+            <div className="w-screen max-w-md">{children}</div>
+          </Transition.Child>
+        </div>
+      </div>
+    </Dialog>
+  </Transition.Root>
 );
 
 export default SlideOver;

src/components/Top.over.tsx

@@ -2,12 +2,12 @@ import { Transition } from "@headlessui/react";
 import classNames from "classnames";
 import React, { Fragment, ReactNode } from "react";
 
-interface TopOverProps {
+export interface TopOverProps {
   children: ReactNode;
   width?: "max-w-sm" | "max-w-md" | "max-w-full";
 }
 
-interface TopOverHeaderProps {
+export interface TopOverHeaderProps {
   title?: string;
   description?: string;
 }

src/components/dividers/Label.divider.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-interface LabelDividerProps {
+export interface LabelDividerProps {
   text: string;
 }
 

src/components/fields/Input.field.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { InputHTMLAttributes } from "react";
 import { UseFormReturn } from "react-hook-form";
 
-interface InputFieldProps extends InputHTMLAttributes<HTMLInputElement> {
+export interface InputFieldProps extends InputHTMLAttributes<HTMLInputElement> {
   formRef: UseFormReturn<any>;
   name: string;
   label: string;

src/components/fields/Textarea.field.tsx

@@ -1,7 +1,7 @@
 import React, { TextareaHTMLAttributes } from "react";
 import { UseFormReturn } from "react-hook-form";
 
-interface TextareaFieldProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+export interface TextareaFieldProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
   formRef: UseFormReturn<any>;
   name: string;
   label: string;