Template data components RFC

readme.md

Render conditionally based on a template data flag:

<TemplateData.When attribute="enable_phone_field">
  When template data is "true" or truthy, this renders
</TemplateData.When>

<TemplateData.Unless attribute="hide_suffix">
  When template data is "false" or falsy, this renders
</TemplateData.Unless>

Render template data value, no default:

<h1>
  <TemplateData.Value attribute="headline_text" renderHtml={true} />
</h1>

Render template data value, with default content:

<h1>
  <TemplateData.Value attribute="headline_text" renderHtml={true}>
    When available, render template data content, otherwise render this as fallback
  </TemplateData.Value>
</h1>

Render template data content conditionally:

<TemplateData.When attribute="headline_text">
  <h1>
    <TemplateData.Value attribute="headline_text" renderHtml={true}>
      Render template data content, if available, otherwise this as fallback
    </TemplateData.Value>
  </h1>
</TemplateData.When>

TemplateDataDocumentation.jsx

const TemplateDataDocumentationContext = createContext({});

const TemplateDataDocumentationProviderProps = {
  children: PropTypes.node.isRequired,
};

export const TemplateDataDocumentationProvider = ({ children }) => {
  const templateDataDocumentationTuple = useState({});

  return (
    <TemplateDataDocumentationContext.Provider value={templateDataDocumentationTuple}>
      <pre
        style={{
          position: 'fixed',
          top: '1rem',
          right: '1rem',
          padding: '1rem',
          backgroundColor: '#dcdcdc',
          borderRadius: '1rem',
        }}
      >
        {JSON.stringify(templateDataDocumentationTuple[0], null, 2)}
      </pre>
      {children}
    </TemplateDataDocumentationContext.Provider>
  );
};

TemplateDataDocumentationProvider.propTypes = TemplateDataDocumentationProviderProps;

export const useTemplateDataDocumentation = () => {
  return useContextSelector(TemplateDataDocumentationContext, (context) => context[0]);
};

export const useAddTemplateDataDocumentation = (attributeName, description) => {
  const setTemplateDataDocumentation = useContextSelector(
    TemplateDataDocumentationContext,
    (context) => context[1]
  );

  setTemplateDataDocumentation((templateDataDocumentation) => ({
    ...templateDataDocumentation,
    [attributeName]: description,
  }));
};

// Update all template data hook signatures to require a description
// Call `useAddTemplateDataDocumentation()` in `useTemplateDataValue`