@player-ui/storybook 0.0.1-next.2

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@player-ui/storybook",
+  "version": "0.0.1-next.2",
+  "private": false,
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org"
+  },
+  "peerDependencies": {
+    "@storybook/react": "^6.4.15",
+    "@storybook/addons": "^6.4.15",
+    "@storybook/addon-docs": "^6.4.15",
+    "react": "^17.0.2",
+    "@types/react": "^17.0.25",
+    "@player-ui/binding-grammar": "0.0.1-next.2",
+    "@player-ui/types": "0.0.1-next.2"
+  },
+  "dependencies": {
+    "@monaco-editor/react": "^4.3.1",
+    "bowser": "^2.11.0",
+    "storybook-dark-mode": "^1.0.8",
+    "@devtools-ds/table": "^1.1.2",
+    "lz-string": "^1.4.4",
+    "@types/lz-string": "^1.3.34",
+    "@chakra-ui/react": "^1.7.3",
+    "monaco-editor": "^0.31.1",
+    "react-redux": "^7.2.6",
+    "redux": "^4.1.2",
+    "dequal": "^2.0.2",
+    "ts-debounce": "^4.0.0",
+    "uuid": "^8.3.2",
+    "@player-ui/binding-grammar": "0.0.1-next.2",
+    "@babel/runtime": "7.15.4"
+  },
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.esm.js",
+  "typings": "dist/index.d.ts"
+}

package/register.js

@@ -0,0 +1 @@
+require('./dist/index.esm').register();

package/src/addons/appetize/index.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import type { API } from '@storybook/api';
+import { useParameter } from '@storybook/api';
+import { STORY_CHANGED } from '@storybook/core-events';
+import {
+  IconButton,
+  Icons,
+  WithTooltip,
+  TooltipLinkList,
+} from '@storybook/components';
+import type { RenderTarget } from '../../types';
+import { useStateActions } from '../../state';
+
+interface RenderSelectionProps {
+  /** storybook api */
+  api: API;
+}
+
+/** Component to show the appetize dropdown */
+export const RenderSelection = ({ api }: RenderSelectionProps) => {
+  const params = useParameter('appetizeTokens', {});
+  const actions = useStateActions(api.getChannel());
+  const [selectedPlatform, setPlatform] =
+    React.useState<RenderTarget['platform']>('web');
+
+  React.useEffect(() => {
+    /** callback for the subscribe listener */
+    const listener = () => {
+      setPlatform('web');
+    };
+
+    api.getChannel().addListener(STORY_CHANGED, listener);
+
+    return () => {
+      api.getChannel().removeListener(STORY_CHANGED, listener);
+    };
+  }, [api]);
+
+  const mobilePlatforms = Object.keys(params) as Array<'ios' | 'android'>;
+
+  if (mobilePlatforms.length === 0) {
+    // No keys set so don't show
+    return null;
+  }
+
+  return (
+    <WithTooltip
+      closeOnClick
+      placement="top"
+      trigger="click"
+      tooltip={({ onHide }) => (
+        <TooltipLinkList
+          links={(['web', ...mobilePlatforms] as const).map((platform) => ({
+            id: platform,
+            title: platform,
+            onClick: () => {
+              setPlatform(platform);
+              actions.setPlatform(platform);
+              onHide();
+            },
+            value: platform,
+            active: platform === selectedPlatform,
+          }))}
+        />
+      )}
+    >
+      <IconButton title="Change the render target">
+        <Icons icon={selectedPlatform === 'web' ? 'browser' : 'mobile'} />
+      </IconButton>
+    </WithTooltip>
+  );
+};

package/src/addons/constants.ts

@@ -0,0 +1,10 @@
+export const PARAM_KEY = 'web-player';
+export const ADDON_ID = 'web-player/addon';
+
+export const FLOW_PANEL_ID = `${ADDON_ID}/flow-editor-panel`;
+export const EVENT_PANEL_ID = `${ADDON_ID}/events-panel`;
+export const DOCS_PANEL_ID = `${ADDON_ID}/asset-docs-panel`;
+export const MOBILE_TOOL_ID = `${ADDON_ID}/mobile-tool`;
+export const FLOW_REFRESH_TOOL_ID = `${ADDON_ID}/flow-refresh-tool`;
+export const PLAYER_RENDERER_TOOL_ID = `${ADDON_ID}/player-renderer-tool`;
+export const RENDER_SELECT_TOOL_ID = `${ADDON_ID}/render-select-tool`;

package/src/addons/editor/index.tsx

