@teambit/react 1.0.41 → 1.0.43

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

@@ -1,94 +0,0 @@
-import { ComponentContext } from '@teambit/generator';
-
-export function mainRuntimeFile({ namePascalCase: Name, name }: ComponentContext) {
-  return `import { MainRuntime } from '@teambit/cli';
-import { ReactAspect, ReactMain, UseTypescriptModifiers } from '@teambit/react';
-import { EnvsAspect, EnvsMain } from '@teambit/envs';
-import { ${Name}Aspect } from './${name}.aspect';
-//import {
-//  previewConfigTransformer,
-//  devServerConfigTransformer
-//} from './webpack/webpack-transformers';
-//import {
-//  devConfigTransformer,
-//  buildConfigTransformer,
-//} from "./typescript/ts-transformer";
-
-export class ${Name}Main {
-  static slots = [];
-
-  static dependencies = [ReactAspect, EnvsAspect];
-
-  static runtime = MainRuntime;
-
-  static async provider([react, envs]: [ReactMain, EnvsMain]) {
-
-    //const webpackModifiers: UseWebpackModifiers = {
-      //  previewConfig: [previewConfigTransformer],
-      //  devServerConfig: [devServerConfigTransformer],
-    //};
-
-    //const tsModifiers: UseTypescriptModifiers = {
-      //  devConfig: [devConfigTransformer],
-      //  buildConfig: [buildConfigTransformer],
-    //};
-
-    const ${Name}Env = react.compose([
-      /**
-       * Uncomment to override the config files for TypeScript, Webpack or Jest
-       * Your config gets merged with the defaults
-       */
-
-      // react.useTypescript(tsModifiers),  // note: this cannot be used in conjunction with react.overrideCompiler
-      // react.useWebpack(webpackModifiers),
-      // react.overrideJestConfig(require.resolve('./jest/jest.config')),
-
-      /**
-       * override the ESLint default config here then check your files for lint errors
-       * @example
-       * bit lint
-       * bit lint --fix
-       */
-      //react.useEslint({
-      //  transformers: [
-      //  (config) => {
-      //    config.setRule('no-console', ['error']);
-      //    return config;
-      //    }
-      //  ]
-      //}),
-
-      /**
-       * override the Prettier default config here the check your formatting
-       * @example
-       * bit format --check
-       * bit format
-       */
-      //react.usePrettier({
-      //  transformers: [
-      //    (config) => {
-      //      config.setKey('tabWidth', 2);
-      //      return config;
-      //    }
-      //  ]
-      //}),
-
-      /**
-       * override dependencies here
-       * @example
-       * Uncomment types to include version 17.0.3 of the types package
-       */
-      react.overrideDependencies({
-        devDependencies: {
-          // '@types/react': '17.0.3'
-        }
-      })
-    ]);
-    envs.registerEnv(${Name}Env);
-    return new ${Name}Main();
-  }
-}
-
-${Name}Aspect.addRuntime(${Name}Main);
-`;
-}

package/templates/react-env/files/preview.runtime.ts

@@ -1,27 +0,0 @@
-import { ComponentContext } from '@teambit/generator';
-
-export function previewRuntimeFile({ namePascalCase: Name, nameCamelCase: nameCamel, name }: ComponentContext) {
-  return `import { PreviewRuntime } from '@teambit/preview';
-import { ReactAspect, ReactPreview } from '@teambit/react';
-// uncomment the line below and install the theme if you want to use our theme or create your own and import it here
-// import { ThemeCompositions } from '@teambit/documenter.theme.theme-compositions';
-
-import { ${Name}Aspect } from './${name}.aspect';
-
-export class ${Name}PreviewMain {
-  static runtime = PreviewRuntime;
-
-  static dependencies = [ReactAspect];
-
-  static async provider([react]: [ReactPreview]) {
-    const ${nameCamel}PreviewMain = new ${Name}PreviewMain();
-    // uncomment the line below to register a new provider to wrap all compositions using this environment with a custom theme.
-    // react.registerProvider([ThemeCompositions]);
-
-    return ${nameCamel}PreviewMain;
-  }
-}
-
-${Name}Aspect.addRuntime(${Name}PreviewMain);
-`;
-}

