feat: add Playground andStories initial

examples/storybook-5/.storybook/preview.js

@@ -1,8 +1,8 @@
 import React from 'react'
 import { addDecorator, addParameters } from '@storybook/react';
-import { Title as SBTitle, Description as SBDescription, Story as SBStory, Stories, Props } from '@storybook/addon-docs/blocks';
+import { Title as SBTitle, Description as SBDescription, Story as SBStory, Stories as SBStories, Props } from '@storybook/addon-docs/blocks';
 import { DependenciesTable } from 'storybook-addon-deps/blocks';
-import { ControlsTable, ThemeProvider, Title, Subtitle, Story,Description, StorySource, ComponentSource, PropsTable, BlockContextProvider } from '@component-controls/storybook';
+import { ControlsTable, ThemeProvider, Title, Subtitle, Story, Stories, Description, StorySource, Playground, ComponentSource, PropsTable, BlockContextProvider } from '@component-controls/storybook';
 
 addDecorator((story, ctx ) => {
   return (
@@ -33,8 +33,12 @@ export const DocsPage = ({
       <ControlsTable id="." />
       <PropsTable of="." />
       <Props slot={propsSlot} />
+      <Playground>
+        <Story id="." />
+      </Playground>
       <DependenciesTable titleDependencies='Dependencies' titleDependents='Dependents' />
-      <Stories slot={storiesSlot} />
+      <Stories />
+      <SBStories slot={storiesSlot} />
     </BlockContextProvider>  
   );
 };

integrations/storybook/src/blocks/Playground.tsx

@@ -0,0 +1,16 @@
+import React, { FC } from 'react';
+import {
+  Playground as BlockPlayground,
+  PlaygroundProps,
+} from '@component-controls/blocks';
+import { ThemeProvider } from '../shared/ThemeProvider';
+
+export { PlaygroundProps };
+
+export const Playground: FC<PlaygroundProps> = props => {
+  return (
+    <ThemeProvider>
+      <BlockPlayground {...props} />
+    </ThemeProvider>
+  );
+};

integrations/storybook/src/blocks/Stories.tsx

@@ -0,0 +1,16 @@
+import React, { FC } from 'react';
+import {
+  Stories as BlockStories,
+  StoriesProps,
+} from '@component-controls/blocks';
+import { ThemeProvider } from '../shared/ThemeProvider';
+
+export { StoriesProps };
+
+export const Stories: FC<StoriesProps> = props => {
+  return (
+    <ThemeProvider>
+      <BlockStories {...props} />
+    </ThemeProvider>
+  );
+};

integrations/storybook/src/blocks/index.ts

@@ -2,7 +2,9 @@ export * from './BlockContext';
 export * from './ComponentSource';
 export * from './ControlsTable';
 export * from './Description';
+export * from './Playground';
 export * from './PropsTable';
+export * from './Stories';
 export * from './Story';
 export * from './StorySource';
 export * from './Subtitle';

ui/blocks/package.json

@@ -38,10 +38,12 @@
     "copy-to-clipboard": "^3.2.1",
     "global": "^4.3.2",
     "js-string-escape": "^1.0.1",
+    "@primer/octicons-react":"^9.6.0",
     "qs": "^6.9.1",
     "react": "^16.8.3",
     "react-dom": "^16.8.3",
     "react-table": "^7.0.0",
+    "react-zoom-pan-pinch": "^1.6.1",
     "theme-ui": "^0.3.1"
   },
   "devDependencies": {
@@ -55,6 +57,7 @@
     "jest": "^24.9.0"
   },
   "peerDependencies": {
+    "@primer/octicons-react": "*",
     "react": "*",
     "react-dom": "*",
     "react-table": "*",

ui/blocks/src/Playground/index.ts

@@ -0,0 +1 @@
+export * from './plain';

ui/blocks/src/Playground/plain/Playground.tsx

@@ -0,0 +1,117 @@
+import React, { FC } from 'react';
+import Octicon, { Plus, Dash, Sync } from '@primer/octicons-react';
+import { Button } from 'theme-ui';
+import { TransformComponent, TransformWrapper } from 'react-zoom-pan-pinch';
+import {
+  ActionContainer,
+  ActionContainerProps,
+} from '@component-controls/components';
+
+export interface PlaygroundZoomProps {
+  limitToBounds?: true;
+  panningEnabled?: true;
+  transformEnabled?: true;
+  pinchEnabled?: true;
+  limitToWrapper?: false;
+  disabled?: false;
+  dbClickEnabled?: true;
+  lockAxisX?: false;
+  lockAxisY?: false;
+  velocityEqualToMove?: true;
+  enableWheel?: true;
+  enableTouchPadPinch?: true;
+  enableVelocity?: true;
+  limitsOnWheel?: false;
+}
+
+export type PlaygroundProps = PlaygroundZoomProps &
+  Omit<ActionContainerProps, 'paddingTop'>;
+export const Playground: FC<PlaygroundProps> = ({
+  limitToBounds = true,
+  panningEnabled = true,
+  transformEnabled = true,
+  pinchEnabled = true,
+  limitToWrapper = false,
+  disabled = false,
+  dbClickEnabled = true,
+  lockAxisX = false,
+  lockAxisY = false,
+  velocityEqualToMove = true,
+  enableWheel = true,
+  enableTouchPadPinch = true,
+  enableVelocity = true,
+  limitsOnWheel = false,
+  actions,
+  children,
+}) => {
+  return (
+    <div style={{ paddingTop: '20px' }}>
+      <TransformWrapper
+        options={{
+          limitToBounds,
+          transformEnabled,
+          disabled,
+          limitToWrapper,
+        }}
+        pan={{
+          disabled: !panningEnabled,
+          lockAxisX,
+          lockAxisY,
+          velocityEqualToMove,
+          velocity: enableVelocity,
+        }}
+        pinch={{ disabled: !pinchEnabled }}
+        doubleClick={{ disabled: !dbClickEnabled }}
+        wheel={{
+          wheelEnabled: enableWheel,
+          touchPadEnabled: enableTouchPadPinch,
+          limitsOnWheel,
+        }}
+      >
+        {({ zoomIn, zoomOut, resetTransform, ...rest }: any) => {
+          const actionsItems = [
+            {
+              title: (
+                <Button onClick={resetTransform} aria-label="reset zoom">
+                  <Octicon icon={Sync} />
+                </Button>
+              ),
+              id: 'zoomreset',
+            },
+            {
+              title: (
+                <Button onClick={zoomOut} aria-label="zoom out">
+                  <Octicon icon={Dash} />
+                </Button>
+              ),
+              id: 'zoomout',
+            },
+            {
+              title: (
+                <Button
+                  onClick={e => {
+                    console.log(rest);
+                    zoomIn(e);
+                  }}
+                  aria-label="zoom in"
+                >
+                  <Octicon icon={Plus} />
+                </Button>
+              ),
+              id: 'zoomin',
+            },
+
+            ...(Array.isArray(actions) ? [...actions] : []),
+          ];
+          return (
+            <ActionContainer actions={actionsItems}>
+              <div>
+                <TransformComponent>{children}</TransformComponent>
+              </div>
+            </ActionContainer>
+          );
+        }}
+      </TransformWrapper>
+    </div>
+  );
+};

ui/blocks/src/Playground/plain/index.ts

@@ -0,0 +1 @@
+export * from './Playground';

ui/blocks/src/Stories/index.ts

@@ -0,0 +1 @@
+export * from './plain';

ui/blocks/src/Stories/plain/Stories.tsx

@@ -0,0 +1,31 @@
+import React, { FC } from 'react';
+import { useStoryContext, StoryInputProps } from '../../context';
+import { Playground, PlaygroundProps } from '../../Playground';
+import { Story } from '../../Story';
+
+export type StoriesProps = StoryInputProps & PlaygroundProps;
+
+export const Stories: FC<StoriesProps> = ({ id, name, ...rest }) => {
+  const { story: selected, kind, store } = useStoryContext({
+    id,
+    name,
+  });
+  const stories =
+    store &&
+    kind?.stories
+      ?.map(id => store.stories[id])
+      .filter(story => !selected || selected.id !== story.id);
+  if (!stories || !stories.length) {
+    return null;
+  }
+  console.log(stories);
+  return (
+    <div>
+      {stories.map(story => (
+        <Playground key={story.id} {...rest}>
+          <Story id={story.id} />
+        </Playground>
+      ))}
+    </div>
+  );
+};

ui/blocks/src/Stories/plain/index.ts

@@ -0,0 +1 @@
+export * from './Stories';

ui/blocks/src/Story/Story.tsx

@@ -9,6 +9,8 @@ export const Story: FC<StoryProps> = ({ id, name, ...rest }) => {
     name,
   });
   return story && story.renderFn ? (
-    <div {...rest}>{createElement(story.renderFn)}</div>
+    <div id={story.id} {...rest}>
+      {createElement(story.renderFn)}
+    </div>
   ) : null;
 };

ui/blocks/src/context/story/StoryContext.tsx

@@ -2,6 +2,7 @@ import React, { FC } from 'react';
 import storyStore from '@component-controls/loader/story-store-data';
 import {
   Story,
+  StoriesStore,
   StoriesKind,
   StoryComponent,
   SetControlValueFn,
@@ -37,6 +38,12 @@ export interface StoryContextProps {
    * current story's/document's component
    */
   component?: StoryComponent;
+
+  /**
+   * access the the fil story store
+   */
+  store?: StoriesStore;
+
   /**
    * generic function to update the values of component controls.
    */
@@ -93,6 +100,7 @@ export const useStoryContext = ({
     component,
     clickControl,
     setControlValue,
+    store,
   };
 };
 

ui/blocks/src/index.ts

@@ -1,10 +1,12 @@
 export * from './context';
+export * from './ComponentSource';
 export * from './ControlsTable';
 export * from './Description';
-export * from './StorySource';
-export * from './ComponentSource';
+export * from './Playground';
 export * from './PropsTable';
+export * from './Stories';
 export * from './Story';
+export * from './StorySource';
 export * from './Subtitle';
 export * from './Title';
 export * from './notifications';

yarn.lock

@@ -2255,11 +2255,6 @@
   resolved "https://registry.yarnpkg.com/@mdx-js/util/-/util-1.5.7.tgz#335358feb2d511bfdb3aa46e31752a10aa51270a"
   integrity sha512-SV+V8A+Y33pmVT/LWk/2y51ixIyA/QH1XL+nrWAhoqre1rFtxOEZ4jr0W+bKZpeahOvkn/BQTheK+dRty9o/ig==
 
-"@microsoft/tsdoc@^0.12.18":
-  version "0.12.18"
-  resolved "https://registry.yarnpkg.com/@microsoft/tsdoc/-/tsdoc-0.12.18.tgz#7e7aadc7009e57a25fbf6c9f48b44c2fe30ada88"
-  integrity sha512-3rypGnknRaPGlU4HFx2MorC4zmhoGJx773cVbDfcUgc6zI/PFfFaiWmeRR6JiVyKRrLnU/ZH0pc/6jePzy/QyQ==
-
 "@mrmlnc/readdir-enhanced@^2.2.1":
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz#524af240d1a360527b730475ecfa1344aa540dde"
@@ -8465,7 +8460,7 @@ [email protected], gzip-size@^5.1.1:
     duplexer "^0.1.1"
     pify "^4.0.1"
 
-handlebars@^4.4.0, handlebars@^4.7.2, handlebars@^4.7.3:
+handlebars@^4.4.0, handlebars@^4.7.2:
   version "4.7.3"
   resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-4.7.3.tgz#8ece2797826886cf8082d1726ff21d2a022550ee"
   integrity sha512-SRGwSYuNfx8DwHD/6InAPzD6RgeruWLT+B8e8a7gGs8FWgHzlExpTFMEq2IA6QpAfOClpKHy6+8IqTjeBCu6Kg==
@@ -13672,6 +13667,11 @@ react-virtualized@^9.19.1:
     prop-types "^15.6.0"
     react-lifecycles-compat "^3.0.4"
 
+react-zoom-pan-pinch@^1.6.1:
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/react-zoom-pan-pinch/-/react-zoom-pan-pinch-1.6.1.tgz#da16267c258ab37e8ebcdc7c252794a9633e91ec"
+  integrity sha512-J2eM0gZ04XiUWvmKZrOhSAB2zjyoK7kw2POIeN1X0yTTlmp6HPGV0zYfjnlkhgt8nQwpvXAbsF/oAnkuiwk1kA==
+
 react@^16.12.0, react@^16.3.0, react@^16.8.3, react@^16.9.0:
   version "16.13.0"
   resolved "https://registry.yarnpkg.com/react/-/react-16.13.0.tgz#d046eabcdf64e457bbeed1e792e235e1b9934cf7"
@@ -16029,14 +16029,6 @@ [email protected]:
     lunr "^2.3.8"
     underscore "^1.9.1"
 
-typedoc-plugin-markdown@^2.2.17:
-  version "2.2.17"
-  resolved "https://registry.yarnpkg.com/typedoc-plugin-markdown/-/typedoc-plugin-markdown-2.2.17.tgz#aaef7420e8268170e62c764f43740e10f842548d"
-  integrity sha512-eE6cTeqsZIbjur6RG91Lhx1vTwjR49OHwVPRlmsxY3dthS4FNRL8sHxT5Y9pkosBwv1kSmNGQEPHjMYy1Ag6DQ==
-  dependencies:
-    fs-extra "^8.1.0"
-    handlebars "^4.7.3"
-
 typedoc@^0.17.0-3:
   version "0.17.0-3"
   resolved "https://registry.yarnpkg.com/typedoc/-/typedoc-0.17.0-3.tgz#91996e77427ff3a208ab76595a927ee11b75e9e8"