@teambit/react 1.0.41 → 1.0.42

package/dist/templates/react-hook/files/docs.js

@@ -1,42 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.docsFile = void 0;
-const docsFile = context => {
-  const {
-    name,
-    nameCamelCase: Name
-  } = context;
-  return {
-    relativePath: `${name}.docs.mdx`,
-    content: `---
-description: 'A React Hook that increments a count by 1 each time it is called.'
-labels: ['hook', 'counter']
----
-
-import { ${Name} } from './${name}';
-
-## A React Hook to increment a count
-
-Increments the state of \`count\` by 1 each time \`increment\` is called
-
-### Component usage
-
-In this example clicking the button calls \`increment\` which increments the \`count\` by 1
-
-\`\`\`js
-import { ${Name} } from './${name}';
-
-const { count, increment } = ${Name}();
-
-<h1>The count is {count}</h1>
-<button onClick={increment}>increment</button>
-\`\`\`
-`
-  };
-};
-exports.docsFile = docsFile;
-
-//# sourceMappingURL=docs.js.map

package/dist/templates/react-hook/files/docs.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["docsFile","context","name","nameCamelCase","Name","relativePath","content","exports"],"sources":["docs.ts"],"sourcesContent":["import { ComponentContext } from '@teambit/generator';\n\nexport const docsFile = (context: ComponentContext) => {\n  const { name, nameCamelCase: Name } = context;\n\n  return {\n    relativePath: `${name}.docs.mdx`,\n    content: `---\ndescription: 'A React Hook that increments a count by 1 each time it is called.'\nlabels: ['hook', 'counter']\n---\n\nimport { ${Name} } from './${name}';\n\n## A React Hook to increment a count\n\nIncrements the state of \\`count\\` by 1 each time \\`increment\\` is called\n\n### Component usage\n\nIn this example clicking the button calls \\`increment\\` which increments the \\`count\\` by 1\n\n\\`\\`\\`js\nimport { ${Name} } from './${name}';\n\nconst { count, increment } = ${Name}();\n\n<h1>The count is {count}</h1>\n<button onClick={increment}>increment</button>\n\\`\\`\\`\n`,\n  };\n};\n"],"mappings":";;;;;;AAEO,MAAMA,QAAQ,GAAIC,OAAyB,IAAK;EACrD,MAAM;IAAEC,IAAI;IAAEC,aAAa,EAAEC;EAAK,CAAC,GAAGH,OAAO;EAE7C,OAAO;IACLI,YAAY,EAAG,GAAEH,IAAK,WAAU;IAChCI,OAAO,EAAG;AACd;AACA;AACA;AACA;AACA,WAAWF,IAAK,cAAaF,IAAK;AAClC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,WAAWE,IAAK,cAAaF,IAAK;AAClC;AACA,+BAA+BE,IAAK;AACpC;AACA;AACA;AACA;AACA;EACE,CAAC;AACH,CAAC;AAACG,OAAA,CAAAP,QAAA,GAAAA,QAAA"}

package/dist/templates/react-hook/files/index-file.d.ts

@@ -1,5 +0,0 @@
-import { ComponentContext } from '@teambit/generator';
-export declare const indexFile: (context: ComponentContext) => {
-    relativePath: string;
-    content: string;
-};

package/dist/templates/react-hook/files/index-file.js

@@ -1,20 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.indexFile = void 0;
-const indexFile = context => {
-  const {
-    name,
-    nameCamelCase: Name
-  } = context;
-  return {
-    relativePath: 'index.ts',
-    content: `export { ${Name} } from './${name}';
-`
-  };
-};
-exports.indexFile = indexFile;
-
-//# sourceMappingURL=index-file.js.map

package/dist/templates/react-hook/files/index-file.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["indexFile","context","name","nameCamelCase","Name","relativePath","content","exports"],"sources":["index-file.ts"],"sourcesContent":["import { ComponentContext } from '@teambit/generator';\n\nexport const indexFile = (context: ComponentContext) => {\n  const { name, nameCamelCase: Name } = context;\n\n  return {\n    relativePath: 'index.ts',\n    content: `export { ${Name} } from './${name}';\n`,\n  };\n};\n"],"mappings":";;;;;;AAEO,MAAMA,SAAS,GAAIC,OAAyB,IAAK;EACtD,MAAM;IAAEC,IAAI;IAAEC,aAAa,EAAEC;EAAK,CAAC,GAAGH,OAAO;EAE7C,OAAO;IACLI,YAAY,EAAE,UAAU;IACxBC,OAAO,EAAG,YAAWF,IAAK,cAAaF,IAAK;AAChD;EACE,CAAC;AACH,CAAC;AAACK,OAAA,CAAAP,SAAA,GAAAA,SAAA"}

