@togo-framework/ui 0.1.0 → 0.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/README.md +38 -7
  2. package/dist/index.d.ts +5 -0
  3. package/dist/index.js +2 -2
  4. package/dist/index.js.map +1 -1
  5. package/package.json +1 -1
  6. package/public/togo-storybook-logo.svg +13 -0
package/README.md CHANGED
@@ -1,25 +1,43 @@
1
- # @togo-framework/ui
1
+ <!-- togo-brand -->
2
+ <p align="center">
3
+ <img src=".github/assets/togo-mark.svg" width="96" alt="togo" />
4
+ </p>
5
+ <h1 align="center">@togo-framework/ui</h1>
6
+ <p align="center"><sub>part of the <a href="https://github.com/togo-framework">togo-framework</a> — the full-stack Go + React framework</sub></p>
2
7
 
3
- The togo **UI kit** — the prism-style admin + auth component library extracted from the
4
- Fort dashboard. Framework-agnostic (no Next.js / data-fetching coupling), **RTL-ready**,
5
- dark-first, and self-hosting the **Lusail** typeface.
8
+ The togo **design system** — a fully token-driven, runtime-themeable admin + auth component
9
+ library. Framework-agnostic (no Next.js / data-fetching coupling), **RTL-ready**, and carrying
10
+ the official **ToGO brand** (Gopher Cyan → Cobalt). Self-hosts the brand fonts (Sora / IBM Plex
11
+ Sans / JetBrains Mono) + **Lusail** for Arabic.
6
12
 
7
13
  ```bash
8
- npm i @togo-framework/ui lucide-react
14
+ npm install @togo-framework/ui lucide-react
9
15
  ```
10
16
 
11
17
  ```tsx
12
18
  import "@togo-framework/ui/styles.css";
13
- import { AdminShell, StatCard, DataTable, Button } from "@togo-framework/ui";
19
+ import { ThemeProvider, Button, StatCard, DataTable } from "@togo-framework/ui";
20
+
21
+ // ThemeProvider switches dark/light at runtime (data-theme on <html>, persisted).
22
+ // Pass `overrides` to re-brand per app with zero source edits.
23
+ export default () => (
24
+ <ThemeProvider theme="dark">
25
+ <Button>Ship it</Button>
26
+ </ThemeProvider>
27
+ );
14
28
  ```
15
29
 
16
30
  Then copy the package's `public/fonts` into your app's served root, and add the package
17
31
  to your Tailwind v4 content so its utility classes are generated:
18
32
 
19
33
  ```css
20
- /* app.css */ @import "tailwindcss"; @source "../node_modules/@togo-framework/ui/dist";
34
+ /* app.css */ @import "tailwindcss"; @import "@togo-framework/ui/styles.css"; @source "../node_modules/@togo-framework/ui/dist";
21
35
  ```
22
36
 
37
+ **SSR (no flash):** inline `themeInitScript` in `<head>` so the theme is set before paint —
38
+ `import { themeInitScript } from "@togo-framework/ui/theme"`. See the Storybook **Design System →
39
+ Theming** page for `overrides` + adding tenant themes.
40
+
23
41
  ## Components
24
42
 
25
43
  | Group | Components |
@@ -43,3 +61,16 @@ npm run build # emit dist/ (ESM + types + styles.css)
43
61
  ```
44
62
 
45
63
  MIT.
64
+
65
+
66
+ ---
67
+
68
+ ## 💎 Premium sponsors
69
+
70
+ togo is proudly sponsored by **ID8 Media** and **One Studio**.
71
+
72
+ <p align="center">
73
+ <a href="https://id8media.com"><img src=".github/assets/id8media.svg" height="44" alt="ID8 Media" /></a>
74
+ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
75
+ <a href="https://one-studio.co"><img src=".github/assets/one-studio.jpeg" height="44" alt="One Studio" /></a>
76
+ </p>
package/dist/index.d.ts CHANGED
@@ -1519,6 +1519,9 @@ interface PluginCatalogEntry {
1519
1519
  last_active_at: string | null;
1520
1520
  activity_count: number | null;
1521
1521
  activity_series: ActivityBucket[] | null;
1522
+ /** Optional override for the counter's label (e.g. "downloads", "stars").
1523
+ * When set, it replaces the plugin_type-derived default ("records"). */
1524
+ metric_label?: string | null;
1522
1525
  route: string | null;
1523
1526
  }
1524
1527
  interface SparklinePoint {
@@ -1852,6 +1855,8 @@ interface PluginActivitySummary {
1852
1855
  activity_series?: {
1853
1856
  n: number;
1854
1857
  }[];
1858
+ /** Optional override for the counter's label (e.g. "downloads"); replaces the default ("records"). */
1859
+ metric_label?: string | null;
1855
1860
  }
1856
1861
  interface PluginDetailLayoutProps {
1857
1862
  /** Ordered tab list. */
package/dist/index.js CHANGED
@@ -5815,7 +5815,7 @@ var PluginCard = ({
5815
5815
  const lastActiveISO = plugin.last_active_at ?? null;
5816
5816
  const state = activityState(lastActiveISO);
5817
5817
  const stateClasses = STATE_CLASSES[state];
5818
- const countLabelText = countLabel(rawTypeKey, isRTL);
5818
+ const countLabelText = plugin.metric_label || countLabel(rawTypeKey, isRTL);
5819
5819
  const seriesData = useMemo6(() => {
5820
5820
  const series = plugin.activity_series ?? [];
5821
5821
  if (series.length === 0) {
@@ -8935,7 +8935,7 @@ var PluginHero = ({ plugin, activity, isRTL }) => {
8935
8935
  ] }),
8936
8936
  /* @__PURE__ */ jsxs47("div", { className: "flex-none w-full lg:w-72 rounded-lg border border-border/70 bg-muted/20 overflow-hidden", children: [
8937
8937
  /* @__PURE__ */ jsxs47("div", { className: "px-4 pt-3 pb-1", children: [
8938
- /* @__PURE__ */ jsx53("div", { className: "text-[10px] uppercase tracking-wider text-muted-foreground", children: countLabel2(typeKey, isRTL) }),
8938
+ /* @__PURE__ */ jsx53("div", { className: "text-[10px] uppercase tracking-wider text-muted-foreground", children: activity?.metric_label || countLabel2(typeKey, isRTL) }),
8939
8939
  /* @__PURE__ */ jsx53("div", { className: "text-3xl font-semibold text-foreground leading-tight", title: String(activityCount), children: formatCount2(activityCount) })
8940
8940
  ] }),
8941
8941
  /* @__PURE__ */ jsx53("div", { className: "h-16 w-full", children: /* @__PURE__ */ jsx53(ResponsiveContainer2, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs47(AreaChart2, { data: seriesData, margin: { top: 4, right: 0, bottom: 0, left: 0 }, children: [