package/templates/react-env/files/typescript/styles.ts

@@ -1,7 +0,0 @@
-export function globalStylesFile() {
-  return `
-  /*
-  Add your global styles here to be added for any component using this env
-  */
-  `;
-}

package/templates/react-env/files/typescript/ts-transformer.ts

@@ -1,50 +0,0 @@
-export function tsTransformerFile() {
-  return `
-  import * as path from 'path';
-import {
-  TsConfigTransformer,
-  TypescriptConfigMutator,
-} from "@teambit/typescript";
-
-const tsConfig = require('./tsconfig.json');
-
-export const commonTransformer: TsConfigTransformer = (
-  config: TypescriptConfigMutator
-) => {
-  const newConfig = config.addTypes([path.join(__dirname, 'styles.d.ts')])
-  newConfig.mergeTsConfig(tsConfig);
-  // Some examples of other built in mutator functions:
-  //newConfig.addExclude(['someExclude']);
-  //newConfig.setCompileJs(true)
-  return newConfig;
-};
-
-/**
- * Transformation for the dev config only
- * @param config
- * @param context
- * @returns
- */
-export const devConfigTransformer: TsConfigTransformer = (
-  config: TypescriptConfigMutator,
-) => {
-  const newConfig = commonTransformer(config, {});
-  return newConfig;
-};
-
-/**
- * Transformation for the build only
- * @param config
- * @param context
- * @returns
- */
-export const buildConfigTransformer: TsConfigTransformer = (
-  config: TypescriptConfigMutator
-) => {
-  const newConfig = commonTransformer(config, {});
-  newConfig.mergeTsConfig(tsConfig);
-  return newConfig;
-};
-
-`;
-}

package/templates/react-env/files/typescript/typescript.config.ts

@@ -1,21 +0,0 @@
-export function typescriptConfigFile() {
-  return `{
-  // add your compiler options here
-
-  "compilerOptions": {
-    // "target": "es2017",
-    // "module": "es2015",
-    // "moduleResolution": "node",
-    // "lib": ["es2017", "dom"],
-    // "experimentalDecorators": true,
-    // "esModuleInterop": true,
-    // "outDir": "dist",
-    // "sourceMap": true,
-    // "emitDecoratorMetadata": true,
-    // "allowJs": true,
-    // "baseUrl": ".",
-    // "jsx": "react"
-  }
-}
-`;
-}

package/templates/react-env/files/webpack.config.ts

@@ -1,48 +0,0 @@
-export function webpackConfigFile() {
-  return `
-  import { WebpackConfigTransformer, WebpackConfigMutator, WebpackConfigTransformContext } from '@teambit/webpack';
-
-  /**
-   * Transformation to apply for both preview and dev server
-   * @param config
-   * @param _context
-   */
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  function commonTransformation(config: WebpackConfigMutator, _context: WebpackConfigTransformContext) {
-    // Merge config with the webpack.config.js file if you choose to import a module export format config.
-    // config.merge([webpackConfig]);
-    // config.addAliases({});
-    // config.addModuleRule(youRuleHere);
-    return config;
-  }
-
-  /**
-   * Transformation for the preview only
-   * @param config
-   * @param context
-   * @returns
-   */
-  export const previewConfigTransformer: WebpackConfigTransformer = (
-    config: WebpackConfigMutator,
-    context: WebpackConfigTransformContext
-  ) => {
-    const newConfig = commonTransformation(config, context);
-    return newConfig;
-  };
-
-  /**
-   * Transformation for the dev server only
-   * @param config
-   * @param context
-   * @returns
-   */
-  export const devServerConfigTransformer: WebpackConfigTransformer = (
-    config: WebpackConfigMutator,
-    context: WebpackConfigTransformContext
-  ) => {
-    const newConfig = commonTransformation(config, context);
-    return newConfig;
-  };
-
-`;
-}

package/templates/react-env/index.ts