@@ -0,0 +1,85 @@
+import React from 'react';
+import type { API } from '@storybook/api';
+import { useDarkMode } from 'storybook-dark-mode';
+import { dequal } from 'dequal';
+import Editor from '@monaco-editor/react';
+import { useFlowState, useStateActions } from '../../state';
+
+interface EditorPanelProps {
+  /** if the panel is shown */
+  active: boolean;
+  /** storybook api */
+  api: API;
+}
+
+/** the panel for the flow editor */
+export const EditorPanel = (props: EditorPanelProps) => {
+  const { active } = props;
+  const darkMode = useDarkMode();
+  const flow = useFlowState(props.api.getChannel());
+  const actions = useStateActions(props.api.getChannel());
+  const [editorValue, setEditorValue] = React.useState(
+    flow ? JSON.stringify(flow, null, 2) : '{}'
+  );
+
+  const updateTimerRef = React.useRef<NodeJS.Timeout | undefined>(undefined);
+
+  /** remove any pending saves */
+  function clearPending() {
+    if (updateTimerRef.current) {
+      clearTimeout(updateTimerRef.current);
+      updateTimerRef.current = undefined;
+    }
+  }
+
+  React.useEffect(() => {
+    if (!active) {
+      return;
+    }
+
+    try {
+      if (editorValue) {
+        const parsed = JSON.parse(editorValue);
+        if (dequal(flow, parsed)) {
+          return;
+        }
+      }
+    } catch (e) {}
+
+    setEditorValue(JSON.stringify(flow, null, 2));
+  }, [flow, active]);
+
+  if (!active) {
+    return null;
+  }
+
+  /** handler for changes to the content */
+  const onChange = (val: string | undefined) => {
+    clearPending();
+    setEditorValue(val ?? '');
+
+    try {
+      if (val) {
+        const parsed = JSON.parse(val);
+        if (!dequal(parsed, flow)) {
+          updateTimerRef.current = setTimeout(() => {
+            if (active) {
+              actions.setFlow(parsed);
+            }
+          }, 1000);
+        }
+      }
+    } catch (e) {}
+  };
+
+  return (
+    <div>
+      <Editor
+        theme={darkMode ? 'vs-dark' : 'light'}
+        value={editorValue}
+        language="json"
+        onChange={onChange}
+      />
+    </div>
+  );
+};

package/src/addons/events/events.css

@@ -0,0 +1,7 @@
+
+.header td {
+  width: 200px;
+}
+
+.body td {
+}

package/src/addons/events/index.tsx

@@ -0,0 +1,100 @@
+import React from 'react';
+import { Table, Head, HeadCell, Cell, Body, Row } from '@devtools-ds/table';
+import makeClass from 'clsx';
+import { useDarkMode } from 'storybook-dark-mode';
+import type { API } from '@storybook/api';
+import { useEventState } from '../../state/hooks';
+import type { EventType } from '../../state';
+import styles from './events.css';
+
+interface EventsPanelProps {
+  /** if the panel is shown */
+  active: boolean;
+  /** storybook api */
+  api: API;
+}
+
+/** Pad the cells to give room */
+const ExtraCells = (event: EventType) => {
+  if (event.type === 'log') {
+    return (
+      <>
+        <td>{event.severity}</td>
+        <td>{event.message.map((a) => JSON.stringify(a)).join(' ')}</td>
+      </>
+    );
+  }
+
+  if (event.type === 'dataChange') {
+    return (
+      <>
+        <td>{event.binding}</td>
+        <td>{`${JSON.stringify(event.from)} ➜ ${JSON.stringify(event.to)}`}</td>
+      </>
+    );
+  }
+
+  if (event.type === 'stateChange') {
+    let name: string = event.state;
+
+    if (event.state === 'completed') {
+      name = `${name} (${event.error ? 'error' : 'success'})`;
+    }
+
+    return (
+      <>
+        <td>{name}</td>
+        <td>{event.outcome ?? event.error ?? ''}</td>
+      </>
+    );
+  }
+
+  if (event.type === 'metric') {
+    return (
+      <>
+        <td>{event.metricType}</td>
+        <td>{event.message}</td>
+      </>
+    );
+  }
+
+  return null;
+};
+
+/** The panel to show events */
+export const EventsPanel = (props: EventsPanelProps) => {
+  const events = useEventState(props.api.getChannel());
+  const darkMode = useDarkMode();
+
+  if (!props.active) {
+    return null;
+  }
+
+  return (
+    <div
+      className={makeClass(styles.wrapper, {
+        [styles.dark]: darkMode,
+      })}
+    >
+      <Table colorScheme={darkMode ? 'dark' : 'light'}>
+        <Head className={styles.header}>
+          <Row>
+            <HeadCell>Time</HeadCell>
+            <HeadCell>Type</HeadCell>
+            <HeadCell />
+            <HeadCell />
+          </Row>
+        </Head>
+        <Body className={styles.body}>
+          {events.map((evt) => (
+            <Row key={evt.id}>
+              <Cell>{evt.time}</Cell>
+              <Cell>{evt.type}</Cell>
+              <ExtraCells {...evt} />
+            </Row>
+          ))}
+        </Body>
+      </Table>
+    </div>
+  );
+};

