@oddsmith/ui 0.0.0

package/styles/global.css

@@ -0,0 +1,125 @@
+@import 'tailwindcss';
+@import 'tw-animate-css';
+
+@custom-variant dark (&:is(.dark *));
+
+:root {
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --destructive-foreground: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --radius: 0.625rem;
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.145 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.145 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.985 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.396 0.141 25.723);
+  --destructive-foreground: oklch(0.637 0.237 25.331);
+  --border: oklch(0.269 0 0);
+  --input: oklch(0.269 0 0);
+  --ring: oklch(0.439 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(0.269 0 0);
+  --sidebar-ring: oklch(0.439 0 0);
+}
+
+@theme inline {
+  --font-sans: 'Geist', 'Geist Fallback';
+  --font-mono: 'Geist Mono', 'Geist Mono Fallback';
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

package/todo.txt

@@ -0,0 +1,54 @@
+- have landing page with broken download that actually tracks clicks
+- have integrations docs
+  - use docs.oddsmith.io
+  - have docs deployed from separate repo? 
+- setup vercel deploy
+  - domain
+  - ssl
+  - per branch deploy? Not needed atm
+- have npm package or script. Check what is best. Unpkg..
+- have modules (lazy load):
+  - config module - produces a config for a component
+    - handle data module inside?
+  - data module - produces a data for a component
+  - theme module - produces a theme for a component
+  - labels module - produces labels for a component
+  - all in a builder module that will produce a json from input (form, ts)
+    This json contains component config, data, theme, labels etc
+  - have per user file with different configs labels etc.
+    - all should share theme
+- data vs labels concept
+- component demos live in repo-root playground/ (Angular SPA)
+- live data updates. Animation
+  - right now something exists but its bad - patchState
+- have a business and developer version of the website
+  - business has demo cta
+  - dev have download npm cta
+  - is this good idea rather than to display both?
+- in Mando left pane have
+  - config
+    - game config like sections
+      - try to generate form fields from a ts file that
+        includes full layout
+      - order
+      - ...
+  - theme
+- in playground they should have a button top right of the game
+  - the button opens a modal with configs
+  - on save modal morphs animatied into a top right button
+    with a spinner appearing
+  - if layout changed them classic opacity in-out
+  - if theme changed then animate color changes
+  - playground on mobile? (track device usage)
+  - in playground use real component from npm latest version
+  - have light and dark theme for playground background 
+    - components have separate config
+- get subdomains:
+  - playground.oddsmith.io
+  - docs.oddsmith.io etc.
+- set deploy of playground.oddsmith.io
+- set up share links image meta tag for website
+- call shared folder -> producer or core (it exists) or feed
+  - it must produce data for core, playground and docs
+- have @import in ts path alias 
+- define contract what each component has as input

package/tsconfig.json

@@ -0,0 +1,31 @@
+{
+  "compilerOptions": {
+    "target": "es2017",
+    "module": "esnext",
+    "lib": ["es2017", "dom", "dom.iterable"],
+    "declaration": true,
+    "declarationMap": true,
+    "sourceMap": true,
+    "outDir": "./dist",
+    "rootDir": "src",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "allowSyntheticDefaultImports": true,
+    "experimentalDecorators": true,
+    "forceConsistentCasingInFileNames": true,
+    "plugins": [
+      {
+        "name": "ts-lit-plugin",
+        "strict": true
+      }
+    ]
+  },
+  "include": ["src/**/*.ts", "src/vite-env.d.ts"],
+  "exclude": []
+}

package/vite.config.ts

@@ -0,0 +1,56 @@
+import { resolve } from 'node:path';
+import { defineConfig } from 'vite';
+import { litHtmlPlugin, scssLoadPaths } from './vite.lit-html-plugin.js';
+
+const src = resolve(__dirname, 'src');
+const components = resolve(src, 'components');
+const shared = resolve(__dirname, '../shared');
+
+const entries = {
+  'sf-leaderboard/index': resolve(components, 'sf-leaderboard/index.ts'),
+  'streaks/index': resolve(components, 'streaks/index.ts'),
+  'leaderboard/index': resolve(components, 'leaderboard/index.ts'),
+  'leaderboard-v2/index': resolve(components, 'leaderboard-v2/index.ts'),
+  'sf-live-feed/index': resolve(components, 'sf-live-feed/index.ts'),
+  'casino-leaderboard/index': resolve(components, 'casino-leaderboard/index.ts'),
+};
+
+export default defineConfig({
+  plugins: [litHtmlPlugin()],
+  resolve: {
+    alias: {
+      '@oddsmith/core-src': src,
+      '@oddsmith/core': src,
+      '@oddsmith/shared': shared,
+    },
+  },
+  css: {
+    preprocessorOptions: {
+      scss: {
+        api: 'modern-compiler',
+        loadPaths: scssLoadPaths(src),
+      },
+    },
+  },
+  build: {
+    outDir: 'dist',
+    emptyOutDir: true,
+    lib: {
+      entry: entries,
+      formats: ['es'],
+    },
+    rollupOptions: {
+      external: (id) => id === 'lit' || id.startsWith('lit/'),
+      output: {
+        preserveModules: true,
+        preserveModulesRoot: 'src',
+        entryFileNames: '[name].js',
+      },
+    },
+    sourcemap: true,
+    target: 'es2020',
+  },
+  server: {
+    open: false,
+  },
+});

package/vite.docs.config.ts

@@ -0,0 +1,33 @@
+import { resolve } from 'node:path';
+import { defineConfig } from 'vite';
+import { litHtmlPlugin, scssLoadPaths } from './vite.lit-html-plugin.js';
+
+const src = resolve(__dirname, 'src');
+
+export default defineConfig({
+  plugins: [litHtmlPlugin()],
+  css: {
+    preprocessorOptions: {
+      scss: {
+        api: 'modern-compiler',
+        loadPaths: scssLoadPaths(src),
+      },
+    },
+  },
+  build: {
+    outDir: 'docs',
+    emptyOutDir: false,
+    lib: {
+      entry: resolve(__dirname, 'docs-src/bundle.ts'),
+      formats: ['es'],
+      fileName: () => 'components.bundle.js',
+    },
+    rollupOptions: {
+      output: {
+        inlineDynamicImports: true,
+      },
+    },
+    sourcemap: true,
+    target: 'es2020',
+  },
+});

package/vite.lit-html-plugin.ts

@@ -0,0 +1,43 @@
+import { readFileSync } from 'node:fs';
+import { dirname, resolve } from 'node:path';
+import type { Plugin } from 'vite';
+
+const LIT_HTML_QUERY = '?lit-html';
+
+/** Lit ?bool / .prop / @event bindings must use =${expr}, not ="${expr}". */
+function fixLitBindings(source: string): string {
+  return source.replace(/([?.@][\w-]+)="\$\{([^"]+)\}"/g, '$1=${$2}');
+}
+
+export function litHtmlPlugin(): Plugin {
+  return {
+    name: 'oddsmith-lit-html',
+    enforce: 'pre',
+    resolveId(source, importer) {
+      if (!source.endsWith('.html' + LIT_HTML_QUERY) || !importer) return null;
+      const htmlFile = source.slice(0, -LIT_HTML_QUERY.length);
+      const filePath = resolve(dirname(importer), htmlFile);
+      return filePath + LIT_HTML_QUERY;
+    },
+    load(id) {
+      if (!id.endsWith('.html' + LIT_HTML_QUERY)) return;
+
+      const filePath = id.slice(0, -LIT_HTML_QUERY.length);
+      const body = fixLitBindings(readFileSync(filePath, 'utf8'))
+        .replace(/\\/g, '\\\\')
+        .replace(/`/g, '\\`');
+
+      return `
+import { html } from 'lit';
+
+export default function render(host) {
+  return html\`${body}\`;
+}
+`;
+    },
+  };
+}
+
+export const scssLoadPaths = (root: string) => [
+  resolve(root, 'components/sf-leaderboard/theme/scss'),
+];