A specialized markdown-like workout syntax editor and runtime for defining workouts
npm install @bitcobblers/wod-wiki-libraryA React component library for parsing, displaying, and executing workout definitions using a specialized syntax. Features include a Monaco Editor integration for editing workout scripts, a runtime engine for execution, and components styled with Tailwind CSS.
``text`
x:/wod-wiki
├── .git/ # Git repository metadata
├── .github/ # GitHub workflows and templates
├── .obsidian/ # Obsidian workspace data
├── .storybook/ # Storybook configuration files
├── .vscode/ # VSCode workspace settings
├── dist/ # Build output directory (library and styles)
├── docs/ # Project and component documentation
├── node_modules/ # Project dependencies (ignored by git)
├── public/ # Static assets for Storybook/Vite
├── src/
│ ├── cast/ # Casting utilities or logic
│ ├── components/ # React components
│ │ ├── analyrics/ # Analytics and metrics components
│ │ ├── buttons/ # UI button components
│ │ ├── clock/ # Timer/clock components
│ │ ├── common/ # Shared/common components
│ │ ├── editor/ # Editor-specific components
│ │ ├── hooks/ # React hooks
│ │ └── providers/ # Context providers
│ ├── contexts/ # React context definitions
│ ├── core/ # Core logic (parser, runtime, services, utils)
│ │ ├── fragments/
│ │ ├── jit/
│ │ ├── parser/
│ │ ├── runtime/
│ │ ├── services/
│ │ └── utils/
│ ├── stories/ # Storybook stories for components
│ ├── index.css # Main CSS entry point (Tailwind directives)
│ └── index.ts # Library entry point (exports components)
├── storybook-static/ # Static export of Storybook
├── .gitignore # Specifies intentionally untracked files that Git should ignore
├── .windsurfrules # Windsurf deployment/config rules
├── package.json # Project metadata, dependencies, and scripts
├── package-lock.json # Dependency lockfile
├── postcss.config.js # PostCSS configuration (for Tailwind)
├── publish-alpha.ps1 # Script for publishing alpha builds
├── README.md # This file
├── tailwind.config.js # Tailwind CSS configuration
├── tsconfig.json # TypeScript configuration for the library source
├── tsconfig.node.json # TypeScript configuration for config files (Vite, Storybook)
├── tsconfig.tsbuildinfo # TypeScript incremental build info (ignored by git)
└── vite.config.ts # Vite configuration for building the library
Detailed documentation for the components, architecture, and workout syntax can be found in the docs directory:
The documentation in the docs directory is automatically published to the project's GitHub Wiki whenever changes are pushed to the main branch.
This project uses Storybook for component development and visualization.
`bash`
npm install
`bash`
npm run dev
This will start the Storybook development server, typically on http://localhost:6006.
To build the library for publishing or use in other projects:
`shell`
npm run build
This command will:
1. Compile TypeScript types (tsc).dist
2. Bundle the library code using Vite into the folder (creating ES and UMD formats).dist/style.css
3. Process and output the Tailwind CSS into .
To build a static version of the Storybook application (e.g., for deployment):
`bash`
npm run build-storybook
This will output the static Storybook site to the storybook-static directory.
> Note: This project uses Storybook 9.0.4. The dark mode functionality is temporarily disabled pending community addon compatibility updates.
`bash`
npm install @bitcobblers/wod-wiki
Ensure your project has the required peer dependencies installed:
`bash`
npm install react react-dom monaco-editor
`jsx
import React from 'react';
import { WodWikiEditor } from '@bitcobblers/wod-wiki'; // Example component import
import '@bitcobblers/wod-wiki/dist/style.css'; // Import the necessary CSS
function App() {
return (
export default App;
`
Important: Ensure your application's build process can handle CSS imports and that Tailwind CSS (if used directly in the consuming application) doesn't conflict. The provided style.css contains the necessary Tailwind styles for the components.
Run unit tests using Vitest:
`shell`
npm run test
Run interaction tests in Storybook:
1. First, make sure Storybook is running:
`shell`
npm run dev
2. In a separate terminal, run the Storybook test runner:
`shell`
npm run test-storybook
This will run all interaction tests defined in the stories using Playwright. The tests are defined in the play function of the stories, such as the timer test in src/stories/TimerTest.stories.tsx`.