Skip to content

feat: UX - Initial create form flow #33

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 45 commits into from
Closed

feat: UX - Initial create form flow #33

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
45 commits
Select commit Hold shift + click to select a range
18dd18f
Add several dependencies needed for API routes
bryphe-coder Jan 19, 2022
7329cca
Add placeholder API and projectService
bryphe-coder Jan 19, 2022
6726f40
Create initial workspaces API
bryphe-coder Jan 19, 2022
3f932c2
Port over SafeHydrate component
bryphe-coder Jan 19, 2022
6fdb43f
Stub pages for workspace creation
bryphe-coder Jan 19, 2022
97b2383
Add missed favicons
bryphe-coder Jan 19, 2022
086d533
Formatting
bryphe-coder Jan 19, 2022
82989d3
Merge branch 'bryphe/fix/css-hydration-errors' into bryphe/feat/initi…
bryphe-coder Jan 19, 2022
c305c8d
Initial select page
bryphe-coder Jan 19, 2022
cc411d0
Flip to light theme
bryphe-coder Jan 19, 2022
907a523
Start pulling out AppPage/FormPage
bryphe-coder Jan 19, 2022
56f7515
Start stubbing out API
bryphe-coder Jan 19, 2022
0a5c48a
Start scaffolding project selection
bryphe-coder Jan 19, 2022
aea58ae
Add placeholder icon if none available
bryphe-coder Jan 19, 2022
c92e454
Revert prototyping changes
bryphe-coder Jan 19, 2022
be4c90f
Revert sum changes
bryphe-coder Jan 19, 2022
308de2b
Initial create form
bryphe-coder Jan 19, 2022
d0b0ef1
Rename project function
bryphe-coder Jan 19, 2022
797c82b
Add formik
bryphe-coder Jan 19, 2022
5016b9a
Stub create workspace API
bryphe-coder Jan 19, 2022
8da382b
Hook up formik to create form
bryphe-coder Jan 20, 2022
6fc0a54
Initial shared loading logic
bryphe-coder Jan 20, 2022
e57d1b6
Set up dynamic form components
bryphe-coder Jan 20, 2022
08010c3
Remove leftover buildmode pkg
bryphe-coder Jan 20, 2022
8800445
Add note in api that this is temporary
bryphe-coder Jan 20, 2022
496b42e
Factor ProjectName to separate file
bryphe-coder Jan 20, 2022
646206e
Fix useStyles naming
bryphe-coder Jan 20, 2022
4b6f1c5
Remove accidentally duplicated SafeHydrate
bryphe-coder Jan 20, 2022
961a44b
Remove addition of srverr package
bryphe-coder Jan 20, 2022
eb46f4c
Fix usage of render prop pattern
bryphe-coder Jan 20, 2022
840a796
Fix some compilation issues
bryphe-coder Jan 20, 2022
f20171f
Clean up imports
bryphe-coder Jan 20, 2022
03236df
Add some initial form tests
bryphe-coder Jan 20, 2022
61cd37f
Add smoke test for ProjectIcon
bryphe-coder Jan 20, 2022
99d0a95
Add AppPage smoke test
bryphe-coder Jan 20, 2022
d52bd38
Fix up formatting
bryphe-coder Jan 20, 2022
76d11d4
Remove api from collection metrics since it is temporary
bryphe-coder Jan 20, 2022
ffac475
Clean up unused import
bryphe-coder Jan 20, 2022
e95d75f
Remove and consolidate form ty pes
bryphe-coder Jan 22, 2022
3e8069b
Formatting
bryphe-coder Jan 22, 2022
9492e8e
Merge master
bryphe-coder Jan 22, 2022
e5e02f9
Clean-up utilities
bryphe-coder Jan 22, 2022
5e4a44f
Revert "Remove and consolidate form ty pes"
bryphe-coder Jan 22, 2022
6fe7141
Merge branch 'main' into bryphe/feat/initial-create-form
bryphe-coder Jan 22, 2022
8343ef0
First round of lint failures
bryphe-coder Jan 22, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Merge master
  • Loading branch information
