@teambit/mdx 0.0.546 → 0.0.550

package/babel/babel.config.ts

@@ -0,0 +1,8 @@
+const presets = [require.resolve('@babel/preset-env'), require.resolve('@babel/preset-react')];
+const plugins = [require.resolve('@babel/plugin-proposal-class-properties')];
+
+export const babelConfig = {
+  presets,
+  plugins,
+  sourceMaps: true,
+};

package/mdx.composition.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+export const Logo = () => (
+  <div style={{ height: '100%', display: 'flex', justifyContent: 'center' }}>
+    <img style={{ width: 70 }} src="https://static.bit.dev/brands/logo-mdx.svg" />
+  </div>
+);

package/mdx.ui.runtime.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { CompositionsAspect, CompositionsUI } from '@teambit/compositions';
+import { UIRuntime } from '@teambit/ui';
+import { TesterAspect, TesterUI } from '@teambit/tester';
+import { EmptyBox } from '@teambit/design.ui.empty-box';
+import { MDXAspect } from './mdx.aspect';
+
+export class MDXEnvUI {
+  static runtime = UIRuntime;
+  static slots = [];
+  static dependencies = [CompositionsAspect, TesterAspect];
+
+  static async provider([compositionsUI, testerUi]: [CompositionsUI, TesterUI]) {
+    const mdxEnvUI = new MDXEnvUI();
+
+    testerUi.registerEmptyState(() => {
+      return (
+        <EmptyBox
+          title="This component doesn’t have any tests."
+          linkText="Learn how to add tests to your MDX components"
+          link="https://harmony-docs.bit.dev/testing/overview/"
+        />
+      );
+    });
+
+    compositionsUI.registerEmptyState(() => {
+      return (
+        <EmptyBox
+          title="This component doesn’t have any compositions."
+          linkText="Learn how to add compositions to your MDX components"
+          link="https://harmony-docs.bit.dev/compositions/overview/"
+        />
+      );
+    });
+
+    return mdxEnvUI;
+  }
+}
+
+MDXAspect.addRuntime(MDXEnvUI);
+
+export default MDXEnvUI;

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@teambit/mdx",
-  "version": "0.0.546",
+  "version": "0.0.550",
   "homepage": "https://bit.dev/teambit/mdx/mdx",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.mdx",
     "name": "mdx",
-    "version": "0.0.546"
+    "version": "0.0.550"
   },
   "dependencies": {
     "@teambit/harmony": "0.2.11",
@@ -15,24 +15,24 @@
     "minimatch": "3.0.4",
     "@babel/runtime": "7.12.18",
     "core-js": "^3.0.0",
-    "@teambit/builder": "0.0.566",
-    "@teambit/compilation.modules.babel-compiler": "0.0.108",
-    "@teambit/compiler": "0.0.566",
-    "@teambit/mdx.modules.mdx-compiler": "0.0.470",
-    "@teambit/dependency-resolver": "0.0.566",
-    "@teambit/docs": "0.0.566",
-    "@teambit/babel": "0.0.566",
-    "@teambit/cli": "0.0.393",
-    "@teambit/envs": "0.0.566",
-    "@teambit/generator": "0.0.566",
-    "@teambit/multi-compiler": "0.0.566",
-    "@teambit/react": "0.0.566",
-    "@teambit/typescript.modules.ts-config-mutator": "0.0.50",
-    "@teambit/typescript": "0.0.566",
-    "@teambit/compositions": "0.0.566",
+    "@teambit/builder": "0.0.570",
+    "@teambit/compilation.modules.babel-compiler": "0.0.110",
+    "@teambit/compiler": "0.0.570",
+    "@teambit/mdx.modules.mdx-compiler": "0.0.472",
+    "@teambit/dependency-resolver": "0.0.570",
+    "@teambit/docs": "0.0.570",
+    "@teambit/babel": "0.0.570",
+    "@teambit/cli": "0.0.395",
+    "@teambit/envs": "0.0.570",
+    "@teambit/generator": "0.0.570",
+    "@teambit/multi-compiler": "0.0.570",
+    "@teambit/react": "0.0.570",
+    "@teambit/typescript.modules.ts-config-mutator": "0.0.52",
+    "@teambit/typescript": "0.0.570",
+    "@teambit/compositions": "0.0.570",
     "@teambit/design.ui.empty-box": "0.0.352",
-    "@teambit/tester": "0.0.566",
-    "@teambit/ui": "0.0.566"
+    "@teambit/tester": "0.0.570",
+    "@teambit/ui": "0.0.570"
   },
   "devDependencies": {
     "@types/fs-extra": "9.0.7",
@@ -43,10 +43,10 @@
     "@types/jest": "^26.0.0",
     "@types/react-dom": "^17.0.5",
     "@types/node": "12.20.4",
-    "@teambit/mdx.aspect-docs.mdx": "0.0.112"
+    "@teambit/mdx.aspect-docs.mdx": "0.0.116"
   },
   "peerDependencies": {
-    "@teambit/legacy": "1.0.179",
+    "@teambit/legacy": "1.0.181",
     "react-dom": "^16.8.0 || ^17.0.0",
     "react": "^16.8.0 || ^17.0.0"
   },
