@readme/markdown 7.0.0 → 7.1.0

package/README.md

@@ -64,8 +64,17 @@ Parses mdx to an hast.
 
 #### `plain`
 
-> [!NOTE]
-> unimplemented
+Parses mdx to a plain string.
+
+> [!WARNING]
+> This **does** not `eval` the doc.
+
+#### `tags`
+
+Returns a list of tag names from the doc.
+
+> [!WARNING]
+> This **does** not `eval` the doc.
 
 #### `utils`
 

package/components/Tabs/index.tsx

@@ -0,0 +1,34 @@
+import React, { useState } from 'react';
+
+import './style.scss';
+
+export const Tab = ({ children }) => {
+  return (
+    <div className="TabContent">
+      {children}
+    </div>
+  )
+}
+
+const Tabs = ({ children }) => {
+  const [activeTab, setActiveTab] = useState(0);
+
+  return (
+    <div className="TabGroup">
+      <header>
+        <nav className="TabGroup-nav">
+          {children?.map((tab, index: number) => 
+            <button className={`TabGroup-tab${activeTab === index ? '_active' : ''}`} key={tab.props.title} onClick={() => setActiveTab(index)}>
+              {tab.props.title}
+            </button>
+          )}
+        </nav>
+      </header>
+      <section>
+        {children && children[activeTab]}
+      </section>
+    </div>
+  );
+};
+
+export default Tabs;

package/components/Tabs/style.scss