@@ -1,68 +0,0 @@
-import { ComponentContext, ComponentTemplate } from '@teambit/generator';
-import { indexFile } from './files/index';
-import { docFile } from './files/doc';
-import { mainRuntimeFile } from './files/main.runtime';
-import { previewRuntimeFile } from './files/preview.runtime';
-import { aspectFile } from './files/aspect';
-import { webpackConfigFile } from './files/webpack.config';
-import { typescriptConfigFile } from './files/typescript/typescript.config';
-import { globalStylesFile } from './files/typescript/styles';
-import { tsTransformerFile } from './files/typescript/ts-transformer';
-import { jestConfigFile } from './files/jest.config';
-
-export const reactEnvTemplate: ComponentTemplate = {
-  name: 'react-env',
-  description: 'customize the base React env with your configs and tools',
-  hidden: true,
-  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}.preview.runtime.ts`,
-        content: previewRuntimeFile(context),
-      },
-      {
-        relativePath: `${context.name}.aspect.ts`,
-        content: aspectFile(context),
-      },
-      {
-        relativePath: `webpack/webpack-transformers.ts`,
-        content: webpackConfigFile(),
-      },
-      {
-        relativePath: `typescript/tsconfig.json`,
-        content: typescriptConfigFile(),
-      },
-      {
-        relativePath: `typescript/styles.d.ts`,
-        content: globalStylesFile(),
-      },
-      {
-        relativePath: `typescript/ts-transformer.ts`,
-        content: tsTransformerFile(),
-      },
-      {
-        relativePath: `jest/jest.config.js`,
-        content: jestConfigFile(),
-      },
-    ];
-  },
-  config: {
-    'teambit.envs/env': {},
-    'teambit.envs/envs': {
-      env: 'teambit.envs/env',
-    },
-  },
-};

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

@@ -1,16 +0,0 @@
-import { ComponentContext } from '@teambit/generator';
-
-export const componentFile = (context: ComponentContext) => {
-  const { name, nameCamelCase: Name } = context;
-  return {
-    relativePath: `${name}.tsx`,
-    content: `import { useState } from 'react';
-
-export function ${Name}() {
-  const [count, setCount] = useState(0)
-  const increment = () => setCount((c) => c + 1)
-  return { count, increment }
-}
-`,
-  };
-};

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

@@ -1,23 +0,0 @@
-import { ComponentContext } from '@teambit/generator';
-
-export const compositionFile = (context: ComponentContext) => {
-  const { name, nameCamelCase: Name } = context;
-
-  return {
-    relativePath: `${name}.composition.tsx`,
-    content: `import React from 'react';
-import { ${Name} } from './${name}';
-
-export const Basic${Name} = () => {
-  const { count, increment } = ${Name}();
-
-  return (
-    <>
-      <h1>The count is {count}</h1>
-      <button onClick={increment}>increment</button>
-    </>
-  );
-};
-`,
-  };
-};

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

@@ -1,33 +0,0 @@
-import { ComponentContext } from '@teambit/generator';
-
-export const docsFile = (context: ComponentContext) => {
-  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>
-\`\`\`
-`,
-  };
-};

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

@@ -1,24 +0,0 @@
-import { ComponentID } from '@teambit/component-id';
-import type { ComponentContext } from '@teambit/generator';
-import { indexFile } from './index-file';
-
-// 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: ComponentContext = {
-      name: 'use-foo-bar',
-      namePascalCase: 'UseFooBar',
-      nameCamelCase: 'useFooBar',
-      componentId: ComponentID.fromString('baz.qux/use/foo/bar'),
-      aspectId: ComponentID.fromString('baz.qux/use/foo/my-aspect'),
-    };
-
-    const result = indexFile(ctx);
-
-    expect(result.content).toEqual(useFoobarSnapshot);
-  });
-});

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

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

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

@@ -1,20 +0,0 @@
-import { ComponentContext } from '@teambit/generator';
-
-export const testFile = (context: ComponentContext) => {
-  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)
-})
-`,
-  };
-};

package/templates/react-hook/index.ts

@@ -1,21 +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 reactHook: ComponentTemplate = {
-  name: 'react-hook',
-  description: 'a react hook 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',
-    },
-  },
-};