@teambit/tagged-exports 0.0.1

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { TaggedExports } from './tagged-exports';
+export type { TaggedExportsProps } from './tagged-exports';

package/dist/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TaggedExports = void 0;
+var tagged_exports_1 = require("./tagged-exports");
+Object.defineProperty(exports, "TaggedExports", { enumerable: true, get: function () { return tagged_exports_1.TaggedExports; } });
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":";;;AAAA,mDAAiD;AAAxC,+GAAA,aAAa,OAAA"}

package/dist/preview-1704113440840.js

@@ -0,0 +1,7 @@
+;
+;
+
+export const compositions = [];
+export const overview = [];
+
+export const compositions_metadata = {"compositions":[]};

package/dist/tagged-exports.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare type TaggedExportsProps = {
+    componentId: string;
+} & React.HTMLAttributes<HTMLDivElement>;
+export declare function TaggedExports({ componentId, ...rest }: TaggedExportsProps): React.JSX.Element;

package/dist/tagged-exports.js

@@ -0,0 +1,65 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TaggedExports = void 0;
+const react_1 = __importDefault(require("react"));
+const documenter_ui_linked_heading_1 = require("@teambit/documenter.ui.linked-heading");
+const documenter_ui_section_1 = require("@teambit/documenter.ui.section");
+const api_reference_hooks_use_api_1 = require("@teambit/api-reference.hooks.use-api");
+const base_ui_loaders_skeleton_1 = require("@teambit/base-ui.loaders.skeleton");
+const api_reference_hooks_use_api_renderers_1 = require("@teambit/api-reference.hooks.use-api-renderers");
+const api_reference_overview_api_reference_table_of_contents_1 = require("@teambit/api-reference.overview.api-reference-table-of-contents");
+const tagged_exports_module_scss_1 = __importDefault(require("./tagged-exports.module.scss"));
+function TaggedExports(_a) {
+    var _b, _c;
+    var { componentId } = _a, rest = __rest(_a, ["componentId"]);
+    const renderers = (0, api_reference_hooks_use_api_renderers_1.useAPIRefRenderers)();
+    const api = (0, api_reference_hooks_use_api_1.useAPI)(componentId, renderers.nodeRenderers);
+    const showTableOfContents = ((_b = api.apiModel) === null || _b === void 0 ? void 0 : _b.taggedAPINodes.length) === 0;
+    const taggedAPIs = (_c = api.apiModel) === null || _c === void 0 ? void 0 : _c.taggedAPINodes;
+    const loading = !!api.loading;
+    if (!loading && !api.apiModel)
+        return null;
+    const Loader = (react_1.default.createElement("div", { className: tagged_exports_module_scss_1.default.loader },
+        react_1.default.createElement("div", { className: tagged_exports_module_scss_1.default.loaderTitle },
+            react_1.default.createElement(base_ui_loaders_skeleton_1.CircleSkeleton, { size: 1.5 }),
+            react_1.default.createElement(base_ui_loaders_skeleton_1.WordSkeleton, { length: 5 })),
+        react_1.default.createElement(base_ui_loaders_skeleton_1.BlockSkeleton, { lines: 8 }),
+        react_1.default.createElement(base_ui_loaders_skeleton_1.BlockSkeleton, { lines: 4 })));
+    return (react_1.default.createElement(documenter_ui_section_1.Section, Object.assign({}, rest, { className: tagged_exports_module_scss_1.default.section }),
+        react_1.default.createElement(documenter_ui_linked_heading_1.LinkedHeading, { className: tagged_exports_module_scss_1.default.heading, size: 'sm' },
+            react_1.default.createElement("div", { className: tagged_exports_module_scss_1.default.title },
+                react_1.default.createElement("img", { style: { width: 24 }, src: "https://static.bit.dev/bit-icons/api-ref.svg" }),
+                react_1.default.createElement("span", null, "API"))),
+        showTableOfContents && api.apiModel && (react_1.default.createElement("div", { className: tagged_exports_module_scss_1.default.content },
+            react_1.default.createElement(api_reference_overview_api_reference_table_of_contents_1.APIReferenceTableOfContents, { apiModel: api.apiModel }))),
+        !loading && (react_1.default.createElement("div", { className: tagged_exports_module_scss_1.default.taggedAPIs }, taggedAPIs === null || taggedAPIs === void 0 ? void 0 : taggedAPIs.map((taggedAPI, index) => {
+            const OverviewComponent = taggedAPI.renderer.OverviewComponent;
+            // @todo - change this to be non nullable
+            if (!OverviewComponent)
+                return null;
+            return (react_1.default.createElement(OverviewComponent, { apiNode: taggedAPI, key: `${taggedAPI.api.name}-${index}`, apiRefModel: api.apiModel, renderers: renderers.nodeRenderers }));
+        }))),
+        !loading && (react_1.default.createElement("div", { className: tagged_exports_module_scss_1.default.banner },
+            react_1.default.createElement("img", { style: { width: 16 }, src: "https://static.bit.dev/bit-icons/lightbulb-thinking.svg" }),
+            react_1.default.createElement("span", null,
+                "Use the",
+                react_1.default.createElement("span", { className: tagged_exports_module_scss_1.default.highlighted }, "@exports"),
+                "jsdoc tag to only show relevant APIs with details for your users"))),
+        loading && Loader));
+}
+exports.TaggedExports = TaggedExports;
+//# sourceMappingURL=tagged-exports.js.map

