@sp-days-framework/create-sp-days 1.0.4 → 1.1.0-beta2

package/tsconfig.base.client.json

@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.base.json",
+  "compilerOptions": {
+    "tsBuildInfoFile": "${configDir}/lib/.tsbuildinfo-client",
+    "noEmit": false,
+    "moduleResolution": "bundler",
+    "module": "esnext",
+    "target": "esnext"
+  }
+}

package/tsconfig.base.json

@@ -0,0 +1,71 @@
+{
+  "compilerOptions": {
+    "rootDir": "${configDir}/src",
+    "outDir": "${configDir}/lib",
+    "composite": true,
+    "incremental": true,
+    "tsBuildInfoFile": "${configDir}/lib/.tsbuildinfo",
+    "erasableSyntaxOnly": true,
+    /* Emit */
+    "target": "ES2020",
+    "lib": ["ESNext"],
+    "declaration": true,
+    // These two options will be selectively overridden in each project.
+    // Utility libraries will have source maps on, but plugins will not.
+    "declarationMap": false,
+    "sourceMap": false,
+    "jsx": "react-native",
+    "importHelpers": true,
+    "noEmitHelpers": true,
+    // Will be overridden in client projects
+    "module": "NodeNext",
+    // Avoid accidentally using this config to build
+    "noEmit": true,
+
+    /* Strict Type-Checking Options */
+    "allowUnreachableCode": false,
+    // Too hard to turn on
+    "exactOptionalPropertyTypes": false,
+    "noFallthroughCasesInSwitch": true,
+    "noImplicitOverride": true,
+    "noImplicitReturns": true,
+    // `process.env` is usually accessed as property
+    "noPropertyAccessFromIndexSignature": false,
+    "noUncheckedIndexedAccess": true,
+    /* strict family */
+    "strict": true,
+    "alwaysStrict": true,
+    "noImplicitAny": true,
+    "noImplicitThis": true,
+    "strictBindCallApply": true,
+    "strictFunctionTypes": true,
+    "strictNullChecks": true,
+    "strictPropertyInitialization": true,
+    "useUnknownInCatchVariables": true,
+    /* Handled by ESLint */
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "importsNotUsedAsValues": "remove",
+
+    /* Module Resolution */
+    "moduleResolution": "NodeNext",
+    "resolveJsonModule": true,
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "isolatedModules": true,
+    "allowJs": true,
+    "skipLibCheck": true // @types/webpack and webpack/types.d.ts are not the same thing
+  },
+  "include": ["./**/*", "./**/.eslintrc.js"],
+  "exclude": [
+    "node_modules",
+    "coverage/**",
+    "**/lib/**/*",
+    "website/**",
+    "**/__mocks__/**/*",
+    "**/__fixtures__/**/*",
+    "examples/**",
+    "packages/create-docusaurus/templates/**"
+  ]
+}

package/tsconfig.build.json

@@ -0,0 +1,9 @@
+{
+  "extends": "./tsconfig.base.json",
+  "compilerOptions": {
+    "noEmit": false,
+    "tsBuildInfoFile": "lib/.tsbuildinfo-build"
+  },
+  "include": ["src"],
+  "exclude": ["templates/", "**/__tests__/**"]
+}

package/templates/addon-resources/resources/interactive-tasks/creating-tasks.mdx

