@teambit/react 0.0.568 → 0.0.569

package/compositions-app.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { Composer } from '@teambit/base-ui.utils.composer';
+import { StandaloneNotFoundPage } from '@teambit/design.ui.pages.standalone-not-found-page';
+import { RenderingContext } from '@teambit/preview';
+import { ErrorFallback } from '@teambit/react.ui.error-fallback';
+import { LoaderFallback } from '@teambit/react.ui.loader-fallback';
+import { ErrorBoundary } from 'react-error-boundary';
+import { ReactAspect } from './react.aspect';
+
+// hide scrollbars so they won't be visible in the preview at the component card (and it's ok not to show them in the compositions page)
+const hideScrollbars = 'body::-webkit-scrollbar {display: none;}';
+
+export function CompositionsApp({
+  Composition,
+  previewContext,
+}: {
+  Composition?: React.ComponentType;
+  previewContext: RenderingContext;
+}) {
+  const reactContext = previewContext.get(ReactAspect.id);
+  const providers = reactContext?.providers || [];
+
+  return (
+    <ErrorBoundary FallbackComponent={ErrorFallback} resetKeys={[Composition]}>
+      <Composer components={providers}>
+        <style>{hideScrollbars}</style>
+        <LoaderFallback Target={Composition} DefaultComponent={StandaloneNotFoundPage} />
+      </Composer>
+    </ErrorBoundary>
+  );
+}

package/highlighter-widget.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { OptionButton } from '@teambit/design.ui.input.option-button';
+import { Tooltip } from '@teambit/design.ui.tooltip';
+import { usePreviewQueryParams } from '@teambit/compositions.ui.hooks.use-composition';
+
+const PARAM_NAME = 'highlighter';
+
+export function HighlighterWidget() {
+  const [active, setActive] = usePreviewQueryParams(PARAM_NAME);
+
+  return (
+    <Tooltip content="Component Highlighter (beta)">
+      {/* tooltip requires child with ref */}
+      <span>
+        <OptionButton icon="highlighter-toggle" onClick={() => setActive(!active)} active={active} />
+      </span>
+    </Tooltip>
+  );
+}

package/mount.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { RenderingContext } from '@teambit/preview';
+
+import { CompositionsApp } from './compositions-app';
+
+/**
+ * this mounts compositions into the DOM in the component preview.
+ * this function can be overridden through ReactAspect.overrideCompositionsMounter() API
+ * to apply custom logic for component DOM mounting.
+ */
+export default (Composition: React.ComponentType, previewContext: RenderingContext) => {
+  ReactDOM.render(
+    <CompositionsApp Composition={Composition} previewContext={previewContext} />,
+    document.getElementById('root')
+  );
+};

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@teambit/react",
-  "version": "0.0.568",
+  "version": "0.0.569",
   "homepage": "https://bit.dev/teambit/react/react",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.react",
     "name": "react",
