@celljs/shell 3.0.0

package/src/browser/annotation/index.ts

@@ -0,0 +1,2 @@
+export * from './top-area';
+export * from './left-area';

package/src/browser/annotation/left-area.ts

@@ -0,0 +1,9 @@
+import { ReactComponent } from '@celljs/react';
+import { LEFT_AREA } from '../area/area-protocol';
+
+export const LeftArea =
+    function (component?: any, rebind: boolean = true): (target: any) => any {
+        return (t: any) => {
+            ReactComponent(LEFT_AREA, component || t, rebind)(t);
+        };
+    };

package/src/browser/annotation/top-area.ts

@@ -0,0 +1,9 @@
+import { ReactComponent } from '@celljs/react';
+import { TOP_AREA } from '../area/area-protocol';
+
+export const TopArea =
+    function (component?: any, rebind: boolean = true): (target: any) => any {
+        return (t: any) => {
+            ReactComponent(TOP_AREA, component || t, rebind)(t);
+        };
+    };

package/src/browser/apps/app-service.ts

@@ -0,0 +1,40 @@
+import { AppService, Category, AppInfo } from '../../common';
+import { Component, Prioritizeable, Value } from '@celljs/core';
+
+@Component(AppService)
+export class AppServiceImpl implements AppService {
+
+    @Value('cell.shell.apps')
+    protected readonly apps: { [id: string]: AppInfo };
+
+    @Value('cell.shell.categories')
+    protected readonly categories: { [id: string]: Category };
+
+    async load(): Promise<Category[]> {
+        const categoryMap = new Map<string, Category>();
+        const parsedCategories = Object.keys(this.categories || {}).map(key => {
+            const category = { ...this.categories[key] };
+            category.id = key;
+            category.priority = 500;
+            category.apps = category.apps || [];
+            categoryMap.set(key, category);
+            return category;
+        });
+        const parsedApps = Object.keys(this.apps || {}).map(key => {
+            const app = { ...this.apps[key] };
+            app.id = key;
+            app.priority = 500;
+            return app;
+        });
+        const sortedCategories = Prioritizeable.prioritizeAllSync(parsedCategories).map(c => c.value);
+        const sortedApps = Prioritizeable.prioritizeAllSync(parsedApps).map(c => c.value);
+        for (const app of sortedApps) {
+            const category = categoryMap.get(app.categoryId);
+            if (category) {
+                category.apps.push(app);
+            }
+        }
+        return sortedCategories;
+    }
+
+}

package/src/browser/apps/apps.tsx

@@ -0,0 +1,67 @@
+import * as React from 'react';
+import { Grid, Box, Text, ResponsiveContext } from 'grommet';
+import { ContainerUtil } from '@celljs/core';
+import { AppService, Category, AppInfo } from '../../common';
+import { Icon } from '@celljs/grommet';
+import { useIntl } from 'react-intl';
+const { useState, useEffect, useContext } = React;
+
+export function Apps({ size }: { size?: string }) {
+    size = size || useContext(ResponsiveContext);
+    const [categories, setCategories] = useState<Category[]>([]);
+    useEffect(() => {
+        const loadApps = async () => {
+            const appService = ContainerUtil.get<AppService>(AppService);
+            const data = await appService.load();
+            setCategories(data);
+        };
+        loadApps();
+    }, []);
+
+    return (
+        <Box direction="column" pad="small" gap="small" alignContent="start"
+        >
+            {categories.map(c => (
+                <AppCategory key={c.id} size={size!} category={c}></AppCategory>
+            ))}
+        </Box>
+    );
+}
+
+export function AppCategory({ category, size }: { category: Category, size: string }) {
+    const intl = useIntl();
+    const apps = category.apps || [];
+    return (
+        <Box>
+            <Text weight="bold" textAlign={ size === 'small' ? 'center' : 'start' } size={size} margin={{ bottom: size }}>{ intl.formatMessage({ id: category.name}) }</Text>
+            <Box border={{ side: 'top', color: 'light-2' }}></Box>
+            <Grid
+                rows={size === 'small' ? 'xsmall' : 'small'}
+                columns={size === 'small' ? 'xsmall' : 'small'}
+            >
+                {apps.map(app => (
+                    <AppItem key={app.id} size={size} app={app}></AppItem>
+                ))}
+
+            </Grid>
+        </Box>
+    );
+}
+
+export function AppItem({ app, size }: { app: AppInfo, size: string }) {
+    const intl = useIntl();
+    const onClick = () => {
+        window.location.href = app.url;
+    };
+    return (
+        <Box
+            justify="center"
+            align="center"
+            hoverIndicator
+            onClick={onClick}
+        >
+            <Icon icon={app.icon} size={size === 'small' ? 'medium' : 'large'}/>
+            <Text size={size} margin={{ top: size }}>{intl.formatMessage({ id: app.name})}</Text>
+        </Box>
+    );
+}

