@operato/oops 8.0.0-beta.0 → 8.0.0-beta.1

package/CHANGELOG.md

@@ -3,6 +3,15 @@
 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.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/oops

package/package.json

@@ -2,7 +2,7 @@
   "name": "@operato/oops",
   "description": "Webcomponent oops following open-wc recommendations",
   "author": "heartyoh",
-  "version": "8.0.0-beta.0",
+  "version": "8.0.0-beta.1",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "license": "MIT",
@@ -54,8 +54,8 @@
   },
   "dependencies": {
     "@material/web": "^2.0.0",
-    "@operato/graphql": "^8.0.0-beta.0",
-    "@operato/styles": "^8.0.0-beta.0",
+    "@operato/graphql": "^8.0.0-beta.1",
+    "@operato/styles": "^8.0.0-beta.1",
     "lit": "^3.1.2"
   },
   "devDependencies": {
@@ -90,5 +90,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "c4e9cc245659d050a9ffd66542083a6daad4bcb9"
+  "gitHead": "d5b28a2e9deb632c0dc80132f6a7196dd6fe4220"
 }

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/src/index.ts

@@ -1,4 +0,0 @@
-export * from './ox-oops'
-export * from './ox-oops-note'
-export * from './ox-oops-spinner'
-export * from './ox-oops-progress'

package/src/ox-oops-note.ts

@@ -1,43 +0,0 @@
-import '@material/web/icon/icon.js'
-
-import { css, html, LitElement } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
-
-@customElement('ox-oops-note')
-export class OxOopsNote extends LitElement {
-  static styles = css`
-    :host {
-      display: block;
-      text-align: center;
-    }
-    md-icon {
-      font: var(--oops-note-icon-font);
-      color: var(--oops-note-icon-color);
-      border: var(--oops-note-icon-border);
-      border-radius: var(--oops-note-icon-border-radius);
-      padding: var(--oops-note-icon-padding);
-    }
-    [title] {
-      margin: var(--oops-note-title-margin);
-      font: var(--oops-note-title-font);
-      color: var(--oops-note-title-color);
-      text-transform: capitalize;
-    }
-    [description] {
-      font: var(--oops-note-description-font);
-      color: var(--oops-note-description-color);
-    }
-  `
-
-  @property({ type: String }) icon!: string
-  @property({ type: String }) title: string = ''
-  @property({ type: String }) description: string = ''
-
-  render() {
-    return html`
-      <md-icon>${this.icon}</md-icon>
-      <div title>${this.title}</div>
-      <div description>${this.description}</div>
-    `
-  }
-}

package/src/ox-oops-progress.ts

@@ -1,79 +0,0 @@
-import gql from 'graphql-tag'
-import { html, LitElement, PropertyValues } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
-
-import { subscribe } from '@operato/graphql'
-
-@customElement('ox-oops-progress')
-export class OxOopsProgress extends LitElement {
-  @property({ type: String }) tag?: string
-
-  private _subscription: any
-
-  render() {
-    return html` <slot></slot> `
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback()
-    this.stopSubscribe()
-  }
-
-  get subscription() {
-    return this._subscription
-  }
-
-  set subscription(subscription) {
-    console.warn('oops-progress#subscription is readonly property')
-  }
-
-  async updated(changes: PropertyValues<this>) {
-    if (changes.has('tag') && this.subscription) {
-      await this.stopSubscribe()
-    }
-  }
-
-  async startSubscribe() {
-    if (!this.tag || this._subscription) {
-      return
-    }
-
-    this._subscription = await subscribe(
-      {
-        query: gql`
-          subscription {
-            data(tag: "${this.tag}") {
-              tag
-              data
-            }
-          }
-        `
-      },
-      {
-        next: async ({ data }: { data: any }) => {
-          if (data) {
-            const { progress = 0, message = '' } = data?.data?.data || {}
-            this.dispatchEvent(
-              new CustomEvent('progress', {
-                detail: {
-                  progress,
-                  message
-                }
-              })
-            )
-
-            if (progress >= 100) {
-              await this.stopSubscribe()
-              this.dispatchEvent(new CustomEvent('finish'))
-            }
-          }
-        }
-      }
-    )
-  }
-
-  async stopSubscribe() {
-    await this._subscription?.unsubscribe()
-    delete this._subscription
-  }
-}