-    "version": "0.0.568"
+    "version": "0.0.569"
   },
   "dependencies": {
     "react-error-boundary": "^3.0.0",
@@ -79,47 +79,47 @@
     "@teambit/react.instructions.react.adding-compositions": "0.0.6",
     "@teambit/react.instructions.react.adding-tests": "0.0.6",
     "@teambit/design.ui.pages.standalone-not-found-page": "0.0.354",
-    "@teambit/preview": "0.0.568",
-    "@teambit/react.ui.error-fallback": "0.0.95",
-    "@teambit/react.ui.loader-fallback": "0.0.73",
-    "@teambit/compositions.ui.hooks.use-composition": "0.0.148",
+    "@teambit/preview": "0.0.569",
+    "@teambit/react.ui.error-fallback": "0.0.96",
+    "@teambit/react.ui.loader-fallback": "0.0.74",
+    "@teambit/compositions.ui.hooks.use-composition": "0.0.149",
     "@teambit/design.ui.input.option-button": "0.0.26",
     "@teambit/design.ui.tooltip": "0.0.352",
-    "@teambit/application": "0.0.210",
-    "@teambit/bundler": "0.0.568",
-    "@teambit/builder": "0.0.568",
-    "@teambit/isolator": "0.0.568",
-    "@teambit/toolbox.network.get-port": "0.0.98",
-    "@teambit/compiler": "0.0.568",
-    "@teambit/component.modules.component-url": "0.0.105",
-    "@teambit/component": "0.0.568",
-    "@teambit/envs": "0.0.568",
-    "@teambit/eslint": "0.0.568",
-    "@teambit/formatter": "0.0.119",
-    "@teambit/jest": "0.0.568",
-    "@teambit/linter": "0.0.568",
-    "@teambit/pkg": "0.0.568",
-    "@teambit/prettier": "0.0.119",
-    "@teambit/react.ui.highlighter.component-metadata.bit-component-meta": "0.0.5",
-    "@teambit/schema": "0.0.568",
-    "@teambit/tester": "0.0.568",
-    "@teambit/typescript": "0.0.568",
-    "@teambit/webpack": "0.0.568",
-    "@teambit/workspace": "0.0.568",
-    "@teambit/cli": "0.0.394",
-    "@teambit/dependency-resolver": "0.0.568",
-    "@teambit/generator": "0.0.568",
-    "@teambit/graphql": "0.0.568",
-    "@teambit/react.ui.highlighter-provider": "0.0.159",
-    "@teambit/compositions": "0.0.568",
-    "@teambit/ui": "0.0.568",
-    "@teambit/react.eslint-config-bit-react": "0.0.472",
-    "@teambit/mdx.modules.mdx-loader": "0.0.472",
-    "@teambit/react.babel.bit-react-transformer": "0.0.479",
-    "@teambit/webpack.modules.generate-style-loaders": "0.0.88",
-    "@teambit/webpack.modules.style-regexps": "0.0.117",
-    "@teambit/component-id": "0.0.384",
-    "@teambit/config": "0.0.406"
+    "@teambit/application": "0.0.211",
+    "@teambit/bundler": "0.0.569",
+    "@teambit/builder": "0.0.569",
+    "@teambit/isolator": "0.0.569",
+    "@teambit/toolbox.network.get-port": "0.0.99",
+    "@teambit/compiler": "0.0.569",
+    "@teambit/component.modules.component-url": "0.0.106",
+    "@teambit/component": "0.0.569",
+    "@teambit/envs": "0.0.569",
+    "@teambit/eslint": "0.0.569",
+    "@teambit/formatter": "0.0.120",
+    "@teambit/jest": "0.0.569",
+    "@teambit/linter": "0.0.569",
+    "@teambit/pkg": "0.0.569",
+    "@teambit/prettier": "0.0.120",
+    "@teambit/react.ui.highlighter.component-metadata.bit-component-meta": "0.0.6",
+    "@teambit/schema": "0.0.569",
+    "@teambit/tester": "0.0.569",
+    "@teambit/typescript": "0.0.569",
+    "@teambit/webpack": "0.0.569",
+    "@teambit/workspace": "0.0.569",
+    "@teambit/cli": "0.0.395",
+    "@teambit/dependency-resolver": "0.0.569",
+    "@teambit/generator": "0.0.569",
+    "@teambit/graphql": "0.0.569",
+    "@teambit/react.ui.highlighter-provider": "0.0.160",
+    "@teambit/compositions": "0.0.569",
+    "@teambit/ui": "0.0.569",
+    "@teambit/react.eslint-config-bit-react": "0.0.473",
+    "@teambit/mdx.modules.mdx-loader": "0.0.473",
+    "@teambit/react.babel.bit-react-transformer": "0.0.480",
+    "@teambit/webpack.modules.generate-style-loaders": "0.0.89",
+    "@teambit/webpack.modules.style-regexps": "0.0.118",
+    "@teambit/component-id": "0.0.385",
+    "@teambit/config": "0.0.407"
   },
   "devDependencies": {
     "@types/react": "^17.0.8",
@@ -134,10 +134,10 @@
     "@types/mocha": "5.2.7",
     "@types/testing-library__jest-dom": "5.9.5",
     "@types/jest": "^26.0.0",
-    "@teambit/react.aspect-docs.react": "0.0.114"
+    "@teambit/react.aspect-docs.react": "0.0.115"
   },
   "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"
   },
@@ -199,27 +199,12 @@
         "@types/jest": "^26.0.0"
       },
       "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/react.composition.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+export const Logo = () => (
+  <div style={{ height: '100%', display: 'flex', justifyContent: 'center' }}>
+    <img style={{ width: 70 }} src="https://static.bit.dev/brands/logo-react.svg" />
+  </div>
+);

