@teambit/generator 0.0.568 → 0.0.572

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@teambit/generator",
-  "version": "0.0.568",
+  "version": "0.0.572",
   "homepage": "https://bit.dev/teambit/generator/generator",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.generator",
     "name": "generator",
-    "version": "0.0.568"
+    "version": "0.0.572"
   },
   "dependencies": {
     "camelcase": "6.2.0",
@@ -21,21 +21,21 @@
     "isbinaryfile": "4.0.6",
     "@babel/runtime": "7.12.18",
     "core-js": "^3.0.0",
-    "@teambit/bit-error": "0.0.380",
-    "@teambit/component-id": "0.0.384",
-    "@teambit/envs": "0.0.568",
-    "@teambit/workspace": "0.0.568",
-    "@teambit/cli": "0.0.394",
-    "@teambit/graphql": "0.0.568",
-    "@teambit/aspect-loader": "0.0.568",
-    "@teambit/bit": "0.0.570",
-    "@teambit/component": "0.0.568",
-    "@teambit/legacy-bit-id": "0.0.383",
-    "@teambit/compiler": "0.0.568",
-    "@teambit/dependency-resolver": "0.0.568",
-    "@teambit/logger": "0.0.480",
-    "@teambit/pkg": "0.0.568",
-    "@teambit/ui": "0.0.568"
+    "@teambit/bit-error": "0.0.381",
+    "@teambit/component-id": "0.0.385",
+    "@teambit/envs": "0.0.572",
+    "@teambit/workspace": "0.0.572",
+    "@teambit/cli": "0.0.395",
+    "@teambit/graphql": "0.0.572",
+    "@teambit/aspect-loader": "0.0.572",
+    "@teambit/bit": "0.0.574",
+    "@teambit/component": "0.0.572",
+    "@teambit/legacy-bit-id": "0.0.384",
+    "@teambit/compiler": "0.0.572",
+    "@teambit/dependency-resolver": "0.0.572",
+    "@teambit/logger": "0.0.483",
+    "@teambit/pkg": "0.0.572",
+    "@teambit/ui": "0.0.572"
   },
   "devDependencies": {
     "@types/fs-extra": "9.0.7",
@@ -46,10 +46,10 @@
     "@types/react-dom": "^17.0.5",
     "@types/react": "^17.0.8",
     "@types/node": "12.20.4",
-    "@teambit/generator.aspect-docs.generator": "0.0.118"
+    "@teambit/generator.aspect-docs.generator": "0.0.121"
   },
   "peerDependencies": {
-    "@teambit/legacy": "1.0.180",
+    "@teambit/legacy": "1.0.181",
     "react-dom": "^16.8.0 || ^17.0.0",
     "react": "^16.8.0 || ^17.0.0"
   },
@@ -77,27 +77,12 @@
         "react": "-"
       },
       "peerDependencies": {
-        "@teambit/legacy": "1.0.180",
+        "@teambit/legacy": "1.0.181",
         "react-dom": "^16.8.0 || ^17.0.0",
         "react": "^16.8.0 || ^17.0.0"
       }
     }
   },
