OmarZeidan

<style>
  .logo-holder {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #000;
    width: 80px;
    height: 80px;
    border-radius: 9999px;
  }

OmarZeidan

// @Source: https://stackoverflow.com/questions/30474506/replace-part-of-string-with-tag-in-jsx
// Also see: https://github.com/facebook/react/issues/3386 For some alternatives and libraries

function getHighlightedText(text: string, higlight: string) {
  // Split on higlight term and include term into parts, ignore case
  const parts = text.split(new RegExp(`(${higlight})`, 'gi'));
  return (
    <span>
      {parts.map((part, i) => (
        <span

OmarZeidan

import React from 'react';
import InputC from './Input';

<InputC
  type="text"
  placeholder="Search by name or email address."
/>

// One problem I find here that you can give the input a property that it shouldn't be part of the input
// e.g `src` 🤷🏻

OmarZeidan

// Arabic and English letters mixed!
const regexTst = /^[\A-Za-z\.\,\u0600-\u065F\u066A-\u06EF\u06FA-\u06FF\'\s\.\,]+$/;

// Only English Letters
const regexTst = /^[a-zA-Z\s]*$/;

// Numbers Only
const regexTst = /^[0-9_\-\)\(\+]+$/i;

// Alpha Only

OmarZeidan

feat: 🎉(new feature for the user, not a new feature for build script)
fix: 🛠 (bug fix for the user, not a fix to a build script)
docs: 📚 (changes to the documentation)
style: 💅🏻(formatting, missing semi colons, etc; no production code change)
refactor: 😎 (refactoring production code, eg. renaming a variable)
test: 💩 (adding missing tests, refactoring tests; no production code change)
chore: 🩺(updating grunt tasks etc; no production code change)

Example: 

OmarZeidan

function polyfillNodeList() {
  NodeList.prototype.forEach = function(callback, thisArg) {
    thisArg = thisArg || window;
    for (var i = 0; i < this.length; i++) {
      callback.call(thisArg, this[i], i, this);
    }
  };
}

                                    

OmarZeidan

// .storybook/webpack.config.js
const path = require('path');
const storysource = require.resolve('@storybook/addon-storysource/loader')

module.exports = function({ config }) {
  config.module.rules.push({
    test: /\.jsx?$/,
    loaders: [storysource],
    include: path.resolve(__dirname, '../'), // this fixed it, I think.
    enforce: 'pre',