@backstage/cli 0.33.2-next.0 → 0.34.0-next.2

package/templates/new-frontend-plugin/src/components/ExampleFetchComponent/ExampleFetchComponent.tsx.hbs

@@ -0,0 +1,308 @@
+import { makeStyles } from '@material-ui/core/styles';
+import {
+  Table,
+  TableColumn,
+  Progress,
+  ResponseErrorPanel,
+} from '@backstage/core-components';
+import useAsync from 'react-use/lib/useAsync';
+
+export const exampleUsers = {
+  results: [
+    {
+      gender: 'female',
+      name: {
+        title: 'Miss',
+        first: 'Carolyn',
+        last: 'Moore',
+      },
+      email: 'carolyn.moore@example.com',
+      picture: 'https://api.dicebear.com/6.x/open-peeps/svg?seed=Carolyn',
+      nat: 'GB',
+    },
+    {
+      gender: 'female',
+      name: {
+        title: 'Ms',
+        first: 'Esma',
+        last: 'Berberoğlu',
+      },
+      email: 'esma.berberoglu@example.com',
+      picture: 'https://api.dicebear.com/6.x/open-peeps/svg?seed=Esma',
+      nat: 'TR',
+    },
+    {
+      gender: 'female',
+      name: {
+        title: 'Ms',
+        first: 'Isabella',
+        last: 'Rhodes',
+      },
+      email: 'isabella.rhodes@example.com',
+      picture: 'https://api.dicebear.com/6.x/open-peeps/svg?seed=Isabella',
+      nat: 'GB',
+    },
+    {
+      gender: 'male',
+      name: {
+        title: 'Mr',
+        first: 'Derrick',
+        last: 'Carter',
+      },
+      email: 'derrick.carter@example.com',
+      picture: 'https://api.dicebear.com/6.x/open-peeps/svg?seed=Derrick',
+      nat: 'IE',
+    },
+    {
+      gender: 'female',
+      name: {
+        title: 'Miss',
+        first: 'Mattie',
+        last: 'Lambert',
+      },
+      email: 'mattie.lambert@example.com',
+      picture: 'https://api.dicebear.com/6.x/open-peeps/svg?seed=Mattie',
+      nat: 'AU',
+    },
+    {
+      gender: 'male',
+      name: {
+        title: 'Mr',
+        first: 'Mijat',
+        last: 'Rakić',
+      },
+      email: 'mijat.rakic@example.com',
+      picture: 'https://api.dicebear.com/6.x/open-peeps/svg?seed=Mijat',
+      nat: 'RS',
+    },
+    {
+      gender: 'male',
+      name: {
+        title: 'Mr',
+        first: 'Javier',
+        last: 'Reid',
+      },
+      email: 'javier.reid@example.com',
+      picture: 'https://api.dicebear.com/6.x/open-peeps/svg?seed=Javier',
+      nat: 'US',
+    },
+    {
+      gender: 'female',
+      name: {
+        title: 'Ms',
+        first: 'Isabella',
+        last: 'Li',
+      },
+      email: 'isabella.li@example.com',
+      picture: 'https://api.dicebear.com/6.x/open-peeps/svg?seed=Isabella',
+      nat: 'CA',
+    },
+    {
+      gender: 'female',
+      name: {
+        title: 'Mrs',
+        first: 'Stephanie',
+        last: 'Garrett',
+      },
+      email: 'stephanie.garrett@example.com',
+      picture: 'https://api.dicebear.com/6.x/open-peeps/svg?seed=Stephanie',
+      nat: 'AU',
+    },
+    {
+      gender: 'female',
+      name: {
+        title: 'Ms',
+        first: 'Antonia',
+        last: 'Núñez',
+      },
+      email: 'antonia.nunez@example.com',
+      picture: 'https://api.dicebear.com/6.x/open-peeps/svg?seed=Antonia',
+      nat: 'ES',
+    },
+    {
+      gender: 'male',
+      name: {
+        title: 'Mr',
+        first: 'Donald',
+        last: 'Young',
+      },
+      email: 'donald.young@example.com',
+      picture: 'https://api.dicebear.com/6.x/open-peeps/svg?seed=Donald',
+      nat: 'US',
+    },
+    {
+      gender: 'male',
+      name: {
+        title: 'Mr',
+        first: 'Iegor',
+        last: 'Holodovskiy',
+      },
+      email: 'iegor.holodovskiy@example.com',
+      picture: 'https://api.dicebear.com/6.x/open-peeps/svg?seed=Iegor',
+      nat: 'UA',
+    },
+    {
+      gender: 'female',
+      name: {
+        title: 'Madame',
+        first: 'Jessica',
+        last: 'David',
+      },
+      email: 'jessica.david@example.com',
+      picture: 'https://api.dicebear.com/6.x/open-peeps/svg?seed=Jessica',
+      nat: 'CH',
+    },
+    {
+      gender: 'female',
+      name: {
+        title: 'Ms',
+        first: 'Eve',
+        last: 'Martinez',
+      },
+      email: 'eve.martinez@example.com',
+      picture: 'https://api.dicebear.com/6.x/open-peeps/svg?seed=Eve',
+      nat: 'FR',
+    },
+    {
+      gender: 'male',
+      name: {
+        title: 'Mr',
+        first: 'Caleb',
+        last: 'Silva',
+      },
+      email: 'caleb.silva@example.com',
+      picture: 'https://api.dicebear.com/6.x/open-peeps/svg?seed=Caleb',
+      nat: 'US',
+    },
+    {
+      gender: 'female',
+      name: {
+        title: 'Miss',
+        first: 'Marcia',
+        last: 'Jenkins',
+      },
+      email: 'marcia.jenkins@example.com',
+      picture: 'https://api.dicebear.com/6.x/open-peeps/svg?seed=Marcia',
+      nat: 'US',
+    },
+    {
+      gender: 'female',
+      name: {
+        title: 'Mrs',
+        first: 'Mackenzie',
+        last: 'Jones',
+      },
+      email: 'mackenzie.jones@example.com',
+      picture: 'https://api.dicebear.com/6.x/open-peeps/svg?seed=Mackenzie',
+      nat: 'NZ',
+    },
+    {
+      gender: 'male',
+      name: {
+        title: 'Mr',
+        first: 'Jeremiah',
+        last: 'Gutierrez',
+      },
+      email: 'jeremiah.gutierrez@example.com',
+      picture: 'https://api.dicebear.com/6.x/open-peeps/svg?seed=Jeremiah',
+      nat: 'AU',
+    },
+    {
+      gender: 'female',
+      name: {
+        title: 'Ms',
+        first: 'Luciara',
+        last: 'Souza',
+      },
+      email: 'luciara.souza@example.com',
+      picture: 'https://api.dicebear.com/6.x/open-peeps/svg?seed=Luciara',
+      nat: 'BR',
+    },
+    {
+      gender: 'male',
+      name: {
+        title: 'Mr',
+        first: 'Valgi',
+        last: 'da Cunha',
+      },
+      email: 'valgi.dacunha@example.com',
+      picture: 'https://api.dicebear.com/6.x/open-peeps/svg?seed=Valgi',
+      nat: 'BR',
+    },
+  ],
+};
+
+const useStyles = makeStyles({
+  avatar: {
+    height: 32,
+    width: 32,
+    borderRadius: '50%',
+  },
+});
+
+type User = {
+  gender: string; // "male"
+  name: {
+    title: string; // "Mr",
+    first: string; // "Duane",
+    last: string; // "Reed"
+  };
+  email: string; // "duane.reed@example.com"
+  picture: string; // "https://api.dicebear.com/6.x/open-peeps/svg?seed=Duane"
+  nat: string; // "AU"
+};
+
+type DenseTableProps = {
+  users: User[];
+};
+
+export const DenseTable = ({ users }: DenseTableProps) => {
+  const classes = useStyles();
+
+  const columns: TableColumn[] = [
+    { title: 'Avatar', field: 'avatar' },
+    { title: 'Name', field: 'name' },
+    { title: 'Email', field: 'email' },
+    { title: 'Nationality', field: 'nationality' },
+  ];
+
+  const data = users.map(user => {
+    return {
+      avatar: (
+        <img
+          src={user.picture}
+          className={classes.avatar}
+          alt={user.name.first}
+        />
+      ),
+      name: `${user.name.first} ${user.name.last}`,
+      email: user.email,
+      nationality: user.nat,
+    };
+  });
+
+  return (
+    <Table
+      title="Example User List"
+      options=\{{ search: false, paging: false }}
+      columns={columns}
+      data={data}
+    />
+  );
+};
+
+export const ExampleFetchComponent = () => {
+
+  const { value, loading, error } = useAsync(async (): Promise<User[]> => {
+    // Would use fetch in a real world example
+    return exampleUsers.results;
+  }, []);
+
+  if (loading) {
+    return <Progress />;
+  } else if (error) {
+    return <ResponseErrorPanel error={error} />;
+  }
+
+  return <DenseTable users={value || []} />;
+};

