@teambit/docs 0.0.568 → 0.0.569

package/doc/doc-prop-list.ts

@@ -0,0 +1,20 @@
+import { DocProp } from './doc-prop';
+
+export class DocPropList {
+  constructor(readonly docProps: DocProp[]) {}
+
+  get(name: string) {
+    return this.docProps.find((docProp) => docProp.name === name);
+  }
+
+  static from(object: any): DocPropList {
+    const props = Object.keys(object)
+      .map((key) => {
+        if (!object[key]) return undefined;
+        return new DocProp(key, object[key]);
+      })
+      .filter((prop) => !!prop) as DocProp[];
+
+    return new DocPropList(props);
+  }
+}

package/doc/doc-prop.ts

@@ -0,0 +1,19 @@
+import type { Serializable } from '@teambit/toolbox.types.serializable';
+
+export class DocProp {
+  constructor(
+    /**
+     * name of the doc property.
+     */
+    readonly name: string,
+
+    /**
+     * value of the doc property.
+     */
+    readonly value: Serializable
+  ) {}
+
+  getAs<T>() {
+    return this.value as T;
+  }
+}

package/doc/doc.ts

@@ -0,0 +1,42 @@
+import type { SerializableMap } from '@teambit/toolbox.types.serializable';
+import { DocPropList } from './doc-prop-list';
+
+export class Doc {
+  constructor(readonly filePath: string, readonly props: DocPropList) {}
+
+  toObject() {
+    return {
+      filePath: this.filePath,
+      props: this.props.docProps,
+    };
+  }
+
+  /**
+   * shorthand for getting the component description.
+   */
+  get description(): string {
+    const value = this.props.get('description')?.value;
+    if (!value) return '';
+    return value as string;
+  }
+
+  /**
+   * shorthand for getting the component labels.
+   */
+  get labels() {
+    const value = this.props.get('labels')?.value;
+    if (!value) return [];
+    return value as string[];
+  }
+
+  /**
+   * shorthand for getting the component labels.
+   */
+  get displayName() {
+    return this.props.get('displayName');
+  }
+
+  static from(path: string, propObject: SerializableMap) {
+    return new Doc(path, DocPropList.from(propObject));
+  }
+}

package/doc/index.ts

@@ -0,0 +1,3 @@
+export { Doc } from './doc';
+export { DocProp } from './doc-prop';
+export { DocPropList } from './doc-prop-list';

package/docs-store.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+// let docs = [];
+
+export function addDocs(docs: any[]) {
+  const Doc = docs[0];
+  ReactDOM.render(<Doc />, document.getElementById('root'));
+}

package/docs.data.tsx

@@ -0,0 +1,13 @@
+export const docsMock = {
+  title: 'Radio',
+  subTitle:
+    'Radio Buttons are graphical interface elements that allow user to choose only one of a predefined set of mutually exclusive options.',
+  labels: ['chart', 'graph', 'ui-components', 'react'],
+  installMethods: [
+    { title: 'install package', content: '@google.material-ui/radio' },
+    {
+      title: 'Import from CDN',
+      content: 'https://esm.bit.dev/@google/material-ui/radio/',
+    },
+  ],
+};

package/docs.preview.runtime.tsx

@@ -0,0 +1,48 @@
+import React, { ReactNode } from 'react';
+import { PreviewAspect, RenderingContext, PreviewPreview, PreviewRuntime, PreviewModule } from '@teambit/preview';
+
+import { DocsAspect } from './docs.aspect';
+
+export class DocsPreview {
+  constructor(
+    /**
+     * preview extension.
+     */
+    private preview: PreviewPreview
+  ) {}
+
+  render = (componentId: string, modules: PreviewModule, [compositions]: [any], context: RenderingContext) => {
+    const docsModule = this.selectPreviewModel(componentId, modules);
+
+    modules.mainModule.default(NoopProvider, componentId, docsModule, compositions, context);
+  };
+
+  selectPreviewModel(componentId: string, modules: PreviewModule) {
+    const relevant = modules.componentMap[componentId];
+    if (!relevant) return undefined;
+
+    // only one doc file is supported.
+    return relevant[0];
+  }
+
+  static runtime = PreviewRuntime;
+  static dependencies = [PreviewAspect];
+
+  static async provider([preview]: [PreviewPreview]) {
+    const docsPreview = new DocsPreview(preview);
+    preview.registerPreview({
+      name: 'overview',
+      render: docsPreview.render.bind(docsPreview),
+      selectPreviewModel: docsPreview.selectPreviewModel.bind(docsPreview),
+      include: ['compositions'],
+    });
+
+    return docsPreview;
+  }
+}
+
+DocsAspect.addRuntime(DocsPreview);
+
+function NoopProvider({ children }: { children: ReactNode }) {
+  return <>{children}</>;
+}

