feat: Storybook changes

app/client/.storybook/configs/index.js

@@ -0,0 +1,6 @@
+import { ThemeProvider, theme } from "../../src/constants/DefaultTheme";
+import { light } from "constants/DefaultTheme";
+
+const DefaultTheme = { ...theme, colors: { ...theme.colors, ...light } };
+
+export { DefaultTheme, ThemeProvider }

app/client/.storybook/main.js

@@ -0,0 +1,12 @@
+module.exports = {
+  "stories": [
+    "../src/**/*.stories.mdx",
+    "../src/**/*.stories.@(js|jsx|ts|tsx)"
+  ],
+  "addons": [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/preset-create-react-app",
+    "@etchteam/storybook-addon-status",
+  ]
+}

app/client/.storybook/preview-body.html

@@ -0,0 +1,72 @@
+<script type="text/javascript">
+  // '' (empty strings), 'false' are falsy
+  // could return either boolean or string based on value
+  const parseConfig = (config) => {
+    if (config.indexOf("__") === 0 || config.indexOf("$") === 0 || config.indexOf("%") === 0)
+      return "";
+
+    const result = config.trim();
+    if (result.toLowerCase() === "false" || result === "") {
+      return false;
+    } else if (result.toLowerCase() === "true") {
+      return true;
+    }
+
+    return result;
+  }
+  const LOG_LEVELS = ["debug", "error"];
+  const CONFIG_LOG_LEVEL_INDEX = LOG_LEVELS.indexOf(parseConfig("__APPSMITH_CLIENT_LOG_LEVEL__"));
+
+  const INTERCOM_APP_ID = parseConfig("%REACT_APP_INTERCOM_APP_ID%") || parseConfig("__APPSMITH_INTERCOM_APP_ID__");
+  const CLOUD_HOSTING = parseConfig("__APPSMITH_CLOUD_HOSTING__");
+  const DISABLE_TELEMETRY = parseConfig("__APPSMITH_DISABLE_TELEMETRY__");
+
+  // Initialize the Intercom library
+  if (INTERCOM_APP_ID.length) {
+    (function () { var w = window; var ic = w.Intercom; if (typeof ic === "function") { ic('reattach_activator'); ic('update', w.intercomSettings); } else { var d = document; var i = function () { i.c(arguments); }; i.q = []; i.c = function (args) { i.q.push(args); }; w.Intercom = i; var l = function () { var s = d.createElement('script'); s.type = 'text/javascript'; s.async = true; s.src = 'https://widget.intercom.io/widget/' + INTERCOM_APP_ID; var x = d.getElementsByTagName('script')[0]; x.parentNode.insertBefore(s, x); }; if (document.readyState === 'complete') { l(); } else if (w.attachEvent) { w.attachEvent('onload', l); } else { w.addEventListener('load', l, false); } } })();
+  }
+
+  window.SENTRY_CONFIG = parseConfig("__APPSMITH_SENTRY_DSN__");
+  window.APPSMITH_FEATURE_CONFIGS = {
+    sentry: {
+      dsn: parseConfig("__APPSMITH_SENTRY_DSN__"),
+      release: parseConfig("__APPSMITH_SENTRY_RELEASE__"),
+      environment: parseConfig("__APPSMITH_SENTRY_ENVIRONMENT__"),
+    },
+    smartLook: {
+      id: parseConfig("__APPSMITH_SMART_LOOK_ID__"),
+    },
+    enableGoogleOAuth: parseConfig("__APPSMITH_OAUTH2_GOOGLE_CLIENT_ID__"),
+    enableGithubOAuth: parseConfig("__APPSMITH_OAUTH2_GITHUB_CLIENT_ID__"),
+    enableRapidAPI: parseConfig("__APPSMITH_MARKETPLACE_ENABLED__"),
+    segment: {
+      apiKey: parseConfig("__APPSMITH_SEGMENT_KEY__"),
+      ceKey: parseConfig("__APPSMITH_SEGMENT_CE_KEY__"),
+    },
+    fusioncharts: {
+      licenseKey: parseConfig("__APPSMITH_FUSIONCHARTS_LICENSE_KEY__")
+    },
+    optimizely: parseConfig("__APPSMITH_OPTIMIZELY_KEY__"),
+    enableMixpanel: parseConfig("__APPSMITH_SEGMENT_KEY__"),
+    algolia: {
+      apiId: parseConfig("__APPSMITH_ALGOLIA_API_ID__"),
+      apiKey: parseConfig("__APPSMITH_ALGOLIA_API_KEY__"),
+      indexName: parseConfig("__APPSMITH_ALGOLIA_SEARCH_INDEX_NAME__"),
+    },
+    logLevel: CONFIG_LOG_LEVEL_INDEX > -1 ? LOG_LEVELS[CONFIG_LOG_LEVEL_INDEX] : LOG_LEVELS[1],
+    google: parseConfig("__APPSMITH_GOOGLE_MAPS_API_KEY__"),
+    cloudHosting: CLOUD_HOSTING,
+    enableTNCPP: parseConfig("__APPSMITH_TNC_PP__"),
+    appVersion: {
+      id: parseConfig("__APPSMITH_VERSION_ID__"),
+      releaseDate: parseConfig("__APPSMITH_VERSION_RELEASE_DATE__")
+    },
+    intercomAppID: INTERCOM_APP_ID,
+    mailEnabled: parseConfig("__APPSMITH_MAIL_ENABLED__"),
+    disableTelemetry: DISABLE_TELEMETRY === "" || DISABLE_TELEMETRY,
+    cloudServicesBaseUrl: parseConfig("__APPSMITH_CLOUD_SERVICES_BASE_URL__") || "https://cs.appsmith.com",
+    googleRecaptchaSiteKey: parseConfig("__APPSMITH_RECAPTCHA_SITE_KEY__"),
+  };
+
+</script>
+<div id="tooltip-root"></div>

