@teambit/react 0.0.554 → 0.0.558

package/templates/react-app/index.ts

@@ -1,47 +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 { compositionsFile } from './files/compositions';
-import { aspectFile } from './files/aspect';
-import { appFile } from './files/app';
-import { appRootFile } from './files/app-root';
-
-export const reactAppTemplate: ComponentTemplate = {
-  name: 'react-app',
-  hidden: true,
-  description: 'Creates a React app',
-  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}.compositions.tsx`,
-        content: compositionsFile(context),
-      },
-      {
-        relativePath: `${context.name}.aspect.ts`,
-        content: aspectFile(context),
-      },
-      {
-        relativePath: `app.tsx`,
-        content: appFile(context),
-      },
-      {
-        relativePath: `${context.name}.app-root.tsx`,
-        content: appRootFile(context),
-      },
-    ];
-  },
-};

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

@@ -1,25 +0,0 @@
-import { ComponentContext } from '@teambit/generator';
-
-export const componentFile = (context: ComponentContext) => {
-  const { name, namePascalCase: Name } = context;
-  return {
-    relativePath: `${name}.tsx`,
-    content: `import React from 'react';
-
-export type ${Name}Props = {
-  /**
-   * a text to be rendered in the component.
-   */
-  text: string
-};
-
-export function ${Name}({ text }: ${Name}Props) {
-  return (
-    <div>
-      {text}
-    </div>
-  );
-}
-`,
-  };
-};

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

@@ -1,16 +0,0 @@
-import { ComponentContext } from '@teambit/generator';
-
-export const compositionFile = (context: ComponentContext) => {
-  const { name, namePascalCase: Name } = context;
-
-  return {
-    relativePath: `${name}.composition.tsx`,
-    content: `import React from 'react';
-import { ${Name} } from './${name}';
-
-export const Basic${Name} = () => (
-  <${Name} text="hello from ${Name}" />
-);
-`,
-  };
-};

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

@@ -1,32 +0,0 @@
-import { ComponentContext } from '@teambit/generator';
-
-export const docsFile = (context: ComponentContext) => {
-  const { name, namePascalCase: Name } = context;
-
-  return {
-    relativePath: `${name}.docs.mdx`,
-    content: `---
-description: 'A ${Name} component.'
-labels: ['label1', 'label2', 'label3']
----
-
-import { ${Name} } from './${name}';
-
-## React Component for rendering text
-
-A basic div that renders some text
-
-### Component usage
-\`\`\`js
-<${Name} text="hello from ${Name}" />
-\`\`\`
-
-### Using props to customize the text
-
-Modify the text to see it change live:
-\`\`\`js live
-<${Name} text="hello from ${Name}" />
-\`\`\`
-`,
-  };
-};

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

@@ -1,19 +0,0 @@
-import { ComponentContext } from '@teambit/generator';
-
-export const testFile = (context: ComponentContext) => {
-  const { name, namePascalCase: Name } = context;
-
-  return {
-    relativePath: `${name}.spec.tsx`,
-    content: `import React from 'react';
-import { render } from '@testing-library/react';
-import { Basic${Name} } from './${name}.composition';
-
-it('should render with the correct text', () => {
-  const { getByText } = render(<Basic${Name} />);
-  const rendered = getByText('hello from ${Name}');
-  expect(rendered).toBeTruthy();
-});
-`,
-  };
-};

package/templates/react-component/index.ts

@@ -1,40 +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 reactComponent: ComponentTemplate = {
-  name: 'react',
-  description: 'a basic react component',
-
-  generateFiles: (context: ComponentContext) => {
-    const { name, namePascalCase: Name } = context;
-    const indexFile = {
-      relativePath: 'index.ts',
-      content: `export { ${Name} } from './${name}';
-export type { ${Name}Props } from './${name}';
-`,
-    };
-
-    return [indexFile, componentFile(context), compositionFile(context), docsFile(context), testFile(context)];
-  },
-};
-
-export const deprecatedReactComponent: ComponentTemplate = {
-  name: 'react-component',
-  description: 'a basic react component',
-  hidden: true,
-
-  generateFiles: (context: ComponentContext) => {
-    const { name, namePascalCase: Name } = context;
-    const indexFile = {
-      relativePath: 'index.ts',
-      content: `export { ${Name} } from './${name}';
-export type { ${Name}Props } from './${name}';
-`,
-    };
-
-    return [indexFile, componentFile(context), compositionFile(context), docsFile(context), testFile(context)];
-  },
-};

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

