@teambit/react 0.0.551 → 0.0.556

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

@@ -1,21 +0,0 @@
-export function jestConfigFile() {
-  return `
-  // Override the Jest config to ignore transpiling from specific folders
-  // See the base Jest config: https://bit.dev/teambit/react/react/~code/jest/jest.config.js
-
-  // const reactJestConfig = require('@teambit/react/jest/jest.config');
-  // uncomment the line below and install the package if you want to use this function
-  // const {
-  //   generateNodeModulesPattern,
-  // } = require('@teambit/dependencies.modules.packages-excluder');
-  // const packagesToExclude = ['prop-types', '@teambit'];
-
-  // module.exports = {
-  //   ...reactJestConfig,
-  //   transformIgnorePatterns: [
-  //     ...reactJestConfig.transformIgnorePatterns,
-  //     '/' + generateNodeModulesPattern({ packages: packagesToExclude }),
-  //   ],
-  // };
-  `;
-}

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

@@ -1,84 +0,0 @@
-import { ComponentContext } from '@teambit/generator';
-
-export function mainRuntimeFile({ namePascalCase: Name, name }: ComponentContext) {
-  return `import { MainRuntime } from '@teambit/cli';
-import { ReactAspect, ReactMain } from '@teambit/react';
-import { EnvsAspect, EnvsMain } from '@teambit/envs';
-import { ${Name}Aspect } from './${name}.aspect';
-// import { previewConfigTransformer, devServerConfigTransformer } from './webpack/webpack-transformers';
-
-/**
- * Uncomment to include config files for overrides of Typescript or Webpack
- */
-// const tsconfig = require('./typescript/tsconfig');
-
-export class ${Name}Main {
-  static slots = [];
-
-  static dependencies = [ReactAspect, EnvsAspect];
-
-  static runtime = MainRuntime;
-
-  static async provider([react, envs]: [ReactMain, EnvsMain]) {
-    const templatesReactEnv = envs.compose(react.reactEnv, [
-      /**
-       * Uncomment to override the config files for TypeScript, Webpack or Jest
-       * Your config gets merged with the defaults
-       */
-
-      // react.overrideTsConfig(tsconfig),
-      // react.useWebpack({
-      //   previewConfig: [previewConfigTransformer],
-      //   devServerConfig: [devServerConfigTransformer],
-      // }),
-      // 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(templatesReactEnv);
-    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.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,51 +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.config';
-import { jestConfigFile } from './files/jest.config';
-
-export const reactEnvTemplate: ComponentTemplate = {
-  name: 'react-env',
-  description: 'customize the base React env with your configs and tools',
-  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: `jest/jest.config.js`,
-        content: jestConfigFile(),
-      },
-    ];
-  },
-};

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/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';
-
-export const reactHook: ComponentTemplate = {
-  name: 'react-hook',
-  description: 'a react hook component',
-
-  generateFiles: (context: ComponentContext) => {
-    const { name, nameCamelCase: Name } = context;
-    const indexFile = {
-      relativePath: 'index.ts',
-      content: `export { ${Name} } from './${name}';
-`,
-    };
-
-    return [indexFile, componentFile(context), compositionFile(context), docsFile(context), testFile(context)];
-  },
-};

package/templates/react-workspace/index.ts

@@ -1,27 +0,0 @@
-import { WorkspaceContext, WorkspaceTemplate } from '@teambit/generator';
-import { generateFiles as generateCommonFiles } from '../workspace-common';
-
-export const reactWorkspaceTemplate: WorkspaceTemplate = {
-  name: 'react',
-  description: 'React workspace with demo components',
-  generateFiles: async (context: WorkspaceContext) => {
-    return generateCommonFiles(context);
-  },
-  importComponents: () => {
-    return [
-      {
-        id: 'teambit.react/templates/envs/my-react',
-        targetName: 'envs/my-react',
-        path: 'demo/envs/my-react',
-      },
-      { id: 'teambit.react/templates/ui/text', targetName: 'ui/text', path: 'demo/ui/text' },
-      { id: 'teambit.react/templates/ui/heading', targetName: 'ui/heading', path: 'demo/ui/heading' },
-      { id: 'teambit.react/templates/ui/card', targetName: 'ui/card', path: 'demo/ui/card' },
-      {
-        id: 'teambit.react/templates/pages/welcome',
-        targetName: 'pages/welcome',
-        path: 'demo/pages/welcome',
-      },
-    ];
-  },
-};

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

@@ -1,20 +0,0 @@
-import { WorkspaceContext, WorkspaceTemplate } from '@teambit/generator';
-import { generateFiles as generateCommonFiles } from '../workspace-common';
-
-export const reactWorkspaceAppTemplate: WorkspaceTemplate = {
-  name: 'react-app',
-  description: 'EXPERIMENTAL. react workspace for an app',
-  hidden: true,
-  generateFiles: async (context: WorkspaceContext) => {
-    return generateCommonFiles(context);
-  },
-  importComponents: () => {
-    return [
-      { id: 'teambit.react/templates/apps/my-app', path: 'apps/my-app' },
-      { id: 'teambit.react/templates/envs/my-react', path: 'envs/my-react' },
-      { id: 'teambit.react/templates/themes/theme', path: 'themes/theme' },
-      { id: 'teambit.react/templates/styles/colors', path: 'styles/colors' },
-      { id: 'teambit.react/templates/ui/heading', path: 'ui/heading' },
-    ];
-  },
-};

package/templates/react-workspace-deprecated/index.ts

@@ -1,28 +0,0 @@
-import { WorkspaceContext, WorkspaceTemplate } from '@teambit/generator';
-import { generateFiles as generateCommonFiles } from '../workspace-common';
-
-export const deprecatedReactWorkspaceTemplate: WorkspaceTemplate = {
-  name: 'react-workspace',
-  description: 'React workspace with demo components',
-  hidden: true,
-  generateFiles: async (context: WorkspaceContext) => {
-    return generateCommonFiles(context);
-  },
-  importComponents: () => {
-    return [
-      {
-        id: 'teambit.react/templates/envs/my-react',
-        targetName: 'envs/my-react',
-        path: 'demo/envs/my-react',
-      },
-      { id: 'teambit.react/templates/ui/text', targetName: 'ui/text', path: 'demo/ui/text' },
-      { id: 'teambit.react/templates/ui/heading', targetName: 'ui/heading', path: 'demo/ui/heading' },
-      { id: 'teambit.react/templates/ui/card', targetName: 'ui/card', path: 'demo/ui/card' },
-      {
-        id: 'teambit.react/templates/pages/welcome',
-        targetName: 'pages/welcome',
-        path: 'demo/pages/welcome',
-      },
-    ];
-  },
-};

package/templates/react-workspace-lib/index.ts

@@ -1,21 +0,0 @@
-import { WorkspaceContext, WorkspaceTemplate } from '@teambit/generator';
-import { generateFiles as generateCommonFiles } from '../workspace-common';
-
-export const reactWorkspaceLibTemplate: WorkspaceTemplate = {
-  name: 'react-lib',
-  description: 'EXPERIMENTAL. react workspace for a component library',
-  hidden: true,
-  generateFiles: async (context: WorkspaceContext) => {
-    return generateCommonFiles(context);
-  },
-  importComponents: () => {
-    return [
-      { id: 'teambit.react/templates/envs/my-react', targetName: 'envs/my-react', path: 'demo/envs/my-react' },
-      { id: 'teambit.react/templates/ui/text', targetName: 'ui/text', path: 'demo/ui/text' },
-      { id: 'teambit.react/templates/ui/heading', targetName: 'ui/heading', path: 'demo/ui/heading' },
-      { id: 'teambit.react/templates/ui/card', targetName: 'ui/card', path: 'demo/ui/card' },
-      { id: 'teambit.react/templates/styles/colors', targetName: 'styles/colors', path: 'demo/styles/colors' },
-      { id: 'teambit.react/templates/themes/theme', targetName: 'themes/theme', path: 'demo/themes/theme' },
-    ];
-  },
-};

package/templates/workspace-common/files/eslint-config.ts

@@ -1,6 +0,0 @@
-export const eslintConfig = `module.exports = {
-  extends: ['@teambit/eslint-config-bit-react'],
-  parserOptions: {
-    project: './tsconfig.json'
-  },
-}`;

package/templates/workspace-common/files/git-ignore.ts

@@ -1,113 +0,0 @@
-export function gitIgnore() {
-  return `# Bit
-.bit
-public
-
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-lerna-debug.log*
-
-# Diagnostic reports (https://nodejs.org/api/report.html)
-report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
-
-# Runtime data
-pids
-*.pid
-*.seed
-*.pid.lock
-
-# Directory for instrumented libs generated by jscoverage/JSCover
-lib-cov
-
-# Coverage directory used by tools like istanbul
-coverage
-*.lcov
-
-# nyc test coverage
-.nyc_output
-
-# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
-.grunt
-
-# Bower dependency directory (https://bower.io/)
-bower_components
-
-# node-waf configuration
-.lock-wscript
-
-# Compiled binary addons (https://nodejs.org/api/addons.html)
-build/Release
-
-# Dependency directories
-node_modules/
-jspm_packages/
-
-# TypeScript v1 declaration files
-typings/
-
-# TypeScript cache
-*.tsbuildinfo
-
-# Optional npm cache directory
-.npm
-
-# Optional eslint cache
-.eslintcache
-
-# Microbundle cache
-.rpt2_cache/
-.rts2_cache_cjs/
-.rts2_cache_es/
-.rts2_cache_umd/
-
-# Optional REPL history
-.node_repl_history
-
-# Output of 'npm pack'
-*.tgz
-
-# Yarn Integrity file
-.yarn-integrity
-
-# dotenv environment variables file
-.env
-.env.test
-
-# parcel-bundler cache (https://parceljs.org/)
-.cache
-
-# Next.js build output
-.next
-
-# Nuxt.js build / generate output
-.nuxt
-dist
-
-# Gatsby files
-.cache/
-
-# vuepress build output
-.vuepress/dist
-
-# Serverless directories
-.serverless/
-
-# FuseBox cache
-.fusebox/
-
-# DynamoDB Local files
-.dynamodb/
-
-# TernJS port file
-.tern-port
-
-.history
-
-.DS_Store
-
-`;
-}

package/templates/workspace-common/files/prettier-config.ts

@@ -1,5 +0,0 @@
-export const prettierConfig = `const baseConfig = require("@teambit/react/prettier/prettier.config");
-module.exports = {
-  ...baseConfig,
-};
-`;

package/templates/workspace-common/files/readme-file.ts

@@ -1,36 +0,0 @@
-export function readme() {
-  return `# Welcome to your Bit Workspace
-
-To get started straight away run \`bit start\` and open [localhost:3000](http://localhost:3000). It may take a while to build the first time you run this command as it is building the whole User Interface for your development environment.
-
-\`\`\`bash
-bit start
-\`\`\`
-
-## What's included
-
-- **workspace.jsonc**
-
-This is the main configuration file of your bit workspace. Here you can modify the workspace name and icon as well as default directory and scope. It is where dependencies are found when you install anything. It is also where you register aspects, bit extensions as well as apply the environments for your components. This workspace has been setup so that all components use the React env. However you can create other components and apply other envs to them such as node, html, angular and aspect envs.
-
-- **.bitmap**
-
-This is an auto-generated file and includes the mapping of your components. There is one component included here. In order to remove this component you can run the following command.
-
-
-- **Demo Components**
-
-A folder (unless the --empty flag was used) containing demo components are included in this workspace. These components are used to demonstrate the different features of Bit. If you would like to remove these components you can run the following command.
-
-\`\`\`jsx
-bit remove "ui/*" --delete files
-\`\`\`
-
-This removes the components from the bitmap as well as removes the files.
-
-
-- **.gitignore**
-
-Ignoring any files from version control
-`;
-}

package/templates/workspace-common/files/ts-config.ts

@@ -1,7 +0,0 @@
-export const tsConfig = `{
-  "extends": "./node_modules/@teambit/react/typescript/tsconfig.json",
-  // "include": [],
-  "exclude": [
-    "dist"
-  ]
-}`;

package/templates/workspace-common/files/types/asset.ts

@@ -1,28 +0,0 @@
-export const assetTypes = `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;
-}
-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;
-}
-`;