@oddsmith/ui 0.0.0 → 1.0.1

package/docs/prism-okaidia.css

@@ -1,123 +0,0 @@
-/**
- * okaidia theme for JavaScript, CSS and HTML
- * Loosely based on Monokai textmate theme by http://www.monokai.nl/
- * @author ocodia
- */
-
-code[class*="language-"],
-pre[class*="language-"] {
-	color: #f8f8f2;
-	background: none;
-	text-shadow: 0 1px rgba(0, 0, 0, 0.3);
-	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
-	font-size: 1em;
-	text-align: left;
-	white-space: pre;
-	word-spacing: normal;
-	word-break: normal;
-	word-wrap: normal;
-	line-height: 1.5;
-
-	-moz-tab-size: 4;
-	-o-tab-size: 4;
-	tab-size: 4;
-
-	-webkit-hyphens: none;
-	-moz-hyphens: none;
-	-ms-hyphens: none;
-	hyphens: none;
-}
-
-/* Code blocks */
-pre[class*="language-"] {
-	padding: 1em;
-	margin: .5em 0;
-	overflow: auto;
-	border-radius: 0.3em;
-}
-
-:not(pre) > code[class*="language-"],
-pre[class*="language-"] {
-	background: #272822;
-}
-
-/* Inline code */
-:not(pre) > code[class*="language-"] {
-	padding: .1em;
-	border-radius: .3em;
-	white-space: normal;
-}
-
-.token.comment,
-.token.prolog,
-.token.doctype,
-.token.cdata {
-	color: #8292a2;
-}
-
-.token.punctuation {
-	color: #f8f8f2;
-}
-
-.token.namespace {
-	opacity: .7;
-}
-
-.token.property,
-.token.tag,
-.token.constant,
-.token.symbol,
-.token.deleted {
-	color: #f92672;
-}
-
-.token.boolean,
-.token.number {
-	color: #ae81ff;
-}
-
-.token.selector,
-.token.attr-name,
-.token.string,
-.token.char,
-.token.builtin,
-.token.inserted {
-	color: #a6e22e;
-}
-
-.token.operator,
-.token.entity,
-.token.url,
-.language-css .token.string,
-.style .token.string,
-.token.variable {
-	color: #f8f8f2;
-}
-
-.token.atrule,
-.token.attr-value,
-.token.function,
-.token.class-name {
-	color: #e6db74;
-}
-
-.token.keyword {
-	color: #66d9ef;
-}
-
-.token.regex,
-.token.important {
-	color: #fd971f;
-}
-
-.token.important,
-.token.bold {
-	font-weight: bold;
-}
-.token.italic {
-	font-style: italic;
-}
-
-.token.entity {
-	cursor: help;
-}

package/docs-src/_README.md

@@ -1,7 +0,0 @@
-This directory containts the sources for the static site contained in the /docs/ directory. The site is based on the [eleventy](11ty.dev) static site generator.
-
-The site is intended to be used with GitHub pages. To enable the site go to the GitHub settings and change the GitHub Pages "Source" setting to "master branch /docs folder".
-
-To view the site locally, run `npm run docs:serve`.
-
-To edit the site, add to or edit the files in this directory then run `npm run docs` to build the site. The built files must be checked in and pushed to GitHub to appear on GitHub pages.

package/docs-src/_data/api.11tydata.js

@@ -1,8 +0,0 @@
-const fs = require('fs');
-
-module.exports = () => {
-  const customElements = JSON.parse(fs.readFileSync('custom-elements.json', 'utf-8'));
-  return {
-    customElements,
-  };
-};

package/docs-src/_includes/example.11ty.js

