@operato/board 0.2.15

package/stories/index.stories.ts

@@ -0,0 +1,52 @@
+import '../index.js.js.js'
+
+import { html, TemplateResult } from 'lit'
+
+export default {
+  title: 'BoardViewer',
+  component: 'board-viewer',
+  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-board-viewer style="--board-viewer-text-color: ${textColor || 'black'}" .title=${title} .counter=${counter}>
+    ${slot}
+  </ox-board-viewer>
+`
+
+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/test/board-viewer.test.ts

@@ -0,0 +1,35 @@
+import '../board-viewer'
+
+import { html } from 'lit'
+
+import { expect, fixture } from '@open-wc/testing'
+
+import { BoardViewer } from '../src/ox-board-viewer'
+
+describe('BoardViewer', () => {
+  it('has a default title "Hey there" and counter 5', async () => {
+    const el = await fixture<BoardViewer>(html` <ox-board-viewer></ox-board-viewer> `)
+
+    // expect(el.title).to.equal('Hey there')
+    // expect(el.counter).to.equal(5)
+  })
+
+  it('increases the counter on button click', async () => {
+    const el = await fixture<BoardViewer>(html` <ox-board-viewer></ox-board-viewer> `)
+    el.renderRoot!.querySelector('button')!.click()
+
+    // expect(el.counter).to.equal(6)
+  })
+
+  it('can override the title via attribute', async () => {
+    const el = await fixture<BoardViewer>(html` <board-viewer title="attribute title"></ox-board-viewer> `)
+
+    expect(el.title).to.equal('attribute title')
+  })
+
+  it('passes the a11y audit', async () => {
+    const el = await fixture<BoardViewer>(html` <ox-board-viewer></ox-board-viewer> `)
+
+    await expect(el).shadowDom.to.be.accessible()
+  })
+})

package/tsconfig.json

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

package/web-dev-server.config.mjs

@@ -0,0 +1,28 @@
+// 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} */ ({
+  nodeResolve: true,
+  open: '/demo/',
+  watch: !hmr,
+
+  /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
+  // esbuildTarget: 'auto'
+
+  /** Set appIndex to enable SPA routing */
+  // appIndex: 'demo/index.html',
+
+  /** Confgure bare import resolve plugin */
+  // nodeResolve: {
+  //   exportConditions: ['browser', 'development']
+  // },
+
+  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

@@ -0,0 +1,29 @@
+// import { playwrightLauncher } from '@web/test-runner-playwright';
+
+export default /** @type {import("@web/test-runner").TestRunnerConfig} */ ({
+  files: 'dist/test/**/*.test.js',
+  nodeResolve: true
+
+  /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
+  // esbuildTarget: 'auto',
+
+  /** Confgure bare import resolve plugin */
+  // nodeResolve: {
+  //   exportConditions: ['browser', 'development']
+  // },
+
+  /** 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
+})