feat: @rocket.chat/string-helpers (#431)

.vscode/settings.json

@@ -1,5 +1,13 @@
 {
   "eslint.workingDirectories": [
+    {
+      "directory": "packages/css-in-js",
+      "changeProcessCWD": true
+    },
+    {
+      "directory": "packages/emitter",
+      "changeProcessCWD": true
+    },
     {
       "directory": "packages/fuselage",
       "changeProcessCWD": true
@@ -16,6 +24,18 @@
       "directory": "packages/icons",
       "changeProcessCWD": true
     },
+    {
+      "directory": "packages/memo",
+      "changeProcessCWD": true
+    },
+    {
+      "directory": "packages/mp3-encoder",
+      "changeProcessCWD": true
+    },
+    {
+      "directory": "packages/string-helpers",
+      "changeProcessCWD": true
+    },
     {
       "directory": "packages/ui-kit",
       "changeProcessCWD": true

package.json

@@ -1,10 +1,8 @@
 {
   "private": true,
-  "workspaces": {
-    "packages": [
-      "packages/*"
-    ]
-  },
+  "workspaces": [
+    "packages/*"
+  ],
   "devDependencies": {
     "husky": "^5.1.1",
     "lerna": "^3.20.2"

packages/css-in-js/package.json

@@ -44,7 +44,7 @@
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^11.0.1",
     "@rollup/plugin-typescript": "^8.1.0",
-    "@types/jest": "^26.0.19",
+    "@types/jest": "^26.0.22",
     "@types/stylis": "^4.0.0",
     "@typescript-eslint/eslint-plugin": "^4.11.0",
     "@typescript-eslint/parser": "^4.11.0",

packages/emitter/package.json

@@ -51,7 +51,7 @@
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^11.0.1",
     "@rollup/plugin-typescript": "^8.1.0",
-    "@types/jest": "^26.0.19",
+    "@types/jest": "^26.0.22",
     "@typescript-eslint/eslint-plugin": "^4.11.1",
     "@typescript-eslint/parser": "^4.11.1",
     "documentation": "^13.1.0",

packages/fuselage-hooks/package.json

@@ -51,7 +51,7 @@
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^9.0.0",
     "@rollup/plugin-typescript": "^6.0.0",
-    "@types/jest": "^26.0.15",
+    "@types/jest": "^26.0.22",
     "@types/react-dom": "^16.9.8",
     "@types/resize-observer-browser": "^0.1.3",
     "@types/use-subscription": "^1.0.0",

packages/fuselage/package.json

@@ -75,7 +75,7 @@
     "@storybook/react": "^6.1.11",
     "@storybook/source-loader": "^6.1.11",
     "@storybook/theming": "^6.1.11",
-    "@types/jest": "^26.0.20",
+    "@types/jest": "^26.0.22",
     "autoprefixer": "^10.0.1",
     "babel-loader": "^8.1.0",
     "caniuse-lite": "^1.0.30001151",

packages/fuselage/tsconfig.json

@@ -2,7 +2,7 @@
   "compilerOptions": {
     "rootDir": "./src/",
     "target": "ES5",
-    "module": "ES2020",
+    "module": "ESNext",
     "lib": ["ES2020", "DOM"],
     "downlevelIteration": true,
     "declaration": true,

packages/memo/package.json

@@ -37,7 +37,6 @@
     "url": "https://github.com/RocketChat/Rocket.Chat.Fuselage/issues"
   },
   "devDependencies": {
-    "@types/react": "^16.14.0",
     "eslint": "^7.18.0",
     "eslint-config-prettier": "^7.2.0",
     "eslint-plugin-import": "^2.22.1",

packages/memo/tsconfig.json

@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "module": "ES2020",
+    "module": "ESNext",
     "declaration": true,
     "declarationMap": true,
     "sourceMap": true,

packages/mp3-encoder/package.json

@@ -51,7 +51,7 @@
     "@rollup/plugin-commonjs": "^17.0.0",
     "@rollup/plugin-node-resolve": "^11.0.1",
     "@rollup/plugin-typescript": "^8.1.0",
-    "@types/jest": "^26.0.19",
+    "@types/jest": "^26.0.22",
     "@typescript-eslint/eslint-plugin": "^4.11.0",
     "@typescript-eslint/parser": "^4.11.0",
     "documentation": "^13.1.0",

packages/string-helpers/.eslintignore

@@ -0,0 +1,2 @@
+/node_modules
+/dist

packages/string-helpers/.eslintrc.js

@@ -0,0 +1,62 @@
+module.exports = {
+  extends: [
+    'plugin:@typescript-eslint/recommended',
+    'plugin:@typescript-eslint/eslint-recommended',
+    '@rocket.chat/eslint-config',
+    'prettier',
+  ],
+  parser: '@typescript-eslint/parser',
+  plugins: ['@typescript-eslint', 'prettier'],
+  rules: {
+    '@typescript-eslint/ban-ts-ignore': 'off',
+    '@typescript-eslint/indent': 'off',
+    '@typescript-eslint/no-extra-parens': 'off',
+    '@typescript-eslint/no-explicit-any': 'off',
+    '@typescript-eslint/no-unused-vars': [
+      'error',
+      {
+        argsIgnorePattern: '^_',
+      },
+    ],
+    'func-call-spacing': 'off',
+    'indent': 'off',
+    'import/order': [
+      'error',
+      {
+        'newlines-between': 'always',
+        'groups': [
+          'builtin',
+          'external',
+          'internal',
+          ['parent', 'sibling', 'index'],
+        ],
+        'alphabetize': {
+          order: 'asc',
+        },
+      },
+    ],
+    'jsx-quotes': ['error', 'prefer-single'],
+    'no-extra-parens': 'off',
+    'no-spaced-func': 'off',
+    'no-unused-vars': 'off',
+    'no-useless-constructor': 'off',
+    'no-use-before-define': 'off',
+    'prefer-arrow-callback': ['error', { allowNamedFunctions: true }],
+    'prettier/prettier': 2,
+  },
+  env: {
+    browser: true,
+    es6: true,
+    jest: true,
+  },
+  settings: {
+    'import/resolver': {
+      node: {
+        extensions: ['.js', '.ts', '.tsx'],
+      },
+    },
+    'react': {
+      version: 'detect',
+    },
+  },
+};

packages/string-helpers/.gitignore

@@ -0,0 +1 @@
+/dist

packages/string-helpers/.prettierignore

@@ -0,0 +1,2 @@
+/node_modules
+/dist

packages/string-helpers/.prettierrc

@@ -0,0 +1,7 @@
+{
+  "singleQuote": true,
+  "semi": true,
+  "quoteProps": "consistent",
+  "jsxSingleQuote": true,
+  "printWidth": 80
+}

packages/string-helpers/jest.config.js

@@ -0,0 +1,13 @@
+module.exports = {
+  preset: 'ts-jest',
+  errorOnDeprecated: true,
+  testMatch: ['<rootDir>/src/**/*.spec.[jt]s?(x)'],
+  globals: {
+    'ts-jest': {
+      tsconfig: {
+        noUnusedLocals: false,
+        noUnusedParameters: false,
+      },
+    },
+  },
+};

packages/string-helpers/package.json

@@ -0,0 +1,69 @@
+{
+  "name": "@rocket.chat/string-helpers",
+  "version": "0.23.0",
+  "description": "Helper functions for string manipulation",
+  "keywords": [
+    "string",
+    "helpers"
+  ],
+  "author": {
+    "name": "Rocket.Chat",
+    "url": "https://rocket.chat/"
+  },
+  "homepage": "https://github.com/RocketChat/Rocket.Chat.Fuselage#readme",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/RocketChat/Rocket.Chat.Fuselage.git"
+  },
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/esm/index.d.ts",
+  "typesVersions": {
+    "<4.1": {
+      "*": [
+        "ts3.4/*"
+      ]
+    }
+  },
+  "files": [
+    "/dist"
+  ],
+  "scripts": {
+    "build": "run-s .:build:clean .:build:esm .:build:cjs .:build:ts3.4",
+    ".:build:clean": "rimraf dist",
+    ".:build:esm": "tsc -p tsconfig.json",
+    ".:build:cjs": "tsc -p tsconfig-cjs.json",
+    ".:build:ts3.4": "downlevel-dts dist/esm/ dist/ts3.4/ --to=3.4",
+    "lint": "eslint src",
+    "lint-fix": "eslint --fix src",
+    "lint-staged": "lint-staged",
+    "test": "jest --runInBand"
+  },
+  "bugs": {
+    "url": "https://github.com/RocketChat/Rocket.Chat.Fuselage/issues"
+  },
+  "devDependencies": {
+    "@types/jest": "^26.0.22",
+    "@typescript-eslint/eslint-plugin": "^4.22.0",
+    "@typescript-eslint/parser": "^4.22.0",
+    "downlevel-dts": "^0.7.0",
+    "eslint": "^7.24.0",
+    "eslint-config-prettier": "^8.2.0",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-prettier": "^3.4.0",
+    "jest": "^26.6.3",
+    "lint-staged": "^10.5.4",
+    "npm-run-all": "^4.1.5",
+    "prettier": "^2.2.1",
+    "rimraf": "^3.0.2",
+    "ts-jest": "^26.5.5",
+    "typescript": "^4.2.4"
+  },
+  "dependencies": {
+    "tslib": "^2.2.0"
+  }
+}

packages/string-helpers/src/capitalize.spec.ts

@@ -0,0 +1,39 @@
+import { capitalize } from './capitalize';
+
+describe('capitalize', () => {
+  it('should convert "xyz" to "Xyz"', () => {
+    expect(capitalize('xyz')).toBe('Xyz');
+  });
+
+  it('should convert "xyz xyz" to "Xyz xyz"', () => {
+    expect(capitalize('xyz xyz')).toBe('Xyz xyz');
+  });
+
+  it('should convert " xyz" to " xyz"', () => {
+    expect(capitalize(' xyz')).toBe(' xyz');
+  });
+
+  it('should convert undefined to ""', () => {
+    expect(capitalize((undefined as unknown) as string)).toBe('');
+  });
+
+  it('should convert null to ""', () => {
+    expect(capitalize((null as unknown) as string)).toBe('');
+  });
+
+  it('should convert false to ""', () => {
+    expect(capitalize((false as unknown) as string)).toBe('');
+  });
+
+  it('should convert true to ""', () => {
+    expect(capitalize((true as unknown) as string)).toBe('');
+  });
+
+  it('should convert 0 to ""', () => {
+    expect(capitalize((0 as unknown) as string)).toBe('');
+  });
+
+  it('should convert 1 to ""', () => {
+    expect(capitalize((1 as unknown) as string)).toBe('');
+  });
+});

packages/string-helpers/src/capitalize.ts

@@ -0,0 +1,7 @@
+export const capitalize = (s: string): string => {
+  if (typeof s !== 'string') {
+    return '';
+  }
+
+  return s.charAt(0).toUpperCase() + s.slice(1);
+};

packages/string-helpers/src/escapeHTML.spec.ts

@@ -0,0 +1,19 @@
+import { escapeHTML } from './escapeHTML';
+
+describe('escapeHTML', () => {
+  it('works', () => {
+    expect(escapeHTML('<div>Blah & "blah" & \'blah\'</div>')).toBe(
+      '&lt;div&gt;Blah &amp; &quot;blah&quot; &amp; &#39;blah&#39;&lt;/div&gt;'
+    );
+    expect(escapeHTML('&lt;')).toBe('&amp;lt;');
+    expect(escapeHTML(' ')).toBe(' ');
+    expect(escapeHTML('¢')).toBe('&cent;');
+    expect(escapeHTML('¢ £ ¥ € © ®')).toBe(
+      '&cent; &pound; &yen; &euro; &copy; &reg;'
+    );
+    expect(escapeHTML((5 as unknown) as string)).toBe('5');
+    expect(escapeHTML('')).toBe('');
+    expect(escapeHTML((null as unknown) as string)).toBe('');
+    expect(escapeHTML((undefined as unknown) as string)).toBe('');
+  });
+});

packages/string-helpers/src/escapeHTML.ts

@@ -0,0 +1,31 @@
+const characterToHtmlEntityCode = {
+  '¢': 'cent',
+  '£': 'pound',
+  '¥': 'yen',
+  '€': 'euro',
+  '©': 'copy',
+  '®': 'reg',
+  '<': 'lt',
+  '>': 'gt',
+  '"': 'quot',
+  '&': 'amp',
+  "'": '#39',
+} as const;
+
+const regex = new RegExp(
+  `[${Object.keys(characterToHtmlEntityCode).join('')}]`,
+  'g'
+);
+
+const toString = (object: unknown): string => (object ? `${object}` : '');
+
+const isEscapable = (
+  char: string
+): char is keyof typeof characterToHtmlEntityCode =>
+  char in characterToHtmlEntityCode;
+
+const escapeChar = (char: string): string =>
+  isEscapable(char) ? `&${characterToHtmlEntityCode[char]};` : '';
+
+export const escapeHTML = (str: string): string =>
+  toString(str).replace(regex, escapeChar);