chore: apply new env

.bitmap

@@ -9,47 +9,99 @@
  */
 
 {
+    "envs/automations-env": {
+        "name": "envs/automations-env",
+        "scope": "automations.design",
+        "version": "dc4485e441601443cfc05b1447f872a14e2df239",
+        "mainFile": "index.ts",
+        "rootDir": "bit-components/design/envs/automations-env",
+        "onLanesOnly": true,
+        "isAvailableOnCurrentLane": true
+    },
     "patterns/form": {
         "name": "patterns/form",
         "scope": "automations.design",
         "version": "0.0.12",
         "mainFile": "index.ts",
-        "rootDir": "bit-components/design/patterns/form"
+        "rootDir": "bit-components/design/patterns/form",
+        "config": {
+            "automations.design/envs/automations-env": {},
+            "teambit.envs/envs": {
+                "env": "automations.design/envs/automations-env"
+            }
+        }
     },
     "patterns/header": {
         "name": "patterns/header",
         "scope": "automations.design",
         "version": "0.0.3",
         "mainFile": "index.ts",
-        "rootDir": "bit-components/design/patterns/header"
+        "rootDir": "bit-components/design/patterns/header",
+        "config": {
+            "automations.design/envs/automations-env": {},
+            "teambit.envs/envs": {
+                "env": "automations.design/envs/automations-env"
+            }
+        }
     },
     "ui/button": {
         "name": "ui/button",
         "scope": "automations.design",
         "version": "0.0.8",
         "mainFile": "index.ts",
-        "rootDir": "bit-components/design/ui/button"
+        "rootDir": "bit-components/design/ui/button",
+        "config": {
+            "automations.design/envs/automations-env": {},
+            "teambit.envs/envs": {
+                "env": "automations.design/envs/automations-env"
+            }
+        }
     },
     "ui/card": {
         "name": "ui/card",
         "scope": "automations.design",
         "version": "0.0.4",
         "mainFile": "index.ts",
-        "rootDir": "bit-components/design/ui/card"
+        "rootDir": "bit-components/design/ui/card",
+        "config": {
+            "automations.design/envs/automations-env": {},
+            "teambit.envs/envs": {
+                "env": "automations.design/envs/automations-env"
+            }
+        }
     },
     "ui/dropdown": {
         "name": "ui/dropdown",
         "scope": "automations.design",
         "version": "0.0.2",
         "mainFile": "index.ts",
-        "rootDir": "bit-components/design/ui/dropdown"
+        "rootDir": "bit-components/design/ui/dropdown",
+        "config": {
+            "automations.design/envs/automations-env": {},
+            "teambit.envs/envs": {
+                "env": "automations.design/envs/automations-env"
+            }
+        }
     },
     "ui/input": {
         "name": "ui/input",
         "scope": "automations.design",
         "version": "0.0.3",
         "mainFile": "index.ts",
-        "rootDir": "bit-components/design/ui/input"
+        "rootDir": "bit-components/design/ui/input",
+        "config": {
+            "automations.design/envs/automations-env": {},
+            "teambit.envs/envs": {
+                "env": "automations.design/envs/automations-env"
+            }
+        }
     },
-    "$schema-version": "17.0.0"
+    "$schema-version": "17.0.0",
+    "_bit_lane": {
+        "id": {
+            "name": "react-env",
+            "scope": "automations.design"
+        },
+        "exported": true
+    }
 }

bit-components/design/envs/automations-env/automations-env.bit-env.ts

@@ -0,0 +1,43 @@
+/**
+* This env uses bitdev.react/react-env, inspect it's config and API - https://bit.cloud/bitdev/react/react-env
+* Learn more on how you can customize your env here - https://bit.dev/docs/react-env/set-up-your-env
+*/
+import { ReactEnv } from '@bitdev/react.react-env';
+import { createRequire } from 'node:module';
+import { dirname } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const esmRequire = createRequire(import.meta.url);
+
+export class AutomationsEnv extends ReactEnv {
+
+  /* a shorthand name for the env */
+  name = 'automations-env';
+
+  /* Typescript config. Learn how to replace compiler - https://bit.dev/reference/compiling/set-up-compiler */
+  protected tsconfigPath = esmRequire.resolve('./config/tsconfig.json');
+
+  protected tsTypesPath = './types';
+
+  /* ESLint config. Learn how to replace linter - https://bit.dev/reference/linting/set-up-linter */
+  protected eslintConfigPath = esmRequire.resolve('./config/eslintrc.cjs');
+
+  /* Prettier config. Learn how to replace formatter - https://bit.dev/reference/formatting/set-up-formatter */
+  protected prettierConfigPath = esmRequire.resolve('./config/prettier.config.cjs');
+
+  /* Vitest config. Learn how to replace tester - https://bit.dev/reference/testing/set-up-tester */
+  protected vitestConfigPath = esmRequire.resolve('./config/vitest.config.mjs');
+
+  /* component mounting and dev-server config. Learn how to replace dev-server - https://bit.dev/reference/preview/setup-preview */
+  protected previewMounter = esmRequire.resolve('./preview/mounter.js');
+
+  /* component docs template. Learn how to replace dev-server - https://bit.dev/reference/preview/setup-preview */
+  protected previewDocsTemplate = esmRequire.resolve('./preview/docs.js');
+
+  /* Vite config for the preview. */
+  protected previewViteConfig = esmRequire.resolve('./config/vite.config.mjs');
+
+  protected dirName = dirname(fileURLToPath(import.meta.url));
+}
+
+export default new AutomationsEnv();

