├── .prettierignore ├── jest.setup.js ├── prettier.config.js ├── index.tsx ├── .eslintrc.json ├── .gitignore ├── tsconfig.json ├── public └── index.html ├── babel.config.js ├── src ├── components │ ├── GithubStar.tsx │ ├── TextHighlight.tsx │ └── TextInput.tsx ├── utils │ ├── zeroWidthToUsername.ts │ └── usernameToZeroWidth.ts ├── __tests__ │ └── journey.test.js └── App.tsx ├── README.md ├── webpack.config.ts └── package.json /.prettierignore: -------------------------------------------------------------------------------- 1 | # Ignore artifacts: 2 | dist 3 | -------------------------------------------------------------------------------- /jest.setup.js: -------------------------------------------------------------------------------- 1 | import '@testing-library/jest-dom'; 2 | -------------------------------------------------------------------------------- /prettier.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | semi: true, 3 | printWidth: 120, 4 | singleQuote: true, 5 | trailingComma: 'es5', 6 | arrowParens: 'avoid', 7 | }; 8 | -------------------------------------------------------------------------------- /index.tsx: -------------------------------------------------------------------------------- 1 | import 'react-hot-loader'; 2 | import React from 'react'; 3 | import ReactDOM from 'react-dom'; 4 | 5 | import App from './src/App'; 6 | 7 | ReactDOM.render(, document.getElementById('root')); 8 | -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["airbnb", "prettier"], 3 | "plugins": ["prettier"], 4 | "env": { 5 | "browser": true, 6 | "node": true 7 | }, 8 | "rules": { 9 | "no-irregular-whitespace": "off" 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # dependencies 2 | /node_modules 3 | 4 | # testing 5 | /coverage 6 | 7 | # production 8 | /build 9 | /dist 10 | 11 | # misc 12 | .DS_Store 13 | .env.local 14 | .env.development.local 15 | .env.test.local 16 | .env.production.local 17 | 18 | npm-debug.log* 19 | yarn-debug.log* 20 | yarn-error.log* 21 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "include": ["./*.tsx", "src"], 3 | "compilerOptions": { 4 | "outDir": "./dist/", 5 | "strict": true, 6 | "sourceMap": true, 7 | "declaration": true, 8 | "esModuleInterop": true, 9 | "module": "es6", 10 | "jsx": "react", 11 | "target": "es2019", 12 | "moduleResolution": "node" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Zero Width Detection 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = function (api) { 2 | api.cache(true); 3 | 4 | return { 5 | presets: [ 6 | '@babel/typescript', 7 | ['@babel/preset-env', { useBuiltIns: 'usage', corejs: 3 }], 8 | '@babel/preset-react', 9 | [ 10 | '@emotion/babel-preset-css-prop', 11 | { 12 | sourceMap: process.env.NODE_ENV !== 'test', 13 | labelFormat: '[filename]-[local]', 14 | }, 15 | ], 16 | ], 17 | plugins: ['react-hot-loader/babel'], 18 | }; 19 | }; 20 | -------------------------------------------------------------------------------- /src/components/GithubStar.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { css } from '@emotion/core'; 3 | 4 | const style = css` 5 | width: 150px; 6 | height: 30px; 7 | position: absolute; 8 | top: 25px; 9 | right: 0px; 10 | 11 | @media (max-width: 500px) { 12 | display: none; 13 | } 14 | `; 15 | 16 | export const GithubStar = () => ( 17 |