irradiant-svelte/README.md

Easily build sleek, minimalistic web apps with this easy to use and powerful svelte component library.

# Irradiant Interfaces - Svelte <!-- omit in toc -->
Easily build sleek, minimalistic web apps with this easy to use and powerful svelte component library.

> WIP: Early stage of development, documentation limited as of right now. Many things may drastically change without notice.

# Contents <!-- omit in toc -->
- [Features](#features)
- [Getting Started](#getting-started)
  - [Documentation](#documentation)
  - [Install](#install)
    - [Template](#template)
      - [Svelte](#svelte)
      - [Sapper](#sapper)
      - [Routify](#routify)
    - [CDN](#cdn)
    - [NPM](#npm)
    - [Yarn](#yarn)
    - [Svelte REPL](#svelte-repl)
  - [Usage](#usage)

# Features
> Note: not all features on this list are implemented yet. You can check the `src/components/` directory if you want to find out if the component you want exists.

- Build sleek, minimalistic websites and webapps using the Svelte framework/compiler (this is a [Svelte](https://svelte.dev/) component library)
- Everything works right out of the box
  - Unlike many other svelte component libraries, you don't need to insert an external css file since it fully utilises the single file component nature of svelte. [OPTIONAL FEATURE]
  - You can still disable certain component styles if you want to further customize these components by adding the `styled` prop.
- Dark and light theme support
- Built-in simple router [not implemented yet]
- TypeScript support
- Customizable

# Getting Started
## Documentation
Documentation is limited right now.

- COMPONENT API INDEX (autogenerated using [sveld](https://github.com/ibm/sveld)): [here](./COMPONENT_INDEX.md)
- Run [App.svelte](./test/App.svelte) on a local development server for demos.

## Install
### Template
You can use `degit` to clone a starting template. All these templates support TypeScript (disabled by default).

To enable typescript for [svelte](#svelte) and [sapper](#sapper) template, simply run 
```bash
node scripts/setupTypeScript.js
```
**BEFORE `npm install`**

To enable Typescript for Routify, run 
```bash
npx routify-ts convert [project-directory]
```
**BEFORE `npm install`**


#### Svelte
The default svelte project
```bash
npx degit "TXEV/irradiant-svelte#template-svelte" [projectname]
cd [projectname]
npm install
```

#### Sapper
> [Sapper](https://sapper.svelte.dev/) is an application framework powered by Svelte
```bash
npx degit "TXEV/irradiant-svelte#template-sapper" [projectname]
cd [projectname]
npm install
```

#### Routify
> [Routify](https://routify.dev/) offers a great developer experience to build the routes for your Svelte app.
```bash
npx degit "TXEV/irradiant-svelte#template-routify" [projectname]
cd [projectname]
npm install
```

### CDN
via **UNPKG**: [`unpkg.com/irradiant-svelte@:version/src/index.js`](https://unpkg.com/txev-components-svelte@latest/src/index.js)
- Replace `:version` with the version of this library you want. eg. `1.0.0`
  - See [package.json["version"]](./package.json) if you want to know what the latest stable version is

### NPM
```bash
npm i irradiant-svelte -D # -D will save to your devDependencies
```
### Yarn
```bash
yarn add irradiant-svelte --dev
```

### Svelte REPL
You can use this library in the [Svelte REPL](https://svelte.dev/repl/) as well by simply importing it when you need it.

```html
<!-- App.svelte -->
<script>
    // import whatever components you want/need
    import { Accordion, Badge, Button } from "irradiant-svelte";
</script>

<!-- Content here -->
```

## Usage
1. Install it (see [above](#install))
2. When you want to use it, import the components you want to use
```html
<!-- App.svelte (or wherever you want to use the library) -->
<script>
    import { Button, Badge } from "irradiant-svelte";

    let count = 0;
</script>

<Button color="blue" on:click={() => count += 1}>Hello World</Button>

<Badge color="black">Clicked {count} time(s)</Badge>
```