package/dist/templates/react-hook/files/index-file.spec.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/templates/react-hook/files/index-file.spec.js

@@ -1,36 +0,0 @@
-"use strict";
-
-function _componentId() {
-  const data = require("@teambit/component-id");
-  _componentId = function () {
-    return data;
-  };
-  return data;
-}
-function _indexFile() {
-  const data = require("./index-file");
-  _indexFile = function () {
-    return data;
-  };
-  return data;
-}
-// react hook convention is `useX` (lowercase "use")
-// it is required to enable hook-specific linting rules
-const useFoobarSnapshot = `export { useFooBar } from './use-foo-bar';
-`; // trailing line break
-
-describe('templates: react-hook, index-file', () => {
-  it('should match snapshot', () => {
-    const ctx = {
-      name: 'use-foo-bar',
-      namePascalCase: 'UseFooBar',
-      nameCamelCase: 'useFooBar',
-      componentId: _componentId().ComponentID.fromString('baz.qux/use/foo/bar'),
-      aspectId: _componentId().ComponentID.fromString('baz.qux/use/foo/my-aspect')
-    };
-    const result = (0, _indexFile().indexFile)(ctx);
-    expect(result.content).toEqual(useFoobarSnapshot);
-  });
-});
-
-//# sourceMappingURL=index-file.spec.js.map

package/dist/templates/react-hook/files/index-file.spec.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_componentId","data","require","_indexFile","useFoobarSnapshot","describe","it","ctx","name","namePascalCase","nameCamelCase","componentId","ComponentID","fromString","aspectId","result","indexFile","expect","content","toEqual"],"sources":["index-file.spec.ts"],"sourcesContent":["import { ComponentID } from '@teambit/component-id';\nimport type { ComponentContext } from '@teambit/generator';\nimport { indexFile } from './index-file';\n\n// react hook convention is `useX` (lowercase \"use\")\n// it is required to enable hook-specific linting rules\nconst useFoobarSnapshot = `export { useFooBar } from './use-foo-bar';\n`; // trailing line break\n\ndescribe('templates: react-hook, index-file', () => {\n  it('should match snapshot', () => {\n    const ctx: ComponentContext = {\n      name: 'use-foo-bar',\n      namePascalCase: 'UseFooBar',\n      nameCamelCase: 'useFooBar',\n      componentId: ComponentID.fromString('baz.qux/use/foo/bar'),\n      aspectId: ComponentID.fromString('baz.qux/use/foo/my-aspect'),\n    };\n\n    const result = indexFile(ctx);\n\n    expect(result.content).toEqual(useFoobarSnapshot);\n  });\n});\n"],"mappings":";;AAAA,SAAAA,aAAA;EAAA,MAAAC,IAAA,GAAAC,OAAA;EAAAF,YAAA,YAAAA,CAAA;IAAA,OAAAC,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AAEA,SAAAE,WAAA;EAAA,MAAAF,IAAA,GAAAC,OAAA;EAAAC,UAAA,YAAAA,CAAA;IAAA,OAAAF,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AAEA;AACA;AACA,MAAMG,iBAAiB,GAAI;AAC3B,CAAC,CAAC,CAAC;;AAEHC,QAAQ,CAAC,mCAAmC,EAAE,MAAM;EAClDC,EAAE,CAAC,uBAAuB,EAAE,MAAM;IAChC,MAAMC,GAAqB,GAAG;MAC5BC,IAAI,EAAE,aAAa;MACnBC,cAAc,EAAE,WAAW;MAC3BC,aAAa,EAAE,WAAW;MAC1BC,WAAW,EAAEC,0BAAW,CAACC,UAAU,CAAC,qBAAqB,CAAC;MAC1DC,QAAQ,EAAEF,0BAAW,CAACC,UAAU,CAAC,2BAA2B;IAC9D,CAAC;IAED,MAAME,MAAM,GAAG,IAAAC,sBAAS,EAACT,GAAG,CAAC;IAE7BU,MAAM,CAACF,MAAM,CAACG,OAAO,CAAC,CAACC,OAAO,CAACf,iBAAiB,CAAC;EACnD,CAAC,CAAC;AACJ,CAAC,CAAC"}

