diff --git a/packages/app/package.json b/packages/app/package.json index abdef3f..07bee5a 100644 --- a/packages/app/package.json +++ b/packages/app/package.json @@ -27,6 +27,7 @@ "@backstage/plugin-catalog-graph": "^0.4.5", "@backstage/plugin-catalog-import": "^0.11.0", "@backstage/plugin-catalog-react": "^1.12.0", + "@backstage/plugin-home": "^0.7.4", "@backstage/plugin-org": "^0.6.25", "@backstage/plugin-permission-react": "^0.4.22", "@backstage/plugin-scaffolder": "^1.20.0", diff --git a/packages/app/src/App.tsx b/packages/app/src/App.tsx index 42a87e1..d5fae5e 100644 --- a/packages/app/src/App.tsx +++ b/packages/app/src/App.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Navigate, Route } from 'react-router-dom'; +import { Route } from 'react-router-dom'; import { apiDocsPlugin, ApiExplorerPage } from '@backstage/plugin-api-docs'; import { CatalogEntityPage, @@ -37,7 +37,9 @@ import { AppRouter, FlatRoutes } from '@backstage/core-app-api'; import { CatalogGraphPage } from '@backstage/plugin-catalog-graph'; import { RequirePermission } from '@backstage/plugin-permission-react'; import { catalogEntityCreatePermission } from '@backstage/plugin-catalog-common/alpha'; -import { themes, UnifiedThemeProvider } from '@backstage/theme'; +import { UnifiedThemeProvider } from '@backstage/theme'; +import { HomePage } from './components/home/HomePage'; +import { HelloWorld } from './theme/HelloWorld'; const app = createApp({ apis, @@ -63,12 +65,12 @@ const app = createApp({ }, themes: [ { - id: 'my-theme', - title: 'My Custom Theme', + id: 'default', + title: 'Default', variant: 'light', icon: , Provider: ({ children }) => ( - + ), }, ], @@ -76,7 +78,7 @@ const app = createApp({ const routes = ( - } /> + } /> } /> { return ( - - + + + + + + + + + + + + + + ); }; diff --git a/packages/app/src/components/Root/LogoIcon.tsx b/packages/app/src/components/Root/LogoIcon.tsx index 951da94..904f8fd 100644 --- a/packages/app/src/components/Root/LogoIcon.tsx +++ b/packages/app/src/components/Root/LogoIcon.tsx @@ -6,14 +6,28 @@ const Svg = styled('svg')({ height: 28, }); -const Path = styled('path')({ - fill: '#7df3e1', -}); - const LogoIcon = () => { return ( - - + + + + + ); }; diff --git a/packages/app/src/components/Root/Root.tsx b/packages/app/src/components/Root/Root.tsx index 824fce9..6f26920 100644 --- a/packages/app/src/components/Root/Root.tsx +++ b/packages/app/src/components/Root/Root.tsx @@ -1,9 +1,6 @@ import React, { PropsWithChildren } from 'react'; import { styled } from '@mui/material/styles'; import Home from '@mui/icons-material/Home'; -import Extension from '@mui/icons-material/Extension'; -import Map from '@mui/icons-material/MyLocation'; -import LibraryBooks from '@mui/icons-material/LibraryBooks'; import CreateComponent from '@mui/icons-material/AddCircleOutline'; import LogoFull from './LogoFull'; import LogoIcon from './LogoIcon'; @@ -19,13 +16,15 @@ import { SidebarGroup, SidebarItem, SidebarPage, - SidebarScrollWrapper, SidebarSpace, useSidebarOpenState, Link, } from '@backstage/core-components'; -import Menu from '@mui/icons-material/Menu'; -import Search from '@mui/icons-material/Search'; +import MenuIcon from '@mui/icons-material/Menu'; +import SearchIcon from '@mui/icons-material/Search'; +import FortRoundedIcon from '@mui/icons-material/FortRounded'; +import ExtensionRoundedIcon from '@mui/icons-material/ExtensionRounded'; +import MenuBookRoundedIcon from '@mui/icons-material/MenuBookRounded'; import { IconComponent } from '@backstage/core-plugin-api'; const SidebarLogoRoot = styled('div')(() => ({ @@ -39,7 +38,7 @@ const SidebarLogoRoot = styled('div')(() => ({ const SidebarLogoLink = styled(Link)(() => ({ width: sidebarConfig.drawerWidthClosed, - marginLeft: 24, + paddingLeft: '24px', })); const SidebarLogo = () => { @@ -58,20 +57,25 @@ export const Root = ({ children }: PropsWithChildren<{}>) => ( - } to="/search"> + } to="/search"> - }> + }> {/* Global nav, not org-specific */} - + + @@ -80,15 +84,6 @@ export const Root = ({ children }: PropsWithChildren<{}>) => ( to="create" text="Create..." /> - {/* End global nav */} - - - - diff --git a/packages/app/src/components/home/HomePage.tsx b/packages/app/src/components/home/HomePage.tsx new file mode 100644 index 0000000..4bf3c89 --- /dev/null +++ b/packages/app/src/components/home/HomePage.tsx @@ -0,0 +1,6 @@ +import React from 'react'; + +export const HomePage = () => ( + /* We will shortly compose a pretty homepage here. */ +

Welcome to Backstage!

+); diff --git a/packages/app/src/theme/HelloWorld.ts b/packages/app/src/theme/HelloWorld.ts new file mode 100644 index 0000000..cbd3e39 --- /dev/null +++ b/packages/app/src/theme/HelloWorld.ts @@ -0,0 +1,70 @@ +import { + colorVariants, + createBaseThemeOptions, + createUnifiedTheme, + genPageTheme, + palettes, + shapes, +} from '@backstage/theme'; + +export const HelloWorld = createUnifiedTheme({ + ...createBaseThemeOptions({ + palette: { + ...palettes.light, + primary: { + main: '#FFA217', + }, + secondary: { + main: '#F9B249', + }, + error: { + main: '#da1313', + }, + success: { + main: '#4AB749', + }, + navigation: { + background: '#171717', + indicator: '#F9B249', + color: '#d5d6db', + selectedColor: '#ffffff', + }, + background: { + default: '#f7f3f1', + }, + }, + }), + defaultPageTheme: 'home', + components: { + MuiTypography: { + styleOverrides: { + root: { + wordSpacing: '0.02rem', + letterSpacing: '0.02rem', + }, + }, + }, + }, + pageTheme: { + home: genPageTheme({ colors: ['#FFA217', '#F9B249'], shape: shapes.wave }), + documentation: genPageTheme({ + colors: colorVariants.toastyOrange, + shape: shapes.wave2, + }), + tool: genPageTheme({ colors: colorVariants.rubyRed, shape: shapes.round }), + service: genPageTheme({ + colors: colorVariants.veryBlue, + shape: shapes.wave, + }), + website: genPageTheme({ + colors: colorVariants.veryBlue, + shape: shapes.wave, + }), + library: genPageTheme({ + colors: colorVariants.purpleSky, + shape: shapes.wave, + }), + other: genPageTheme({ colors: colorVariants.rubyRed, shape: shapes.wave }), + app: genPageTheme({ colors: colorVariants.veryBlue, shape: shapes.wave }), + }, +}); diff --git a/yarn.lock b/yarn.lock index b3d02e1..6248d11 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3221,6 +3221,49 @@ dependencies: "@backstage/backend-plugin-api" "^0.6.18" +"@backstage/plugin-home-react@^0.1.13": + version "0.1.13" + resolved "https://registry.yarnpkg.com/@backstage/plugin-home-react/-/plugin-home-react-0.1.13.tgz#4a071bf5017ff4b4c00be8426f69af19048eb415" + integrity sha512-v9oTI8KU7xHU+9JFru8VADyGjsMMueUFzOsQ4kqaa5me7M9545ZkBqg3xtN6IFGocPuyZhBZsM8+8PWuZ7v7Og== + dependencies: + "@backstage/core-components" "^0.14.7" + "@backstage/core-plugin-api" "^1.9.2" + "@material-ui/core" "^4.12.2" + "@material-ui/icons" "^4.9.1" + "@rjsf/utils" "5.18.2" + "@types/react" "^16.13.1 || ^17.0.0" + +"@backstage/plugin-home@^0.7.4": + version "0.7.4" + resolved "https://registry.yarnpkg.com/@backstage/plugin-home/-/plugin-home-0.7.4.tgz#6e7526d4996f8cac2157bec189681f3b0c0cfff1" + integrity sha512-53wpMssLV2LWqW1zsB9HCx5pHi6R+efSflQCL5QU7QfVGebO5cmMTqFg6L6It9MFC5FWfJ2Q9NUhVwtlgyZAlw== + dependencies: + "@backstage/catalog-client" "^1.6.5" + "@backstage/catalog-model" "^1.5.0" + "@backstage/config" "^1.2.0" + "@backstage/core-app-api" "^1.12.5" + "@backstage/core-compat-api" "^0.2.5" + "@backstage/core-components" "^0.14.7" + "@backstage/core-plugin-api" "^1.9.2" + "@backstage/frontend-plugin-api" "^0.6.5" + "@backstage/plugin-catalog-react" "^1.12.0" + "@backstage/plugin-home-react" "^0.1.13" + "@backstage/theme" "^0.5.4" + "@material-ui/core" "^4.12.2" + "@material-ui/icons" "^4.9.1" + "@material-ui/lab" "4.0.0-alpha.61" + "@rjsf/core" "5.18.2" + "@rjsf/material-ui" "5.18.2" + "@rjsf/utils" "5.18.2" + "@rjsf/validator-ajv8" "5.18.2" + "@types/react" "^16.13.1 || ^17.0.0 || ^18.0.0" + lodash "^4.17.21" + luxon "^3.4.3" + react-grid-layout "1.3.4" + react-resizable "^3.0.4" + react-use "^17.2.4" + zod "^3.22.4" + "@backstage/plugin-org@^0.6.25": version "0.6.25" resolved "https://registry.yarnpkg.com/@backstage/plugin-org/-/plugin-org-0.6.25.tgz#148e4a9190454db4372ca5cbd988271e557d958e" @@ -9079,7 +9122,7 @@ resolved "https://registry.yarnpkg.com/@types/range-parser/-/range-parser-1.2.7.tgz#50ae4353eaaddc04044279812f52c8c65857dbcb" integrity sha512-hKormJbkJqzQGhziax5PItDUTMAM9uE2XXQmM37dyd4hVM+5aVl7oVxMVUiVQn2oCQFN/LKCZdvSM0pFRqbSmQ== -"@types/react-dom@*", "@types/react-dom@^18", "@types/react-dom@^18.0.0": +"@types/react-dom@*", "@types/react-dom@^18.0.0": version "18.3.0" resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.3.0.tgz#0cbc818755d87066ab6ca74fbedb2547d74a82b0" integrity sha512-EhwApuTmMBmXuFOikhQLIBUn6uFg81SwLMOAUgodJF14SOBOCMdU04gDoYi0WOJJHD144TL32z4yDqCW3dnkQg== @@ -9110,7 +9153,7 @@ dependencies: "@types/react" "*" -"@types/react@*", "@types/react@^16.13.1 || ^17.0.0", "@types/react@^16.13.1 || ^17.0.0 || ^18.0.0", "@types/react@^18": +"@types/react@*", "@types/react@^16.13.1 || ^17.0.0 || ^18.0.0": version "18.3.3" resolved "https://registry.yarnpkg.com/@types/react/-/react-18.3.3.tgz#9679020895318b0915d7a3ab004d92d33375c45f" integrity sha512-hti/R0pS0q1/xx+TsI73XIqk26eBsISZ2R0wUijXIngRK9R/e7Xw/cXVxQK7R5JjW+SV4zGcn5hXjudkN/pLIw== @@ -9118,6 +9161,15 @@ "@types/prop-types" "*" csstype "^3.0.2" +"@types/react@^16.13.1 || ^17.0.0": + version "17.0.80" + resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.80.tgz#a5dfc351d6a41257eb592d73d3a85d3b7dbcbb41" + integrity sha512-LrgHIu2lEtIo8M7d1FcI3BdwXWoRQwMoXOZ7+dPTW0lYREjmlHl3P0U1VD0i/9tppOuv8/sam7sOjx34TxSFbA== + dependencies: + "@types/prop-types" "*" + "@types/scheduler" "^0.16" + csstype "^3.0.2" + "@types/request@^2.47.1", "@types/request@^2.48.8": version "2.48.12" resolved "https://registry.yarnpkg.com/@types/request/-/request-2.48.12.tgz#0f590f615a10f87da18e9790ac94c29ec4c5ef30" @@ -9150,6 +9202,11 @@ resolved "https://registry.yarnpkg.com/@types/sarif/-/sarif-2.1.7.tgz#dab4d16ba7568e9846c454a8764f33c5d98e5524" integrity sha512-kRz0VEkJqWLf1LLVN4pT1cg1Z9wAuvI6L97V3m2f5B76Tg8d413ddvLBPTEHAZJlnn4XSvu0FkZtViCQGVyrXQ== +"@types/scheduler@^0.16": + version "0.16.8" + resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.8.tgz#ce5ace04cfeabe7ef87c0091e50752e36707deff" + integrity sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A== + "@types/semver@^7.3.12", "@types/semver@^7.5.0": version "7.5.8" resolved "https://registry.yarnpkg.com/@types/semver/-/semver-7.5.8.tgz#8268a8c57a3e4abd25c165ecd36237db7948a55e" @@ -11256,7 +11313,7 @@ clone@^1.0.2: resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e" integrity sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg== -clsx@^1.0.2, clsx@^1.0.4, clsx@^1.2.1: +clsx@^1.0.2, clsx@^1.0.4, clsx@^1.1.1, clsx@^1.2.1: version "1.2.1" resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.2.1.tgz#0ddc4a20a549b59c93a4116bb26f5294ca17dc12" integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg== @@ -17207,7 +17264,7 @@ lodash.isboolean@^3.0.3: resolved "https://registry.yarnpkg.com/lodash.isboolean/-/lodash.isboolean-3.0.3.tgz#6c2e171db2a257cd96802fd43b01b20d5f5870f6" integrity sha512-Bz5mupy2SVbPHURB98VAcw+aHh4vRV5IPNhILUCsOzRmsTmSQ17jIuqopAentWoehktxGd9e/hbIXq980/1QJg== -lodash.isequal@^4.5.0: +lodash.isequal@^4.0.0, lodash.isequal@^4.5.0: version "4.5.0" resolved "https://registry.yarnpkg.com/lodash.isequal/-/lodash.isequal-4.5.0.tgz#415c4478f2bcc30120c22ce10ed3226f7d3e18e0" integrity sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ== @@ -17368,7 +17425,7 @@ lunr@^2.3.9: resolved "https://registry.yarnpkg.com/lunr/-/lunr-2.3.9.tgz#18b123142832337dd6e964df1a5a7707b25d35e1" integrity sha512-zTU3DaZaF3Rt9rhN3uBMGQD3dD2/vFQqnvZCDv4dl5iOzq2IZQqTxu90r4E5J+nP70J3ilqVCrbho2eWaeW8Ow== -luxon@^3.0.0, luxon@~3.4.0: +luxon@^3.0.0, luxon@^3.4.3, luxon@~3.4.0: version "3.4.4" resolved "https://registry.yarnpkg.com/luxon/-/luxon-3.4.4.tgz#cf20dc27dc532ba41a169c43fdcc0063601577af" integrity sha512-zobTr7akeGHnv7eBOXcRgMeCP6+uyYsczwmeRCauvpvaAltgNyTbLH/+VaEAPUeWBT+1GuNmz4wC/6jtQzbbVA== @@ -20298,7 +20355,7 @@ promzard@^1.0.0: dependencies: read "^3.0.1" -prop-types@^15.0.0, prop-types@^15.5.10, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1: +prop-types@15.x, prop-types@^15.0.0, prop-types@^15.5.10, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1: version "15.8.1" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5" integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg== @@ -20646,6 +20703,14 @@ react-double-scrollbar@0.0.15: resolved "https://registry.yarnpkg.com/react-double-scrollbar/-/react-double-scrollbar-0.0.15.tgz#e915ab8cb3b959877075f49436debfdb04288fe4" integrity sha512-dLz3/WBIpgFnzFY0Kb4aIYBMT2BWomHuW2DH6/9jXfS6/zxRRBUFQ04My4HIB7Ma7QoRBpcy8NtkPeFgcGBpgg== +react-draggable@^4.0.0, react-draggable@^4.0.3: + version "4.4.6" + resolved "https://registry.yarnpkg.com/react-draggable/-/react-draggable-4.4.6.tgz#63343ee945770881ca1256a5b6fa5c9f5983fe1e" + integrity sha512-LtY5Xw1zTPqHkVmtM3X8MUOxNDOUhv/khTgBgrUvwaS064bwVvxT+q5El0uUFNx5IEPKXuRejr7UqLwBIg5pdw== + dependencies: + clsx "^1.1.1" + prop-types "^15.8.1" + react-error-overlay@^6.0.11: version "6.0.11" resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.11.tgz#92835de5841c5cf08ba00ddd2d677b6d17ff9adb" @@ -20656,6 +20721,17 @@ react-fast-compare@^3.1.1: resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.2.tgz#929a97a532304ce9fee4bcae44234f1ce2c21d49" integrity sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ== +react-grid-layout@1.3.4: + version "1.3.4" + resolved "https://registry.yarnpkg.com/react-grid-layout/-/react-grid-layout-1.3.4.tgz#4fa819be24a1ba9268aa11b82d63afc4762a32ff" + integrity sha512-sB3rNhorW77HUdOjB4JkelZTdJGQKuXLl3gNg+BI8gJkTScspL1myfZzW/EM0dLEn+1eH+xW+wNqk0oIM9o7cw== + dependencies: + clsx "^1.1.1" + lodash.isequal "^4.0.0" + prop-types "^15.8.1" + react-draggable "^4.0.0" + react-resizable "^3.0.4" + react-helmet@6.1.0: version "6.1.0" resolved "https://registry.yarnpkg.com/react-helmet/-/react-helmet-6.1.0.tgz#a750d5165cb13cf213e44747502652e794468726" @@ -20773,6 +20849,14 @@ react-remove-scroll@2.5.5: use-callback-ref "^1.3.0" use-sidecar "^1.1.2" +react-resizable@^3.0.4: + version "3.0.5" + resolved "https://registry.yarnpkg.com/react-resizable/-/react-resizable-3.0.5.tgz#362721f2efbd094976f1780ae13f1ad7739786c1" + integrity sha512-vKpeHhI5OZvYn82kXOs1bC8aOXktGU5AmKAgaZS4F5JPburCtbmDPqE7Pzp+1kN4+Wb81LlF33VpGwWwtXem+w== + dependencies: + prop-types "15.x" + react-draggable "^4.0.3" + react-router-dom@^6.3.0: version "6.23.1" resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.23.1.tgz#30cbf266669693e9492aa4fc0dde2541ab02322f"