@readme/markdown 6.87.1 → 6.89.0

package/components/Image/index.tsx

@@ -0,0 +1,113 @@
+import * as React from 'react';
+
+interface ImageProps {
+  align?: string;
+  alt?: string;
+  border?: boolean;
+  caption?: string;
+  className?: string;
+  height?: string;
+  src: string;
+  title?: string;
+  width?: string;
+  lazy?: boolean;
+  children?: [React.ReactElement];
+}
+
+const Image = (Props: ImageProps) => {
+  const {
+    align = 'center',
+    alt = '',
+    border = false,
+    caption,
+    className = '',
+    height = 'auto',
+    src,
+    title = '',
+    width = 'auto',
+    lazy = true,
+    children,
+  } = Props;
+
+  const [lightbox, setLightbox] = React.useState(false);
+
+  if (className === 'emoji') {
+    return <img src={src} width={width} height={height} title={title} alt={alt} loading={lazy ? 'lazy' : 'eager'} />;
+  }
+
+  const handleKeyDown = ({ key, metaKey: cmd }: React.KeyboardEvent<HTMLImageElement>) => {
+    const cmdKey = cmd ? 'cmd+' : '';
+    key = `${cmdKey}${key.toLowerCase()}`;
+
+    switch (key) {
+      case 'cmd+.':
+      case 'escape':
+        // CLOSE
+        setLightbox(false);
+        break;
+      case ' ':
+      case 'enter':
+        // OPEN
+        if (!lightbox) setLightbox(true);
+      default:
+    }
+  };
+
+  const toggle = () => {
+    if (className === 'emoji') return;
+    setLightbox(!lightbox);
+  };
+
+  if (caption) {
+    return (
+      <figure>
+        <span
+          aria-label={alt}
+          className={`img lightbox ${lightbox ? 'open' : 'closed'}`}
+          onClick={toggle}
+          onKeyDown={handleKeyDown}
+          role={'button'}
+          tabIndex={0}
+        >
+          <span className="lightbox-inner">
+            <img
+              src={src}
+              width={width}
+              height={height}
+              title={title}
+              className={`img img-align-center${border ? ' border' : ''}`}
+              alt={alt}
+              loading={lazy ? 'lazy' : 'eager'}
+            />
+            <figcaption>{children || caption}</figcaption>
+          </span>
+        </span>
+      </figure>
+    );
+  }
+
+  return (
+    <span
+      aria-label={alt}
+      className={`img lightbox ${lightbox ? 'open' : 'closed'}`}
+      onClick={toggle}
+      onKeyDown={handleKeyDown}
+      role={'button'}
+      tabIndex={0}
+    >
+      <span className="lightbox-inner">
+        <img
+          src={src}
+          width={width}
+          height={height}
+          title={title}
+          className={`img img-align-${align}${border ? ' border' : ''}`}
+          alt={alt}
+          loading={lazy ? 'lazy' : 'eager'}
+        />
+      </span>
+    </span>
+  );
+};
+
+export default Image;

package/components/Image/style.scss

