diff --git a/packages/cli/templates/default-plugin/package.json.hbs b/packages/cli/templates/default-plugin/package.json.hbs index 2acd60ca26..bd20720ddd 100644 --- a/packages/cli/templates/default-plugin/package.json.hbs +++ b/packages/cli/templates/default-plugin/package.json.hbs @@ -1,7 +1,8 @@ { "name": "@spotify-backstage/plugin-{{id}}", "version": "0.0.0", - "main": "dist/cjs", + "main": "dist/cjs/index.js", + "types": "dist/cjs/index.d.ts", "license": "Apache-2.0", "private": false, "scripts": { diff --git a/packages/cli/templates/default-plugin/src/components/ExampleComponent/ExampleComponent.tsx.hbs b/packages/cli/templates/default-plugin/src/components/ExampleComponent/ExampleComponent.tsx.hbs index fd2a360adf..c791de031d 100644 --- a/packages/cli/templates/default-plugin/src/components/ExampleComponent/ExampleComponent.tsx.hbs +++ b/packages/cli/templates/default-plugin/src/components/ExampleComponent/ExampleComponent.tsx.hbs @@ -1,58 +1,37 @@ import React, { FC } from 'react'; -import { Typography, Grid, makeStyles, Theme } from '@material-ui/core'; +import { Typography, Grid } from '@material-ui/core'; import { InfoCard, Header, Page, - theme as pageTheme, + pageTheme, + Content, } from '@spotify-backstage/core'; import ExampleFetchComponent from '../ExampleFetchComponent'; -const useStyles = makeStyles(theme => ({ - mainContentArea: { - overflowX: 'hidden', - overflowY: 'auto', - }, - pageBody: { - padding: theme.spacing(3), - }, - title: { - padding: theme.spacing(1, 0, 2, 0), - }, -})); - -const ExampleComponent: FC<{}> = () => { - const classes = useStyles(); - - return ( - -
-
- - - Plugin page title - - - - - All content should be wrapped in a card like this. - - - - - - - - +const ExampleComponent: FC<{}> = () => ( + +
+ + + + Plugin page title -
- - ); -}; + + + + All content should be wrapped in a card like this. + + + + + + + + + + + +); export default ExampleComponent; diff --git a/packages/core/package.json b/packages/core/package.json index 1be23df8da..ffe537ca75 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -3,7 +3,8 @@ "version": "1.0.0", "license": "Apache-2.0", "private": false, - "main": "dist/cjs", + "main": "dist/cjs/index.js", + "types": "dist/cjs/index.d.ts", "scripts": { "build": "tsc --outDir dist/cjs --noEmit false --module CommonJS", "lint": "web-scripts lint", diff --git a/packages/core/src/components/DefaultEntityPageHeader/DefaultEntityPageHeader.tsx b/packages/core/src/components/DefaultEntityPageHeader/DefaultEntityPageHeader.tsx index b9e2768141..219fa21cfc 100644 --- a/packages/core/src/components/DefaultEntityPageHeader/DefaultEntityPageHeader.tsx +++ b/packages/core/src/components/DefaultEntityPageHeader/DefaultEntityPageHeader.tsx @@ -1,5 +1,5 @@ import React, { FC } from 'react'; -import { Header, useEntity, useEntityConfig, theme } from '../..'; +import { Header, useEntity, useEntityConfig, pageTheme } from '../..'; import { EntityPageHeaderProps } from '../../api/entityView/types'; import { Theme } from '../../layout/Page/Page'; @@ -9,7 +9,7 @@ const DefaultEntityPageHeader: FC = () => { // TODO(rugvip): provide theme through entity config return ( - +
); diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts index 8a046c8315..3db642aad3 100644 --- a/packages/core/src/index.ts +++ b/packages/core/src/index.ts @@ -4,7 +4,7 @@ export { RelativeEntityLink, } from './components/EntityLink'; export { default as Page } from './layout/Page'; -export { gradients, theme } from './layout/Page'; +export { gradients, pageTheme, PageTheme } from './layout/Page'; export { default as Content } from './layout/Content/Content'; export { default as ContentHeader } from './layout/ContentHeader/ContentHeader'; export { default as Header } from './layout/Header/Header'; diff --git a/packages/core/src/layout/Content/Content.tsx b/packages/core/src/layout/Content/Content.tsx index b04df9b181..711669b465 100644 --- a/packages/core/src/layout/Content/Content.tsx +++ b/packages/core/src/layout/Content/Content.tsx @@ -1,7 +1,5 @@ import React, { FC } from 'react'; -import classNames from 'classnames'; -import { makeStyles } from '@material-ui/core/styles'; -import { Theme } from '@material-ui/core'; +import { Theme, makeStyles } from '@material-ui/core'; const useStyles = makeStyles((theme: Theme) => ({ root: { @@ -11,38 +9,12 @@ const useStyles = makeStyles((theme: Theme) => ({ paddingBottom: theme.spacing(3), ...theme.mixins.gutters({}), }, - centered: { - maxWidth: 1600, - justifySelf: 'center', - }, - centerWrapper: { - display: 'flex', - justifyContent: 'center', - }, - centerContent: { - width: '100%', - maxWidth: 1600, - }, })); -type Props = { - centered?: boolean; - className?: string; -}; - -const Content: FC = ({ centered = false, className = '', children, ...props }) => { +const Content: FC<{}> = ({ children, ...props }) => { const classes = useStyles(); - - if (centered) { - return ( -
-
{children}
-
- ); - } - return ( -
+
{children}
); diff --git a/packages/core/src/layout/Header/Burst.js b/packages/core/src/layout/Header/Burst.js index f61da40956..558419cb00 100644 --- a/packages/core/src/layout/Header/Burst.js +++ b/packages/core/src/layout/Header/Burst.js @@ -17,11 +17,11 @@ const useStyles = makeStyles(theme => ({ height: '100%', 'background-repeat': 'no-repeat', 'background-size': 'cover', - opacity:0.1, - } + opacity: 0.1, + }, })); -const Burst = ({theme}) => { +const Burst = ({ theme }) => { const classes = useStyles(); return ( @@ -29,6 +29,6 @@ const Burst = ({theme}) => {
); -} +}; export default Burst; diff --git a/packages/core/src/layout/Page/Page.tsx b/packages/core/src/layout/Page/Page.tsx index b21517d81a..a2557bda25 100644 --- a/packages/core/src/layout/Page/Page.tsx +++ b/packages/core/src/layout/Page/Page.tsx @@ -1,20 +1,31 @@ -import React, { Component } from 'react'; -import { theme } from './PageThemeProvider'; +import React, { FC } from 'react'; +import { PageTheme, pageTheme } from './PageThemeProvider'; +import { makeStyles } from '@material-ui/core'; -type Theme = typeof theme['service']; +export const Theme = React.createContext(pageTheme.service); -export const Theme = React.createContext(theme.service); +const useStyles = makeStyles(() => ({ + root: { + display: 'grid', + gridTemplateAreas: + "'pageHeader pageHeader pageHeader' 'pageSubheader pageSubheader pageSubheader' 'pageNav pageContent pageSidebar'", + gridTemplateRows: 'auto auto 1fr', + gridTemplateColumns: 'auto 1fr auto', + minHeight: '100%', + }, +})); -class Page extends Component<{ theme: Theme }> { - static defaultProps = { - theme: theme.home, - }; +type Props = { + theme?: PageTheme; +}; - render() { - const { theme, children } = this.props; - - return {children}; - } -} +const Page: FC = ({ theme = pageTheme.home, children }) => { + const classes = useStyles(); + return ( + +
{children}
+ + ); +}; export default Page; diff --git a/packages/core/src/layout/Page/PageThemeProvider.ts b/packages/core/src/layout/Page/PageThemeProvider.ts index c8702d043d..4c792ef900 100644 --- a/packages/core/src/layout/Page/PageThemeProvider.ts +++ b/packages/core/src/layout/Page/PageThemeProvider.ts @@ -19,7 +19,13 @@ export const gradients = { sky: 'linear-gradient(135deg, #69B9FF 0%, #ACCEEC 100%)', }; -export const theme = { +export type PageTheme = { + activeNavLinkColor: string; + gradient: string; + burstShape: any; +}; + +export const pageTheme: Record = { service: { activeNavLinkColor: '#1D7F6E', gradient: gradients.tealGreen, diff --git a/packages/core/src/layout/Page/index.ts b/packages/core/src/layout/Page/index.ts index 34a8b93753..bcd50ed083 100644 --- a/packages/core/src/layout/Page/index.ts +++ b/packages/core/src/layout/Page/index.ts @@ -1,2 +1,2 @@ export { default } from './Page'; -export { gradients, theme } from './PageThemeProvider'; \ No newline at end of file +export { gradients, pageTheme, PageTheme } from './PageThemeProvider'; diff --git a/plugins/hello-world/package.json b/plugins/hello-world/package.json index 0fa2e21355..812a58c35a 100644 --- a/plugins/hello-world/package.json +++ b/plugins/hello-world/package.json @@ -1,7 +1,8 @@ { "name": "@spotify-backstage/plugin-hello-world", "version": "0.0.0", - "main": "dist/cjs", + "main": "dist/cjs/index.js", + "types": "dist/cjs/index.d.ts", "devDependencies": { "@spotify-backstage/cli": "^1.2.0", "@spotify-backstage/core": "1.0.0", diff --git a/plugins/home-page/package.json b/plugins/home-page/package.json index 2aa002c109..e185a9e1df 100644 --- a/plugins/home-page/package.json +++ b/plugins/home-page/package.json @@ -1,7 +1,8 @@ { "name": "@spotify-backstage/plugin-home-page", "version": "0.0.0", - "main": "dist/cjs", + "main": "dist/cjs/index.js", + "types": "dist/cjs/index.d.ts", "devDependencies": { "@spotify-backstage/cli": "^1.2.0", "@spotify-backstage/core": "1.0.0", diff --git a/plugins/home-page/src/components/HomePage/HomePage.tsx b/plugins/home-page/src/components/HomePage/HomePage.tsx index 9bd9759eca..625d3be097 100644 --- a/plugins/home-page/src/components/HomePage/HomePage.tsx +++ b/plugins/home-page/src/components/HomePage/HomePage.tsx @@ -1,5 +1,5 @@ import React, { FC } from 'react'; -import { Typography, makeStyles, Theme, Grid } from '@material-ui/core'; +import { Typography, Grid } from '@material-ui/core'; import HomePageTimer from '../HomepageTimer'; import { Content, @@ -8,7 +8,7 @@ import { SortableTable, Header, Page, - theme, + pageTheme, } from '@spotify-backstage/core'; import SquadTechHealth from './SquadTechHealth'; @@ -17,18 +17,7 @@ const STATIC_DATA = [ { id: 'backstage-microsite', kind: 'website' }, ]; -const useStyles = makeStyles(theme => ({ - mainContentArea: { - overflowX: 'hidden', - overflowY: 'auto', - }, - avatarButton: { - padding: theme.spacing(2), - }, -})); - const HomePage: FC<{}> = () => { - const classes = useStyles(); const columns = [ { id: 'entity', label: 'ID' }, { id: 'kind', label: 'Kind' }, @@ -49,28 +38,28 @@ const HomePage: FC<{}> = () => { const profile = { givenName: 'Suzy' }; return ( - -
-
- -
- - - - Things you own - - - - - - - + +
+ +
+ + + + + Things you own + + + + - -
+ + + + + ); };