@@ -1,18 +0,0 @@
-import { ComponentContext } from '@teambit/generator';
-
-export const componentFile = (context: ComponentContext) => {
-  const { name, namePascalCase: Name } = context;
-  return {
-    relativePath: `${name}.jsx`,
-    content: `import React from 'react';
-
-export function ${Name}({ text }) {
-  return (
-    <div>
-      {text}
-    </div>
-  );
-}
-`,
-  };
-};

package/templates/react-component-js/files/composition.ts

@@ -1,16 +0,0 @@
-import { ComponentContext } from '@teambit/generator';
-
-export const compositionFile = (context: ComponentContext) => {
-  const { name, namePascalCase: Name } = context;
-
-  return {
-    relativePath: `${name}.composition.jsx`,
-    content: `import React from 'react';
-import { ${Name} } from './${name}';
-
-export const Basic${Name} = () => (
-  <${Name} text="hello from ${Name}" />
-);
-`,
-  };
-};

package/templates/react-component-js/files/docs.ts

@@ -1,32 +0,0 @@
-import { ComponentContext } from '@teambit/generator';
-
-export const docsFile = (context: ComponentContext) => {
-  const { name, namePascalCase: Name } = context;
-
-  return {
-    relativePath: `${name}.docs.mdx`,
-    content: `---
-description: 'A ${Name} component.'
-labels: ['label1', 'label2', 'label3']
----
-
-import { ${Name} } from './${name}';
-
-## React Component for rendering text
-
-A basic div that renders some text
-
-### Component usage
-\`\`\`js
-<${Name} text="hello from ${Name}" />
-\`\`\`
-
-### Using props to customize the text
-
-Modify the text to see it change live:
-\`\`\`js live
-<${Name} text="hello from ${Name}" />
-\`\`\`
-`,
-  };
-};

package/templates/react-component-js/files/test.ts

@@ -1,21 +0,0 @@
-import { ComponentContext } from '@teambit/generator';
-
-export const testFile = (context: ComponentContext) => {
-  const { name, namePascalCase: Name } = context;
-
-  return {
-    relativePath: `${name}.spec.jsx`,
-    content: `import React from 'react';
-import { render } from '@testing-library/react';
-import { Basic${Name} } from './${name}.composition';
-
-
-it('should render with the correct text', () => {
-  const { getByText } = render(<Basic${Name} />);
-  const rendered = getByText('hello from ${Name}');
-  expect(rendered).toBeTruthy();
-});
-
-`,
-  };
-};

package/templates/react-component-js/index.ts

@@ -1,38 +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 reactComponentJS: ComponentTemplate = {
-  name: 'react-js',
-  description: 'a basic react component in js',
-
-  generateFiles: (context: ComponentContext) => {
-    const { name, namePascalCase: Name } = context;
-    const indexFile = {
-      relativePath: 'index.js',
-      content: `export { ${Name} } from './${name}';
-`,
-    };
-
-    return [indexFile, componentFile(context), compositionFile(context), docsFile(context), testFile(context)];
-  },
-};
-
-export const deprecatedReactComponentJS: ComponentTemplate = {
-  name: 'react-component-js',
-  description: 'a basic react component in js',
-  hidden: true,
-
-  generateFiles: (context: ComponentContext) => {
-    const { name, namePascalCase: Name } = context;
-    const indexFile = {
-      relativePath: 'index.js',
-      content: `export { ${Name} } from './${name}';
-`,
-    };
-
-    return [indexFile, componentFile(context), compositionFile(context), docsFile(context), testFile(context)];
-  },
-};

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

@@ -1,27 +0,0 @@
-import { ComponentContext } from '@teambit/generator';
-
-export const compositionFile = (context: ComponentContext) => {
-  const { name, namePascalCase: Name } = context;
-
-  return {
-    relativePath: `${name}-context.composition.tsx`,
-    content: `import React, { useContext } from 'react';
-import { ${Name}Provider } from './${name}-context-provider';
-import { ${Name}Context } from './${name}-context';
-
-export function MockComponent() {
-  const theme = useContext(${Name}Context);
-
-  return <div style={{ color: theme.color }}>this should be {theme.color}</div>;
-}
-
-export const BasicThemeUsage = () => {
-  return (
-    <${Name}Provider color="blue">
-      <MockComponent />
-    </${Name}Provider>
-  );
-};
-`,
-  };
-};

package/templates/react-context/files/context-provider.ts

@@ -1,27 +0,0 @@
-import { ComponentContext } from '@teambit/generator';
-
-export const contextProviderFile = (context: ComponentContext) => {
-  const { name, namePascalCase: Name } = context;
-  return {
-    relativePath: `${name}-context-provider.tsx`,
-    content: `import React, { ReactNode } from 'react';
-import { ${Name}Context } from './${name}-context';
-
-export type ${Name}ProviderProps = {
-  /**
-   * primary color of theme.
-   */
-  color?: string,
-
-  /**
-   * children to be rendered within this theme.
-   */
-  children: ReactNode
-};
-
-export function ${Name}Provider({ color, children }: ${Name}ProviderProps) {
-  return <${Name}Context.Provider value={{ color }}>{children}</${Name}Context.Provider>
-}
-`,
-  };
-};

