Remove storybooks from the client app (#9)
This commit is contained in:
Abhinav Jha
GitHub
parent
24af49ba18
commit
52cc3862a8
|
|
@ -1,5 +0,0 @@
|
|||
import "@storybook/addon-knobs/register";
|
||||
import "@storybook/addon-notes/register";
|
||||
import "@storybook/addon-contexts/register"
|
||||
import "storybook-addon-designs/register";
|
||||
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
import "normalize.css/normalize.css";
|
||||
import "@blueprintjs/icons/lib/css/blueprint-icons.css";
|
||||
import "@blueprintjs/core/lib/css/blueprint.css";
|
||||
import "../src/index.css";
|
||||
|
||||
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);
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
import { ThemeProvider, theme } from "../../src/constants/DefaultTheme";
|
||||
export const contexts = [
|
||||
{
|
||||
icon: "box",
|
||||
title: "Themes",
|
||||
components: [ThemeProvider],
|
||||
params: [{ name: "default", props: { theme } }],
|
||||
},
|
||||
];
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
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
|
||||
}
|
||||
}
|
||||
];
|
||||
|
|
@ -123,9 +123,7 @@
|
|||
"test:ci": "CYPRESS_BASE_URL=https://dev.appsmith.com cypress/test.sh --env=ci",
|
||||
"eject": "react-scripts eject",
|
||||
"start-prod": "REACT_APP_BASE_URL=https://api.appsmith.com REACT_APP_ENVIRONMENT=PRODUCTION craco start",
|
||||
"storybook": "start-storybook",
|
||||
"cytest": "REACT_APP_TESTING=TESTING REACT_APP_ENVIRONMENT=DEVELOPMENT craco start & ./node_modules/.bin/cypress open",
|
||||
"build-storybook": "build-storybook -c .storybook -o .storybook-out",
|
||||
"test:unit": "$(npm bin)/jest -b --colors"
|
||||
},
|
||||
"resolution": {
|
||||
|
|
@ -142,14 +140,7 @@
|
|||
],
|
||||
"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/codemirror": "^0.0.96",
|
||||
"@types/codemirror": "^0.0.82",
|
||||
"@types/jest": "^24.0.22",
|
||||
"@types/react-beautiful-dnd": "^11.0.4",
|
||||
"@types/react-select": "^3.0.5",
|
||||
|
|
@ -182,7 +173,6 @@
|
|||
"redux-devtools": "^3.5.0",
|
||||
"redux-devtools-extension": "^2.13.8",
|
||||
"source-map-explorer": "^2.4.2",
|
||||
"storybook-addon-designs": "^5.1.1",
|
||||
"ts-jest": "^24.3.0",
|
||||
"webpack-merge": "^4.2.2",
|
||||
"workbox-webpack-plugin": "^5.1.2"
|
||||
|
|
|
|||
|
|
@ -1,45 +0,0 @@
|
|||
import React from "react";
|
||||
import Button from "components/editorComponents/Button";
|
||||
import { withKnobs, text, boolean, select } from "@storybook/addon-knobs";
|
||||
import Centered from "components/designSystems/appsmith/CenteredWrapper";
|
||||
import { withDesign } from "storybook-addon-designs";
|
||||
import { IntentColors } from "constants/DefaultTheme";
|
||||
import { Directions } from "utils/helpers";
|
||||
import { IconNames } from "@blueprintjs/icons";
|
||||
|
||||
export default {
|
||||
title: "Button",
|
||||
component: Button,
|
||||
decorators: [withKnobs, withDesign],
|
||||
};
|
||||
|
||||
const Intents = Object.keys(IntentColors);
|
||||
const IconDirections = Object.values(Directions);
|
||||
const iconNames = Object.values({ ...IconNames });
|
||||
iconNames.unshift();
|
||||
|
||||
export const withDynamicProps = () => (
|
||||
<Centered style={{ height: "100vh" }}>
|
||||
<div
|
||||
style={{
|
||||
width: "500px",
|
||||
background: "white",
|
||||
height: "300px",
|
||||
padding: "20px",
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
intent={select("Intent", Intents, "primary")}
|
||||
text={text("Button Text", "Button")}
|
||||
outline={boolean("Show outline?", false)}
|
||||
filled={boolean("Fill with intent color?", true)}
|
||||
loading={boolean("Is loading?", false)}
|
||||
disabled={boolean("Is disabled?", false)}
|
||||
size={select("Button size", ["large", "small"], undefined)}
|
||||
type={select("Button type", ["button", "submit", "reset"], "button")}
|
||||
iconAlignment={select("Icon alignment", IconDirections, "right")}
|
||||
icon={select("Icon", iconNames, "chevron-down")}
|
||||
/>
|
||||
</div>
|
||||
</Centered>
|
||||
);
|
||||
|
|
@ -1,65 +0,0 @@
|
|||
import React from "react";
|
||||
import FormMessage, {
|
||||
MessageAction,
|
||||
ActionsContainer,
|
||||
ActionButton,
|
||||
} from "components/editorComponents/form/FormMessage";
|
||||
import { withKnobs, text, select } from "@storybook/addon-knobs";
|
||||
import Centered from "components/designSystems/appsmith/CenteredWrapper";
|
||||
import { withDesign } from "storybook-addon-designs";
|
||||
import { IntentColors } from "constants/DefaultTheme";
|
||||
import _ from "lodash";
|
||||
|
||||
export default {
|
||||
title: "Form Message",
|
||||
component: FormMessage,
|
||||
decorators: [withKnobs, withDesign],
|
||||
};
|
||||
|
||||
const Intents = Object.keys(IntentColors);
|
||||
const actions: MessageAction[] = [
|
||||
{
|
||||
url: "#",
|
||||
onClick: _.noop,
|
||||
text: "Action",
|
||||
intent: "primary",
|
||||
},
|
||||
];
|
||||
export const withDynamicProps = () => (
|
||||
<Centered style={{ height: "100vh" }}>
|
||||
<div
|
||||
style={{
|
||||
width: "500px",
|
||||
background: "white",
|
||||
height: "300px",
|
||||
padding: "20px",
|
||||
}}
|
||||
>
|
||||
<FormMessage
|
||||
intent={select("Form Message Intent", Intents, "primary")}
|
||||
message={text(
|
||||
"Form Message",
|
||||
"This is a sufficiently large placeholder message. Most messages will be this long",
|
||||
)}
|
||||
actions={actions}
|
||||
/>
|
||||
<ActionsContainer>
|
||||
<ActionButton
|
||||
url={text("Action Button URL", "https://app.appsmith.com/")}
|
||||
text={text("Action Button Text", "Action Button")}
|
||||
intent={select("Action Button Intent", Intents, "primary")}
|
||||
/>
|
||||
</ActionsContainer>
|
||||
</div>
|
||||
</Centered>
|
||||
);
|
||||
|
||||
withDynamicProps.story = {
|
||||
name: "Dynamic Props",
|
||||
parameters: {
|
||||
design: {
|
||||
type: "figma",
|
||||
url: "",
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
@ -1,53 +0,0 @@
|
|||
import React, { useState } from "react";
|
||||
import TagInputComponent from "components/editorComponents/TagInputComponent";
|
||||
import { withKnobs, text, select } from "@storybook/addon-knobs";
|
||||
import { withDesign } from "storybook-addon-designs";
|
||||
import { IntentColors } from "constants/DefaultTheme";
|
||||
import Centered from "components/designSystems/appsmith/CenteredWrapper";
|
||||
|
||||
export default {
|
||||
title: "TagListInput",
|
||||
component: TagInputComponent,
|
||||
decorators: [withKnobs, withDesign],
|
||||
};
|
||||
|
||||
export const withDynamicProps = () =>
|
||||
React.createElement(() => {
|
||||
const [values, setValues] = useState(
|
||||
"abhinav, test@appsmith.com, test2@appsmith.com",
|
||||
);
|
||||
|
||||
return (
|
||||
<Centered style={{ height: "100vh" }}>
|
||||
<div
|
||||
style={{
|
||||
width: "1024px",
|
||||
background: "white",
|
||||
height: "300px",
|
||||
padding: "20px",
|
||||
}}
|
||||
>
|
||||
<TagInputComponent
|
||||
placeholder={text("Placeholder", "Placeholder")}
|
||||
input={{
|
||||
value: values,
|
||||
onChange: (value: string) => setValues(value),
|
||||
}}
|
||||
type="email"
|
||||
intent={select("Intent", Object.keys(IntentColors), "success")}
|
||||
/>
|
||||
</div>
|
||||
</Centered>
|
||||
);
|
||||
});
|
||||
|
||||
withDynamicProps.story = {
|
||||
name: "Dynamic Props",
|
||||
parameters: {
|
||||
design: {
|
||||
type: "figma",
|
||||
url:
|
||||
"https://www.figma.com/file/dcpKM4JTxsa7rd5MTcyJiT/Untitled?node-id=10%3A2",
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
@ -1,53 +0,0 @@
|
|||
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";
|
||||
import Centered from "components/designSystems/appsmith/CenteredWrapper";
|
||||
|
||||
export default {
|
||||
title: "TextInput",
|
||||
component: TextInputComponent,
|
||||
decorators: [withKnobs, withDesign],
|
||||
};
|
||||
|
||||
const mandatoryProps = {
|
||||
widgetId: "abc",
|
||||
};
|
||||
|
||||
const iconNames = Object.values({ ...IconNames });
|
||||
iconNames.unshift();
|
||||
export const withDynamicProps = () => (
|
||||
<Centered style={{ height: "100vh" }}>
|
||||
<div
|
||||
style={{
|
||||
width: "500px",
|
||||
background: "white",
|
||||
height: "300px",
|
||||
padding: "20px",
|
||||
}}
|
||||
>
|
||||
<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)}
|
||||
/>
|
||||
</div>
|
||||
</Centered>
|
||||
);
|
||||
|
||||
withDynamicProps.story = {
|
||||
name: "Dynamic Props",
|
||||
parameters: {
|
||||
design: {
|
||||
type: "figma",
|
||||
url:
|
||||
"https://www.figma.com/file/moGQyQffFfyUhHUMO9xqn3/Appsmith-v1.0-Final?node-id=1821%3A5093",
|
||||
},
|
||||
},
|
||||
};
|
||||
2755
app/client/yarn.lock
2755
app/client/yarn.lock
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user