@teambit/component 0.0.565 → 0.0.569

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@teambit/component",
-  "version": "0.0.565",
+  "version": "0.0.569",
   "homepage": "https://bit.dev/teambit/component/component",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.component",
     "name": "component",
-    "version": "0.0.565"
+    "version": "0.0.569"
   },
   "dependencies": {
     "lodash": "4.17.21",
@@ -26,38 +26,38 @@
     "@teambit/base-ui.routing.nav-link": "1.0.0",
     "@teambit/documenter.ui.heading": "4.1.1",
     "@teambit/documenter.ui.separator": "4.1.1",
-    "@teambit/component-id": "0.0.382",
-    "@teambit/ui-foundation.ui.menu-widget-icon": "0.0.471",
-    "@teambit/aspect-loader": "0.0.565",
-    "@teambit/legacy-bit-id": "0.0.381",
-    "@teambit/toolbox.string.capitalize": "0.0.466",
-    "@teambit/cli": "0.0.392",
-    "@teambit/config": "0.0.404",
-    "@teambit/express": "0.0.481",
-    "@teambit/graphql": "0.0.565",
-    "@teambit/bit-error": "0.0.378",
-    "@teambit/command-bar": "0.0.565",
-    "@teambit/preview": "0.0.565",
-    "@teambit/pubsub": "0.0.565",
-    "@teambit/ui-foundation.ui.is-browser": "0.0.469",
-    "@teambit/ui-foundation.ui.main-dropdown": "0.0.469",
-    "@teambit/ui-foundation.ui.react-router.slot-router": "0.0.471",
-    "@teambit/ui": "0.0.565",
-    "@teambit/component-issues": "0.0.27",
-    "@teambit/ui-foundation.ui.hooks.use-data-query": "0.0.470",
-    "@teambit/cli-table": "0.0.15",
-    "@teambit/ui-foundation.ui.react-router.use-query": "0.0.469",
+    "@teambit/component-id": "0.0.385",
+    "@teambit/ui-foundation.ui.menu-widget-icon": "0.0.474",
+    "@teambit/aspect-loader": "0.0.569",
+    "@teambit/legacy-bit-id": "0.0.384",
+    "@teambit/toolbox.string.capitalize": "0.0.469",
+    "@teambit/cli": "0.0.395",
+    "@teambit/config": "0.0.407",
+    "@teambit/express": "0.0.485",
+    "@teambit/graphql": "0.0.569",
+    "@teambit/bit-error": "0.0.381",
+    "@teambit/command-bar": "0.0.569",
+    "@teambit/preview": "0.0.569",
+    "@teambit/pubsub": "0.0.569",
+    "@teambit/ui-foundation.ui.is-browser": "0.0.472",
+    "@teambit/ui-foundation.ui.main-dropdown": "0.0.472",
+    "@teambit/ui-foundation.ui.react-router.slot-router": "0.0.474",
+    "@teambit/ui": "0.0.569",
+    "@teambit/component-issues": "0.0.30",
+    "@teambit/ui-foundation.ui.hooks.use-data-query": "0.0.473",
+    "@teambit/cli-table": "0.0.18",
+    "@teambit/ui-foundation.ui.react-router.use-query": "0.0.472",
     "@teambit/design.ui.empty-box": "0.0.352",
-    "@teambit/harmony.ui.aspect-box": "0.0.469",
+    "@teambit/harmony.ui.aspect-box": "0.0.472",
     "@teambit/design.ui.pages.not-found": "0.0.352",
     "@teambit/design.ui.pages.server-error": "0.0.352",
-    "@teambit/compositions": "0.0.565",
-    "@teambit/deprecation": "0.0.565",
-    "@teambit/envs": "0.0.565",
-    "@teambit/component.ui.version-dropdown": "0.0.473",
-    "@teambit/ui-foundation.ui.use-box.dropdown": "0.0.90",
-    "@teambit/ui-foundation.ui.use-box.menu": "0.0.90",
-    "@teambit/ui-foundation.ui.react-router.extend-path": "0.0.469"
+    "@teambit/compositions": "0.0.569",
+    "@teambit/deprecation": "0.0.569",
+    "@teambit/envs": "0.0.569",
+    "@teambit/component.ui.version-dropdown": "0.0.476",
+    "@teambit/ui-foundation.ui.use-box.dropdown": "0.0.93",
+    "@teambit/ui-foundation.ui.use-box.menu": "0.0.93",
+    "@teambit/ui-foundation.ui.react-router.extend-path": "0.0.472"
   },
   "devDependencies": {
     "@types/lodash": "4.14.165",
@@ -72,11 +72,11 @@
     "@types/jest": "^26.0.0",
     "@types/react-dom": "^17.0.5",
     "@types/node": "12.20.4",
-    "@teambit/component.aspect-docs.component": "0.0.111"
+    "@teambit/component.aspect-docs.component": "0.0.115"
   },
   "peerDependencies": {
     "@apollo/client": "^3.0.0",
-    "@teambit/legacy": "1.0.178",
+    "@teambit/legacy": "1.0.181",
     "react-dom": "^16.8.0 || ^17.0.0",
     "react": "^16.8.0 || ^17.0.0"
   },
