refactor: rename package name

docs/README.md

@@ -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 input-method configuration file.
+1. It allows you to translate key strokes to non-latin characters, 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/input_method.md

@@ -22,8 +22,8 @@ const myInputMethod = {
 };
 ```
 
-In the above input-method, the `a` key stroke is translated to the `∀` symbol.
-Pressing `e` will output `∈`, pressing `e` again will output `∉`.
+In the above input-method, the <kbd>a</kbd> key stroke is translated to the `∀` symbol.
+Pressing <kbd>e</kbd> will output `∈`, pressing <kbd>e</kbd> again will output `∉`.
 
 ## Components of an Input-method
 
@@ -49,7 +49,7 @@ type InputMethod = Record<string, SymbolMap>;
 `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:
+From our previous example, the symbol map for the <kbd>a</kbd> key is this:
 
 ```javascript
 const symbolMapA = { value: '∀', next: null };
@@ -76,12 +76,12 @@ const inputMethodWithMoreInputKeys = {
 
 Our inputs and outputs for the above input-method are as follows:
 
-| Input Key | Output Symbol |
-| --------- | ------------- |
-| `a`       | ∀             |
-| `b`       | ⋈             |
-| `c`       | ⊂             |
-| `d`       | ∂             |
+| Input Key    | Output Symbol |
+| ------------ | ------------- |
+| <kbd>a</kbd> | ∀             |
+| <kbd>b</kbd> | ⋈             |
+| <kbd>c</kbd> | ⊂             |
+| <kbd>d</kbd> | ∂             |
 
 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.
@@ -157,24 +157,24 @@ const myInputMethod = {
 
 Now our input output table looks like this:
 
-| Input Key             | Output Symbol |
-| --------------------- | ------------- |
-| `a`                   | ∀             |
-| `b`                   | ⋈             |
-| `b` + `l`             | ⋉             |
-| `b` + `r`             | ⋊             |
-| `c`                   | ⊂             |
-| `c` + `u`             | ⊆             |
-| `c` + `u` + `n`       | ⊈             |
-| `c` + `n`             | ⊄             |
-| `c` + `n` + `u`       | ⊈             |
-| `c` + `l`             | ⊃             |
-| `c` + `l` + `n`       | ⊅             |
-| `c` + `l` + `n` + `u` | ⊉             |
-| `c` + `l` + `u`       | ⊇             |
-| `c` + `u`             | ⊇             |
-| `c` + `u` + `n`       | ⊉             |
-| `d`                   | ∂             |
+| Input Key                                                 | Output Symbol |
+| --------------------------------------------------------- | ------------- |
+| <kbd>a</kbd>                                              | ∀             |
+| <kbd>b</kbd>                                              | ⋈             |
+| <kbd>b</kbd> + <kbd>l</kbd>                               | ⋉             |
+| <kbd>b</kbd> + <kbd>r</kbd>                               | ⋊             |
+| <kbd>c</kbd>                                              | ⊂             |
+| <kbd>c</kbd> + <kbd>u</kbd>                               | ⊆             |
+| <kbd>c</kbd> + <kbd>u</kbd> + <kbd>n</kbd>                | ⊈             |
+| <kbd>c</kbd> + <kbd>n</kbd>                               | ⊄             |
+| <kbd>c</kbd> + <kbd>n</kbd> + <kbd>u</kbd>                | ⊈             |
+| <kbd>c</kbd> + <kbd>l</kbd>                               | ⊃             |
+| <kbd>c</kbd> + <kbd>l</kbd> + <kbd>n</kbd>                | ⊅             |
+| <kbd>c</kbd> + <kbd>l</kbd> + <kbd>n</kbd> + <kbd>u</kbd> | ⊉             |
+| <kbd>c</kbd> + <kbd>l</kbd> + <kbd>u</kbd>                | ⊇             |
+| <kbd>c</kbd> + <kbd>u</kbd>                               | ⊇             |
+| <kbd>c</kbd> + <kbd>u</kbd> + <kbd>n</kbd>                | ⊉             |
+| <kbd>d</kbd>                                              | ∂             |
 
 The complete code is shown below:
 
@@ -189,9 +189,9 @@ The complete code is shown below:
 
 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).
+but a better way would be to use the [Input method Generator](input_method_generator.md).
 
 ## Pre-made Input-methods
 
 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)
+A list of all available input-methods can be found [here](pre_made_input_methods.md)

package.json

@@ -32,7 +32,7 @@
         "lint-staged": "10.5.3",
         "prettier": "2.2.1",
         "ts-jest": "26.5.0",
-        "typescript": "^4.1.3"
+        "typescript": "4.1.3"
     },
     "workspaces": [
         "packages/*"

packages/ethiopic_input_methods/package.json → packages/ethiopic-input-methods/package.json

@@ -14,8 +14,7 @@
         "prepack": "yarn build",
         "build": "yarn clean && tsc --build && cp \"./package.json\" ./dist/",
         "test": "jest --passWithNoTests",
-        "generate": "ts-node src/generate-from-csv.ts",
-        "lint": "eslint \"./src/**/*.{ts,tsx}\" --max-warnings=10"
+        "generate": "ts-node src/generate-from-csv.ts"
     },
     "devDependencies": {
         "@keywrite/input-method-generator": "^0.1.1",

packages/ethiopic_input_methods/src/ET.ts → packages/ethiopic-input-methods/src/ET.ts

@@ -1,5 +1,4 @@
-import { InputMethod } from '@keywrite/core';
-import { InputMethodMeta, InputMethodSpec } from './interfaces';
+import { InputMethodSpec } from './interfaces';
 const inputMethod: InputMethodSpec = {
     meta: { name: 'Ethiopic(Language Neutral)', regions: ['ET'] },
     inputMethod: {

packages/ethiopic_input_methods/src/am-ET.ts → packages/ethiopic-input-methods/src/am-ET.ts

@@ -1,5 +1,4 @@
-import { InputMethod } from '@keywrite/core';
-import { InputMethodMeta, InputMethodSpec } from './interfaces';
+import { InputMethodSpec } from './interfaces';
 const inputMethod: InputMethodSpec = {
     meta: { name: 'Amharic', regions: ['am-ET'] },
     inputMethod: {

packages/ethiopic_input_methods/src/awn-ET_byn-ER_xan-ET.ts → packages/ethiopic-input-methods/src/awn-ET_byn-ER_xan-ET.ts

@@ -1,5 +1,4 @@
-import { InputMethod } from '@keywrite/core';
-import { InputMethodMeta, InputMethodSpec } from './interfaces';
+import { InputMethodSpec } from './interfaces';
 const inputMethod: InputMethodSpec = {
     meta: { name: 'Awngi, Blin, Xamtanga', regions: ['awn-ET', 'byn-ER', 'xan-ET'] },
     inputMethod: {

packages/ethiopic_input_methods/src/bcq-ET.ts → packages/ethiopic-input-methods/src/bcq-ET.ts

@@ -1,5 +1,4 @@
-import { InputMethod } from '@keywrite/core';
-import { InputMethodMeta, InputMethodSpec } from './interfaces';
+import { InputMethodSpec } from './interfaces';
 const inputMethod: InputMethodSpec = {
     meta: { name: 'Bench', regions: ['bcq-ET'] },
     inputMethod: {

packages/ethiopic_input_methods/src/generate-from-csv.ts → packages/ethiopic-input-methods/src/generate-from-csv.ts

@@ -27,8 +27,7 @@ for (const [code, { name, path, regions }] of Object.entries(inputMethods)) {
 
             fs.writeFileSync(
                 `${__dirname}/${code}.ts`,
-                `import { InputMethod } from '@keywrite/core';
-                import {InputMethodMeta, InputMethodSpec} from './interfaces';
+                `import {InputMethodSpec} from './interfaces';
                 const inputMethod : InputMethodSpec = ${JSON.stringify({
                     meta,
                     inputMethod: { ...inputMethod, ...punctuation },

packages/ethiopic_input_methods/src/gez-ET_gez-ER.ts → packages/ethiopic-input-methods/src/gez-ET_gez-ER.ts

@@ -1,5 +1,4 @@
-import { InputMethod } from '@keywrite/core';
-import { InputMethodMeta, InputMethodSpec } from './interfaces';
+import { InputMethodSpec } from './interfaces';
 const inputMethod: InputMethodSpec = {
     meta: { name: "Ge'ez", regions: ['gez-ET', 'gez-ER'] },
     inputMethod: {

packages/ethiopic_input_methods/src/har-ET.ts → packages/ethiopic-input-methods/src/har-ET.ts

@@ -1,5 +1,4 @@
-import { InputMethod } from '@keywrite/core';
-import { InputMethodMeta, InputMethodSpec } from './interfaces';
+import { InputMethodSpec } from './interfaces';
 const inputMethod: InputMethodSpec = {
     meta: { name: 'Harari', regions: ['har-ET'] },
     inputMethod: {

packages/ethiopic_input_methods/src/mym-ET_muz-ET_suq-ET_mdx-ET.ts → packages/ethiopic-input-methods/src/mym-ET_muz-ET_suq-ET_mdx-ET.ts

@@ -1,5 +1,4 @@
-import { InputMethod } from '@keywrite/core';
-import { InputMethodMeta, InputMethodSpec } from './interfaces';
+import { InputMethodSpec } from './interfaces';
 const inputMethod: InputMethodSpec = {
     meta: { name: "Dizi, Me'en, Mursi, Suri", regions: ['mym-ET', 'muz-ET', 'suq-ET', 'mdx-ET'] },
     inputMethod: {

packages/ethiopic_input_methods/src/sgw-ET.ts → packages/ethiopic-input-methods/src/sgw-ET.ts

@@ -1,5 +1,4 @@
-import { InputMethod } from '@keywrite/core';
-import { InputMethodMeta, InputMethodSpec } from './interfaces';
+import { InputMethodSpec } from './interfaces';
 const inputMethod: InputMethodSpec = {
     meta: { name: 'Sebatbeit', regions: ['sgw-ET'] },
     inputMethod: {

packages/ethiopic_input_methods/src/ti-ER.ts → packages/ethiopic-input-methods/src/ti-ER.ts

@@ -1,5 +1,4 @@
-import { InputMethod } from '@keywrite/core';
-import { InputMethodMeta, InputMethodSpec } from './interfaces';
+import { InputMethodSpec } from './interfaces';
 const inputMethod: InputMethodSpec = {
     meta: { name: 'Tigrinya(Eritrean)', regions: ['ti-ER'] },
     inputMethod: {

packages/ethiopic_input_methods/src/ti-ET.ts → packages/ethiopic-input-methods/src/ti-ET.ts

@@ -1,5 +1,4 @@
-import { InputMethod } from '@keywrite/core';
-import { InputMethodMeta, InputMethodSpec } from './interfaces';
+import { InputMethodSpec } from './interfaces';
 const inputMethod: InputMethodSpec = {
     meta: { name: 'Tigrinya(Ethiopia)', regions: ['ti-ET'] },
     inputMethod: {

packages/ethiopic_input_methods/src/xst-ET.ts → packages/ethiopic-input-methods/src/xst-ET.ts

@@ -1,5 +1,4 @@
-import { InputMethod } from '@keywrite/core';
-import { InputMethodMeta, InputMethodSpec } from './interfaces';
+import { InputMethodSpec } from './interfaces';
 const inputMethod: InputMethodSpec = {
     meta: { name: "Silt'e", regions: ['xst-ET'] },
     inputMethod: {

packages/react/CHANGELOG.md

@@ -0,0 +1,10 @@
+# @keywrite/web
+
+## 0.1.1
+
+### Patch Changes
+
+-   [`bc3cc2a`](https://github.com/eyuelberga/keywrite/commit/bc3cc2ac88eae4ed543c31e62a551c7d333f8990) [#1](https://github.com/eyuelberga/keywrite/pull/1) Thanks [@eyuelberga](https://github.com/eyuelberga)! - Initial release
+
+-   Updated dependencies [[`bc3cc2a`](https://github.com/eyuelberga/keywrite/commit/bc3cc2ac88eae4ed543c31e62a551c7d333f8990)]:
+    -   @keywrite/core@0.1.1

packages/react/README.md

@@ -0,0 +1,31 @@
+## @keywrite/web
+
+Keywrite is a Javascript library that allows you to type non-latin scripts in any web based application using a standard keyboard.
+
+## Installation
+
+```sh
+$ yarn add @keywrite/web
+
+# or
+
+$ npm install @keywrite/web
+```
+
+## Basic usage
+
+```javascript
+import { KeywriteWeb } from '@keywrite/web';
+
+// input method definition
+import layout from './layout';
+
+// add to HTMLInputElement
+new KeywriteWeb(document.querySelector('input'));
+// add to HTMLTextAreaElement
+new KeywriteWeb(document.querySelector('textarea'));
+```
+
+## License
+
+MIT © [Eyuel Berga](https://github.com/eyuelberga)

packages/react/jest.config.js

@@ -0,0 +1,5 @@
+const baseConfig = require('../../jest.config');
+
+module.exports = {
+    ...baseConfig,
+};

packages/react/package.json

@@ -0,0 +1,27 @@
+{
+    "name": "@keywrite/react",
+    "version": "0.1.1",
+    "private": true,
+    "main": "dist/index.js",
+    "types": "dist/index.d.ts",
+    "license": "MIT",
+    "repository": {
+        "type": "git",
+        "directory": "packages/react",
+        "url": "https://github.com/eyuelberga/keywrite.git"
+    },
+    "scripts": {
+        "clean": "rimraf dist && rimraf tsconfig.tsbuildinfo",
+        "prepack": "yarn build",
+        "build": "yarn clean && tsc --build && cp \"./package.json\" ./dist/",
+        "test": "jest --passWithNoTests",
+        "lint": "eslint \"./src/**/*.{ts,tsx}\" --max-warnings=10"
+    },
+    "dependencies": {
+        "@keywrite/web": "^0.1.1"
+    },
+    "devDependencies": {
+        "react": "^17.0.2",
+        "react-dom": "^17.0.2"
+    }
+}

packages/react/src/index.ts

@@ -0,0 +1,2 @@
+export * from './useKeywrite';
+export { default } from './useKeywrite';

packages/react/src/useKeywrite.ts

@@ -0,0 +1,33 @@
+import React, { useState, useRef, useEffect } from 'react';
+import KeywriteWeb, { Input, InputMethod } from '@keywrite/web';
+export const useKeywrite = (
+    inputRef: React.MutableRefObject<Input | null | undefined>,
+    inputMethods: Record<string, InputMethod>,
+    isOn = true,
+) => {
+    const KeywriteRef = useRef<KeywriteWeb | null>(null);
+    const [on, setOn] = useState(false);
+    const [inputMethodList, setInputMethodList] = useState<string[]>([]);
+    const [currentInputMethod, setCurrentInputMethod] = useState('');
+    const toggle = () => {
+        if (KeywriteRef.current) {
+            KeywriteRef.current.on = !KeywriteRef.current.on;
+            setOn(!on);
+        }
+    };
+    const changeLayout = (newInputMethod: string) => {
+        if (KeywriteRef.current) {
+            KeywriteRef.current.current = newInputMethod;
+            setCurrentInputMethod(KeywriteRef.current.current);
+        }
+    };
+    useEffect(() => {
+        if (inputRef.current) {
+            KeywriteRef.current = new KeywriteWeb(inputRef.current, inputMethods, isOn);
+            setOn(KeywriteRef.current.on);
+            setCurrentInputMethod(KeywriteRef.current.current);
+            setInputMethodList(KeywriteRef.current.inputMethods);
+        }
+    }, [inputRef]);
+    return { toggle, currentInputMethod, on, changeLayout, inputMethodList, inputRef };
+};