Improve component docs and styles

Author: TimboKZ

lib/ContextMenuWrapper.d.ts

@@ -1,15 +1,44 @@
 import React from 'react';
 import { ContextMenuEvent } from './handlers';
 export interface ContextMenuWrapperProps {
+    /**
+     * A unique ID that will be used to trigger this context menu from other components on the page. Global menus don't
+     * use IDs.
+     */
     id?: string;
+    /**
+     * Determines whether this context menu should replace the default context meu of your browser.
+     * If this is set, `id` is ignored.
+     */
     global?: boolean;
     children?: React.ReactElement;
+    /**
+     * Callback that is triggered after the menu has appeared.
+     */
     onShow?: (event: ContextMenuEvent) => void;
+    /**
+     * Callback that is triggered after the menu has been dismissed.
+     */
     onHide?: () => void;
+    /**
+     * Makes context menu disappear when user clicks (or taps) anywhere inside of the menu.
+     */
     hideOnSelfClick?: boolean;
+    /**
+     * Makes context menu disappear when user clicks (or taps) anywhere outside of the menu.
+     */
     hideOnOutsideClick?: boolean;
+    /**
+     * Makes context menu disappear when user presses the Escape key.
+     */
     hideOnEscape?: boolean;
+    /**
+     * Makes context menu disappear when page is scrolled.
+     */
     hideOnScroll?: boolean;
+    /**
+     * Makes context menu disappear when window is resized.
+     */
     hideOnWindowResize?: boolean;
 }
 export declare const ContextMenuWrapper: React.FC<ContextMenuWrapperProps>;

lib/ContextMenuWrapper.js.map

@@ -5,18 +5,47 @@ import { ContextMenuEvent } from './handlers';
 import { ContextMenuEventContext, useInternalHandlers, useMenuPlacementStyle, useMenuToggleMethods } from './hooks';
 
 export interface ContextMenuWrapperProps {
+    /**
+     * A unique ID that will be used to trigger this context menu from other components on the page. Global menus don't
+     * use IDs.
+     */
     id?: string;
+    /**
+     * Determines whether this context menu should replace the default context meu of your browser.
+     * If this is set, `id` is ignored.
+     */
     global?: boolean;
     children?: React.ReactElement;
 
+    /**
+     * Callback that is triggered after the menu has appeared.
+     */
     onShow?: (event: ContextMenuEvent) => void;
+    /**
+     * Callback that is triggered after the menu has been dismissed.
+     */
     onHide?: () => void;
 
+    /**
+     * Makes context menu disappear when user clicks (or taps) anywhere inside of the menu.
+     */
     hideOnSelfClick?: boolean;
+    /**
+     * Makes context menu disappear when user clicks (or taps) anywhere outside of the menu.
+     */
     hideOnOutsideClick?: boolean;
 
+    /**
+     * Makes context menu disappear when user presses the Escape key.
+     */
     hideOnEscape?: boolean;
+    /**
+     * Makes context menu disappear when page is scrolled.
+     */
     hideOnScroll?: boolean;
+    /**
+     * Makes context menu disappear when window is resized.
+     */
     hideOnWindowResize?: boolean;
 }
 

src/ContextMenuWrapper.tsx

@@ -56,29 +56,20 @@ module.exports = {
     sortProps: props => props,
     propsParser: (filePath, source, resolver, handlers) => {
         const result = require('react-docgen-typescript')
-            .withCustomConfig('./tsconfig.json')
+            .withCustomConfig('./tsconfig.json', { savePropValueAsString: true })
             .parse(filePath, source, resolver, handlers);
 
         return result.map(component => {
             const { props } = component;
             const mappedProps = Object.values(props).reduce((previous, prop) => {
                 const { name, type } = prop;
                 if (type.name.includes('| undefined')) {
-                    type.name = type.name.replace('| undefined', '');
+                    type.name = type.name.replace('| undefined', '').trim();
                     if (!prop.defaultValue) prop.defaultValue = { value: 'null' };
                     if (type.name.startsWith('(') && type.name.endsWith(')')) {
-                        type.name = type.name.slice(1, type.name.length - 2);
+                        type.name = type.name.slice(1, type.name.length - 1);
                     }
                 }
-                if (prop.defaultValue && prop.defaultValue.value.charAt(0) === '{') {
-                    let value = prop.defaultValue.value;
-                    value = value.replace(/(\n)+/g, '&');
-                    value = value.replace(/(\s)+/g, '|');
-                    value = value.replace(/:\|/g, ': ');
-                    value = value.replace(/&\|}/g, '\n}');
-                    value = value.replace(/&\|/g, '\n  ');
-                    prop.defaultValue.value = value;
-                }
 
                 return { ...previous, [name]: { ...prop } };
             }, {});

styleguide.config.js

@@ -97,32 +97,39 @@ div[class*='--preview-'] {
 }
 
 .banner {
+    box-shadow: inset rgba(0, 0, 0, 0.1) 0 0 0 1px;
     background-color: #a3eee3;
+    border-radius: 5px;
     line-height: 100px;
     text-align: center;
-    font-size: 1.4rem;
+    font-size: 1.3rem;
     color: #446156;
 }
 
 .box-container {
     flex-direction: row;
-    margin: 0 -10px;
     display: flex;
+    margin: -5px;
 }
 
 .box {
+    box-shadow: inset rgba(0, 0, 0, 0.1) 0 0 0 1px;
     background-color: #ffb7c6;
-    border: solid 1px #aaa;
     border-radius: 5px;
     text-align: center;
     line-height: 60px;
-    margin: 0 10px;
     color: #6c1426;
+    margin: 5px;
     flex: 1 1 0;
 }
 
+@media screen and (max-width: 400px) {
+    .box-container {
+        flex-direction: column;
+    }
+}
+
 .box-active {
     background-color: #a3eee3;
-    border: solid 1px #007d6a;
     color: #007d6a;
 }