package/dist/tagged-exports.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tagged-exports.js","sourceRoot":"","sources":["../tagged-exports.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,kDAA0B;AAC1B,wFAAsE;AACtE,0EAAyD;AACzD,sFAA8D;AAC9D,gFAAgG;AAChG,0GAAoF;AACpF,4IAA8G;AAG9G,8FAAkD;AAMlD,SAAgB,aAAa,CAAC,EAA4C;;QAA5C,EAAE,WAAW,OAA+B,EAA1B,IAAI,cAAtB,eAAwB,CAAF;IAClD,MAAM,SAAS,GAAG,IAAA,0DAAkB,GAAE,CAAC;IACvC,MAAM,GAAG,GAAG,IAAA,oCAAM,EAAC,WAAW,EAAE,SAAS,CAAC,aAAa,CAAC,CAAC;IACzD,MAAM,mBAAmB,GAAG,CAAA,MAAA,GAAG,CAAC,QAAQ,0CAAE,cAAc,CAAC,MAAM,MAAK,CAAC,CAAC;IAEtE,MAAM,UAAU,GAAG,MAAA,GAAG,CAAC,QAAQ,0CAAE,cAAc,CAAC;IAChD,MAAM,OAAO,GAAG,CAAC,CAAC,GAAG,CAAC,OAAO,CAAC;IAE9B,IAAI,CAAC,OAAO,IAAI,CAAC,GAAG,CAAC,QAAQ;QAAE,OAAO,IAAI,CAAC;IAE3C,MAAM,MAAM,GAAG,CACb,uCAAK,SAAS,EAAE,oCAAM,CAAC,MAAM;QAC3B,uCAAK,SAAS,EAAE,oCAAM,CAAC,WAAW;YAChC,8BAAC,yCAAc,IAAC,IAAI,EAAE,GAAG,GAAI;YAC7B,8BAAC,uCAAY,IAAC,MAAM,EAAE,CAAC,GAAI,CACvB;QAEN,8BAAC,wCAAa,IAAC,KAAK,EAAE,CAAC,GAAI;QAC3B,8BAAC,wCAAa,IAAC,KAAK,EAAE,CAAC,GAAI,CACvB,CACP,CAAC;IAEF,OAAO,CACL,8BAAC,+BAAO,oBAAK,IAAI,IAAE,SAAS,EAAE,oCAAM,CAAC,OAAO;QAC1C,8BAAC,4CAAa,IAAC,SAAS,EAAE,oCAAM,CAAC,OAAO,EAAE,IAAI,EAAE,IAAI;YAClD,uCAAK,SAAS,EAAE,oCAAM,CAAC,KAAK;gBAC1B,uCAAK,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,EAAE,GAAG,EAAC,8CAA8C,GAAG;gBAChF,kDAAgB,CACZ,CACQ;QACf,mBAAmB,IAAI,GAAG,CAAC,QAAQ,IAAI,CACtC,uCAAK,SAAS,EAAE,oCAAM,CAAC,OAAO;YAC5B,8BAAC,oFAA2B,IAAC,QAAQ,EAAE,GAAG,CAAC,QAAQ,GAAI,CACnD,CACP;QACA,CAAC,OAAO,IAAI,CACX,uCAAK,SAAS,EAAE,oCAAM,CAAC,UAAU,IAC9B,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,GAAG,CAAC,CAAC,SAAS,EAAE,KAAK,EAAE,EAAE;YACpC,MAAM,iBAAiB,GAAG,SAAS,CAAC,QAAQ,CAAC,iBAAiB,CAAC;YAC/D,yCAAyC;YACzC,IAAI,CAAC,iBAAiB;gBAAE,OAAO,IAAI,CAAC;YACpC,OAAO,CACL,8BAAC,iBAAiB,IAChB,OAAO,EAAE,SAAS,EAClB,GAAG,EAAE,GAAG,SAAS,CAAC,GAAG,CAAC,IAAI,IAAI,KAAK,EAAE,EACrC,WAAW,EAAE,GAAG,CAAC,QAA6B,EAC9C,SAAS,EAAE,SAAS,CAAC,aAAa,GAClC,CACH,CAAC;QACJ,CAAC,CAAC,CACE,CACP;QACA,CAAC,OAAO,IAAI,CACX,uCAAK,SAAS,EAAE,oCAAM,CAAC,MAAM;YAC3B,uCAAK,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,EAAE,GAAG,EAAC,yDAAyD,GAAG;YAC3F;;gBAEE,wCAAM,SAAS,EAAE,oCAAM,CAAC,WAAW,eAAiB;mFAE/C,CACH,CACP;QACA,OAAO,IAAI,MAAM,CACV,CACX,CAAC;AACJ,CAAC;AAjED,sCAiEC"}

