Storybooks integration

app/client/.gitignore

@@ -27,3 +27,4 @@ yarn-error.log*
 /public/fonts/*
 /src/assets/icons/fonts/*
 .idea
+.storybook-out/

app/client/.storybook/addons.js

@@ -0,0 +1,5 @@
+import "@storybook/addon-knobs/register";
+import "@storybook/addon-notes/register";
+import "@storybook/addon-contexts/register"
+import "storybook-addon-designs/register";
+

app/client/.storybook/config.js

@@ -0,0 +1,6 @@
+import { configure, addDecorator } from "@storybook/react";
+import { withContexts } from "@storybook/addon-contexts/react";
+import { contexts } from "./configs/contexts";
+
+addDecorator(withContexts(contexts));
+configure(require.context("../src", true, /\.stories\.tsx$/), module);

app/client/.storybook/configs/contexts.js

@@ -0,0 +1,9 @@
+import { ThemeProvider, theme } from "../../src/constants/DefaultTheme";
+export const contexts = [
+  {
+    icon: "box",
+    title: "Themes",
+    components: [ThemeProvider],
+    params: [{ name: "default", props: { theme } }],
+  },
+];

app/client/.storybook/presets.js

@@ -0,0 +1,18 @@
+const path = require("path");
+module.exports = [
+  {
+    name: "@storybook/preset-create-react-app",
+    options: {
+      tsDocgenLoaderOptions: {
+        tsconfigPath: path.resolve(__dirname, "../tsconfig.json")
+      }
+    }
+  },
+  {
+    name: "@storybook/addon-docs/react/preset",
+    options: {
+      configureJSX: true,
+      sourceLoaderOptions: null
+    }
+  }
+];

app/client/package.json

@@ -87,7 +87,9 @@
     "build": "craco build",
     "test": "craco test",
     "eject": "react-scripts eject",
-    "start-prod": "REACT_APP_ENVIRONMENT=PRODUCTION craco start"
+    "start-prod": "REACT_APP_ENVIRONMENT=PRODUCTION craco start",
+    "storybook": "start-storybook",
+    "build-storybook": "build-storybook -c .storybook -o .storybook-out"
   },
   "resolution": {
     "jest": "24.8.0"
@@ -102,21 +104,33 @@
     "not op_mini all"
   ],
   "devDependencies": {
+    "@babel/core": "^7.7.4",
+    "@storybook/addon-contexts": "^5.2.6",
+    "@storybook/addon-docs": "^5.2.8",
+    "@storybook/addon-knobs": "^5.2.6",
+    "@storybook/addon-notes": "^5.2.6",
+    "@storybook/addons": "^5.2.6",
+    "@storybook/preset-create-react-app": "^1.3.1",
+    "@storybook/react": "^5.2.6",
     "@types/jest": "^24.0.22",
     "@types/react-select": "^3.0.5",
     "@types/react-tabs": "^2.3.1",
     "@types/redux-form": "^8.1.9",
     "@typescript-eslint/eslint-plugin": "^2.0.0",
     "@typescript-eslint/parser": "^2.0.0",
+    "babel-loader": "^8.0.6",
     "dotenv": "^8.1.0",
     "eslint": "^6.4.0",
     "eslint-config-prettier": "^6.1.0",
     "eslint-config-react": "^1.1.7",
     "eslint-plugin-prettier": "^3.1.0",
     "eslint-plugin-react": "^7.14.3",
+    "react-docgen-typescript-loader": "^3.6.0",
+    "react-is": "^16.12.0",
     "react-test-renderer": "^16.11.0",
     "redux-devtools": "^3.5.0",
-    "redux-devtools-extension": "^2.13.8"
+    "redux-devtools-extension": "^2.13.8",
+    "storybook-addon-designs": "^5.1.1"
   },
   "husky": {
     "hooks": {

app/client/src/components/designSystems/appsmith/TextInputComponent.tsx

@@ -55,11 +55,14 @@ const ErrorText = styled.span`
 `;
 
 export interface TextInputProps {
+  /** TextInput Placeholder */
   placeholder?: string;
   input?: Partial<WrappedFieldInputProps>;
-  meta?: WrappedFieldMetaProps;
+  meta?: Partial<WrappedFieldMetaProps>;
   icon?: IconName | MaybeElement;
+  /** Should show error when defined */
   showError?: boolean;
+  /** Additional classname */
   className?: string;
 }
 
@@ -82,6 +85,10 @@ export const BaseTextInput = (props: TextInputProps) => {
   );
 };
 
+/**
+ * Text Input Component
+ * Has Icon, placholder, errors, etc.
+ */
 const TextInputComponent = (props: TextInputProps & ComponentProps) => {
   return <BaseTextInput {...props} />;
 };

app/client/src/stories/TextInput.stories.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+import TextInputComponent from "components/designSystems/appsmith/TextInputComponent";
+import { withKnobs, text, boolean, select } from "@storybook/addon-knobs";
+import { IconNames } from "@blueprintjs/icons";
+import { withDesign } from "storybook-addon-designs";
+
+export default {
+  title: "TextInput",
+  component: TextInputComponent,
+  decorators: [withKnobs, withDesign],
+};
+
+const mandatoryProps = {
+  widgetId: "abc",
+};
+
+const iconNames = Object.values({ ...IconNames });
+iconNames.unshift();
+export const withDynamicProps = () => (
+  <TextInputComponent
+    {...mandatoryProps}
+    showError={boolean("Show Errors", false)}
+    placeholder={text("Placeholder", "Placeholder")}
+    meta={{
+      touched: true,
+      error: text("Error Text", "This is an error"),
+    }}
+    icon={select("Icon", iconNames, undefined)}
+  />
+);
+
+withDynamicProps.story = {
+  name: "Dynamic Props",
+  parameters: {
+    design: {
+      type: "figma",
+      url:
+        "https://www.figma.com/file/moGQyQffFfyUhHUMO9xqn3/Appsmith-v1.0-Final?node-id=1821%3A5093",
+    },
+  },
+};