@@ -1,35 +0,0 @@
-const page = require('./page.11ty.js');
-const relative = require('./relative-path.cjs');
-
-/**
- * This template extends the page template and adds an examples list.
- */
-module.exports = function(data) {
-
-  return page({
-    ...data,
-    content: renderExample(data),
-  });
-};
-
-const renderExample = ({name, content, collections, page}) => {
-  return `
-    <h1>Example: ${name}</h1>
-    <section class="examples">
-      <nav class="collection">
-        <ul>
-          ${collections.example === undefined
-              ? ''
-              : collections.example.map((post) => `
-                  <li class=${post.url === page.url ? 'selected' : ''}>
-                    <a href="${relative(page.url, post.url)}">${post.data.description.replace('<', '&lt;')}</a>
-                  </li>
-                `).join('')}
-        </ul>
-      </nav>
-      <div>
-        ${content}
-      </div>
-    </section>
-  `;
-};

package/docs-src/_includes/footer.11ty.js

@@ -1,6 +0,0 @@
-module.exports = function () {
-  return `
-<footer>
-  <p>Oddsmith — brandable web components for gaming</p>
-</footer>`;
-};

package/docs-src/_includes/header.11ty.js

@@ -1,7 +0,0 @@
-module.exports = function () {
-  return `
-<header>
-  <h1>&lt;sf-leaderboard&gt;</h1>
-  <h2>Oddsmith web components</h2>
-</header>`;
-};

package/docs-src/_includes/nav.11ty.js

@@ -1,11 +0,0 @@
-const relative = require('./relative-path.cjs');
-
-module.exports = function({page}) {
-  return `
-<nav>
-  <a href="${relative(page.url, '/')}">Home</a>
-  <a href="${relative(page.url, '/examples/')}">Examples</a>
-  <a href="${relative(page.url, '/api/')}">API</a>
-  <a href="${relative(page.url, '/install/')}">Install</a>
-</nav>`;
-};

package/docs-src/_includes/page.11ty.js

@@ -1,32 +0,0 @@
-const header = require('./header.11ty.js');
-const footer = require('./footer.11ty.js');
-const nav = require('./nav.11ty.js');
-const relative = require('./relative-path.cjs');
-
-module.exports = function(data) {
-  const {title, page, content} = data;
-  return `
-<!doctype html>
-
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>${title}</title>
-    <link rel="stylesheet" href="${relative(page.url, '/docs.css')}">
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600|Roboto+Mono">
-    <link href="${relative(page.url, '/prism-okaidia.css')}" rel="stylesheet" />
-    <script type="module" src="${relative(page.url, '/components.bundle.js')}"></script>
-  </head>
-  <body>
-    ${header()}
-    ${nav(data)}
-    <div id="main-wrapper">
-      <main>
-        ${content}
-      </main>
-    </div>
-    ${footer()}
-  </body>
-</html>`;
-};

package/docs-src/_includes/relative-path.cjs

@@ -1,9 +0,0 @@
-const path = require('path').posix;
-
-module.exports = (base, p) => {
-  const relativePath = path.relative(base, p);
-  if (p.endsWith('/') && !relativePath.endsWith('/') && relativePath !== '') {
-    return relativePath + '/';
-  }
-  return relativePath;
-};

package/docs-src/api.11ty.js