@@ -0,0 +1,28 @@
+.TabGroup {
+  &-nav {
+    border-bottom: solid var(--color-border-default, #{rgba(black, 0.1)});
+    margin-bottom: 15px;
+  }
+  
+  &-tab {
+    background: none;
+    border: 0;
+    color: var(--color-text-minimum, #637288);
+    cursor: pointer;
+    font-weight: 600;
+    padding: 10px;
+
+    &_active {
+      background: none;
+      border: 0;
+      border-bottom: solid var(--blue, #118cfd);
+      color: var(--blue, #118cfd);
+      font-weight: 600;
+      padding: 10px;
+    }
+
+    &:hover {
+      color: var(--color-text-muted, #4f5a66);
+    }
+  }
+}

package/components/index.ts

@@ -9,4 +9,5 @@ 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 Tabs, Tab } from './Tabs';
 export { default as TableOfContents } from './TableOfContents';

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import './style.scss';
+export declare const Tab: ({ children }: {
+    children: any;
+}) => React.JSX.Element;
+declare const Tabs: ({ children }: {
+    children: any;
+}) => React.JSX.Element;
+export default Tabs;

package/dist/components/index.d.ts

@@ -9,4 +9,5 @@ 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 Tabs, Tab } from './Tabs';
 export { default as TableOfContents } from './TableOfContents';

package/dist/index.d.ts

@@ -5,5 +5,5 @@ declare const utils: {
     getHref: any;
     calloutIcons: {};
 };
-export { compile, hast, run, mdast, mdx, plain, remarkPlugins } from './lib';
+export { compile, hast, run, mdast, mdx, plain, remarkPlugins, tags } from './lib';
 export { Components, utils };

package/dist/lib/index.d.ts

@@ -5,5 +5,6 @@ import mdast from './mdast';
 import mdx from './mdx';
 import plain from './plain';
 import run from './run';
+import tags from './tags';
 export type { MdastOpts };
-export { astProcessor, compile, hast, mdast, mdx, plain, run, remarkPlugins };
+export { astProcessor, compile, hast, mdast, mdx, plain, run, remarkPlugins, tags };

package/dist/lib/tags.d.ts

@@ -0,0 +1,2 @@
+declare const tags: (doc: string) => string[];
+export default tags;

package/dist/main.css

@@ -1,4 +1,5 @@
 .CardsGrid{display:grid;gap:20px}.CardsGrid .Card{padding:10px;backdrop-filter:blur(20px);border:1px solid rgba(0,0,0,.1);border-radius:5px;box-shadow:0 1px 2px rgba(0, 0, 0, 0.05),0 2px 5px rgba(0, 0, 0, 0.02)}
+.TabGroup-nav{border-bottom:solid var(--color-border-default, rgba(0, 0, 0, 0.1));margin-bottom:15px}.TabGroup-tab{background:none;border:0;color:var(--color-text-minimum, #637288);cursor:pointer;font-weight:600;padding:10px}.TabGroup-tab_active{background:none;border:0;border-bottom:solid var(--blue, #118cfd);color:var(--blue, #118cfd);font-weight:600;padding:10px}.TabGroup-tab:hover{color:var(--color-text-muted, #4f5a66)}
 /* BASICS */
 
 .CodeMirror {

package/dist/main.js

@@ -13246,6 +13246,7 @@ __webpack_require__.d(__webpack_exports__, {
   plain: () => (/* reexport */ lib_plain),
   remarkPlugins: () => (/* reexport */ remarkPlugins),
   run: () => (/* reexport */ lib_run),
+  tags: () => (/* reexport */ lib_tags),
   utils: () => (/* binding */ utils)
 });
 
@@ -13263,8 +13264,10 @@ __webpack_require__.d(components_namespaceObject, {
   HTMLBlock: () => (components_HTMLBlock),
   Heading: () => (components_Heading),
   Image: () => (components_Image),
+  Tab: () => (Tab),
   Table: () => (components_Table),
-  TableOfContents: () => (components_TableOfContents)
+  TableOfContents: () => (components_TableOfContents),
+  Tabs: () => (components_Tabs)
 });
 
 // NAMESPACE OBJECT: ./node_modules/micromark/lib/constructs.js
@@ -13762,6 +13765,21 @@ const Table = (props) => {
 };
 /* harmony default export */ const components_Table = (Table);
 
+;// CONCATENATED MODULE: ./components/Tabs/index.tsx
+
+
+const Tab = ({ children }) => {
+    return (external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("div", { className: "TabContent" }, children));
+};
+const Tabs = ({ children }) => {
+    const [activeTab, setActiveTab] = (0,external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.useState)(0);
+    return (external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("div", { className: "TabGroup" },
+        external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("header", null,
+            external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("nav", { className: "TabGroup-nav" }, children === null || children === void 0 ? void 0 : children.map((tab, index) => external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("button", { className: `TabGroup-tab${activeTab === index ? '_active' : ''}`, key: tab.props.title, onClick: () => setActiveTab(index) }, tab.props.title)))),
+        external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("section", null, children && children[activeTab])));
+};
+/* harmony default export */ const components_Tabs = (Tabs);
+
 ;// CONCATENATED MODULE: ./components/TableOfContents/index.tsx
 
 function TableOfContents({ children }) {
@@ -13789,6 +13807,7 @@ function TableOfContents({ children }) {
 
 
 
+
 // EXTERNAL MODULE: ./node_modules/core-js/modules/es.symbol.to-primitive.js
 var es_symbol_to_primitive = __webpack_require__(6611);
 // EXTERNAL MODULE: ./node_modules/core-js/modules/es.array.filter.js
@@ -94062,6 +94081,21 @@ const run_run = async (string, _opts = {}) => {
 };
 /* harmony default export */ const lib_run = (run_run);
 
+;// CONCATENATED MODULE: ./lib/tags.ts
+
+
+
+const tags = (doc) => {
+    const set = new Set();
+    visit(lib_mdast(doc), isMDXElement, (node) => {
+        if (node.name.match(/^[A-Z]/)) {
+            set.add(node.name);
+        }
+    });
+    return Array.from(set);
+};
+/* harmony default export */ const lib_tags = (tags);
+
 ;// CONCATENATED MODULE: ./lib/index.ts
 
 
@@ -94072,6 +94106,7 @@ const run_run = async (string, _opts = {}) => {
 
 
 
+
 ;// CONCATENATED MODULE: ./index.tsx
 
 

package/dist/main.node.js

@@ -7793,6 +7793,7 @@ __webpack_require__.d(__webpack_exports__, {
   plain: () => (/* reexport */ lib_plain),
   remarkPlugins: () => (/* reexport */ remarkPlugins),
   run: () => (/* reexport */ lib_run),
+  tags: () => (/* reexport */ lib_tags),
   utils: () => (/* binding */ utils)
 });
 
@@ -7810,8 +7811,10 @@ __webpack_require__.d(components_namespaceObject, {
   HTMLBlock: () => (components_HTMLBlock),
   Heading: () => (components_Heading),
   Image: () => (components_Image),
+  Tab: () => (Tab),
   Table: () => (components_Table),
-  TableOfContents: () => (components_TableOfContents)
+  TableOfContents: () => (components_TableOfContents),
+  Tabs: () => (components_Tabs)
 });
 
 // NAMESPACE OBJECT: ./node_modules/micromark/lib/constructs.js
@@ -13186,6 +13189,21 @@ const Table = (props) => {
 };
 /* harmony default export */ const components_Table = (Table);
 
+;// CONCATENATED MODULE: ./components/Tabs/index.tsx
+
+
+const Tab = ({ children }) => {
+    return (external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("div", { className: "TabContent" }, children));
+};
+const Tabs = ({ children }) => {
+    const [activeTab, setActiveTab] = (0,external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_.useState)(0);
+    return (external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("div", { className: "TabGroup" },
+        external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("header", null,
+            external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("nav", { className: "TabGroup-nav" }, children === null || children === void 0 ? void 0 : children.map((tab, index) => external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("button", { className: `TabGroup-tab${activeTab === index ? '_active' : ''}`, key: tab.props.title, onClick: () => setActiveTab(index) }, tab.props.title)))),
+        external_amd_react_commonjs_react_commonjs2_react_root_React_umd_react_default().createElement("section", null, children && children[activeTab])));
+};
+/* harmony default export */ const components_Tabs = (Tabs);
+
 ;// CONCATENATED MODULE: ./components/TableOfContents/index.tsx
 
 function TableOfContents({ children }) {
@@ -13213,6 +13231,7 @@ function TableOfContents({ children }) {
 
 
 
+
 ;// CONCATENATED MODULE: ./options.js
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -95049,6 +95068,21 @@ const run_run = async (string, _opts = {}) => {
 };
 /* harmony default export */ const lib_run = (run_run);
 
+;// CONCATENATED MODULE: ./lib/tags.ts
+
+
+
+const tags = (doc) => {
+    const set = new Set();
+    visit(lib_mdast(doc), isMDXElement, (node) => {
+        if (node.name.match(/^[A-Z]/)) {
+            set.add(node.name);
+        }
+    });
+    return Array.from(set);
+};
+/* harmony default export */ const lib_tags = (tags);
+
 ;// CONCATENATED MODULE: ./lib/index.ts
 
 
@@ -95059,6 +95093,7 @@ const run_run = async (string, _opts = {}) => {
 
 
 
+
 ;// CONCATENATED MODULE: ./index.tsx
 
 

package/package.json

@@ -2,7 +2,7 @@
   "name": "@readme/markdown",
   "description": "ReadMe's React-based Markdown parser",
   "author": "Rafe Goldberg <rafe@readme.io>",
-  "version": "7.0.0",
+  "version": "7.1.0",
   "main": "dist/main.node.js",
   "types": "dist/index.d.ts",
   "browser": "dist/main.js",