itaditya

function getOs() {
  const MOD = /Mac|iPod|iPhone|iPad/.test(navigator.platform) ? 'mac' : 'win';
}

itaditya

import convertToRoutes from 'your-awesome-oss-pkg';

const modules = {
  'index.js': IndexComp,
  'about.js': AboutComp,
  'team.js': TeamComp,
  'team/index.js': TeamIndexComp,
  'team/join.js': TeamJoinComp,
  'team/$username.js': TeamMemberComp,
};

itaditya

Remix treats nested routes files differently. Its not simply a flat list of routes. Take this example-

routes
  team
    index.js
    $username.js
  team.js

itaditya

import React from 'react';
import './button.css';

/**
 * @param { import('./types').ButtonProps} props
 */
export const Button = (props) => {
  const { backgroundColor = '', primary = false, size = 'medium', label, ...restProps } = props;
  const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
  return (

itaditya

interface Props<TParams> {
  params: TParams,
  path: string,
  children: React.ReactChild,
}

const CustomLink = <TParams extends any>(props: Props<TParams>) => {
  const {
    path,
    params,

itaditya

const { useEffect } = require("react");

// Suffers from Stale Closures
export function useUpdatedExit(props) {
  // initial = 0, latest = 0
  // initial = 0, latest = 1
  // initial = 0, latest = 2
  const { initial, latest, cb } = props;

  function handleExit() {

itaditya

function sleep(duration, shouldFail) {
  return new Promise((resolve, reject) => {
    const cb = shouldFail ? reject : resolve;
    setTimeout(() => cb(), duration);
  });
}

itaditya

function Actor({ name }) {
  function sayHello() {
    console.log('hello', name);
  }

  return (
    <button onClick={sayHello}>
      Say Hello
    </button>
  );

itaditya

.redact {
  background-color: #000 !important;
  border-radius: 6px !important;
  color: transparent !important;
  filter: brightness(0) !important;
}

itaditya

const toastProps = {
  purpose: 'alert',
  variant: 'success',
  isClosable: false,
  onClose: handleClose,
  root: {
    'data-testId': 'root-wrapper',
  },
  content: {
    id: 'main-toast',