@teambit/component 0.0.566 → 0.0.570

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';

package/ui/component-error/component-error.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { NotFoundPage } from '@teambit/design.ui.pages.not-found';
+import { ServerErrorPage } from '@teambit/design.ui.pages.server-error';
+
+export class ComponentError {
+  constructor(
+    /**
+     * http status code of error
+     */
+    public readonly code: number,
+
+    /**
+     * error message of the error
+     */
+    public readonly message?: string
+  ) {}
+
+  renderError() {
+    if (this.code === 404) return <NotFoundPage />;
+    return <ServerErrorPage />;
+  }
+}

package/ui/component-error/index.ts

@@ -0,0 +1 @@
+export { ComponentError } from './component-error';

package/ui/component-model/component-model.ts

@@ -0,0 +1,169 @@
+import { Composition, CompositionProps } from '@teambit/compositions';
+import { DeprecationInfo } from '@teambit/deprecation';
+import { Descriptor } from '@teambit/envs';
+import { ComponentID, ComponentIdObj } from '@teambit/component-id';
+
+import { Tag } from '../../tag';
+import { TagMap } from '../../tag-map';
+import { TagProps } from '../../tag/tag';
+// import { Snap } from '../../snap';
+
+// ADDING MORE PROPERTIES HERE IS NOT ALLOWED!!! IF YOU NEED DATA PLEASE ADD A NEW
+// HOOK FROM YOUR ASPECT!!!
+// TODO: remove all properties from here to their rightful place in their aspects.
+export type ComponentModelProps = {
+  id: ComponentIdObj;
+  description: string;
+  buildStatus?: string;
+  server?: ComponentServer;
+  displayName: string;
+  packageName: string; // pkg aspect
+  elementsUrl?: string; // pkg aspect
+  compositions?: CompositionProps[];
+  tags?: TagProps[];
+  issuesCount?: number; // component/issues aspect
+  status?: any; // workspace aspect.
+  deprecation?: DeprecationInfo; // deprecation aspect
+  env?: Descriptor; // env aspect.
+  labels?: string[];
+  host?: string;
+};
+
+export type ComponentServer = {
+  env: string;
+  url: string;
+};
+
+export class ComponentModel {
+  constructor(
+    /**
+     * id of the component
+     */
+    readonly id: ComponentID,
+
+    /**
+     * display name of the component.
+     */
+    readonly displayName: string,
+
+    /**
+     * package name of the component.
+     */
+    readonly packageName: string,
+
+    /**
+     * the component server.
+     */
+    readonly server: ComponentServer | undefined,
+
+    /**
+     * array of compositions
+     */
+    readonly compositions: Composition[],
+
+    /**
+     * tags of the component.
+     */
+    readonly tags: TagMap,
+
+    /**
+     * component build status
+     */
+    readonly buildStatus?: string,
+
+    /**
+     * issues of component.
+     */
+    readonly issuesCount?: number,
+    /**
+     * elements url
+     */
+    readonly elementsUrl?: string,
+    /**
+     * status of component.
+     */
+    readonly status?: any,
+
+    /**
+     * deprecation info of the component.
+     */
+    readonly deprecation?: DeprecationInfo,
+
+    /**
+     * env descriptor.
+     */
+    readonly environment?: Descriptor,
+
+    /**
+     * description of the component.
+     */
+
+    readonly description = '',
+
+    readonly labels: string[] = [],
+
+    /**
+     * host of the component
+     */
+    readonly host?: string
+  ) {}
+
+  get version() {
+    if (!this.id.version) return 'new';
+    return this.id.version;
+  }
+
+  /**
+   * create an instance of a component from a plain object.
+   */
+  static from({
+    id,
+    server,
+    displayName,
+    compositions = [],
+    packageName,
+    elementsUrl,
+    tags = [],
+    deprecation,
+    buildStatus,
+    env,
+    status,
+    issuesCount,
+    description,
+    labels,
+    host,
+  }: ComponentModelProps) {
+    return new ComponentModel(
+      ComponentID.fromObject(id),
+      displayName,
+      packageName,
+      server,
+      Composition.fromArray(compositions),
+      TagMap.fromArray(tags.map((tag) => Tag.fromObject(tag))),
+      buildStatus,
+      issuesCount,
+      elementsUrl,
+      status,
+      deprecation,
+      env,
+      description,
+      labels,
+      host
+    );
+  }
+
+  static fromArray(componentsProps: ComponentModelProps[]) {
+    return componentsProps.map((rawComponent) => ComponentModel.from(rawComponent));
+  }
+
+  static empty() {
+    return new ComponentModel(
+      ComponentID.fromObject({ name: 'root', scope: 'temp' }),
+      '',
+      '',
+      { env: '', url: '' },
+      [],
+      TagMap.empty()
+    );
+  }
+}

package/ui/component-model/index.ts

@@ -0,0 +1 @@
+export { ComponentModel, ComponentModelProps } from './component-model';