@oddsmith/ui 0.0.0 → 1.0.0

package/styles/global.css

@@ -1,125 +0,0 @@
-@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

@@ -1,54 +0,0 @@
-- 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

@@ -1,31 +0,0 @@
-{
-  "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

@@ -1,56 +0,0 @@
-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

@@ -1,33 +0,0 @@
-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

@@ -1,43 +0,0 @@
-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'),
-];