package/react.ui.runtime.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { CompositionsAspect, CompositionsUI } from '@teambit/compositions';
+import { UIRuntime } from '@teambit/ui';
+import { TesterAspect, TesterUI } from '@teambit/tester';
+import { AddingTests } from '@teambit/react.instructions.react.adding-tests';
+import { AddingCompositions } from '@teambit/react.instructions.react.adding-compositions';
+import { ReactAspect } from './react.aspect';
+import { HighlighterWidget } from './highlighter-widget';
+
+export class ReactUI {
+  static runtime = UIRuntime;
+  static slots = [];
+  static dependencies = [CompositionsAspect, TesterAspect];
+
+  static async provider([compositionsUI, testerUi]: [CompositionsUI, TesterUI]) {
+    const reactUI = new ReactUI();
+    testerUi.registerEmptyState(() => {
+      return <AddingTests />;
+    });
+    compositionsUI.registerEmptyState(() => {
+      return <AddingCompositions />;
+    });
+
+    compositionsUI.registerMenuWidget({
+      location: 'start',
+      content: <HighlighterWidget />,
+    });
+
+    return reactUI;
+  }
+}
+
+ReactAspect.addRuntime(ReactUI);
+
+export default ReactUI;

package/templates/react-app/files/app-root.ts

@@ -0,0 +1,10 @@
+import { ComponentContext } from '@teambit/generator';
+
+export function appRootFile({ namePascalCase: Name }: ComponentContext) {
+  return `import React from 'react';
+import ReactDOM from 'react-dom';
+import { ${Name}App } from './app';
+
+ReactDOM.render(<${Name}App />, document.getElementById('root'));
+`;
+}

package/templates/react-app/files/app.ts

@@ -0,0 +1,30 @@
+import { ComponentContext } from '@teambit/generator';
+
+export function appFile({ namePascalCase: Name }: ComponentContext) {
+  return `import React from 'react';
+import { BrowserRouter, Switch, Route } from 'react-router-dom';
+
+export function ${Name}App() {
+  return (
+    <BrowserRouter>
+
+       {/* header component */}
+
+        <Switch>
+          <Route path="/">
+             {/* home page component */}
+          </Route>
+
+          <Route path="/about">
+             {/* about page component */}
+          </Route>
+
+        </Switch>
+
+        {/* footer component */}
+
+    </BrowserRouter>
+  );
+}
+`;
+}

package/templates/react-app/files/aspect.ts

@@ -0,0 +1,10 @@
+import { ComponentContext } from '@teambit/generator';
+
+export function aspectFile({ name, namePascalCase: Name }: ComponentContext) {
+  return `import { Aspect } from '@teambit/harmony';
+
+export const ${Name}Aspect = Aspect.create({
+  id: 'YourOrgName.YourScopeName/namespace?/${name}'
+});
+`;
+}

package/templates/react-app/files/compositions.ts

@@ -0,0 +1,11 @@
+import { ComponentContext } from '@teambit/generator';
+
+export function compositionsFile({ namePascalCase: Name }: ComponentContext) {
+  return `import React from 'react';
+import { ${Name}App } from './app';
+
+export const ${Name}Basic = () => {
+  return <${Name}App></${Name}App>;
+};
+`;
+}

package/templates/react-app/files/doc.ts

@@ -0,0 +1,29 @@
+import { ComponentContext } from '@teambit/generator';
+
+export function docFile({ name }: ComponentContext) {
+  return `---
+description: Application.
+labels: ['env', 'app']
+---
+
+## Application component
+
+- The app file contains components from react router dom so you can add here all routes for your app and include all your page components.
+- The main runtime file contains what is needed to build your application as a React app.
+- The app root file renders your app to the DOM.
+- The compositions file renders your app so it can be seen in the compositions tab.
+- The aspect file contains the id of the aspect. You will need to modify this with your own org name, scope name and namespace if any, and then add it to your \`workspace.json\` file at root level like:
+
+\`\`\`json
+"org-name.scope-name/namespace/name": {},
+\`\`\`
+
+### Run the application
+
+You can run your application on a separate port to see it outside of the Bit workspace
+
+\`\`\`bash
+bit run ${name}
+\`\`\`
+`;
+}

package/templates/react-app/files/index.ts

