initial commit

.eslintignore

@@ -0,0 +1,4 @@
+node_modules
+dist
+coverage
+storybook-static

.eslintrc

@@ -0,0 +1,29 @@
+{
+  "extends": ["airbnb-typescript", "plugin:prettier/recommended", "plugin:jest/recommended"],
+  "parserOptions": {
+    "project": "./tsconfig.json"
+  },
+  "rules": {
+    "@typescript-eslint/indent": "off",
+    "react/jsx-props-no-spreading": "off"
+  },
+  "overrides": [
+    {
+      "files": ["**/*.tsx"],
+      "rules": {
+        "react/prop-types": "off"
+      }
+    },
+    {
+      "files": ["**/*.storiess.tsx"],
+      "rules": {
+        "import/no-extraneous-dependencies": "off"
+      }
+    }
+  ],
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  }
+}

.gitattributes

@@ -0,0 +1,27 @@
+# Common .gitattributes file courtesy of
+# https://github.com/alexkaratarakis/gitattributes/blob/master/Common.gitattributes
+
+# Auto detect text files and perform LF normalization
+* text=auto eol=lf
+
+# The above will handle all files NOT found below
+
+# Documents
+*.pdf  diff=astextplain
+*.PDF  diff=astextplain
+*.rtf  diff=astextplain
+*.RTF  diff=astextplain
+*.md   text
+
+# Graphics
+*.png  binary
+*.jpg  binary
+*.jpeg binary
+*.gif  binary
+*.tif  binary
+*.tiff binary
+*.ico  binary
+# SVG treated as an asset (binary) by default.
+*.svg  binary
+#*.svg text
+*.eps  binary

.gitignore

@@ -0,0 +1,7 @@
+*.log
+.DS_Store
+node_modules
+.cache
+coverage
+dist
+storybook-static

.prettierignore

@@ -0,0 +1,4 @@
+node_modules
+dist
+coverage
+storybook-static

.prettierrc

@@ -0,0 +1,6 @@
+{
+  "endOfLine": "lf",
+  "printWidth": 120,
+  "singleQuote": true,
+  "trailingComma": "all"
+}

.storybook/main.js

@@ -0,0 +1,4 @@
+module.exports = {
+  stories: ['../src/**/*.stories.@(tsx|mdx)'],
+  addons: ['@storybook/addon-docs', '@storybook/addon-knobs', '@storybook/addon-actions'],
+};

.storybook/manager.js