@@ -74,27 +74,12 @@
         "react": "-"
       },
       "peerDependencies": {
-        "@teambit/legacy": "1.0.179",
+        "@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/mdx-component/files/component.ts

@@ -0,0 +1,18 @@
+import { ComponentContext } from '@teambit/generator';
+
+export const componentFile = (context: ComponentContext) => {
+  const { name, namePascalCase: Name } = context;
+  return {
+    relativePath: `${name}.mdx`,
+    content: `# Title - ${Name}
+
+This is markdown.
+
+<p>This is HTML</p>
+
+# Import a React Component or use HTML
+
+<button>Button 👋 </button>
+`,
+  };
+};

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

@@ -0,0 +1,16 @@
+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 './index';
+
+export const Basic${Name} = () => (
+  <${Name} />
+);
+`,
+  };
+};

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

@@ -0,0 +1,35 @@
+import { ComponentContext } from '@teambit/generator';
+
+export const docsFile = (context: ComponentContext) => {
+  const { name, namePascalCase: Name } = context;
+
+  return {
+    relativePath: `${name}.docs.mdx`,
+    content: `---
+description: 'An MDX component.'
+labels: ['content', 'mdx']
+---
+
+import { ${Name} } from './index';
+
+### Component usage
+\`\`\`js
+<${Name} />
+\`\`\`
+
+### Render with theme and MDX providers
+
+\`\`\`js
+import { ThemeCompositions } from '@teambit/documenter.theme.theme-compositions'
+import { MDXLayout } from '@teambit/ui.mdx-layout'
+import { ${Name} } from './index'
+
+<ThemeCompositions>
+  <MDXLayout>
+    <${Name} />
+  </MDXLayout>
+</ThemeCompositions>
+\`\`\`
+`,
+  };
+};

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

@@ -0,0 +1,19 @@
+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('${Name}');
+  expect(rendered).toBeTruthy();
+});
+`,
+  };
+};

package/templates/mdx-component/index.ts

@@ -0,0 +1,39 @@
+import { ComponentTemplate, ComponentContext } from '@teambit/generator';
+import { componentFile } from './files/component';
+import { compositionFile } from './files/composition';
+import { docsFile } from './files/docs';
+// TODO @ranm8 Tests won't work in MDX until we add a Jest Transformer for the MDX env.
+// import { testFile } from './files/test';
+
+export const MDXComponent: ComponentTemplate = {
+  name: 'mdx',
+  description: 'MDX-file compiled by Bit to a reuseable component',
+
+  generateFiles: (context: ComponentContext) => {
+    const { name, namePascalCase: Name } = context;
+    const indexFile = {
+      relativePath: 'index.ts',
+      content: `export { default as ${Name}, default } from './${name}.mdx';
+`,
+    };
+
+    return [indexFile, componentFile(context), compositionFile(context), docsFile(context)];
+  },
+};
+
+export const deprecatedMDXComponent: ComponentTemplate = {
+  name: 'mdx-component',
+  description: 'MDX-file compiled by Bit to a reuseable component',
+  hidden: true,
+
+  generateFiles: (context: ComponentContext) => {
+    const { name, namePascalCase: Name } = context;
+    const indexFile = {
+      relativePath: 'index.ts',
+      content: `export { default as ${Name} } from './${name}.mdx';
+`,
+    };
+
+    return [indexFile, componentFile(context), compositionFile(context), docsFile(context)];
+  },
+};

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