@bryphe-coder
bryphe-coder committed Jan 22, 2022
commit 9492e8e4978d510ca9ddcc22ee651eb730e2f538
1 change: 0 additions & 1 deletion jest.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,6 @@ module.exports = {
"<rootDir>/site/**/*.tsx",
"!<rootDir>/site/**/*.stories.tsx",
"!<rootDir>/site/.next/**/*.*",
"!<rootDir>/site/out/**/*.*",
"!<rootDir>/site/api.ts",
"!<rootDir>/site/dev.ts",
"!<rootDir>/site/next-env.d.ts",
Expand Down
27 changes: 27 additions & 0 deletions site/api.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
<<<<<<< HEAD
import { wait } from "./util"

// TEMPORARY
Expand Down Expand Up @@ -102,3 +103,29 @@ export namespace Workspace {
return Promise.resolve("test-workspace")
}
}
||||||| 36b7b20
=======
interface LoginResponse {
session_token: string
}

export const login = async (email: string, password: string): Promise<LoginResponse> => {
const response = await fetch("/api/v2/login", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
email,
password,
}),
})

const body = await response.json()
if (!response.ok) {
throw new Error(body.message)
}

return body
}
>>>>>>> main
64 changes: 34 additions & 30 deletions site/components/Form/FormTextField.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import TextField, { TextFieldProps } from "@material-ui/core/TextField"
import { FormikContextType as FormikLike } from "formik"
import React from "react"
import { PasswordField } from "./PasswordField"
import { FormikContextType } from "formik"

