@operato/shell 8.0.0-beta.0 → 8.0.0-beta.2

package/CHANGELOG.md

@@ -3,6 +3,24 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.0.0-beta.2](https://github.com/hatiolab/operato/compare/v8.0.0-beta.1...v8.0.0-beta.2) (2025-01-08)
+
+
+### :bug: Bug Fix
+
+* typo .npmignore ([d9c0c8c](https://github.com/hatiolab/operato/commit/d9c0c8c79abc688c3c2cfb6c37fcb689483a5977))
+
+
+
+## [8.0.0-beta.1](https://github.com/hatiolab/operato/compare/v8.0.0-beta.0...v8.0.0-beta.1) (2025-01-08)
+
+
+### :bug: Bug Fix
+
+* missing .npmignore ([be05985](https://github.com/hatiolab/operato/commit/be05985abfae4af53501f718dd52932099f7fbcb))
+
+
+
 ## [8.0.0-beta.0](https://github.com/hatiolab/operato/compare/v8.0.0-alpha.56...v8.0.0-beta.0) (2025-01-07)
 
 **Note:** Version bump only for package @operato/shell

package/package.json

@@ -2,7 +2,7 @@
   "name": "@operato/shell",
   "description": "WebApplication architecturing shell following open-wc recommendations",
   "author": "heartyoh",
-  "version": "8.0.0-beta.0",
+  "version": "8.0.0-beta.2",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "exports": {
@@ -59,10 +59,10 @@
   },
   "dependencies": {
     "@material/web": "^2.0.0",
-    "@operato/graphql": "^8.0.0-beta.0",
-    "@operato/popup": "^8.0.0-beta.0",
-    "@operato/styles": "^8.0.0-beta.0",
-    "@operato/utils": "^8.0.0-beta.0",
+    "@operato/graphql": "^8.0.0-beta.2",
+    "@operato/popup": "^8.0.0-beta.2",
+    "@operato/styles": "^8.0.0-beta.2",
+    "@operato/utils": "^8.0.0-beta.2",
     "@webcomponents/scoped-custom-element-registry": "^0.0.9",
     "lit": "^3.1.2",
     "lodash-es": "^4.17.21",
@@ -102,5 +102,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "c4e9cc245659d050a9ffd66542083a6daad4bcb9"
+  "gitHead": "ee1b5124995accb99272d3b5854f3df1d8746dda"
 }

package/.editorconfig

@@ -1,29 +0,0 @@
-# EditorConfig helps developers define and maintain consistent
-# coding styles between different editors and IDEs
-# editorconfig.org
-
-root = true
-
-
-[*]
-
-# Change these settings to your own preference
-indent_style = space
-indent_size = 2
-
-# We recommend you to keep these unchanged
-end_of_line = lf
-charset = utf-8
-trim_trailing_whitespace = true
-insert_final_newline = true
-
-[*.md]
-trim_trailing_whitespace = false
-
-[*.json]
-indent_size = 2
-
-[*.{html,js,md}]
-block_comment_start = /**
-block_comment = *
-block_comment_end = */

package/.storybook/main.js

@@ -1,3 +0,0 @@
-module.exports = {
-  stories: ['../dist/stories/**/*.stories.{js,md,mdx}'],
-};

package/.storybook/preview.js

@@ -1,52 +0,0 @@
-import { i18next } from '@operato/i18n'
-
-export const globalTypes = {
-  locale: {
-    name: 'Locale',
-    description: 'Internationalization locale',
-    toolbar: {
-      icon: 'globe',
-      items: [
-        { value: 'en', right: '🇺🇸', title: 'English' },
-        { value: 'ko', right: '🇰🇷', title: '한국어' },
-        { value: 'zh', right: '🇨🇳', title: '中文' },
-        { value: 'ja', right: '🇯🇵', title: '日本語' },
-        { value: 'ms', right: '🇲🇾', title: 'Bahasa Melayu' }
-      ],
-      showName: true
-    }
-  },
-  theme: {
-    name: 'Theme',
-    description: 'Global theme for components',
-    toolbar: {
-      icon: 'paintbrush',
-      items: [
-        { value: 'light', title: 'Light' },
-        { value: 'dark', title: 'Dark' }
-      ],
-      showName: true
-    }
-  }
-}
-
-export const decorators = [
-  (Story, context) => {
-    const { locale, theme } = context.globals
-
-    if (locale) {
-      i18next.changeLanguage(locale)
-    }
-
-    // Set the theme class for the document
-    if (theme === 'dark') {
-      document.documentElement.classList.add('dark')
-      document.documentElement.classList.remove('light')
-    } else {
-      document.documentElement.classList.add('light')
-      document.documentElement.classList.remove('dark')
-    }
-
-    return Story()
-  }
-]

package/.storybook/server.mjs

@@ -1,8 +0,0 @@
-import { storybookPlugin } from '@web/dev-server-storybook';
-import baseConfig from '../web-dev-server.config.mjs';
-
-export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
-  ...baseConfig,
-  open: '/',
-  plugins: [storybookPlugin({ type: 'web-components' }), ...baseConfig.plugins],
-});

package/demo/index.html

@@ -1,44 +0,0 @@
-<!doctype html>
-<html lang="en-GB">
-  <head>
-    <meta charset="utf-8" />
-    <style>
-      body {
-        background: #fafafa;
-        --ox-checkbox-size: 12px;
-      }
-
-      #demo {
-        position: relative;
-        height: 300px;
-        background-color: lightgray;
-        vertical-align: middle;
-      }
-    </style>
-    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" 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"
-    />
-  </head>
-  <body>
-    <div id="demo"></div>
-
-    <script type="module">
-      import { html, render } from 'lit'
-      import '@material/web/icon/icon.js'
-
-      const parent = document.querySelector('#demo')
-
-      render(html``, parent)
-    </script>
-  </body>
-</html>

package/src/actions/app.ts

@@ -1,23 +0,0 @@
-export const UPDATE_MODULES = 'UPDATE_MODULES'
-export const UPDATE_BASE_URL = 'UPDATE_BASE_URL'
-export const UPDATE_CONTEXT_PATH = 'UPDATE_CONTEXT_PATH'
-export const SET_DOMAINS = 'SET-DOMAINS'
-
-export const updateDomains =
-  (
-    domains: {
-      name: string
-      subdomain: string
-    }[],
-    domain: {
-      name: string
-      subdomain: string
-    }
-  ) =>
-  (dispatch: any) => {
-    dispatch({
-      type: SET_DOMAINS,
-      domains,
-      domain
-    })
-  }

package/src/actions/busy.ts

@@ -1,15 +0,0 @@
-import { setActiveRequestCounterCallback  } from '@operato/graphql'
-import { store } from '../store'
-
-export const UPDATE_BUSY = 'UPDATE_BUSY'
-
-setActiveRequestCounterCallback((count: number) => {
-  store.dispatch(updateBusy(count != 0) as any)
-})
-
-export const updateBusy = (busy: boolean) => (dispatch: any) => {
-  dispatch({
-    type: UPDATE_BUSY,
-    busy
-  })
-}

package/src/actions/const.ts

@@ -1,8 +0,0 @@
-export const UPDATE_PAGE = 'UPDATE_PAGE'
-export const UPDATE_CONTEXT = 'UPDATE_CONTEXT'
-export const UPDATE_ACTIVE_PAGE = 'UPDATE_ACTIVE_PAGE'
-
-export const REGISTER_NAVIGATION_CALLBACK = 'REGISTER_NAVIGATION_CALLBACK'
-export const UNREGISTER_NAVIGATION_CALLBACK = 'UNREGISTER_NAVIGATION_CALLBACK'
-
-export const HOMEPAGE = ''

package/src/actions/index.ts

@@ -1,4 +0,0 @@
-export * from './app'
-export * from './route'
-export * from './busy'
-export * from './const'

package/src/actions/route.ts

@@ -1,126 +0,0 @@
-import { getPathInfo } from '@operato/utils'
-
-import { HOMEPAGE, UPDATE_PAGE } from '../actions/const'
-import { store } from '../store'
-
-/**
- * Navigate to a page using one of two methods:
- * 1. Using a page link: <a href='page'>goto page</a> (equivalent to route(page))
- * 2. Using the navigate('page') function.
- *
- * 페이지를 이동하는 방법으로는 다음 두가지가 있다.
- * 1. page link를 사용하는 방법 <a href='page'>goto page</a>
- *    이 방법은 route(page)와 동일하다.
- * 2. navigate('page')를 사용하는 방법
- *
- * @param location - The path of the page to navigate to.
- * @param replace - Optional. If true, replaces the current page in the browser's history.
- */
-export const navigate = (location: string, replace?: boolean) => {
-  if (replace) history.replaceState(history.state, '', location)
-  else history.pushState({}, '', location)
-
-  window.dispatchEvent(new Event('popstate'))
-}
-
-/**
- * Navigate to a page with optional query parameters, and dispatch a Redux action to load the page.
- *
- * @param pathInfo - Object containing pathname, search, and optional params.
- * @param dispatch - Redux dispatch function.
- */
-export const navigateWithSilence =
-  ({ pathname: path, search, params }: { pathname: string; search?: string; params?: { [key: string]: any } }) =>
-  (dispatch: any) => {
-    const { path: pathname } = getPathInfo(path)
-
-    const reg = /\/([^\/]+)\/*([^\/]*)/
-    const decodePath = decodeURIComponent(pathname!)
-    const matchReturn = decodePath.match(reg) || []
-    const page = matchReturn[1] || HOMEPAGE
-    const id = matchReturn[2]
-
-    if (!params) {
-      params = {}
-
-      new URLSearchParams(search).forEach((value, key) => {
-        params![key] = value
-      })
-    }
-
-    // Any other info you might want to extract from the path (like page type),
-    // you can do here
-    dispatch(loadPage(page, id, params))
-  }
-
-/**
- * Preload a page by performing any necessary preprocessing before loading.
- *
- * @param page - The page to preload.
- * @returns - The new page path or routing result after preprocessing.
- */
-const _preLoadPage = async (page: any) => {
-  /*
-   * _preLoadPage 에서는 page를 load하기 전처리를 수행한다.
-   * 예를 들면, page dynamic import 또는 page re-routing
-   */
-  var state: any = store.getState()
-
-  /* override 기능을 위해서 dependency 관계의 역순으로 route를 실행한다. */
-  var modules = state.app.modules
-  if (modules) {
-    for (let i = modules.length - 1; i >= 0; i--) {
-      let module = modules[i]
-      let _page = module.route && (await module.route(page, module))
-      if (_page) {
-        return _page
-      }
-    }
-  }
-}
-
-/**
- * Load a page by dispatching a Redux action, and handle page navigation if necessary.
- *
- * @param page - The page to load.
- * @param id - The associated resource ID.
- * @param params - Additional parameters to pass to the page.
- */
-export const loadPage = (page: string, id: string, params: { [key: string]: any }) => async (dispatch: any) => {
-  var newPage = await _preLoadPage(page)
-
-  if (page !== newPage && newPage.indexOf('/') == 0) {
-    dispatch(
-      navigateWithSilence({
-        pathname: id ? `${newPage}/${id}` : newPage,
-        params
-      })
-    )
-    return
-  }
-
-  dispatch({
-    type: UPDATE_PAGE,
-    page: newPage,
-    resourceId: id,
-    params
-  })
-}
-
-/**
- * Route to a given URL by creating a link element and triggering a click event.
- * This approach does not work properly in a mobile environment and therefore should not be used.
- *
- * @deprecated
- *
- * @param url - The URL to route to.
- */
-export const route = (url: string) => {
-  const link = document.createElement('a')
-
-  link.setAttribute('href', url)
-
-  document.body.appendChild(link)
-  link.click()
-  document.body.removeChild(link)
-}

package/src/app/app-style.ts

@@ -1,114 +0,0 @@
-import { css } from 'lit'
-
-export const AppStyle = css`
-  :host {
-    display: grid;
-
-    grid-template-rows: var(--app-grid-template-rows, auto 1fr auto);
-    grid-template-columns: var(--app-grid-template-columns, auto 1fr auto);
-    grid-template-areas: var(--app-grid-template-area, 'header header header' 'nav main aside' 'nav footer aside');
-    grid-gap: var(--app-grid-gap, 0em);
-
-    max-width: 100vw;
-    width: 100vw;
-    height: 100vh;
-    height: 100dvh;
-  }
-
-  ox-header-bar {
-    grid-area: header;
-  }
-
-  ox-nav-bar {
-    grid-area: nav;
-  }
-
-  div {
-    grid-area: main;
-
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-  }
-
-  main {
-    flex: 1;
-
-    display: flex;
-    flex-direction: row;
-    overflow: hidden;
-  }
-
-  ox-aside-bar {
-    grid-area: aside;
-  }
-
-  ox-footer-bar {
-    grid-area: footer;
-  }
-
-  main > * {
-    flex: 1;
-  }
-
-  main > *:not([active]) {
-    display: none;
-  }
-
-  [hidden] {
-    display: none;
-  }
-
-  ox-snack-bar {
-    z-index: 1000;
-  }
-
-  @media print {
-    :host {
-      width: 100%;
-      height: 100%;
-      min-height: 100vh;
-      min-height: 100dvh;
-
-      max-width: unset;
-      width: unset;
-      height: unset;
-      height: unset;
-    }
-
-    main {
-      /* important for printing!!! */
-      display: block;
-      flex: unset;
-      overflow: visible;
-    }
-
-    ox-page-header-bar {
-      display: none;
-    }
-
-    ox-page-footer-bar {
-      display: none;
-    }
-
-    ox-header-bar {
-      display: none;
-    }
-
-    ox-nav-bar {
-      display: none;
-    }
-
-    ox-aside-bar {
-      display: none;
-    }
-
-    ox-footer-bar {
-      display: none;
-    }
-
-    ox-snack-bar {
-      display: none;
-    }
-  }
-`