package/src/browser/apps/index.ts

@@ -0,0 +1,2 @@
+export * from './app-service';
+export * from './apps';

package/src/browser/area/area-protocol.ts

@@ -0,0 +1,18 @@
+export const TOP_AREA = Symbol('TOP_AREA');
+export const LEFT_AREA = Symbol('LEFT_AREA');
+
+export enum AreaType {
+    TopArea = 'Top',
+    SecondaryTopArea = 'SecondaryTop',
+    TertiaryTopArea = 'TertiaryTop',
+    LeftArea = 'Left',
+    TopLeftArea = 'TopLeft',
+    TopRightArea = 'TopRight',
+    LeftHeaderArea = 'LeftHeader',
+    LeftFooterArea = 'LeftFooter',
+    LeftBodyArea = 'LeftBody',
+    NavArea = 'Nav',
+    SettingsArea = 'Settings',
+    AccountArea = 'Account',
+    BottomArea = 'Bottom'
+}

package/src/browser/area/index.ts

@@ -0,0 +1,3 @@
+export * from './top';
+export * from './left';
+export * from './area-protocol';

package/src/browser/area/left/index.ts

@@ -0,0 +1 @@
+export * from './left';

package/src/browser/area/left/left.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { Nav, Sidebar, BoxProps } from 'grommet';
+import { ConfigUtil } from '@celljs/core';
+import { AreaType } from '../area-protocol';
+import { Slot } from '@celljs/react';
+import { Widget } from '@celljs/widget';
+
+export function LeftArea(props: BoxProps) {
+    props = { ...(ConfigUtil.get('cell.shell.leftArea') || {}), ...props };
+
+    return (
+        <Sidebar animation="fadeIn" pad="medium" background="white" width="250px"
+            footer={<Slot area={AreaType.LeftFooterArea} />}
+            {...props}
+        >
+            <Slot area={AreaType.LeftHeaderArea} />
+            <Nav gap="none">
+                <Slot area={AreaType.NavArea} />
+                <Slot area={AreaType.LeftBodyArea} />
+            </Nav>
+        </Sidebar>
+    );
+}
+
+@Widget({ area: AreaType.LeftArea, component: LeftArea })
+export default class {}

package/src/browser/area/top/index.ts

@@ -0,0 +1 @@
+export * from './top';

package/src/browser/area/top/top.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { Box, Nav, BoxProps } from 'grommet';
+import { ConfigUtil } from '@celljs/core';
+import { AreaType } from '../area-protocol';
+import { Slot } from '@celljs/react';
+import { Widget } from '@celljs/widget';
+
+export function TopArea(props: BoxProps) {
+    props = { ...ConfigUtil.get('cell.shell.topArea'), ...props };
+
+    return (
+        <Nav direction="row" pad={{ vertical: 'small', horizontal: 'medium' }} elevation="xsmall" justify="between" {...props}>
+            <Box direction="row" gap="small">
+                <Slot area={AreaType.TopLeftArea} />
+            </Box>
+            <Box direction="row" gap="small">
+                <Slot area={AreaType.TopRightArea} />
+            </Box>
+        </Nav>
+    );
+}
+
+@Widget({ area: AreaType.TopArea, component: TopArea })
+export default class {}

package/src/browser/index.ts

@@ -0,0 +1,4 @@
+export * from './apps';
+export * from './area';
+export * from './tool';
+export * from './layout';

package/src/browser/layout/index.ts

@@ -0,0 +1 @@
+export * from './layout';

package/src/browser/layout/layout.tsx

@@ -0,0 +1,63 @@
+import { DefaultLayout, Slot } from '@celljs/react';
+import * as React from 'react';
+import { AreaType } from '../area';
+import styled from 'styled-components';
+import { Box } from 'grommet';
+
+const StyledWraper = styled.div`
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    overflow: hidden;
+    z-index: 2;
+`;
+
+const StyledSidebar = styled.div`
+    left: 0;
+    position: absolute;
+    top: 76px;
+    bottom: 0;
+    z-index: 1;
+`;
+
+const StyledMain = styled.div`
+    left: 250px;
+    position: absolute;
+    right: 0;
+    top: 70px;
+    bottom: 0;
+    overflow: auto;
+    z-index: 0;
+`;
+
+export function TopLeftLayout({ children }: React.PropsWithChildren<any>) {
+    return (
+        <StyledWraper>
+            <Slot area={AreaType.TopArea}/>
+            <StyledSidebar>
+                <Slot area={AreaType.LeftArea}/>
+            </StyledSidebar>
+            <StyledMain>
+                {children}
+                <Slot area={AreaType.BottomArea}/>
+            </StyledMain>
+      </StyledWraper>
+    );
+}
+
+export function MultiTopLayout({ children }: React.PropsWithChildren<any>) {
+    return (
+        <Box>
+            <Slot area={AreaType.TopArea}/>
+            <Slot area={AreaType.SecondaryTopArea}/>
+            <Slot area={AreaType.TertiaryTopArea}/>
+            {children}
+            <Slot area={AreaType.BottomArea}/>
+      </Box>
+    );
+}
+
+@DefaultLayout(TopLeftLayout)
+export default class {}

