@suish/starter-ui 0.1.0

package/LICENSE.txt

@@ -0,0 +1,8 @@
+Copyright (c) 2026 Sui Shum. All rights reserved.
+
+This software and associated documentation files (the "Software") are
+proprietary and confidential. No part of the Software may be reproduced,
+distributed, or transmitted in any form or by any means without the
+prior written permission of the copyright holder.
+
+The Software is provided "as is", without warranty of any kind.

package/README.md

@@ -0,0 +1,332 @@
+<a id="readme-top"></a>
+
+<!-- PROJECT SHIELDS -->
+<!--
+*** I'm using markdown "reference style" links for readability.
+*** Reference links are enclosed in brackets [ ] instead of parentheses ( ).
+*** See the bottom of this document for the declaration of the reference variables
+*** for contributors-url, forks-url, etc. This is an optional, concise syntax you may use.
+*** https://www.markdownguide.org/basic-syntax/#reference-style-links
+-->
+
+[![Contributors][contributors-shield]][contributors-url]
+[![Forks][forks-shield]][forks-url]
+[![Stargazers][stars-shield]][stars-url]
+[![Issues][issues-shield]][issues-url]
+[![project_license][license-shield]][license-url]
+[![LinkedIn][linkedin-shield]][linkedin-url]
+
+<!-- PROJECT LOGO -->
+<br />
+<div align="center">
+  <a href="https://github.com/suishum/starter_ui">
+    <img src="images/online-library.webp" alt="Logo" width="80" height="80">
+  </a>
+
+<h3 align="center">Starter UI</h3>
+
+  <p align="center">
+    React + TypeScript component library with Vite, Vitest, generated type declarations, and an npm-ready package.
+    <br />
+    <a href="https://github.com/suishum/starter_ui"><strong>Explore the docs »</strong></a>
+    <br />
+    <br />
+    <a href="https://github.com/suishum/starter_ui">View Demo</a> 
+    &middot;
+    <a href="https://github.com/suishum/starter_ui/issues/new?labels=bug&template=bug-report---.md">Report Bug</a>
+    &middot;
+    <a href="https://github.com/suishum/starter_ui/issues/new?labels=enhancement&template=feature-request---.md">Request Feature</a>
+  </p>
+</div>
+
+<!-- TABLE OF CONTENTS -->
+<details>
+  <summary>Table of Contents</summary>
+  <ol>
+    <li>
+      <a href="#about-the-project">About The Project</a>
+      <ul>
+        <li><a href="#built-with">Built With</a></li>
+      </ul>
+    </li>
+    <li>
+      <a href="#getting-started">Getting Started</a>
+      <ul>
+        <li><a href="#prerequisites">Prerequisites</a></li>
+        <li><a href="#installation">Installation</a></li>
+      </ul>
+    </li>
+    <li><a href="#usage">Usage</a></li>
+    <li><a href="#roadmap">Roadmap</a></li>
+    <li><a href="#contributing">Contributing</a></li>
+    <li><a href="#license">License</a></li>
+    <li><a href="#contact">Contact</a></li>
+    <li><a href="#acknowledgments">Acknowledgments</a></li>
+  </ol>
+</details>
+
+<!-- ABOUT THE PROJECT -->
+
+## About The Project
+
+[![Product Name Screen Shot][product-screenshot]](https://example.com)
+
+Starter for a React + Typescript based component library, with Storybook + CI / CD configuration, bundled with Vite & tested with Vitest, npm ready.
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+### Built With
+
+- [![React][React.js]][React-url]
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+<!-- GETTING STARTED -->
+
+## Installation
+
+### Prerequisites
+
+- npm
+
+  ```sh
+  npm install npm@latest -g
+  ```
+
+### Prerequisites
+
+- Node.js 20+
+- React 18 or React 19
+- React DOM 18 or React DOM 19
+
+## Use the published package
+
+Install the latest published version from npm:
+
+```bash
+npm install @suish/ui-library
+```
+
+React is declared as a peer dependency, install it in the consuming application too:
+
+```bash
+npm install react react-dom
+```
+
+### Usage
+
+```tsx
+import { Button } from "@suish/ui-library";
+
+export function Example() {
+  return (
+    <Card>
+      <Button variant="primary">Continue</Button>
+    </Card>
+  );
+}
+```
+
+## Develop the library from GitHub
+
+Use this workflow when you want to add components, modify the library, run tests, or contribute changes.
+
+### Clone the repository
+
+```bash
+git clone [https://github.com/suishum/starter_ui.git](https://github.com/suishum/starter_ui.git)
+cd starter-ui
+```
+
+Change git remote url to avoid accidental pushes to base project
+
+```sh
+git remote set-url origin your_github_username/your_repo_name
+git remote -v # confirm the changes
+```
+
+### Install dependencies
+
+```bash
+npm install
+```
+
+### Start development
+
+```bash
+npm run dev
+```
+
+### Run tests
+
+```bash
+npm test
+```
+
+### Build the package
+
+```bash
+npm run build
+```
+
+### Add a component
+
+1. Create the component under `src/components`.
+2. Add its public export to the appropriate `index.ts` file.
+3. Add or update tests.
+4. Add a usage example or Storybook story.
+5. Run the checks:
+
+```bash
+# npm run lint
+npm test
+npm run build
+```
+
+### Inspect npm package before publishing
+
+1. Run
+
+```bash
+npm pack --dry-run
+```
+
+This shows what would be included without creating or publishing anything.
+
+2. (Optional) Create the local tarball
+
+```bash
+npm pack
+```
+
+## Install a GitHub version
+
+Use this only when you want to consume an unreleased version from a branch or commit.
+
+### Install from the default branch
+
+```bash
+npm install github:suishum/starter-ui
+```
+
+### Install from a branch
+
+```bash
+npm install github:suishum/starter-ui#develop
+```
+
+### Install from a specific commit
+
+```bash
+npm install github:suishum/starter-ui#COMMIT_SHA
+```
+
+GitHub-based installation is useful for previewing unreleased changes, but published npm versions are recommended for normal application dependencies because they are versioned and reproducible. [156][165]
+
+## Available scripts
+
+| Command                  | Description                                               |
+| ------------------------ | --------------------------------------------------------- | --------------------------------- | --- |
+| <!--                     | `npm run dev`                                             | Start the development environment | --> |
+| `npm test`               | Run test watcher?                                         |
+| `npm test:run`           | Run tests once                                            |
+| `npm run build`          | Build the distributable package                           |
+| `npm run prepublishOnly` | Run TypeScript checks and build the distributable package |
+| <!--                     | `npm run lint`                                            | Check source files                | --> |
+| `npm run typecheck`      | Run TypeScript checks                                     |
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+<!-- USAGE EXAMPLES -->
+
+## Usage
+
+Use this space to show useful examples of how a project can be used. Additional screenshots, code examples and demos work well in this space. You may also link to more resources.
+
+_For more examples, please refer to the [Documentation](https://example.com)_
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+<!-- ROADMAP -->
+
+## Roadmap
+
+- [ ] Feature 1
+- [ ] Feature 2
+- [ ] Feature 3
+  - [ ] Nested Feature
+
+See the [open issues](https://github.com/suishum/starter_ui/issues) for a full list of proposed features (and known issues).
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+<!-- CONTRIBUTING -->
+
+## Contributing
+
+Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.
+
+If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement".
+Don't forget to give the project a star! Thanks again!
+
+1. Fork the Project
+2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)
+3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)
+4. Push to the Branch (`git push origin feature/AmazingFeature`)
+5. Open a Pull Request
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+### Top contributors:
+
+<a href="https://github.com/suishum/starter_ui/graphs/contributors">
+  <img src="https://contrib.rocks/image?repo=suishum/starter_ui" alt="contrib.rocks image" />
+</a>
+
+<!-- LICENSE -->
+
+## License
+
+Distributed under CUSTOM LICENSE. See `LICENSE.txt` for more information.
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+<!-- CONTACT -->
+
+## Contact
+
+Project Link: [https://github.com/suishum/starter_ui](https://github.com/suishum/starter_ui)
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+<!-- ACKNOWLEDGMENTS -->
+
+## Acknowledgments
+
+- []()
+- []()
+- []()
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+<!-- MARKDOWN LINKS & IMAGES -->
+<!-- https://www.markdownguide.org/basic-syntax/#reference-style-links -->
+
+[contributors-shield]: https://img.shields.io/github/contributors/suishum/starter_ui.svg?style=for-the-badge
+[contributors-url]: https://github.com/suishum/starter_ui/graphs/contributors
+[forks-shield]: https://img.shields.io/github/forks/suishum/starter_ui.svg?style=for-the-badge
+[forks-url]: https://github.com/suishum/starter_ui/network/members
+[stars-shield]: https://img.shields.io/github/stars/suishum/starter_ui.svg?style=for-the-badge
+[stars-url]: https://github.com/suishum/starter_ui/stargazers
+[issues-shield]: https://img.shields.io/github/issues/suishum/starter_ui.svg?style=for-the-badge
+[issues-url]: https://github.com/suishum/starter_ui/issues
+[license-shield]: https://img.shields.io/github/license/suishum/starter_ui.svg?style=for-the-badge
+[license-url]: https://github.com/suishum/starter_ui/blob/master/LICENSE.txt
+[linkedin-shield]: https://img.shields.io/badge/-LinkedIn-black.svg?style=for-the-badge&logo=linkedin&colorB=555
+[linkedin-url]: https://linkedin.com/in/suishum
+[product-screenshot]: images/online-library.webp
+
+<!-- Shields.io badges. You can a comprehensive list with many more badges at: https://github.com/inttter/md-badges -->
+
+[React.js]: https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react&logoColor=61DAFB
+[React-url]: https://reactjs.org/

package/dist/components/Button/Button.d.ts

@@ -0,0 +1,7 @@
+import { ButtonHTMLAttributes, ReactNode } from 'react';
+export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+    children: ReactNode;
+    variant?: "primary" | "secondary";
+};
+export declare function Button({ children, variant, className, ...props }: ButtonProps): import("react").JSX.Element;
+//# sourceMappingURL=Button.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC7D,OAAO,cAAc,CAAC;AAEtB,MAAM,MAAM,WAAW,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,GAAG;IAClE,QAAQ,EAAE,SAAS,CAAC;IACpB,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;CACnC,CAAC;AAEF,wBAAgB,MAAM,CAAC,EACrB,QAAQ,EACR,OAAmB,EACnB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,WAAW,+BAUb"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { Button } from './components/Button';
+export type { ButtonProps } from './components/Button';
+//# 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,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,YAAY,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC"}

package/dist/starter-ui.cjs.js

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require("react/jsx-runtime");function t({children:t,variant:n=`primary`,className:r,...i}){let a=[`acme-button`,`acme-button--${n}`,r].filter(Boolean).join(` `);return(0,e.jsx)(`button`,{className:a,...i,children:t})}exports.Button=t;

package/dist/starter-ui.css

@@ -0,0 +1,2 @@
+.acme-button{font:inherit;cursor:pointer;border:0;border-radius:.375rem;padding:.625rem 1rem}.acme-button--primary{color:#fff;background:#111827}.acme-button--secondary{color:#111827;background:#e5e7eb}
+/*$vite$:1*/

package/dist/starter-ui.es.js

@@ -0,0 +1,16 @@
+import { jsx as e } from "react/jsx-runtime";
+//#region src/components/Button/Button.tsx
+function t({ children: t, variant: n = "primary", className: r, ...i }) {
+	let a = [
+		"acme-button",
+		`acme-button--${n}`,
+		r
+	].filter(Boolean).join(" ");
+	return /* @__PURE__ */ e("button", {
+		className: a,
+		...i,
+		children: t
+	});
+}
+//#endregion
+export { t as Button };

package/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "@suish/starter-ui",
+  "version": "0.1.0",
+  "description": "React component library starter",
+  "type": "module",
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist",
+    "LICENSE.txt",
+    "README.md"
+  ],
+  "main": "./dist/starter-ui.cjs.js",
+  "module": "./dist/starter-ui.es.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/starter-ui.es.js",
+      "require": "./dist/starter-ui.cjs.js"
+    }
+  },
+  "scripts": {
+    "test": "vitest",
+    "test:run": "vitest run",
+    "typecheck": "tsc --noEmit",
+    "build": "npm run typecheck && vite build",
+    "prepublishOnly": "npm run test:run && npm run build"
+  },
+  "keywords": [
+    "react",
+    "component-library",
+    "ui"
+  ],
+  "author": "",
+  "license": "SEE LICENSE IN LICENSE.txt",
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^7.0.1",
+    "@testing-library/react": "^16.3.3",
+    "@testing-library/user-event": "^14.6.7",
+    "@types/node": "^22.20.2",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "@vitejs/plugin-react": "^6.1.1",
+    "jsdom": "^29.1.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "typescript": "^6.0.3",
+    "vite": "^8.3.0",
+    "vite-plugin-dts": "^5.1.0",
+    "vitest": "^5.0.0"
+  }
+}