-  "files": [
-    "dist",
-    "!dist/tsconfig.tsbuildinfo",
-    "**/*.md",
-    "**/*.mdx",
-    "**/*.js",
-    "**/*.json",
-    "**/*.sass",
-    "**/*.scss",
-    "**/*.less",
-    "**/*.css",
-    "**/*.css",
-    "**/*.jpeg",
-    "**/*.gif"
-  ],
   "private": false,
   "engines": {
     "node": ">=12.22.0"

package/templates/component-generator/files/aspect-file.ts

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

package/templates/component-generator/files/docs-file.ts

@@ -0,0 +1,54 @@
+export function docsFile() {
+  return `### Configuring your Generator
+
+Edit your \`workspace.jsonc\` file and set this component to use the \`teambit.harmony/aspect\` env under the variants object.
+
+\`\`\`json
+"teambit.workspace/variants": {
+  "{my-components}": {
+    "teambit.harmony/aspect": {}
+  },
+}
+\`\`\`
+
+To check if your component is using the correct env you can run \`bit envs\` or \`bit show my-components\`
+
+Edit your \`workspace.jsonc\` file and add the component id, (scope name / component name) to teambit generator. This should go at root level. The component id can be found in the \`aspect.ts\` file:
+
+\`\`\`json
+{
+  "teambit.generator/generator": {
+    "aspects": ["my-scope-name/my-components"]
+  },
+}
+\`\`\`
+
+This registers the component aspect so that your templates will appear in the CLI when you run \`bit templates\`.
+
+### Modifying your Generator
+
+The \`my-components.main.runtime.ts\` file contains an array of templates that you can modify and add to to create different templates and numerous files to be generated.
+
+### Using your Generator
+
+Use your generator to create the component files
+
+\`\`\`bash
+bit create my-components component1
+\`\`\`
+
+### Exporting your Generator
+
+Tag and export your generator component so you can use it in any other workspace. Make sure the scope name is set correctly in the \`aspect.ts\` file before tagging and exporting. Once you have tagged and exported the component you can add it to the \`workspace.jsonc\` file in the workspace where you want to use this generator.
+
+\`\`\`json
+{
+  "teambit.generator/generator": {
+    "aspects": ["my-scope-name/my-components"]
+  },
+}
+\`\`\`
+
+Run \`bit templates\` to see your generator and then use it to generate you components.
+`;
+}

package/templates/component-generator/files/index.ts

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

package/templates/component-generator/files/main-runtime.ts

@@ -0,0 +1,125 @@
+import { ComponentContext } from '@teambit/generator';
+
+export function mainRuntime({ name, namePascalCase }: ComponentContext) {
+  return `import { MainRuntime } from '@teambit/cli';
+import { GeneratorMain, GeneratorAspect, ComponentContext } from '@teambit/generator';
+import { ${namePascalCase}Aspect } from './${name}.aspect';
+
+export class ${namePascalCase}Main {
+  static slots = [];
+  static dependencies = [GeneratorAspect];
+  static runtime = MainRuntime;
+  static async provider([generator]: [GeneratorMain]) {
+  /**
+  * Array of templates. Add as many templates as you want
+  * Separate the templates to multiple files if you prefer
+  * Modify, add or remove files as needed
+  * See the docs file of this component for more info
+  */
+
+  generator.registerComponentTemplate([
+      {
+        name: 'component1',
+        description: 'description for component1',
+        generateFiles: (context: ComponentContext) => {
+          return [
+
+            // index file
+            {
+              relativePath: 'index.ts',
+              isMain: true,
+              content: \`export { \${context.namePascalCase} } from './\${context.name}';
+export type { \${context.namePascalCase}Props } from './\${context.name}';
+\`,
+            },
+
+            // component file
+            {
+              relativePath: \`\${context.name}.tsx\`,
+              content: \`import React from 'react';
+
+export type \${context.namePascalCase}Props = {
+  /**
+   * a text to be rendered in the component.
+   */
+  text: string
+};
+
+export function \${context.namePascalCase}({ text }: \${context.namePascalCase}Props) {
+  return (
+    <div>
+      {text}
+    </div>
+  );
+}\`,
+            },
+
+            // docs file
+            {
+              relativePath: \`\${context.name}.docs.mdx\`,
+              content: \`---
+description: 'A React Component for rendering text.'
+labels: ['text', 'ui']
+---
+
+import { \${context.namePascalCase} } from './\${context.name}';
+\`
+            },
+
+            // composition file
+            {
+              relativePath: \`\${context.name}.composition.tsx\`,
+              content: \`import React from 'react';
+import { \${context.namePascalCase} } from './\${context.name}';
+
+export const Basic\${context.namePascalCase}  = () => (
+  <\${context.namePascalCase}  text="hello from \${context.namePascalCase} " />
+);
+\`
+            },
+
+            // test file
+            {
+              relativePath: \`\${context.name}.spec.tsx\`,
+              content: \`import React from 'react';
+import { render } from '@testing-library/react';
+import { Basic\${context.namePascalCase} } from './\${context.name}.composition';
+
+it('should render with the correct text', () => {
+  const { getByText } = render(<Basic\${context.namePascalCase} />);
+  const rendered = getByText('hello from \${context.namePascalCase}');
+  expect(rendered).toBeTruthy();
+});
+\`
+            },
+            // add more files here such as css/sass
+          ];
+        },
+      },
+
+    // component 2
+    {
+        name: 'component2',
+        description: 'description for component2',
+        generateFiles: (context: ComponentContext) => {
+          return [
+
+            // index file
+            {
+              relativePath: 'index.ts',
+              isMain: true,
+              content: \`export {} from '';
+\`,
+            },
+          ]
+        }
+      }
+    ]);
+
+    return new ${namePascalCase}Main();
+  }
+}
+
+${namePascalCase}Aspect.addRuntime(${namePascalCase}Main);
+`;
+}

package/templates/component-generator/index.ts

@@ -0,0 +1,32 @@
+import { ComponentContext, ComponentTemplate } from '@teambit/generator';
+import { indexFile } from './files/index';
+import { aspectFile } from './files/aspect-file';
+import { docsFile } from './files/docs-file';
+import { mainRuntime } from './files/main-runtime';
+
+export const componentGeneratorTemplate: ComponentTemplate = {
+  name: 'component-generator',
+  description:
+    'create your own component generator \nDocs: https://harmony-docs.bit.dev/extending-bit/creating-a-custom-generator',
+  generateFiles: (context: ComponentContext) => {
+    return [
+      {
+        relativePath: 'index.ts',
+        content: indexFile(context),
+        isMain: true,
+      },
+      {
+        relativePath: `${context.name}.aspect.ts`,
+        content: aspectFile(context),
+      },
+      {
+        relativePath: `${context.name}.docs.mdx`,
+        content: docsFile(),
+      },
+      {
+        relativePath: `${context.name}.main.runtime.ts`,
+        content: mainRuntime(context),
+      },
+    ];
+  },
+};

package/templates/workspace-generator/files/aspect-file.ts

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

package/templates/workspace-generator/files/docs-file.ts

@@ -0,0 +1,37 @@
+export function docsFile() {
+  return `---
+description: Generator for generating a workspace
+labels: ['generator', 'templates', 'workspace']
+---
+
+## Registering your Workspace
+
+Register your workspace template under the aspect environment in the variants section of the workspace.jsonc file.
+
+\`\`\`json
+"teambit.workspace/variants": {
+    "{workspace-name}": {
+      "teambit.harmony/aspect": {}
+    }
+  }
+\`\`\`
+
+## Customizing your Workspace
+
+See the docs for more info on [Customizing your Generator](https://harmony-docs.bit.dev/extending-bit/creating-a-custom-workspace-generator)
+
+## Using the Workspace Generator
+
+How to use this generator locally, essentially for development purposes:
+
+\`\`\`js
+bit new <template-name> <workspace-name> --load-from /Users/me/path/to/this/dir --aspect <workspace-template-id>
+\`\`\`
+
+How to use this generator after exporting to a remote scope:
+
+\`\`\`js
+bit new <template-name> <workspace-name> --aspect <workspace-template-id>
+\`\`\`
+`;
+}

package/templates/workspace-generator/files/git-ignore-tpl.ts

@@ -0,0 +1,113 @@
+export function gitIgnoreTemplate() {
+  return `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
+\`;
+}
+`;
+}

package/templates/workspace-generator/files/index-tpl.ts

@@ -0,0 +1,29 @@
+export function indexTemplate() {
+  return `import { WorkspaceContext, WorkspaceTemplate } from '@teambit/generator';
+import { workspaceConfig } from './files/workspace-config';
+import { readme } from './files/readme-file';
+import { gitIgnore } from './files/git-ignore';
+
+export const workspaceTemplate: WorkspaceTemplate = {
+  name: 'template-example',
+  description: 'demonstration of a workspace template',
+  generateFiles: async (context: WorkspaceContext) => [
+    {
+      relativePath: 'workspace.jsonc',
+      content: await workspaceConfig(context),
+    },
+    {
+      relativePath: '.gitignore',
+      content: gitIgnore(),
+    },
+    {
+      relativePath: 'README.md',
+      content: readme(),
+    },
+  ],
+  importComponents: () => [
+    { id: 'teambit.react/templates/ui/text', path: 'ui/text' },
+  ],
+};
+`;
+}

package/templates/workspace-generator/files/index.ts

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

package/templates/workspace-generator/files/main-runtime.ts

@@ -0,0 +1,24 @@
+import { ComponentContext } from '@teambit/generator';
+
+export function mainRuntime({ name, namePascalCase }: ComponentContext) {
+  return `import { MainRuntime } from '@teambit/cli';
+import { GeneratorMain, GeneratorAspect } from '@teambit/generator';
+import { ${namePascalCase}Aspect } from './${name}.aspect';
+import { workspaceTemplate } from './template';
+
+export class ${namePascalCase}Main {
+  static slots = [];
+
+  static dependencies = [GeneratorAspect];
+
+  static runtime = MainRuntime;
+
+  static async provider([generator]: [GeneratorMain]) {
+    generator.registerWorkspaceTemplate([workspaceTemplate]);
+    return new ${namePascalCase}Main();
+  }
+}
+
+${namePascalCase}Aspect.addRuntime(${namePascalCase}Main);
+`;
+}

package/templates/workspace-generator/files/readme-tpl.ts

@@ -0,0 +1,39 @@
+export function readmeTemplate() {
+  return `export function readme() {
+  return \`## Workspace Generator
+
+Easily generate a new workspace with a single command.
+
+## Registering your Workspace
+
+Register your workspace template under the aspect environment in the variants section of the workspace.jsonc file.
+
+\\\`\\\`\\\`json
+"teambit.workspace/variants": {
+    "{workspace-name}": {
+      "teambit.harmony/aspect": {}
+    }
+  }
+\\\`\\\`\\\`
+
+## Customizing your Workspace
+
+See the docs for more info on [Customizing your Generator](https://harmony-docs.bit.dev/extending-bit/creating-a-custom-workspace-generator)
+
+## Using the Workspace Generator
+
+How to use this generator locally, essentially for development purposes:
+
+\\\`\\\`\\\`js
+bit new <template-name> <workspace-name> --load-from /Users/me/path/to/this/dir --aspect <workspace-template-id>
+\\\`\\\`\\\`
+
+How to use this generator after exporting to a remote scope:
+
+\\\`\\\`\\\`js
+bit new <template-name> <workspace-name> --aspect <workspace-template-id>
+\\\`\\\`\\\`
+\`;
+}
+`;
+}

package/templates/workspace-generator/files/workspace-config-tpl.ts

@@ -0,0 +1,18 @@
+export function workspaceConfigTemplate() {
+  return `import { WorkspaceContext } from '@teambit/generator';
+import { getWorkspaceConfigTemplateParsed, stringifyWorkspaceConfig } from '@teambit/config';
+
+export async function workspaceConfig({ name, defaultScope }: WorkspaceContext) {
+  const configParsed = await getWorkspaceConfigTemplateParsed();
+  configParsed['teambit.workspace/workspace'].name = name;
+  configParsed['teambit.workspace/workspace'].defaultScope = defaultScope || 'company.scope';
+  configParsed['teambit.workspace/variants'] = {
+    '*': {
+      'teambit.react/react': {},
+    },
+  };
+
+  return stringifyWorkspaceConfig(configParsed);
+}
+`;
+}

package/templates/workspace-generator/index.ts

@@ -0,0 +1,52 @@
+import { ComponentContext, ComponentTemplate } from '@teambit/generator';
+import { indexFile } from './files/index';
+import { aspectFile } from './files/aspect-file';
+import { docsFile } from './files/docs-file';
+import { mainRuntime } from './files/main-runtime';
+import { gitIgnoreTemplate } from './files/git-ignore-tpl';
+import { readmeTemplate } from './files/readme-tpl';
+import { indexTemplate } from './files/index-tpl';
+import { workspaceConfigTemplate } from './files/workspace-config-tpl';
+
+export const workspaceGeneratorTemplate: ComponentTemplate = {
+  name: 'workspace-generator',
+  description:
+    'create your own workspace generator - \nDocs: https://harmony-docs.bit.dev/extending-bit/creating-a-custom-workspace-generator',
+  generateFiles: (context: ComponentContext) => {
+    return [
+      {
+        relativePath: 'index.ts',
+        content: indexFile(context),
+        isMain: true,
+      },
+      {
+        relativePath: `${context.name}.aspect.ts`,
+        content: aspectFile(context),
+      },
+      {
+        relativePath: `${context.name}.main.runtime.ts`,
+        content: mainRuntime(context),
+      },
+      {
+        relativePath: `${context.name}.docs.mdx`,
+        content: docsFile(),
+      },
+      {
+        relativePath: 'template/files/git-ignore.ts',
+        content: gitIgnoreTemplate(),
+      },
+      {
+        relativePath: 'template/files/readme-file.ts',
+        content: readmeTemplate(),
+      },
+      {
+        relativePath: 'template/files/workspace-config.ts',
+        content: workspaceConfigTemplate(),
+      },
+      {
+        relativePath: 'template/index.ts',
+        content: indexTemplate(),
+      },
+    ];
+  },
+};

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