Skip to content

Instantly share code, notes, and snippets.

View suzubara's full-sized avatar

Suzanne Rozier suzubara

18 followers · 13 following
View GitHub Profile
@suzubara
suzubara / dependencies.md
Created June 22, 2022 18:46
JS dependency updates

JS/Node dependency management

This document describes methodology & tips for keeping our JS dependencies up-to-date. It assumes we are using classic yarn over npm.

Using an automated tool such as Dependabot or Renovatebot can help streamline updates, but there is no substitute for having a reasonable understanding of what our dependencies are, and why we have them.

Dependency resolution & lockfile

First of all, it's useful to know the syntax of the package.json1 and yarn.lock files. Understanding how to read these can be extremely helpful when trying to determine what version of a dependency is being installed, and to debug potential issues.

@suzubara
suzubara / add-icons.md
Created July 17, 2020 19:21
Icons doc

How to add icons

Even though we're using USWDS in this project, there are not actually many icons included by default. Therefore, we've set up react-fontawesome in order to be able to easily include icons from Font Awesome. Specifically, we are using the library implementation described here.

Available Icons

To view icons we have already added, you can view the Basics > Icons page in Storybook.

Adding New Icons

@suzubara
suzubara / RenewSessionModal.jsx
Created July 13, 2020 21:25
Renew Session Modal component
import React, { useRef, useState } from 'react'
import ReactDOM from 'react-dom'
import {
Button,
Modal,
connectModal,
ConnectedModalProps,
useModal,
} from '@trussworks/react-uswds'
@suzubara
suzubara / NewStep.jsx
Created July 6, 2020 21:37
example of wizard page with formik
import React from 'react';
import PropTypes from 'prop-types';
import { Formik } from 'formik';
import { TextInput, Label } from '@trussworks/react-uswds';
import ConnectedWizardPage from 'shared/WizardPage';
const NewStep = (props) => {
const { title, description, pageList, pageKey } = props;
@suzubara
suzubara / ExampleComponent.tsx
Created March 4, 2020 19:58
Confirmation Generator example
import React from 'react'
import { Button, Modal, useModal } from '@trussworks/react-uswds'
import { useGenerator } from '../../containers/customHooks'
import { confirmationModalFlow } from '../../containers/generators'
const ConfirmCloseInvestigationModal = ({
isOpen,
onClose,
onConfirm,
@suzubara
suzubara / SampleModal.tsx
Created February 21, 2020 23:36
Modals with hooks!
import React from 'react'
import { Button, Modal } from '@trussworks/react-uswds'
import { connectModal,
ModalProps,
} from './useModal'
interface ConfirmCloseInvestigationModalProps extends ModalProps {
casefileNumber: string
onConfirm?: () => void
@suzubara
suzubara / frontend_project_structure.md
Created February 12, 2020 21:10
Front End project structure

Frontend Architecture

Directory Structure

All of the frontend (browser) code is located in /src. Here is a brief outline of the directories & how the code is organized:

  • /src/components - Low-level React Components that are more about rendering UI than handling application logic, and should typically not be connected to providers directly. Aim for abstract, generic components that can be shared across the application easily, and will usually have corresponding stories files for viewing in Storybook.

  • /src/config - High-level configuration definitions relevant to the whole application (such as routes).

@suzubara
suzubara / keybase.md
Created April 14, 2015 18:05

Keybase proof

I hereby claim:

  • I am suzubara on github.
  • I am suzubara (https://keybase.io/suzubara) on keybase.
  • I have a public key whose fingerprint is F176 DC9C 148D 7609 2125 5A74 6DED 6CDF EF73 06C4

To claim this, I am signing this object:

@suzubara
suzubara / html-project.html
Created October 16, 2014 12:48
<!DOCTYPE html>
<html>
<head>
<!-- THIS IS CSS! EDIT AT YOUR OWN RISK! -->
<style type="text/css">
header {
border:2px solid #000;
margin-bottom:20px;