CommunityRule/community-rule
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Create Rule Flow Core Infrastructure #41

Merged
an.di merged 4 commits from adilallo/feature/CreateRuleFlowCoreInfrastructure into main 2026-02-08 22:08:58 +00:00
Conversation 0 Commits 4 Files Changed 26
+980 -407
an.di commented 2026-02-08 22:08:37 +00:00
Owner
Copy Link
Copy Source

Create Rule Flow Infrastructure, Navigation Components, and Logo Reconfiguration

Overview

This PR implements the foundational infrastructure for the create rule flow (CR-49), creates the shared TopNav and Footer components (CR-50), and reconfigures the Logo component with responsive sizing. The create flow provides a full-screen experience separate from the main site navigation, with its own navigation and footer components.

Changes

CR-49: Create Rule Flow Infrastructure

  • Routing Structure: Created route group (create) with dynamic routing /create/[step]

    • app/create/layout.tsx - Full-screen layout wrapper with CreateFlowProvider
    • app/create/[step]/page.tsx - Dynamic route handler for all flow steps
    • app/create/types.ts - Type definitions for flow steps, state, and context
    • app/create/context/CreateFlowContext.tsx - Context provider for flow state management

  • Conditional Navigation: Updated root layout to hide main navigation/footer for create flow

    • app/components/navigation/ConditionalNavigation.tsx - Hides TopNav for /create/* routes
    • app/components/navigation/ConditionalFooter.tsx - Hides Footer for /create/* routes

CR-50: CreateFlowTopNav and CreateFlowFooter Components

  • CreateFlowTopNav (app/components/utility/CreateFlowTopNav/)

    • Responsive navigation bar with Logo and action buttons
    • Props: hasShare, hasExport, hasEdit, loggedIn, and callback handlers
    • Exit button text changes based on loggedIn prop ("Exit" vs "Save & Exit")
    • Uses Logo component with createFlow responsive size
    • Responsive design with md breakpoint at 640px
    • Follows container/view/types pattern

  • CreateFlowFooter (app/components/utility/CreateFlowFooter/)

    • Sticky footer with progress bar and navigation buttons
    • Props: secondButton (ReactNode), progressBar (boolean)
    • Uses existing ProportionBar component (set to "1-0" state)
    • Back button always shown, second button (typically "Next") conditionally rendered
    • Responsive design with md breakpoint at 640px
    • Follows container/view/types pattern

Logo Component Reconfiguration

  • Responsive Sizing: Added new responsive size configurations

    • createFlow - Responsive sizing for create flow (adapts at md breakpoint)
    • topNavFolderTop - Responsive sizing for TopNav with folderTop=true
    • topNavHeader - Responsive sizing for TopNav with folderTop=false
    • footer - Updated to be fully responsive (adapts at sm and lg breakpoints)
    • Removed deprecated individual breakpoint sizes (homeHeaderXsmall, headerMd, etc.)

  • Simplified Implementation: Consolidated all responsive sizing logic into Logo component

    • Single Logo instance adjusts size based on props
    • Removed hidden/block pattern in favor of responsive Tailwind classes
    • Text visibility handled via responsive classes (hidden sm:block for topNav sizes)

Testing & Documentation

  • Tests Created:

    • tests/components/CreateFlowTopNav.test.tsx (12 tests)
    • tests/components/CreateFlowFooter.test.tsx (8 tests)
    • Updated tests/components/Logo.test.tsx for new responsive sizes

  • Stories Created:

    • stories/utility/CreateFlowTopNav.stories.js (3 stories)
    • stories/utility/CreateFlowFooter.stories.js (3 stories)
    • Updated stories/icons/Logo.stories.js for responsive sizes

Screenshots

Screenshot 2026-02-08 at 3.08.07 PM.png

How to Test

  1. Create Flow Infrastructure:

    • Navigate to /create/informational (or any valid step)
    • Verify main TopNav and Footer are hidden
    • Verify CreateFlowTopNav and CreateFlowFooter are visible
    • Verify full-screen black background layout

  2. CreateFlowTopNav:

    • Test button visibility with different prop combinations
    • Verify Exit button text changes based on loggedIn prop
    • Test responsive behavior at 640px breakpoint
    • Verify Logo renders with correct size
    • Run Storybook: stories/utility/CreateFlowTopNav.stories.js

  3. CreateFlowFooter:

    • Test with/without progressBar prop
    • Test with/without secondButton prop
    • Verify Back button always renders
    • Test responsive behavior at 640px breakpoint
    • Run Storybook: stories/utility/CreateFlowFooter.stories.js

  4. Logo Component:

    • Test all new responsive sizes: createFlow, topNavFolderTop, topNavHeader, footer
    • Verify responsive behavior at breakpoints (sm: 430px, md: 640px, lg: 1024px)
    • Test text visibility for topNav sizes (hidden on smallest, visible on sm+)
    • Run tests: npm run test:component -- tests/components/Logo.test.tsx
    • Run Storybook: stories/icons/Logo.stories.js

  5. Run All Tests:h
    npm run test:component

# Create Rule Flow Infrastructure, Navigation Components, and Logo Reconfiguration ## Overview This PR implements the foundational infrastructure for the create rule flow (CR-49), creates the shared TopNav and Footer components (CR-50), and reconfigures the Logo component with responsive sizing. The create flow provides a full-screen experience separate from the main site navigation, with its own navigation and footer components. ## Changes ### CR-49: Create Rule Flow Infrastructure - **Routing Structure**: Created route group `(create)` with dynamic routing `/create/[step]` - `app/create/layout.tsx` - Full-screen layout wrapper with CreateFlowProvider - `app/create/[step]/page.tsx` - Dynamic route handler for all flow steps - `app/create/types.ts` - Type definitions for flow steps, state, and context - `app/create/context/CreateFlowContext.tsx` - Context provider for flow state management - **Conditional Navigation**: Updated root layout to hide main navigation/footer for create flow - `app/components/navigation/ConditionalNavigation.tsx` - Hides TopNav for `/create/*` routes - `app/components/navigation/ConditionalFooter.tsx` - Hides Footer for `/create/*` routes ### CR-50: CreateFlowTopNav and CreateFlowFooter Components - **CreateFlowTopNav** (`app/components/utility/CreateFlowTopNav/`) - Responsive navigation bar with Logo and action buttons - Props: `hasShare`, `hasExport`, `hasEdit`, `loggedIn`, and callback handlers - Exit button text changes based on `loggedIn` prop ("Exit" vs "Save & Exit") - Uses Logo component with `createFlow` responsive size - Responsive design with md breakpoint at 640px - Follows container/view/types pattern - **CreateFlowFooter** (`app/components/utility/CreateFlowFooter/`) - Sticky footer with progress bar and navigation buttons - Props: `secondButton` (ReactNode), `progressBar` (boolean) - Uses existing `ProportionBar` component (set to "1-0" state) - Back button always shown, second button (typically "Next") conditionally rendered - Responsive design with md breakpoint at 640px - Follows container/view/types pattern ### Logo Component Reconfiguration - **Responsive Sizing**: Added new responsive size configurations - `createFlow` - Responsive sizing for create flow (adapts at md breakpoint) - `topNavFolderTop` - Responsive sizing for TopNav with folderTop=true - `topNavHeader` - Responsive sizing for TopNav with folderTop=false - `footer` - Updated to be fully responsive (adapts at sm and lg breakpoints) - Removed deprecated individual breakpoint sizes (homeHeaderXsmall, headerMd, etc.) - **Simplified Implementation**: Consolidated all responsive sizing logic into Logo component - Single Logo instance adjusts size based on props - Removed `hidden/block` pattern in favor of responsive Tailwind classes - Text visibility handled via responsive classes (`hidden sm:block` for topNav sizes) ### Testing & Documentation - **Tests Created**: - `tests/components/CreateFlowTopNav.test.tsx` (12 tests) - `tests/components/CreateFlowFooter.test.tsx` (8 tests) - Updated `tests/components/Logo.test.tsx` for new responsive sizes - **Stories Created**: - `stories/utility/CreateFlowTopNav.stories.js` (3 stories) - `stories/utility/CreateFlowFooter.stories.js` (3 stories) - Updated `stories/icons/Logo.stories.js` for responsive sizes ## Screenshots <img width="637" alt="Screenshot 2026-02-08 at 3.08.07 PM.png" src="attachments/cb0ec511-e0c2-4eae-8643-4b98f509d74c"> ## How to Test 1. **Create Flow Infrastructure**: - Navigate to `/create/informational` (or any valid step) - Verify main TopNav and Footer are hidden - Verify CreateFlowTopNav and CreateFlowFooter are visible - Verify full-screen black background layout 2. **CreateFlowTopNav**: - Test button visibility with different prop combinations - Verify Exit button text changes based on `loggedIn` prop - Test responsive behavior at 640px breakpoint - Verify Logo renders with correct size - Run Storybook: `stories/utility/CreateFlowTopNav.stories.js` 3. **CreateFlowFooter**: - Test with/without `progressBar` prop - Test with/without `secondButton` prop - Verify Back button always renders - Test responsive behavior at 640px breakpoint - Run Storybook: `stories/utility/CreateFlowFooter.stories.js` 4. **Logo Component**: - Test all new responsive sizes: `createFlow`, `topNavFolderTop`, `topNavHeader`, `footer` - Verify responsive behavior at breakpoints (sm: 430px, md: 640px, lg: 1024px) - Test text visibility for topNav sizes (hidden on smallest, visible on sm+) - Run tests: `npm run test:component -- tests/components/Logo.test.tsx` - Run Storybook: `stories/icons/Logo.stories.js` 5. **Run All Tests**:h npm run test:component
Screenshot 2026-02-08 at 3.08.07 PM.png
75 KiB
an.di self-assigned this 2026-02-08 22:08:37 +00:00
an.di added 4 commits 2026-02-08 22:08:38 +00:00
Create rule flow core infrastructure and routing 343b96a9bb
Implement create flow topnav and footer e6c1002dbb
Clean up logo component 37555b2725
Create tests and stories for createflownav 8d9b9d6ff3
an.di merged commit c43f74f345 into main 2026-02-08 22:08:58 +00:00
an.di deleted branch adilallo/feature/CreateRuleFlowCoreInfrastructure 2026-02-08 22:08:58 +00:00
Sign in to join this conversation.
Reviewers
No Reviewers
Labels
No items
No labels
Milestone
No items
No Milestone
Projects
Clear projects
No projects
Assignees
Clear assignees
an.di (Andy DiLallo) ntnsndr (Nathan Schneider)
No Assignees an.di
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: CommunityRule/community-rule#41