https://github.com/samhuk/ts-npm-ui-package-template
Delightful Typescript NPM UI Package Template
https://github.com/samhuk/ts-npm-ui-package-template
esbuild javascript react scss template typescript ui-component
Last synced: 4 months ago
JSON representation
Delightful Typescript NPM UI Package Template
- Host: GitHub
- URL: https://github.com/samhuk/ts-npm-ui-package-template
- Owner: samhuk
- License: mit
- Created: 2022-05-02T16:44:30.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2022-10-24T23:55:25.000Z (almost 4 years ago)
- Last Synced: 2026-03-30T17:48:53.395Z (4 months ago)
- Topics: esbuild, javascript, react, scss, template, typescript, ui-component
- Language: TypeScript
- Homepage:
- Size: 72.3 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: contributing/development.md
- License: LICENSE
Awesome Lists containing this project
README
# ts-npm-ui-package-template
This is a template repository for a Typescript NPM package for one or more UI components. It contains Typescript, ESLint, Jest and VSCode integrations with an ultra-fast hot-reloading demo site to showcase your delightful creations.
If you instead desire a full web application template, see [web-app-template](https://github.com/samhuk/web-app-template). If you instead desire a non-UI Typescript NPM package template, see [ts-npm-package-template](https://github.com/samhuk/ts-npm-package-template).
## Usage
1. Click the "**Use Template**" button on Github to create your own repository from this template
2. Locally clone your new remote Github repository
3. From the root directory of your new local clone, run `node setup.js`, entering in some details.
4. After it completes, you can remove `setup.js`.
5. Run `npm start` and navigate to http://localhost:8080
6. For information on how to develop on your new codebase, see [./contributing/development.md](./contributing/development.md)
7. Have fun!
This template is approximately based off of a mixture of [ts-npm-package-template](https://github.com/samhuk/ts-npm-package-template) and [web-app-template](https://github.com/samhuk/web-app-template). Therefore, feel free to take a look at those to see how this template can be expanded upon.
If you found this delightful, feel free to [buy me a coffee](https://www.buymeacoffee.com/samhuk) ✨
---
{{package-name}}
{{package-slogan}}
> Badges like license type, current build status, and npm package version info can go here. Uncomment the HTML below within this README to show them.
## Overview
> Provide a quick overview of what your package does.
> An image of what the UI component looks like goes a long way. An image of the example component has been included:
> If it is a large package, put a "Getting Started" wiki page link here.
## Usage Overview
> Briefly show what using your package looks like. Try to omit as much configuration as possible as your package wiki can detail that.
## Importing Styles
There are two main ways the styles of the component can be imported into your package. One can either:
1. `import` the css bundle file in your Typescript or Javascript (this is supported by all main bundlers like webpack and esbuild):
```typescript
// Import the css bundle file
import 'node_modules/{{npm-package-name}}/dist/styles.css'
```
2. `@import` the css bundle file in your SCSS:
```scss
// Import the css bundle file
@import 'node_modules/{{npm-package-name}}/dist/styles.css';
```
## Examples
> Mention where any usage examples are, either within the repository or externally hosted.
## Development
See [./contributing/development.md](./contributing/development.md)
---
> If desired, briefly mention any donation links here. Here's Buy Me a Coffee as an example:
If you found this package delightful, feel free to buy me a coffee ✨
