From 805862924c2f8907e201c8b8a9c2d168f0252c57 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fredrik=20Adel=C3=B6w?= Date: Wed, 4 Mar 2020 15:28:11 +0100 Subject: [PATCH] Add a basis for system icons --- .../packages/core/src/api/app/AppBuilder.tsx | 22 ++++++++++++++++-- frontend/packages/core/src/api/app/types.ts | 2 ++ .../core/src/api/entity/EntityKind.ts | 2 +- .../src/api/entityView/EntityPageBuilder.tsx | 2 +- .../packages/core/src/api/entityView/types.ts | 2 +- frontend/packages/core/src/api/index.ts | 1 - .../packages/core/src/api/plugin/Plugin.tsx | 2 +- .../packages/core/src/api/plugin/types.ts | 2 +- frontend/packages/core/src/api/types.ts | 5 ---- frontend/packages/core/src/icons/icons.tsx | 23 +++++++++++++++++++ frontend/packages/core/src/icons/index.ts | 2 ++ frontend/packages/core/src/icons/types.ts | 6 +++++ 12 files changed, 58 insertions(+), 13 deletions(-) delete mode 100644 frontend/packages/core/src/api/types.ts create mode 100644 frontend/packages/core/src/icons/icons.tsx create mode 100644 frontend/packages/core/src/icons/index.ts create mode 100644 frontend/packages/core/src/icons/types.ts diff --git a/frontend/packages/core/src/api/app/AppBuilder.tsx b/frontend/packages/core/src/api/app/AppBuilder.tsx index 5605dd4d40..2ba0ca543c 100644 --- a/frontend/packages/core/src/api/app/AppBuilder.tsx +++ b/frontend/packages/core/src/api/app/AppBuilder.tsx @@ -5,9 +5,18 @@ import { App, AppComponentBuilder } from './types'; import EntityKind, { EntityConfig } from '../entity/EntityKind'; import { EntityContextProvider } from '../entityView/EntityContext'; import BackstagePlugin from '../plugin/Plugin'; +import { + IconComponent, + SystemIcons, + SystemIconKey, + defaultSystemIcons, +} from '../../icons'; class AppImpl implements App { - constructor(private readonly entities: Map) {} + constructor( + private readonly entities: Map, + private readonly systemIcons: SystemIcons, + ) {} getEntityConfig(kind: string): EntityConfig { const entity = this.entities.get(kind); @@ -16,6 +25,10 @@ class AppImpl implements App { } return entity.config; } + + getSystemIcon(key: SystemIconKey): IconComponent { + return this.systemIcons[key]; + } } function builtComponent( @@ -30,6 +43,7 @@ function builtComponent( export default class AppBuilder { private readonly entities = new Map(); + private systemIcons = { ...defaultSystemIcons }; private readonly plugins = new Set(); registerEntityKind(...entity: EntityKind[]) { @@ -42,6 +56,10 @@ export default class AppBuilder { } } + registerIcons(icons: Partial) { + this.systemIcons = { ...this.systemIcons, ...icons }; + } + registerPlugin(...plugin: BackstagePlugin[]) { for (const p of plugin) { if (this.plugins.has(p)) { @@ -52,7 +70,7 @@ export default class AppBuilder { } build(): ComponentType<{}> { - const app = new AppImpl(this.entities); + const app = new AppImpl(this.entities, this.systemIcons); const entityRoutes = new Array(); diff --git a/frontend/packages/core/src/api/app/types.ts b/frontend/packages/core/src/api/app/types.ts index 189ce208e1..b99553dcf3 100644 --- a/frontend/packages/core/src/api/app/types.ts +++ b/frontend/packages/core/src/api/app/types.ts @@ -1,8 +1,10 @@ import { ComponentType } from 'react'; import { EntityConfig } from '../entity/EntityKind'; +import { IconComponent, SystemIconKey } from '../../icons'; export type App = { getEntityConfig(kind: string): EntityConfig; + getSystemIcon(key: SystemIconKey): IconComponent; }; export class AppComponentBuilder { diff --git a/frontend/packages/core/src/api/entity/EntityKind.ts b/frontend/packages/core/src/api/entity/EntityKind.ts index b10a16c991..85f749975b 100644 --- a/frontend/packages/core/src/api/entity/EntityKind.ts +++ b/frontend/packages/core/src/api/entity/EntityKind.ts @@ -1,6 +1,6 @@ import { ComponentType } from 'react'; import { AppComponentBuilder } from '../app/types'; -import { IconComponent } from '../types'; +import { IconComponent } from '../../icons'; export type EntityConfig = { kind: string; diff --git a/frontend/packages/core/src/api/entityView/EntityPageBuilder.tsx b/frontend/packages/core/src/api/entityView/EntityPageBuilder.tsx index fdbdef01fb..0e1fdff16b 100644 --- a/frontend/packages/core/src/api/entityView/EntityPageBuilder.tsx +++ b/frontend/packages/core/src/api/entityView/EntityPageBuilder.tsx @@ -3,7 +3,7 @@ import DefaultEntityPage from '../../components/DefaultEntityPage'; import { App, AppComponentBuilder } from '../app/types'; import BackstagePlugin from '../plugin/Plugin'; import { EntityPageNavItem, EntityPageView } from './types'; -import { IconComponent } from '../types'; +import { IconComponent } from '../../icons'; // type AppComponents = { // EntityPage: ComponentType; diff --git a/frontend/packages/core/src/api/entityView/types.ts b/frontend/packages/core/src/api/entityView/types.ts index 8708057b8a..f11f1aef5c 100644 --- a/frontend/packages/core/src/api/entityView/types.ts +++ b/frontend/packages/core/src/api/entityView/types.ts @@ -1,5 +1,5 @@ import { ComponentType } from 'react'; -import { IconComponent } from '../types'; +import { IconComponent } from '../../icons'; export type EntityPageNavItem = { icon: IconComponent; diff --git a/frontend/packages/core/src/api/index.ts b/frontend/packages/core/src/api/index.ts index 7852cf8f75..03bd5c07dc 100644 --- a/frontend/packages/core/src/api/index.ts +++ b/frontend/packages/core/src/api/index.ts @@ -1,4 +1,3 @@ -export * from './types'; export * from './api'; export { useApp } from './app/AppContext'; export { diff --git a/frontend/packages/core/src/api/plugin/Plugin.tsx b/frontend/packages/core/src/api/plugin/Plugin.tsx index 624a9042e6..f54dc63bbb 100644 --- a/frontend/packages/core/src/api/plugin/Plugin.tsx +++ b/frontend/packages/core/src/api/plugin/Plugin.tsx @@ -1,6 +1,6 @@ import { ComponentType } from 'react'; import { PluginOutput, RoutePath, RouteOptions } from './types'; -import { IconComponent } from '../types'; +import { IconComponent } from '../../icons'; import { Widget } from '../widgetView/types'; export type PluginConfig = { diff --git a/frontend/packages/core/src/api/plugin/types.ts b/frontend/packages/core/src/api/plugin/types.ts index 9b0eb73639..52ae23959f 100644 --- a/frontend/packages/core/src/api/plugin/types.ts +++ b/frontend/packages/core/src/api/plugin/types.ts @@ -1,5 +1,5 @@ import { ComponentType } from 'react'; -import { IconComponent } from '../types'; +import { IconComponent } from '../../icons'; import { Widget } from '../widgetView/types'; export type RouteOptions = { diff --git a/frontend/packages/core/src/api/types.ts b/frontend/packages/core/src/api/types.ts deleted file mode 100644 index 730d237f38..0000000000 --- a/frontend/packages/core/src/api/types.ts +++ /dev/null @@ -1,5 +0,0 @@ -import { ComponentType } from 'react'; - -export type IconComponent = ComponentType<{ - fontSize?: 'inherit' | 'default' | 'small' | 'large'; -}>; diff --git a/frontend/packages/core/src/icons/icons.tsx b/frontend/packages/core/src/icons/icons.tsx new file mode 100644 index 0000000000..9226b8217c --- /dev/null +++ b/frontend/packages/core/src/icons/icons.tsx @@ -0,0 +1,23 @@ +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'; +import { IconComponent, SystemIconKey, SystemIcons } from './types'; + +export const defaultSystemIcons: SystemIcons = { + user: PersonIcon, + group: PeopleIcon, +}; + +const overridableSystemIcon = (key: SystemIconKey): IconComponent => { + const Component: FC = props => { + const app = useApp(); + const Icon = app.getSystemIcon(key); + return ; + }; + return Component; +}; + +export const UserIcon = overridableSystemIcon('user'); +export const GroupIcon = overridableSystemIcon('group'); diff --git a/frontend/packages/core/src/icons/index.ts b/frontend/packages/core/src/icons/index.ts new file mode 100644 index 0000000000..f7bf15249b --- /dev/null +++ b/frontend/packages/core/src/icons/index.ts @@ -0,0 +1,2 @@ +export * from './icons'; +export * from './types'; diff --git a/frontend/packages/core/src/icons/types.ts b/frontend/packages/core/src/icons/types.ts new file mode 100644 index 0000000000..2a8b39a285 --- /dev/null +++ b/frontend/packages/core/src/icons/types.ts @@ -0,0 +1,6 @@ +import { ComponentType } from 'react'; +import { SvgIconProps } from '@material-ui/core'; + +export type IconComponent = ComponentType; +export type SystemIconKey = 'user' | 'group'; +export type SystemIcons = { [key in SystemIconKey]: IconComponent };