Merge pull request #7 from novacbn/0.2.X

v0.2.8

CHANGELOG.md

@@ -1,6 +1,16 @@
 # CHANGELOG
 
-## v0.2.7 -
+## v0.2.8 - 2021/06/24
+
+-   Updated the following Components
+
+    -   Interactables
+
+        -   `TextInput`
+
+            -   Fixed `<TextInput resizeable>` -> `<TextInput resizable>`
+
+## v0.2.7 - 2021/06/24
 
 -   Upgraded Storybook to `6.3.0-rc.11`.
 

README.md

@@ -19,7 +19,11 @@
 
 ## Documentation
 
-Visit the documentation at [kahi-ui.nbn.dev](https://kahi-ui.nbn.dev)
+Visit the documentation at [kahi-ui.nbn.dev](https://kahi-ui.nbn.dev).
+
+## F.A.Q.
+
+Visit the F.A.Q (frequently asked questions) at [kahi-ui.nbn.dev/docs/framework](https://kahi-ui.nbn.dev/docs/framework).
 
 ## Browser Support
 
@@ -34,7 +38,7 @@ Visit the documentation at [kahi-ui.nbn.dev](https://kahi-ui.nbn.dev)
 Open your terminal and install via `npm`:
 
 ```bash
-npm install github:novacbn/kahi-ui#0.2.7
+npm install github:novacbn/kahi-ui#0.2.8
 ```
 
 Install current in-development code:

dist/kahi-ui.framework.css

@@ -3530,15 +3530,15 @@ html[data-palette="dark"] [data-palette="negative"] {
   --tw-translate-y: -50%;
 }
 
-[data-resizeable]:not([data-resizeable="x"], [data-resizeable="y"]) {
+[data-resizable]:not([data-resizable="x"], [data-resizable="y"]) {
     resize: both;
 }
 
-[data-resizeable="x"] {
+[data-resizable="x"] {
     resize: horizontal;
 }
 
-[data-resizeable="y"] {
+[data-resizable="y"] {
     resize: vertical;
 }
 

docs/framework/browser-support.md

@@ -1,9 +1,11 @@
 # Browser Support
 
-|                       | Chrome          | Edge            | Firefox        | Safari             | Internet Explorer |
-| --------------------- | --------------- | --------------- | -------------- | ------------------ | ----------------- |
-| **Estimated Minimum** | 64+ _July 2020_ | 84+ _July 2020_ | 67+ _May 2019_ | 14.1+ _April 2021_ | **UNSUPPORTED**   |
-| **Tested Minimum**    | 89+             | ?               | 87+            | ?                  | **UNSUPPORTED**   |
+Modern Browsers listed below and generally their derivatives. Primary testing happens on Chrome / Firefox, both mobile and desktop. With occasional testing on Gnome Web which is based on WebKit.
+
+|                       | Chrome          | Edge            | Firefox        | Safari             | Edge _(Pre Chromium)_ | Internet Explorer |
+| --------------------- | --------------- | --------------- | -------------- | ------------------ | --------------------- | ----------------- |
+| **Estimated Minimum** | 64+ _July 2020_ | 84+ _July 2020_ | 67+ _May 2019_ | 14.1+ _April 2021_ | **NOT SUPPORTED**     | **NOT SUPPORTED** |
+| **Tested Minimum**    | 89+             | ?               | 87+            | ?                  | **NOT SUPPORTED**     | **NOT SUPPORTED** |
 
 ## Features Used
 

docs/framework/faq.md

@@ -0,0 +1,33 @@
+# F.A.Q.
+
+## Where can I get help?
+
+If you need help with something not properly documented or needs clarification, you can visit the [Issue Tracker](https://github.com/novacbn/kahi-ui/issues). File a new issue and it'll be addressed on a spare time effort.
+
+## How can I contribute?
+
+Contributions are currently not being actively accepted aside from bug reports or other issues with the library.
+
+## What Browsers are supported?
+
+Visit the [Browser Support](./browser-support.md) documentation for more information.
+
+## Can I use the library without Typescript?
+
+Yes! However [`svelte-preprocess`](https://github.com/sveltejs/svelte-preprocess) is required to use this library, as it is built in Typescript with no packaging build step. That will be fixed when [SvelteKit](https://kit.svelte.dev)'s [package command](https://kit.svelte.dev/docs#packaging) supports type generation.
+
+## Can I use the library without Svelte?
+
+Yes, however there is no official support to do so. Visit [Releases](https://github.com/novacbn/kahi-ui/releases) and grab the `.css` distributable files, and read the library source code on how to do markup, progressive enhancements, etc.
+
+## Can I use the library on Browsers that don't support or have Javascript disabled?
+
+Yes! The library is explictly made in mind that Svelte should be used to sprinkle extra functionality ontop of logic baked in HTML / CSS. If you find something not working properly, [file an issue](https://github.com/novacbn/kahi-ui/issues).
+
+## Is Themeing Supported?
+
+Not at the moment, but that'll be tackled via global [CSS Custom Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) at a later time.
+
+## Is ARIA Supported?
+
+While I want to implement full proper support, including keyboard navigation. It is currently not being pursued and will be tackled at a later date. However if you encounter something that'll be detrimental [file an issue](https://github.com/novacbn/kahi-ui/issues).

docs/framework/getting-started.md

@@ -5,7 +5,7 @@
 Using a terminal inside of your project's directory, use `npm` to install the package.
 
 ```bash
-npm install github:novacbn/kahi-ui#0.2.7
+npm install github:novacbn/kahi-ui#0.2.8
 ```
 
 ## Importing Stylesheet

docs/interactables/textinput.md

@@ -82,8 +82,8 @@ description="<strong>(TEXTAREA ONLY)</strong> Sets the height of the <code>TextI
 types=["number", "string"]
 
 [[properties.TextInput]]
-name="resizeable"
-description="<strong>(TEXTAREA ONLY)</strong> Sets if the <code>TextArea</code> should be resizeable by the end-user."
+name="resizable"
+description="<strong>(TEXTAREA ONLY)</strong> Sets if the <code>TextArea</code> should be resizable by the end-user."
 types=["boolean", "x", "y"]
 
 [[properties.TextInput]]
@@ -100,11 +100,13 @@ types=["boolean"]
 ```html repl TextInput Preview
 <script>
     import {Code, Form, TextInput} from "@kahi-ui/framework";
+
+    let value = "[email protected]";
 </script>
 
 <Form.Control logic_id="textinput-preview">
     <Form.Label>Register E-Mail for Newsletter</Form.Label>
-    <TextInput />
+    <TextInput bind:value />
     <Form.HelpText>Make sure to enter a valid E-Mail Address, e.g. <Code>[email protected]</Code></Form.HelpText>
 </Form.Control>
 ```
@@ -116,3 +118,224 @@ types=["boolean"]
     import {TextInput} from "@kahi-ui/framework";
 </script>
 ```
+
+## Palette
+
+You can change the color palette of the `TextInput` via the `palette` property.
+
+```html repl TextInput Palette
+<script>
+    import {Stack, TextInput} from "@kahi-ui/framework";
+</script>
+
+<Stack orientation="horizontal" alignment_y="top" spacing="medium" variation="wrap">
+    <TextInput characters="20" value="This is a DEFAULT TextInput" />
+    <TextInput palette="accent" characters="20" value="This is a ACCENT TextInput" />
+
+    <TextInput palette="dark" characters="20" value="This is a DARK TextInput" />
+    <TextInput palette="light" characters="20" value="This is a LIGHT TextInput" />
+
+    <TextInput palette="alert" characters="20" value="This is a ALERT TextInput" />
+    <TextInput palette="affirmative" characters="20" value="This is a AFFIRMATIVE TextInput" />
+    <TextInput palette="negative" characters="20" value="This is a NEGATIVE TextInput" />
+</Stack>
+```
+
+## Size
+
+You can change the size of the `TextInput` via the `size` property.
+
+```html repl TextInput Size
+<script>
+    import {Stack, TextInput} from "@kahi-ui/framework";
+</script>
+
+<Stack orientation="horizontal" alignment_y="top" spacing="medium" variation="wrap">
+    <TextInput characters="20" value="This is a DEFAULT TextInput" />
+
+    <TextInput size="tiny" characters="20" value="This is a TINY TextInput" />
+    <TextInput size="small" characters="20" value="This is a SMALL TextInput" />
+
+    <TextInput size="medium" characters="20" value="This is a MEDIUM TextInput" />
+
+    <TextInput size="large" characters="20" value="This is a LARGE TextInput" />
+    <TextInput size="huge" characters="20" value="This is a HUGE TextInput" />
+</Stack>
+```
+
+## Block
+
+You can alter the `TextInput` render as an opaque block via the `variation` property.
+
+```html repl TextInput Block
+<script>
+    import {Stack, TextInput} from "@kahi-ui/framework";
+</script>
+
+<Stack orientation="horizontal" alignment_y="top" spacing="medium" variation="wrap">
+    <TextInput variation="block" characters="20" value="This is a DEFAULT TextInput" />
+    <TextInput
+        variation="block"
+        palette="accent"
+        characters="20"
+        value="This is a ACCENT TextInput"
+    />
+
+    <TextInput variation="block" palette="dark" characters="20" value="This is a DARK TextInput" />
+    <TextInput
+        variation="block"
+        palette="light"
+        characters="20"
+        value="This is a LIGHT TextInput"
+    />
+
+    <TextInput
+        variation="block"
+        palette="alert"
+        characters="20"
+        value="This is a ALERT TextInput"
+    />
+    <TextInput
+        variation="block"
+        palette="affirmative"
+        characters="20"
+        value="This is a AFFIRMATIVE TextInput"
+    />
+    <TextInput
+        variation="block"
+        palette="negative"
+        characters="20"
+        value="This is a NEGATIVE TextInput"
+    />
+</Stack>
+```
+
+## Flush
+
+You can have the `TextInput` to be completely flush document text with no other stylings via the `variation` property.
+
+<!-- prettier-ignore -->
+```html repl TextInput Flush
+<script>
+    import {TextInput} from "@kahi-ui/framework";
+</script>
+
+Input some text:
+<TextInput
+    variation="flush"
+    characters="20"
+    value="This is a FLUSH TextInput"
+/>
+```
+
+## Input Type
+
+You can change your input type between `email`, `password`, `search`, `text` **(DEFAULT)**, `url` via the `type` property.
+
+<!-- prettier-ignore -->
+```html repl TextInput Input Type
+<script>
+    import {Stack, TextInput} from "@kahi-ui/framework";
+</script>
+
+<Stack orientation="horizontal" alignment_y="top" spacing="medium" variation="wrap">
+    <TextInput
+        type="email"
+        characters="20"
+        value="[email protected]"
+    />
+
+    <TextInput
+        type="password"
+        characters="20"
+        value="abcdef1002"
+    />
+
+    <TextInput
+        type="url"
+        characters="20"
+        value="https://google.com"
+    />
+</Stack>
+```
+
+## Placeholder
+
+You can set the `TextInput` to show placeholder text whenever there is no current value.
+
+<!-- prettier-ignore -->
+```html repl TextInput Placeholder
+<script>
+    import {TextInput} from "@kahi-ui/framework";
+</script>
+
+<TextInput
+    placeholder="...enter some text"
+/>
+```
+
+## Field Character Size
+
+You can set how wide your `TextInput` to an approximation of character width via the `characters` property.
+
+<!-- prettier-ignore -->
+```html repl TextInput Field Character Size
+<script>
+    import {TextInput} from "@kahi-ui/framework";
+</script>
+
+<TextInput
+    value="This input should be about 4 characters wide."
+    characters="4"
+/>
+```
+
+## TextArea
+
+You can have the `TextInput` render as a `<textarea>` via the `is` property.
+
+<!-- prettier-ignore -->
+```html repl TextInput TextArea
+<script>
+    import {TextInput} from "@kahi-ui/framework";
+</script>
+
+<TextInput
+    is="textarea"
+    value="This is a TextArea TextInput"
+/>
+```
+
+## Field Line Size
+
+You can set how tall your `<textarea>` based `TextInput` to an approximation of character lines via the `lines` property.
+
+<!-- prettier-ignore -->
+```html repl TextInput Field Line Size
+<script>
+    import {TextInput} from "@kahi-ui/framework";
+</script>
+
+<TextInput
+    is="textarea"
+    value="This input should be about 3 lines tall."
+    lines="3"
+/>
+```
+
+## Resizable TextArea
+
+You alter the a `<textarea>` based `TextInput` to resizable both axis `true`, horizontally `x`, and vertically `y` via the `resizable` property.
+
+<!-- prettier-ignore -->
+```html repl TextInput Resizable TextArea
+<script>
+    import {TextInput} from "@kahi-ui/framework";
+</script>
+
+<TextInput
+    is="textarea"
+    value="This is a resizable TextArea"
+    resizable
+/>
+```

package.json

@@ -2,7 +2,7 @@
     "name": "@kahi-ui/framework",
     "description": "Straight-forward Svelte UI for the Web",
     "author": "novacbn",
-    "version": "0.2.7",
+    "version": "0.2.8",
     "type": "module",
     "main": "./src/index.ts",
     "svelte": "./src/index.ts",

packages/@kahi-ui-docs-kit/src/server/markdown/plugins/scrollables.ts

@@ -1,5 +1,4 @@
 import type MarkdownIt from "markdown-it";
-import "prismjs/components/prism-bash.js";
 
 import type {IArticleOptions} from "../article";