package/templates/new-frontend-plugin/src/components/ExampleFetchComponent/index.ts

@@ -0,0 +1 @@
+export { ExampleFetchComponent } from './ExampleFetchComponent';

package/templates/new-frontend-plugin/src/index.ts.hbs

@@ -0,0 +1 @@
+export { {{ pluginVar }} as default } from './plugin';

package/templates/new-frontend-plugin/src/plugin.test.ts.hbs

@@ -0,0 +1,7 @@
+import { {{ pluginVar }} } from './plugin';
+
+describe('{{pluginId}}', () => {
+  it('should export plugin', () => {
+    expect({{ pluginVar }}).toBeDefined();
+  });
+});

package/templates/new-frontend-plugin/src/plugin.tsx.hbs

@@ -0,0 +1,26 @@
+import React from 'react';
+import {
+  createFrontendPlugin,
+  PageBlueprint,
+} from '@backstage/frontend-plugin-api';
+
+import { rootRouteRef } from './routes';
+
+export const page = PageBlueprint.make({
+  params: {
+    path: '/{{pluginId}}',
+    routeRef: rootRouteRef,
+    loader: () =>
+      import('./components/ExampleComponent').then(m =>
+        <m.ExampleComponent />,
+      ),
+  },
+});
+
+export const {{ pluginVar }} = createFrontendPlugin({
+  id: '{{pluginId}}',
+  extensions: [page],
+  routes: {
+    root: rootRouteRef,
+  }
+});

