PromucFlow_constructor/app/client
Preet Sidhu fa7bd6a543
feat: add layouts and widgets for sections and zones. (#29713)
## Description

1. Create Section Widget.
2. Create Zone Widget.
3. Create layouts and presets for Sections and zones.
4. Upate layout for Anvil Main Canvas.
5. Refactor BaseLayoutComponent. Separate renderer for edit and view
modes.
6. Add childrenMap context to avoid prop drilling through all layouts.
7. Add Anvil Config for WDS widgets.

#### Type of change
- New feature (non-breaking change which adds functionality)

## Testing
#### How Has This Been Tested?
- [x] Manual
- [ ] JUnit
- [ ] Jest
- [ ] Cypress

#### Test Plan

## Checklist:
#### Dev activity
- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my own code
- [x] I have commented my code, particularly in hard-to-understand areas
- [ ] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [x] New and existing unit tests pass locally with my changes
- [ ] PR is being merged under a feature flag


#### QA activity:
- [ ] [Speedbreak
features](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#speedbreakers-)
have been covered
- [ ] Test plan covers all impacted features and [areas of
interest](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#areas-of-interest-)
- [ ] Test plan has been peer reviewed by project stakeholders and other
QA members
- [ ] Manually tested functionality on DP
- [ ] We had an implementation alignment call with stakeholders post QA
Round 2
- [ ] Cypress test cases have been added and approved by SDET/manual QA
- [ ] Added `Test Plan Approved` label after Cypress tests were reviewed
- [ ] Added `Test Plan Approved` label after JUnit tests were reviewed


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **New Features**
- Introduced a new `Zone Stepper Control` component for UI interaction.
- Added `AnvilCanvas` and `AnvilMainCanvas` components with improved
performance and interaction features.
- Implemented `LayoutProvider` and `useClickToClearSelections` for
better layout management.
- Launched `AnvilCanvasDraggingArena` and `AnvilHighlightingCanvas`
components with enhanced drag-and-drop capabilities.
- New `useZoneMinWidth` hook to calculate minimum zone width based on
child widgets.
- Added `SectionRow`, `Section`, `ZoneColumn`, and `Zone` components for
advanced layout structuring.
  - New `WidgetRenderer` component for dynamic child widget rendering.

- **Enhancements**
- Improved canvas activation and deactivation logic with
`useCanvasActivation` and `useCanvasActivationStates`.
- Enhanced drag-and-drop experience with updated `useCanvasDragging`
logic.
- Streamlined `AnvilMainCanvas` integration with conditional rendering
based on `renderMode`.
- Optimized `FlexLayout` component to handle new `isContainer` and
`layoutType` properties.

- **Bug Fixes**
- Fixed issues with widget positioning and event handling in
`WidgetNamesCanvas` components.
- Corrected `PageView` width property type for consistent page
rendering.

- **Refactor**
- Consolidated Anvil layout update management with `anvilSagas` and
`anvilChecksSagas`.
- Refined `SectionWidget` and `ZoneWidget` configuration for improved
stability and performance.
- Streamlined `LayoutElementPositionsObserver` with `layoutType`
enhancements.

- **Documentation**
- Updated comments and added clarifications for better developer
understanding of canvas-related hooks and components.

- **Style**
- Modified `.anvil-canvas` class styles for full-width and height
presentation.

- **Chores**
- Cleaned up import statements and removed unused code across various
components and utilities.

- **Tests**
- Enhanced Cypress tests with additional selectors and interaction
commands for `AutoDimension` feature verification.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Ashok Kumar M <35134347+marks0351@users.noreply.github.com>
2023-12-26 09:16:58 -05:00
..
.husky fix:lint staged (#27992) 2023-10-12 20:35:54 +03:00
.yarn
cypress feat: add layouts and widgets for sections and zones. (#29713) 2023-12-26 09:16:58 -05:00
docker/templates chore: frontend and backend telemetry updates for execute flow #28800 and #28805 (#28936) 2023-11-24 13:09:02 +05:30
generators
packages chore: Split Text widget (#29789) 2023-12-22 15:08:00 +03:00
perf
public chore: frontend and backend telemetry updates for execute flow #28800 and #28805 (#28936) 2023-11-24 13:09:02 +05:30
src feat: add layouts and widgets for sections and zones. (#29713) 2023-12-26 09:16:58 -05:00
test chore: Refactor entity explorer to support displaying module instances in the list (#28855) 2023-11-16 17:03:59 +05:30
typings feat: enable CSS Modules fro WDS (#26162) 2023-09-15 10:17:06 +03:00
.babelrc
.dockerignore
.editorconfig
.eslintrc.base.json chore: add consistent-type-definitions rule (#27907) 2023-10-11 10:35:24 +03:00
.eslintrc.js chore:add eslint rules (#27878) 2023-10-09 16:54:06 +03:00
.gitignore chore: get browser logs from failed cypress tests (#27724) 2023-10-05 14:42:30 +05:30
.lintstagedrc.json chore: Switch to gitleaks from git-secrets (#29103) 2023-11-28 06:32:20 +05:30
.nvmrc
.prettierignore
.prettierrc
.sentryclirc
.yarnrc.yml
build.sh fix: Revert "fix: Updates tab title from publish to showcase (#27867)" (#27893) 2023-10-09 14:06:45 +05:30
craco.build.config.js
craco.common.config.js chore: remove postcss-conditionals package (#27984) 2023-10-12 14:04:30 +03:00
craco.dev.config.js
cypress_ci_custom.config.ts test: Cypress - Added cypress grep library (#29259) 2023-12-07 18:23:27 +05:30
cypress_ci_hosted.config.ts test: Cypress - Added cypress grep library (#29259) 2023-12-07 18:23:27 +05:30
cypress_ci.config.ts test: Cypress - Added cypress grep library (#29259) 2023-12-07 18:23:27 +05:30
cypress-add-tags.js test: Cypress - Added cypress grep library (#29259) 2023-12-07 18:23:27 +05:30
cypress.config.ts test: Cypress - Added cypress grep library (#29259) 2023-12-07 18:23:27 +05:30
download-assets.js
jest.config.js chore: frontend and backend telemetry updates for execute flow #28800 and #28805 (#28936) 2023-11-24 13:09:02 +05:30
package.json fix: Blank states sidebar (#29768) 2023-12-26 14:39:14 +05:30
README.md
README.old.md
start-https.sh
tailwind.config.js
tsconfig.json
tsconfig.path.json
vercel.json
yarn.lock fix: Blank states sidebar (#29768) 2023-12-26 14:39:14 +05:30

Appsmith Client

This project was bootstrapped with Create React App.

For details on setting up your development machine, please refer to the Setup Guide