app/client/.storybook/preview.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import { DefaultTheme, ThemeProvider } from "./configs";
+import store from "../src/store";
+import { Provider } from "react-redux";
+import GlobalStyles from "../src/globalStyles/index";
+import "../src/index.css";
+
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+}
+
+export const decorators = [
+  (Story) => (
+    <Provider store={store}>
+      <ThemeProvider theme={DefaultTheme}>
+        <Story />
+        <GlobalStyles />
+      </ThemeProvider>
+    </Provider>
+  ),
+];

app/client/package.json

@@ -171,16 +171,26 @@
     "cytest": "REACT_APP_TESTING=TESTING REACT_APP_ENVIRONMENT=DEVELOPMENT craco start & ./node_modules/.bin/cypress open",
     "test:unit": "$(npm bin)/jest -b --colors --no-cache --coverage --collectCoverage=true --coverageDirectory='../../' --coverageReporters='json-summary'",
     "test:jest": "$(npm bin)/jest --watch",
-    "storybook": "start-storybook -p 9009 -s public",
-    "build-storybook": "build-storybook -s public",
-    "postinstall": "patch-package"
+    "postinstall": "patch-package",
+    "storybook": "start-storybook -p 6006 -s public",
+    "build-storybook": "build-storybook -s public"
   },
   "resolution": {
     "jest": "24.8.0"
   },
   "eslintConfig": {
     "extends": "react-app",
-    "parser": "@typescript-eslint/parser"
+    "parser": "@typescript-eslint/parser",
+    "overrides": [
+      {
+        "files": [
+          "**/*.stories.*"
+        ],
+        "rules": {
+          "import/no-anonymous-default-export": "off"
+        }
+      }
+    ]
   },
   "browserslist": [
     ">0.2%",
@@ -190,16 +200,14 @@
   ],
   "devDependencies": {
     "@babel/core": "^7.7.4",
-    "@storybook/addon-actions": "^5.3.19",
-    "@storybook/addon-backgrounds": "^5.3.19",
-    "@storybook/addon-contexts": "^5.3.19",
-    "@storybook/addon-docs": "^5.3.19",
-    "@storybook/addon-knobs": "^5.3.19",
-    "@storybook/addon-links": "^5.3.19",
-    "@storybook/addon-notes": "^5.3.19",
-    "@storybook/addons": "^5.3.19",
-    "@storybook/preset-create-react-app": "^3.1.4",
-    "@storybook/react": "^5.3.19",
+    "@etchteam/storybook-addon-status": "^4.0.0",
+    "@storybook/addon-actions": "^6.3.7",
+    "@storybook/addon-essentials": "^6.3.7",
+    "@storybook/addon-knobs": "^6.3.0",
+    "@storybook/addon-links": "^6.3.7",
+    "@storybook/node-logger": "^6.3.7",
+    "@storybook/preset-create-react-app": "^3.2.0",
+    "@storybook/react": "^6.3.7",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.2.6",
     "@testing-library/user-event": "^13.1.1",
@@ -260,7 +268,7 @@
     "redux-devtools": "^3.5.0",
     "redux-devtools-extension": "^2.13.8",
     "redux-mock-store": "^1.5.4",
-    "storybook-addon-designs": "^5.4.0",
+    "storybook-addon-designs": "^6.0.1",
     "ts-jest": "^26.5.4",
     "webpack-merge": "^4.2.2",
     "workbox-webpack-plugin": "^5.1.2"

app/client/src/components/ads/Button.tsx

@@ -49,7 +49,7 @@ type BtnFontType = {
   height: number;
 };
 
-type ButtonProps = CommonComponentProps & {
+export type ButtonProps = CommonComponentProps & {
   onClick?: (event: React.MouseEvent<HTMLElement>) => void;
   text?: string;
   category?: Category;

app/client/src/components/ads/Callout.tsx

@@ -5,7 +5,7 @@ import Icon, { IconSize } from "./Icon";
 import { Colors } from "constants/Colors";
 import Text, { TextType } from "./Text";
 
-type CalloutProps = CommonComponentProps & {
+export type CalloutProps = CommonComponentProps & {
   variant?: Variant;
   fill?: boolean;
   closeButton?: boolean;

app/client/src/components/ads/Checkbox.tsx

@@ -28,13 +28,17 @@ const Checkmark = styled.span<{
       ? props.disabled
         ? props.theme.colors.checkbox.disabled
         : props.backgroundColor || props.theme.colors.info.main
+      : props.disabled
+      ? props.theme.colors.checkbox.disabled
       : "transparent"};
-  border: 2px solid
+  border: 1.8px solid
     ${(props) =>
       props.isChecked
         ? props.disabled
           ? props.theme.colors.checkbox.disabled
           : props.backgroundColor || props.theme.colors.info.main
+        : props.disabled
+        ? props.theme.colors.checkbox.disabled
         : props.theme.colors.checkbox.unchecked};
 
   &::after {

app/client/src/components/ads/ColorSelector.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from "react";
 import styled from "styled-components";
 import { CommonComponentProps } from "./common";
 
-type ColorSelectorProps = CommonComponentProps & {
+export type ColorSelectorProps = CommonComponentProps & {
   onSelect?: (hex: string) => void;
   colorPalette: string[];
   fill?: boolean;