@operato/shell 2.0.0-alpha.8 → 2.0.0-alpha.80

package/src/app/app.ts

@@ -23,7 +23,21 @@ export class ThingsApp extends connect(store)(LitElement) {
 
   static moduleInitialized: MODULES_STATE = MODULES_STATE.NOT_INITIALIZED
   static modules: Array<any> = []
-  static pages: { [path: string]: string } = {}
+
+  /* 
+    모든 모듈의 routes 리스트가 수집될 때까지, routeToPage(..) 를 hold 시키기 위해서 ThingsApp.pages를 Promise로 정의한다. 
+  */
+  static pagesResolver: (
+    value:
+      | {
+          [path: string]: string
+        }
+      | PromiseLike<{
+          [path: string]: string
+        }>
+  ) => void
+  static pages: Promise<{ [path: string]: string }>
+
   static callbacks: Array<any> = []
   static contextPath?: string
 
@@ -86,13 +100,13 @@ export class ThingsApp extends connect(store)(LitElement) {
     ).then(module => {
       var modules: {
         name: string
-        bootstrap: any
+        bootstrap: (m?: any /* self */) => void
       }[] = module.modules
 
       /* lifecycle - bootstrapping */
       modules.forEach(async (m, idx) => {
         try {
-          m.bootstrap && (await m.bootstrap())
+          m.bootstrap && (await m.bootstrap(m))
         } catch (e) {
           console.error(`[${idx} BOOTSTRAP ERROR -${m.name}]`, e)
         }
@@ -114,7 +128,13 @@ export class ThingsApp extends connect(store)(LitElement) {
         var { contextPath } = getPathInfo(pathname)
 
         /* 페이지를 나가기 전에 옮기지 않도록 개입할 기회를 준다 */
-        if (lastPathName && lastPathName != pathname && this.activePage && !(await this.activePage.canDeactivate())) {
+        if (
+          lastPathName &&
+          lastPathName != pathname &&
+          this.activePage &&
+          this.activePage.canDeactivate &&
+          !(await this.activePage.canDeactivate())
+        ) {
           history.back()
           return
         }
@@ -146,7 +166,7 @@ export class ThingsApp extends connect(store)(LitElement) {
     super.disconnectedCallback()
   }
 
-  routeToPage() {
+  async routeToPage() {
     const activePages = this.renderRoot.querySelectorAll('main > .page[active]')
     activePages.forEach(page => {
       page.removeAttribute('active')
@@ -156,7 +176,7 @@ export class ThingsApp extends connect(store)(LitElement) {
 
     if (!this.activePage) {
       /* 해당 route에 연결된 page가 없는 경우에 main 섹션에 해당 element를 추가해준다. */
-      const tagname = ThingsApp.pages[this.page!]
+      const tagname = (await ThingsApp.pages)[this.page!]
       if (tagname) {
         const el = document.createElement(tagname) as PageView
         el.setAttribute('class', 'page')
@@ -219,19 +239,32 @@ export class ThingsApp extends connect(store)(LitElement) {
     ThingsApp.callbacks = state.route.callbacks
   }
 
-  static registerPages() {
+  static async registerPages() {
+    ThingsApp.pages = new Promise<{ [path: string]: string }>(resolve => (ThingsApp.pagesResolver = resolve))
+
     var reversedModules = [...ThingsApp.modules].reverse()
-    ThingsApp.pages = {}
+    const pages: { [path: string]: string } = {}
 
     /* 모듈 참조 순서 역순으로 page를 추가한다. (for overidable) */
-    reversedModules.forEach(m => {
-      m.routes &&
-        m.routes.forEach((route: any) => {
-          if (!ThingsApp.pages[route.page]) {
-            ThingsApp.pages[route.page] = route.tagname
-          }
-        })
-    })
+    for (const m of reversedModules) {
+      if (!m.routes) {
+        continue
+      }
+
+      /* 
+        각 모듈의 routes가 모두 완성될 때까지 ThingsApp.pages 구성을 지연한다.
+        각 모듈의 routes를 동적으로도 구성할 수 있도록 하기 위해서이다.
+      */
+      const routes = await m.routes
+
+      routes.forEach((route: any) => {
+        if (!pages[route.page]) {
+          pages[route.page] = route.tagname
+        }
+      })
+    }
+
+    ThingsApp.pagesResolver(pages)
   }
 
   setBase() {

package/src/app/pages/page-404.ts

@@ -17,8 +17,8 @@ export class Page404 extends PageView {
       text-align: center;
       color: var(--secondary-color);
     }
-    mwc-icon {
-      --mdc-icon-size: 120px;
+    md-icon {
+      --md-icon-size: 120px;
       color: var(--status-danger-color);
       text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
     }
@@ -28,9 +28,9 @@ export class Page404 extends PageView {
       text-transform: capitalize;
     }
     @media only screen and (max-width: 460px) {
-      mwc-icon {
+      md-icon {
         padding-top: 25%;
-        --mdc-icon-size: 90px;
+        --md-icon-size: 90px;
       }
       h2 {
         font-size: 2em;
@@ -47,7 +47,7 @@ export class Page404 extends PageView {
   render() {
     return html`
       <section>
-        <mwc-icon>error_outline</mwc-icon>
+        <md-icon>error_outline</md-icon>
         <h2>page not found!</h2>
         The page you requested cannot be found.
       </section>

package/src/custom-alert.ts

@@ -0,0 +1,43 @@
+import { OxPrompt } from '@operato/popup'
+
+const TYPES_ICON: { [type: string]: string } = {
+  success: 'verified',
+  error: 'error',
+  warning: 'warning',
+  info: 'info',
+  question: 'question_mark'
+}
+
+export async function CustomAlert({
+  type,
+  icon,
+  title,
+  text,
+  confirmButton,
+  cancelButton,
+  callback
+}: {
+  type?: 'info' | 'success' | 'error' | 'warning' | 'question'
+  icon?: string
+  title?: string
+  text?: string
+  confirmButton?: { color?: string; text: string }
+  cancelButton?: { color?: string; text: string }
+  callback?: (val: { isConfirmed: boolean; isDismissed: boolean; value: boolean }) => any
+}) {
+  const result = await OxPrompt.open({
+    type: type || 'info',
+    icon: (icon && TYPES_ICON[icon]) || icon,
+    title,
+    text,
+    confirmButton,
+    cancelButton
+  })
+
+  const val = { isConfirmed: result, isDismissed: !result, value: result }
+  if (callback && typeof callback === 'function') {
+    callback(val)
+  } else {
+    return val
+  }
+}

package/src/entries/public/home.ts

@@ -1,5 +1,4 @@
-import '@material/mwc-icon-button'
-import '@material/mwc-button'
+import '@material/web/icon/icon.js'
 
 import { css, html, LitElement } from 'lit'
 import { customElement } from 'lit/decorators.js'
@@ -13,7 +12,7 @@ export class HomePage extends LitElement {
       display: block;
       position: relative;
 
-      --mdc-theme-primary: white;
+      --md-theme-primary: white;
     }
 
     [home] {
@@ -30,17 +29,19 @@ export class HomePage extends LitElement {
       color: #fff;
       text-align: center;
       font-size: 20px;
-    }
-    [message] strong {
-      display: block;
-      font-size: 2.5rem;
-    }
-    [message] img {
-      width: 450px;
-      max-width: 90%;
-      display: block;
-      margin: auto;
-      margin-top: 20px;
+
+      strong {
+        display: block;
+        font-size: 2.5rem;
+      }
+
+      img {
+        width: 450px;
+        max-width: 90%;
+        display: block;
+        margin: auto;
+        margin-top: 20px;
+      }
     }
 
     @media screen and (max-width: 460px) {
@@ -64,10 +65,10 @@ export class HomePage extends LitElement {
   }
 
   render() {
-    var { icon, title, description } = this.applicationMeta
+    var { title, description } = this.applicationMeta
 
     return html`
-      <mwc-icon-button home icon="home" @click=${() => (window.location.href = '/')}></mwc-icon-button>
+      <md-icon home @click=${() => (window.location.href = '/')}>home</md-icon>
 
       <div message>
         <strong>${title}</strong>

package/src/index.ts

@@ -3,3 +3,4 @@ export * from './store'
 export * from './actions'
 export * from './app/pages/page-view'
 export * from './object-store'
+export * from './custom-alert'

package/src/store.ts

@@ -14,6 +14,15 @@ declare global {
 // See https://github.com/zalmoxisus/redux-devtools-extension for more information.
 const devCompose = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose
 
+// Only for providing test environment - combineReducers 에서 process.env.NODE_ENV를 접근하기 때문에.
+if (typeof window.process == 'undefined') {
+  window.process = {
+    env: {
+      NODE_ENV: JSON.stringify('development')
+    }
+  } as any
+}
+
 export const store: Store<unknown, Action<any>> & LazyStore = createStore(
   state => state,
   devCompose(lazyReducerEnhancer(combineReducers), applyMiddleware(thunk))

package/stories/app.stories.ts

@@ -0,0 +1,51 @@
+import '@material/web/icon/icon.js'
+
+import { css, html, render, TemplateResult } from 'lit'
+import '../src/app/app.js'
+
+export default {
+  title: 'things-app',
+  component: 'things-app',
+  argTypes: {
+    label: { control: 'string' }
+  }
+}
+
+interface Story<T> {
+  (args: T): TemplateResult
+  args?: Partial<T>
+  argTypes?: Record<string, unknown>
+}
+
+interface ArgTypes {
+  label?: string
+}
+
+const Template: Story<ArgTypes> = ({ label = '' }: ArgTypes) => html`
+  <link href="/themes/app-theme.css" rel="stylesheet" />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+
+  <style>
+    body {
+      background-color: white;
+    }
+  </style>
+
+  <things-app></things-app>
+`
+
+export const Regular = Template.bind({})
+Regular.args = {
+  label: 'common header styles'
+}

package/themes/app-theme.css

@@ -0,0 +1,145 @@
+body {
+  /* theme color */
+  --primary-color-rgb: 130, 105, 96;
+  --primary-color: rgb(var(--primary-color-rgb));
+  --secondary-color-rgb: 78, 78, 90;
+  --secondary-color: rgb(var(--secondary-color-rgb));
+  --focus-color: var(--theme-white-color);
+  --primary-background-color: var(--secondary-color);
+  --secondary-background-color: #283644;
+  --main-section-background-color: #f5f2ee;
+  --theme-white-color: #fff;
+  --theme-black-color: rgba(0, 0, 0, 0.9);
+
+  --focus-background-color: var(--primary-color);
+  --primary-text-color: #3c3938;
+  --secondary-text-color: var(--primary-color);
+
+  --opacity-dark-color: rgba(0, 0, 0, 0.4);
+  --opacity-light-color: rgba(255, 255, 255, 0.8);
+
+  /* status color */
+  --status-success-color: #35a24a;
+  --status-warning-color: #ee8d03;
+  --status-danger-color: #d14946;
+  --status-info-color: #398ace;
+
+  /* common style */
+  --border-radius: 4px;
+  --border-dark-color: 1px solid rgba(0, 0, 0, 0.15);
+  --border-light-color: 1px solid rgba(255, 255, 255, 0.3);
+
+  --box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, 0.1);
+
+  --theme-font: 'Noto', Helvetica;
+
+  --margin-default: 9px;
+  --margin-narrow: 4px;
+  --margin-wide: 15px;
+  --padding-default: var(--margin-default);
+  --padding-narrow: var(--margin-narrow);
+  --padding-wide: var(--margin-wide);
+
+  --scrollbar-thumb-color: rgba(57, 78, 100, 0.5);
+  --scrollbar-thumb-hover-color: var(--primary-color);
+
+  --fontsize-default: 14px;
+  --fontsize-small: 13px;
+  --fontsize-large: 16px;
+
+  /* app layout style */
+  --app-grid-template-area: 'header header header' 'nav main aside' 'nav footer aside';
+
+  /* title & description style */
+  --title-margin: var(--margin-narrow) 0;
+  --title-font: bold 24px var(--theme-font);
+  --title-text-color: var(--secondary-color);
+  --title-font-mobile: bold 20px var(--theme-font);
+
+  --page-description-margin: var(--margin-narrow) 0 var(--margin-wide) 0;
+  --page-description-font: normal var(--fontsize-default) / 1.2rem var(--theme-font);
+  --page-description-color: var(--secondary-text-color);
+
+  --subtitle-padding: 12px 5px 3px 5px;
+  --subtitle-font: bold 18px var(--theme-font);
+  --subtitle-text-color: var(--primary-color);
+  --subtitle-border-bottom: 1px solid var(--primary-color);
+
+  /* icon style */
+  --icon-tiny-size: 24px;
+  --icon-default-size: 36px;
+  --icon-big-size: 48px;
+  --icon-default-color: var(--theme-white-color);
+
+  /* material design component themes */
+  --mdc-theme-on-primary: var(--theme-white-color);
+  --mdc-theme-primary: var(--secondary-text-color);
+  --mdc-theme-on-secondary: var(--theme-white-color);
+  --mdc-theme-secondary: var(--primary-color);
+  --mdc-button-outline-color: var(--primary-color);
+  --mdc-danger-button-primary-color: var(--status-danger-color);
+  --mdc-danger-button-outline-color: var(--status-danger-color);
+  --mdc-button-outline-width: 1px;
+  --mdc-button-horizontal-padding: 16px;
+
+  /* button style */
+  --button-background-color: #fafbfc;
+  --button-background-focus-color: var(--primary-color);
+  --button-border: var(--border-dark-color);
+  --button-border-radius: var(--border-radius);
+  --button-margin: var(--margin-default) var(--margin-default) var(--margin-default) 0;
+  --button-padding: var(--padding-default);
+  --button-color: var(--secondary-color);
+  --button-font: normal 15px var(--theme-font);
+  --button-text-transform: capitalize;
+  --button-active-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.2);
+  --button-activ-border: 1px solid var(--primary-color);
+
+  --button-primary-background-color: var(--primary-color);
+  --button-primary-active-background-color: var(--status-success-color);
+  --button-primary-padding: var(--margin-default) var(--margin-wide);
+  --button-primary-color: var(--theme-white-color);
+  --button-primary-font: bold 16px var(--theme-font);
+
+  /* table style */
+  --th-padding: var(--padding-default);
+  --th-border-top: 2px solid var(--secondary-color);
+  --th-text-transform: capitalize;
+  --th-font: bold var(--fontsize-small) var(--theme-font);
+  --th-color: rgba(var(--secondary-color-rgb), 0.8);
+
+  --tr-background-color: var(--theme-white-color);
+  --tr-background-odd-color: rgba(255, 255, 255, 0.4);
+  --tr-background-hover-color: #e1f5fe;
+  --td-border-line: 1px solid rgba(0, 0, 0, 0.05);
+  --td-border-bottom: 1px solid rgba(0, 0, 0, 0.09);
+  --td-padding: var(--padding-default);
+  --td-font: normal 13px var(--theme-font);
+  --td-color: var(--secondary-color);
+
+  --label-cell-background-color: #f6f6f6; /* th or td common background color */
+
+  /* form style */
+  --label-font: normal var(--fontsize-default) var(--theme-font);
+  --label-color: var(--secondary-color);
+  --label-text-transform: capitalize;
+  --input-margin: var(--margin-narrow) 0;
+  --input-padding: var(--padding-default);
+  --input-min-width: 200px;
+  --input-font: normal var(--fontsize-default) var(--theme-font);
+  --input-hint-font: normal var(--fontsize-small) var(--theme-font);
+  --input-hint-color: #666;
+  --input-container-max-width: 900px;
+  --fieldset-margin: var(--padding-wide) 0;
+  --fieldset-padding: 0 var(--padding-wide) var(--padding-wide) var(--padding-wide);
+  --legend-padding: var(--padding-default) 0;
+  --legend-color: var(--secondary-text-color);
+  --legend-font: bold 16px var(--theme-font);
+}
+
+@media only screen and (max-width: 460px) {
+  body {
+    /* subtitle style */
+    --subtitle-margin: 0;
+  }
+}

package/yarn-error.log

@@ -85,8 +85,7 @@ npm manifest:
     },
     "dependencies": {
       "@material/mwc-button": "^0.27.0",
-      "@material/mwc-icon": "^0.27.0",
-      "@material/mwc-icon-button": "^0.27.0",
+        "@material/mwc-icon-button": "^0.27.0",
       "@operato/graphql": "^1.2.6",
       "@operato/styles": "^1.2.0",
       "@operato/utils": "^1.2.4",
@@ -109,10 +108,10 @@ npm manifest:
       "@web/test-runner": "^0.15.0",
       "concurrently": "^5.3.0",
       "eslint": "^7.32.0",
-      "eslint-config-prettier": "^8.3.0",
-      "husky": "^8.0.1",
+      "eslint-config-prettier": "^9.1.0",
+      "husky": "^9.0.11",
       "lint-staged": "^10.5.4",
-      "prettier": "^2.4.1",
+      "prettier": "^3.2.5",
       "tslib": "^2.3.1",
       "typescript": "^4.8.4"
     },