feat: add axe-plugin stories

examples/storybook-6-no-docs/.storybook/main.js

@@ -29,6 +29,7 @@ module.exports = {
     '../../../ui/editors/src/**/*.stories.(js|tsx|mdx)',
     '../../../ui/components/src/**/*.stories.(js|tsx|mdx)',
     '../../../ui/blocks/src/**/*.stories.(js|tsx|mdx)',
+    '../../../plugins/axe-plugin/src/stories/**/*.stories.(js|tsx|mdx)',
     '../../stories/src/**/*.stories.(js|tsx|mdx)',
     '../stories/**/*.stories.(js|tsx|mdx)',
   ],

examples/storybook-6-no-docs/.storybook/preview.js

@@ -5,7 +5,7 @@ import { ThemeProvider } from '@component-controls/storybook';
 addDecorator(story => (
   <ThemeProvider>{story()}</ThemeProvider>
 ));
-const categories = ['Storybook', 'Blocks', 'Editors', 'Components']
+const categories = ['Introduction', 'Controls','Blocks', 'Editors', 'Components', 'Plugins']
 addParameters({
   dependencies: { hideEmpty: true },
   options: {

examples/storybook-6/.storybook/main.js

@@ -6,6 +6,7 @@ module.exports = {
     '../../../ui/editors/src/**/*.stories.(js|tsx|mdx)',
     '../../../ui/components/src/**/*.stories.(js|tsx|mdx)',
     '../../../ui/blocks/src/**/*.stories.(js|tsx|mdx)',
+    '../../../plugins/axe-plugin/src/stories/**/*.stories.(js|tsx|mdx)',
     '../../stories/src/**/*.stories.(js|tsx|mdx)',
     '../stories/**/*.stories.(js|tsx|mdx)',
   ],

examples/storybook-6/.storybook/preview.js

@@ -5,7 +5,7 @@ import { ThemeProvider } from '@component-controls/storybook';
 addDecorator(story => (
   <ThemeProvider>{story()}</ThemeProvider>
 ));
-const categories = ['Storybook', 'Blocks', 'Editors', 'Components']
+const categories = ['Introduction', 'Controls','Blocks', 'Editors', 'Components', 'Plugins']
 addParameters({
   dependencies: { hideEmpty: true },
   options: {

lerna.json

@@ -4,6 +4,7 @@
     "core/**/*",
     "misc/**/*",
     "integrations/**/*",
+    "plugins/**/*",
     "props-info/**/*",
     "ui/**/*"
   ],

package.json

@@ -92,6 +92,7 @@
       "core/*",
       "integrations/*",
       "misc/*",
+      "plugins/*",
       "props-info/*",
       "ui/*",
       "examples/*"

misc/axe-plugin/README.md → plugins/axe-plugin/README.md

@@ -13,7 +13,7 @@
 
 # In action
 
-[Example site](https://components-storybook-6-no-docs.netlify.app)
+[Example site](https://components-storybook-6-no-docs.netlify.app/?path=/test/components-actioncontainer--overview)
 
 # Overview
 
@@ -25,10 +25,9 @@ Some of the design goals:
 -   Provide a dashboard view to quickly see the errors and tests for the compnnt.
 -   Ability to select and outline the sub-elements generating the errors.
 -   Ability to see details from the errors and passed rules.
--   Ability to review the rendered story right next to the testing panels.
 
 <p align="center">
-  <img src="https://github.com/ccontrols/component-controls/raw/master/misc/axe-plugin/images/axe-ally-testing.gif" alt="ally tests with axe plugin" width="738">
+  <img src="https://github.com/ccontrols/component-controls/raw/master/plugins/axe-plugin/images/axe-ally-testing.gif" alt="ally tests with axe plugin" width="738">
 </p>
 
 # Getting Started

misc/axe-plugin/package.json → plugins/axe-plugin/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@component-controls/axe-plugin",
   "version": "1.1.0",
-  "description": "Axe ally plugin for component-contols",
+  "description": "Axe ally testing plugin",
   "keywords": [
     "addon",
     "storybook"
@@ -31,7 +31,7 @@
   "repository": {
     "type": "git",
     "url": "https://github.com/ccontrols/component-controls.git",
-    "directory": "misc/axe-plugin"
+    "directory": "plugins/axe-plugin"
   },
   "license": "MIT",
   "dependencies": {

misc/axe-plugin/rollup.config.js → plugins/axe-plugin/rollup.config.js

@@ -1,5 +1,5 @@
 import { config } from '../../rollup-config';
 
 export default config({
-  input: ['./src/index.ts'],
+  input: ['./src/index.tsx'],
 });

misc/axe-plugin/src/components/BaseAllyBlock.tsx → plugins/axe-plugin/src/components/BaseAllyBlock.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable react/display-name */
-import React, { FC, useState, useEffect, useRef, useMemo } from 'react';
+import React, { FC, useState, useRef, useEffect, useMemo } from 'react';
 import {
   run as runAxe,
   configure as configureAxe,
@@ -43,18 +43,15 @@ export const BaseAllyBlock: FC<BaseAllyBlockProps> = ({
     passes: [],
     incomplete: [],
   });
-  useEffect(() => {
+  const runTests = async () => {
     resetTabCounter();
     reset();
     configureAxe(options);
     const el = storyRef.current?.firstChild;
-    runAxe(el ?? undefined)
-      .then((r: AxeResults) => {
-        setResults(r);
-      })
-      .catch((err: any) => {
-        console.error('Axe ally testing:', err.message);
-      });
+    setResults(await runAxe(el ?? undefined));
+  };
+  useEffect(() => {
+    runTests();
   }, [storyId, storyRef.current]);
   const actions: ActionItems = useMemo(() => {
     const actions: ActionItems = [
@@ -96,6 +93,8 @@ export const BaseAllyBlock: FC<BaseAllyBlockProps> = ({
       panel: <ResultsTable results={results.incomplete} />,
     });
   }
+  // console.log(results);
+
   return (
     <SelectionContextProvider results={results}>
       <PanelContainer actions={actions} openTab="dashboard" visibleTabs={true}>

plugins/axe-plugin/src/stories/AllyBlock.stories.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { AxeAllyBlock } from '../index';
+import { MockContext } from '@component-controls/blocks';
+export default {
+  title: 'Plugins/AxeAllyBlock',
+  component: AxeAllyBlock,
+};
+
+export const overview = () => (
+  <MockContext storyId="blocks-core-story-plain--controls">
+    <AxeAllyBlock id="." />
+  </MockContext>
+);

ui/blocks/src/Story/Story.tsx

@@ -12,6 +12,9 @@ export type StoryProps = StoryBlockContainerProps & {
   ref?: React.Ref<HTMLDivElement>;
 };
 
+/**
+ * block component to render story function with decorators
+ */
 export const Story: FC<StoryProps> = forwardRef(
   (props: StoryProps, ref: React.Ref<HTMLDivElement>) => (
     <StoryBlockContainer {...props}>

ui/blocks/src/index.ts

@@ -15,4 +15,5 @@ export * from './StorySource';
 export * from './Subtitle';
 export * from './Title';
 export * from './notifications';
+export * from './test';
 export * from './utils';

ui/blocks/src/test/MDXStory.tsx

@@ -2,7 +2,6 @@
 
 import React from 'react';
 /* @jsx mdx */
-import { mdx } from '@mdx-js/react';
 
 const layoutProps = {};
 

ui/blocks/src/test/index.ts

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