/**
* FormFieldProps are required props for creating form fields using a factory.
Expand All @@ -11,7 +11,7 @@ export interface FormFieldProps<T> {
* form is a reference to a form or subform and is used to compute common
* states such as error and helper text
*/
form: FormikLike<T>
form: FormikContextType<T>
/**
* formFieldName is a field name associated with the form schema.
*/
Expand All @@ -26,31 +26,31 @@ export interface FormFieldProps<T> {
*/
export interface FormTextFieldProps<T>
extends Pick<
TextFieldProps,
| "autoComplete"
| "autoFocus"
| "children"
| "className"
| "disabled"
| "fullWidth"
| "helperText"
| "id"
| "InputLabelProps"
| "InputProps"
| "inputProps"
| "label"
| "margin"
| "multiline"
| "onChange"
| "placeholder"
| "required"
| "rows"
| "select"
| "SelectProps"
| "style"
| "type"
>,
FormFieldProps<T> {
TextFieldProps,
| "autoComplete"
| "autoFocus"
| "children"
| "className"
| "disabled"
| "fullWidth"
| "helperText"
| "id"
| "InputLabelProps"
| "InputProps"
| "inputProps"
| "label"
| "margin"
| "multiline"
| "onChange"
| "placeholder"
| "required"
| "rows"
| "select"
| "SelectProps"
| "style"
| "type"
>,
FormFieldProps<T> {
/**
* eventTransform is an optional transformer on the event data before it is
* processed by formik.
Expand All @@ -73,6 +73,8 @@ export interface FormTextFieldProps<T>
* without changing the actual underlying value.
*/
displayValueOverride?: string

variant?: "outlined" | "filled" | "standard"
}

/**
Expand Down Expand Up @@ -115,12 +117,13 @@ export const formTextFieldFactory = <T,>(): React.FC<FormTextFieldProps<T>> => {
InputProps,
onChange,
type,
variant = "outlined",
...rest
}) => {
const isError = form.touched[formFieldName] && Boolean(form.errors[formFieldName])

// TODO: When we need to bring back FormikLike / subforms, use
// the `FormikLike.getFieldId` helper.
// Conversion to a string primitive is necessary as formFieldName is an in
// indexable type such as a string, number or enum.
const fieldId = String(formFieldName)

const Component = isPassword ? PasswordField : TextField
Expand All @@ -129,6 +132,7 @@ export const formTextFieldFactory = <T,>(): React.FC<FormTextFieldProps<T>> => {
return (
<Component
{...rest}
variant={variant}
disabled={disabled || form.isSubmitting}
error={isError}
helperText={isError ? form.errors[formFieldName] : helperText}
Expand Down Expand Up @@ -163,4 +167,4 @@ export const formTextFieldFactory = <T,>(): React.FC<FormTextFieldProps<T>> => {
// Required when using an anonymous factory function
component.displayName = "FormTextField"
return component
}
}
27 changes: 22 additions & 5 deletions site/pages/_app.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,10 @@ import React from "react"
import CssBaseline from "@material-ui/core/CssBaseline"
import ThemeProvider from "@material-ui/styles/ThemeProvider"

import { light } from "../theme"
import { SWRConfig } from "swr"
import { AppProps } from "next/app"
import { UserProvider } from "../contexts/UserContext"
import { light } from "../theme"

/**
* ClientRender is a component that only allows its children to be rendered
Expand All @@ -21,10 +23,25 @@ const ClientRender: React.FC = ({ children }) => (
const MyApp: React.FC<AppProps> = ({ Component, pageProps }) => {
return (
<ClientRender>
<ThemeProvider theme={light}>
<CssBaseline />
<Component {...pageProps} />
</ThemeProvider>
<SWRConfig
value={{
fetcher: async (url: string) => {
const res = await fetch(url)
if (!res.ok) {
const err = new Error((await res.json()).error?.message || res.statusText)
throw err
}
return res.json()
},
}}
>
<UserProvider>
<ThemeProvider theme={light}>
<CssBaseline />
<Component {...pageProps} />
</ThemeProvider>
</UserProvider>
</SWRConfig>
</ClientRender>
)
}
Expand Down
1 change: 1 addition & 0 deletions site/pages/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import React from "react"

import { RedirectPage } from "../components/PageTemplates"

export const IndexPage: React.FC = () => {
Expand Down
80 changes: 77 additions & 3 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -277,7 +277,7 @@
dependencies:
regenerator-runtime "^0.13.4"

"@babel/runtime@^7.12.5", "@babel/runtime@^7.15.4", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
"@babel/runtime@^7.10.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.15.4", "@babel/runtime@^7.16.3", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
version "7.16.7"
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.16.7.tgz#03ff99f64106588c9c403c6ecb8c3bafbbdff1fa"
integrity sha512-9E9FJowqAsytyOY6LG+1KuueckRL+aQW+mKvXRXnuFGyRAyepJPmEo9vgMfXUA6O9u3IeEdv9MAkppFcaQwogQ==
Expand Down Expand Up @@ -982,6 +982,16 @@
jest-diff "^27.0.0"
pretty-format "^27.0.0"

"@types/json-schema@^7.0.7", "@types/json-schema@^7.0.9":
version "7.0.9"
resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.9.tgz#97edc9037ea0c38585320b28964dde3b39e4660d"
integrity sha512-qcUXuemtEu+E5wZSJHNxUXeCZhAfXKQ41D+duX+VYPde7xyEVZci+/oXKJL13tnRs9lR2pr4fod59GT6/X1/yQ==

"@types/json5@^0.0.29":
version "0.0.29"
resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
integrity sha1-7ihweulOEdK4J7y+UnC86n8+ce4=

"@types/lodash@^4.14.175":
version "4.14.178"
resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.178.tgz#341f6d2247db528d4a13ddbb374bcdc80406f4f8"
Expand Down Expand Up @@ -2242,6 +2252,27 @@ diffie-hellman@^5.0.0:
miller-rabin "^4.0.0"
randombytes "^2.0.0"

dir-glob@^3.0.1:
version "3.0.1"
resolved "https://registry.yarnpkg.com/dir-glob/-/dir-glob-3.0.1.tgz#56dbf73d992a4a93ba1584f4534063fd2e41717f"
integrity sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==
dependencies:
path-type "^4.0.0"

doctrine@^2.1.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-2.1.0.tgz#5cd01fc101621b42c4cd7f5d1a66243716d3f39d"
integrity sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==
dependencies:
esutils "^2.0.2"

doctrine@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-3.0.0.tgz#addebead72a6574db783639dc87a121773973961"
integrity sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==
dependencies:
esutils "^2.0.2"

dom-accessibility-api@^0.5.6, dom-accessibility-api@^0.5.9:
version "0.5.10"
resolved "https://registry.yarnpkg.com/dom-accessibility-api/-/dom-accessibility-api-0.5.10.tgz#caa6d08f60388d0bb4539dd75fe458a9a1d0014c"
Expand Down Expand Up @@ -4182,12 +4213,19 @@ locate-path@^5.0.0:
dependencies:
p-locate "^4.1.0"

locate-path@^6.0.0:
version "6.0.0"
resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-6.0.0.tgz#55321eb309febbc59c4801d931a72452a681d286"
integrity sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==
dependencies:
p-locate "^5.0.0"

lodash-es@^4.17.21:
version "4.17.21"
resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.21.tgz#43e626c46e6591b7750beb2b50117390c609e3ee"
integrity sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==

lodash.memoize@4.x:
lodash.memoize@4.1.2, lodash.memoize@4.x:
version "4.1.2"
resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
integrity sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=
Expand All @@ -4202,6 +4240,11 @@ lodash.sortby@^4.7.0:
resolved "https://registry.yarnpkg.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438"
integrity sha1-7dFMgk4sycHgsKG0K7UhBRakJDg=

lodash.truncate@^4.4.2:
version "4.4.2"
resolved "https://registry.yarnpkg.com/lodash.truncate/-/lodash.truncate-4.4.2.tgz#5a350da0b1113b837ecfffd5812cbe58d6eae193"
integrity sha1-WjUNoLERO4N+z//VgSy+WNbq4ZM=

lodash@^4.17.15, lodash@^4.17.21, lodash@^4.7.0:
version "4.17.21"
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
Expand Down Expand Up @@ -5258,6 +5301,15 @@ slash@^3.0.0:
resolved "https://registry.yarnpkg.com/slash/-/slash-3.0.0.tgz#6539be870c165adbd5240220dbe361f1bc4d4634"
integrity sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==

slice-ansi@^4.0.0:
version "4.0.0"
resolved "https://registry.yarnpkg.com/slice-ansi/-/slice-ansi-4.0.0.tgz#500e8dd0fd55b05815086255b3195adf2a45fe6b"
integrity sha512-qMCMfhY040cVHT43K9BFygqYbUPFZKHOg7K73mtTWJRb8pyP3fzf4Ixd5SzdEJQ6MRUg/WBnOLxghZtKKurENQ==
dependencies:
ansi-styles "^4.0.0"
astral-regex "^2.0.0"
is-fullwidth-code-point "^3.0.0"

source-map-resolve@^0.6.0:
version "0.6.0"
resolved "https://registry.yarnpkg.com/source-map-resolve/-/source-map-resolve-0.6.0.tgz#3d9df87e236b53f16d01e58150fc7711138e5ed2"
Expand Down Expand Up @@ -5440,6 +5492,11 @@ strip-indent@^3.0.0:
dependencies:
min-indent "^1.0.0"

strip-json-comments@^3.1.0, strip-json-comments@^3.1.1:
version "3.1.1"
resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006"
integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==

styled-jsx@5.0.0-beta.3:
version "5.0.0-beta.3"
resolved "https://registry.yarnpkg.com/styled-jsx/-/styled-jsx-5.0.0-beta.3.tgz#400d16179b5dff10d5954ab8be27a9a1b7780dd2"
Expand Down Expand Up @@ -5665,11 +5722,28 @@ ts-node@10.4.0:
make-error "^1.1.1"
yn "3.1.1"

tslib@^1.10.0:
tsconfig-paths@^3.12.0, tsconfig-paths@^3.9.0:
version "3.12.0"
resolved "https://registry.yarnpkg.com/tsconfig-paths/-/tsconfig-paths-3.12.0.tgz#19769aca6ee8f6a1a341e38c8fa45dd9fb18899b"
integrity sha512-e5adrnOYT6zqVnWqZu7i/BQ3BnhzvGbjEjejFXO20lKIKpwTaupkCPgEfv4GZK1IBciJUEhYs3J3p75FdaTFVg==
dependencies:
"@types/json5" "^0.0.29"
json5 "^1.0.1"
minimist "^1.2.0"
strip-bom "^3.0.0"

tslib@^1.10.0, tslib@^1.8.1:
version "1.14.1"
resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==

tsutils@^3.21.0:
version "3.21.0"
resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-3.21.0.tgz#b48717d394cea6c1e096983eed58e9d61715b623"
integrity sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==
dependencies:
tslib "^1.8.1"

tty-browserify@0.0.1:
version "0.0.1"
resolved "https://registry.yarnpkg.com/tty-browserify/-/tty-browserify-0.0.1.tgz#3f05251ee17904dfd0677546670db9651682b811"
Expand Down
You are viewing a condensed version of this merge commit. You can view the full changes here.