package/src/ox-oops-spinner.ts

@@ -1,29 +0,0 @@
-import { css, html, LitElement } from 'lit'
-import { customElement } from 'lit/decorators.js'
-
-@customElement('ox-oops-spinner')
-export class OxOopsSpinner extends LitElement {
-  static styles = css`
-    :host {
-      width: 70px;
-      height: 70px;
-      margin: 0 auto;
-      background: url(/assets/images/spinner.png) 0 0 no-repeat;
-      background-size: 700%;
-      animation: spinner steps(6) 2s infinite both;
-    }
-
-    @keyframes spinner {
-      0% {
-        background-position: 0%;
-      }
-      100% {
-        background-position: 100%;
-      }
-    }
-  `
-
-  render() {
-    return html``
-  }
-}

package/src/ox-oops.ts

@@ -1,226 +0,0 @@
-import { css, html, LitElement } from 'lit'
-import { render } from 'lit-html'
-import { customElement, state } from 'lit/decorators.js'
-
-import { ScrollbarStyles } from '@operato/styles'
-
-@customElement('ox-oops')
-export class OxOops extends LitElement {
-  static styles = [
-    ScrollbarStyles,
-    css`
-      :host {
-        position: absolute;
-        display: none;
-        background-color: var(--md-sys-color-surface, #fff);
-        z-index: 100;
-        padding: 4px 0;
-        box-shadow: 2px 3px 10px 5px rgba(0, 0, 0, 0.15);
-        box-sizing: border-box;
-        min-width: fit-content;
-      }
-
-      :host([active]) {
-        display: block;
-      }
-
-      :host(*:focus) {
-        outline: none;
-      }
-      ::slotted(*) {
-        padding: 5px 10px;
-        cursor: pointer;
-      }
-
-      ::slotted(*:focus) {
-        outline: none;
-      }
-
-      ::slotted([menu][active]),
-      ::slotted([menu]:hover) {
-        background-color: #f6f6f6;
-      }
-
-      ::slotted([menu]),
-      ::slotted(ox-oops-menuitem) {
-        border-left: 3px solid transparent;
-      }
-
-      ::slotted(ox-oops-menuitem[active]) {
-        border-left: 3px solid var(--md-sys-color-on-primary-container, #38a25b);
-        font-weight: bold;
-      }
-
-      ::slotted([separator]) {
-        height: 1px;
-        width: 100%;
-        padding: 0;
-        background-color: rgba(0, 0, 0, 0.15);
-      }
-      ::slotted([menu] > input) {
-        border: var(--border-dim-color, 1px solid rgba(0, 0, 0, 0.3));
-      }
-    `
-  ]
-
-  @state() _parent?: Element
-
-  render() {
-    return html` <slot> </slot> `
-  }
-
-  protected _onfocusout: (e: FocusEvent) => void = function (this: OxOops, e: FocusEvent) {
-    const to = e.relatedTarget as HTMLElement
-
-    if (!this.contains(to)) {
-      /* 분명히 내 범위가 아닌 엘리먼트로 포커스가 옮겨졌다면, ox-oops은 닫혀야 한다. */
-      // @ts-ignore for debug
-      !window.POPUP_DEBUG && this.close()
-    }
-  }.bind(this)
-
-  protected _onkeydown: (e: KeyboardEvent) => void = function (this: OxOops, e: KeyboardEvent) {
-    e.stopPropagation()
-
-    switch (e.key) {
-      case 'Esc': // for IE/Edge
-      case 'Escape':
-        this.close()
-        break
-    }
-  }.bind(this)
-
-  protected _onkeyup: (e: KeyboardEvent) => void = function (this: OxOops, e: KeyboardEvent) {
-    e.stopPropagation()
-  }.bind(this)
-
-  protected _onclick: (e: MouseEvent) => void = function (this: OxOops, e: MouseEvent) {
-    e.stopPropagation()
-  }.bind(this)
-
-  protected _onclose: (e: Event) => void = function (this: OxOops, e: Event) {
-    this.close()
-  }.bind(this)
-
-  protected _oncollapse: (e: Event) => void = function (this: OxOops, e: Event) {
-    e.stopPropagation()
-    this.close()
-  }.bind(this)
-
-  protected _onwindowblur: (e: Event) => void = function (this: OxOops, e: Event) {
-    // @ts-ignore for debug
-    !window.POPUP_DEBUG && this.close()
-  }.bind(this)
-
-  connectedCallback() {
-    super.connectedCallback()
-
-    this.addEventListener('focusout', this._onfocusout)
-    this.addEventListener('keydown', this._onkeydown)
-    this.addEventListener('keyup', this._onkeyup)
-    this.addEventListener('click', this._onclick)
-    this.addEventListener('ox-close', this._onclose)
-    this.addEventListener('ox-collapse', this._oncollapse)
-
-    this.setAttribute('tabindex', '0') // make this element focusable
-    this.guaranteeFocus()
-  }
-
-  /**
-   * Configuration for opening ox-oops
-   *
-   * @typedef {Object} OopsOpenOptions
-   * @property {HTMLTemplate} template HTMLTemplate to be displayed inside the oops
-   * @property {Number} top The position-top where the pop-up will be displayed
-   * @property {Number} left The position-left where the pop-up will be displayed
-   * @property {HTMLElement} parent Oops's parent element
-   */
-
-  /**
-   * Open Oops
-   *
-   * @param {OopsOpenOptions}
-   */
-  static open({
-    template,
-    top,
-    left,
-    right,
-    bottom,
-    parent
-  }: {
-    template: unknown
-    top?: number
-    left?: number
-    right?: number
-    bottom?: number
-    parent?: Element | null
-  }) {
-    const owner = parent || document.body
-    const target = document.createElement('ox-oops') as OxOops
-
-    render(template, target)
-
-    target._parent = owner
-    owner.appendChild(target)
-
-    target.open({ top, left, right, bottom })
-  }
-
-  open({
-    left,
-    top,
-    right,
-    bottom,
-    silent = false
-  }: {
-    left?: number
-    top?: number
-    right?: number
-    bottom?: number
-    silent?: boolean
-  }) {
-    if (left !== undefined) this.style.left = `${left}px`
-    if (top !== undefined) this.style.top = `${top}px`
-    if (right !== undefined) this.style.right = `${right}px`
-    if (bottom !== undefined) this.style.bottom = `${bottom}px`
-
-    this.setAttribute('active', '')
-
-    !silent && this.guaranteeFocus()
-
-    /* When the window is out of focus, all pop-ups should disappear. */
-    window.addEventListener('blur', this._onwindowblur)
-  }
-
-  guaranteeFocus() {
-    const focusible = this.querySelector(
-      ':scope > button, :scope > [href], :scope > input, :scope > select, :scope > textarea, :scope > [tabindex]:not([tabindex="-1"])'
-    )
-
-    if (focusible) {
-      ;(focusible as HTMLElement).focus()
-    } else {
-      this.focus()
-    }
-  }
-
-  close() {
-    this.removeAttribute('active')
-
-    window.removeEventListener('blur', this._onwindowblur)
-
-    if (this._parent) {
-      /* this case is when the oops is opened by OxOops.open(...) */
-      this.removeEventListener('focusout', this._onfocusout)
-      this.removeEventListener('keydown', this._onkeydown)
-      this.removeEventListener('keyup', this._onkeyup)
-      this.removeEventListener('click', this._onclick)
-      this.removeEventListener('ox-close', this._onclose)
-      this.removeEventListener('ox-collapse', this._oncollapse)
-
-      this._parent.removeChild(this)
-      delete this._parent
-    }
-  }
-}