package/templates/react-context/files/context.ts

@@ -1,21 +0,0 @@
-import { ComponentContext } from '@teambit/generator';
-
-export const contextFile = (context: ComponentContext) => {
-  const { name, namePascalCase: Name } = context;
-  return {
-    relativePath: `${name}-context.tsx`,
-    content: `import { createContext } from 'react';
-
-export type ${Name}ContextType = {
-  /**
-   * primary color of theme.
-   */
-  color?: string;
-};
-
-export const ${Name}Context = createContext<${Name}ContextType>({
-  color: 'aqua'
-});
-`,
-  };
-};

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

@@ -1,51 +0,0 @@
-import { ComponentContext } from '@teambit/generator';
-
-export const docsFile = (context: ComponentContext) => {
-  const { name, namePascalCase: Name } = context;
-
-  return {
-    relativePath: `${name}-context.docs.mdx`,
-    content: `---
-description: ${Name} context.
-labels: ['context']
----
-
-import { ${Name}Context } from './${name}-context';
-import { ${Name}Provider } from './${name}-context-provider';
-import { MockComponent } from './${name}-context.composition';
-
-## React Theme Context
-
-This is a simple [React Context](https://reactjs.org/docs/context.html) shared as a Bit component.
-Use this component to apply a theme as a context to set on it's children.
-
-### Component usage
-
-\`\`\`tsx
-() => {
-import React, { useContext } from 'react';
-import { ThemeProvider } from './theme-context-provider';
-import { ThemeContext } from './theme-context';
-
-<${Name}Provider color="blue">
-  // My lovely children now get a theme!
-  <MockComponent />
-</${Name}Provider>;
-\`\`\`
-
-### Using props to customize the theme
-
-Change the color to see the text change:
-
-\`\`\`tsx live
-() => {
-  return (
-    <${Name}Provider color="red">
-      <MockComponent />
-    </${Name}Provider>
-  );
-};
-\`\`\`
-`,
-  };
-};

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

@@ -1,18 +0,0 @@
-import { ComponentContext } from '@teambit/generator';
-
-export const testFile = (context: ComponentContext) => {
-  const { name } = context;
-
-  return {
-    relativePath: `${name}-context.spec.tsx`,
-    content: `import { BasicThemeUsage } from './${name}-context.composition';
-import { render } from '@testing-library/react';
-
-it('should render the button in the color blue', () => {
-  const { getByText } = render(<BasicThemeUsage />);
-  const rendered = getByText('this should be blue');
-  expect(rendered).toBeTruthy();
-});
-`,
-  };
-};

package/templates/react-context/index.ts

@@ -1,32 +0,0 @@
-import { ComponentTemplate, ComponentContext } from '@teambit/generator';
-import { contextFile } from './files/context';
-import { contextProviderFile } from './files/context-provider';
-import { compositionFile } from './files/composition';
-import { docsFile } from './files/docs';
-import { testFile } from './files/test';
-
-export const reactContext: ComponentTemplate = {
-  name: 'react-context',
-  description: 'a react context component',
-
-  generateFiles: (context: ComponentContext) => {
-    const { name, namePascalCase: Name } = context;
-    const indexFile = {
-      relativePath: 'index.ts',
-      content: `export { ${Name}Context } from './${name}-context';
-export type { ${Name}ContextType } from './${name}-context';
-export { ${Name}Provider } from './${name}-context-provider';
-export type { ${Name}ProviderProps } from './${name}-context-provider';
-`,
-    };
-
-    return [
-      indexFile,
-      contextFile(context),
-      contextProviderFile(context),
-      compositionFile(context),
-      docsFile(context),
-      testFile(context),
-    ];
-  },
-};

package/templates/react-env/files/aspect.ts

@@ -1,10 +0,0 @@
-import { ComponentContext } from '@teambit/generator';
-
-export function aspectFile({ namePascalCase: Name, componentId }: ComponentContext) {
-  return `import { Aspect } from '@teambit/harmony';
-
-export const ${Name}Aspect = Aspect.create({
-  id: '${componentId}',
-});
-`;
-}

package/templates/react-env/files/doc.ts

