diff --git a/packages/app/package.json b/packages/app/package.json index 6492ea38b1..e8519e17c4 100644 --- a/packages/app/package.json +++ b/packages/app/package.json @@ -8,6 +8,7 @@ "@spotify-backstage/cli": "^1.2.0", "@spotify-backstage/core": "1.0.0", "@spotify-backstage/plugin-home-page": "0.0.0", + "@spotify-backstage/plugin-welcome": "0.0.0", "@testing-library/jest-dom": "^4.2.4", "@testing-library/react": "^9.3.2", "@testing-library/user-event": "^7.1.2", diff --git a/packages/app/src/plugins.ts b/packages/app/src/plugins.ts index 3f286d67bc..994c986533 100644 --- a/packages/app/src/plugins.ts +++ b/packages/app/src/plugins.ts @@ -1 +1,2 @@ export { default as HomePagePlugin } from '@spotify-backstage/plugin-home-page'; +export { default as WelcomePlugin } from '@spotify-backstage/plugin-welcome'; diff --git a/plugins/home-page/src/plugin.ts b/plugins/home-page/src/plugin.ts index f0cd2c612c..04705aca4f 100644 --- a/plugins/home-page/src/plugin.ts +++ b/plugins/home-page/src/plugin.ts @@ -4,6 +4,6 @@ import HomePage from './components/HomePage'; export default createPlugin({ id: 'home-page', register({ router }) { - router.registerRoute('/', HomePage); + router.registerRoute('/home', HomePage); }, }); diff --git a/plugins/welcome/README.md b/plugins/welcome/README.md new file mode 100644 index 0000000000..95d8947824 --- /dev/null +++ b/plugins/welcome/README.md @@ -0,0 +1,6 @@ +# Title +Welcome to the welcome plugin! + +## Sub-section 1 + +## Sub-section 2 diff --git a/plugins/welcome/jest.config.js b/plugins/welcome/jest.config.js new file mode 100644 index 0000000000..6b28dacb3d --- /dev/null +++ b/plugins/welcome/jest.config.js @@ -0,0 +1,4 @@ +module.exports = { + ...require('@spotify/web-scripts/config/jest.config.js'), + setupFilesAfterEnv: ['../jest.setup.ts'], +}; diff --git a/plugins/welcome/jest.setup.ts b/plugins/welcome/jest.setup.ts new file mode 100644 index 0000000000..666127af39 --- /dev/null +++ b/plugins/welcome/jest.setup.ts @@ -0,0 +1 @@ +import '@testing-library/jest-dom/extend-expect'; diff --git a/plugins/welcome/package.json b/plugins/welcome/package.json new file mode 100644 index 0000000000..91a7666c6b --- /dev/null +++ b/plugins/welcome/package.json @@ -0,0 +1,19 @@ +{ + "name": "@spotify-backstage/plugin-welcome", + "version": "0.0.0", + "main": "dist/cjs/index.js", + "types": "dist/cjs/index.d.ts", + "license": "Apache-2.0", + "private": false, + "scripts": { + "build": "backstage-cli plugin:build", + "lint": "backstage-cli plugin:lint", + "test": "backstage-cli plugin:test" + }, + "devDependencies": { + "@spotify-backstage/cli": "^1.2.0" + }, + "dependencies": { + "@material-ui/lab": "4.0.0-alpha.45" + } +} diff --git a/plugins/welcome/src/components/Timer/Timer.tsx b/plugins/welcome/src/components/Timer/Timer.tsx new file mode 100644 index 0000000000..cfe70975aa --- /dev/null +++ b/plugins/welcome/src/components/Timer/Timer.tsx @@ -0,0 +1,58 @@ +import React, { FC } from 'react'; +import { HeaderLabel } from '@spotify-backstage/core'; + +const timeFormat = { hour: '2-digit', minute: '2-digit' }; +const utcOptions = { timeZone: 'UTC', ...timeFormat }; +const nycOptions = { timeZone: 'America/New_York', ...timeFormat }; +const tyoOptions = { timeZone: 'Asia/Tokyo', ...timeFormat }; +const stoOptions = { timeZone: 'Europe/Stockholm', ...timeFormat }; + +const defaultTimes = { + timeNY: '', + timeUTC: '', + timeTYO: '', + timeSTO: '', +}; + +function getTimes() { + const d = new Date(); + const lang = window.navigator.language; + + // Using the browser native toLocaleTimeString instead of huge moment-tz + // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString + const timeNY = d.toLocaleTimeString(lang, nycOptions); + const timeUTC = d.toLocaleTimeString(lang, utcOptions); + const timeTYO = d.toLocaleTimeString(lang, tyoOptions); + const timeSTO = d.toLocaleTimeString(lang, stoOptions); + + return { timeNY, timeUTC, timeTYO, timeSTO }; +} + +const HomePageTimer: FC<{}> = () => { + const [{ timeNY, timeUTC, timeTYO, timeSTO }, setTimes] = React.useState( + defaultTimes, + ); + + React.useEffect(() => { + setTimes(getTimes()); + + const intervalId = setInterval(() => { + setTimes(getTimes()); + }, 1000); + + return () => { + clearInterval(intervalId); + }; + }, []); + + return ( + <> + + + + + + ); +}; + +export default HomePageTimer; diff --git a/plugins/welcome/src/components/Timer/index.ts b/plugins/welcome/src/components/Timer/index.ts new file mode 100644 index 0000000000..f1fc55bfe9 --- /dev/null +++ b/plugins/welcome/src/components/Timer/index.ts @@ -0,0 +1 @@ +export { default } from './Timer'; diff --git a/plugins/welcome/src/components/WelcomePage/WelcomePage.test.tsx b/plugins/welcome/src/components/WelcomePage/WelcomePage.test.tsx new file mode 100644 index 0000000000..32cad9eea8 --- /dev/null +++ b/plugins/welcome/src/components/WelcomePage/WelcomePage.test.tsx @@ -0,0 +1,16 @@ +import React from 'react'; +import { render } from '@testing-library/react'; +import WelcomePage from './WelcomePage'; +import { ThemeProvider } from '@material-ui/core'; +import { BackstageTheme } from '@spotify-backstage/core'; + +describe('WelcomePage', () => { + it('should render', () => { + const rendered = render( + + + , + ); + expect(rendered.baseElement).toBeInTheDocument(); + }); +}); diff --git a/plugins/welcome/src/components/WelcomePage/WelcomePage.tsx b/plugins/welcome/src/components/WelcomePage/WelcomePage.tsx new file mode 100644 index 0000000000..5b1646d1a3 --- /dev/null +++ b/plugins/welcome/src/components/WelcomePage/WelcomePage.tsx @@ -0,0 +1,93 @@ +import React, { FC } from 'react'; +import Link from '@material-ui/core/Link'; +import { Link as RouterLink } from 'react-router-dom'; +import { Typography, Grid } from '@material-ui/core'; +import Timer from '../Timer'; +import { + Content, + InfoCard, + Header, + Page, + pageTheme, + ContentHeader, + SupportButton, +} from '@spotify-backstage/core'; +import List from '@material-ui/core/List'; +import ListItem from '@material-ui/core/ListItem'; + +const WelcomePage: FC<{}> = () => { + const profile = { givenName: '' }; + + return ( + +
+ +
+ + + + + + + + + You now have a running instance of Backstage 🎉! Let's make sure + you get the most out of this platform by walking you through the + basics. + + + The Setup + + + Backstage is put together from three base concepts: the core, + the app and the plugins. + +
    +
  • The core is responsible for base functionality.
    • +
  • The app provides the base UI and connects the plugins.
    • +
  • + The plugins make Backstage useful for the end users with + specific views and functionality. +
    • +