package/dist/templates/react-hook/files/test.d.ts

@@ -1,5 +0,0 @@
-import { ComponentContext } from '@teambit/generator';
-export declare const testFile: (context: ComponentContext) => {
-    relativePath: string;
-    content: string;
-};

package/dist/templates/react-hook/files/test.js

@@ -1,29 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.testFile = void 0;
-const testFile = context => {
-  const {
-    name,
-    nameCamelCase: Name
-  } = context;
-  return {
-    relativePath: `${name}.spec.tsx`,
-    content: `import { renderHook, act } from '@testing-library/react-hooks';
-import { ${Name} } from './${name}';
-
-it('should increment counter', () => {
-  const { result } = renderHook(() => ${Name}())
-  act(() => {
-    result.current.increment()
-  })
-  expect(result.current.count).toBe(1)
-})
-`
-  };
-};
-exports.testFile = testFile;
-
-//# sourceMappingURL=test.js.map

package/dist/templates/react-hook/files/test.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["testFile","context","name","nameCamelCase","Name","relativePath","content","exports"],"sources":["test.ts"],"sourcesContent":["import { ComponentContext } from '@teambit/generator';\n\nexport const testFile = (context: ComponentContext) => {\n  const { name, nameCamelCase: Name } = context;\n\n  return {\n    relativePath: `${name}.spec.tsx`,\n    content: `import { renderHook, act } from '@testing-library/react-hooks';\nimport { ${Name} } from './${name}';\n\nit('should increment counter', () => {\n  const { result } = renderHook(() => ${Name}())\n  act(() => {\n    result.current.increment()\n  })\n  expect(result.current.count).toBe(1)\n})\n`,\n  };\n};\n"],"mappings":";;;;;;AAEO,MAAMA,QAAQ,GAAIC,OAAyB,IAAK;EACrD,MAAM;IAAEC,IAAI;IAAEC,aAAa,EAAEC;EAAK,CAAC,GAAGH,OAAO;EAE7C,OAAO;IACLI,YAAY,EAAG,GAAEH,IAAK,WAAU;IAChCI,OAAO,EAAG;AACd,WAAWF,IAAK,cAAaF,IAAK;AAClC;AACA;AACA,wCAAwCE,IAAK;AAC7C;AACA;AACA;AACA;AACA;AACA;EACE,CAAC;AACH,CAAC;AAACG,OAAA,CAAAP,QAAA,GAAAA,QAAA"}

package/dist/templates/react-hook/index.d.ts

@@ -1,2 +0,0 @@
-import { ComponentTemplate } from '@teambit/generator';
-export declare const reactHook: ComponentTemplate;

package/dist/templates/react-hook/index.js

@@ -1,58 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.reactHook = void 0;
-function _component() {
-  const data = require("./files/component");
-  _component = function () {
-    return data;
-  };
-  return data;
-}
-function _composition() {
-  const data = require("./files/composition");
-  _composition = function () {
-    return data;
-  };
-  return data;
-}
-function _docs() {
-  const data = require("./files/docs");
-  _docs = function () {
-    return data;
-  };
-  return data;
-}
-function _test() {
-  const data = require("./files/test");
-  _test = function () {
-    return data;
-  };
-  return data;
-}
-function _indexFile() {
-  const data = require("./files/index-file");
-  _indexFile = function () {
-    return data;
-  };
-  return data;
-}
-const reactHook = {
-  name: 'react-hook',
-  description: 'a react hook component',
-  hidden: true,
-  generateFiles: context => {
-    return [(0, _indexFile().indexFile)(context), (0, _component().componentFile)(context), (0, _composition().compositionFile)(context), (0, _docs().docsFile)(context), (0, _test().testFile)(context)];
-  },
-  config: {
-    'teambit.react/react': {},
-    'teambit.envs/envs': {
-      env: 'teambit.react/react'
-    }
-  }
-};
-exports.reactHook = reactHook;
-
-//# sourceMappingURL=index.js.map