package/docs.ui.runtime.tsx

@@ -0,0 +1,25 @@
+import { ComponentAspect, ComponentUI } from '@teambit/component';
+import { UIRuntime } from '@teambit/ui';
+
+import { DocsAspect } from './docs.aspect';
+import { OverviewSection } from './overview.section';
+
+export class DocsUI {
+  static dependencies = [ComponentAspect];
+
+  static runtime = UIRuntime;
+
+  static async provider([component]: [ComponentUI]) {
+    const docs = new DocsUI();
+    const section = new OverviewSection(docs);
+
+    component.registerRoute(section.route);
+    component.registerNavigation(section.navigationLink, section.order);
+
+    return docs;
+  }
+}
+
+export default DocsUI;
+
+DocsAspect.addRuntime(DocsUI);

package/events/click-inside-an-iframe.ts

@@ -0,0 +1,14 @@
+/* eslint-disable max-classes-per-file */
+import { BitBaseEvent } from '@teambit/pubsub';
+
+class ClickInsideAnIframeEventData {
+  constructor(private clickEvent: any) {}
+}
+
+export class ClickInsideAnIframeEvent extends BitBaseEvent<ClickInsideAnIframeEventData> {
+  static readonly TYPE = 'click-inside-an-iframe';
+
+  constructor(readonly timestamp = Date.now(), readonly clickEvent) {
+    super(ClickInsideAnIframeEvent.TYPE, '0.0.1', timestamp, new ClickInsideAnIframeEventData(clickEvent));
+  }
+}

package/events/index.ts

@@ -0,0 +1 @@
+export * from './click-inside-an-iframe';

package/exceptions/doc-read-error.ts

@@ -0,0 +1,5 @@
+export class DocReadError extends Error {
+  constructor(filePath: string, error: Error) {
+    super(`failed reading doc in file path: ${filePath} with error: ${error}`);
+  }
+}

package/exceptions/file-extension-not-supported.ts

@@ -0,0 +1,6 @@
+export class FileExtensionNotSupported extends Error {
+  constructor(filePath: string, extension: string) {
+    super(`failed reading doc file: ${filePath} as file extension ${extension} is not supported
+by any of registered component doc readers. To register a doc reader please use the 'registerDocReader' API of the teambit.docs/docs.`);
+  }
+}

package/exceptions/index.ts

@@ -0,0 +1,2 @@
+export { FileExtensionNotSupported } from './file-extension-not-supported';
+export { DocReadError } from './doc-read-error';

package/overview/index.ts

@@ -0,0 +1 @@
+export { Overview } from './overview';

package/overview/overview.tsx

@@ -0,0 +1,23 @@
+import React, { useContext } from 'react';
+import { ComponentContext } from '@teambit/component';
+import { ComponentPreview } from '@teambit/preview.ui.component-preview';
+import { StatusMessageCard } from '@teambit/design.ui.surfaces.status-message-card';
+
+export function Overview() {
+  const component = useContext(ComponentContext);
+  if (component?.buildStatus === 'pending' && component?.host === 'teambit.scope/scope')
+    return (
+      <StatusMessageCard style={{ margin: 'auto' }} status="PROCESSING" title="component preview pending">
+        this might take some time
+      </StatusMessageCard>
+    );
+  if (component?.buildStatus === 'failed' && component?.host === 'teambit.scope/scope')
+    return (
+      <StatusMessageCard
+        style={{ margin: 'auto' }}
+        status="FAILURE"
+        title="failed to get component preview "
+      ></StatusMessageCard>
+    );
+  return <ComponentPreview component={component} style={{ width: '100%', height: '100%' }} previewName="overview" />;
+}