@@ -104,27 +104,12 @@
         "react": "-"
       },
       "peerDependencies": {
-        "@teambit/legacy": "1.0.178",
+        "@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/section/index.ts

@@ -0,0 +1 @@
+export { Section } from './section';

package/section/section.tsx

@@ -0,0 +1,8 @@
+import { NavLinkProps } from '@teambit/base-ui.routing.nav-link';
+import { RouteProps } from 'react-router-dom';
+
+export interface Section {
+  route: RouteProps;
+  navigationLink: NavLinkProps;
+  order?: number;
+}

package/show/extensions.fragment.ts

@@ -0,0 +1,23 @@
+import { ShowFragment } from './show-fragment';
+import { Component } from '../component';
+
+export class ExtensionsFragment implements ShowFragment {
+  private renderList(component: Component) {
+    const aspects = component.state.aspects.entries.map((entry) => entry.id.toString());
+    return aspects.join('\n');
+  }
+
+  async renderRow(component: Component) {
+    return {
+      title: 'extensions',
+      content: this.renderList(component),
+    };
+  }
+
+  async json(component: Component) {
+    return {
+      title: 'configuration',
+      json: component.state.aspects.serialize() as any,
+    };
+  }
+}

package/show/files.fragment.ts

@@ -0,0 +1,24 @@
+import { ShowFragment } from './show-fragment';
+import { Component } from '../component';
+
+export class FilesFragment implements ShowFragment {
+  async renderRow(component: Component) {
+    return {
+      title: 'files',
+      content: this.getRelativePaths(component).join('\n'),
+    };
+  }
+
+  async json(component: Component) {
+    return {
+      title: 'files',
+      json: this.getRelativePaths(component),
+    };
+  }
+
+  private getRelativePaths(component: Component) {
+    return component.state.filesystem.files.map((file) => file.relative);
+  }
+
+  weight = 4;
+}

package/show/id.fragment.ts

@@ -0,0 +1,20 @@
+import { ShowFragment } from './show-fragment';
+import { Component } from '../component';
+
+export class IDFragment implements ShowFragment {
+  async renderRow(component: Component) {
+    return {
+      title: 'id',
+      content: component.id.toString(),
+    };
+  }
+
+  async json(component: Component) {
+    return {
+      title: 'id',
+      json: component.id.toString(),
+    };
+  }
+
+  weight = 0;
+}

package/show/index.ts

@@ -0,0 +1,8 @@
+export { ShowFragment, ShowRow } from './show-fragment';
+export { ShowCmd } from './show.cmd';
+export { MainFileFragment } from './main-file.fragment';
+export { NameFragment } from './name.fragment';
+export { IDFragment } from './id.fragment';
+export { ScopeFragment } from './scope.fragment';
+export { FilesFragment } from './files.fragment';
+export { ExtensionsFragment } from './extensions.fragment';

package/show/main-file.fragment.ts

@@ -0,0 +1,13 @@
+import { ShowFragment } from './show-fragment';
+import { Component } from '../component';
+
+export class MainFileFragment implements ShowFragment {
+  async renderRow(component: Component) {
+    return {
+      title: 'main file',
+      content: component.state._consumer.mainFile,
+    };
+  }
+
+  weight = 4;
+}

package/show/name.fragment.ts

@@ -0,0 +1,13 @@
+import { ShowFragment } from './show-fragment';
+import { Component } from '../component';
+
+export class NameFragment implements ShowFragment {
+  async renderRow(component: Component) {
+    return {
+      title: 'name',
+      content: component.id.fullName,
+    };
+  }
+
+  weight = 2;
+}

package/show/scope.fragment.ts

@@ -0,0 +1,15 @@
+import { ShowFragment } from './show-fragment';
+import { Component } from '../component';
+
+export class ScopeFragment implements ShowFragment {
+  async renderRow(component: Component) {
+    return {
+      title: 'scope',
+      content: component.id.scope || '',
+    };
+  }
+
+  getRow() {}
+
+  weight = 1;
+}

package/show/show-fragment.ts

@@ -0,0 +1,44 @@
+import { Component } from '../component';
+
+export interface ShowFragment {
+  /**
+   * render a row into the `show` CLI.
+   */
+  renderRow(component: Component): Promise<ShowRow>;
+
+  /**
+   * return a json output.
+   */
+  json?(component: Component): Promise<JSONRow>;
+
+  /**
+   * weight is used to determine the position of the fragment
+   * within the `show` table.
+   */
+  weight?: number;
+}
+
+export interface JSONRow {
+  /**
+   * name of the field.
+   */
+  title: string;
+
+  /**
+   * json content.
+   * TODO: change this from any to a more structured type (e.g. Serializable).
+   */
+  json: any;
+}
+
+export interface ShowRow {
+  /**
+   * title of the fragment
+   */
+  title: string;
+
+  /**
+   * content to render within the fragment.
+   */
+  content: string;
+}

package/show/show.cmd.ts

@@ -0,0 +1,85 @@
+import { Command, CommandOptions } from '@teambit/cli';
+// import { Logger } from '@teambit/logger';
+// import chalk from 'chalk';
+import { CLITable } from '@teambit/cli-table';
+import { MissingBitMapComponent } from '@teambit/legacy/dist/consumer/bit-map/exceptions';
+import { BitId } from '@teambit/legacy-bit-id';
+import LegacyShow from '@teambit/legacy/dist/cli/commands/public-cmds/show-cmd';
+import { ComponentMain } from '../component.main.runtime';
+
+export class ShowCmd implements Command {
+  name = 'show <id>';
+  description = 'show a component';
+  alias = '';
+  group = 'info';
+  options = [
+    ['j', 'json', 'return the component data in json format'],
+    ['l', 'legacy', 'use the legacy bit show.'],
+    ['r', 'remote', 'show a remote component'],
+    [
+      'c',
+      'compare',
+      'compare current file system component to latest tagged component [default=latest]. only works in legacy.',
+    ],
+  ] as CommandOptions;
+
+  constructor(private component: ComponentMain) {}
+
+  private async getComponent(idStr: string, remote: boolean) {
+    if (remote) {
+      const bitId: BitId = BitId.parse(idStr, true); // user used --remote so we know it has a scope
+      const host = this.component.getHost('teambit.scope/scope');
+      const id = await host.resolveComponentId(bitId);
+      if (!host.getRemoteComponent) {
+        throw new Error('Component Host does not implement getRemoteComponent()');
+      }
+      const component = await host.getRemoteComponent(id);
+      return component;
+    }
+    const host = this.component.getHost();
+    const id = await host.resolveComponentId(idStr);
+    const component = await host.get(id);
+    if (!component) throw new MissingBitMapComponent(idStr);
+    return component;
+  }
+
+  async useLegacy(id: string, json = false, remote = false, compare = false) {
+    const legacyShow = new LegacyShow();
+    const showData = await legacyShow.action([id], {
+      json,
+      versions: undefined,
+      remote,
+      compare,
+    });
+
+    return legacyShow.report(showData);
+  }
+
+  async report([idStr]: [string], { legacy, remote, compare }: { legacy: boolean; remote: boolean; compare: boolean }) {
+    if (legacy) return this.useLegacy(idStr, false, remote, compare);
+    const component = await this.getComponent(idStr, remote);
+    const fragments = this.component.getShowFragments();
+    const rows = await Promise.all(
+      fragments.map(async (fragment) => {
+        const row = await fragment.renderRow(component);
+        return [row.title, row.content];
+      })
+    );
+
+    const table = new CLITable([], rows);
+    return table.render();
+  }
+
+  async json([idStr]: [string], { remote, legacy }: { remote: boolean; legacy: boolean }) {
+    if (legacy) return JSON.parse(await this.useLegacy(idStr, true, remote));
+    const component = await this.getComponent(idStr, remote);
+    const fragments = this.component.getShowFragments();
+    const rows = await Promise.all(
+      fragments.map(async (fragment) => {
+        return fragment.json ? fragment.json(component) : undefined;
+      })
+    );
+
+    return rows.filter((row) => !!row);
+  }
+}

package/snap/author.ts

@@ -0,0 +1,19 @@
+/**
+ * author type.
+ */
+export type Author = {
+  /**
+   * author full name (for example: "Ran Mizrahi")
+   */
+  displayName: string;
+  /**
+   * author username (for example: "ranm8")
+   */
+  name?: string; // added this to support the usual structure of an author
+  // TODO - @ran, is this ok with you?
+
+  /**
+   * author email in a proper format (e.g. "ran@bit.dev")
+   */
+  email: string;
+};

package/snap/index.ts

@@ -0,0 +1,2 @@
+export { Author } from './author';
+export { Snap, SnapProps } from './snap';

package/snap/snap.ts

@@ -0,0 +1,63 @@
+import { Author } from './author';
+
+export type SnapProps = {
+  hash: string;
+  timestamp: string;
+  parents: string[];
+  author: Author;
+  message: string;
+};
+
+/**
+ * `Snap` represents a sealed state of the component in the working tree.
+ */
+export class Snap {
+  constructor(
+    /**
+     * hash of the snap.
+     */
+    readonly hash: string,
+
+    /**
+     * date time of the snap.
+     */
+    readonly timestamp: Date,
+
+    /**
+     * parent snap
+     */
+    readonly parents: string[],
+
+    /**
+     * author of the component `Snap`.
+     */
+    readonly author: Author,
+
+    /**
+     * message added by the `Snap` author.
+     */
+    readonly message: string
+  ) {}
+
+  static fromObject(snapObject: SnapProps) {
+    const parents = snapObject.parents || [];
+
+    return new Snap(
+      snapObject.hash,
+      new Date(parseInt(snapObject.timestamp)),
+      parents,
+      snapObject.author,
+      snapObject.message
+    );
+  }
+
+  toObject(): SnapProps {
+    return {
+      timestamp: this.timestamp.getTime().toString(),
+      hash: this.hash,
+      author: this.author,
+      message: this.message,
+      parents: this.parents,
+    };
+  }
+}

package/tag/index.ts

@@ -0,0 +1 @@
+export { Tag } from './tag';

package/tag/tag.ts

@@ -0,0 +1,37 @@
+import { SemVer } from 'semver';
+
+export type TagProps = {
+  hash: string;
+  version: string;
+};
+
+/**
+ * `Tag` provides a sematic reference to a specific state `Snap` in the working tree.
+ */
+export class Tag {
+  constructor(
+    /**
+     * tag hash, can be used to load it by component-factory.getSnap
+     */
+    readonly hash: string,
+
+    /**
+     * sematic version of the snap.
+     */
+    readonly version: SemVer
+  ) {}
+
+  /**
+   * create a plain tag object.
+   */
+  toObject(): TagProps {
+    return {
+      hash: this.hash,
+      version: this.version.raw,
+    };
+  }
+
+  static fromObject(tag: TagProps) {
+    return new Tag(tag.hash, new SemVer(tag.version));
+  }
+}

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

package/ui/aspect-page/aspect-page.tsx

@@ -0,0 +1,64 @@
+import { AspectBox } from '@teambit/harmony.ui.aspect-box';
+import { ComponentContext } from '@teambit/component';
+import React, { useContext } from 'react';
+import { useDataQuery } from '@teambit/ui-foundation.ui.hooks.use-data-query';
+import { gql } from '@apollo/client';
+import { EmptyBox } from '@teambit/design.ui.empty-box';
+import { H1 } from '@teambit/documenter.ui.heading';
+import { Separator } from '@teambit/documenter.ui.separator';
+import styles from './aspect-page.module.scss';
+
+const GET_COMPONENT = gql`
+  query($id: String!) {
+    getHost {
+      get(id: $id) {
+        aspects {
+          id
+          config
+          data
+          icon
+        }
+      }
+    }
+  }
+`;
+
+export function AspectPage() {
+  const component = useContext(ComponentContext);
+  const { data } = useDataQuery(GET_COMPONENT, {
+    variables: { id: component.id._legacy.name },
+  });
+  const aspectList = data?.getHost?.get?.aspects;
+
+  if (aspectList && aspectList.length === 0) {
+    return (
+      <EmptyBox
+        title="This component is new and doesn’t have any aspects."
+        linkText="Learn more about component aspects"
+        link="https://harmony-docs.bit.dev/aspects/aspects-overview"
+      />
+    );
+  }
+
+  return (
+    <div className={styles.aspectPage}>
+      <div>
+        <H1 className={styles.title}>Configuration</H1>
+        <Separator className={styles.separator} />
+        {aspectList &&
+          aspectList.map((aspect, index) => {
+            return (
+              <AspectBox
+                key={index}
+                className={styles.aspectBox}
+                name={aspect.id}
+                icon={aspect.icon}
+                config={aspect.config}
+                data={aspect.data}
+              />
+            );
+          })}
+      </div>
+    </div>
+  );
+}

package/ui/aspect-page/index.ts

@@ -0,0 +1 @@
+export { AspectPage } from './aspect-page';