refactor: rename packages

README.md

@@ -19,7 +19,7 @@ Keywrite is a Javascript library that allows you to type non-latin scripts in an
 ## Features 🚀
 
 -   **Ease of Use:** Keywrite can be integrated to most modern web frameworks with ease.
--   **Flexible Keyboard Layouts:** You can configure Keywrite with different keyboard layouts and also change layouts at runtime.
+-   **Flexible Input Methods:** You can configure Keywrite with different input methods and also change layouts at runtime.
 -   **Custom Layouts:** You can create your own layouts and add them to Keywrite
 -   **Fully Extendable:** You can extend the Keywrite core API easily to support different use-cases.
 -   **Typescript Support:** The codebase is completely written in typescript

docs/README.md

@@ -4,7 +4,7 @@
 
 > _type non-latin scripts on the web_
 
-**Keywrite** is a JavaScript library that allows you to type non-latin scripts in any web based application using a standard keyboard. You can add it to your text input controls and start typing with your configured keyboard layout.
+**Keywrite** is a JavaScript library that allows you to type non-latin scripts in any web based application using a standard keyboard. You can add it to your text input controls and start typing with your configured input-method.
 
 The aim of this project is to enable web developers to add support for typing non-latin based texts on web and hybrid applications, so users can type different languages without configuring their operating system or installing additional software.
 
@@ -16,7 +16,7 @@ The aim of this project is to enable web developers to add support for typing no
 
 **What does Keywrite do?**
 
-1. It allows you to map keyboard inputs to symbols, which you define in a keyboard layout configuration file.
+1. It allows you to map keyboard inputs to symbols, which you define in a input-method configuration file.
 1. It binds with web input controls to add multi-lingual typing to your web application
 
 **Things you can build with Keywrite**

docs/_coverpage.md

@@ -2,7 +2,7 @@
 
 > type non-latin scripts on the web
 
