Add demo form, add theme customization

[RJFelix]

Draft
Normal
Closes DEV-NNN

• Add and export a demo form React component that is attached to a stubbed-out Userfront and does not interact with window.Userfront
  • TODO: let the client pass in an auth flow for the demo form
  • Future: let the client receive and handle auth events emitted by the form
• Add CSS-based theming capabilities in new dynamic.css file + controls for it in the UniversalForm component
  • The dynamic theme is derived from client-provided colors: light, dark, optionally accent, optionally light-background, optionally dark-background
  • The dynamic theme handles both light and dark modes, and can be forced to one or the other or set to auto-switch based on the user's preference (@media prefers-color-scheme)
  • To control size and spacing, there's a size parameter that can be set to default, compact, spaced, mini, and large
  • The theme can set the font
  • There's some additional optional additions to change the look & feel of the form, applied as CSS classes
    • ounded for corners to be more rounded than the default
    • squared to remove corner rounding altogether
    • hideSecuredMessage to hide the "secured by Userfront" branding
    • gradientButtons to add a subtle interactive gradient effect to buttons
    • raisedButtons to make the buttons pseudo-3D, like operating system buttons
      • Future: make gradientButtons and raisedButtons play nicely together (currently raisedButtons just overrides gradientButtons, but the gradient effect actually looks better on a raised background
    • dottedOutlines for focus/active outlines to be dotted lines (goes well with raisedButtons!)
  • While I put some effort into providing a sensible and functional menu of theming options, the capability is the point of this PR, and the specific options available are just a starting point - we can and should iterate on this
  • TODO: apply theme to LogoutButton as appropriate
  • Todo in a follow up: Sass-ifiy the CSS, since it's now complex enough for Sass to pay real dividends

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
vercel-toolkit-react-dev-app	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Feb 5, 2024 6:45pm
vercel-toolkit-react-storybook	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Feb 5, 2024 6:45pm

[github-actions]

Coverage Summary for `package`

Status	Category	Percentage	Covered / Total
🔵	Lines	68.54%	3240 / 4727
🔵	Statements	68.54%	3240 / 4727
🔵	Functions	49.43%	88 / 178
🔵	Branches	57.53%	126 / 219

File Coverage

File	Stmts	% Branch	% Funcs	% Lines	Uncovered Lines
package/src/components/AlternativeButton.jsx	69.23%	100%	0%	69.23%	8-11
package/src/components/BackButton.jsx	39.47%	100%	0%	39.47%	14-36
package/src/components/ContinueButton.jsx	47.36%	100%	0%	47.36%	8-17
package/src/components/Divider.jsx	54.16%	100%	0%	54.16%	12-22
package/src/components/ErrorMessage.jsx	92.59%	33.33%	100%	92.59%	16-17
package/src/components/IconButton.jsx	28.57%	100%	0%	28.57%	15-16, 19-28, 47-136, 147-159
package/src/components/InfoMessage.jsx	45.83%	100%	0%	45.83%	10-22
package/src/components/PhoneNumberInput.jsx	69.44%	0%	0%	69.44%	24-34
package/src/components/RetryButton.jsx	61.11%	100%	0%	61.11%	10-16
package/src/components/SecuredByUserfront.jsx	100%	100%	100%	100%
package/src/components/SubmitButton.jsx	100%	100%	100%	100%
package/src/components/TestModeNotice.jsx	66.66%	50%	50%	66.66%	16-18, 20-21, 28-34
package/src/components/Input/BackupCodeInput.jsx	100%	100%	100%	100%
package/src/components/Input/BaseInput.jsx	95.83%	50%	0%	95.83%	44-45
package/src/components/Input/EmailInput.jsx	100%	100%	100%	100%
package/src/components/Input/EmailOrUsernameInput.jsx	100%	100%	100%	100%
package/src/components/Input/PasswordInput.jsx	100%	100%	100%	100%
package/src/components/Input/TotpCodeInput.jsx	100%	100%	100%	100%
package/src/components/Input/VerificationCodeInput.jsx	100%	100%	100%	100%
package/src/components/Input/index.jsx	88%	100%	50%	88%	23-25
package/src/forms/UniversalForm.jsx	52.28%	5.79%	100%	52.28%	173-175, 193-211, 213-215, 218-224, 226-236, 238-250, 256-266, 268-280, 284-291, 303-309, 311-317, 319-325, 329-333, 335-341, 343-347, 349-355, 357-361, 365-369, 371-377, 379-383, 385-391, 393-397, 401-405, 407-413, 415-418, 422-435, 437-450, 452-456, 460-466, 468-474, 476-482, 484-490, 492-496, 499-503, 510-514, 518-522, 535-542, 545-548, 552-555, 559-563, 600-601, 603-604, 606-611, 614-615, 617-620, 622-624, 626-629, 631-633, 635-640, 652-657
package/src/models/config/actions.ts	67%	97.82%	89.74%	67%	63-77, 79-92, 96-101, 130-131, 159-169, 174-180, 196-201, 207-213, 218-222, 229-235, 243-248, 265-266, 283-285, 313-326, 338-339, 351-355, 375-376, 379-394
package/src/models/config/guards.ts	80.15%	100%	55.88%	80.15%	44, 48, 55-60, 68, 73, 78, 85-91, 96, 101, 106-107, 117, 121, 125
package/src/models/config/utils.ts	91.71%	100%	78.57%	91.71%	108-118, 123-124, 134
package/src/models/forms/universal.ts	91.35%	100%	4.76%	91.35%	95-97, 99-101, 126-131, 136-137, 167-172, 176-177, 179-180, 182-183, 185-186, 188-189, 191-192, 243, 329-335, 640-648, 662-672, 778-785
package/src/models/views/emailCode.ts	96.8%	50%	100%	96.8%	37-38, 40-41
package/src/models/views/emailLink.ts	88.23%	28.57%	100%	88.23%	37-42, 49-50, 52-53, 94-95, 97-98
package/src/models/views/password.ts	75.26%	100%	0%	75.26%	42-64
package/src/models/views/selectFactor.ts	100%	100%	100%	100%
package/src/models/views/setNewPassword.ts	78.94%	100%	0%	78.94%	35-50
package/src/models/views/setUpTotp.ts	89.91%	100%	0%	89.91%	55-66
package/src/models/views/smsCode.ts	96.87%	50%	100%	96.87%	40-41, 43-44
package/src/models/views/totpCode.ts	66.66%	100%	0%	66.66%	37-61, 89-109
package/src/services/logging.js	38.46%	100%	0%	38.46%	5-6, 9-10, 13-15, 18-26
package/src/services/userfront.ts	65.88%	53.33%	60%	65.88%	49-62, 74-78, 83-85, 101-102, 104-108, 111-113, 128-129, 147-170
package/src/utils/hooks.js	80%	77.77%	100%	80%	12, 19-20, 22-23
package/src/views/AlreadyLoggedIn.jsx	77.77%	100%	0%	77.77%	6-7
package/src/views/EmailLinkSent.jsx	50%	100%	0%	50%	15-30
package/src/views/EnterEmail.jsx	71.42%	50%	50%	71.42%	20-33
package/src/views/EnterPhone.jsx	42.1%	100%	0%	42.1%	15-36
package/src/views/EnterTotpCode.jsx	18.11%	100%	0%	18.11%	22-125
package/src/views/EnterVerificationCode.jsx	34.78%	100%	0%	34.78%	15-44
package/src/views/GeneralErrorMessage.jsx	56.52%	100%	0%	56.52%	12-21
package/src/views/LogInWithPassword.jsx	28.33%	100%	0%	28.33%	16-58
package/src/views/Message.jsx	81.81%	100%	0%	81.81%	8-9
package/src/views/Placeholder.jsx	75%	100%	0%	75%	5-6
package/src/views/SelectFactor.jsx	26.8%	100%	0%	26.8%	25-95
package/src/views/SetNewPassword.jsx	62.36%	100%	50%	62.36%	19-53
package/src/views/SetNewPasswordSuccess.jsx	75%	100%	0%	75%	5-6
package/src/views/SetUpTotp.jsx	34.61%	100%	0%	34.61%	17-50
package/src/views/SetUpTotpSuccess.jsx	36.11%	100%	0%	36.11%	12-34
package/src/views/SignUpWithPassword.jsx	20.4%	100%	0%	20.4%	19-96
package/src/views/Success.jsx	50%	100%	0%	50%	10-20
package/src/views/TotpErrorMessage.jsx	48.48%	100%	0%	48.48%	15-31

[drbrady8800]

Looks good! Aside from the small comments I had a question around default.css. It seems like it has been replaced everywhere except package/.storybook/preview.cjs and in the blurb around CSS in the README. Was wondering if this was intentional and if not if we should get rid of the default.css file?

[RJFelix]

Looks good! Aside from the small comments I had a question around default.css. It seems like it has been replaced everywhere except package/.storybook/preview.cjs and in the blurb around CSS in the README. Was wondering if this was intentional and if not if we should get rid of the default.css file?

Good catches, thank you! I addressed your other comments as well.

[drbrady8800]

LGTM!

[github-actions]

Published version 1.1.0-alpha.1 to npm.