@teambit/react 0.0.568 → 0.0.569

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

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

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

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

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

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

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

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

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

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

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

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;
+}