🇺🇸United States @hooroomoo

hooroomoo → changed the visibility of the branch test-branch11 to hidden.

hooroomoo → changed the visibility of the branch 3368338-ignore-patch-test to hidden.

hooroomoo → changed the visibility of the branch test-branch11 to active.

hooroomoo → changed the visibility of the branch test-branch11 to active.

hooroomoo → changed the visibility of the branch test-branch11 to active.

hooroomoo → changed the visibility of the branch test-branch11 to active.

hooroomoo → changed the visibility of the branch test-branch11 to hidden.

hooroomoo → changed the visibility of the branch test-branch11 to hidden.

lauriii → credited hooroomoo → .

hooroomoo → made their first commit to this issue’s fork.

A would be nice to have:
- Converting the components to typescript since it comes out of the box with Fresh

hooroomoo → created an issue.

The app crashes on twig mode sometimes I think due to duplicate twig-uuid's being added to the node title and its hidden title.

hooroomoo → made their first commit to this issue’s fork.

Still missing:

1. The debug button placements are currently absolutely positioned and don't take into account scrolling or screen responsiveness. If this is too hard to do, may need to remove the use of React portal.

2. Generating JSX file through the 'Replace with JSX' button feature

3. Some styling (currently have emojis as placeholders, plan to eventually replace it with something else)

hooroomoo → created an issue.

Marking as fixed because the merged #3396649: Add a demo Next.js app → implements the menu-main toggle for umami_jsx and umami_nextjs

For 'nextjs' branch

hooroomoo → changed the visibility of the branch 3396649-add-a-demo to hidden.

hooroomoo → changed the visibility of the branch 1.0.x to hidden.

hooroomoo → made their first commit to this issue’s fork.

hooroomoo → made their first commit to this issue’s fork.

hooroomoo → made their first commit to this issue’s fork.

Re: #6,

Even after having access to the uri, having to do this in a React component
const imgPath = content.fieldMediaImage[0].media.fieldMediaImage.entity.uri.value

is a little gnarly so that is a TODO as well, to figure out what keys can be removed from the object/make it simpler to get to the wanted value

So far these are the things i've run into,
- Toggle button sometimes gets covered by other things so unclickable unless i change the z-index
- Be able to filter drupalSettings.jsx by template in case nothing is rendering on the page
- Confused by some of the keys for example:
drupal_Media_Entity_Media and drupal_BlockContent_Entity_BlockContent

{% set background_image = file_url(content.field_media_image[0]['#media'].field_media_image.entity.uri.value) %}

My current understanding of the types:
- JSX.Element when the twig template uses the prop like this:

{{ label }}

or

- object for *attributes (labelAttributes, attributes, titleAttributes)

If I need something that is nested inside an object which has been usually a string so far, I've been needing to define the path in the .template-info.json

{
"props": {    
"content": {
      "fieldMediaImage": {
        "0": {
          "media": {
            "fieldMediaImage": {
              "entity": {
                "uri": {
                  "value": "string"
                }
              }
            }
          }
        }
      }
    },
    "elements": {
      "content": {
        "blockContent": "object",
        "fieldContentLink": {
          "bundle": "string"
        }
      }
   }
}
}

Used this the last few days and it's been very helpful. I think the biggest Nice-to-haves for me would be things you mentioned above where it prints out every *.template-info.json instead of just one instance of each with each template object containing an array of the template instances and if you hover over a template in the console it would highlight it on the page similar to this.

+1 for removing the console error for the time being even if it does get removed

hooroomoo → created an issue.

Pushed commit to remove leftover jsxFactory config from the build command that got moved to build-react-dev.mjs. With jsx: "automatic", we don't need to configure jsxFactory as it tells esbuild automatically how to compile the code.

hooroomoo → made their first commit to this issue’s fork.

I looked at the test app locally and was getting TypeError: Cannot read properties of null (reading 'useEffect') and "Invalid hook call. Hooks can only be called inside of the body of a function component." along with other errors. It was crashing on this import statement.

import { useEffect, useState, useRef } from 'react';

I think the error was happening because of:

This happens because both the main project and the submodule have their own instances of React installed in their respective 'node_modules' directories. The problem arises when the code from your submodule tries to use its instance of React, while the rest of your Next.js project uses a different instance.

This situation leads to an infamous error: "Invalid hook call. Hooks can only be called inside of the body of a function component." This happens because React hooks expect to be working with a single instance of React. If there are two or more instances, hooks can't function correctly, causing our application to crash