package/src/browser/module.ts

@@ -0,0 +1,5 @@
+
+import './index';
+import { autoBind } from '@celljs/core';
+
+export default autoBind();

package/src/browser/tool/account.tsx

@@ -0,0 +1,61 @@
+import * as React from 'react';
+import { Avatar, AvatarProps, Drop, Box } from 'grommet';
+import { ConfigUtil, ContainerUtil } from '@celljs/core';
+import { Widget } from '@celljs/widget';
+import { AreaType } from '../area';
+import styled from 'styled-components';
+import { Slot } from '@celljs/react';
+import { UserManager } from '@celljs/security/lib/browser';
+import { User } from '@celljs/security';
+import { NavItem, Icon } from '@celljs/grommet';
+
+const StyledAccount = styled.div`
+    width: 200px;
+    max-height: 450px;
+    padding-top: 12px;
+    overflow: auto;
+    right: 0;
+`;
+
+export function Account(props: AvatarProps) {
+    // eslint-disable-next-line no-null/no-null
+    const targetRef = React.useRef(null);
+    const loginUserManager = ContainerUtil.get<UserManager>(UserManager);
+    const [show, setShow] = React.useState(false);
+    const [user, setUser] = React.useState<User | undefined>(loginUserManager.userInfoSubject.value);
+    React.useEffect(() => {
+        const subscription = loginUserManager.userInfoSubject.subscribe(u => setUser(u));
+        return () => subscription.unsubscribe();
+    }, []);
+    const { icon, login, ...rest } = ConfigUtil.get('cell.shell.account');
+    props = { ...rest, ...props };
+    if (!user) {
+        const { label, ...loginRest } = login;
+        return (<NavItem label={label} size="medium" {...loginRest}/>);
+    }
+    return (
+        <Box ref={targetRef}>
+            <Avatar
+                hoverIndicator title={user.nickname} style={{ margin: '12px' }} size='small' onClick={() => setShow(true)} {...props} src={user.avatar || props.src}>
+                    {<Icon icon={user.avatar || icon}/>}
+            </Avatar>
+            {targetRef.current && show && (
+                <Drop
+                    target={targetRef.current!}
+                    style={{ margin: '20px 0' }}
+                    elevation="large"
+                    align={{ top: 'bottom', right: 'right'}}
+                    onEsc={() => setShow(false)}
+                    onClickOutside={() => setShow(false)}
+                >
+                    <StyledAccount>
+                        <Slot area={AreaType.AccountArea}/>
+                    </StyledAccount>
+                </Drop>
+            )}
+        </Box>
+    );
+}
+
+@Widget({ area: AreaType.TopRightArea, component: Account, priority: 100 })
+export default class {}

package/src/browser/tool/app-set.tsx

@@ -0,0 +1,47 @@
+import * as React from 'react';
+import { Button, ButtonProps, Drop } from 'grommet';
+import { ConfigUtil } from '@celljs/core';
+import { Icon } from '@celljs/grommet';
+import { Widget } from '@celljs/widget';
+import { AreaType } from '../area';
+import { Apps } from '../apps';
+import styled from 'styled-components';
+
+const { Fragment } = React;
+
+const StyledAppSet = styled.div`
+    width: 320px;
+    max-height: 450px;
+    padding-top: 12px;
+    overflow: auto;
+`;
+
+export function AppSet(props: ButtonProps) {
+    // eslint-disable-next-line no-null/no-null
+    const targetRef = React.useRef(null);
+    const [show, setShow] = React.useState(false);
+    const { icon, ...rest } = ConfigUtil.get('cell.shell.appSet');
+    props = { ...rest, ...props };
+    return (
+        <Fragment>
+            <Button ref={targetRef} hoverIndicator onClick={() => setShow(true)} {...props} icon={<Icon icon={icon}/>}/>
+            {targetRef.current && show && (
+                <Drop
+                    target={targetRef.current!}
+                    style={{ marginTop: '20px' }}
+                    elevation="large"
+                    align={{ top: 'bottom', right: 'right'}}
+                    onEsc={() => setShow(false)}
+                    onClickOutside={() => setShow(false)}
+                >
+                    <StyledAppSet>
+                        <Apps size="small"/>
+                    </StyledAppSet>
+                </Drop>
+            )}
+        </Fragment>
+    );
+}
+
+@Widget({ area: AreaType.TopRightArea, component: AppSet, priority: 200 })
+export default class {}