@@ -1,17 +1,12 @@
-/* stylelint-disable selector-max-compound-selectors */
-/* stylelint-disable no-descending-specificity */
-/* stylelint-disable font-family-no-missing-generic-family-keyword */
 %img-align {
   &-right {
     float: right;
     margin-left: 0.75rem;
   }
-
   &-left {
     float: left;
     margin-right: 0.75rem;
   }
-
   &-center {
     display: block;
   }
@@ -19,36 +14,36 @@
 
 .markdown-body {
   img {
-    border-style: none;
-    box-sizing: content-box;
-    display: inline-block;
-    margin-left: auto;
-    margin-right: auto;
-    max-width: 100%;
-    outline: none !important;
-    vertical-align: middle;
+    & {
+      box-sizing: content-box;
+      display: inline-block;
+      vertical-align: middle;
+      max-width: 100%;
+      margin-left: auto;
+      margin-right: auto;
+      border-style: none;
+
+      outline: none !important;
+    }
 
     &[align='right'],
     &[alt~='align-right'] {
       @extend %img-align-right;
     }
-
     &[align='left'],
     &[alt~='align-left'] {
       @extend %img-align-left;
     }
-
     &[width='80%'],
-    &[align='center'],
     &[align='middle'],
     &[alt~='align-center'] {
       @extend %img-align-center;
     }
 
     &[width='smart'] {
-      max-height: 450px;
-      max-width: 100%;
       width: auto;
+      max-width: 100%;
+      max-height: 450px;
     }
 
     &.border {
@@ -57,12 +52,13 @@
   }
 
   figure {
-    margin: 15px auto;
-
+    & {
+      margin: 15px auto;
+    }
     figcaption {
+      margin-top: 8px;
       font-size: 0.93em;
       font-style: italic;
-      margin-top: 8px;
       text-align: center;
     }
   }
@@ -73,81 +69,83 @@
   }
 
   figure .img {
-    display: block;
+    display: inline-block;
+    &,
+    > img:only-of-type {
+      display: block;
+    }
   }
 
   .lightbox.open {
-    align-items: center;
-    background: rgba(white, 0.966);
-    display: flex;
-    flex-flow: nowrap column;
-    height: 100vh;
-    justify-content: flex-start;
-    left: 0;
-    margin-bottom: 0;
-    margin-top: 0;
-    overflow: hidden;
-    overflow-y: scroll;
-    position: fixed;
-    top: 0;
-    user-select: none;
-    width: 100vw;
-    z-index: 9999999;
+    & {
+      position: fixed;
+      z-index: 9999999;
+      top: 0;
+      left: 0;
+
+      display: flex;
+      flex-flow: nowrap column;
+      justify-content: flex-start;
+      align-items: center;
+
+      width: 100vw;
+      height: 100vh;
+      overflow: hidden;
+      overflow-y: scroll;
+      background: rgba(white, 0.966);
+      user-select: none;
+
+      margin-top: 0;
+      margin-bottom: 0;
+    }
 
     // Close Button
-    &::after {
+    //
+    &:after {
+      position: fixed;
+      top: 1em;
+      right: 1em;
       content: '\f00d';
-      cursor: pointer;
       display: inline-block;
       font: normal normal normal 2em/1 FontAwesome;
       font-size: inherit;
+      text-rendering: auto;
       -webkit-font-smoothing: antialiased;
       -moz-osx-font-smoothing: grayscale;
-      opacity: 1;
-      position: fixed;
-      right: 1em;
-      text-rendering: auto;
-      top: 1em;
       transform: translate(0, 0);
+      display: inline-block;
+      cursor: pointer;
+
+      opacity: 1;
       transform: scale(1.5);
       transition: 0.3s 0.3s ease-in;
     }
-
-    &:not(.open)::after {
-      opacity: 0;
+    &:not(.open):after {
       transform: scale(0);
+      opacity: 0;
     }
 
     .lightbox-inner {
-      align-items: center;
-      box-sizing: content-box;
+      position: relative;
       display: inline-flex;
       justify-content: center;
-      margin: auto;
+      align-items: center;
       min-height: calc(100vh + 8px);
+      margin: auto;
       padding: 0;
-      position: relative;
+      box-sizing: content-box;
     }
 
     img {
+      width: auto !important;
       height: auto !important;
-      max-height: 97.5vh !important;
-      max-width: 97.5vw !important;
       min-width: unset !important;
-      width: auto !important;
-
+      max-width: 97.5vw !important;
+      max-height: 97.5vh !important;
       &.border,
       &:not([src$='.png']):not([src$='.svg']):not([src$='.jp2']):not([src$='.tiff']) {
         box-shadow: 0 0.5em 3em -1em rgba(0, 0, 0, 0.2);
       }
-
-      &[src$='svg'] {
-        display: block !important;
-        height: 66vw !important;
-        max-width: 100% !important;
-        min-width: 200px !important;
-        width: 42vw !important;
-      }
     }
   }
 }

package/components/Table/index.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+interface Props extends JSX.IntrinsicAttributes {
+  align: ('left' | 'center' | 'right')[];
+  children: [React.ReactElement<HTMLTableCaptionElement | HTMLTableSectionElement | HTMLTableRowElement>];
+}
+
+const Table = (props: Props) => {
+  const { children } = props;
+
+  return (
+    <div className="rdmd-table">
+      <div className="rdmd-table-inner">
+        <table>{children}</table>
+      </div>
+    </div>
+  );
+};
+
+export default Table;

package/components/Table/style.scss

@@ -1,14 +1,15 @@
-/* stylelint-disable selector-max-compound-selectors */
-/* stylelint-disable no-descending-specificity */
-/* stylelint-disable declaration-property-value-disallowed-list */
-/* stylelint-disable scss/selector-no-redundant-nesting-selector */
-@mixin markdown-table($row: #fff, $head: #f6f8fa, $stripe: #fbfcfd, $edges: #dfe2e5) {
+@mixin markdown-table(
+  $row: #fff,
+  $head: #f6f8fa,
+  $stripe: #fbfcfd,
+  $edges: #dfe2e5,
+) {
   table {
+    display: table;
     border-collapse: collapse;
     border-spacing: 0;
-    color: var(--table-text);
-    display: table;
     width: 100%;
+    color: var(--table-text);
 
     thead {
       color: var(--table-head-text, inherit);
@@ -20,7 +21,6 @@
 
     tr {
       background-color: var(--table-row, #{$row});
-
       & + tr {
         border-top: 1px solid var(--table-edges, #{$edges});
       }
@@ -29,7 +29,6 @@
     th,
     thead td {
       font-weight: 600;
-
       &:empty {
         padding: 0;
       }
@@ -37,20 +36,13 @@
 
     td,
     th {
-      border: 1px solid var(--table-edges, #{$edges});
+      padding: 0;
       color: inherit;
-      padding: 6px 13px;
       vertical-align: middle;
-
-      > :first-child,
-      > :only-child {
-        margin-top: 0 !important;
-      }
-
-      > :last-child,
-      > :only-child {
-        margin-bottom: 0 !important;
-      }
+      border: 1px solid var(--table-edges, #{$edges});
+      padding: 6px 13px;
+      > :first-child, > :only-child { margin-top:    0 !important }
+      > :last-child, > :only-child  { margin-bottom: 0 !important }
     }
 
     &:not(.plain) tr:nth-child(2n) {
@@ -65,8 +57,10 @@
   .rdmd-table {
     $border-wrap-width: 1px;
 
-    display: block;
-    position: relative;
+    & {
+      display: block;
+      position: relative;
+    }
 
     &-inner {
       box-sizing: content-box;

package/components/TableOfContents/{index.jsx → index.tsx}

@@ -1,7 +1,6 @@
-const PropTypes = require('prop-types');
-const React = require('react');
+import React from 'react';
 
-function TableOfContents({ children }) {
+function TableOfContents({ children }: React.PropsWithChildren) {
   return (
     <nav>
       <ul className="toc-list">
@@ -18,8 +17,4 @@ function TableOfContents({ children }) {
   );
 }
 
-TableOfContents.propTypes = {
-  children: PropTypes.element,
-};
-
-module.exports = TableOfContents;
+export default TableOfContents;

package/components/{index.js → index.ts}

@@ -1,12 +1,12 @@
 export { default as Anchor } from './Anchor';
 export { default as Callout } from './Callout';
+export { default as Cards } from './CardsGrid';
 export { default as Code } from './Code';
 export { default as CodeTabs } from './CodeTabs';
 export { default as Embed } from './Embed';
-export { default as GlossaryItem } from './GlossaryItem';
+export { default as Glossary } from './Glossary';
 export { default as HTMLBlock } from './HTMLBlock';
 export { default as Heading } from './Heading';
 export { default as Image } from './Image';
-export { default as Style } from './Style';
 export { default as Table } from './Table';
 export { default as TableOfContents } from './TableOfContents';

package/dist/components/Callout/index.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+interface Props extends React.PropsWithChildren<React.HTMLAttributes<HTMLQuoteElement>> {
+    attributes?: {};
+    icon: string;
+    theme?: string;
+    empty?: boolean;
+}
+declare const Callout: (props: Props) => React.JSX.Element;
+export default Callout;

package/dist/components/CardsGrid/index.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import './style.scss';
+declare const CardsGrid: ({ columns, children }: {
+    columns?: number;
+    children: any;
+}) => React.JSX.Element;
+export default CardsGrid;

package/dist/components/Code/index.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+interface CodeProps {
+    children?: string[] | string;
+    copyButtons?: boolean;
+    lang?: string;
+    meta?: string;
+    theme?: string;
+    value?: string;
+}
+declare const Code: (props: CodeProps) => React.JSX.Element;
+export default Code;

package/dist/components/CodeTabs/index.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const CodeTabs: (props: any) => React.JSX.Element;
+export default CodeTabs;

package/dist/components/Embed/index.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+interface EmbedProps {
+    lazy?: boolean;
+    url: string;
+    title: string;
+    providerName?: string;
+    providerUrl?: string;
+    html?: string;
+    iframe?: boolean;
+    image?: string;
+    favicon?: string;
+    typeOfEmbed?: string;
+}
+declare const Embed: ({ lazy, url, html, providerName, providerUrl, title, iframe, image, favicon, ...attrs }: EmbedProps) => React.JSX.Element;
+export default Embed;

package/dist/components/Glossary/index.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import GlossaryContext from '../../contexts/GlossaryTerms';
+import type { GlossaryTerm } from '../../contexts/GlossaryTerms';
+interface Props extends React.PropsWithChildren {
+    term?: string;
+    terms: GlossaryTerm[];
+}
+declare const Glossary: ({ children, term: termProp, terms }: Props) => React.JSX.Element;
+declare const GlossaryWithContext: (props: any) => React.JSX.Element;
+export { Glossary, GlossaryWithContext as default, GlossaryContext };

package/dist/components/HTMLBlock/index.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+declare const HTMLBlock: ({ children, runScripts, safeMode }: {
+    children?: string;
+    runScripts: any;
+    safeMode?: boolean;
+}) => React.JSX.Element;
+export default HTMLBlock;

package/dist/components/Heading/index.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export type Depth = 1 | 2 | 3 | 4 | 5 | 6;
+interface Props extends React.PropsWithChildren<React.HTMLAttributes<HTMLHeadingElement>> {
+    tag: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+    depth: Depth;
+}
+declare const CreateHeading: (depth: Depth) => (props: Props) => React.JSX.Element;
+export default CreateHeading;

package/dist/components/Image/index.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+interface ImageProps {
+    align?: string;
+    alt?: string;
+    border?: boolean;
+    caption?: string;
+    className?: string;
+    height?: string;
+    src: string;
+    title?: string;
+    width?: string;
+    lazy?: boolean;
+    children?: [React.ReactElement];
+}
+declare const Image: (Props: ImageProps) => React.JSX.Element;
+export default Image;

package/dist/components/Table/index.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface Props extends JSX.IntrinsicAttributes {
+    align: ('left' | 'center' | 'right')[];
+    children: [React.ReactElement<HTMLTableCaptionElement | HTMLTableSectionElement | HTMLTableRowElement>];
+}
+declare const Table: (props: Props) => React.JSX.Element;
+export default Table;

package/dist/components/TableOfContents/index.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare function TableOfContents({ children }: React.PropsWithChildren): React.JSX.Element;
+export default TableOfContents;

package/dist/components/index.d.ts

@@ -0,0 +1,12 @@
+export { default as Anchor } from './Anchor';
+export { default as Callout } from './Callout';
+export { default as Cards } from './CardsGrid';
+export { default as Code } from './Code';
+export { default as CodeTabs } from './CodeTabs';
+export { default as Embed } from './Embed';
+export { default as Glossary } from './Glossary';
+export { default as HTMLBlock } from './HTMLBlock';
+export { default as Heading } from './Heading';
+export { default as Image } from './Image';
+export { default as Table } from './Table';
+export { default as TableOfContents } from './TableOfContents';

package/dist/contexts/GlossaryTerms.d.ts

@@ -0,0 +1,7 @@
+export type GlossaryTerm = {
+    term: string;
+    definition: string;
+    _id?: string;
+};
+declare const GlossaryContext: import("react").Context<GlossaryTerm[]>;
+export default GlossaryContext;

package/dist/contexts/index.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { RunOpts } from '../lib/run';
+type Props = React.PropsWithChildren & Pick<RunOpts, 'baseUrl' | 'terms' | 'variables'>;
+declare const Contexts: ({ children, terms, variables, baseUrl }: Props) => React.ReactNode;
+export default Contexts;

package/dist/enums.d.ts

@@ -0,0 +1,14 @@
+export declare enum NodeTypes {
+    callout = "rdme-callout",
+    codeTabs = "code-tabs",
+    embedBlock = "embed-block",
+    emoji = "gemoji",
+    glossary = "readme-glossary-item",
+    htmlBlock = "html-block",
+    i = "i",
+    imageBlock = "image-block",
+    reusableContent = "reusable-content",
+    tableau = "tableau",
+    tutorialTile = "tutorial-tile",
+    variable = "readme-variable"
+}

package/dist/errors/mdx-syntax-error.d.ts

@@ -0,0 +1,5 @@
+import { VFileMessage } from 'vfile-message';
+export default class MdxSyntaxError extends SyntaxError {
+    original: VFileMessage;
+    constructor(error: VFileMessage, doc: string);
+}

package/dist/example/App.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import './demo.scss';
+declare const App: () => React.JSX.Element;
+export default App;

package/dist/example/Doc.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const Doc: () => React.JSX.Element;
+export default Doc;

package/dist/example/Form.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const Form: () => React.JSX.Element;
+export default Form;

package/dist/example/Header.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare function Header(): React.JSX.Element;
+export default Header;

package/dist/example/RenderError.d.ts

@@ -0,0 +1,23 @@
+import React, { PropsWithChildren } from 'react';
+interface Props {
+    error?: string;
+}
+interface State {
+    hasError: boolean;
+    message?: string;
+}
+declare class RenderError extends React.Component<PropsWithChildren<Props>, State> {
+    state: {
+        hasError: boolean;
+        message: any;
+    };
+    static getDerivedStateFromError(error: Error): {
+        hasError: boolean;
+        message: string;
+    };
+    componentDidCatch(error: any, info: {
+        componentStack: any;
+    }): void;
+    render(): string | number | boolean | Iterable<React.ReactNode> | React.JSX.Element;
+}
+export default RenderError;

package/dist/example/Root.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const Root: () => React.JSX.Element;
+export default Root;