package/templates/new-frontend-plugin/src/routes.ts

@@ -0,0 +1,3 @@
+import { createRouteRef } from '@backstage/frontend-plugin-api';
+
+export const rootRouteRef = createRouteRef();

package/templates/new-frontend-plugin/src/setupTests.ts

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

package/templates/new-frontend-plugin-module/.eslintrc.js.hbs

@@ -0,0 +1 @@
+module.exports = require('@backstage/cli/config/eslint-factory')(__dirname);

package/templates/new-frontend-plugin-module/README.md.hbs

@@ -0,0 +1,5 @@
+# {{packageName}}
+
+The {{moduleId}} frontend module for the {{pluginId}} plugin.
+
+_This plugin was created through the Backstage CLI_

package/templates/new-frontend-plugin-module/package.json.hbs

@@ -0,0 +1,35 @@
+{
+  "name": "{{packageName}}",
+  "description": "The {{moduleId}} frontend module for the {{pluginId}} plugin.",
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "publishConfig": {
+    "access": "public",
+    "main": "dist/index.cjs.js",
+    "module": "dist/index.esm.js",
+    "types": "dist/index.d.ts"
+  },
+  "backstage": {
+    "role": "frontend-plugin-module",
+    "pluginId": "{{pluginId}}"
+  },
+  "sideEffects": false,
+  "scripts": {
+    "build": "backstage-cli package build",
+    "lint": "backstage-cli package lint",
+    "test": "backstage-cli package test",
+    "clean": "backstage-cli package clean",
+    "prepack": "backstage-cli package prepack",
+    "postpack": "backstage-cli package postpack"
+  },
+  "dependencies": {
+    "@backstage/frontend-plugin-api": "{{versionQuery '@backstage/frontend-plugin-api'}}"
+  },
+  "devDependencies": {
+    "@backstage/cli": "{{versionQuery '@backstage/cli'}}",
+    "@testing-library/jest-dom": "{{versionQuery '@testing-library/jest-dom' '6.0.0'}}"
+  },
+  "files": [
+    "dist"
+  ]
+}

package/templates/new-frontend-plugin-module/portable-template.yaml

@@ -0,0 +1,5 @@
+name: frontend-plugin-module
+role: frontend-plugin-module
+description: A new frontend module that extends an existing frontend plugin
+values:
+  moduleVar: '{{ camelCase pluginId }}Module{{ upperFirst ( camelCase moduleId ) }}'

package/templates/new-frontend-plugin-module/src/index.ts.hbs

@@ -0,0 +1 @@
+export { {{ moduleVar }} as default } from './plugin';

package/templates/new-frontend-plugin-module/src/module.tsx.hbs

@@ -0,0 +1,8 @@
+import { createFrontendModule } from '@backstage/frontend-plugin-api';
+
+export const {{ moduleVar }} = createFrontendModule({
+  pluginId: '{{ pluginId }}',
+  extensions: [
+    /* TODO */
+  ],
+});

package/templates/new-frontend-plugin-module/src/setupTests.ts

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

package/dist/lib/svgrTemplate.cjs.js

@@ -1,23 +0,0 @@
-'use strict';
-
-function svgrTemplate({ imports, interfaces, componentName, props, jsx }, { tpl }) {
-  const name = `${componentName.replace(/icon$/, "")}Icon`;
-  const defaultExport = {
-    type: "ExportDefaultDeclaration",
-    declaration: { type: "Identifier", name }
-  };
-  return tpl`
-${imports}
-import SvgIcon from '@material-ui/core/SvgIcon';
-
-console.log('DEPRECATION WARNING: The .icon.svg extension is deprecated, inline the SVG elements in a MUI SvgIcon instead.', Object.assign(new Error(), {name: 'Warning'}).stack);
-
-${interfaces}
-
-const ${name} = (${props}) => React.createElement(SvgIcon, ${props}, ${jsx.children});
-
-${defaultExport}`;
-}
-
-exports.svgrTemplate = svgrTemplate;
-//# sourceMappingURL=svgrTemplate.cjs.js.map