package/dist/templates/react-hook/index.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_component","data","require","_composition","_docs","_test","_indexFile","reactHook","name","description","hidden","generateFiles","context","indexFile","componentFile","compositionFile","docsFile","testFile","config","env","exports"],"sources":["index.ts"],"sourcesContent":["import { ComponentTemplate, ComponentContext } from '@teambit/generator';\nimport { componentFile } from './files/component';\nimport { compositionFile } from './files/composition';\nimport { docsFile } from './files/docs';\nimport { testFile } from './files/test';\nimport { indexFile } from './files/index-file';\n\nexport const reactHook: ComponentTemplate = {\n  name: 'react-hook',\n  description: 'a react hook component',\n  hidden: true,\n  generateFiles: (context: ComponentContext) => {\n    return [indexFile(context), componentFile(context), compositionFile(context), docsFile(context), testFile(context)];\n  },\n  config: {\n    'teambit.react/react': {},\n    'teambit.envs/envs': {\n      env: 'teambit.react/react',\n    },\n  },\n};\n"],"mappings":";;;;;;AACA,SAAAA,WAAA;EAAA,MAAAC,IAAA,GAAAC,OAAA;EAAAF,UAAA,YAAAA,CAAA;IAAA,OAAAC,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AACA,SAAAE,aAAA;EAAA,MAAAF,IAAA,GAAAC,OAAA;EAAAC,YAAA,YAAAA,CAAA;IAAA,OAAAF,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AACA,SAAAG,MAAA;EAAA,MAAAH,IAAA,GAAAC,OAAA;EAAAE,KAAA,YAAAA,CAAA;IAAA,OAAAH,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AACA,SAAAI,MAAA;EAAA,MAAAJ,IAAA,GAAAC,OAAA;EAAAG,KAAA,YAAAA,CAAA;IAAA,OAAAJ,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AACA,SAAAK,WAAA;EAAA,MAAAL,IAAA,GAAAC,OAAA;EAAAI,UAAA,YAAAA,CAAA;IAAA,OAAAL,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AAEO,MAAMM,SAA4B,GAAG;EAC1CC,IAAI,EAAE,YAAY;EAClBC,WAAW,EAAE,wBAAwB;EACrCC,MAAM,EAAE,IAAI;EACZC,aAAa,EAAGC,OAAyB,IAAK;IAC5C,OAAO,CAAC,IAAAC,sBAAS,EAACD,OAAO,CAAC,EAAE,IAAAE,0BAAa,EAACF,OAAO,CAAC,EAAE,IAAAG,8BAAe,EAACH,OAAO,CAAC,EAAE,IAAAI,gBAAQ,EAACJ,OAAO,CAAC,EAAE,IAAAK,gBAAQ,EAACL,OAAO,CAAC,CAAC;EACrH,CAAC;EACDM,MAAM,EAAE;IACN,qBAAqB,EAAE,CAAC,CAAC;IACzB,mBAAmB,EAAE;MACnBC,GAAG,EAAE;IACP;EACF;AACF,CAAC;AAACC,OAAA,CAAAb,SAAA,GAAAA,SAAA"}

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

@@ -1,9 +0,0 @@
-import { ComponentContext } from '@teambit/generator';
-
-export function appPlugin({ name }: ComponentContext) {
-  return `/** @type {import("@teambit/react.apps.react-app-types").ReactAppOptions} */
-module.exports.default = {
-  name: "${name}",
-  entry: [require.resolve("./${name}.app-root")],
-};`;
-}

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

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

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

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

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

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

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