package/src/addons/index.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import addons, { types } from '@storybook/addons';
+import {
+  ADDON_ID,
+  EVENT_PANEL_ID,
+  FLOW_PANEL_ID,
+  FLOW_REFRESH_TOOL_ID,
+  RENDER_SELECT_TOOL_ID,
+} from './constants';
+import { EditorPanel } from './editor';
+import { EventsPanel } from './events';
+import { FlowRefresh } from './refresh';
+import { RenderSelection } from './appetize';
+
+/** register all the storybook addons */
+export function register() {
+  addons.register(ADDON_ID, (api) => {
+    addons.addPanel(EVENT_PANEL_ID, {
+      title: 'Events',
+      render: ({ active, key }) => (
+        <EventsPanel key={key} api={api} active={Boolean(active)} />
+      ),
+    });
+
+    addons.addPanel(FLOW_PANEL_ID, {
+      title: 'Flow',
+      render: ({ active, key }) => (
+        <EditorPanel key={key} api={api} active={Boolean(active)} />
+      ),
+    });
+
+    // Tools show up in the top panel
+
+    addons.add(FLOW_REFRESH_TOOL_ID, {
+      title: 'Refresh Flow',
+      type: types.TOOL,
+      render: () => <FlowRefresh api={api} />,
+    });
+
+    addons.add(RENDER_SELECT_TOOL_ID, {
+      title: 'Render Selection',
+      type: types.TOOL,
+      render: () => <RenderSelection api={api} />,
+    });
+  });
+}

package/src/addons/refresh/index.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import type { API } from '@storybook/api';
+import { IconButton, Icons, Separator } from '@storybook/components';
+import { useStateActions } from '../../state';
+
+interface FlowRefreshProps {
+  /** storybook api */
+  api: API;
+}
+
+/** BUtton to refresh the current player flow */
+export const FlowRefresh = ({ api }: FlowRefreshProps) => {
+  const actions = useStateActions(api.getChannel());
+
+  return (
+    <>
+      <Separator />
+      <IconButton
+        title="Reset the current flow"
+        onClick={() => {
+          actions.resetFlow();
+        }}
+      >
+        <Icons icon="sync" />
+      </IconButton>
+    </>
+  );
+};

package/src/decorator/index.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import type { DecoratorFn } from '@storybook/react';
+import addons from '@storybook/addons';
+import type { PlatformSetType } from '../state/hooks';
+import { subscribe } from '../state/hooks';
+import { WebPlayerPluginContext, PlayerRenderContext } from '../player';
+import type { PlayerParametersType, RenderTarget } from '../types';
+
+/**
+ * A story decorator for rendering player content
+ */
+export const PlayerDecorator: DecoratorFn = (story, ctx) => {
+  const playerParams = ctx.parameters as PlayerParametersType;
+  const [selectedPlatform, setPlatform] =
+    React.useState<RenderTarget['platform']>('web');
+
+  React.useEffect(() => {
+    return subscribe<PlatformSetType>(
+      addons.getChannel(),
+      '@@player/platform/set',
+      (evt) => {
+        setPlatform(evt.platform);
+      }
+    );
+  }, []);
+
+  return (
+    <PlayerRenderContext.Provider
+      value={{
+        platform: selectedPlatform,
+        token:
+          selectedPlatform === 'web'
+            ? undefined
+            : playerParams?.appetizeTokens?.[selectedPlatform],
+        baseUrl: playerParams.appetizeBaseUrl,
+        appetizeVersions: playerParams.appetizeVersions,
+      }}
+    >
+      <WebPlayerPluginContext.Provider
+        value={{ plugins: playerParams.webplayerPlugins }}
+      >
+        {story()}
+      </WebPlayerPluginContext.Provider>
+    </PlayerRenderContext.Provider>
+  );
+};

