diff --git a/superset-frontend/src/common/components/common.stories.tsx b/superset-frontend/src/common/components/common.stories.tsx
deleted file mode 100644
index 333d0e9747..0000000000
--- a/superset-frontend/src/common/components/common.stories.tsx
+++ /dev/null
@@ -1,134 +0,0 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements. See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership. The ASF licenses this file
- * to you under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance
- * with the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-import React, { useState, useRef, useCallback } from 'react';
-import { action } from '@storybook/addon-actions';
-import { withKnobs } from '@storybook/addon-knobs';
-import { CronPicker, CronError } from 'src/components/CronPicker';
-import Modal from 'src/components/Modal';
-import InfoTooltip from 'src/components/InfoTooltip';
-import { Input, Divider } from '.';
-
-export default {
- title: 'Common components',
- decorators: [withKnobs],
-};
-
-export const StyledModal = () => (
-
-
- );
-}
diff --git a/superset-frontend/src/components/CronPicker/CronPicker.stories.tsx b/superset-frontend/src/components/CronPicker/CronPicker.stories.tsx
new file mode 100644
index 0000000000..7f8993684f
--- /dev/null
+++ b/superset-frontend/src/components/CronPicker/CronPicker.stories.tsx
@@ -0,0 +1,88 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import React, { useState, useRef, useCallback } from 'react';
+import { Input, Divider } from 'src/common/components';
+import { CronPicker, CronError, CronProps } from '.';
+
+export default {
+ title: 'CronPicker',
+ component: CronPicker,
+};
+
+export const InteractiveCronPicker = (props: CronProps) => {
+ // @ts-ignore
+ const inputRef = useRef(null);
+ const [value, setValue] = useState(props.value);
+ const customSetValue = useCallback(
+ (newValue: string) => {
+ setValue(newValue);
+ inputRef.current?.setValue(newValue);
+ },
+ [inputRef],
+ );
+ const [error, onError] = useState();
+
+ return (
+
+ );
+};
+
+InteractiveCronPicker.args = {
+ clearButton: false,
+ disabled: false,
+ readOnly: false,
+};
+
+InteractiveCronPicker.argTypes = {
+ value: {
+ defaultValue: '30 5 * * *',
+ table: {
+ disable: true,
+ },
+ },
+ theme: {
+ table: {
+ disable: true,
+ },
+ },
+};
+
+InteractiveCronPicker.story = {
+ parameters: {
+ knobs: {
+ disable: true,
+ },
+ },
+};
diff --git a/superset-frontend/src/components/InfoTooltip/InfoTooltip.stories.tsx b/superset-frontend/src/components/InfoTooltip/InfoTooltip.stories.tsx
new file mode 100644
index 0000000000..d7c81966b6
--- /dev/null
+++ b/superset-frontend/src/components/InfoTooltip/InfoTooltip.stories.tsx
@@ -0,0 +1,79 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import React from 'react';
+import InfoTooltip, { InfoTooltipProps } from 'src/components/InfoTooltip';
+
+export default {
+ title: 'InfoTooltip',
+ component: InfoTooltip,
+};
+
+export const InteractiveInfoTooltip = (props: InfoTooltipProps) => {
+ const styles = {
+ padding: '100px 0 0 200px',
+ };
+
+ return (
+
+
+
+ );
+};
+
+InteractiveInfoTooltip.args = {
+ tooltip: 'This is the text that will display!',
+};
+
+InteractiveInfoTooltip.argTypes = {
+ placement: {
+ defaultValue: 'top',
+ control: {
+ type: 'select',
+ options: [
+ 'bottom',
+ 'left',
+ 'right',
+ 'top',
+ 'topLeft',
+ 'topRight',
+ 'bottomLeft',
+ 'bottomRight',
+ 'leftTop',
+ 'leftBottom',
+ 'rightTop',
+ 'rightBottom',
+ ],
+ },
+ },
+ trigger: {
+ defaultValue: 'hover',
+ control: {
+ type: 'select',
+ options: ['hover', 'click'],
+ },
+ },
+};
+
+InteractiveInfoTooltip.story = {
+ parameters: {
+ knobs: {
+ disable: true,
+ },
+ },
+};
diff --git a/superset-frontend/src/components/InfoTooltip/index.tsx b/superset-frontend/src/components/InfoTooltip/index.tsx
index 7091cd911b..b355859397 100644
--- a/superset-frontend/src/components/InfoTooltip/index.tsx
+++ b/superset-frontend/src/components/InfoTooltip/index.tsx
@@ -22,7 +22,7 @@ import { styled } from '@superset-ui/core';
import { Tooltip } from 'src/components/Tooltip';
import Icon from 'src/components/Icon';
-interface InfoTooltipProps {
+export interface InfoTooltipProps {
className?: string;
tooltip: string;
placement?:
diff --git a/superset-frontend/src/components/Modal/Modal.stories.tsx b/superset-frontend/src/components/Modal/Modal.stories.tsx
new file mode 100644
index 0000000000..4a7b06eaee
--- /dev/null
+++ b/superset-frontend/src/components/Modal/Modal.stories.tsx
@@ -0,0 +1,50 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import React from 'react';
+import Modal, { ModalProps } from '.';
+
+export default {
+ title: 'Modal',
+ component: Modal,
+};
+
+export const InteractiveModal = (props: ModalProps) => (
+ Hi
+);
+
+InteractiveModal.args = {
+ disablePrimaryButton: false,
+ primaryButtonName: 'Danger',
+ primaryButtonType: 'danger',
+ show: true,
+ title: "I'm a modal!",
+};
+
+InteractiveModal.argTypes = {
+ onHandledPrimaryAction: { action: 'onHandledPrimaryAction' },
+ onHide: { action: 'onHide' },
+};
+
+InteractiveModal.story = {
+ parameters: {
+ knobs: {
+ disable: true,
+ },
+ },
+};
diff --git a/superset-frontend/src/components/Modal/Modal.tsx b/superset-frontend/src/components/Modal/Modal.tsx
index 5421f0a24a..661d216ce4 100644
--- a/superset-frontend/src/components/Modal/Modal.tsx
+++ b/superset-frontend/src/components/Modal/Modal.tsx
@@ -23,7 +23,7 @@ import { css } from '@emotion/react';
import { Modal as BaseModal } from 'src/common/components';
import Button from 'src/components/Button';
-interface ModalProps {
+export interface ModalProps {
className?: string;
children: React.ReactNode;
disablePrimaryButton?: boolean;