feat: addon-stats

core/instrument/src/babel/extract-component.ts

@@ -152,7 +152,10 @@ export const extractStoreComponent = async (
   if (store.doc) {
     const doc: Document = store.doc;
     if (doc.componentsLookup) {
-      const componentNames = Object.keys(doc.componentsLookup);
+      const componentNames = Object.keys({
+        ...doc.componentsLookup,
+        [doc.component as string]: doc.component,
+      });
       if (componentNames) {
         for (const componentName of componentNames) {
           const { component, componentPackage } = await extractComponent(

examples/gatsby/.config/buildtime.js

@@ -18,7 +18,9 @@ module.exports = {
     '../../stories/src/stories_native/*.stories.@(js|jsx|tsx|mdx)',
     '../../stories/src/mdx-stories/*.mdx',
     '../../../ui/app/src/**/*.stories.@(js|jsx|tsx|mdx)',
+    '../../../ui/components/src/**/*.mdx',
     '../../../ui/components/src/**/*.stories.@(js|jsx|tsx|mdx)',
+    '../../../ui/blocks/src/**/*.mdx',
     '../../../ui/blocks/src/**/*.@(stories.@(js|jsx|tsx)|mdx)',
     '../../../ui/design-tokens/src/**/*.stories.@(js|jsx|tsx|mdx)',
     '../../../core/core/src/stories/**/*.stories.@(js|jsx|tsx|mdx)',

examples/nextjs/.config/buildtime.js

@@ -18,7 +18,9 @@ module.exports = {
     '../../stories/src/stories_native/*.stories.@(js|jsx|tsx|mdx)',
     '../../stories/src/mdx-stories/*.mdx',
     '../../../ui/app/src/**/*.stories.@(js|jsx|tsx|mdx)',
+    '../../../ui/components/src/**/*.mdx',
     '../../../ui/components/src/**/*.stories.@(js|jsx|tsx|mdx)',
+    '../../../ui/blocks/src/**/*.mdx',
     '../../../ui/blocks/src/**/*.@(stories.@(js|jsx|tsx)|mdx)',
     '../../../ui/design-tokens/src/**/*.stories.@(js|jsx|tsx|mdx)',
     '../../../core/core/src/stories/**/*.stories.@(js|jsx|tsx|mdx)',

examples/stories/src/blogs/component-stats.mdx

@@ -0,0 +1,63 @@
+---
+title: Introducing JSX stats
+type: blog
+date: 2020-12-08
+author: atanasster
+route: /blogs/components-stats
+description: Introducing the addon-stats - cross-reference components and attributes usage statistics for jsx
+tags:
+  - jsx
+  - stats
+  - components usage
+image: /static/components-usage-blog.jpg
+component: BlockContainer
+---
+import { BlockContainer } from '../../../../ui/components/src/BlockContainer/BlockContainer.tsx';
+import { ComponentJSX, Playground } from '@component-controls/blocks';
+import { ComponentUsage, AttributeUsage, ComponentUsageList, AttributesUsageList } from '@component-controls/addon-stats';
+
+
+# Addon stats
+
+We just published the new jsx instrumenting feature and related cross/usage jsx components statistics for component-controls. 
+
+This unique feature allows you to view the jsx trees of your componemts and answer to questions such as - which of my components is the most used as a building block, and which attributes of each component are most used.
+
+
+# JSX Tree display
+
+This is displayed on the documentation page of each component, where you can see a tree of jsx nodes and the attributes used in each node. 
+
+Here is a live example of [BlockContainer](/api/components-blockcontainer--overview) component:
+
+<Playground>
+  <ComponentJSX of={BlockContainer} />
+</Playground>  
+
+# Addon-stats
+
+The addon stats contains several api functions, react hooks and ui elements to make it easy to display cross-usage statistics on the components in your documentation site.
+
+## Components usage summary
+
+Components usage - how many times a component is being used from another component and which of it's properties are used
+
+<ComponentUsage />
+
+## Attributes usage summary
+
+Attributes usage - how many times an attribute is being set on a component, and the component it is being set on
+
+<AttributeUsage />
+
+## Components usage details
+
+How many times a component is being used from another component, with a list of the components using it
+
+<ComponentUsageList />
+
+## Attributes usage details
+
+How many times an attribute is being used on a component, with a list of those components
+
+<AttributesUsageList />

examples/stories/src/components/Button.tsx

@@ -67,7 +67,7 @@ export const Button: FC<ButtonProps> = ({
       padding,
     }}
   >
-    {children}
+    <div>{children}</div>
   </button>
 );
 

plugins/addon-stats/.config/buildtime.js

@@ -0,0 +1,5 @@
+module.exports = {
+  stories: [
+    '../src/**/*.stories.tsx',
+  ],
+};

plugins/addon-stats/.eslintignore

@@ -0,0 +1 @@
+dist

plugins/addon-stats/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 Atanas Stoyanov
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.