@drawbridge/components 0.0.78 → 0.1.0

package/README.md

@@ -1 +1,23 @@
-The components for Drawbridge
+# @drawbridge/components
+
+The components for Drawbridge. Three folders: `shared/` renders on both the dashboard and the bridge pages, `dashboard/` and `bridge/` on one. Variants and tokens live in `components/styles.css`, which both apps import; a call site adds layout classes only, never a colour.
+
+## Work on a component
+
+    npm run storybook        # every component, every state, at http://localhost:6006
+    npm run test-storybook   # renders every story in Chromium; fails on an error
+    npm test                 # exports resolve, every component has a story, unit tests
+
+A component without a `.stories.js` beside it fails `npm test`. One story per visible state.
+
+## See it in an app without publishing
+
+    npm run dev                                   # here: rebuilds dist on change
+    cd ../drawbridge-app-web && npm link ../drawbridge-components
+    npm run dev                                   # the app resolves the package from this checkout
+
+Undo with `npm unlink @drawbridge/components && npm install` in the app. Never publish from a feature branch.
+
+## Add or move a component
+
+Put the file in its folder, write its story and its `types/<folder>/<name>.d.ts`, then `npm run exports` to regenerate the exports map. Never hand-edit `exports`.

package/components/styles.css

@@ -0,0 +1,228 @@
+@import "tailwindcss";
+@source "./";
+
+@theme {
+	--color-black: #0D1315;
+	--color-gray: #EEEEEE;
+	--color-gray-dark: #3A3A3A;
+	--color-gray-light: #F7F7F7;
+	--color-green: #DCF5AF;
+	--color-green-dark: #BAEC5F;
+	--color-green-light: #F8FDEF;
+	--color-purple: #BAABE4;
+	--color-purple-dark: #7557C9;
+	--color-purple-light: #F1EEFA;
+	--color-red: #FFA7A1;
+	--color-red-dark: #FF4E43;
+	--color-red-light: #FFEDEC;
+	--color-yellow: #FCEFA8;
+	--color-yellow-dark: #F9DF51;
+	--color-yellow-light: #FDF7D3;
+}
+
+/* Both apps set these today; the dashboard also gives h1 leading-tight in its own globals. */
+@layer base {
+	h1 {
+		@apply text-2xl;
+	}
+
+	h2 {
+		@apply text-xl;
+	}
+
+	h3 {
+		@apply text-lg;
+	}
+
+	svg {
+		color: currentColor;
+	}
+}
+
+@layer components {
+	[disabled], .disabled {
+		@apply opacity-50 cursor-default pointer-events-none;
+	}
+
+	/* Fade once: inside a faded ancestor (a disabled fieldset around its loading
+	   submit) a disabled element would otherwise drop to a quarter. */
+	:is([disabled], .disabled) :is([disabled], .disabled) {
+		@apply opacity-100;
+	}
+
+	[readonly] {
+		@apply opacity-50;
+	}
+
+	.input-group {
+		@apply w-full space-y-2 text-left;
+	}
+
+	.input {
+		@apply w-full text-inherit border border-inherit rounded py-2 px-3 bg-white focus:outline-hidden focus:ring-0 focus:border-inherit;
+	}
+
+	input[ type='number' ]::-webkit-inner-spin-button,
+	input[ type='number' ]::-webkit-outer-spin-button {
+		margin: 0;
+		appearance: none;
+	}
+
+	input[type='number'] {
+		-moz-appearance: textfield;
+	}
+
+	.badge {
+		@apply inline-flex items-center justify-center px-3 rounded-full text-xs border border-gray whitespace-nowrap min-h-6 min-w-7 space-x-1.5;
+	}
+
+	.badge.error {
+		@apply bg-red border-red-dark;
+	}
+
+	.badge.primary {
+		@apply bg-white;
+	}
+
+	.badge.secondary {
+		@apply bg-gray-light border-gray-light;
+	}
+
+	.badge.success {
+		@apply bg-green-dark border-green-dark;
+	}
+
+	.badge.warning {
+		@apply bg-yellow border-yellow-dark;
+	}
+
+	.badge.ai {
+		@apply bg-purple-dark border-purple-dark text-white;
+	}
+
+	.badge.small {
+		@apply px-2 min-h-4 min-w-4;
+	}
+
+	/* Label and icon sit centred together; a button never shrinks below its content in a row. */
+	.button {
+		@apply relative flex items-center justify-center gap-2 w-full shrink-0 text-center duration-300;
+	}
+
+	.button.primary {
+		@apply bg-black text-white py-3 px-4 rounded border border-black hover:bg-gray-dark;
+	}
+
+	.button.secondary {
+		@apply bg-white text-black py-3 px-4 rounded border border-gray hover:text-gray-dark;
+	}
+
+	.button.success {
+		@apply bg-green-dark text-black py-3 px-4 rounded border border-green-dark hover:bg-green;
+	}
+
+	.button.error {
+		@apply bg-red-light text-black py-3 px-4 rounded border border-red-dark hover:bg-red;
+	}
+
+
+	.button.ai {
+		@apply bg-purple-dark text-white py-3 px-4 rounded border border-purple-dark hover:bg-purple;
+	}
+
+	/* The bridge pages' button: Button draws the brand's colours and radius inline over it
+	   (buttonStyle), so with no brand it is the black-bordered button share has always drawn.
+	   Its font size is the page's (a caller wanting a fixed one sets it on a wrapper). */
+	.button.brand {
+		@apply py-3 px-4 rounded border border-black;
+	}
+
+	.button.small {
+		@apply py-2 px-3 text-sm min-h-[42px];
+	}
+
+	/* Icon-only: a square, the variant's vertical padding on every side. */
+	.button.icon {
+		@apply p-3;
+	}
+
+	.button.small.icon {
+		@apply p-2 min-w-[42px];
+	}
+
+	/* A table row's actions keep the dashboard's tighter buttons: a 16px icon 6px
+	   from its label, and an icon-only button 40px wide, as they were before the
+	   package. Header and form buttons keep Button's 20px icon and 8px gap. */
+	.table-actions .button {
+		@apply gap-1.5;
+	}
+
+	/* Important: Button sizes its icon with w-5 h-5, a utility, which outranks this layer. */
+	.table-actions .button svg {
+		@apply w-4! h-4!;
+	}
+
+	.table-actions .button.small.icon {
+		@apply px-3 min-w-0;
+	}
+
+	/* A link draws no box: it lays out as its content, in the surrounding colour. */
+	.button.link,
+	.button.link.icon {
+		@apply p-0 min-h-0 min-w-0 text-inherit;
+	}
+
+	/* A bare icon still gets a comfortable hit area, past its edges so the layout doesn't move. */
+	.button.link.icon::after {
+		content: '';
+		@apply absolute -inset-2;
+	}
+
+	/* A text-only link reads as a link. */
+	.button.link [data-label]:only-child {
+		@apply underline;
+	}
+
+	.hide-scrollbar {
+		-ms-overflow-style: none;
+		scrollbar-width: none;
+	}
+
+	.hide-scrollbar::-webkit-scrollbar {
+		display: none;
+	}
+
+	.break-word {
+		word-break: break-word;
+	}
+
+	.ai-gradient {
+		background-size: 200%;
+		background-image:
+			radial-gradient( circle at 50% 0%, hsla(256, 51%, 78%, 1) 0%, transparent 100% ),
+			radial-gradient( circle at 50% 0%, hsla(4, 100%, 82%, 1) 50%, transparent 100% ),
+			radial-gradient(circle at 50% 0%, hsla(81, 78%, 82%, 1) 100%, transparent 100% );
+		animation: animatedgradient 6s ease infinite alternate;
+	}
+
+	@keyframes animatedgradient {
+		0% {
+			background-position: 0% 50%;
+		}
+		50% {
+			background-position: 100% 100%;
+		}
+		100% {
+			background-position: 0% 50%;
+		}
+	}
+
+}
+
+/* react-day-picker's selected day (dashboard/input-date). Outside any layer:
+   the picker's own stylesheet is unlayered and would beat a layered rule. */
+.rdp-selected .rdp-day_button {
+	background-color: #0D1315;
+	color: white;
+	border: none;
+}