@@ -0,0 +1,10 @@
+import { ComponentContext } from '@teambit/generator';
+
+export function indexFile({ name, namePascalCase: Name }: ComponentContext) {
+  return `import { ${Name}Aspect } from './${name}.aspect';
+
+export type { ${Name}Main } from './${name}.main.runtime';
+export default ${Name}Aspect;
+export { ${Name}Aspect };
+`;
+}

package/templates/react-app/files/main.runtime.ts

@@ -0,0 +1,22 @@
+import { ComponentContext } from '@teambit/generator';
+
+export function mainRuntimeFile({ name, namePascalCase: Name }: ComponentContext) {
+  return `import { MainRuntime } from '@teambit/cli';
+import { ReactAspect, ReactMain } from '@teambit/react';
+import { ${Name}Aspect } from './${name}.aspect';
+
+export class ${Name}Main {
+  static slots = [];
+  static dependencies = [ReactAspect];
+  static runtime = MainRuntime;
+  static async provider([react]: [ReactMain]) {
+    react.registerReactApp({
+      name: '${name}',
+      entry: ['dist/${name}.app-root']
+    });
+    return new ${Name}Main();
+  }
+}
+${Name}Aspect.addRuntime(${Name}Main);
+`;
+}

package/templates/react-app/index.ts

@@ -0,0 +1,47 @@
+import { ComponentContext, ComponentTemplate } from '@teambit/generator';
+import { indexFile } from './files/index';
+import { docFile } from './files/doc';
+import { mainRuntimeFile } from './files/main.runtime';
+import { compositionsFile } from './files/compositions';
+import { aspectFile } from './files/aspect';
+import { appFile } from './files/app';
+import { appRootFile } from './files/app-root';
+
+export const reactAppTemplate: ComponentTemplate = {
+  name: 'react-app',
+  hidden: true,
+  description: 'Creates a React app',
+  generateFiles: (context: ComponentContext) => {
+    return [
+      {
+        relativePath: 'index.ts',
+        content: indexFile(context),
+        isMain: true,
+      },
+      {
+        relativePath: `${context.name}.docs.mdx`,
+        content: docFile(context),
+      },
+      {
+        relativePath: `${context.name}.main.runtime.ts`,
+        content: mainRuntimeFile(context),
+      },
+      {
+        relativePath: `${context.name}.compositions.tsx`,
+        content: compositionsFile(context),
+      },
+      {
+        relativePath: `${context.name}.aspect.ts`,
+        content: aspectFile(context),
+      },
+      {
+        relativePath: `app.tsx`,
+        content: appFile(context),
+      },
+      {
+        relativePath: `${context.name}.app-root.tsx`,
+        content: appRootFile(context),
+      },
+    ];
+  },
+};

package/templates/react-component/files/component.ts

@@ -0,0 +1,25 @@
+import { ComponentContext } from '@teambit/generator';
+
+export const componentFile = (context: ComponentContext) => {
+  const { name, namePascalCase: Name } = context;
+  return {
+    relativePath: `${name}.tsx`,
+    content: `import React from 'react';
+
+export type ${Name}Props = {
+  /**
+   * a text to be rendered in the component.
+   */
+  text: string
+};
+
+export function ${Name}({ text }: ${Name}Props) {
+  return (
+    <div>
+      {text}
+    </div>
+  );
+}
+`,
+  };
+};

package/templates/react-component/files/composition.ts

@@ -0,0 +1,16 @@
+import { ComponentContext } from '@teambit/generator';
+
+export const compositionFile = (context: ComponentContext) => {
+  const { name, namePascalCase: Name } = context;
+
+  return {
+    relativePath: `${name}.composition.tsx`,
+    content: `import React from 'react';
+import { ${Name} } from './${name}';
+
+export const Basic${Name} = () => (
+  <${Name} text="hello from ${Name}" />
+);
+`,
+  };
+};

package/templates/react-component/files/docs.ts

@@ -0,0 +1,32 @@
+import { ComponentContext } from '@teambit/generator';
+
+export const docsFile = (context: ComponentContext) => {
+  const { name, namePascalCase: Name } = context;
+
+  return {
+    relativePath: `${name}.docs.mdx`,
+    content: `---
+description: 'A ${Name} component.'
+labels: ['label1', 'label2', 'label3']
+---
+
+import { ${Name} } from './${name}';
+
+## React Component for rendering text
+
+A basic div that renders some text
+
+### Component usage
+\`\`\`js
+<${Name} text="hello from ${Name}" />
+\`\`\`
+
+### Using props to customize the text
+
+Modify the text to see it change live:
+\`\`\`js live
+<${Name} text="hello from ${Name}" />
+\`\`\`
+`,
+  };
+};

