Merge branch 'master' of https://github.com/spotify/backstage into remove_plugin_wip

This commit is contained in:
Jose Balanza Martinez
2020-04-08 13:13:26 -05:00
parent 6088dd72a2
commit e67bfd1349
41 changed files with 101 additions and 69 deletions
+10
View File
@@ -19,11 +19,21 @@ There are a lot of exciting things coming up and we want to keep you in the loop
## 🛠 Our Practice
The chart below details how we work. ***Stay tuned***: We are currently in the process of securing a Figma workspace for Backstage Open Source, and we plan on referencing Figma documents to share specs and prototypes with the community.
### Creating a New Design Component
| Step 1 | Step 2 | Step 3 | Step 4 | Step 5 | Step 6 |
|:---|:---|:---|:---|:---|:---|
| Platform design team submits an issue to **spotify/Backstage GitHub** with a potential component. | Backstage community offers feedback or approval on **spotify/Backstage GitHub**. | Platform design team adjusts accordingly (as they see fit) and update the Figma DLS document. | Designed component is added to **spotify/Backstage GitHub** as an issue. | External or internal Backstage open source contributors build the component. | External or internal contributors add the component to the **Backstage Storybook**. 🎉 |
### Building for Backstage
| Step 1 | Step 2 | Step 3 | Step 4 |
|:---|:---|:---|:---|
| External or internal contributors use Backstage and come up with an idea of an entity to build for Backstage. |External or internal contributors refer to the Backstage Open Source design system documentation in the Figma DLS document. | External or internal contributors leverage the components and tokens from the Backstage Storybook. | External or internal contributors build their Backstage entity. |
| Step 5 | Step 6 | Step 7 | Step 8 |
|:---|:---|:---|:---|
| External or internal contributors make a pull request for their entity on spotify/Backstage GitHub for review. | Platform designers and devs review the entity and submit feedback or approval on spotify/Backstage GitHub. | External or internal contributors make the changes, pull request is approved and the entity is merged. Its live on Backstage! 🎉 | If the entity happens to be or include a UX component, its added to Backstage Storybook as well. |
The following diagram shows the relationship between the Backstage Design System and our foundation, which comprises of [Material UI](https://material-ui.com/) that is shaped by user experience and user interface decisions made by our Backstage Design Team. Also note, we encourage you to take the core experience weve crafted and add custom theming to better represent your organization!
Binary file not shown.

After

Width:  |  Height:  |  Size: 122 KiB

+1 -1
View File
@@ -5,5 +5,5 @@
],
"npmClient": "yarn",
"useWorkspaces": true,
"version": "0.1.1-alpha.2"
"version": "0.1.1-alpha.3"
}
+6 -6
View File
@@ -1,13 +1,13 @@
{
"name": "example-app",
"version": "0.1.1-alpha.2",
"version": "0.1.1-alpha.3",
"private": true,
"dependencies": {
"@backstage/cli": "^0.1.1-alpha.2",
"@backstage/core": "^0.1.1-alpha.2",
"@backstage/theme": "^0.1.1-alpha.2",
"@backstage/plugin-home-page": "^0.1.1-alpha.2",
"@backstage/plugin-welcome": "^0.1.1-alpha.2",
"@backstage/cli": "^0.1.1-alpha.3",
"@backstage/core": "^0.1.1-alpha.3",
"@backstage/plugin-home-page": "^0.1.1-alpha.3",
"@backstage/plugin-welcome": "^0.1.1-alpha.3",
"@backstage/theme": "^0.1.1-alpha.3",
"@material-ui/core": "^4.9.1",
"@material-ui/icons": "^4.9.1",
"@material-ui/lab": "4.0.0-alpha.45",
+1 -1
View File
@@ -1,7 +1,7 @@
{
"name": "@backstage/cli",
"description": "CLI for developing Backstage plugins and apps",
"version": "0.1.1-alpha.2",
"version": "0.1.1-alpha.3",
"private": false,
"publishConfig": {
"access": "public"
@@ -57,11 +57,11 @@ async function cleanUp(tempDir: string) {
});
}
async function buildApp(pluginFolder: string) {
async function buildApp(appFolder: string) {
const commands = ['yarn install', 'yarn build'];
for (const command of commands) {
await Task.forItem('executing', command, async () => {
process.chdir(pluginFolder);
process.chdir(appFolder);
await exec(command).catch(error => {
process.stdout.write(error.stderr);
@@ -80,7 +80,7 @@ export async function moveApp(
await Task.forItem('moving', id, async () => {
await fs.move(tempDir, destination).catch(error => {
throw new Error(
`Failed to move plugin from ${tempDir} to ${destination}: ${error.message}`,
`Failed to move app from ${tempDir} to ${destination}: ${error.message}`,
);
});
});
@@ -97,7 +97,7 @@ export default async () => {
return chalk.red('Please enter a name for the app');
} else if (!/^[a-z0-9]+(-[a-z0-9]+)*$/.test(value)) {
return chalk.red(
'Plugin name must be kebab-cased and contain only letters, digits, and dashes.',
'App name must be kebab-cased and contain only letters, digits, and dashes.',
);
}
return true;
@@ -1,4 +1,7 @@
{
"extends": "../../tsconfig.json",
"include": ["src"]
"include": ["src"],
"compilerOptions": {
"baseUrl": "src"
}
}
@@ -1,4 +1,7 @@
{
"extends": "../../tsconfig.json",
"include": ["src"]
"include": ["src"],
"compilerOptions": {
"baseUrl": "src"
}
}
+4 -4
View File
@@ -1,7 +1,7 @@
{
"name": "@backstage/core",
"description": "Core API used by Backstage plugins and apps",
"version": "0.1.1-alpha.2",
"version": "0.1.1-alpha.3",
"private": false,
"publishConfig": {
"access": "public"
@@ -41,9 +41,9 @@
"recompose": "0.30.0"
},
"devDependencies": {
"@backstage/cli": "^0.1.1-alpha.2",
"@backstage/test-utils": "^0.1.1-alpha.2",
"@backstage/theme": "^0.1.1-alpha.2",
"@backstage/cli": "^0.1.1-alpha.3",
"@backstage/test-utils": "^0.1.1-alpha.3",
"@backstage/theme": "^0.1.1-alpha.3",
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.3.2",
"@testing-library/user-event": "^7.1.2",
@@ -19,7 +19,7 @@ import {
UserFlags,
FeatureFlagsRegistry,
FeatureFlagsRegistryItem,
} from '../../app/FeatureFlags';
} from 'api/app/FeatureFlags';
/**
* The feature flags API is used to toggle functionality to users across plugins and Backstage.
+4 -4
View File
@@ -18,16 +18,16 @@ import React, { ComponentType } from 'react';
import { Route, Switch, Redirect } from 'react-router-dom';
import { AppContextProvider } from './AppContext';
import { App } from './types';
import BackstagePlugin from '../plugin/Plugin';
import BackstagePlugin from 'api/plugin/Plugin';
import { FeatureFlagsRegistryItem } from './FeatureFlags';
import { featureFlagsApiRef } from '../apis/definitions/featureFlags';
import { featureFlagsApiRef } from 'api/apis/definitions/featureFlags';
import {
IconComponent,
SystemIcons,
SystemIconKey,
defaultSystemIcons,
} from '../../icons';
import { ApiHolder, ApiProvider } from '../apis';
} from 'icons';
import { ApiHolder, ApiProvider } from 'api/apis';
import LoginPage from './LoginPage';
class AppImpl implements App {
@@ -15,7 +15,7 @@
*/
import { FeatureFlags as FeatureFlagsImpl } from './FeatureFlags';
import { FeatureFlagState } from '../apis/definitions/featureFlags';
import { FeatureFlagState } from 'api/apis/definitions/featureFlags';
describe('FeatureFlags', () => {
beforeEach(() => {
+2 -2
View File
@@ -14,11 +14,11 @@
* limitations under the License.
*/
import { FeatureFlagName } from '../plugin/types';
import { FeatureFlagName } from 'api/plugin/types';
import {
FeatureFlagState,
FeatureFlagsApi,
} from '../apis/definitions/featureFlags';
} from 'api/apis/definitions/featureFlags';
/**
* Helper method for validating compatibility and flag name.
@@ -16,10 +16,10 @@
import React, { FC, useState } from 'react';
import { GitHub as GitHubIcon } from '@material-ui/icons';
import Page from '../../../layout/Page';
import Header from '../../../layout/Header';
import Content from '../../../layout/Content/Content';
import ContentHeader from '../../../layout/ContentHeader/ContentHeader';
import Page from 'layout/Page';
import Header from 'layout/Header';
import Content from 'layout/Content/Content';
import ContentHeader from 'layout/ContentHeader/ContentHeader';
import {
Grid,
Typography,
@@ -29,7 +29,7 @@ import {
ListItem,
Link,
} from '@material-ui/core';
import InfoCard from '../../../layout/InfoCard/InfoCard';
import InfoCard from 'layout/InfoCard/InfoCard';
enum AuthType {
GitHub,
+1 -1
View File
@@ -15,7 +15,7 @@
*/
import { ComponentType } from 'react';
import { IconComponent, SystemIconKey } from '../../icons';
import { IconComponent, SystemIconKey } from 'icons';
export type App = {
getSystemIcon(key: SystemIconKey): IconComponent;
+2 -2
View File
@@ -21,8 +21,8 @@ import {
RouteOptions,
FeatureFlagName,
} from './types';
import { validateBrowserCompat, validateFlagName } from '../app/FeatureFlags';
import { Widget } from '../widgetView/types';
import { validateBrowserCompat, validateFlagName } from 'api/app/FeatureFlags';
import { Widget } from 'api/widgetView/types';
export type PluginConfig = {
id: string;
+1 -1
View File
@@ -15,7 +15,7 @@
*/
import { ComponentType } from 'react';
import { Widget } from '../widgetView/types';
import { Widget } from 'api/widgetView/types';
export type RouteOptions = {
// Whether the route path must match exactly, defaults to true.
@@ -15,10 +15,10 @@
*/
import React, { ComponentType } from 'react';
import { AppComponentBuilder } from '../app/types';
import { AppComponentBuilder } from 'api/app/types';
import { Widget } from './types';
import BackstagePlugin from '../plugin/Plugin';
import DefaultWidgetView from '../../components/DefaultWidgetView';
import BackstagePlugin from 'api/plugin/Plugin';
import DefaultWidgetView from 'components/DefaultWidgetView';
type WidgetViewRegistration =
| {
@@ -16,7 +16,7 @@
import React, { FC } from 'react';
import { Grid, Paper, makeStyles, Theme } from '@material-ui/core';
import { WidgetViewProps } from '../../api/widgetView/types';
import { WidgetViewProps } from 'api/widgetView/types';
const useStyles = makeStyles<Theme>(theme => ({
root: {
@@ -17,8 +17,8 @@
import React, { FC } from 'react';
import { makeStyles } from '@material-ui/core';
import InfoCard from '../layout/InfoCard';
import { Props as BottomLinkProps } from '../layout/InfoCard/BottomLink';
import InfoCard from 'layout/InfoCard';
import { Props as BottomLinkProps } from 'layout/InfoCard/BottomLink';
import CircleProgress from './CircleProgress';
type Props = {
+1 -1
View File
@@ -18,7 +18,7 @@ import { SvgIconProps } from '@material-ui/core';
import PeopleIcon from '@material-ui/icons/People';
import PersonIcon from '@material-ui/icons/Person';
import React, { FC } from 'react';
import { useApp } from '../api/app/AppContext';
import { useApp } from 'api/app/AppContext';
import { IconComponent, SystemIconKey, SystemIcons } from './types';
export const defaultSystemIcons: SystemIcons = {
+1 -1
View File
@@ -19,7 +19,7 @@ import Helmet from 'react-helmet';
import { Typography, Tooltip, makeStyles } from '@material-ui/core';
import { BackstageTheme } from '@backstage/theme';
import { Theme } from '../Page/Page';
import { Theme } from 'layout/Page/Page';
// import { Link } from 'shared/components';
import Waves from './Waves';
@@ -16,7 +16,7 @@
import React from 'react';
import { render } from '@testing-library/react';
import { pageTheme } from '../Page/PageThemeProvider';
import { pageTheme } from 'layout/Page/PageThemeProvider';
import Waves from './Waves';
describe('<Waves/>', () => {
+1 -1
View File
@@ -16,7 +16,7 @@
import React, { FC } from 'react';
import { makeStyles } from '@material-ui/core';
import { PageTheme } from '../Page';
import { PageTheme } from 'layout/Page';
const useStyles = makeStyles<PageTheme>({
wave: {
@@ -18,7 +18,7 @@ import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Tooltip, Link, withStyles } from '@material-ui/core';
import { StatusError } from '../../components/Status';
import { StatusError } from 'components/Status';
import HeaderLabel from './HeaderLabel';
const style = theme => ({
@@ -24,7 +24,7 @@ import {
withStyles,
makeStyles,
} from '@material-ui/core';
import ErrorBoundary from '../ErrorBoundary/ErrorBoundary';
import ErrorBoundary from 'layout/ErrorBoundary/ErrorBoundary';
import BottomLink, { Props as BottomLinkProps } from './BottomLink';
const useStyles = makeStyles(theme => ({
+1
View File
@@ -2,6 +2,7 @@
"extends": "../../tsconfig.json",
"include": ["src"],
"compilerOptions": {
"baseUrl": "src",
"noImplicitAny": false
}
}
+3
View File
@@ -1,3 +1,5 @@
const path = require('path');
module.exports = {
stories: [
'../../core/src/layout/**/*.stories.tsx',
@@ -5,6 +7,7 @@ module.exports = {
],
addons: ['@storybook/addon-actions', '@storybook/addon-links'],
webpackFinal: async config => {
config.resolve.modules.push(path.resolve(__dirname, '../../core/src'));
config.module.rules.push(
{
test: /\.(ts|tsx)$/,
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "storybook",
"version": "0.1.1-alpha.2",
"version": "0.1.1-alpha.3",
"description": "Storybook build for core package",
"private": true,
"scripts": {
+3 -3
View File
@@ -1,7 +1,7 @@
{
"name": "@backstage/test-utils",
"description": "Utilities to test Backstage plugins and apps.",
"version": "0.1.1-alpha.2",
"version": "0.1.1-alpha.3",
"private": false,
"publishConfig": {
"access": "public"
@@ -24,8 +24,8 @@
"test": "backstage-cli test"
},
"devDependencies": {
"@backstage/cli": "^0.1.1-alpha.2",
"@backstage/theme": "^0.1.1-alpha.2",
"@backstage/cli": "^0.1.1-alpha.3",
"@backstage/theme": "^0.1.1-alpha.3",
"@material-ui/core": "^4.9.1",
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.3.2",
+4 -1
View File
@@ -1,4 +1,7 @@
{
"extends": "../../tsconfig.json",
"include": ["src"]
"include": ["src"],
"compilerOptions": {
"baseUrl": "src"
}
}
+2 -2
View File
@@ -1,7 +1,7 @@
{
"name": "@backstage/theme",
"description": "material-ui theme for use with Backstage.",
"version": "0.1.1-alpha.2",
"version": "0.1.1-alpha.3",
"private": false,
"publishConfig": {
"access": "public"
@@ -23,7 +23,7 @@
"lint": "backstage-cli lint"
},
"devDependencies": {
"@backstage/cli": "^0.1.1-alpha.2",
"@backstage/cli": "^0.1.1-alpha.3",
"@material-ui/core": "^4.9.1"
},
"peerDependencies": {
+4 -1
View File
@@ -1,4 +1,7 @@
{
"extends": "../../tsconfig.json",
"include": ["src"]
"include": ["src"],
"compilerOptions": {
"baseUrl": "src"
}
}
+4 -4
View File
@@ -1,6 +1,6 @@
{
"name": "@backstage/plugin-home-page",
"version": "0.1.1-alpha.2",
"version": "0.1.1-alpha.3",
"main": "dist/index.cjs.js",
"types": "dist/index.d.ts",
"license": "Apache-2.0",
@@ -11,9 +11,9 @@
"test": "backstage-cli test"
},
"devDependencies": {
"@backstage/cli": "^0.1.1-alpha.2",
"@backstage/core": "^0.1.1-alpha.2",
"@backstage/theme": "^0.1.1-alpha.2",
"@backstage/cli": "^0.1.1-alpha.3",
"@backstage/core": "^0.1.1-alpha.3",
"@backstage/theme": "^0.1.1-alpha.3",
"@material-ui/core": "^4.9.1",
"@material-ui/icons": "^4.9.1",
"@testing-library/jest-dom": "^4.2.4",
@@ -16,7 +16,7 @@
import React, { FC } from 'react';
import { Typography, Link, Grid } from '@material-ui/core';
import HomePageTimer from '../HomepageTimer';
import HomePageTimer from 'components/HomepageTimer';
import { Content, InfoCard, Header, Page, pageTheme } from '@backstage/core';
import SquadTechHealth from './SquadTechHealth';
import Table from '@material-ui/core/Table';
+1 -1
View File
@@ -15,7 +15,7 @@
*/
import { createPlugin } from '@backstage/core';
import HomePage from './components/HomePage';
import HomePage from 'components/HomePage';
export default createPlugin({
id: 'home-page',
+4 -1
View File
@@ -1,4 +1,7 @@
{
"extends": "../../tsconfig.json",
"include": ["src"]
"include": ["src"],
"compilerOptions": {
"baseUrl": "src"
}
}
+4 -4
View File
@@ -1,6 +1,6 @@
{
"name": "@backstage/plugin-welcome",
"version": "0.1.1-alpha.2",
"version": "0.1.1-alpha.3",
"main": "dist/index.cjs.js",
"types": "dist/index.d.ts",
"private": true,
@@ -11,9 +11,9 @@
"test": "backstage-cli test"
},
"devDependencies": {
"@backstage/cli": "^0.1.1-alpha.2",
"@backstage/core": "^0.1.1-alpha.2",
"@backstage/theme": "^0.1.1-alpha.2",
"@backstage/cli": "^0.1.1-alpha.3",
"@backstage/core": "^0.1.1-alpha.3",
"@backstage/theme": "^0.1.1-alpha.3",
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.3.2",
"@testing-library/user-event": "^7.1.2",
@@ -24,7 +24,7 @@ import {
ListItemText,
Link,
} from '@material-ui/core';
import Timer from '../Timer';
import Timer from 'components/Timer';
import {
Content,
InfoCard,
+1 -1
View File
@@ -15,7 +15,7 @@
*/
import { createPlugin } from '@backstage/core';
import WelcomePage from './components/WelcomePage';
import WelcomePage from 'components/WelcomePage';
export default createPlugin({
id: 'welcome',
+4 -1
View File
@@ -1,4 +1,7 @@
{
"extends": "../../tsconfig.json",
"include": ["src"]
"include": ["src"],
"compilerOptions": {
"baseUrl": "src"
}
}