with the submodule being our tests/example-app used for testing with its own node modules.

I added new webpack config in tests/example-app/next.config.js from here: which instructs webpack to resolve all imports of 'react' to the specific version of React in the node_modules directory.

hooroomoo → made their first commit to this issue’s fork.

hooroomoo → created an issue.

hooroomoo → made their first commit to this issue’s fork.

This PR adds the Panda CSS library and replaces 'node--card-common' and 'node--card-common-alt' with the new NodeCardCommon JSX component.

Wim Leers → credited hooroomoo → .

hooroomoo → made their first commit to this issue’s fork.

hooroomoo → created an issue.

This MR adds the DOMPurify → library that has many users and releases.

TODOs so far....
There are 4 todo comments I added in the MR.

1. In FieldStorageAddForm, we added core/drupal.machine-name, core/drupal.states, as a temporary workaround because the machine name on the edit form modal was not running those libraries.

2. machine-name.js Related to #1, comment is in todo

3. Right now, the 'Continue' button on FieldStorageAddForm appears when a user selects a field regardless of whether it is the field type (comment, boolean) or if it is a group that needs a subfield selected. See if it's possible to make the button appear only after the subfield is selected. Currently, the 'Continue' button lives under the $form['group_field_options_wrapper'] so it gets rendered and re-rendered the same as the subfields. The button should also be under a different name since it doesn't have to do with group field options.

4. Remove id from subfields radio (hopefully this doesn't break anything, i don't believe its being used)

Other things
5. Ajax error messages that happen from a modal currently display outside of the modal

6. Add tests for new 'Back' button functionality inside modal (Adding needs tests tag for that). The back button is added to the combined form in case a user wants to change the field type. Also decide maybe remove the Back button from the non-JS way since it may not be necessary.

7. Check that the "dummy" field name doesn't appear for any field types on the edit field storage form.

8. 'Continue' button on field selection page is currently left aligned, should probably fix to be right aligned for consistency with the edit form.

Hi @yobottehg, are you using version ^4.0 of the Webform REST → module? The webform_rest/xyz_form endpoints come from the Webform REST module.

I'm not getting the error with my current setup:
drupal 10.1
drupal/webform 6.2.0-beta6
drupal/webform_rest 4.0.3

Current MR Overview

1. FieldStorageAddForm has a 'Continue' link with a route that points to FieldTempStoreController. The route gets updated every time a field is selected so the correct parameters are set. From FieldStorageAddForm, a "dummy" field name is generated since one is needed to create an entity. This dummy name is necessary now because we moved the field name label to the edit form.

2. Inside FieldTempStoreController::setTempStore we create the entity and set the field and field storage values inside of temp store. Then FieldTempStoreController redirects to another controller FieldConfigAddController which builds the entity form using the entity that was created and then it returns the edit form.

3. Now inside FieldConfigEditForm::validateForm, we create the entity we actually want with the new field name since we have access to that value on this form now.

Removing tag, reviewed and tested

Left some comments, also looks like this still needs an issue summary update.

Thank you!

Changes look good to me.

Looks like all feedback has been addressed and works as expected. MR looked good to me. Followups have also been created to revisit the formatting if need be but this is already a big UX improvement.

hooroomoo → created an issue.

Updated the CR.

Feedback has been addressed

Tests passed hooray

Looks like all the feedback has been addressed now. Waiting for 🐛 TestSiteApplicationTest::testInstallWithNonExistingFile() fails when another test creates database tables during the test run Fixed to go in that address the last test fail.

hooroomoo → created an issue. See original summary → .

Feedback has been addressed. Removing needs test tag. Looks good to me.

The variables are declared inside of the twig file so it is more of an exploratory issue for now

hooroomoo → created an issue.

Looks good to me

It looks like there was a regression somewhere because I am not getting the active tab anymore when I tested locally. I think the tests also need to be updated since it didn't catch the regression.

hooroomoo → created an issue.

hooroomoo → created an issue.

Confirmed that going to admin/theme/update is a 301 response and the breadcrumb is visible on admin/appearance/update.

hooroomoo → made their first commit to this issue’s fork.

I believe all the remaining feedback has been addressed or no longer applies. Tested and code looks good to me.

Added screenshots to IS of before and after changes with both vertical and horizontal orientations for top level (/structure), sub level (/structure/types) , and sub sub level (/admin/structure/types/manage/article/fields)

Created follow up 🐛 Dev tools added focus breaks styles for hover and focus on field cards Active for #14