package/src/index.ts

@@ -0,0 +1,3 @@
+export { register } from './addons';
+export * from './decorator';
+export * from './player';

package/src/player/Appetize.tsx

@@ -0,0 +1,121 @@
+import React from 'react';
+import type { Flow } from '@player-ui/player';
+import { compressToEncodedURIComponent } from 'lz-string';
+
+export interface AppetizeVersions {
+  /** The iOS version to load */
+  ios: string;
+  /** The Android version to load */
+  android: string;
+}
+
+export interface AppetizeProps {
+  /** the platform to load */
+  platform: 'ios' | 'android';
+
+  /** the token for the build */
+  token: string;
+
+  /** the flow to load */
+  flow: Flow;
+
+  /** The versions to use for each platform */
+  osVersions?: AppetizeVersions;
+
+  /** The base URL to use for appetize */
+  baseUrl?: string;
+}
+
+export const AppetizePhones = [
+  // 'iphone4s',
+  // 'iphone5s',
+  // 'iphone6',
+  // 'iphone6plus',
+  // 'iphone6s',
+  // 'iphone6splus',
+  // 'iphone7',
+  // 'iphone7plus',
+  // 'iphone8',
+  // 'iphone8plus',
+  // 'iphonex',
+  'iphonexs',
+  // 'iphonexsmax',
+  // 'iphone11pro',
+  // 'iphone11promax',
+  // 'ipadair',
+  // 'ipadair2'
+] as const;
+
+export type AppetizePhone = typeof AppetizePhones[number];
+
+const DEVICE_HEIGHT: Record<AppetizePhone, number> = {
+  iphonexs: 845,
+};
+
+interface AppetizeParams {
+  /** if the device should auto-start */
+  autoplay: boolean;
+  /** the device type */
+  device: AppetizePhone;
+  /** color */
+  deviceColor: 'black' | 'white';
+
+  /** render scale */
+  scale: number;
+
+  /** The operating system version to use */
+  osVersion: string;
+
+  /** other stuff to pass */
+  params: string;
+}
+
+/** Create the url w/ params */
+export const toAppetizeUrl = (
+  baseUrl: string,
+  key: string,
+  params: AppetizeParams
+) =>
+  `https://${baseUrl}/embed/${key}?${Object.entries(params)
+    .map(([k, v]) => `${encodeURIComponent(k)}=${encodeURIComponent(v)}`)
+    .join('&')}`;
+
+/** A component to render something using appetize */
+export const Appetize = (props: AppetizeProps) => {
+  const device: AppetizePhone = 'iphonexs';
+  const height = DEVICE_HEIGHT[device];
+
+  const defaultVersions: AppetizeVersions = {
+    ios: '13.7',
+    android: '8.1',
+  };
+
+  const {
+    baseUrl = 'appetize.io',
+    token,
+    flow,
+    osVersions = defaultVersions,
+    platform,
+  } = props;
+
+  const osVersion = osVersions[platform];
+
+  return (
+    <iframe
+      title="native app"
+      style={{ height: `${height}px`, border: 'none', width: '100%' }}
+      src={toAppetizeUrl(baseUrl, token, {
+        autoplay: true,
+        device: 'iphonexs',
+        deviceColor: 'black',
+        scale: 100,
+        osVersion,
+        params: encodeURIComponent(
+          JSON.stringify({
+            json: compressToEncodedURIComponent(JSON.stringify(flow)),
+          })
+        ),
+      })}
+    />
+  );
+};

package/src/player/PlayerFlowSummary.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { VStack, Code, Heading, Button, Text } from '@chakra-ui/react';
+
+export type PlayerFlowSummaryProps = {
+  /** Reset the flow */
+  reset: () => void;
+  /** The outcome of the flow */
+  outcome?: string;
+  /** any error */
+  error?: Error;
+};
+
+/** A component to show at the end of a flow */
+export const PlayerFlowSummary = (props: PlayerFlowSummaryProps) => {
+  return (
+    <VStack gap="10">
+      <Heading>Flow Completed {props.error ? 'with Error' : ''}</Heading>
+
+      {props.outcome && (
+        <Code>
+          Outcome: <Text as="strong">{props.outcome}</Text>
+        </Code>
+      )}
+
+      {props.error && (
+        <Code colorScheme="red">
+          <pre>{props.error?.message}</pre>
+        </Code>
+      )}
+
+      <Button variant="solid" onClick={props.reset}>
+        Reset
+      </Button>
+    </VStack>
+  );
+};