@@ -1,163 +0,0 @@
-import { ComponentContext } from '@teambit/generator';
-
-export function docFile({ name, componentId }: ComponentContext) {
-  return `---
-description: 'A standard React component development environment'
-labels: ['react', 'typescript', 'env', 'extension']
----
-
-## Overview
-
-A customized version which extends the default React component development environment created by teambit. This environment can be applied to all your components or a set of components under the variants of your \`workspace.json\` file. That means they will use your custom environment instead of the default environment. Environment components are just like any other Bit components in that they can be exported and then shared and used in various projects which makes it easier to create standards when working with many teams.
-
-### Usage instructions
-
-Under the **variant** section of your \`workspace.json\` file choose which components you want to have the custom environment set. You can find the id of the extension in the \`${name}.aspect.ts\` file.
-
-\`\`\`json
-{
-  "teambit.workspace/variants": {
-    "{ui/**}, {pages/**}": {
-      "${componentId}": {}
-    }
-  }
-}
-\`\`\`
-
-## Runtime Configurations
-
-Extend the \`main.runtime\` file when you want to add custom configurations at runtime.
-
-### Compilation
-
-By default, Component compilation is done with the TypeScript compiler. Target format is \`ES2015\` which
-supports execution from both NodeJS and browser runtimes for server-side rendering. You can modify the \`tsconfig.json\` file to add your own compiler options which will then be merged with the default configs set by teambit.
-
-Example:
-
-\`\`\`json
-{
-  "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"
-  }
-}
-\`\`\`
-
-### Testing
-
-Component testing is done through [Jest](https://jestjs.io/) with the default \`teambit.react/react\` environment. You can modify the \`jestconfig.js\` file to add your own configurations which will then be merged with the default configs set by teambit.
-
-Example:
-
-To Override the Jest config to ignore transpiling from specific folders add this to the \`jestconfig.js\` file:
-
-\`\`\`js
-const reactJestConfig = require('@teambit/react/jest/jest.config');
-module.exports = {
-  ...reactJestConfig,
-  transformIgnorePatterns: ['/node_modules/(?!(prop-types|@teambit))']
-};
-\`\`\`
-
-### Webpack
-
-Bit uses webpack 5 to bundle components. You can modify the \`webpack.config.js\` file to add your own configurations which will then be merged with the default configs set by teambit.
-
-Example:
-
-\`\`\`ts
-module.exports = {
-  module: {
-    // add your custom rules here
-    rules: []
-  }
-};
-\`\`\`
-
-### ESLint
-
-Bit uses ESLint to lint your components. You can add your own rules in the \`${name}.main.runtime\` file.
-
-Example:
-
-\`\`\`ts
-react.useEslint({
-  transformers: [
-    (config) => {
-      config.setRule('no-console', ['error']);
-      // add more rules here
-      return config;
-    }
-  ]
-}),
-\`\`\`
-
-To use ESLint:
-
-\`\`\`bash
-bit lint
-bit lint --fix
-\`\`\`
-
-### Formatting
-
-Bit uses Prettier to format your components. You can add your own rules in the \`${name}.main.runtime\` file.
-
-Example:
-
-\`\`\`ts
-react.usePrettier({
-  transformers: [
-    (config) => {
-      config.setKey('tabWidth', 2);
-      // add more rules here
-      return config;
-    }
-  ]
-}),
-\`\`\`
-
-To use Prettier:
-
-\`\`\`bash
-bit format --check
-bit format
-\`\`\`
-
-### Dependencies
-
-Override the default dependencies in the \`${name}.main.runtime\` file to include react types of a different version for example.
-
-\`\`\`ts
-react.overrideDependencies({
-  devDependencies: {
-    '@types/react': '17.0.3'
-  }
-});
-\`\`\`
-
-## Preview Configurations
-
-Extend the \`${name}.preview.runtime\` file when you want to add your own customizations only for previewing in the Bit UI.
-
-### Adding a Theme
-
-A custom theme has been added to the env which wraps all the composition files with the required theme so they can be developed with the correct themeing rather than the browsers default. This is added only in the preview runtime and not in the main runtime meaning it is only applied to compositions and not when consuming components. Adding a theme when consuming should be done at App level as you component may be consumed in various apps and have different themes applied depending on where it is consumed.
-
-Example:
-
-\`\`\`ts
-react.registerProvider([ThemeCompositions]);
-`;
-}

package/templates/react-env/files/index.ts

@@ -1,10 +0,0 @@
-import { ComponentContext } from '@teambit/generator';
-
-export function indexFile({ namePascalCase: Name, name }: ComponentContext) {
-  return `import { ${Name}Aspect } from './${name}.aspect';
-
-export type { ${Name}Main } from './${name}.main.runtime';
-export default ${Name}Aspect;
-export { ${Name}Aspect };
-`;
-}