fix: blocks clean up

ccontrols · Mar 31, 2020 · 7000584 · 7000584
1 parent ef3a2f3
commit 7000584
Show file tree

Hide file tree

Showing 11 changed files with 49 additions and 43 deletions.
diff --git a/ui/blocks/src/Playground/Playground.stories.tsx b/ui/blocks/src/Playground/Playground.stories.tsx
@@ -15,6 +15,19 @@ export const overview = () => (
   </MockContext>
 );
 
+export const disableZoomPan = () => (
+  <MockContext storyId="blocks-core-story-plain--controls">
+    <Playground
+      transform={{
+        options: {
+          disabled: true,
+        },
+      }}
+    >
+      <Story id="." />
+    </Playground>
+  </MockContext>
+);
 export const multiStories = () => (
   <MockContext storyId="id-of-story">
     <Playground id=".">

diff --git a/ui/blocks/src/Playground/Playground.tsx b/ui/blocks/src/Playground/Playground.tsx
@@ -53,19 +53,20 @@ export interface PlaygroundTransformOptions {
   doubleClick?: DoubleClickOptions;
   wheel?: WheelOptions;
 }
-export type PlaygroundProps = { transform: PlaygroundTransformOptions } & Omit<
-  ActionContainerProps,
-  'paddingTop'
->;
+export interface PlaygroundOwnProps {
+  transform?: PlaygroundTransformOptions;
+}
+export type PlaygroundProps = PlaygroundOwnProps &
+  Omit<ActionContainerProps, 'paddingTop'>;
 
 export const Playground: FC<PlaygroundProps> = ({
   transform,
-  actions,
+  actions = [],
   children,
 }) => {
   const childStories = <>{children}</>;
-
-  return (
+  const zoomEnabled = !transform?.options?.disabled;
+  return zoomEnabled ? (
     <>
       <Global
         styles={css`
@@ -77,14 +78,15 @@ export const Playground: FC<PlaygroundProps> = ({
       />
       <TransformWrapper {...transform}>
         {({ zoomIn, zoomOut, resetTransform }: any) => {
-          const actionsItems = [
+          const zoomActions = [
             {
               title: (
                 <Button onClick={resetTransform} aria-label="reset zoom">
                   <Octicon icon={Sync} />
                 </Button>
               ),
               id: 'zoomreset',
+              group: 'zoom',
             },
             {
               title: (
@@ -93,6 +95,7 @@ export const Playground: FC<PlaygroundProps> = ({
                 </Button>
               ),
               id: 'zoomout',
+              group: 'zoom',
             },
             {
               title: (
@@ -106,10 +109,12 @@ export const Playground: FC<PlaygroundProps> = ({
                 </Button>
               ),
               id: 'zoomin',
+              group: 'zoom',
             },
-
-            ...(Array.isArray(actions) ? [...actions] : []),
           ];
+          const actionsItems = zoomEnabled
+            ? [...zoomActions, ...actions]
+            : actions;
           return (
             <ActionContainer actions={actionsItems}>
               <TransformComponent>{childStories}</TransformComponent>
@@ -118,6 +123,8 @@ export const Playground: FC<PlaygroundProps> = ({
         }}
       </TransformWrapper>
     </>
+  ) : (
+    childStories
   );
 };
 

diff --git a/ui/blocks/src/PropsTable/PropsTable.tsx b/ui/blocks/src/PropsTable/PropsTable.tsx
@@ -133,7 +133,7 @@ export const PropsTable: FC<PropsTableProps> = ({
           {
             Header: 'Default',
             accessor: 'prop.defaultValue',
-            width: '20%',
+            width: '40%',
             Cell: ({ row: { original } }: any) => {
               if (!original) {
                 return null;

diff --git a/ui/blocks/src/Stories/Stories.tsx b/ui/blocks/src/Stories/Stories.tsx
@@ -25,7 +25,15 @@ export const Stories: FC<StoriesProps> = props => (
       return (
         <div>
           {stories.map((story: Story) => (
-            <Playground zoomPanEnabled={false} key={story.id} {...rest}>
+            <Playground
+              transform={{
+                options: {
+                  disabled: true,
+                },
+              }}
+              key={story.id}
+              {...rest}
+            >
               <StoryComponent id={story.id} title="." collapsible={false} />
             </Playground>
           ))}

diff --git a/ui/blocks/src/StorySource/StorySource.tsx b/ui/blocks/src/StorySource/StorySource.tsx
@@ -120,8 +120,8 @@ export const StorySource: React.FC<StorySourceProps> = (
           dark={dark}
           {...rest}
           renderFn={(
-            { className, style, tokens, getLineProps, getTokenProps },
-            { theme },
+            { className, style, tokens, getLineProps, getTokenProps }: any,
+            { theme }: any,
           ) => {
             if (tags) {
               tags.forEach((tag, index) => {
@@ -137,11 +137,11 @@ export const StorySource: React.FC<StorySourceProps> = (
                 className={`${className}`}
                 style={{ ...style, padding: '0 10px 10px', margin: 0 }}
               >
-                {tokens.map((line, i: number) => (
+                {tokens.map((line: any, i: number) => (
                   <div {...getLineProps({ line, key: i })}>
                     {(() => {
                       let column = 0;
-                      return line.map((token, key) => {
+                      return line.map((token: any, key: string) => {
                         const tokenTrim = token.content.trim();
                         const param = tags
                           ? tags.find(tag => {
@@ -165,7 +165,7 @@ export const StorySource: React.FC<StorySourceProps> = (
                             key,
                           }).children.split(/(\s+)/);
 
-                          return splitToken.map(s =>
+                          return splitToken.map((s: string) =>
                             s.trim().length ? (
                               <span
                                 {...getTokenProps({ token, key })}

diff --git a/ui/blocks/src/context/components/ComponentsContext.tsx b/ui/blocks/src/context/components/ComponentsContext.tsx
@@ -43,7 +43,6 @@ export const useComponentsContext = ({
     store && store.stories && store.stories[currentId];
   const kind =
     store && story && story.kind ? store.kinds[story.kind] : undefined;
-
   let cmp: any;
   if (of === CURRENT_STORY) {
     cmp = story && story.component ? story.component : kind?.component;
@@ -66,6 +65,7 @@ export const useComponentsContext = ({
       }, {})
     : undefined;
   const componentName = getComponentName(cmp);
+
   const components = componentName &&
   kind && { [componentName]: kind.components[componentName] }
     ? { [componentName]: store?.components[kind.components[componentName]] }

diff --git a/ui/blocks/src/test/MockContext.tsx b/ui/blocks/src/test/MockContext.tsx
@@ -10,7 +10,7 @@ export interface MockContexProps {
 
 export const MockContext: React.FC<MockContexProps> = ({
   children,
-  storyId = 'story',
+  storyId = 'id-of-story',
 }) => {
   return (
     <BlockContextProvider currentId={storyId} mockStore={storyStore}>

diff --git a/ui/components/src/ActionBar/ActionBar.tsx b/ui/components/src/ActionBar/ActionBar.tsx
@@ -111,6 +111,7 @@ export const ActionBar: FunctionComponent<ActionBarProps> = ({
     <Box
       sx={{
         position: 'relative',
+        zIndex: 1,
       }}
     >
       <Flex
@@ -134,7 +135,7 @@ export const ActionBar: FunctionComponent<ActionBarProps> = ({
                 key={`${typeof title === 'string' ? title : 'item'}_${index}`}
                 sx={{
                   mt: 1,
-                  ml: nextGroup != group || group === undefined ? 2 : 0,
+                  ml: nextGroup != group || group === undefined ? 2 : 1,
                   fontSize: 1,
                   a: ActionColors({ theme, disabled }),
                   button: ActionColors({ theme, disabled }),

diff --git a/ui/components/src/FlexContainer/FlexContainer.tsx b/ui/components/src/FlexContainer/FlexContainer.tsx
diff --git a/ui/components/src/FlexContainer/index.ts b/ui/components/src/FlexContainer/index.ts
diff --git a/ui/components/src/index.ts b/ui/components/src/index.ts
@@ -3,7 +3,6 @@ export * from './ActionContainer';
 export * from './BlockContainer';
 export * from './Collapsible';
 export * from './ExternalLink';
-export * from './FlexContainer';
 export * from './Markdown';
 export * from './Popover';
 export * from './Source';