diff --git a/codepress_documentation/.last-documented-commit b/codepress_documentation/.last-documented-commit new file mode 100644 index 0000000..05c30ab --- /dev/null +++ b/codepress_documentation/.last-documented-commit @@ -0,0 +1 @@ +195b984676d8bb3d8270b489434b2ceaafb1abe1 diff --git a/codepress_documentation/INDEX.md b/codepress_documentation/INDEX.md new file mode 100644 index 0000000..be4820c --- /dev/null +++ b/codepress_documentation/INDEX.md @@ -0,0 +1,6 @@ +# Feature Documentation Index + +| Feature | Slug | Area | Summary | Last Updated | +|---------|------|------|---------|--------------| +| DotDotDotLoader Component | dotdotdot-loader-component | lib/components | React npm library providing an animated ellipsis loading indicator with configurable dot count, timing, and repeat behavior. | 2026-06-01 | +| Demo App & Server | demo-app-server | src, server | Interactive demo application and Express server that showcases the DotDotDotLoader component with live-adjustable props and styled examples. | 2026-06-01 | diff --git a/codepress_documentation/features/demo-app-server/README.md b/codepress_documentation/features/demo-app-server/README.md new file mode 100644 index 0000000..739c1cc --- /dev/null +++ b/codepress_documentation/features/demo-app-server/README.md @@ -0,0 +1,37 @@ +--- +feature: demo-app-server +area: src, server +created: 2026-06-01 +last_updated: 2026-06-01 +--- + +# Demo App & Server + +## Overview + +The DotDotDotLoader demo app is a React-based interactive showcase for the `react-dotdotdotloader` library. It renders three instances of `DotDotDotLoader` with different CSS styles (unstyled, red large font, and oversized purple dots) and exposes live controls for all component props — dot count, animation interval, repeat toggle, and show/hide toggle. It serves as both a visual reference and a functional testbed for the component's configuration options. + +## Architecture + +The app is a single-page React application (class-based components, React 16) built with a custom Webpack configuration via `scripts/start.js` and `scripts/build.js`. The production build outputs static assets to a `/build` directory, which is then served by a minimal Express.js server. The client-side React app handles all routing; the server uses a catch-all wildcard route to always return `index.html`. Development uses `webpack-dev-server` while production uses the Express server via the `serve` npm script. + +## Key Files + +- `src/App.js` — Main React component: renders the interactive demo UI with prop controls and three styled `DotDotDotLoader` instances +- `src/App.css` — Demo layout styles including the three display variants (`noStyle`, `redStyle`, `greenStyle`/`dotStyle`) and toggle switch UI +- `src/Watermark.js` — Watermark component rendering a HelloDeploy attribution link +- `server/app.js` — Express app configuration: serves static build assets and falls back to `index.html` for all routes +- `server/index.js` — Express server entry point that starts listening on `PORT` (default 3000) +- `Dockerfile` — Docker image definition: installs dependencies via yarn, copies pre-built assets and server code, runs `yarn serve` + +## Express Server + +The Express server is split into two files: `server/app.js` configures static middleware for `/static` (serving `build/static`) and `/icons` (serving `build` root), plus a wildcard GET handler that returns `build/index.html` for all unmatched routes to support client-side navigation. `server/index.js` binds the app to the `PORT` environment variable, defaulting to 3000. + +## Docker + +The Dockerfile uses `node:latest`, sets `/usr/src/app` as the working directory, installs yarn and runs `yarn install`, then copies the pre-built `/build` directory and `/server` directory into the image. Exposes port 3000 and starts with `yarn serve`. The React build step is expected to happen outside Docker before image creation. + +## Keywords + +react, demo app, express, static file server, Docker, webpack, interactive props, showcase, dev server, webpack-dev-server, react 16, class component, serve diff --git a/codepress_documentation/features/dotdotdot-loader-component/README.md b/codepress_documentation/features/dotdotdot-loader-component/README.md new file mode 100644 index 0000000..875ccd4 --- /dev/null +++ b/codepress_documentation/features/dotdotdot-loader-component/README.md @@ -0,0 +1,42 @@ +--- +feature: dotdotdot-loader-component +area: lib/components +created: 2026-06-01 +last_updated: 2026-06-01 +--- + +# DotDotDotLoader Component + +## Overview + +DotDotDotLoader is a React class component that renders an animated ellipsis ("...") loading indicator as a plain text span. It provides a lightweight, stylable dot-by-dot loading animation that can be shown or hidden via props and inherits CSS text styling from its parent container. The component is published to npm as `react-dotdotdotloader` for easy integration into any React application. + +## Architecture + +The component uses a recursive `setTimeout` loop as its animation engine. An internal `dotState` counter tracks how many dots have been appended; on each tick it either appends a dot to the `dots` string or resets to a single dot when the count reaches the configured `amount` (if `repeat` is true). The `show` prop drives start/stop: mounting or receiving `show=true` starts the timer loop, while `show=false` clears the timeout and resets state. Props are synced from `componentDidMount` and the legacy `componentWillReceiveProps` lifecycle. The render output is a single `` containing the current dots string, or null when hidden, making CSS styling fully inherited from the parent. + +## Key Files + +- `lib/components/DotDotDotLoader/DotDotDotLoader.js` — Core component implementation: class-based React component with animation timer logic and render output +- `lib/index.js` — Library entry point: re-exports `DotDotDotLoader` as a named export for consumers +- `lib/components/DotDotDotLoader/package.json` — Component-level package descriptor pointing to the compiled JS file +- `package.json` — Root npm package manifest defining package name, version, main entry, scripts, and keywords + +## Props + +| Prop | Type | Default | Description | +|------|------|---------|-------------| +| `show` | Boolean | `false` | Controls visibility and animation. `true` starts the dot animation loop; `false` stops the timer and hides the component. Required to show/hide the loader. | +| `amount` | Integer | `3` | Maximum number of dots before cycling back to one dot (when `repeat` is true). | +| `interval` | Integer | `500` | Milliseconds between each dot appearing in the animation sequence. | +| `repeat` | Boolean | `true` | When `true`, the animation loops from one dot back to the configured `amount`. When `false`, dots accumulate indefinitely until `show` becomes `false`. | + +## NPM Package + +- **Name**: `react-dotdotdotloader` +- **Version**: `1.0.7` +- **Entry point**: `lib/index.js` + +## Keywords + +react, loader, ellipsis, dotdotdot, animation, dots, loading indicator, spinner, text loader, animated ellipsis, MIT