abdulkader

find . -name "node_modules" -exec rm -rf '{}' +; find . -name "package-lock.json" -exec rm -rf '{}' +; 

abdulkader

export default function () {
  return process.env.NODE_ENV === 'development' ? (
    <script src="http://localhost:35729/livereload.js?snipver=1"></script>
  ) : null
}

abdulkader

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm bash_completion

alias nr="npm run";
alias ns="npm run start";
alias nd="npm run dev";
alias nb="npm run build";
alias nsl="npm run start:local";
alias gpl="git pull";

abdulkader

Integrate Jest & React Testing Library in a React Vite Project

1. Install Dependencies

yarn add --dev jest babel-jest @babel/preset-env @babel/core @babel/plugin-syntax-jsx @babel/preset-react @testing-library/dom @testing-library/jest-dom @testing-library/react @testing-library/user-event babel-preset-react-app identity-obj-proxy jest-circus jest-scss-transform jest-watch-typeahead

2. Set Jest & babel configs in package.json

"jest": {
    "roots": [

abdulkader

Storybook Docs w/ CRA & TypeScript

This is a quick-and-dirty walkthrough to set up a fresh project with Storybook Docs, Create React App, and TypeScript. If you're looking for a tutorial, please see Design Systems for Developers, which goes into much more depth but does not use Typescript.

The purpose of this walkthrough is a streamlined Typescript / Docs setup that works out of the box, since there are countless permutations and variables which can influence docs features, such as source code display, docgen, and props tables.

Step 1: Initialize CRA w/ TS

npx create-react-app cra-ts --template typescript

abdulkader

find ./ui -name .eslintignore -type f -delete
find ./ui -name .eslintrc.js -type f -delete
find ./ui -name .prettierrc.js -type f -delete
find ./ui -name babel.config.js -type f -delete
find ./ui -name jest.config.js -type f -delete
find ./ui -name postcss.config.js -type f -delete
find ./ui -name tailwind.config.js -type f -delete
find ./ui -name tsdx.config.js -type f -delete

abdulkader

find /path/to/folder -name "*.oldextension" -exec sh -c 'mv "$0" "${0%.oldextension}.newextension"' {} \;

abdulkader

# This script uses the find command to get a list of all directories in the current directory, and then loops over each directory and copies the specified file into it using the cp command. Note that the cp command will overwrite any files with the same name in each directory, so be careful with this script.


#!/bin/bash

# Set the filename to be copied
filename="./jest.config.js"

# Get a list of all directories in the current directory
dirs=$(find . -maxdepth 1 -type d)

abdulkader

{
  "editor.formatOnSave": true,
  "workbench.colorCustomizations": {
    "activityBar.activeBackground": "#276680",
    "activityBar.activeBorder": "#49163a",
    "activityBar.background": "#276680",
    "activityBar.foreground": "#e7e7e7",
    "activityBar.inactiveForeground": "#e7e7e799",
    "activityBarBadge.background": "#49163a",
    "activityBarBadge.foreground": "#e7e7e7",