@@ -1,23 +0,0 @@
-import { ComponentContext } from '@teambit/generator';
-
-export function docFile({ name, componentId, nameCamelCase }: ComponentContext) {
-  return `---
-description: ${nameCamelCase} application component.
-labels: ['${name}', 'app']
----
-
-Configure the app plugin on your workspace:
-
-\`\`\`json
-"${componentId.toString()}": {},
-\`\`\`
-
-### 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

@@ -1,5 +0,0 @@
-import { ComponentContext } from '@teambit/generator';
-
-export function indexFile({ namePascalCase: Name }: ComponentContext) {
-  return `export { ${Name}App } from './app';`;
-}

package/templates/react-app/index.ts

@@ -1,48 +0,0 @@
-import { ComponentContext, ComponentTemplate } from '@teambit/generator';
-import { appPlugin } from './files/app-plugin';
-import { indexFile } from './files/index';
-import { docFile } from './files/doc';
-import { compositionsFile } from './files/compositions';
-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}.react-app.cjs`,
-        content: appPlugin(context),
-      },
-      {
-        relativePath: `${context.name}.compositions.tsx`,
-        content: compositionsFile(context),
-      },
-      {
-        relativePath: `app.tsx`,
-        content: appFile(context),
-      },
-      {
-        relativePath: `${context.name}.app-root.tsx`,
-        content: appRootFile(context),
-      },
-    ];
-  },
-  config: {
-    'teambit.harmony/aspect': {},
-    'teambit.envs/envs': {
-      env: 'teambit.harmony/aspect',
-    },
-  },
-};

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

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

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

@@ -1,18 +0,0 @@
-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} = () => {
-  return (
-    <${Name}>hello world!</${Name}>
-  );
-}
-`,
-  };
-};

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

@@ -1,28 +0,0 @@
-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.
----
-
-import { ${Name} } from './${name}';
-
-A component that does something special and renders text in a div.
-
-### Component usage
-\`\`\`js
-<${Name}>Hello world!</${Name}>
-\`\`\`
-
-### Render hello world!
-
-\`\`\`js live
-<${Name}>Hello world!</${Name}>
-\`\`\`
-`,
-  };
-};

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

@@ -1,12 +0,0 @@
-import { ComponentContext } from '@teambit/generator';
-
-export const indexFile = (context: ComponentContext) => {
-  const { name, namePascalCase: Name } = context;
-
-  return {
-    relativePath: 'index.ts',
-    content: `export { ${Name} } from './${name}';
-export type { ${Name}Props } from './${name}';
-`,
-  };
-};

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

@@ -1,19 +0,0 @@
-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 world!');
-  expect(rendered).toBeTruthy();
-});
-`,
-  };
-};

package/templates/react-component/index.ts

@@ -1,27 +0,0 @@
-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';
-import { indexFile } from './files/index-file';
-
-export const reactComponent: ComponentTemplate = {
-  name: 'react',
-  description: 'a basic react component',
-  hidden: true,
-  generateFiles: (context: ComponentContext) => {
-    return [indexFile(context), componentFile(context), compositionFile(context), docsFile(context), testFile(context)];
-  },
-  config: {
-    'teambit.react/react': {},
-    'teambit.envs/envs': {
-      env: 'teambit.react/react',
-    },
-  },
-};
-
-export const deprecatedReactComponent: ComponentTemplate = {
-  ...reactComponent,
-  name: 'react-component',
-  hidden: true,
-};

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

@@ -1,18 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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

@@ -1,32 +0,0 @@
-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-js/files/test.ts

@@ -1,21 +0,0 @@
-import { ComponentContext } from '@teambit/generator';
-
-export const testFile = (context: ComponentContext) => {
-  const { name, namePascalCase: Name } = context;
-
-  return {
-    relativePath: `${name}.spec.jsx`,
-    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-js/index.ts

@@ -1,32 +0,0 @@
-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 reactComponentJS: ComponentTemplate = {
-  name: 'react-js',
-  description: 'a basic react component in js',
-  hidden: true,
-  generateFiles: (context: ComponentContext) => {
-    const { name, namePascalCase: Name } = context;
-    const indexFile = {
-      relativePath: 'index.js',
-      content: `export { ${Name} } from './${name}';
-`,
-    };
-    return [indexFile, componentFile(context), compositionFile(context), docsFile(context), testFile(context)];
-  },
-  config: {
-    'teambit.react/react': {},
-    'teambit.envs/envs': {
-      env: 'teambit.react/react',
-    },
-  },
-};
-
-export const deprecatedReactComponentJS: ComponentTemplate = {
-  ...reactComponentJS,
-  name: 'react-component-js',
-  hidden: true,
-};