package/src/browser/tool/index.ts

@@ -0,0 +1,4 @@
+export * from './logo';
+export * from './settings';
+export * from './app-set';
+export * from './account';

package/src/browser/tool/logo.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { ConfigUtil } from '@celljs/core';
+import { Widget } from '@celljs/widget';
+import { AreaType } from '../area';
+import { NavItemProps, NavItem, Icon } from '@celljs/grommet';
+
+export function Logo(props: NavItemProps) {
+    const { label, icon, ...rest } = ConfigUtil.get('cell.shell.logo');
+    props = { ...rest, ...props };
+    return (<NavItem size="medium" gap="xsmall" label={label} icon={<Icon icon={icon}/>} hoverIndicator={false} activatable={false} {...props}/>);
+}
+
+@Widget({ area: AreaType.TopLeftArea, component: Logo, priority: 1000 })
+export default class {}

package/src/browser/tool/settings.tsx

@@ -0,0 +1,56 @@
+import * as React from 'react';
+import { Button, ButtonProps, Drop, ThemeType, Box } from 'grommet';
+import { ConfigUtil, ContainerUtil } from '@celljs/core';
+import { Icon, ThemeBox, LocaleMenu } from '@celljs/grommet';
+import { Widget, ThemeManager } from '@celljs/widget';
+import { AreaType } from '../area';
+import styled from 'styled-components';
+import { Slot } from '@celljs/react';
+
+const { Fragment } = React;
+
+const StyledSettings = styled.div`
+    width: 300px;
+    max-height: 450px;
+    padding-top: 12px;
+    overflow: auto;
+    right: 0;
+`;
+// @ts-ignore
+export function Settings(props: ButtonProps) {
+    // eslint-disable-next-line no-null/no-null
+    const targetRef = React.useRef(null);
+    const [show, setShow] = React.useState(false);
+    const { icon, ...rest } = ConfigUtil.get<any>('cell.shell.settings');
+    props = { ...rest, ...props };
+    React.useEffect(() => {
+        const themeManager = ContainerUtil.get<ThemeManager<ThemeType>>(ThemeManager);
+        const subscription = themeManager.currentSubject.subscribe(t => setShow(false));
+        return () => subscription.unsubscribe();
+    }, []);
+    // @ts-ignore
+    return (<Fragment>
+        <Button ref={targetRef} hoverIndicator onClick={() => setShow(true)} {...props} icon={<Icon icon={icon}/>}/>
+        {targetRef.current && show && (
+            <Drop
+                target={targetRef.current!}
+                style={{ marginTop: '20px' }}
+                elevation="large"
+                align={{ top: 'bottom', right: 'right'}}
+                onEsc={() => setShow(false)}
+                onClickOutside={() => setShow(false)}
+            >
+                <StyledSettings>
+                    <Box>
+                        <Slot area={AreaType.SettingsArea}/>
+                    </Box>
+                </StyledSettings>
+            </Drop>
+        )}
+    </Fragment>);
+}
+
+@Widget({ area: AreaType.SettingsArea, component: LocaleMenu, priority: 200 })
+@Widget({ area: AreaType.SettingsArea, component: ThemeBox, priority: 300 })
+@Widget({ area: AreaType.TopRightArea, component: Settings, priority: 300 })
+export default class {}

package/src/common/index.ts

@@ -0,0 +1 @@
+export * from './shell-protocol';

package/src/common/shell-protocol.ts

@@ -0,0 +1,21 @@
+export const AppService = Symbol('AppService');
+
+export interface AppInfo {
+    id: string;
+    name: string;
+    icon: string;
+    categoryId: string;
+    priority: number;
+    url: string;
+}
+
+export interface Category {
+    id: string;
+    name: string;
+    priority: number;
+    apps: AppInfo[];
+}
+
+export interface AppService {
+    load(): Promise<Category[]>;
+}

package/src/node/module.ts

@@ -0,0 +1,4 @@
+
+import { autoBind } from '@celljs/core';
+
+export default autoBind();

package/src/package.spec.ts

@@ -0,0 +1,4 @@
+describe('shell package', () => {
+
+    it('support code coverage statistics', () => {});
+});