@@ -1,85 +0,0 @@
-/**
- * This page generates its content from the custom-element.json file as read by
- * the _data/api.11tydata.js script.
- */
-module.exports = class Docs {
-  data() {
-    return {
-      layout: 'page.11ty.js',
-      title: '<sf-leaderboard> ⌲ Docs',
-    };
-  }
-
-  render(data) {
-    const customElements = data.api['11tydata'].customElements;
-    const tags = customElements.tags;
-    return `
-      <h1>API</h1>
-      ${tags.map((tag) => `
-        <h2>&lt;${tag.name}></h2>
-        <div>
-          ${tag.description}
-        </div>
-        ${renderTable(
-          'Attributes',
-          ['name', 'description', 'type', 'default'],
-          tag.attributes)}
-        ${renderTable(
-          'Properties',
-          ['name', 'attribute', 'description', 'type', 'default'],
-          tag.properties)}  
-        ${/*
-           * Methods are not output by web-component-analyzer yet (a bug), so
-           * this is a placeholder so that at least _something_ will be output
-           * when that is fixed, and element maintainers will hopefully have a
-           * signal to update this file to add the neccessary columns.
-           */
-          renderTable(
-          'Methods',
-          ['name', 'description'],
-          tag.methods)}
-        ${renderTable(
-          'Events',
-          ['name', 'description'],
-          tag.events)}    
-        ${renderTable(
-          'Slots',
-          ['name', 'description'],
-          tag.slots)}  
-        ${renderTable(
-          'CSS Shadow Parts',
-          ['name', 'description'],
-          tag.cssParts)}
-        ${renderTable(
-          'CSS Custom Properties',
-          ['name', 'description'],
-          tag.cssProperties)}
-        `).join('')}
-    `;
-  }
-}
-
-/**
- * Renders a table of data, plucking the given properties from each item in
- * `data`.
- */
-const renderTable = (name, properties, data) => {
-  if (data === undefined) {
-    return ''
-  }
-  return `
-    <h3>${name}</h3>
-    <table>
-      <tr>
-        ${properties.map((p) => `<th>${capitalize(p)}</th>`).join('')}
-      </tr>
-      ${data.map((i) => `
-        <tr>
-          ${properties.map((p) => `<td>${i[p]}</td>`).join('')}
-        </tr>
-      `).join('')}
-    </table>
-  `
-};
-
-const capitalize = (s) => s[0].toUpperCase() + s.substring(1);

package/docs-src/bundle.ts

@@ -1,9 +0,0 @@
-/**
- * Registers components for the static docs site.
- * Bundled to docs/components.bundle.js by vite.docs.config.ts.
- */
-import { DEFAULT_SF_LEADERBOARD_THEME } from '../src/theme/default-theme.js';
-import { injectTheme } from '../src/theme/inject-theme.js';
-import '../src/components/sf-leaderboard/sf-leaderboard.js';
-
-injectTheme(DEFAULT_SF_LEADERBOARD_THEME);

package/docs-src/docs.css

@@ -1,162 +0,0 @@
-* {
-  box-sizing: border-box;
-}
-
-body {
-  margin: 0;
-  color: #333;
-  font-family: 'Open Sans', arial, sans-serif;
-  min-width: min-content;
-  min-height: 100vh;
-  font-size: 18px;
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-}
-
-#main-wrapper {
-  flex-grow: 1;
-}
-
-main {
-  max-width: 1024px;
-  margin: 0 auto;
-}
-
-a:visited {
-  color: inherit;
-}
-
-header {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  height: 360px;
-  margin: 0;
-  background: linear-gradient(0deg, rgba(9,9,121,1) 0%, rgba(0,212,255,1) 100%);
-  color: white;
-}
-
-footer {
-  width: 100%;
-  min-height: 120px;
-  background: gray;
-  color: white;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  padding: 12px;
-  margin-top: 64px;
-}
-
-h1 {
-  font-size: 2.5em;
-  font-weight: 400;
-}
-
-h2 {
-  font-size: 1.6em;
-  font-weight: 300;
-  margin: 64px 0 12px;
-}
-
-h3 {
-  font-weight: 300;
-}
-
-header h1 {
-  width: auto;
-  font-size: 2.8em;
-  margin: 0;
-}
-
-header h2 {
-  width: auto;
-  margin: 0;
-}
-
-nav {
-  display: grid;
-  width: 100%;
-  max-width: 100%;
-  grid-template-columns: repeat(auto-fit, 240px);
-  justify-content: center;
-  border-bottom: 1px solid #efefef;
-}
-
-nav > a {
-  color: #444;
-  display: block;
-  flex: 1;
-  font-size: 18px;
-  padding: 20px 0;
-  text-align: center;
-  text-decoration: none;
-}
-
-nav > a:hover {
-  text-decoration: underline;
-}
-
-nav.collection {
-  border: none;
-}
-
-nav.collection > ul {
-  padding: 0;
-  list-style: none;
-}
-
-nav.collection > ul > li {
-  padding: 4px 0;
-}
-
-nav.collection > ul > li.selected {
-  font-weight: 600;
-}
-
-nav.collection a {
-  text-decoration: none;
-}
-
-nav.collection a:hover {
-  text-decoration: underline;
-}
-
-section.columns {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(400px, 488px));
-  grid-gap: 48px;
-  justify-content: center;
-}
-
-section.columns > div {
-  flex: 1;
-}
-
-section.examples {
-  display: grid;
-  grid-template-columns: 240px minmax(400px, 784px);
-  grid-gap: 48px;
-  justify-content: center;
-}
-
-section.examples h2:first-of-type {
-  margin-top: 0;
-}
-
-table {
-  width: 100%;
-  border-collapse: collapse;
-}
-th {
-  font-weight: 600;
-}
-
-td, th {
-  border: solid 1px #aaa;
-  padding: 4px;
-  text-align: left;
-}

