@almadar/cli 0.3.2 → 0.3.3

package/shells/typescript-shell/packages/client/src/clients/kflow/molecules/markdown/MarkdownContent.stories.tsx

@@ -0,0 +1,160 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { MarkdownContent } from "./MarkdownContent";
+
+const meta: Meta<typeof MarkdownContent> = {
+  title: "KFlow/Molecules/Markdown/MarkdownContent",
+  component: MarkdownContent,
+  parameters: {
+    layout: "padded",
+  },
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof MarkdownContent>;
+
+export const BasicText: Story = {
+  args: {
+    content: `# Introduction to Photosynthesis
+
+Photosynthesis is a process used by plants and other organisms to convert **light energy** into *chemical energy* that can be stored and later released to fuel the organism's activities.
+
+This process is fundamental to life on Earth as it:
+- Produces oxygen
+- Converts CO₂ into organic compounds
+- Forms the base of most food chains`,
+  },
+};
+
+export const WithInlineCode: Story = {
+  args: {
+    content: `## Using Variables in JavaScript
+
+In JavaScript, you can declare variables using \`const\`, \`let\`, or \`var\`.
+
+The \`const\` keyword is used for values that won't change, while \`let\` allows reassignment.
+
+For example, \`const PI = 3.14159\` creates a constant, and \`let count = 0\` creates a mutable variable.`,
+  },
+};
+
+export const WithTable: Story = {
+  args: {
+    content: `## Comparison of Data Types
+
+| Type | Mutable | Ordered | Duplicates |
+|------|---------|---------|------------|
+| List | Yes | Yes | Yes |
+| Tuple | No | Yes | Yes |
+| Set | Yes | No | No |
+| Dict | Yes | No | Keys: No |
+
+Each data type has its own use cases based on these characteristics.`,
+  },
+};
+
+export const WithMath: Story = {
+  args: {
+    content: `## The Quadratic Formula
+
+The solutions to the quadratic equation $ax^2 + bx + c = 0$ are given by:
+
+$$x = \\frac{-b \\pm \\sqrt{b^2 - 4ac}}{2a}$$
+
+Where:
+- $a$ is the coefficient of $x^2$
+- $b$ is the coefficient of $x$
+- $c$ is the constant term
+
+The discriminant $\\Delta = b^2 - 4ac$ determines the nature of the roots.`,
+  },
+};
+
+export const WithBlockquote: Story = {
+  args: {
+    content: `## Famous Programming Quotes
+
+> "Programs must be written for people to read, and only incidentally for machines to execute."
+> — Harold Abelson
+
+This quote emphasizes the importance of code readability.
+
+> "Any fool can write code that a computer can understand. Good programmers write code that humans can understand."
+> — Martin Fowler`,
+  },
+};
+
+export const WithLinks: Story = {
+  args: {
+    content: `## Learning Resources
+
+Here are some helpful resources for learning:
+
+- [MDN Web Docs](https://developer.mozilla.org) - Comprehensive web documentation
+- [React Documentation](https://react.dev) - Official React docs
+- [TypeScript Handbook](https://www.typescriptlang.org/docs/) - Learn TypeScript
+
+You can also check out internal links like [the next chapter](#chapter-2).`,
+  },
+};
+
+export const WithLists: Story = {
+  args: {
+    content: `## Project Setup Steps
+
+1. **Clone the repository**
+   - Use \`git clone\` to download
+   - Navigate to the project folder
+
+2. **Install dependencies**
+   - Run \`npm install\`
+   - Check for any peer dependency warnings
+
+3. **Configure environment**
+   - Copy \`.env.example\` to \`.env\`
+   - Fill in required values
+
+### Additional Notes
+
+- Make sure Node.js v18+ is installed
+- Use a code editor with TypeScript support
+- Consider using VS Code with recommended extensions`,
+  },
+};
+
+export const ComplexLesson: Story = {
+  args: {
+    content: `# Understanding Neural Networks
+
+## Introduction
+
+Neural networks are computing systems inspired by **biological neural networks** that constitute animal brains.
+
+## Key Concepts
+
+### Neurons and Layers
+
+A neural network consists of:
+
+1. **Input Layer** - Receives the initial data
+2. **Hidden Layers** - Process the information
+3. **Output Layer** - Produces the final result
+
+### Activation Functions
+
+Common activation functions include:
+
+| Function | Formula | Use Case |
+|----------|---------|----------|
+| ReLU | $f(x) = max(0, x)$ | Hidden layers |
+| Sigmoid | $f(x) = \\frac{1}{1 + e^{-x}}$ | Binary classification |
+| Softmax | $f(x_i) = \\frac{e^{x_i}}{\\sum_j e^{x_j}}$ | Multi-class output |
+
+> "Deep learning allows computational models composed of multiple processing layers to learn representations of data with multiple levels of abstraction."
+> — LeCun, Bengio, Hinton (2015)
+
+### Forward Propagation
+
+The output is calculated using \`y = activation(weights · inputs + bias)\` for each neuron.`,
+  },
+};

package/shells/typescript-shell/packages/client/src/clients/kflow/molecules/markdown/MarkdownContent.tsx

@@ -0,0 +1,131 @@
+/**
+ * MarkdownContent Molecule Component
+ *
+ * Renders markdown content with support for GFM (GitHub Flavored Markdown),
+ * math equations (KaTeX), and raw HTML. Handles inline code only - fenced
+ * code blocks should be parsed out and rendered with CodeBlock component.
+ *
+ * Event Contract:
+ * - No events emitted (display-only component)
+ * - entityAware: false
+ */
+
+import React from "react";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import remarkMath from "remark-math";
+import rehypeKatex from "rehype-katex";
+import rehypeRaw from "rehype-raw";
+import "katex/dist/katex.min.css";
+
+export interface MarkdownContentProps {
+  /** The markdown content to render */
+  content: string;
+  /** Additional CSS classes */
+  className?: string;
+}
+
+export const MarkdownContent = React.memo<MarkdownContentProps>(
+  ({ content, className }) => {
+    return (
+      <div
+        className={`prose prose-slate dark:prose-invert max-w-none ${className || ""}`}
+      >
+        <ReactMarkdown
+          remarkPlugins={[remarkMath, remarkGfm]}
+          rehypePlugins={[
+            [rehypeRaw, {}],
+            [rehypeKatex, { strict: false, throwOnError: false }],
+          ]}
+          components={{
+            // Handle inline code only - fenced code blocks are parsed out separately
+            code({ className: codeClassName, children, ...props }) {
+              return (
+                <code
+                  {...props}
+                  className={codeClassName}
+                  style={{
+                    backgroundColor: "#1f2937",
+                    color: "#e5e7eb",
+                    padding: "0.125rem 0.375rem",
+                    borderRadius: "0.25rem",
+                    fontSize: "0.875em",
+                    fontFamily: "ui-monospace, monospace",
+                  }}
+                >
+                  {children}
+                </code>
+              );
+            },
+            // Style links
+            a({ href, children, ...props }) {
+              return (
+                <a
+                  href={href}
+                  {...props}
+                  className="text-blue-600 dark:text-blue-400 hover:underline"
+                  target={href?.startsWith("http") ? "_blank" : undefined}
+                  rel={
+                    href?.startsWith("http") ? "noopener noreferrer" : undefined
+                  }
+                >
+                  {children}
+                </a>
+              );
+            },
+            // Style tables
+            table({ children, ...props }) {
+              return (
+                <div className="overflow-x-auto my-4">
+                  <table
+                    {...props}
+                    className="min-w-full border-collapse border border-gray-300 dark:border-gray-600"
+                  >
+                    {children}
+                  </table>
+                </div>
+              );
+            },
+            th({ children, ...props }) {
+              return (
+                <th
+                  {...props}
+                  className="border border-gray-300 dark:border-gray-600 bg-gray-100 dark:bg-gray-800 px-4 py-2 text-left font-semibold"
+                >
+                  {children}
+                </th>
+              );
+            },
+            td({ children, ...props }) {
+              return (
+                <td
+                  {...props}
+                  className="border border-gray-300 dark:border-gray-600 px-4 py-2"
+                >
+                  {children}
+                </td>
+              );
+            },
+            // Style blockquotes
+            blockquote({ children, ...props }) {
+              return (
+                <blockquote
+                  {...props}
+                  className="border-l-4 border-blue-500 pl-4 italic text-gray-700 dark:text-gray-300 my-4"
+                >
+                  {children}
+                </blockquote>
+              );
+            },
+          }}
+        >
+          {content}
+        </ReactMarkdown>
+      </div>
+    );
+  },
+  (prev, next) =>
+    prev.content === next.content && prev.className === next.className,
+);
+
+MarkdownContent.displayName = "MarkdownContent";

package/shells/typescript-shell/packages/client/src/clients/kflow/molecules/markdown/index.ts

@@ -0,0 +1,5 @@
+export { CodeBlock } from "./CodeBlock";
+export type { CodeBlockProps } from "./CodeBlock";
+
+export { MarkdownContent } from "./MarkdownContent";
+export type { MarkdownContentProps } from "./MarkdownContent";

package/shells/typescript-shell/packages/client/src/clients/kflow/organisms/ConceptCard.stories.tsx

@@ -0,0 +1,155 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { BookOpen, Star, Zap } from 'lucide-react';
+import { ConceptCard } from './ConceptCard';
+
+const meta: Meta<typeof ConceptCard> = {
+  title: 'KFlow/Organisms/ConceptCard',
+  component: ConceptCard,
+  parameters: {
+    layout: 'padded',
+  },
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof ConceptCard>;
+
+export const Default: Story = {
+  args: {
+    entity: {
+      id: 'concept-1',
+      name: 'Introduction to Machine Learning',
+      description: 'Learn the fundamentals of machine learning algorithms and their applications.',
+    },
+  },
+};
+
+export const WithLesson: Story = {
+  args: {
+    entity: {
+      id: 'concept-2',
+      name: 'Neural Networks Basics',
+      description: 'Understanding the architecture and training of neural networks.',
+      hasLesson: true,
+    },
+  },
+};
+
+export const CurrentConcept: Story = {
+  args: {
+    entity: {
+      id: 'concept-3',
+      name: 'Deep Learning',
+      description: 'Advanced techniques in deep neural networks.',
+      isCurrent: true,
+      hasLesson: true,
+    },
+  },
+};
+
+export const CompletedConcept: Story = {
+  args: {
+    entity: {
+      id: 'concept-4',
+      name: 'Linear Algebra Review',
+      description: 'A review of essential linear algebra concepts.',
+      isCompleted: true,
+    },
+  },
+};
+
+export const WithProgress: Story = {
+  args: {
+    entity: {
+      id: 'concept-5',
+      name: 'Convolutional Networks',
+      description: 'Image processing with CNNs.',
+      progress: 65,
+      hasLesson: true,
+    },
+  },
+};
+
+export const WithPrerequisites: Story = {
+  args: {
+    entity: {
+      id: 'concept-6',
+      name: 'Recurrent Neural Networks',
+      description: 'Sequential data processing with RNNs and LSTMs.',
+      prerequisites: ['Neural Networks Basics', 'Backpropagation'],
+      parents: ['Deep Learning'],
+      hasLesson: true,
+    },
+  },
+};
+
+export const WithOperations: Story = {
+  args: {
+    entity: {
+      id: 'concept-7',
+      name: 'Transformers',
+      description: 'Attention mechanisms and transformer architecture.',
+      hasLesson: true,
+    },
+    operations: [
+      { label: 'Start Lesson', action: 'start', variant: 'primary' },
+      { label: 'Practice', action: 'practice', variant: 'secondary' },
+    ],
+  },
+};
+
+export const WithChildren: Story = {
+  args: {
+    entity: {
+      id: 'concept-8',
+      name: 'Natural Language Processing',
+      description: 'Processing and understanding human language.',
+      hasLesson: true,
+      childConcepts: [
+        {
+          id: 'child-1',
+          name: 'Tokenization',
+          description: 'Breaking text into tokens.',
+          hasLesson: true,
+        },
+        {
+          id: 'child-2',
+          name: 'Word Embeddings',
+          description: 'Vector representations of words.',
+          hasLesson: false,
+        },
+        {
+          id: 'child-3',
+          name: 'Sentiment Analysis',
+          description: 'Determining sentiment from text.',
+          isCompleted: true,
+        },
+      ],
+    },
+    expanded: true,
+  },
+};
+
+export const WithIcon: Story = {
+  args: {
+    entity: {
+      id: 'concept-9',
+      name: 'Reinforcement Learning',
+      description: 'Learning through interaction with environments.',
+      hasLesson: true,
+    },
+    icon: Zap,
+  },
+};
+
+export const HiddenLessonBadge: Story = {
+  args: {
+    entity: {
+      id: 'concept-10',
+      name: 'Q-Learning',
+      description: 'Value-based reinforcement learning algorithm.',
+      hasLesson: true,
+    },
+    hideLessonBadge: true,
+  },
+};