package/overview.section.tsx

@@ -0,0 +1,28 @@
+import { Section } from '@teambit/component';
+import React from 'react';
+
+import { DocsUI } from './docs.ui.runtime';
+import { Overview } from './overview';
+
+export class OverviewSection implements Section {
+  constructor(
+    /**
+     * docs ui extension.
+     */
+    private docs: DocsUI
+  ) {}
+
+  navigationLink = {
+    href: '',
+    exact: true,
+    children: 'Overview',
+  };
+
+  route = {
+    path: '',
+    exact: true,
+    children: <Overview />,
+  };
+
+  order = 10;
+}

package/package.json

@@ -1,33 +1,33 @@
 {
   "name": "@teambit/docs",
-  "version": "0.0.568",
+  "version": "0.0.569",
   "homepage": "https://bit.dev/teambit/docs/docs",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.docs",
     "name": "docs",
-    "version": "0.0.568"
+    "version": "0.0.569"
   },
   "dependencies": {
     "@teambit/harmony": "0.2.11",
     "graphql-tag": "2.12.1",
     "@babel/runtime": "7.12.18",
     "core-js": "^3.0.0",
-    "@teambit/compiler": "0.0.568",
-    "@teambit/component": "0.0.568",
-    "@teambit/pkg": "0.0.568",
-    "@teambit/workspace": "0.0.568",
-    "@teambit/cli": "0.0.394",
-    "@teambit/dev-files": "0.0.568",
-    "@teambit/envs": "0.0.568",
-    "@teambit/graphql": "0.0.568",
-    "@teambit/logger": "0.0.480",
-    "@teambit/preview": "0.0.568",
-    "@teambit/ui": "0.0.568",
-    "@teambit/toolbox.types.serializable": "0.0.468",
-    "@teambit/pubsub": "0.0.568",
+    "@teambit/compiler": "0.0.569",
+    "@teambit/component": "0.0.569",
+    "@teambit/pkg": "0.0.569",
+    "@teambit/workspace": "0.0.569",
+    "@teambit/cli": "0.0.395",
+    "@teambit/dev-files": "0.0.569",
+    "@teambit/envs": "0.0.569",
+    "@teambit/graphql": "0.0.569",
+    "@teambit/logger": "0.0.481",
+    "@teambit/preview": "0.0.569",
+    "@teambit/ui": "0.0.569",
+    "@teambit/toolbox.types.serializable": "0.0.469",
+    "@teambit/pubsub": "0.0.569",
     "@teambit/design.ui.surfaces.status-message-card": "0.0.6",
-    "@teambit/preview.ui.component-preview": "0.0.471"
+    "@teambit/preview.ui.component-preview": "0.0.472"
   },
   "devDependencies": {
     "@types/react-dom": "^17.0.5",
@@ -38,7 +38,7 @@
     "@types/node": "12.20.4"
   },
   "peerDependencies": {
-    "@teambit/legacy": "1.0.180",
+    "@teambit/legacy": "1.0.181",
     "react-dom": "^16.8.0 || ^17.0.0",
     "react": "^16.8.0 || ^17.0.0"
   },
@@ -66,27 +66,12 @@
         "react": "-"
       },
       "peerDependencies": {
-        "@teambit/legacy": "1.0.180",
+        "@teambit/legacy": "1.0.181",
         "react-dom": "^16.8.0 || ^17.0.0",
         "react": "^16.8.0 || ^17.0.0"
       }
     }
   },
-  "files": [
-    "dist",
-    "!dist/tsconfig.tsbuildinfo",
-    "**/*.md",
-    "**/*.mdx",
-    "**/*.js",
-    "**/*.json",
-    "**/*.sass",
-    "**/*.scss",
-    "**/*.less",
-    "**/*.css",
-    "**/*.css",
-    "**/*.jpeg",
-    "**/*.gif"
-  ],
   "private": false,
   "engines": {
     "node": ">=12.22.0"

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;
+}