package/stories/index.stories.ts

@@ -1,50 +0,0 @@
-import '../src/ox-oops'
-
-import { html, TemplateResult } from 'lit'
-
-export default {
-  title: 'ContextMenu',
-  component: 'ox-oops',
-  argTypes: {
-    title: { control: 'text' },
-    counter: { control: 'number' },
-    textColor: { control: 'color' }
-  }
-}
-
-interface Story<T> {
-  (args: T): TemplateResult
-  args?: Partial<T>
-  argTypes?: Record<string, unknown>
-}
-
-interface ArgTypes {
-  title?: string
-  counter?: number
-  textColor?: string
-  slot?: TemplateResult
-}
-
-const Template: Story<ArgTypes> = ({ title = 'Hello world', counter = 5, textColor, slot }: ArgTypes) => html`
-  <ox-oops style="--ox-oops-text-color: ${textColor || 'black'}" .title=${title} .counter=${counter}> ${slot} </ox-oops>
-`
-
-export const Regular = Template.bind({})
-
-export const CustomTitle = Template.bind({})
-CustomTitle.args = {
-  title: 'My title'
-}
-
-export const CustomCounter = Template.bind({})
-CustomCounter.args = {
-  counter: 123456
-}
-
-export const SlottedContent = Template.bind({})
-SlottedContent.args = {
-  slot: html`<p>Slotted content</p>`
-}
-SlottedContent.argTypes = {
-  slot: { table: { disable: true } }
-}

