Skip to content

Commit cf96b57

Browse files
NikitaCGNikitaCG
authored
chore: add memory bank for cline (#1183)
1 parent 5d22156 commit cf96b57

File tree

13 files changed

+1366
-0
lines changed

13 files changed

+1366
-0
lines changed

‎.clineignore‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
npm-debug.log
2+
3+
.idea/
4+
.DS_Store
5+
.vscode
6+
.history
7+
8+
node_modules
9+
10+
#env
11+
env/*
12+
.env
13+
.envrc
14+
15+
# dist folder (except favicon)
16+
dist/*
17+
18+
# build
19+
build/*
20+
21+
*.tgz

‎.clinerules‎

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
# Cline's Memory Bank
2+
3+
I am Cline, an expert software engineer with a unique characteristic: my memory resets completely between sessions. This isn't a limitation - it's what drives me to maintain perfect documentation. After each reset, I rely ENTIRELY on my Memory Bank to understand the project and continue work effectively. I MUST read ALL memory bank files at the start of EVERY task - this is not optional.
4+
5+
## Memory Bank Structure
6+
7+
The Memory Bank consists of core files and optional context files, all in Markdown format. Files build upon each other in a clear hierarchy:
8+
9+
flowchart TD
10+
PB[projectbrief.md] --> PC[productContext.md]
11+
PB --> SP[systemPatterns.md]
12+
PB --> TC[techContext.md]
13+
14+
PC --> AC[activeContext.md]
15+
SP --> AC
16+
TC --> AC
17+
18+
AC --> P[progress.md]
19+
20+
### Core Files (Required)
21+
1. `projectbrief.md`
22+
- Foundation document that shapes all other files
23+
- Created at project start if it doesn't exist
24+
- Defines core requirements and goals
25+
- Source of truth for project scope
26+
27+
2. `productContext.md`
28+
- Why this project exists
29+
- Problems it solves
30+
- How it should work
31+
- User experience goals
32+
33+
3. `activeContext.md`
34+
- Current work focus
35+
- Recent changes
36+
- Next steps
37+
- Active decisions and considerations
38+
- Important patterns and preferences
39+
- Learnings and project insights
40+
41+
4. `systemPatterns.md`
42+
- System architecture
43+
- Key technical decisions
44+
- Design patterns in use
45+
- Component relationships
46+
- Critical implementation paths
47+
48+
5. `techContext.md`
49+
- Technologies used
50+
- Development setup
51+
- Technical constraints
52+
- Dependencies
53+
- Tool usage patterns
54+
55+
6. `progress.md`
56+
- What works
57+
- What's left to build
58+
- Current status
59+
- Known issues
60+
- Evolution of project decisions
61+
62+
### Additional Context
63+
Create additional files/folders within memory-bank/ when they help organize:
64+
- Complex feature documentation
65+
- Integration specifications
66+
- API documentation
67+
- Testing strategies
68+
- Deployment procedures
69+
70+
## Core Workflows
71+
72+
### Plan Mode
73+
flowchart TD
74+
Start[Start] --> ReadFiles[Read Memory Bank]
75+
ReadFiles --> CheckFiles{Files Complete?}
76+
77+
CheckFiles -->|No| Plan[Create Plan]
78+
Plan --> Document[Document in Chat]
79+
80+
CheckFiles -->|Yes| Verify[Verify Context]
81+
Verify --> Strategy[Develop Strategy]
82+
Strategy --> Present[Present Approach]
83+
84+
### Act Mode
85+
flowchart TD
86+
Start[Start] --> Context[Check Memory Bank]
87+
Context --> Update[Update Documentation]
88+
Update --> Execute[Execute Task]
89+
Execute --> Document[Document Changes]
90+
91+
## Documentation Updates
92+
93+
Memory Bank updates occur when:
94+
1. Discovering new project patterns
95+
2. After implementing significant changes
96+
3. When user requests with **update memory bank** (MUST review ALL files)
97+
4. When context needs clarification
98+
99+
flowchart TD
100+
Start[Update Process]
101+
102+
subgraph Process
103+
P1[Review ALL Files]
104+
P2[Document Current State]
105+
P3[Clarify Next Steps]
106+
P4[Document Insights & Patterns]
107+
108+
P1 --> P2 --> P3 --> P4
109+
end
110+
111+
Start --> Process
112+
113+
Note: When triggered by **update memory bank**, I MUST review every memory bank file, even if some don't require updates. Focus particularly on activeContext.md and progress.md as they track current state.
114+
115+
REMEMBER: After every memory reset, I begin completely fresh. The Memory Bank is my only link to previous work. It must be maintained with precision and clarity, as my effectiveness depends entirely on its accuracy.

‎memory-bank/activeContext.md‎

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
# Active Context: Page Constructor
2+
3+
## Current Focus
4+
5+
The Page Constructor library is currently focused on providing a comprehensive solution for building web pages using a component-based approach. The library consists of several key parts:
6+
7+
1. **Core Library**: The main React components for rendering pages based on JSON data
8+
2. **Editor**: A visual interface for creating and editing pages
9+
3. **Widget**: An embeddable component for previewing pages
10+
4. **Server Utilities**: Tools for transforming content on the server side
11+
12+
## Recent Changes
13+
14+
Recent development has focused on:
15+
16+
1. **Improved Block Components**: Enhancing existing blocks and adding new ones
17+
2. **Editor Enhancements**: Making the editor more user-friendly and feature-rich
18+
3. **Performance Optimization**: Reducing bundle size and improving rendering performance
19+
4. **Accessibility Improvements**: Ensuring components meet accessibility standards
20+
5. **Documentation**: Expanding Storybook examples and documentation
21+
22+
## Active Decisions and Considerations
23+
24+
### Architecture
25+
26+
- **Component Structure**: The library follows a hierarchical component structure with blocks, sub-blocks, and base components
27+
- **Context Providers**: Multiple context providers manage different aspects of the application (theme, mobile detection, analytics, etc.)
28+
- **Type System**: A comprehensive TypeScript type system ensures type safety and developer experience
29+
30+
### Block System
31+
32+
- **Block Types**: Each block has a specific type and set of properties
33+
- **Schema Validation**: JSON Schema validation ensures data integrity
34+
- **Theming**: Blocks support light and dark themes with themed properties
35+
- **Animation**: Blocks can be animated with configurable settings
36+
37+
### Editor Experience
38+
39+
- **Real-time Preview**: Changes in the editor are immediately reflected in the preview
40+
- **Code Editing**: Support for direct JSON/YAML editing
41+
- **Form-based Editing**: User-friendly forms for configuring block properties
42+
- **Block Templates**: Pre-defined templates for common block configurations
43+
44+
### Integration Patterns
45+
46+
- **Custom Blocks**: Applications can register custom blocks
47+
- **Server Transformation**: Content can be transformed on the server side
48+
- **Analytics Integration**: Hooks for tracking user interactions
49+
- **Internationalization**: Support for multiple languages
50+
51+
## Next Steps
52+
53+
The following areas are being considered for future development:
54+
55+
1. **YAML Support**: Enhancing support for YAML format
56+
2. **Mobile Optimization**: Improving mobile experience for both editor and rendered pages
57+
3. **Performance Enhancements**: Further optimizing bundle size and rendering performance
58+
4. **Accessibility Compliance**: Ensuring all components meet WCAG 2.1 AA standards
59+
5. **Documentation Expansion**: Adding more examples and use cases
60+
61+
## Important Patterns and Preferences
62+
63+
### Code Organization
64+
65+
- **Component Structure**: Each block is in its own directory with component, styles, schema, and tests
66+
- **Type Definitions**: Comprehensive TypeScript types for all components and data structures
67+
- **Context Usage**: React context for sharing configuration and state
68+
- **Styling Approach**: SCSS with BEM methodology for styling
69+
70+
### Development Workflow
71+
72+
- **Testing**: Unit tests with Jest and end-to-end tests with Playwright
73+
- **Documentation**: Storybook for component documentation and examples
74+
- **Release Process**: Semantic versioning with automated releases
75+
- **Code Quality**: ESLint, Stylelint, and Prettier for code quality and formatting
76+
77+
## Learnings and Project Insights
78+
79+
### Successful Patterns
80+
81+
1. **Component-based Architecture**: The component-based approach has proven flexible and maintainable
82+
2. **TypeScript Integration**: Strong typing has improved developer experience and reduced errors
83+
3. **Context Providers**: Using context providers for configuration has simplified component implementation
84+
4. **Schema Validation**: JSON Schema validation has ensured data integrity
85+
86+
### Challenges
87+
88+
1. **Bundle Size**: Managing bundle size with many dependencies
89+
2. **Mobile Experience**: Ensuring consistent experience across devices
90+
3. **Backward Compatibility**: Maintaining compatibility while evolving the API
91+
4. **Documentation**: Keeping documentation up-to-date with new features
92+
93+
### Key Insights
94+
95+
1. **Flexibility vs. Simplicity**: Balancing flexibility for developers with simplicity for content creators
96+
2. **Performance Considerations**: Optimizing performance for large pages with many blocks
97+
3. **Integration Challenges**: Addressing challenges when integrating with different applications
98+
4. **User Experience**: Focusing on both developer and end-user experience

‎memory-bank/blockDeps/banner.md‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
# Banner Block Dependencies
2+
3+
This document outlines the dependency graph for the Banner block, showing its relationships with other blocks, sub-blocks, components, and contexts.
4+
5+
## Dependency Graph
6+
7+
```mermaid
8+
graph TD
9+
%% Main Block
10+
Banner[Banner Block]
11+
12+
%% Sub-blocks
13+
BannerCard[BannerCard Sub-block]
14+
15+
%% Components (Only those available in Storybook)
16+
AnimateBlock[AnimateBlock Component]
17+
BackgroundImage[BackgroundImage Component]
18+
Button[Button Component]
19+
YFMWrapper[YFMWrapper Component]
20+
Image[Image Component]
21+
22+
%% Dependencies for Banner Block
23+
Banner --> BannerCard
24+
Banner --> AnimateBlock
25+
26+
%% Dependencies for BannerCard
27+
BannerCard --> BackgroundImage
28+
BannerCard --> Button
29+
BannerCard --> YFMWrapper
30+
31+
%% Secondary dependencies
32+
BackgroundImage --> Image
33+
34+
%% Style classes
35+
style Banner fill:#f9d77e,stroke:#f9bc02,stroke-width:2px,color:#000
36+
style BannerCard fill:#f9d77e,stroke:#f9bc02,stroke-width:2px,color:#000
37+
38+
%% Component styles
39+
style AnimateBlock fill:#a8d5ba,stroke:#1a936f,stroke-width:1px,color:#000
40+
style BackgroundImage fill:#a8d5ba,stroke:#1a936f,stroke-width:1px,color:#000
41+
style Button fill:#a8d5ba,stroke:#1a936f,stroke-width:1px,color:#000
42+
style YFMWrapper fill:#a8d5ba,stroke:#1a936f,stroke-width:1px,color:#000
43+
style Image fill:#a8d5ba,stroke:#1a936f,stroke-width:1px,color:#000
44+
```
45+
46+
## Component Details
47+
48+
### Banner Block
49+
50+
- **File**: `src/blocks/Banner/Banner.tsx`
51+
- **Description**: A block component that wraps the BannerCard sub-block with animation capabilities.
52+
- **Props**: `BannerBlockProps` which extends `BannerCardProps` and adds `animated` property.
53+
54+
### BannerCard Sub-block
55+
56+
- **File**: `src/sub-blocks/BannerCard/BannerCard.tsx`
57+
- **Description**: Renders a banner with title, subtitle, background image, and a call-to-action button.
58+
- **Props**: `BannerCardProps` including title, subtitle, image, color, theme, button properties.
59+
60+
## Key Dependencies (Available in Storybook)
61+
62+
### Components
63+
64+
- **AnimateBlock**: Provides animation capabilities when elements enter the viewport.
65+
- **BackgroundImage**: Renders background images with optional compression.
66+
- **Button**: Renders styled buttons with various themes and sizes.
67+
- **YFMWrapper**: Renders Yandex Flavored Markdown content.
68+
- **Image**: Renders images with various options (used by BackgroundImage).

‎memory-bank/productContext.md‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
# Product Context: Page Constructor
2+
3+
## Purpose
4+
5+
Page Constructor is a library designed to solve the challenge of creating and maintaining web pages with a consistent design system while allowing for flexibility and customization. It addresses the following problems:
6+
7+
1. **Content Management Complexity**: Traditional CMS systems often require technical knowledge or are too rigid for complex layouts.
8+
9+
2. **Design Consistency**: Maintaining consistent design across multiple pages and websites is challenging.
10+
11+
3. **Developer-Content Creator Gap**: Bridging the gap between developers who build components and content creators who assemble pages.
12+
13+
4. **Maintenance Overhead**: Updating designs across multiple pages requires significant effort without a component-based system.
14+
15+
## User Experience Goals
16+
17+
### For Developers
18+
19+
- **Easy Integration**: Simple to integrate into existing React applications
20+
- **Extensibility**: Ability to create custom blocks and extend functionality
21+
- **Type Safety**: Strong TypeScript typing for reliable development
22+
- **Performance**: Optimized rendering and loading for large pages
23+
- **Customization**: Theming and styling flexibility to match brand requirements
24+
25+
### For Content Creators
26+
27+
- **Visual Editing**: WYSIWYG editor for creating and modifying pages
28+
- **Component Library**: Ready-made blocks for common page elements
29+
- **Real-time Preview**: Immediate visual feedback on changes
30+
- **JSON/YAML Support**: Structured data format for page definition
31+
- **Theme Switching**: Easy toggling between light and dark themes
32+
33+
### For End Users
34+
35+
- **Fast Loading**: Optimized performance for quick page rendering
36+
- **Responsive Design**: Proper display across all device sizes
37+
- **Accessibility**: Compliance with accessibility standards
38+
- **Consistent Experience**: Unified design language across pages
39+
- **Interactive Elements**: Support for dynamic content and user interactions
40+
41+
## Key Workflows
42+
43+
### Page Creation
44+
45+
1. Developer integrates Page Constructor into their application
46+
2. Content creator uses the editor to:
47+
- Select blocks from the component library
48+
- Configure block properties
49+
- Arrange blocks in the desired order
50+
- Preview the page in different device sizes and themes
51+
3. The page is saved as JSON/YAML data
52+
4. The application renders the page using the Page Constructor component
53+
54+
### Page Customization
55+
56+
1. Developer creates custom blocks specific to their application
57+
2. Developer registers custom blocks with Page Constructor
58+
3. Content creator can use both standard and custom blocks in the editor
59+
4. The application renders the custom blocks alongside standard ones
60+
61+
### Content Transformation
62+
63+
1. Content is authored in Yandex Flavored Markdown (YFM)
64+
2. Server utilities transform YFM to HTML
65+
3. Transformed content is displayed within blocks
66+
4. Typography and styling are applied consistently
67+
68+
## Integration Points
69+
70+
- **React Applications**: Primary integration as React components
71+
- **Server-Side Rendering**: Support for SSR in Node.js environments
72+
- **Analytics Systems**: Hooks for tracking user interactions
73+
- **Map Services**: Integration with mapping providers
74+
- **Form Handlers**: Connection to form processing services (Yandex Forms, Hubspot)
75+
- **Internationalization**: Integration with i18n systems
76+
77+
## Value Proposition
78+
79+
Page Constructor empowers organizations to:
80+
81+
1. **Accelerate Development**: Reduce time to market with ready-made components
82+
2. **Improve Consistency**: Maintain design coherence across digital properties
83+
3. **Enhance Collaboration**: Enable non-technical team members to create and edit pages
84+
4. **Reduce Maintenance**: Simplify updates and changes through component reuse
85+
5. **Ensure Quality**: Maintain performance and accessibility standards

0 commit comments

Comments
 (0)