Vinicius Cainelli vicainelli

Generate a plan as a valid JSON object using the provided schema.

Rules:

Return only JSON.
Do not include markdown.
Break the work into phases, tasks, and subtasks.
Every phase, task, subtask, risk, milestone, question, and action must have a stable ID.
Tasks should be small enough to be assigned or tracked individually.
Subtasks should describe concrete actions, not vague goals.
Include dependencies using IDs from earlier tasks or subtasks when possible.

Most Imporant Javascript commands

Variables declarations

let x;          // Declare a block-scope variable
const y = 2;    // Declare a block-scope, read-only constant

Functions

CSS Snippets

Highlight an element on page

Blur the rest of the page and highligh some element, good to show new features/changes

TailwindCSS snippets

loading spinner: https://play.tailwindcss.com/u2QagzrBWk?layout=horizontal

Sign Up Form React Typescript

Error message

TypeScript error in FormSignUp.tsx(43,19):
Argument of type '{ [x: string]: string; }' is not assignable to parameter of type 'MyState | ((prevState: Readonly<MyState>, props: Readonly<{}>) => MyState | Pick<MyState, keyof MyState> | null) | Pick<...> | null'.
  Type '{ [x: string]: string; }' is missing the following properties from type 'Pick<MyState, keyof MyState>': name, email, confirm_email  TS2345

document.querySelector('img[srcset*="fbcdn"]')
    .srcset.split(',').pop()
    .match(/\bhttps?:\/\/\S+/gi)[0]

	{
	"editor.stickyScroll.enabled": true,
	"editor.scrollbar.horizontal": "hidden",
	"editor.scrollbar.vertical": "hidden",
	"security.workspace.trust.untrustedFiles": "open",
	"workbench.settings.editor": "json",
	// * Editor
	"editor.cursorSmoothCaretAnimation": "on",
	"editor.accessibilitySupport": "off",
	"editor.renderWhitespace": "boundary",

	import { mount } from '@cypress/vue';
	import Toast from '@/components/toast';
	import '@/assets/css/style.css';

	const toastTemplate = {
	template: `
	<div class="w-screen h-screen bg-grey-200">
	<div class="text-center pt-8">
	<button @click="$refs.toast.success({ title: 'New action, pushing the previous one', description: 'Description for the action, containing links' })">Success</button>
	<button @click="$refs.toast.error({ title: 'Action failed', description: 'Sorry, your action didn’t come through' })">Error</button>

	const makeInitial = (name) => {
	const rgx = new RegExp(/(\p{L}{1})\p{L}+/, 'gu');

	let initials = [...name.matchAll(rgx)] \|\| [];

	return (
	(initials.shift()?.[1] \|\| '') + (initials.pop()?.[1] \|\| '')
	).toUpperCase();
	}

	function nestedLoop(obj) {
	const res = {};
	function recurse(obj, current) {
	for (const key in obj) {
	let value = obj[key];
	if(value != undefined) {
	if (value && typeof value === 'object') {
	recurse(value, key);
	} else {
	// Do your stuff here to var value