diff --git a/.babelrc b/.babelrc deleted file mode 100644 index 09c0dcb..0000000 --- a/.babelrc +++ /dev/null @@ -1,20 +0,0 @@ -{ - "presets": [ - [ - "env", - { - "targets": { - "browsers": [ - "last 2 versions", - "safari >= 7" - ], - "node": 8 - } - } - ], - "react" - ], - "plugins": [ - "transform-object-rest-spread" - ] -} diff --git a/.eslintignore b/.eslintignore index ecb3587..38ce5c0 100644 --- a/.eslintignore +++ b/.eslintignore @@ -1,4 +1,6 @@ build +dist node_modules -docs -webpack.*.js +docs/example-component +docs/example-hooks +public diff --git a/.eslintrc.js b/.eslintrc.js index 5626551..54b677d 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -1,10 +1,36 @@ module.exports = { - "extends": "airbnb", - "rules": { - "react/jsx-filename-extension": 0, - "import/no-extraneous-dependencies": 0 - }, - "globals": { - document: true - } + parser: '@typescript-eslint/parser', // Specifies the ESLint parser + extends: [ + 'eslint:recommended', + 'plugin:react/recommended', + 'plugin:@typescript-eslint/recommended', // Uses the recommended rules from @typescript-eslint/eslint-plugin + 'plugin:react-hooks/recommended', + ], + env: { + browser: true, + node: true, + es6: true, + jest: true, + }, + parserOptions: { + ecmaVersion: 2018, // Allows for the parsing of modern ECMAScript features + sourceType: 'module', // Allows for the use of imports + ecmaFeatures: { + jsx: true, // Allows for the parsing of JSX + }, + }, + rules: { + '@typescript-eslint/camelcase': 0, + '@typescript-eslint/explicit-function-return-type': 0, + '@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_' }], + 'react/prop-types': 0, + }, + settings: { + react: { + version: 'detect', // Tells eslint-plugin-react to automatically detect the version of React to use + }, + }, + globals: { + document: true, + }, }; diff --git a/.gitignore b/.gitignore index 4c0cc91..429eb49 100644 --- a/.gitignore +++ b/.gitignore @@ -12,7 +12,7 @@ yarn-error.log* yarn.lock # Dependency directories -node_modules/ +node_modules # Optional npm cache directory .npm @@ -24,9 +24,8 @@ node_modules/ *.tgz package -# Yarn Integrity file -.yarn-integrity - # dotenv environment variables file .env +dist +.awcache diff --git a/.prettierrc.js b/.prettierrc.js new file mode 100644 index 0000000..c97b72b --- /dev/null +++ b/.prettierrc.js @@ -0,0 +1,11 @@ +module.exports = { + printWidth: 120, + semi: true, + singleQuote: true, + tabWidth: 2, + trailingComma: 'es5', + quoteProps: 'consistent', + jsxSingleQuote: true, + bracketSpacing: true, + endOfLine: 'lf', +}; diff --git a/.vercelignore b/.vercelignore new file mode 100644 index 0000000..2c68604 --- /dev/null +++ b/.vercelignore @@ -0,0 +1,3 @@ +build +*.md +.awcache diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..974a2b4 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "deno.enable": false +} diff --git a/CHANGELOG.md b/CHANGELOG.md index fed1adc..d4386c8 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -36,7 +36,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Parallelize the build process - Docs structure clean-up (remove view) -[Unreleased]: https://github.com/abinavseelan/react-input-trigger/compare/v1.1.2...HEAD +[unreleased]: https://github.com/abinavseelan/react-input-trigger/compare/v1.1.2...HEAD [1.1.2]: https://github.com/abinavseelan/react-input-trigger/compare/v1.1.1...v1.1.2 [1.1.1]: https://github.com/abinavseelan/react-input-trigger/compare/v1.1.0...v1.1.1 [1.1.0]: https://github.com/abinavseelan/react-input-trigger/tree/v1.1.0 diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index c017e8a..0c575ee 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -11,6 +11,7 @@ Before submitting your contribution, please take a moment and read through the f - All development would require you to just edit the contents of `src`. Please do not modify the contents of `/build`, or `/docs` directly. `/build` will always be generated by the maintainers before publishing to npm, and `/docs` is generated automatically on publish from `/src/docs`. - A preferred convention for branch names is `/`. For example: + - `bugfix/missing-props` - `feature/handle-refs` @@ -23,6 +24,7 @@ Before submitting your contribution, please take a moment and read through the f - If there are any changes to the dependencies, please make sure to use `npm` rather than `yarn` and that your changes are reflected in both the `package.json` and `package-lock.json` files. - If adding a new feature: + - Describe your use-case / need for the feature, so that we can understand the scenario better. - Preferably raise a suggestion issue, so that we can have a discussion before you start working on the PR. 👩‍💻 @@ -36,7 +38,7 @@ You will need [Node.js](http://nodejs.org) **version 6+** After cloning the repo, run: -``` bash +```bash $ npm install ``` @@ -48,7 +50,7 @@ There is a `pre-commit` hook that runs the linter to check for code style. Pleas ### Commonly used NPM scripts -``` bash +```bash # Runs the example project in `/src/docs`, using webpack-dev-server. # Use this demo sandbox to test your changes. It has HMR out of the box! $ npm start @@ -64,6 +66,7 @@ $ npm test ## Project Structure - **src** + - **index.js**: This is the main `` component source. - **docs**: This is the code pertaining to the demo project. diff --git a/README-v1.md b/README-v1.md new file mode 100644 index 0000000..a7532a9 --- /dev/null +++ b/README-v1.md @@ -0,0 +1,227 @@ +# React Input Trigger + +[![npm][npm-badge]][npm-url] +[![license][license-badge]][license-url] +[![downloads][downloads-badge]][downloads-url] +[![size][size-badge]][size-url] + +[![deps][deps-badge]][deps-url] +[![peer-deps][peer-deps-badge]][peer-deps-url] + +> React component for handling character triggers inside textareas and input fields. 🐼 + +## Description + +Useful for building applications that need Slack-like emoji suggestions (triggered by typing `:`) or Github-like user mentions (triggered by typing `@`). + +The component provides the following hooks: + +- `onStart`: whenever the trigger is first activated (eg. when `@` is first typed). +- `onType`: when something is being typed after it's been triggered. +- `onCancel`: when the trigger is canceled. + +The hooks pass some meta-data such as the cursor position and/or the text that has been typed since the trigger has been activated. + +![reactinputtrigger](https://user-images.githubusercontent.com/6417910/36937827-0e615e4e-1f3f-11e8-9623-c4141bda3d2e.gif) + +## Demo + +A live demo of this component can be found [here](https://abinavseelan.com/react-input-trigger). + +A detailed guide on using this component to build a Github-style user mentions component [can be found on CampVanilla](https://blog.campvanilla.com/reactjs-input-trigger-github-twitter-mentions-8ad1d878110d). + +## Usage + +### Getting Started + +- Install the component + +```bash +$ npm install react-input-trigger +``` + +- Import the component from the package. + +```js +import InputTrigger from 'react-input-trigger'; +``` + +- Wrap your existing `