+ + Try It Out + + + We suggest you either check out the documentation for{' '} + + creating a plugin + {' '} + or have a look in the code for the{' '} + + Home Page + {' '} + in the directory "plugins/home-page/src". + + + + + + Quick Links + + + backstage.io + + + + Create a plugin + + + + + + + + + ); +}; + +export default WelcomePage; diff --git a/plugins/welcome/src/components/WelcomePage/index.ts b/plugins/welcome/src/components/WelcomePage/index.ts new file mode 100644 index 0000000000..b031301e7e --- /dev/null +++ b/plugins/welcome/src/components/WelcomePage/index.ts @@ -0,0 +1 @@ +export { default } from './WelcomePage'; diff --git a/plugins/welcome/src/index.ts b/plugins/welcome/src/index.ts new file mode 100644 index 0000000000..b68aea57f9 --- /dev/null +++ b/plugins/welcome/src/index.ts @@ -0,0 +1 @@ +export { default } from './plugin'; diff --git a/plugins/welcome/src/plugin.test.ts b/plugins/welcome/src/plugin.test.ts new file mode 100644 index 0000000000..f61dee5690 --- /dev/null +++ b/plugins/welcome/src/plugin.test.ts @@ -0,0 +1,7 @@ +import plugin from './plugin'; + +describe('welcome', () => { + it('should export plugin', () => { + expect(plugin).toBeDefined(); + }); +}); diff --git a/plugins/welcome/src/plugin.ts b/plugins/welcome/src/plugin.ts new file mode 100644 index 0000000000..1dcf4562a4 --- /dev/null +++ b/plugins/welcome/src/plugin.ts @@ -0,0 +1,9 @@ +import { createPlugin } from '@spotify-backstage/core'; +import WelcomePage from './components/WelcomePage'; + +export default createPlugin({ + id: 'welcome', + register({ router }) { + router.registerRoute('/', WelcomePage); + }, +}); diff --git a/plugins/welcome/tsconfig.json b/plugins/welcome/tsconfig.json new file mode 100644 index 0000000000..596e2cf729 --- /dev/null +++ b/plugins/welcome/tsconfig.json @@ -0,0 +1,4 @@ +{ + "extends": "../../tsconfig.json", + "include": ["src"] +}