@teambit/react 1.0.41 → 1.0.42

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',
-    },
-  },
-};