feat: custom Testing page

ccontrols · Aug 29, 2020 · c47e0ba · c47e0ba
1 parent 1ad543b
commit c47e0ba
Show file tree

Hide file tree

Showing 19 changed files with 184 additions and 71 deletions.
diff --git a/examples/gatsby/.config/TestingPage.tsx b/examples/gatsby/.config/TestingPage.tsx
@@ -0,0 +1,34 @@
+/* eslint-disable react/display-name */
+import React from 'react';
+import {
+  Playground,
+  PropsTable,
+  Story,
+  Description,
+} from '@component-controls/blocks';
+import { getControlsCount } from '@component-controls/core';
+import { useCurrentStory } from '@component-controls/store';
+import { AllyBlock } from '@component-controls/axe-plugin';
+import { ViewportBlock } from '@component-controls/viewport-plugin';
+
+export const TestingPage = () => {
+  const story = useCurrentStory();
+  const controlsCount = getControlsCount(story?.controls);
+  return (
+    <>
+      <Description />
+      {controlsCount > 0 && (
+        <>
+          <Playground title=".">
+            <Story id="." />
+          </Playground>
+
+          <PropsTable of="." title="Controls" visibility="controls" />
+        </>  
+      )}
+      <AllyBlock title="A11y tests" />
+      <ViewportBlock title="Viewport"/>
+    </>
+  );
+}
+
diff --git a/examples/gatsby/.config/buildtime.js b/examples/gatsby/.config/buildtime.js
@@ -28,7 +28,7 @@ module.exports = {
   pages: {
     story: {
       basePath: 'api/',
-      tabs: [{ route: 'page' }, { route: 'test' }, { route: 'viewport' }],
+      tabs: [{ route: 'page' }, { route: 'test' }],
     },
     blog: {
       basePath: 'blogs/',

diff --git a/examples/gatsby/.config/runtime.tsx b/examples/gatsby/.config/runtime.tsx
@@ -3,8 +3,7 @@ import { jsx, Box, Text } from 'theme-ui';
 import { RunOnlyConfiguration, defaultRunConfig } from "@component-controls/core";
 import { Link } from "@component-controls/components";
 import { OctofaceIcon } from '@primer/octicons-react';
-import { AllyPage } from "@component-controls/axe-plugin";
-import { ViewportPage } from "@component-controls/viewport-plugin";
+import { TestingPage } from "./TestingPage";
 
 const categories = ['Introduction', 'Application','Controls','Blocks', 'Editors', 'Components', 'Plugins']
 
@@ -25,8 +24,7 @@ const config: RunOnlyConfiguration = {
       label: 'API',
       tabs: [
         ...defaultRunConfig.pages.story.tabs,
-        { title: 'Testing', render: () => <AllyPage /> },
-        { title: 'Viewport', render: () => <ViewportPage /> },
+        { title: 'Testing', render: () => <TestingPage /> },
       ],
     },
     tutorial: {

diff --git a/examples/gatsby/package.json b/examples/gatsby/package.json
@@ -15,6 +15,8 @@
   },
   "dependencies": {
     "@component-controls/axe-plugin": "^1.22.1",
+    "@component-controls/blocks": "^1.22.1",
+    "@component-controls/core": "^1.22.1",
     "@component-controls/gatsby-theme-stories": "^1.22.1",
     "@component-controls/viewport-plugin": "^1.22.1",
     "@theme-ui/presets": "^0.4.0-rc.1",

diff --git a/examples/nextjs/.config/TestingPage.tsx b/examples/nextjs/.config/TestingPage.tsx
@@ -0,0 +1,34 @@
+/* eslint-disable react/display-name */
+import React from 'react';
+import {
+  Playground,
+  PropsTable,
+  Story,
+  Description,
+} from '@component-controls/blocks';
+import { getControlsCount } from '@component-controls/core';
+import { useCurrentStory } from '@component-controls/store';
+import { AllyBlock } from '@component-controls/axe-plugin';
+import { ViewportBlock } from '@component-controls/viewport-plugin';
+
+export const TestingPage = () => {
+  const story = useCurrentStory();
+  const controlsCount = getControlsCount(story?.controls);
+  return (
+    <>
+      <Description />
+      {controlsCount > 0 && (
+        <>
+          <Playground title=".">
+            <Story id="." />
+          </Playground>
+
+          <PropsTable of="." title="Controls" visibility="controls" />
+        </>  
+      )}
+      <AllyBlock title="A11y tests" />
+      <ViewportBlock title="Viewport"/>
+    </>
+  );
+}
+
diff --git a/examples/nextjs/.config/buildtime.js b/examples/nextjs/.config/buildtime.js
@@ -25,7 +25,7 @@ module.exports = {
   pages: {
     story: {
       basePath: 'api/',
-      tabs: [{ route: 'page' }, { route: 'test' }, { route: 'viewport' }],
+      tabs: [{ route: 'page' }, { route: 'test' }],
     },
     blog: {
       basePath: 'blogs/',

diff --git a/examples/nextjs/.config/runtime.tsx b/examples/nextjs/.config/runtime.tsx
@@ -3,8 +3,7 @@ import { jsx, Box, Text } from 'theme-ui';
 import { RunOnlyConfiguration, defaultRunConfig } from "@component-controls/core";
 import { Link } from "@component-controls/components";
 import { OctofaceIcon } from '@primer/octicons-react';
-import { AllyPage } from "@component-controls/axe-plugin";
-import { ViewportPage } from "@component-controls/viewport-plugin";
+import { TestingPage } from "./TestingPage";
 
 const categories = ['Introduction', 'Application','Controls','Blocks', 'Editors', 'Components', 'Plugins']
 
@@ -25,8 +24,7 @@ const config: RunOnlyConfiguration = {
       label: 'API',
       tabs: [
         ...defaultRunConfig.pages.story.tabs,
-        { title: 'Testing', render: () => <AllyPage /> },
-        { title: 'Viewport', render: () => <ViewportPage /> },
+        { title: 'Testing', render: () => <TestingPage /> },
       ],
       sideNav: {
         collapseSingle: false,

diff --git a/examples/nextjs/package.json b/examples/nextjs/package.json
@@ -17,6 +17,8 @@
   },
   "dependencies": {
     "@component-controls/axe-plugin": "^1.22.1",
+    "@component-controls/blocks": "^1.22.1",
+    "@component-controls/core": "^1.22.1",
     "@component-controls/nextjs-plugin": "^1.22.1",
     "@component-controls/viewport-plugin": "^1.22.1",
     "@theme-ui/presets": "^0.4.0-rc.1",

diff --git a/examples/starter/.config/TestingPage.tsx b/examples/starter/.config/TestingPage.tsx
@@ -0,0 +1,34 @@
+/* eslint-disable react/display-name */
+import React from 'react';
+import {
+  Playground,
+  PropsTable,
+  Story,
+  Description,
+} from '@component-controls/blocks';
+import { getControlsCount } from '@component-controls/core';
+import { useCurrentStory } from '@component-controls/store';
+import { AllyBlock } from '@component-controls/axe-plugin';
+import { ViewportBlock } from '@component-controls/viewport-plugin';
+
+export const TestingPage = () => {
+  const story = useCurrentStory();
+  const controlsCount = getControlsCount(story?.controls);
+  return (
+    <>
+      <Description />
+      {controlsCount > 0 && (
+        <>
+          <Playground title=".">
+            <Story id="." />
+          </Playground>
+
+          <PropsTable of="." title="Controls" visibility="controls" />
+        </>  
+      )}
+      <AllyBlock title="A11y tests" />
+      <ViewportBlock title="Viewport"/>
+    </>
+  );
+}
+
diff --git a/examples/starter/.config/buildtime.js b/examples/starter/.config/buildtime.js
@@ -19,7 +19,7 @@ module.exports = {
     story: {
       tabs: [
         ...defaultBuildConfig.pages.story.tabs,
-        { route: 'viewport' },
+        { route: 'test' },
       ],
     },
   },

diff --git a/examples/starter/.config/runtime.tsx b/examples/starter/.config/runtime.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { RunOnlyConfiguration, defaultRunConfig } from "@component-controls/core";
-import { ViewportPage } from "@component-controls/viewport-plugin";
+import { TestingPage } from "./TestingPage";
 
 const config: RunOnlyConfiguration = {
   siteTitle: `awLib`,
@@ -10,7 +10,7 @@ const config: RunOnlyConfiguration = {
     story: {
       tabs: [
         ...defaultRunConfig.pages.story.tabs,
-        { title: 'Viewport', render: () => <ViewportPage /> },
+        { title: 'Testing', render: () => <TestingPage /> },
       ],
     },
   },

diff --git a/examples/starter/package.json b/examples/starter/package.json
@@ -17,8 +17,12 @@
     "url": "https://github.com/atanasster/gatsby-controls-starter.git"
   },
   "dependencies": {
+    "@component-controls/axe-plugin": "^1.22.1",
+    "@component-controls/blocks": "^1.22.1",
+    "@component-controls/core": "^1.22.1",
     "@component-controls/gatsby-theme-stories": "^1.22.1",
     "@component-controls/nextjs-plugin": "^1.22.1",
+    "@component-controls/viewport-plugin": "^1.22.1",
     "emotion": "^10.0.27",
     "emotion-server": "^10.0.27",
     "gatsby": "^2.23.11",

diff --git a/examples/storybook-6-no-docs/.storybook/main.js b/examples/storybook-6-no-docs/.storybook/main.js
@@ -8,7 +8,6 @@ module.exports = {
       pages: [
         require.resolve('@component-controls/storybook/full-page'),
         require.resolve('./testing-page.js'),
-        require.resolve('./viewport-page.js'),
       ],
       webpack: ['instrument',
       {

diff --git a/examples/storybook-6-no-docs/.storybook/testing-page.js b/examples/storybook-6-no-docs/.storybook/testing-page.js
@@ -1,15 +1,45 @@
 /* eslint-disable react/display-name */
 import React from 'react';
-import { AllyPage } from '@component-controls/axe-plugin';
+import {
+  Playground,
+  PropsTable,
+  Story,
+  Description,
+} from '@component-controls/blocks';
+import { getControlsCount } from '@component-controls/core';
+import { useCurrentStory } from '@component-controls/store';
+import { AllyBlock } from '@component-controls/axe-plugin';
+import { ViewportBlock } from '@component-controls/viewport-plugin';
 import { DocsContainer } from '@component-controls/storybook/DocsContainer';
 
+const TestingPage = () => {
+  const story = useCurrentStory();
+  const controlsCount = getControlsCount(story?.controls);
+  return (
+    <>
+      <Description />
+      {controlsCount > 0 && (
+        <>
+          <Playground title=".">
+            <Story id="." />
+          </Playground>
+
+          <PropsTable of="." title="Controls" visibility="controls" />
+        </>  
+      )}
+      <AllyBlock title="A11y tests" />
+      <ViewportBlock title="Viewport"/>
+    </>  
+  );
+}
+
 export default {
   key: 'test',
   title: 'Testing',
   render: ({ active }) => {
     return (
       <DocsContainer active={active}>
-        <AllyPage />
+        <TestingPage />
       </DocsContainer>
     );
   },

diff --git a/examples/storybook-6-no-docs/.storybook/viewport-page.js b/examples/storybook-6-no-docs/.storybook/viewport-page.js
diff --git a/examples/storybook-6/.storybook/main.js b/examples/storybook-6/.storybook/main.js
@@ -26,7 +26,6 @@ module.exports = {
         pages: [
           require.resolve('@component-controls/storybook/full-page'),
           require.resolve('./testing-page'),
-          require.resolve('./viewport-page'),
         ],
         propsPanel: true,
         storySourcePanel: true,

diff --git a/examples/storybook-6/.storybook/testing-page.js b/examples/storybook-6/.storybook/testing-page.js
@@ -1,15 +1,45 @@
 /* eslint-disable react/display-name */
 import React from 'react';
-import { AllyPage } from '@component-controls/axe-plugin';
+import {
+  Playground,
+  PropsTable,
+  Story,
+  Description,
+} from '@component-controls/blocks';
+import { getControlsCount } from '@component-controls/core';
+import { useCurrentStory } from '@component-controls/store';
+import { AllyBlock } from '@component-controls/axe-plugin';
+import { ViewportBlock } from '@component-controls/viewport-plugin';
 import { DocsContainer } from '@component-controls/storybook/DocsContainer';
 
+const TestingPage = () => {
+  const story = useCurrentStory();
+  const controlsCount = getControlsCount(story?.controls);
+  return (
+    <>
+      <Description />
+      {controlsCount > 0 && (
+        <>
+          <Playground title=".">
+            <Story id="." />
+          </Playground>
+
+          <PropsTable of="." title="Controls" visibility="controls" />
+        </>  
+      )}
+      <AllyBlock title="A11y tests" />
+      <ViewportBlock title="Viewport"/>
+    </>  
+  );
+}
+
 export default {
   key: 'test',
   title: 'Testing',
   render: ({ active }) => {
     return (
       <DocsContainer active={active}>
-        <AllyPage />
+        <TestingPage />
       </DocsContainer>
     );
   },

diff --git a/examples/storybook-6/.storybook/viewport-page.js b/examples/storybook-6/.storybook/viewport-page.js
diff --git a/plugins/axe-plugin/src/AllyPage/AllyPage.tsx b/plugins/axe-plugin/src/AllyPage/AllyPage.tsx
@@ -1,30 +1,11 @@
 import React, { FC } from 'react';
-import {
-  Playground,
-  PropsTable,
-  Story,
-  Description,
-} from '@component-controls/blocks';
-import { getControlsCount } from '@component-controls/core';
-import { useCurrentStory } from '@component-controls/store';
-
+import { Description } from '@component-controls/blocks';
 import { AllyBlock } from '../AllyBlock';
 
 export const AllyPage: FC = () => {
-  const story = useCurrentStory();
-  const controlsCount = getControlsCount(story?.controls);
   return (
     <>
       <Description />
-      {controlsCount > 0 && (
-        <>
-          <Playground title=".">
-            <Story id="." />
-          </Playground>
-
-          <PropsTable of="." title="Controls" visibility="controls" />
-        </>
-      )}
       <AllyBlock title="A11y tests" />
     </>
   );