storybook-addon-apollo-client
Version:
Use Apollo Client in your Storybook stories.
81 lines (76 loc) • 4.15 kB
JavaScript
import { addons, types, useAddonState, useChannel, useParameter } from 'storybook/manager-api';
import React from 'react';
import { AddonPanel, Form, TabsState, SyntaxHighlighter, Placeholder } from 'storybook/internal/components';
import { convert, themes } from 'storybook/theming';
// src/manager.tsx
// src/constants.ts
var ADDON_ID = "storybook/apollo-client";
var PANEL_ID = `${ADDON_ID}/panel`;
var PARAM_KEY = `apolloClient`;
var EVENTS = {
RESULT: `${ADDON_ID}/result`,
REQUEST: `${ADDON_ID}/request`};
function TabContent({
children,
fallback,
language
}) {
return children ? /* @__PURE__ */ React.createElement(SyntaxHighlighter, { bordered: true, copyable: true, language, padded: true }, children) : /* @__PURE__ */ React.createElement(Placeholder, null, fallback);
}
var PanelContent = ({ query, variables, extensions, context, result, error }) => {
return /* @__PURE__ */ React.createElement(TabsState, { initial: "variables", key: query, backgroundColor: convert(themes.normal).background.hoverable }, /* @__PURE__ */ React.createElement("div", { color: convert(themes.normal).color.warning, id: "variables", title: "Variables" }, /* @__PURE__ */ React.createElement(TabContent, { fallback: "No variables in request", language: "json" }, variables)), /* @__PURE__ */ React.createElement("div", { color: convert(themes.normal).color.positive, id: "result", title: "Result" }, /* @__PURE__ */ React.createElement(TabContent, { fallback: "No result in mock", language: "json" }, result)), /* @__PURE__ */ React.createElement("div", { color: convert(themes.normal).color.negative, id: "error", title: "Error" }, /* @__PURE__ */ React.createElement(TabContent, { fallback: "No error in mock", language: "json" }, error)), /* @__PURE__ */ React.createElement("div", { color: convert(themes.normal).color.primary, id: "query", title: "Query" }, /* @__PURE__ */ React.createElement(TabContent, { fallback: "No query in request", language: "graphql" }, query)), /* @__PURE__ */ React.createElement("div", { color: convert(themes.normal).color.ancillary, id: "extensions", title: "Extensions" }, /* @__PURE__ */ React.createElement(TabContent, { fallback: "No extensions in request", language: "json" }, extensions)), /* @__PURE__ */ React.createElement("div", { color: convert(themes.normal).color.medium, id: "context", title: "Context" }, /* @__PURE__ */ React.createElement(TabContent, { fallback: "No context in request", language: "json" }, context)));
};
// src/Panel.tsx
var Panel = ({ active = false }) => {
const [state, setState] = useAddonState(ADDON_ID, {
options: [],
variables: void 0,
query: void 0,
extensions: void 0,
context: void 0,
result: void 0,
error: void 0,
activeIndex: -1
});
const channel = useChannel({
[EVENTS.RESULT]: (state2) => setState(state2)
});
return /* @__PURE__ */ React.createElement(AddonPanel, { active }, /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Form.Field, { label: "Mock" }, /* @__PURE__ */ React.createElement(
Form.Select,
{
size: "flex",
value: state.activeIndex,
onChange: (event) => {
const { value } = event.currentTarget;
channel(EVENTS.REQUEST, value === "" ? -1 : Number(value));
}
},
/* @__PURE__ */ React.createElement("option", { value: "" }, "Select a mock"),
state.options.map((label, index) => /* @__PURE__ */ React.createElement("option", { key: index, value: index }, label))
)), /* @__PURE__ */ React.createElement(
PanelContent,
{
context: state.context,
query: state.query,
variables: state.variables,
extensions: state.extensions,
result: state.result,
error: state.error
}
)));
};
function Title() {
const { mocks } = useParameter(PARAM_KEY, {
mocks: []
});
return mocks.length ? `Apollo Client (${mocks.length})` : "Apollo Client";
}
// src/manager.tsx
addons.register(ADDON_ID, () => {
addons.add(PANEL_ID, {
type: types.PANEL,
title: Title,
match: ({ viewMode }) => viewMode === "story",
render: Panel
});
});