package/tsconfig.json

@@ -1,24 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "es2018",
-    "module": "esnext",
-    "moduleResolution": "node",
-    "noEmitOnError": true,
-    "lib": ["es2017", "dom"],
-    "strict": true,
-    "esModuleInterop": false,
-    "allowSyntheticDefaultImports": true,
-    "experimentalDecorators": true,
-    "useDefineForClassFields": false,
-    "importHelpers": true,
-    "outDir": "dist",
-    "sourceMap": true,
-    "inlineSources": true,
-    "rootDir": "./",
-    "declaration": true,
-    "incremental": true,
-    "skipLibCheck": true,
-    "types": ["node", "mocha"]
-  },
-  "include": ["**/*.ts"]
-}

package/web-dev-server.config.mjs

@@ -1,27 +0,0 @@
-// import { hmrPlugin, presets } from '@open-wc/dev-server-hmr';
-
-/** Use Hot Module replacement by adding --hmr to the start command */
-const hmr = process.argv.includes('--hmr');
-
-export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
-  open: '/demo/',
-  /** Use regular watch mode if HMR is not enabled. */
-  watch: !hmr,
-  /** Resolve bare module imports */
-  nodeResolve: {
-    exportConditions: ['browser', 'development'],
-  },
-
-  /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
-  // esbuildTarget: 'auto'
-
-  /** Set appIndex to enable SPA routing */
-  // appIndex: 'demo/index.html',
-
-  plugins: [
-    /** Use Hot Module Replacement by uncommenting. Requires @open-wc/dev-server-hmr plugin */
-    // hmr && hmrPlugin({ exclude: ['**/*/node_modules/**/*'], presets: [presets.litElement] }),
-  ],
-
-  // See documentation for all available options
-});

package/web-test-runner.config.mjs

@@ -1,41 +0,0 @@
-// import { playwrightLauncher } from '@web/test-runner-playwright';
-
-const filteredLogs = ['Running in dev mode', 'lit-html is in dev mode'];
-
-export default /** @type {import("@web/test-runner").TestRunnerConfig} */ ({
-  /** Test files to run */
-  files: 'dist/test/**/*.test.js',
-
-  /** Resolve bare module imports */
-  nodeResolve: {
-    exportConditions: ['browser', 'development'],
-  },
-
-  /** Filter out lit dev mode logs */
-  filterBrowserLogs(log) {
-    for (const arg of log.args) {
-      if (typeof arg === 'string' && filteredLogs.some(l => arg.includes(l))) {
-        return false;
-      }
-    }
-    return true;
-  },
-
-  /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
-  // esbuildTarget: 'auto',
-
-  /** Amount of browsers to run concurrently */
-  // concurrentBrowsers: 2,
-
-  /** Amount of test files per browser to test concurrently */
-  // concurrency: 1,
-
-  /** Browsers to run tests on */
-  // browsers: [
-  //   playwrightLauncher({ product: 'chromium' }),
-  //   playwrightLauncher({ product: 'firefox' }),
-  //   playwrightLauncher({ product: 'webkit' }),
-  // ],
-
-  // See documentation for all available options
-});