@@ -1,254 +0,0 @@
----
-sidebar_position: 2
----
-
-import Tabs from "@theme/Tabs";
-import TabItem from "@theme/TabItem";
-import Mermaid from '@theme/Mermaid';
-
-# Task Component
-
-Learn how to create interactive tasks with various features including hints, solutions, and non-persistent examples.
-
-## Syntax Reference
-
-| Element | Directive | Requirement | Notes |
-|---------|-----------|-------------|-------|
-| **Task Container** | `::::task[Task Name]` (4+ colons) | Required | Tasks are auto-numbered sequentially per page |
-| **Hint Section** | `:::hint` (3+ colons) | Optional | Max one per task; additional hints ignored with warning. Can appear anywhere inside task container |
-| **Solution Section** | `:::solution` (3+ colons) | Optional | Max one per task; additional solutions ignored with warning. Can appear anywhere inside task container |
-| **Task Example** | `::::task-example[Example Name]` (4+ colons) | Required | Same as regular tasks but non-persistent; uses "Example N" numbering |
-
-## Basic Task
-
-A simple task without hints or solutions.
-
-
-```md
-::::task[Create a Component]
-
-Create a new React component in `src/components/MyComponent.tsx`.
-
-::::
-```
-
-::::task-example[Create a Component]
-
-Create a new React component in `src/components/MyComponent.tsx`.
-
-::::
-
-
----
-
-## Task with Hint
-
-Add a hint to guide users through the task.
-
-
-```mdx
-::::task[Configure TypeScript]
-
-Set up TypeScript configuration for strict mode.
-
-:::hint
-Look for the `tsconfig.json` file in your project root.
-:::
-
-::::
-```
-
-::::task-example[Configure TypeScript]
-
-Set up TypeScript configuration for strict mode.
-
-:::hint
-Look for the `tsconfig.json` file in your project root.
-:::
-
-::::
-
----
-
-## Task with Solution
-
-Provide a complete solution for the task.
-
-
-```mdx
-::::task[Create Package JSON]
-
-Initialize a new Node.js project with npm.
-
-:::solution
-Run `npm init -y` in your project directory.
-:::
-
-::::
-```
-
-::::task-example[Create Package JSON]
-
-Initialize a new Node.js project with npm.
-
-:::solution
-Run `npm init -y` in your project directory.
-:::
-
-::::
-
----
-
-## Task with Hint and Solution
-
-Combine both hint and solution for comprehensive guidance.
-
-````mdx
-::::task[Add API Route]
-
-Create a new API endpoint for user authentication.
-
-:::hint
-API routes in Next.js go in the `app/api` directory.
-:::
-
-:::solution
-Create `app/api/auth/route.ts`:
-
-```typescript
-export async function POST(request: Request) {
-const body = await request.json();
-// Authentication logic here
-return Response.json({ success: true });
-}
-```
-:::
-
-::::
-````
-
-::::task-example[Add API Route]
-
-Create a new API endpoint for user authentication.
-
-:::hint
-API routes in Next.js go in the `app/api` directory.
-:::
-
-:::solution
-Create `app/api/auth/route.ts`:
-
-```typescript
-export async function POST(request: Request) {
-const body = await request.json();
-// Authentication logic here
-return Response.json({ success: true });
-}
-```
-:::
-
-::::
-
-
----
-
-## Using Markdown Features
-
-Tasks fully support standard Docusaurus markdown features like the [admonitions feature](https://docusaurus.io/docs/markdown-features/admonitions).
-
-
-````mdx
-::::task[Setup Development Environment]
-
-Follow these steps to configure your workspace.
-
-:::note
-Make sure you have Node.js 18+ installed before proceeding.
-:::
-
-**Installation Steps:**
-
-1. Install dependencies:
-```bash
-npm install
-```
-
-2. Start the development server:
-```bash
-npm run dev
-```
-
-:::warning
-Do not commit your `.env` file to version control!
-:::
-
-:::hint
-Check the README.md for environment variable examples.
-:::
-
-::::
-````
-
-::::task-example[Setup Development Environment]
-
-Follow these steps to configure your workspace.
-
-:::note
-Make sure you have Node.js 18+ installed before proceeding.
-:::
-
-**Installation Steps:**
-
-1. Install dependencies:
-```bash
-npm install
-```
-
-2. Start the development server:
-```bash
-npm run dev
-```
-
-:::warning
-Do not commit your `.env` file to version control!
-:::
-
-:::hint
-Check the README.md for environment variable examples.
-:::
-
-::::
-
-
-## Nesting
-
-The `::::task` directive supports nesting [admonitions](https://docusaurus.io/docs/markdown-features/admonitions) and other markdown features by using colon count to determine hierarchy. Each parent container must use **more colons** than its children to prevent premature closure.
-
-**Nesting rules:**
-- Task container: `::::task` (4+ colons)
-  - Hint/Solution: `:::hint` or `:::solution` (3+ colons)
-    - Nested admonition: `:::note`, `:::tip`, etc. (3+ colons)
-    - For deeper nesting, add more colons to parent containers
-
-Each level needs more colons than its children to avoid premature closure.
-
-### Nesting Example
-
-```mdx
-::::::task[Nested Example]
-(Layer 1)
-
-:::::hint
-(Layer 2)
-
-::::note
-(Layer 3)
-
-:::warning
-(Layer 4)
-:::
-
-:::::
-
-::::::
-```

package/templates/addon-resources/resources/interactive-tasks/examples/_category_.yml

@@ -1,3 +0,0 @@
-label: 'Task Examples'
-customProps:
-  sidebar_task_hide_progress: true

package/templates/addon-resources/resources/interactive-tasks/examples/advanced-usage.mdx

@@ -1,304 +0,0 @@
----
-sidebar_position: 2
-task_section_name: "Demo Module 2"
----
-
-import { useState } from 'react';
-
-# Advanced Task Page
-
-Discover how to leverage advanced Docusaurus markdown features within interactive tasks to create rich, engaging learning experiences.
-
-<TaskProgression path="." />
-
----
-
-::::task[Add Syntax Highlighting to Code Blocks]
-
-Practice adding syntax-highlighted code blocks to your documentation:
-
-1. Create a code block using triple backticks (```)
-2. Add the language identifier immediately after the opening backticks
-3. Write your code inside the block
-4. Close with triple backticks
-
-**Bash example:**
-```bash
-docker run -d -p 8080:80 nginx
-npm install express
-```
-
-**YAML example:**
-```yaml
-version: '3.8'
-services:
-  web:
-    image: nginx:latest
-    ports:
-      - "8080:80"
-```
-
-**JSON example:**
-```json
-{
-  "name": "my-app",
-  "version": "1.0.0",
-  "dependencies": {
-    "react": "^18.0.0"
-  }
-}
-```
-
-:::hint
-Docusaurus supports 30+ languages out of the box. Check the [Prism language list](https://prismjs.com/#supported-languages) for all available options. You can add more languages in `docusaurus.config.ts` - see the [Docusaurus documentation](https://docusaurus.io/docs/markdown-features/code-blocks#supported-languages).
-:::
-
-::::
-
----
-
-::::task[Add File Names to Code Blocks]
-
-Add descriptive file names to your code blocks for better context:
-
-1. After the language identifier, add a space and `title="filename.ext"`
-2. The filename will appear as a header above the code block
-3. This helps readers know exactly where code should be placed
-
-```json title="tsconfig.json"
-{
-  "compilerOptions": {
-    "target": "ES2020",
-    "strict": true,
-    "strictNullChecks": true,
-    "skipLibCheck": true
-  }
-}
-```
-
-:::hint
-Use this feature to show exactly where code should be placed in a project structure. It's especially helpful in tutorials with multiple files.
-:::
-
-::::
-
----
-
-::::task[Highlight Important Code Lines]
-
-Learn two methods for highlighting specific lines in code blocks:
-
-**Method 1: Inline comments** (best when actively developing)
-
-Use `highlight-next-line`, `highlight-start`, and `highlight-end` comments to mark important lines:
-
-```js
-function HighlightSomeText(highlight) {
-  if (highlight) {
-    // highlight-next-line
-    return 'This text is highlighted!';
-  }
-
-  return 'Nothing highlighted';
-}
-
-function HighlightMoreText(highlight) {
-  // highlight-start
-  if (highlight) {
-    return 'This range is highlighted!';
-  }
-  // highlight-end
-
-  return 'Nothing highlighted';
-}
-```
-
-**Method 2: Meta string** (cleaner for published docs)
-
-Add line numbers after the language identifier. Separate multiple lines with commas or use ranges:
-
-```jsx {1,4-6,11}
-import React from 'react';
-
-function MyComponent(props) {
-  if (props.isBar) {
-    return <div>Bar</div>;
-  }
-
-  return <div>Foo</div>;
-}
-
-export default MyComponent;
-```
-
-:::hint
-
-Supported commenting syntax:
-
-| Style      | Syntax                   |
-| ---------- | ------------------------ |
-| C-style    | `/* ... */` and `// ...` |
-| JSX-style  | `{/* ... */}`            |
-| Bash-style | `# ...`                  |
-| HTML-style | `<!-- ... -->`           |
-
-Choose inline comments when actively developing, and meta strings for final published documentation.
-
-:::
-
-::::
-
----
-
-:::::task[Nest Admonitions in Tasks]
-
-Practice nesting admonitions inside tasks by using the correct number of colons:
-
-1. Task containers use 4+ colons: `::::task`
-2. Hints/solutions use 3+ colons: `:::hint`
-3. Nested admonitions also use 3+ colons: `:::note`
-4. For deeper nesting inside hints/solutions, use 4+ colons for the admonition
-
-**Rule:** Parent containers always need **more colons** than their children to prevent the parser from prematurely closing containers.
-
-:::note
-
-This is a note at the task level (3 colons).
-
-:::
-
-:::warning
-
-This is a warning at the task level (3 colons).
-
-:::
-
-::::hint
-
-This hint contains a nested admonition (4 colons for hint, since it needs to contain a 3-colon admonition):
-
-:::note
-
-This note is nested inside the hint (3 colons).
-
-:::
-
-::::
-
-:::::
-
----
-
-::::task[Use React Components in Tasks]
-
-Import and use React components within your task content to create interactive experiences:
-
-1. Import React and any hooks you need at the top of the file: `import { useState } from 'react';`
-2. Define your component using `export const`
-3. Use the component anywhere in your MDX content
-
-**Example - Interactive Counter:**
-
-export const Counter = () => {
-  const [count, setCount] = useState(0);
-  return (
-    <div style={{ 
-      padding: '1rem', 
-      border: '2px solid var(--ifm-color-primary)', 
-      borderRadius: '8px',
-      textAlign: 'center',
-      margin: '1rem 0'
-    }}>
-      <p style={{ fontSize: '1.5rem', margin: '0.5rem 0' }}>
-        Count: <strong>{count}</strong>
-      </p>
-      <button 
-        onClick={() => setCount(count + 1)}
-        style={{ 
-          marginRight: '0.5rem',
-          padding: '0.5rem 1rem',
-          fontSize: '1rem',
-          cursor: 'pointer'
-        }}
-      >
-        Increment
-      </button>
-      <button 
-        onClick={() => setCount(0)}
-        style={{ 
-          padding: '0.5rem 1rem',
-          fontSize: '1rem',
-          cursor: 'pointer'
-        }}
-      >
-        Reset
-      </button>
-    </div>
-  );
-};
-
-<Counter />
-
-:::hint
-
-Tasks support all Docusaurus MDX features, including:
-- React component imports and usage (useState, useEffect, etc.)
-- Tabs, admonitions, and other built-in components
-- Custom CSS and styling with theme-aware variables
-- Interactive JavaScript functionality
-
-This makes tasks perfect for interactive tutorials and hands-on learning experiences!
-
-:::
-
-:::solution
-
-Here is the React code running in the task:
-
-```ts
-import { useState } from 'react';
-
-export const Counter = () => {
-  const [count, setCount] = useState(0);
-  return (
-    <div style={{ 
-      padding: '1rem', 
-      border: '2px solid var(--ifm-color-primary)', 
-      borderRadius: '8px',
-      textAlign: 'center',
-      margin: '1rem 0'
-    }}>
-      <p style={{ fontSize: '1.5rem', margin: '0.5rem 0' }}>
-        Count: <strong>{count}</strong>
-      </p>
-      <button 
-        onClick={() => setCount(count + 1)}
-        style={{ 
-          marginRight: '0.5rem',
-          padding: '0.5rem 1rem',
-          fontSize: '1rem',
-          cursor: 'pointer'
-        }}
-      >
-        Increment
-      </button>
-      <button 
-        onClick={() => setCount(0)}
-        style={{ 
-          padding: '0.5rem 1rem',
-          fontSize: '1rem',
-          cursor: 'pointer'
-        }}
-      >
-        Reset
-      </button>
-    </div>
-  );
-};
-
-<Counter />
-```
-
-:::
-
-::::