package/docs-src/examples/index.md

@@ -1,15 +0,0 @@
----
-layout: example.11ty.js
-title: <sf-leaderboard> ⌲ Examples ⌲ Basic
-tags: example
-name: Basic
-description: Default leaderboard
----
-
-<sf-leaderboard></sf-leaderboard>
-
-<h3>HTML</h3>
-
-```html
-<sf-leaderboard></sf-leaderboard>
-```

package/docs-src/index.md

@@ -1,39 +0,0 @@
----
-layout: page.11ty.js
-title: <sf-leaderboard> ⌲ Home
----
-
-# &lt;sf-leaderboard&gt;
-
-`<sf-leaderboard>` is a themeable leaderboard web component built with Lit. Use it in any app that supports custom elements.
-
-## As easy as HTML
-
-<section class="columns">
-  <div>
-
-`<sf-leaderboard>` is a custom element. Drop it anywhere you use HTML.
-
-```html
-<sf-leaderboard></sf-leaderboard>
-```
-
-  </div>
-  <div>
-
-<sf-leaderboard></sf-leaderboard>
-
-  </div>
-</section>
-
-## With npm
-
-Install the package and import the component entry so it registers itself:
-
-```js
-import '@oddsmith/core/sf-leaderboard';
-```
-
-```html
-<sf-leaderboard></sf-leaderboard>
-```

package/docs-src/install.md

@@ -1,28 +0,0 @@
----
-layout: page.11ty.js
-title: <sf-leaderboard> ⌲ Install
----
-
-# Install
-
-Components are published as ES modules from the `@oddsmith/core` package.
-
-## Local installation
-
-```bash
-npm i @oddsmith/core
-```
-
-```js
-import '@oddsmith/core/sf-leaderboard';
-```
-
-## From `dist/` after building this repo
-
-```js
-import '../dist/sf-leaderboard/index.js';
-```
-
-```html
-<sf-leaderboard></sf-leaderboard>
-```

package/docs-src/package.json

@@ -1,3 +0,0 @@
-{
-  "type": "commonjs"
-}

package/index.html

@@ -1,19 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <title>Oddsmith Core — dev</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Orbitron:wght@600;700;900&display=swap"
-      rel="stylesheet"
-    />
-    <link rel="stylesheet" href="/main.css" />
-  </head>
-  <body>
-    <!-- Shell mounts here; only main.ts runs before any component code loads -->
-    <div id="app"></div>
-    <script type="module" src="/main.ts"></script>
-  </body>
-</html>

package/karma.conf.cjs

@@ -1,24 +0,0 @@
-const {createDefaultConfig} = require('@open-wc/testing-karma');
-const merge = require('deepmerge');
-
-module.exports = (config) => {
-  config.set(
-    merge(createDefaultConfig(config), {
-      frameworks: ['mocha', 'chai'],
-      client: {
-        mocha: {ui: 'tdd'},
-      },
-      files: [
-        {
-          pattern: config.grep ? config.grep : 'test/**/*_test.js',
-          type: 'module',
-        },
-      ],
-      // See the karma-esm docs for all options
-      esm: {
-        nodeResolve: true,
-      },
-    })
-  );
-  return config;
-};