bit-components/design/envs/automations-env/automations-env.docs.mdx

@@ -0,0 +1,58 @@
+---
+description: 'A React development environment.'
+labels: ['env', 'react', 'dev', 'vite', 'jest', 'webpack']
+---
+
+A reusable development environment for React.  
+Use the React environment to create new React components and apps.
+
+Features:
+- ▶️ TypeScript
+- 🧪 Vitest
+- 🧑‍💻 Generator templates include React UI component, React hook and apps (including Vite + SSR).
+- 🚀 React Workspace starter
+- 🦋 ESLint
+- ⚒️ A React optimized build pipeline.
+- 👓 React Preview
+
+## Use in existing workspaces
+
+Add the development env to your generator configuration on `workspace.jsonc`.  
+
+```json
+{
+  "teambit.generator/generator": {
+    "envs": [
+      "automations.design/envs/automations-env"
+    ]
+  }
+}
+```
+
+You can see the generator templates in your workspace using `bit templates`.
+
+## Use on an existing component
+
+Use this dev environment on your existing components, by running the following command: 
+
+```
+bit env set my-component automations.design/envs/automations-env
+```
+
+
+## Create a React workspace
+
+You can create a new React workspace made from this env using the following command:
+
+```
+bit new react my-workspace --aspect automations.design/envs/automations-env
+```
+
+## Compose your own env
+
+You can base on this env, and customize it to your needs. To create your env run this command:
+```
+bit create react-env my-new-env
+```
+
+Make sure your new environment class extends this env class and overrides the needed class methods.

bit-components/design/envs/automations-env/config/eslintrc.cjs

@@ -0,0 +1,6 @@
+/**
+ * @see https://bit.dev/reference/eslint/eslint-config
+ */
+module.exports = {
+  extends: [require.resolve('@bitdev/react.react-env/config/eslintrc.cjs')],
+};

bit-components/design/envs/automations-env/config/prettier.config.cjs

@@ -0,0 +1,8 @@
+/**
+ * @see https://bit.dev/reference/prettier/prettier-config
+ */
+const prettierConfig = require('@bitdev/react.react-env/config/prettier.config.cjs');
+
+module.exports = {
+  ...prettierConfig,
+};

bit-components/design/envs/automations-env/config/tsconfig.json

@@ -0,0 +1,8 @@
+/**
+ * @see https://bit.dev/reference/typescript/typescript-config
+ */
+{
+  "extends": "@bitdev/react.react-env/config/tsconfig.json",
+  "exclude": ["artifacts", "public", "dist", "node_modules", "package.json", "**/*.cjs"],
+  "include": ["**/*", "**/*.json"]
+}

bit-components/design/envs/automations-env/config/vite.config.mjs

@@ -0,0 +1,4 @@
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+});

bit-components/design/envs/automations-env/config/vitest.config.mjs

@@ -0,0 +1,10 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    setupFiles: [import.meta.resolve('./vitest.setup.mjs')],},
+});

bit-components/design/envs/automations-env/config/vitest.setup.mjs

@@ -0,0 +1,2 @@
+import '@testing-library/jest-dom';
+import '@testing-library/jest-dom/vitest';

bit-components/design/envs/automations-env/env.jsonc

@@ -0,0 +1,3 @@
+{
+  "extends": "@bitdev/react.react-env"
+}

bit-components/design/envs/automations-env/index.ts

@@ -0,0 +1,4 @@
+import { AutomationsEnv } from './automations-env.bit-env.js';
+
+export { AutomationsEnv };
+export default AutomationsEnv;

bit-components/design/envs/automations-env/preview/docs.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import { createDocsTemplate } from '@bitdev/react.preview.react-docs-template';
+
+/**
+ * customize the bit documentation template or
+ * replace this with one of your own.
+ */
+export default createDocsTemplate();

bit-components/design/envs/automations-env/preview/mounter.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { createMounter } from '@teambit/react.mounter';
+
+/**
+ * provide your component compositions (preview) with the context they need to run.
+ * for example, a router, a theme, a data provider, etc.
+ * components added here as providers, should be listed as host-dependencies in your host-dependencies.ts file.
+ * @see https://bit.dev/docs/react-env/component-previews#composition-providers
+ */
+export function MyReactProvider({ children }: { children: React.ReactNode }) {
+  return <>{children}</>;
+}
+
+/**
+ * the entry for the app (preview runtime) that renders your component previews.
+ * use the default template or create your own.
+ * @see https://docs/react-env/component-previews#composition-mounter
+ */
+export default createMounter(MyReactProvider) as any;

bit-components/design/envs/automations-env/types/env.d.ts

@@ -0,0 +1,16 @@
+
+/// <reference types="vite/client" />
+
+export type ImportMetaEnv = Record<string, string>;
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv
+}
+
+declare global {
+  namespace NodeJS {
+    interface ProcessEnv {
+      [key: string]: string;
+    }
+  }
+}