@@ -0,0 +1,13 @@
+import { addons } from '@storybook/addons';
+import { create } from '@storybook/theming/create';
+
+addons.setConfig({
+  theme: create({
+    brandTitle: 'react-obfuscate-ts',
+    brandUrl: 'https://github.com/South-Paw/react-obfuscate-ts',
+  }),
+  previewTabs: {
+    // 'storybook/docs/panel': { index: -1 },
+    canvas: { hidden: true },
+  },
+});

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 Alex Gabites
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,41 @@
+# @south-paw/react-obfuscate-ts
+
+🕵️ A React component to obfuscate your website's contact links
+
+[![npm](https://img.shields.io/npm/v/@south-paw/react-obfuscate-ts.svg)](https://www.npmjs.com/package/@south-paw/react-obfuscate-ts)
+
+## Features
+
+- Easy to implement component for hiding your contact links or text in the DOM.
+- Supports obfuscation of `email`, `tel`, `sms`, `href` and any other string of text as a child.
+- Out of the box `aria-label` for screen readers to identify the obfuscated element.
+- Supports the styled-components `as` prop for use with other Link components (such as your own UI libraries link).
+
+## How it works
+
+The component reverses the content in the DOM for you and uses CSS to re-reverse the content so it appears normally to the user, it also replaces the content of the link's `href` attribute. When a user hovers, clicks or focuses the element, it is considered "interacted" and has its content un-reversed and the correct `href` attribute applied. This ideally makes the link useless for a bot/spammer but ensures it remains user friendly when viewed normally.
+
+## Basic usage
+
+```jsx
+import React from 'react';
+import { Obfuscate } from '@south-paw/react-obfuscate-ts';
+
+// use the component's children to create the link and display
+const Example = () => <Obfuscate email>hello@example.com</Obfuscate>;
+
+// or specify the email address for the link with custom children
+const Example2 = () => <Obfuscate email="[email protected]">Email me!</Obfuscate>;
+```
+
+## Inspiration
+
+I was inspired to create this package after using the [coston/react-obfuscate](https://github.com/coston/react-obfuscate) package for two years. After switching the majority of my own code bases to TypeScript, I was disapointed to see there was no `@types` package for this original version and that it wasn't reliably obfuscating in some of my usages of the component. I decided that I'd do a variant of that component with a new API, a few minor bug fixes and one that included types as well.
+
+## Issues and Bugs
+
+If you manage to find any, please report them [here](https://github.com/South-Paw/react-obfuscate-ts/issues) so they can be squashed.
+
+## License
+
+MIT, see the [LICENSE](./LICENSE) file.

package.json

@@ -0,0 +1,81 @@
+{
+  "name": "@south-paw/react-obfuscate-ts",
+  "version": "0.0.1-alpha.1",
+  "description": "A React component to obfuscate your website's contact links",
+  "keywords": [
+    "react",
+    "component",
+    "obfuscate",
+    "hide",
+    "email",
+    "tel",
+    "sms",
+    "link",
+    "countries"
+  ],
+  "homepage": "https://github.com/South-Paw/react-obfuscate-ts",
+  "bugs": "https://github.com/South-Paw/react-obfuscate-ts",
+  "license": "MIT",
+  "author": {
+    "name": "Alex Gabites",
+    "email": "[email protected]",
+    "url": "http://southpaw.co.nz"
+  },
+  "files": [
+    "dist"
+  ],
+  "main": "dist/index.js",
+  "typings": "dist/index.d.ts",
+  "module": "dist/react-obfuscate-ts.esm.js",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/South-Paw/react-obfuscate-ts.git"
+  },
+  "scripts": {
+    "clean": "rimraf dist",
+    "start": "tsdx watch",
+    "start:storybook": "start-storybook -p 9000",
+    "build": "tsdx build",
+    "build:storybook": "build-storybook",
+    "lint": "eslint ./src",
+    "test": "tsdx test --passWithNoTests",
+    "prepublishOnly": "yarn clean && yarn build"
+  },
+  "dependencies": {},
+  "devDependencies": {
+    "@babel/core": "^7.10.5",
+    "@storybook/addon-actions": "^6.0.0-rc.14",
+    "@storybook/addon-docs": "^6.0.0-rc.14",
+    "@storybook/addon-knobs": "^6.0.0-rc.14",
+    "@storybook/react": "^6.0.0-rc.14",
+    "@types/react": "^16.9.43",
+    "@types/react-dom": "^16.9.8",
+    "@types/styled-components": "^5.1.1",
+    "@typescript-eslint/eslint-plugin": "^3.6.1",
+    "@typescript-eslint/parser": "^3.6.1",
+    "eslint": "^7.4.0",
+    "eslint-config-airbnb-typescript": "^8.0.2",
+    "eslint-config-prettier": "^6.11.0",
+    "eslint-plugin-import": "^2.22.0",
+    "eslint-plugin-jest": "^23.18.0",
+    "eslint-plugin-jsx-a11y": "^6.3.1",
+    "eslint-plugin-prettier": "^3.1.4",
+    "eslint-plugin-react": "^7.20.3",
+    "eslint-plugin-react-hooks": "^4.0.8",
+    "prettier": "^2.0.5",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "rimraf": "^3.0.2",
+    "styled-components": "^5.1.1",
+    "tsdx": "^0.13.2",
+    "tslib": "^2.0.0",
+    "typescript": "^3.9.6"
+  },
+  "peerDependencies": {
+    "react": ">=16.13.0",
+    "styled-components": ">=5.1.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

src/Obfuscate.stories.tsx

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import styled from 'styled-components';
+import { Obfuscate } from '.';
+
+const Anchor = styled('a')`
+  color: green;
+`;
+
+export default {
+  title: 'Obfuscate',
+  component: Obfuscate,
+};
+
+export const Simple = () => <Obfuscate>This text is obfuscated</Obfuscate>;
+
+export const Text = () => <Obfuscate>Obfuscate this text</Obfuscate>;
+
+export const Email = () => <Obfuscate email>[email protected]</Obfuscate>;
+
+export const Tel = () => <Obfuscate tel>+01 012 12345678</Obfuscate>;
+
+export const Sms = () => <Obfuscate sms>+01 012 12345678</Obfuscate>;
+
+export const Href = () => <Obfuscate href="https://example.com" target="_blank" rel="noopener noreferrer" />;
+
+export const CustomChildren = () => (
+  <div style={{ display: 'inline-flex', flexDirection: 'column', alignItems: 'flex-start' }}>
+    <Obfuscate email="[email protected]">Email</Obfuscate>
+    <Obfuscate tel="+01 012 12345678">Telephone</Obfuscate>
+    <Obfuscate sms="+01 012 12345678">SMS</Obfuscate>
+    <Obfuscate href="https://example.com" target="_blank" rel="noopener noreferrer">
+      Href
+    </Obfuscate>
+  </div>
+);
+
+export const CustomComponent = () => (
+  <div style={{ display: 'inline-flex', flexDirection: 'column', alignItems: 'flex-start' }}>
+    <Obfuscate as="span">as `span` component</Obfuscate>
+    <Obfuscate as={Anchor} href="//example.com" target="_blank" rel="noopener noreferrer">
+      as custom `Anchor` component
+    </Obfuscate>
+  </div>
+);