-**Keywrite** is a Javascript library that allows you to type non-latin scripts in any web based application using a standard keyboard. You can add it to your text input controls and start typing in the your configured keyboard layout.
+**Keywrite** is a Javascript library that allows you to type non-latin scripts in any web based application using a standard keyboard. You can add it to your text input controls and start typing with your configured input-method.
 
 [GitHub](https://github.com/eyuelberga/keywrite)
 [Get Started](README.md)

docs/_sidebar.md

@@ -7,7 +7,8 @@
     -   [Basic Usage](basic_usage.md)
     -   [Advanced Usage](advanced_usage.md)
 -   Reference
-    -   [Keyboard Layout](keyboard_layout.md)
     -   [Examples](examples.md)
-    -   [Pre-made Layouts](pre_made_layouts.md)
+    -   [Input Method](input_method.md)
+    -   [Pre-made Input methods](pre_made_input-methods.md)
+    -   [Input Method Generator](input_method_generator.md)
     -   [Packages](packages.md)

docs/advanced_usage.md

@@ -5,5 +5,5 @@
 By extending the exported class from `@keywrite/core` you can add
 app-specific logic. The most important method in the core class would be the
 `write` method. This method takes in a character and resolves it into a special
-symbol as per the layout specification and returns the symbol and replacement
+symbol as per the input-method specification and returns the symbol and replacement
 state (if previous character needs to be replaced with the new symbol).

docs/assets/style.css

@@ -30,35 +30,6 @@ a {
     transition: all 0.3s linear;
 }
 
-div.search {
-    border-bottom: 2px solid #787881;
-    border: none;
-    background-color: var(--theme-color-secondary-light);
-    padding: 0;
-}
-
-.search .results-panel.show {
-    background-color: #05827e;
-    background-color: #fff;
-    color: #000;
-}
-
-.search a {
-    padding: 1rem;
-    display: block;
-    transition: background-color 0.3s ease;
-}
-
-.search a:hover {
-    color: var(--theme-color-dark);
-}
-
-.search p.empty {
-    margin: 0;
-    padding: 1rem;
-    background-color: #f1f1f2;
-}
-
 .sidebar > h1 {
     font-size: 2rem;
 }

docs/basic_usage.md

@@ -4,24 +4,25 @@
 
 Creating a new instance of Keywrite requires two parameters.
 
-1. **input control:** this is the HTML element you want to bind with the instance
-1. **keyboard layouts:** which is a key value pair of layout names and definitions
+1. **input element:** this is the HTML element you want to bind with the instance
+1. **input-methods:** which is a key value pair of input-method names and definitions
 
-### Binding with input controls
+### Binding with input elements
 
 Currently, Keywrite supports binding on `HTMLInputElement` and `HTMLTextAreaElement`.
 During initialization you must provide a reference to the element you wish to bind
 with the Keywrite instance. You can use `document.querySelector` or a similar method.
 
-### Defining keyboard layouts
+### Defining Input methods
 
-You also need to provide a Keywrite instance with keyboard layouts. Read more about
-keyboard layouts [here](keyboard_layout.md). The `layout` parameter takes an object
-with the layout name being the key and the actual layout as the value.
+You also need to provide a Keywrite instance with Input methods. Read more about
+input-methods [here](input_method.md). The `input-methods` parameter takes an object
+with the input-method name being the key and the actual input-method definition
+as the value.
 
 ```javascript
 // add to HTMLInputElement without enabling it
-new KeywriteWeb(document.querySelector('input'), { myLayout });
+new KeywriteWeb(document.querySelector('input'), { myInputMethod });
 ```
 
 ## Enable/Disable Keywrite instance
@@ -31,49 +32,51 @@ setting the `on` parameter during initialization.
 
 ```javascript
 // add to HTMLInputElement without enabling it
-new KeywriteWeb(document.querySelector('input'), { myLayout }, false);
+new KeywriteWeb(document.querySelector('input'), { myInputMethod }, false);
 ```
 
-It is also possible to toggle between on and off states during run time by changing the
-values of the `on` property on the `KeywriteWeb` instance.
+It is also possible to toggle between on and off states during run time by
+changing the values of the `on` property on the `KeywriteWeb` instance.
 
 ```javascript
 // add to HTMLInputElement without enabling it
-const myKeywriteInstance = new KeywriteWeb(document.querySelector('input'), { myLayout }, false);
+const myKeywriteInstance = new KeywriteWeb(document.querySelector('input'), { myInputMethod }, false);
 
 // change the on property to enable it
 myKeywriteInstance.on = true;
 ```
 
-## Adding multiple keyboard layouts
+## Adding multiple input-methods
 
-It is possible to add more than one keyboard layout to an instance. This could
+It is possible to add more than one input-method to an instance. This could
 be useful if you want users to pick from a selection of
-input methods. Multiple layout definitions can be added during initialization.
+input-methods. Multiple input-method definitions can be added during initialization.
 
 ```javascript
-// keyboard layout definitions
-import layout1 from './layout1';
-import layout2 from './layout2';
-import layout3 from './layout3';
+// input-method definitions
+import inputMethod1 from './inputmethod1';
+import inputMethod2 from './inputmethod2';
+import inputMethod3 from './inputmethod3';
 
-// add to HTMLInputElement with multiple layout definitions
-// the parameter accepts a map of layout name and its definition
+// add to HTMLInputElement with multiple input-method definitions
+// the parameter accepts a map of input-method name and its definition
 const myKeywriteInstance = new KeywriteWeb(document.querySelector('input'), {
-    default: layout1,
-    typewriter: layout2,
-    mnemonic: layout3,
+    default: inputMethod1,
+    typewriter: inputMethod2,
+    mnemonic: inputMethod3,
 });
 ```
 
-You can switch between the layouts by setting the `current` value in the instance to
-the key name of the layout you want.
+You can switch between input-methods by setting the `current` value in the instance to
+the key of the input-method you want.
 
 ```javascript
 myKeywriteInstance.current = 'typewriter';
 ```
 
-## Using pre-made keyboard layouts
+## Using pre-made input-methods
 
-You can install pre-made layouts to use in your project. A list of all available
-layouts can be found [here](pre_made_layouts.md)
+You can install pre-made input-methods to use in your project. A list of all
+available input-methods can be found [here](pre_made_input-methods.md).
+
+To create your own input-method, refer to [this guide](input_method_generator.md)

docs/keyboard_layout.md → docs/input_method.md

@@ -1,13 +1,14 @@
-# Keyboard Layout
+# Input Method
 
-A keyboard layout maps keyboard inputs to symbols. It allows us to define key combinations that
-produce a certain symbol. It is generally a JavaScript object with an
-input character, an output value or a next value.
+An input-method translates keyboard inputs to symbols. It allows us to define
+key combinations that produce a certain character.
+In our case, it is a JavaScript object with an input character,
+an output value and a next value.
 
-A simple keyboard layouts looks something like this:
+A simple input-methods looks something like this:
 
 ```javascript
-const myLayout = {
+const myInputMethod = {
     a: { value: '∀', next: null },
     e: {
         value: '∈',
@@ -21,59 +22,59 @@ const myLayout = {
 };
 ```
 
-In the above layout, the `a` keyboard input is mapped to the `∀` symbol.
+In the above input-method, the `a` key stroke is translated to the `∀` symbol.
 Pressing `e` will output `∈`, pressing `e` again will output `∉`.
 
-## Components of a keyboard layout
+## Components of an Input-method
 
-A keyboard layout has two basic components:
+An Input-method has two basic components:
 
 1. **SymbolMap:** object with a `value` and `next` keys.
-1. **KeyboardLayout:** object mapping an input key to a symbol map object
+1. **InputMethod:** object mapping a key stroke to a symbol map object
 
-Keyboard layout is a nested structure of these two components. Lets see this
-components in more detail.
+A Keyboard Input-method is a nested structure of these two components.
+Lets see the components in more detail.
 
-The interface for `SymbolMap` and `KeyboardLayout` is shown below:
+The interface for `SymbolMap` and `InputMethod` is shown below:
 
 ```typescript
 interface SymbolMap {
     value: string | null;
-    next: KeyboardLayout | null;
+    next: InputMethod | null;
 }
 
-type KeyboardLayout = Record<string, SymbolMap>;
+type InputMethod = Record<string, SymbolMap>;
 ```
 
-`value` represents the output symbol and `next` represents the next keyboard
-layout definition.
+`value` represents the output symbol and `next` represents the next
+input-method definition.
 
 From our previous example, the symbol map for the `a` key is this:
 
 ```javascript
 const symbolMapA = { value: '∀', next: null };
 ```
 
-The keyboard layout is as follows:
+The input-method is as follows:
 
 ```javascript
-const layoutA = { a: { value: '∀', next: null } };
+const inputMethodA = { a: { value: '∀', next: null } };
 ```
 
-`layoutA` is a valid layout that you can provide to a Keywrite instance.
-But to build a more complete keyboard layout, you can add additional input key
+`inputMethodA` is a valid input-method that you can provide to a Keywrite instance.
+But to build a more complete input-method, you can add additional input key
 and symbol map pairs.
 
 ```javascript
-const layoutWithMoreInputKeys = {
+const inputMethodWithMoreInputKeys = {
     a: { value: '∀', next: null },
     b: { value: '⋈', next: null },
     c: { value: '⊂', next: null },
     d: { value: '∂', next: null },
 };
 ```
 
-Our inputs and outputs for the above layout are as follows:
+Our inputs and outputs for the above input-method are as follows:
 
 | Input Key | Output Symbol |
 | --------- | ------------- |
@@ -82,11 +83,11 @@ Our inputs and outputs for the above layout are as follows:
 | `c`       | ⊂             |
 | `d`       | ∂             |
 
-We would also need to map certain combination of key inputs to a single character.
-We can do that by nesting additional layouts in the symbol map `next` field.
+We would also need to map certain combination of key strokes to a single character.
+We can do that by nesting additional input-methods in the symbol map `next` field.
 
 ```javascript
-const myLayout = {
+const myInputMethod = {
     a: {
         value: '∀',
         next: null,
@@ -177,18 +178,20 @@ Now our input output table looks like this:
 
 The complete code is shown below:
 
-<iframe src="https://codesandbox.io/embed/keywrite-layouts-example-149ml?fontsize=14&hidenavigation=1&theme=dark"
+<iframe src="https://codesandbox.io/embed/keywrite-input-methods-example-149ml?fontsize=14&hidenavigation=1&theme=dark"
      style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
-     title="keywrite-layouts-example"
+     title="keywrite-input-methods-example"
      allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
      sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
    ></iframe>
 
-## Creating keyboard layouts
+## Creating Input-methods
 
-Keyboard layout definitions are simple json objects. It is possible to manually write a layout definition that will work with Keywrite, but a better way would be to use the [Layout Generator](layout_generator.md).
+Keyboard Input-method definitions are simple JavaScript objects. It is possible
+to manually write a input-method definition that will work with Keywrite,
+but a better way would be to use the [Input method Generator](input-method_generator.md).
 
-## Pre-made layouts
+## Pre-made Input-methods
 
-Some layouts are avaliable pre-made and you add simply add them to your project.
-A list of all available layouts can be found [here](pre_made_layouts.md)
+Some input-methods are available pre-made and you add simply add them to your project.
+A list of all available input-methods can be found [here](pre_made_input-methods.md)

docs/input_method_generator.md

@@ -0,0 +1 @@
+# Input Method Generator

docs/pre_made_input_methods.md

@@ -0,0 +1 @@
+# Pre-made Input methods

docs/quick_start.md

@@ -22,12 +22,14 @@ Once you have installed the `@keywrite/web` you can import it to your project:
 import { KeywriteWeb } from '@keywrite/web';
 ```
 
-You also need a keyboard layout to start using Keywrite. [Keyboard layouts](keyboard_layout.md)
-map keyboard inputs to symbols, this will allow you to define which key combinations that
-produce a certain symbol. Lets define a simple keyboard layout to get started:
+You also need a Input-method to start using Keywrite. [Keyboard Input-methods](input_method.md)
+map keyboard inputs to symbols, this will allow us to define key stroke
+combinations that produce a certain symbol.
+
+Lets define a simple input-method to get started:
 
 ```javascript
-const myLayout = {
+const myInputMethod = {
     a: { value: '∀', next: null },
     e: {
         value: '∈',
@@ -41,16 +43,16 @@ const myLayout = {
 };
 ```
 
-Refer to [this guide](keyboard_layout.md) to learn more about keyboard layouts.
+Refer to [this guide](input_method.md) to learn more about Input-methods.
 
 Next, we initialize our `KeywriteWeb` instance using a reference to either a
-`textarea` or `input` element and the layout.
+`textarea` or `input` element and the Input-method.
 
 ```javascript
 // add to HTMLInputElement
-new KeywriteWeb(document.querySelector('input'), { myLayout });
+new KeywriteWeb(document.querySelector('input'), { myInputMethod });
 // add to HTMLTextAreaElement
-new KeywriteWeb(document.querySelector('textarea'), { myLayout });
+new KeywriteWeb(document.querySelector('textarea'), { myInputMethod });
 ```
 
 The complete code is shown below:

jest.config.js

@@ -6,10 +6,10 @@ module.exports = {
     collectCoverageFrom: ['src/**/*.ts'],
     coverageThreshold: {
         global: {
-            branches: 90,
+            branches: 100,
             functions: 100,
-            lines: 95,
-            statements: 95,
+            lines: 100,
+            statements: 100,
         },
     },
     transform: { '.(ts|tsx)$': 'ts-jest/dist' },