TClark1011

import { extendTheme } from '@chakra-ui/react';

export const theme = extendTheme({
  layerStyles: {
    noFocusOutline: {
      '--chakra-shadows-outline': 'none',
    },
  },
  config: {
    useSystemColorMode: true,

TClark1011

Event Functions In React

When writing functions that can handle various different types of dom events in react, it's important to remember that react uses its own custom type of events which it calls "synthetic events". To best handle these, we create a custom type which can be either a native event or a react synthetic event.

Example code

import type { SyntheticEvent } from 'react';

type ReactCompatibleEvent = Event | SyntheticEvent;

TClark1011

// branded types to allow for better type inference
// with default generic types
/* eslint-disable @typescript-eslint/naming-convention */
type NO_PAYLOAD = {
	JgJES6BF8uyaOwF1: "FY7eBhPYJlqOxuVp";
};

type OPTIONAL_PAYLOAD = {
	A7nWdXs0r5RLuHRf: "zPcrRNRIl4r5IHbA";
};

TClark1011

First run

yarn add --dev jest babel-jest @babel/preset-env svelte-jester jest-transform-stub @testing-library/svelte @testing-library/user-event babel-plugin-transform-vite-meta-env @testing-library/jest-dom ts-jest

Then copy over jest.config.json into project root.

Run with

TClark1011

module.exports = {
	"*.{js,ts,svelte}": "eslint --cache --fix",
	"*.{js,css,md,ts,svelte}": "prettier --write",
};

TClark1011

Auto Versioning/Release CI Workflow

This workflow uses standard-version to automatically handle version bumping and changelog generation.

Installation

• Put release.yaml inside .github/workflows/
• (Optional) If you want to be able to manually set what type of release will be performed create the following labels (as in the labels that can be applied to issues and PRs) in your repo:
  • force-release:patch
• force-release:minor

TClark1011

name: check
on: pull_request
jobs:
  test-and-build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v2
        with:
          node-version: "14"

TClark1011

1. Run yarn add cypress --dev
2. Add cypress.json to root
3. Run yarn run cypress open.
4. Close the window
5. Rename cypress/plugins/index.js to index.cjs
6. Create a new tsconfig.json inside the cypress folder and copy the contents from this gist
7. Add the following to your .gitignore:

cypress/videos
cypress/screenshots

TClark1011

module.exports = {
	root: true,
	parser: "@typescript-eslint/parser",
	extends: [
		"eslint:recommended",
		"plugin:@typescript-eslint/recommended",
		"airbnb-base",
		"airbnb-typescript/base",
		"plugin:jest/recommended",
		"plugin:sonarjs/recommended",

TClark1011

button,
input[type="checkbox"] {
	cursor: pointer;
}

li {
	display: flex;
	align-items: center;
}