package/templates/react-component/files/test.ts

@@ -0,0 +1,19 @@
+import { ComponentContext } from '@teambit/generator';
+
+export const testFile = (context: ComponentContext) => {
+  const { name, namePascalCase: Name } = context;
+
+  return {
+    relativePath: `${name}.spec.tsx`,
+    content: `import React from 'react';
+import { render } from '@testing-library/react';
+import { Basic${Name} } from './${name}.composition';
+
+it('should render with the correct text', () => {
+  const { getByText } = render(<Basic${Name} />);
+  const rendered = getByText('hello from ${Name}');
+  expect(rendered).toBeTruthy();
+});
+`,
+  };
+};

package/templates/react-component/index.ts

@@ -0,0 +1,40 @@
+import { ComponentTemplate, ComponentContext } from '@teambit/generator';
+import { componentFile } from './files/component';
+import { compositionFile } from './files/composition';
+import { docsFile } from './files/docs';
+import { testFile } from './files/test';
+
+export const reactComponent: ComponentTemplate = {
+  name: 'react',
+  description: 'a basic react component',
+
+  generateFiles: (context: ComponentContext) => {
+    const { name, namePascalCase: Name } = context;
+    const indexFile = {
+      relativePath: 'index.ts',
+      content: `export { ${Name} } from './${name}';
+export type { ${Name}Props } from './${name}';
+`,
+    };
+
+    return [indexFile, componentFile(context), compositionFile(context), docsFile(context), testFile(context)];
+  },
+};
+
+export const deprecatedReactComponent: ComponentTemplate = {
+  name: 'react-component',
+  description: 'a basic react component',
+  hidden: true,
+
+  generateFiles: (context: ComponentContext) => {
+    const { name, namePascalCase: Name } = context;
+    const indexFile = {
+      relativePath: 'index.ts',
+      content: `export { ${Name} } from './${name}';
+export type { ${Name}Props } from './${name}';
+`,
+    };
+
+    return [indexFile, componentFile(context), compositionFile(context), docsFile(context), testFile(context)];
+  },
+};

package/templates/react-component-js/files/component.ts

@@ -0,0 +1,18 @@
+import { ComponentContext } from '@teambit/generator';
+
+export const componentFile = (context: ComponentContext) => {
+  const { name, namePascalCase: Name } = context;
+  return {
+    relativePath: `${name}.jsx`,
+    content: `import React from 'react';
+
+export function ${Name}({ text }) {
+  return (
+    <div>
+      {text}
+    </div>
+  );
+}
+`,
+  };
+};

package/templates/react-component-js/files/composition.ts

@@ -0,0 +1,16 @@
+import { ComponentContext } from '@teambit/generator';
+
+export const compositionFile = (context: ComponentContext) => {
+  const { name, namePascalCase: Name } = context;
+
+  return {
+    relativePath: `${name}.composition.jsx`,
+    content: `import React from 'react';
+import { ${Name} } from './${name}';
+
+export const Basic${Name} = () => (
+  <${Name} text="hello from ${Name}" />
+);
+`,
+  };
+};

package/templates/react-component-js/files/docs.ts

@@ -0,0 +1,32 @@
+import { ComponentContext } from '@teambit/generator';
+
+export const docsFile = (context: ComponentContext) => {
+  const { name, namePascalCase: Name } = context;
+
+  return {
+    relativePath: `${name}.docs.mdx`,
+    content: `---
+description: 'A ${Name} component.'
+labels: ['label1', 'label2', 'label3']
+---
+
+import { ${Name} } from './${name}';
+
+## React Component for rendering text
+
+A basic div that renders some text
+
+### Component usage
+\`\`\`js
+<${Name} text="hello from ${Name}" />
+\`\`\`
+
+### Using props to customize the text
+
+Modify the text to see it change live:
+\`\`\`js live
+<${Name} text="hello from ${Name}" />
+\`\`\`
+`,
+  };
+};