package/dist/tagged-exports.module.scss

@@ -0,0 +1,72 @@
+.section {
+  padding: 20px 40px 10px 40px;
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+}
+
+.title {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.heading {
+  margin-bottom: 0;
+}
+
+.content {
+  display: flex;
+  border-radius: 8px;
+}
+
+.banner {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: rgba(247, 247, 245, 0.631372549);
+  border-radius: 8px;
+  padding: 16px;
+  font-size: 16px;
+  gap: 8px;
+  > img {
+    background-color: none;
+  }
+}
+
+.highlighted {
+  color: var(--primary-color, #6c5ce7);
+  margin: 0px 4px;
+}
+
+.loader {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  color: rgba(247, 247, 245, 0.631372549);
+  // > * {
+  //   background-color: rgba(247, 247, 245, 0.631372549) !important;
+  // }
+}
+
+.loaderTitle {
+  display: flex;
+  gap: 8px;
+}
+
+.apiSkeleton {
+  margin-top: 8px;
+  border-radius: 4px;
+  align-items: center;
+  // background-color: rgba(247, 247, 245, 0.631372549);
+}
+
+.bannerSkeleton {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px;
+  border-radius: 8px;
+  // background-color: rgba(247, 247, 245, 0.631372549);
+}

package/dist/tsconfig.json

@@ -0,0 +1,32 @@
+{
+    "compilerOptions": {
+        "lib": [
+            "es2019",
+            "DOM",
+            "ES6",
+            "DOM.Iterable"
+        ],
+        "target": "es2015",
+        "module": "CommonJS",
+        "jsx": "react",
+        "allowJs": true,
+        "composite": true,
+        "declaration": true,
+        "sourceMap": true,
+        "skipLibCheck": true,
+        "experimentalDecorators": true,
+        "outDir": "dist",
+        "moduleResolution": "node",
+        "esModuleInterop": true,
+        "rootDir": ".",
+        "resolveJsonModule": true
+    },
+    "exclude": [
+        "dist",
+        "package.json"
+    ],
+    "include": [
+        "**/*",
+        "**/*.json"
+    ]
+}

package/index.ts

@@ -0,0 +1,2 @@
+export { TaggedExports } from './tagged-exports';
+export type { TaggedExportsProps } from './tagged-exports';

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@teambit/tagged-exports",
+  "version": "0.0.1",
+  "main": "dist/index.js",
+  "componentId": {
+    "name": "tagged-exports",
+    "version": "0.0.1",
+    "scope": "teambit.api-reference"
+  },
+  "dependencies": {
+    "core-js": "^3.0.0",
+    "@teambit/base-ui.loaders.skeleton": "1.0.1",
+    "@teambit/documenter.ui.linked-heading": "4.1.6",
+    "@teambit/documenter.ui.section": "4.1.1",
+    "@teambit/api-reference.hooks.use-api-renderers": "0.0.1",
+    "@teambit/api-reference.hooks.use-api": "0.0.16",
+    "@teambit/api-reference.models.api-reference-model": "0.0.18",
+    "@teambit/api-reference.overview.api-reference-table-of-contents": "0.0.1"
+  },
+  "devDependencies": {
+    "@types/react": "^17.0.8",
+    "@types/node": "12.20.4",
+    "@types/react-dom": "^17.0.5",
+    "@types/jest": "^26.0.0",
+    "@babel/runtime": "7.20.0",
+    "@types/testing-library__jest-dom": "5.9.5"
+  },
+  "peerDependencies": {
+    "react": "^16.8.0 || ^17.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0"
+  },
+  "license": "SEE LICENSE IN LICENSE",
+  "optionalDependencies": {},
+  "peerDependenciesMeta": {}
+}

package/tagged-exports.module.scss

@@ -0,0 +1,72 @@
+.section {
+  padding: 20px 40px 10px 40px;
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+}
+
+.title {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.heading {
+  margin-bottom: 0;
+}
+
+.content {
+  display: flex;
+  border-radius: 8px;
+}
+
+.banner {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: rgba(247, 247, 245, 0.631372549);
+  border-radius: 8px;
+  padding: 16px;
+  font-size: 16px;
+  gap: 8px;
+  > img {
+    background-color: none;
+  }
+}
+
+.highlighted {
+  color: var(--primary-color, #6c5ce7);
+  margin: 0px 4px;
+}
+
+.loader {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  color: rgba(247, 247, 245, 0.631372549);
+  // > * {
+  //   background-color: rgba(247, 247, 245, 0.631372549) !important;
+  // }
+}
+
+.loaderTitle {
+  display: flex;
+  gap: 8px;
+}
+
+.apiSkeleton {
+  margin-top: 8px;
+  border-radius: 4px;
+  align-items: center;
+  // background-color: rgba(247, 247, 245, 0.631372549);
+}
+
+.bannerSkeleton {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px;
+  border-radius: 8px;
+  // background-color: rgba(247, 247, 245, 0.631372549);
+}

package/tagged-exports.tsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import { LinkedHeading } from '@teambit/documenter.ui.linked-heading';
+import { Section } from '@teambit/documenter.ui.section';
+import { useAPI } from '@teambit/api-reference.hooks.use-api';
+import { BlockSkeleton, WordSkeleton, CircleSkeleton } from '@teambit/base-ui.loaders.skeleton';
+import { useAPIRefRenderers } from '@teambit/api-reference.hooks.use-api-renderers';
+import { APIReferenceTableOfContents } from '@teambit/api-reference.overview.api-reference-table-of-contents';
+import { APIReferenceModel } from '@teambit/api-reference.models.api-reference-model';
+
+import styles from './tagged-exports.module.scss';
+
+export type TaggedExportsProps = {
+  componentId: string;
+} & React.HTMLAttributes<HTMLDivElement>;
+
+export function TaggedExports({ componentId, ...rest }: TaggedExportsProps) {
+  const renderers = useAPIRefRenderers();
+  const api = useAPI(componentId, renderers.nodeRenderers);
+  const showTableOfContents = api.apiModel?.taggedAPINodes.length === 0;
+
+  const taggedAPIs = api.apiModel?.taggedAPINodes;
+  const loading = !!api.loading;
+
+  if (!loading && !api.apiModel) return null;
+
+  const Loader = (
+    <div className={styles.loader}>
+      <div className={styles.loaderTitle}>
+        <CircleSkeleton size={1.5} />
+        <WordSkeleton length={5} />
+      </div>
+
+      <BlockSkeleton lines={8} />
+      <BlockSkeleton lines={4} />
+    </div>
+  );
+
+  return (
+    <Section {...rest} className={styles.section}>
+      <LinkedHeading className={styles.heading} size={'sm'}>
+        <div className={styles.title}>
+          <img style={{ width: 24 }} src="https://static.bit.dev/bit-icons/api-ref.svg" />
+          <span>API</span>
+        </div>
+      </LinkedHeading>
+      {showTableOfContents && api.apiModel && (
+        <div className={styles.content}>
+          <APIReferenceTableOfContents apiModel={api.apiModel} />
+        </div>
+      )}
+      {!loading && (
+        <div className={styles.taggedAPIs}>
+          {taggedAPIs?.map((taggedAPI, index) => {
+            const OverviewComponent = taggedAPI.renderer.OverviewComponent;
+            // @todo - change this to be non nullable
+            if (!OverviewComponent) return null;
+            return (
+              <OverviewComponent
+                apiNode={taggedAPI}
+                key={`${taggedAPI.api.name}-${index}`}
+                apiRefModel={api.apiModel as APIReferenceModel}
+                renderers={renderers.nodeRenderers}
+              />
+            );
+          })}
+        </div>
+      )}
+      {!loading && (
+        <div className={styles.banner}>
+          <img style={{ width: 16 }} src="https://static.bit.dev/bit-icons/lightbulb-thinking.svg" />
+          <span>
+            Use the
+            <span className={styles.highlighted}>@exports</span>
+            jsdoc tag to only show relevant APIs with details for your users
+          </span>
+        </div>
+      )}
+      {loading && Loader}
+    </Section>
+  );
+}

package/tsconfig.json

@@ -0,0 +1,32 @@
+{
+  "compilerOptions": {
+    "lib": [
+      "es2019",
+      "DOM",
+      "ES6",
+      "DOM.Iterable"
+    ],
+    "target": "es2015",
+    "module": "CommonJS",
+    "jsx": "react",
+    "allowJs": true,
+    "composite": true,
+    "declaration": true,
+    "sourceMap": true,
+    "skipLibCheck": true,
+    "experimentalDecorators": true,
+    "outDir": "dist",
+    "moduleResolution": "node",
+    "esModuleInterop": true,
+    "rootDir": ".",
+    "resolveJsonModule": true
+  },
+  "exclude": [
+    "dist",
+    "package.json"
+  ],
+  "include": [
+    "**/*",
+    "**/*.json"
+  ]
+}

package/types/asset.d.ts

@@ -0,0 +1,29 @@
+declare module '*.png' {
+  const value: any;
+  export = value;
+}
+declare module '*.svg' {
+  import type { FunctionComponent, SVGProps } from 'react';
+
+  export const ReactComponent: FunctionComponent<SVGProps<SVGSVGElement> & { title?: string }>;
+  const src: string;
+  export default src;
+}
+
+// @TODO Gilad
+declare module '*.jpg' {
+  const value: any;
+  export = value;
+}
+declare module '*.jpeg' {
+  const value: any;
+  export = value;
+}
+declare module '*.gif' {
+  const value: any;
+  export = value;
+}
+declare module '*.bmp' {
+  const value: any;
+  export = value;
+}

package/types/style.d.ts

@@ -0,0 +1,42 @@
+declare module '*.module.css' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+declare module '*.module.scss' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+declare module '*.module.sass' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.module.less' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.less' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.css' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.sass' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.scss' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.mdx' {
+  const component: any;
+  export default component;
+}