Luis Martinez Suarez luismartinezs

## README.md

      
              7 files
            
          
              0 forks
            
          
                0 comments
              
            
              0 stars
            
          
                luismartinezs
                / README.md
            
            
              Created
              March 7, 2026 08:51
            
          
    Vertical Slice Architecture — Sample Module: credits

A single feature module from a production Express + Drizzle + Zod monorepo.
Shows the patterns without the full template.
Folder Structure

src/modules/credits/
 index.ts # Public API (gatekeeper)


## react-import-on-interaction.jsx
// Source https://www.patterns.dev/posts/import-on-interaction
import React, { useState, createElement } from "react";
import MessageList from "./MessageList";
import MessageInput from "./MessageInput";
import ErrorBoundary from "./ErrorBoundary";

const Channel = () => {
  const [emojiPickerEl, setEmojiPickerEl] = useState(null);

  const openEmojiPicker = () => {

## render-count.jsx
function useLogCount(msg) {
  const count = useRef(1);
  useEffect(() => {
    console.debug(msg, count.current);
    count.current++;
  });
}

## Input.html
<input type="email" name="email" id="email" aria-invalid="true" aria-errormessage="err1" />
<span id="err1">error: Enter a valid email address</span>

## FormattedMessage.tsx
<FormattedMessage
  id="foo"
  defaultMessage="To buy a shoe, <a>visit our website</a> and <cta>buy a shoe</cta>"
  values={{
    a: chunks => (
      <a
        class="external_link"
        target="_blank"
        href="https://www.example.com/shoe"
      >

## dialogs.html
<!-- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog -->

<dialog open>
  <p>Greetings, one and all!</p>
  <!-- method="dialog" closes dialog on form submit -->
  <form method="dialog">
    <button>OK</button>
  </form>
</dialog>

## landmarks.html
<!-- https://scottaohara.github.io/landmarks_demo/ -->
<!DOCTYPE html>
<html lang="en-us" class="no-js">
  <head>
    <meta charset="utf-8" />
    <title>Landmarks Demonstration</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script>
      // remove no-js and add 'js' to the HTML
      document.documentElement.className =

## notifications.html
<!-- https://www.w3.org/WAI/tutorials/forms/notifications/ -->

<!-- Use notifications to provide user feedback after a user action -->

<!-- 1. Using main heading -->
<h1>3 Errors - Billing Address</h1>
<h1>Thank you for submitting your order.</h1>

<!-- 2. Using page title -->
<title>3 Errors - Billing Address</title>

## labels.html
<!-- https://www.w3.org/WAI/tutorials/forms/labels/ -->

<!-- simple labels -->
<label for="firstname">First name:</label>
<input type="text" name="firstname" id="firstname" />

<!-- Cases where label text is hidden -->

<!-- Hide label text with CSS -->
<style>

## progress.html
<!-- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress#accessibility_concerns -->

<!-- OPTION A -->

<label
  >Uploading Document: <progress value="70" max="100">70 %</progress></label
>

<!-- OPTION B -->
	// Source https://www.patterns.dev/posts/import-on-interaction
	import React, { useState, createElement } from "react";
	import MessageList from "./MessageList";
	import MessageInput from "./MessageInput";
	import ErrorBoundary from "./ErrorBoundary";

	const Channel = () => {
	const [emojiPickerEl, setEmojiPickerEl] = useState(null);

	const openEmojiPicker = () => {
	function useLogCount(msg) {
	const count = useRef(1);
	useEffect(() => {
	console.debug(msg, count.current);
	count.current++;
	});
	}
	<input type="email" name="email" id="email" aria-invalid="true" aria-errormessage="err1" />
	<span id="err1">error: Enter a valid email address</span>
	<FormattedMessage
	id="foo"
	defaultMessage="To buy a shoe, <a>visit our website</a> and <cta>buy a shoe</cta>"
	values={{
	a: chunks => (
	<a
	class="external_link"
	target="_blank"
	href="https://www.example.com/shoe"
	>
	<!-- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog -->

	<dialog open>
	<p>Greetings, one and all!</p>
	<!-- method="dialog" closes dialog on form submit -->
	<form method="dialog">
	<button>OK</button>
	</form>
	</dialog>
	<!-- https://scottaohara.github.io/landmarks_demo/ -->
	<!DOCTYPE html>
	<html lang="en-us" class="no-js">
	<head>
	<meta charset="utf-8" />
	<title>Landmarks Demonstration</title>
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<script>
	// remove no-js and add 'js' to the HTML
	document.documentElement.className =
	<!-- https://www.w3.org/WAI/tutorials/forms/notifications/ -->

	<!-- Use notifications to provide user feedback after a user action -->

	<!-- 1. Using main heading -->
	<h1>3 Errors - Billing Address</h1>
	<h1>Thank you for submitting your order.</h1>

	<!-- 2. Using page title -->
	<title>3 Errors - Billing Address</title>
	<!-- https://www.w3.org/WAI/tutorials/forms/labels/ -->

	<!-- simple labels -->
	<label for="firstname">First name:</label>
	<input type="text" name="firstname" id="firstname" />

	<!-- Cases where label text is hidden -->

	<!-- Hide label text with CSS -->
	<style>
	<!-- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress#accessibility_concerns -->

	<!-- OPTION A -->

	<label
	>Uploading Document: <progress value="70" max="100">70 %</progress></label
	>

	<!-- OPTION B -->