@tetrascience-npm/tetrascience-react-ui 0.2.0 → 0.3.0

package/README.md

@@ -12,17 +12,17 @@ This library provides:
 ## Installation
 
 ```bash
-yarn add tetrascience-react-ui
+yarn add @tetrascience-npm/tetrascience-react-ui
 ```
 
 ## Quick Start
 
 ```tsx
 // 1. Import the CSS (required)
-import 'tetrascience-react-ui/index.css';
+import '@tetrascience-npm/tetrascience-react-ui/index.css';
 
 // 2. Import components
-import { Button, Card, BarGraph } from 'tetrascience-react-ui';
+import { Button, Card, BarGraph } from '@tetrascience-npm/tetrascience-react-ui';
 
 function App() {
   return (
@@ -53,7 +53,7 @@ AppLayout, AreaGraph, BarGraph, Boxplot, Chromatogram, DotPlot, Heatmap, Histogr
 Customise colours, border radius, and spacing:
 
 ```tsx
-import { ThemeProvider } from 'tetrascience-react-ui';
+import { ThemeProvider } from '@tetrascience-npm/tetrascience-react-ui';
 
 const customTheme = {
   colors: {
@@ -72,13 +72,44 @@ const customTheme = {
 
 See [THEMING.md](./THEMING.md) for the complete theming guide.
 
+## Server Utilities
+
+Beyond UI components, this library includes server-side helper functions for building TetraScience applications. These are available via the `/server` subpath to avoid pulling Node.js dependencies into browser bundles.
+
+### Authentication (`server/auth`)
+
+**JWT Token Manager** - Manages JWT token retrieval for data apps:
+
+```typescript
+import { jwtManager } from '@tetrascience-npm/tetrascience-react-ui/server';
+
+// In Express middleware
+app.use(async (req, res, next) => {
+  const token = await jwtManager.getTokenFromExpressRequest(req);
+  req.tdpAuth = { token, orgSlug: process.env.ORG_SLUG };
+  next();
+});
+
+// Or with raw cookies
+const token = await jwtManager.getUserToken(req.cookies);
+```
+
+**Environment Variables:**
+
+- `ORG_SLUG` - Organization slug (required)
+- `CONNECTOR_ID` - Connector ID for ts-token-ref flow
+- `TDP_ENDPOINT` - API base URL
+- `TS_AUTH_TOKEN` - Service account token (fallback for local dev)
+
+> **Note:** The singleton `jwtManager` reads environment variables when the module is imported. Ensure these are set before importing the module.
+
 ## TypeScript Support
 
 Full TypeScript support with exported types:
 
 ```tsx
-import { Button } from 'tetrascience-react-ui';
-import type { ButtonProps, BarGraphProps, BarDataSeries } from 'tetrascience-react-ui';
+import { Button } from '@tetrascience-npm/tetrascience-react-ui';
+import type { ButtonProps, BarGraphProps, BarDataSeries } from '@tetrascience-npm/tetrascience-react-ui';
 ```
 
 ## Examples