@dalcvil/steam-green-react 0.1.0

package/LICENSE

@@ -0,0 +1,25 @@
+MIT License
+
+Copyright (c) 2026 Dalcvi
+
+This project contains styles derived from VGUI.css
+(https://github.com/AlpyneDreams/vgui.css), Copyright (c) 2021 Jeffrey Ellison,
+licensed under the MIT License.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,158 @@
+# @dalcvil/steam-green-react
+
+React components for the classic Green Steam (VGUI) look, ported from
+[VGUI.css](https://github.com/AlpyneDreams/vgui.css).
+
+- **Tree-shakable ESM build** — the output mirrors `src/`, so importing one
+  component never pulls in the others.
+- **Per-component CSS** — each component imports its own stylesheet; the global
+  theme is opt-in.
+- **Storybook** — every component ships with stories, published to GitHub Pages.
+
+## Installation
+
+```bash
+pnpm add @dalcvil/steam-green-react
+# or: npm install @dalcvil/steam-green-react
+```
+
+`react` and `react-dom` (`^18` or `^19`) are peer dependencies.
+
+## Usage
+
+```tsx
+import { GreenButton } from '@dalcvil/steam-green-react'
+
+// Optional: the global Green Steam theme (background, typography, links…)
+import '@dalcvil/steam-green-react/styles/theme.css'
+
+export function App() {
+  return <GreenButton onClick={() => alert('Hello')}>Click me</GreenButton>
+}
+```
+
+Component styles come along with the component — there is nothing else to
+import.
+
+> The package is **ESM-only**. CJS output cannot be tree-shaken and would
+> duplicate the colocated CSS, so it is intentionally not published. Use a
+> bundler (Vite, webpack, Rollup, esbuild) or Node's native ESM.
+
+## Components
+
+| Component | Description |
+| --- | --- |
+| `GreenButton` | Classic VGUI push button. Supports `fullWidth` on top of all `<button>` props. |
+
+More components are on the way; each one will get its own CSS file plus a
+Storybook story.
+
+## Development
+
+Node 24 is required. `.nvmrc` pins the exact version and is also what the
+workflows read via `node-version-file`, so the local toolchain and CI cannot
+drift apart. pnpm 12 is pinned through the `packageManager` field.
+
+```bash
+pnpm install
+pnpm storybook          # Storybook on http://localhost:6006
+pnpm run build          # library -> dist/
+pnpm run build-storybook  # static Storybook -> storybook-static/
+pnpm run typecheck      # tsc --noEmit
+pnpm changeset          # describe a change for the next release
+```
+
+### How the build works
+
+`pnpm run build` runs two steps:
+
+1. **`vite build`** bundles the components in library mode. Stylesheets are
+   declared `external` so that `import './X.css'` survives in the emitted
+   JavaScript, then copied into `dist/` beside their component — Vite's library
+   mode would otherwise extract them into anonymous hashed assets and drop the
+   import. A bare `.css.d.ts` is written next to each one, because TypeScript
+   keeps the stylesheet import in the declarations it emits and a consumer
+   compiling with `skipLibCheck: false` needs that import to resolve.
+2. **`tsc -p tsconfig.build.json`** emits the `.d.ts` declarations using
+   TypeScript's own output — no third-party declaration bundler. The base
+   `tsconfig.json` stays `noEmit` for typechecking; `tsconfig.build.json`
+   extends it with `emitDeclarationOnly` and `outDir: dist`, and excludes
+   stories.
+
+### Project layout
+
+```
+src/
+  index.ts                    # public entry point
+  styles/theme.css            # global theme (opt-in)
+  components/
+    GreenButton/
+      GreenButton.tsx
+      GreenButton.css         # colocated styles, imported by the component
+      GreenButton.stories.tsx
+      index.ts
+```
+
+To add a component: create a folder under `src/components/`, export it from its
+own `index.ts` **and** from `src/index.ts`, and add a story next to it.
+
+## CI/CD
+
+| Workflow | Trigger | What it does |
+| --- | --- | --- |
+| `.github/workflows/ci.yml` | push to `main`, PRs | Typechecks, builds the library and Storybook, uploads `dist` as an artifact. |
+| `.github/workflows/pages.yml` | push to `main` | Builds Storybook and deploys it to GitHub Pages. |
+| `.github/workflows/release.yml` | push to `main` | Opens/updates the *“chore: version packages”* PR, then publishes to npm **with provenance** and creates the GitHub release once that PR is merged. |
+
+### Releasing
+
+Releases are managed by [Changesets](https://changesets.dev) — the version in
+`package.json` is only ever changed by CI.
+
+1. Add a changeset to your PR describing the change and the bump it needs:
+
+   ```bash
+   pnpm changeset
+   ```
+
+   This writes a Markdown file into `.changeset/`; commit it with your code.
+2. When that PR lands on `main`, the release workflow opens (or updates) the
+   **“chore: version packages”** pull request, which applies the bumps,
+   regenerates `CHANGELOG.md` and deletes the consumed changeset files.
+3. Merge that pull request. The next release run finds no pending changesets, so
+   it publishes to npm, pushes the `@dalcvil/steam-green-react@<version>` tag and
+   creates a GitHub release.
+
+Nothing is published while no changeset exists, so `main` can sit unreleased
+indefinitely — with one exception: `@dalcvil/steam-green-react` is not on the
+registry yet, so the first release run publishes the current `0.1.0` directly.
+
+### First-time setup
+
+1. **GitHub Pages** — set **Settings → Pages → Source** to **GitHub Actions**.
+   This cannot be automated: `GITHUB_TOKEN` is denied the Pages-creation API
+   (*Resource not accessible by integration*), and the *Deploy from a branch*
+   default runs a Jekyll build that serves the README instead. Once the source
+   is set, the Pages workflow publishes Storybook to
+   `https://<owner>.github.io/<repo>/`.
+2. **npm publishing** — create an npm **Automation** token for the `@dalcvil`
+   scope and store it as the repository secret `NPM_TOKEN`
+   (**Settings → Secrets and variables → Actions**). The release workflow
+   exports it as `NODE_AUTH_TOKEN`, which `actions/setup-node` picks up.
+3. **Allow the version PR** — enable **Settings → Actions → General →
+   *Allow GitHub Actions to create and approve pull requests***, otherwise the
+   workflow cannot open the “chore: version packages” pull request.
+
+> **Note:** commits and pull requests created with the default `GITHUB_TOKEN`
+> do not trigger other workflows, so the “chore: version packages” PR shows no
+> CI checks. If CI is a required status check on `main`, pass a personal access
+> token to the action's `github-token` input so that PR triggers CI.
+
+## Credits
+
+Styles are derived from [VGUI.css](https://github.com/AlpyneDreams/vgui.css) by
+Jeffrey Ellison (MIT). See [LICENSE](./LICENSE).
+
+## License
+
+MIT © Dalcvi

package/dist/components/GreenButton/GreenButton.css

@@ -0,0 +1,47 @@
+/*
+ * Green Steam button.
+ *
+ * The upstream VGUI.css targets the bare `button` element. As a component we
+ * scope the same declarations to `.greensteam-button` so the component can be
+ * dropped into any page without restyling every button on it.
+ */
+
+.greensteam-button {
+  color: white;
+  background-color: #4c5844;
+  height: 25px;
+  min-width: 75px;
+  padding: 0 8px;
+  cursor: pointer;
+  border-top: solid 1px #899281;
+  border-bottom: solid 1px #292d23;
+  border-left: solid 1px #899281;
+  border-right: solid 1px #292d23;
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: lighter;
+  text-align: left;
+  -webkit-font-smoothing: none;
+}
+
+.greensteam-button:active {
+  border-top: solid 1px #292d23;
+  border-bottom: solid 1px #899281;
+  border-left: solid 1px #292d23;
+  border-right: solid 1px #899281;
+}
+
+.greensteam-button:focus-visible {
+  outline: 1px dashed #292d23;
+  outline-offset: -4px;
+}
+
+.greensteam-button:disabled {
+  color: #8b9481;
+  cursor: default;
+}
+
+.greensteam-button--full-width {
+  display: block;
+  width: 100%;
+}

package/dist/components/GreenButton/GreenButton.css.d.ts

@@ -0,0 +1 @@
+export {}

package/dist/components/GreenButton/GreenButton.d.ts

@@ -0,0 +1,8 @@
+import type { ButtonHTMLAttributes } from 'react';
+import './GreenButton.css';
+export interface GreenButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Stretch the button across the full width of its container. */
+    fullWidth?: boolean;
+}
+export declare const GreenButton: import("react").ForwardRefExoticComponent<GreenButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=GreenButton.d.ts.map

package/dist/components/GreenButton/GreenButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GreenButton.d.ts","sourceRoot":"","sources":["../../../src/components/GreenButton/GreenButton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAA;AAEjD,OAAO,mBAAmB,CAAA;AAE1B,MAAM,WAAW,gBAAiB,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAC/E,iEAAiE;IACjE,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AAED,eAAO,MAAM,WAAW,gHAStB,CAAA"}

package/dist/components/GreenButton/GreenButton.js

@@ -0,0 +1,20 @@
+import { forwardRef } from "react";
+import "./GreenButton.css";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/GreenButton/GreenButton.tsx
+var GreenButton = forwardRef(function GreenButton({ className, type = "button", fullWidth = false, ...rest }, ref) {
+	const classes = ["greensteam-button"];
+	if (fullWidth) classes.push("greensteam-button--full-width");
+	if (className) classes.push(className);
+	return /* @__PURE__ */ jsx("button", {
+		ref,
+		type,
+		className: classes.join(" "),
+		...rest
+	});
+});
+GreenButton.displayName = "GreenButton";
+//#endregion
+export { GreenButton };
+
+//# sourceMappingURL=GreenButton.js.map

package/dist/components/GreenButton/GreenButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GreenButton.js","names":[],"sources":["../../../src/components/GreenButton/GreenButton.tsx"],"sourcesContent":["import { forwardRef } from 'react'\r\nimport type { ButtonHTMLAttributes } from 'react'\r\n\r\nimport './GreenButton.css'\r\n\r\nexport interface GreenButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\r\n  /** Stretch the button across the full width of its container. */\r\n  fullWidth?: boolean\r\n}\r\n\r\nexport const GreenButton = forwardRef<HTMLButtonElement, GreenButtonProps>(function GreenButton(\r\n  { className, type = 'button', fullWidth = false, ...rest },\r\n  ref,\r\n) {\r\n  const classes = ['greensteam-button']\r\n  if (fullWidth) classes.push('greensteam-button--full-width')\r\n  if (className) classes.push(className)\r\n\r\n  return <button ref={ref} type={type} className={classes.join(' ')} {...rest} />\r\n})\r\n\r\nGreenButton.displayName = 'GreenButton'\r\n"],"mappings":";;;;AAUA,IAAa,cAAc,WAAgD,SAAS,YAClF,EAAE,WAAW,OAAO,UAAU,YAAY,OAAO,GAAG,QACpD,KACA;CACA,MAAM,UAAU,CAAC,mBAAmB;CACpC,IAAI,WAAW,QAAQ,KAAK,+BAA+B;CAC3D,IAAI,WAAW,QAAQ,KAAK,SAAS;CAErC,OAAO,oBAAC,UAAD;EAAa;EAAW;EAAM,WAAW,QAAQ,KAAK,GAAG;EAAG,GAAI;CAAO,CAAA;AAChF,CAAC;AAED,YAAY,cAAc"}

package/dist/components/GreenButton/index.d.ts

@@ -0,0 +1,3 @@
+export { GreenButton } from './GreenButton';
+export type { GreenButtonProps } from './GreenButton';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/GreenButton/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/GreenButton/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAC3C,YAAY,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAA"}

package/dist/index.d.ts

@@ -0,0 +1,17 @@
+/**
+ * @dalcvil/steam-green-react
+ *
+ * Public entry point. Every component is re-exported from here, but the build
+ * preserves the module graph so importing one component never pulls in the
+ * rest:
+ *
+ * ```tsx
+ * import { GreenButton } from '@dalcvil/steam-green-react'
+ * ```
+ *
+ * The global theme (`@dalcvil/steam-green-react/styles/theme.css`) is opt-in;
+ * per-component styles ship with their component.
+ */
+export { GreenButton } from './components/GreenButton';
+export type { GreenButtonProps } from './components/GreenButton';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AACH,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,YAAY,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAA"}

package/dist/index.js

@@ -0,0 +1,2 @@
+import { GreenButton } from "./components/GreenButton/GreenButton.js";
+export { GreenButton };

package/dist/styles/theme.css

@@ -0,0 +1,122 @@
+/*
+ * Global Green Steam (VGUI) theme.
+ *
+ * Only document-level rules live here — the element defaults and shared layout
+ * helpers that every component inherits. Anything that belongs to a specific
+ * component is colocated with that component instead (see
+ * `components/GreenButton/GreenButton.css`).
+ *
+ * Derived from VGUI.css <https://github.com/AlpyneDreams/vgui.css> (MIT).
+ */
+
+body {
+  background-color: #3e4637;
+  font-family: "Trebuchet MS", "Verdana", sans-serif;
+  color: #d8ded3;
+  font-size: 14px;
+  image-rendering: pixelated;
+  margin: 20px 20px;
+}
+
+::selection {
+  background-color: #96892d;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: 3px 12px 12px;
+}
+
+h1,
+h2 {
+  color: #c4b550;
+}
+
+h1 {
+  font-size: 18px;
+}
+
+h2 {
+  font-size: 16px;
+}
+
+p {
+  text-align: left;
+  margin: 12px 12px 12px;
+  color: #d8ded3;
+}
+
+a {
+  text-decoration: none;
+  color: #aaaaaa;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+code {
+  background: #3e4637;
+  padding: 0 3px;
+  font-family: monospace;
+}
+
+hr {
+  margin: 20px 0;
+  border: none;
+  height: 1px;
+  background-color: #3e4637;
+}
+
+img {
+  object-fit: contain;
+  margin: 2px;
+  border: solid 2px #7b8484;
+}
+
+fieldset {
+  border-top: solid 1px #292d23;
+  border-bottom: solid 1px #899281;
+  border-left: solid 1px #292d23;
+  border-right: solid 1px #899281;
+}
+
+legend {
+  text-transform: uppercase;
+  letter-spacing: 2px;
+  font-size: 12px;
+  color: white;
+  font-weight: bold;
+}
+
+/* Shared layout helpers */
+
+.flex-row {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+}
+
+.flex-column {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.border {
+  border-top: solid 1px #899281;
+  border-bottom: solid 1px #292d23;
+  border-left: solid 1px #899281;
+  border-right: solid 1px #292d23;
+}
+
+.border-inverted {
+  border-top: solid 1px #292d23;
+  border-bottom: solid 1px #899281;
+  border-left: solid 1px #292d23;
+  border-right: solid 1px #899281;
+}

package/dist/styles/theme.css.d.ts

@@ -0,0 +1 @@
+export {}

package/package.json

@@ -0,0 +1,74 @@
+{
+  "name": "@dalcvil/steam-green-react",
+  "version": "0.1.0",
+  "description": "Tree-shakable React components for the classic Green Steam (VGUI) theme.",
+  "keywords": [
+    "react",
+    "components",
+    "ui",
+    "steam",
+    "vgui",
+    "greensteam",
+    "retro"
+  ],
+  "license": "MIT",
+  "author": "Dalcvi",
+  "homepage": "https://github.com/Dalcvi/steam-style-react",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Dalcvi/steam-style-react.git"
+  },
+  "bugs": {
+    "url": "https://github.com/Dalcvi/steam-style-react/issues"
+  },
+  "type": "module",
+  "packageManager": "pnpm@12.4.1",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./styles/theme.css": "./dist/styles/theme.css",
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "build": "vite build && tsc -p tsconfig.build.json",
+    "typecheck": "tsc --noEmit -p tsconfig.json && tsc --noEmit -p tsconfig.node.json",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "changeset": "changeset",
+    "version-packages": "changeset version",
+    "release": "changeset publish",
+    "prepublishOnly": "pnpm run typecheck && pnpm run build"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@changesets/changelog-github": "^1.0.1",
+    "@changesets/cli": "^3.0.2",
+    "@storybook/addon-a11y": "^10.6.0",
+    "@storybook/addon-docs": "^10.6.0",
+    "@storybook/react-vite": "^10.6.0",
+    "@types/node": "^24.10.0",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "@vitejs/plugin-react": "^6.1.1",
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0",
+    "storybook": "^10.6.0",
+    "typescript": "^7.0.2",
+    "vite": "^8.3.0"
+  }
+}