@teambit/react 0.0.566 → 0.0.570

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,43 @@
+export const styleTypes = `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/templates/workspace-common/files/workspace-config.ts

@@ -0,0 +1,58 @@
+import { WorkspaceContext } from '@teambit/generator';
+import { getWorkspaceConfigTemplateParsed, stringifyWorkspaceConfig } from '@teambit/config';
+import { parse, assign } from 'comment-json';
+
+export async function workspaceConfig({ name, defaultScope, empty }: WorkspaceContext) {
+  const scope = defaultScope || 'company.scope';
+  const configParsed = await getWorkspaceConfigTemplateParsed();
+  configParsed['teambit.workspace/workspace'].name = name;
+  configParsed['teambit.workspace/workspace'].defaultScope = scope;
+  configParsed['teambit.dependencies/dependency-resolver'].packageManager = 'teambit.dependencies/pnpm';
+  configParsed['teambit.dependencies/dependency-resolver'].policy = {
+    dependencies: {
+      '@teambit/eslint-config-bit-react': '~0.0.367',
+      '@typescript-eslint/eslint-plugin': '4.29.3',
+      'eslint-import-resolver-node': '0.3.6',
+      'eslint-plugin-import': '2.22.1',
+      'eslint-plugin-jest': '24.4.0',
+      'eslint-plugin-jsx-a11y': '6.4.1',
+      'eslint-plugin-mdx': '1.15.0',
+      'eslint-plugin-react': '7.25.1',
+    },
+    peerDependencies: {
+      '@testing-library/react': '12.0.0',
+      react: '17.0.2',
+      'react-dom': '17.0.2',
+    },
+  };
+
+  const variants = {
+    'teambit.workspace/variants': empty
+      ? {
+          '*': {
+            'teambit.react/react': {},
+          },
+        }
+      : parse(`{
+      "{ui/**}, {pages/**}": {
+        // uses the custom env
+        "${scope}/envs/my-react": {},
+        // uncomment the line below if you remove the custom env and remove the line above
+        // "teambit.react/react": {},
+      },
+      "{themes/**}": {
+        "teambit.react/react": {},
+      },
+      "{content/**}": {
+        "teambit.mdx/mdx": {},
+      },
+      "{envs/**}, {extensions/**}": {
+        "teambit.harmony/aspect": {},
+      },
+    }`),
+  };
+
+  const configMerged = assign(configParsed, variants);
+
+  return stringifyWorkspaceConfig(configMerged);
+}

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

@@ -0,0 +1,51 @@
+import { WorkspaceContext } from '@teambit/generator';
+import { workspaceConfig } from './files/workspace-config';
+import { readme } from './files/readme-file';
+import { gitIgnore } from './files/git-ignore';
+import { assetTypes } from './files/types/asset';
+import { styleTypes } from './files/types/style';
+import { eslintConfig } from './files/eslint-config';
+import { tsConfig } from './files/ts-config';
+import { prettierConfig } from './files/prettier-config';
+
+type GeneratedFile = {
+  relativePath: string;
+  content: string;
+};
+
+export async function generateFiles(context: WorkspaceContext): Promise<GeneratedFile[]> {
+  return [
+    {
+      relativePath: 'workspace.jsonc',
+      content: await workspaceConfig(context),
+    },
+    {
+      relativePath: `.gitignore`,
+      content: gitIgnore(),
+    },
+    {
+      relativePath: `README.md`,
+      content: readme(),
+    },
+    {
+      relativePath: `.eslintrc.js`,
+      content: eslintConfig,
+    },
+    {
+      relativePath: `tsconfig.json`,
+      content: tsConfig,
+    },
+    {
+      relativePath: `.prettierrc.js`,
+      content: prettierConfig,
+    },
+    {
+      relativePath: `types/asset.d.ts`,
+      content: assetTypes,
+    },
+    {
+      relativePath: `types/style.d.ts`,
+      content: styleTypes,
+    },
+  ];
+}

package/templates/workspace-common/index.ts

@@ -0,0 +1 @@
+export { generateFiles } from './generate-files';

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/typescript/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/typescript/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/webpack/postcss.config.ts

@@ -0,0 +1,21 @@
+
+export const postCssConfig = {
+  // Necessary for external CSS imports to work
+  // https://github.com/facebook/create-react-app/issues/2677
+  ident: 'postcss',
+  plugins: [
+    // eslint-disable-next-line global-require
+    require.resolve('postcss-flexbugs-fixes'),
+    // eslint-disable-next-line global-require
+    require('postcss-preset-env')({
+      autoprefixer: {
+        flexbox: 'no-2009',
+      },
+      stage: 3,
+    }),
+    // Adds PostCSS Normalize as the reset css with default options,
+    // so that it honors browserslist config in package.json
+    // which in turn let's users customize the target behavior as per their needs.
+    require.resolve('postcss-normalize'),
+  ],
+};

package/webpack/webpack.config.base.prod.ts

@@ -0,0 +1,123 @@
+import WorkboxWebpackPlugin from 'workbox-webpack-plugin';
+import CssMinimizerPlugin from 'css-minimizer-webpack-plugin';
+import TerserPlugin from 'terser-webpack-plugin';
+import { Configuration } from 'webpack';
+import { WebpackManifestPlugin } from 'webpack-manifest-plugin';
+
+// This is the production and development configuration.
+// It is focused on developer experience, fast rebuilds, and a minimal bundle.
+// eslint-disable-next-line complexity
+export default function (): Configuration {
+  return {
+    optimization: {
+      minimize: true,
+      minimizer: [
+        // This is only used in production mode
+        new TerserPlugin({
+          terserOptions: {
+            parse: {
+              // We want terser to parse ecma 8 code. However, we don't want it
+              // to apply any minification steps that turns valid ecma 5 code
+              // into invalid ecma 5 code. This is why the 'compress' and 'output'
+              // sections only apply transformations that are ecma 5 safe
+              // https://github.com/facebook/create-react-app/pull/4234
+              ecma: 8,
+            },
+            compress: {
+              ecma: 5,
+              warnings: false,
+              // Disabled because of an issue with Uglify breaking seemingly valid code:
+              // https://github.com/facebook/create-react-app/issues/2376
+              // Pending further investigation:
+              // https://github.com/mishoo/UglifyJS2/issues/2011
+              comparisons: false,
+              // Disabled because of an issue with Terser breaking valid code:
+              // https://github.com/facebook/create-react-app/issues/5250
+              // Pending further investigation:
+              // https://github.com/terser-js/terser/issues/120
+              inline: 2,
+            },
+            mangle: {
+              safari10: true,
+            },
+            output: {
+              ecma: 5,
+              comments: false,
+              // Turned on because emoji and regex is not minified properly using default
+              // https://github.com/facebook/create-react-app/issues/2488
+              ascii_only: true,
+            },
+          },
+        }),
+        new CssMinimizerPlugin({
+          minimizerOptions: {
+            preset: [
+              'default',
+              {
+                minifyFontValues: { removeQuotes: false },
+              },
+            ],
+          },
+        }),
+      ],
+      // Automatically split vendor and commons
+      // https://twitter.com/wSokra/status/969633336732905474
+      // https://medium.com/webpack/webpack-4-code-splitting-chunk-graph-and-the-splitchunks-optimization-be739a861366
+      splitChunks: {
+        chunks: 'all',
+        // name: false,
+      },
+      // Keep the runtime chunk separated to enable long term caching
+      // https://twitter.com/wSokra/status/969679223278505985
+      // https://github.com/facebook/create-react-app/issues/5358
+      runtimeChunk: {
+        name: (entrypoint) => `runtime-${entrypoint.name}`,
+      },
+    },
+
+    plugins: [
+      // Generate an asset manifest file with the following content:
+      // - "files" key: Mapping of all asset filenames to their corresponding
+      //   output file so that tools can pick it up without having to parse
+      //   `index.html`
+      //   can be used to reconstruct the HTML if necessary
+      new WebpackManifestPlugin({
+        fileName: 'asset-manifest.json',
+        publicPath: 'public',
+        generate: (seed, files, entrypoints) => {
+          const manifestFiles = files.reduce((manifest, file) => {
+            manifest[file.name] = file.path;
+            return manifest;
+          }, seed);
+          const entrypointFiles = entrypoints.main.filter((fileName) => !fileName.endsWith('.map'));
+
+          // @ts-ignore - https://github.com/shellscape/webpack-manifest-plugin/issues/276
+          return {
+            files: manifestFiles,
+            entrypoints: entrypointFiles,
+          } as Record<string, string>;
+        },
+      }),
+      // Generate a service worker script that will precache, and keep up to date,
+      // the HTML & assets that are part of the webpack build.
+      new WorkboxWebpackPlugin.GenerateSW({
+        clientsClaim: true,
+        exclude: [/\.map$/, /asset-manifest\.json$/],
+        // importWorkboxFrom: 'cdn',
+        navigateFallback: 'public/index.html',
+        navigateFallbackDenylist: [
+          // Exclude URLs starting with /_, as they're likely an API call
+          new RegExp('^/_'),
+          // Exclude any URLs whose last part seems to be a file extension
+          // as they're likely a resource and not a SPA route.
+          // URLs containing a "?" character won't be blacklisted as they're likely
+          // a route with query params (e.g. auth callbacks).
+          new RegExp('/[^/?]+\\.[^/]+$'),
+        ],
+      }),
+    ].filter(Boolean),
+    // Turn off performance processing because we utilize
+    // our own hints via the FileSizeReporter
+    performance: false,
+  };
+}