Merge pull request #596 from adobe/docs

Initial Docusaurus Setup

Author: c-lamoureux

.github/workflows/pr-checks.yml

@@ -50,6 +50,21 @@ jobs:
               if: ${{ github.event.pull_request.head.repo.full_name == github.repository }}
               run: yarn build:storybook
 
+            - name: Build Docs
+              # Don't run Storybook build on PRs from forks
+              if: ${{ github.event.pull_request.head.repo.full_name == github.repository }}
+              run: |
+                  echo "Current content of docusaurus.config.ts:"
+                  cat packages/docs/docusaurus.config.ts
+                  # modify the docusaurus.config.ts, changing the baseUrl to /react-spectrum-charts/PR-${{ github.event.number }}-docs/
+                  sed -i 's|baseUrl: '"'"'/react-spectrum-charts/docs/'"'"'|baseUrl: '"'"'/react-spectrum-charts/PR-${{ github.event.number }}-docs/'"'"'|g' packages/docs/docusaurus.config.ts
+                  echo "Content after sed command:"
+                  cat packages/docs/docusaurus.config.ts
+                  # build the docs
+                  yarn build:docs
+                  # revert the docusaurus.config.ts
+                  git checkout packages/docs/docusaurus.config.ts
+
             - name: Create and Upload Storybook to PR directory
               # Don't run Storybook upload on PRs from forks
               if: ${{ github.event.pull_request.head.repo.full_name == github.repository }}
@@ -67,29 +82,60 @@ jobs:
 
                   # Remove the PR directory if it exists
                   rm -rf "${PR_NUMBER}"
+                  rm -rf "${PR_NUMBER}-docs"
 
                   # Create the PR directory
                   mkdir "${PR_NUMBER}"
+                  mkdir "${PR_NUMBER}-docs"
 
                   # Copy the contents of dist-storybook to the directory
                   cp -r dist-storybook/* "${PR_NUMBER}/"
+                  cp -r packages/docs/dist/* "${PR_NUMBER}-docs/"
 
                   rm -rf node_modules  # Explicitly remove the node_modules directory
                   rm -rf dist-storybook # Explicitly remove the dist-storybook directory
 
                   # Add, commit, and push changes
                   git add "${PR_NUMBER}/."
-                  git commit -m "Update Storybook for ${PR_NUMBER}"
+                  git add "${PR_NUMBER}-docs/."
+                  git commit -m "Update Storybook and Docs for ${PR_NUMBER}"
                   git push -f origin gh-pages
               env:
                   GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
-            - name: Add comment to the PR with Storybook URL
+            - name: Delete Storybook URL and Docs URL comment if it exists
+              # Don't delete comment on PRs from forks
+              if: ${{ github.event.pull_request.head.repo.full_name == github.repository }}
+              run: |
+                  PR_NUMBER="${{ github.event.number }}"
+
+                  # Find comments with the Storybook URL and Docs URL
+                  COMMENT_IDS=$(curl -sSL \
+                    -H "Authorization: token ${{ secrets.GITHUB_TOKEN }}" \
+                    "https://api.github.com/repos/${{ github.repository }}/issues/${PR_NUMBER}/comments" | \
+                    jq -r '.[] | select(.body | contains("🎨 Storybook ->") or contains("📚 Docs ->")) | .id')
+
+                  # Check if we found any comments
+                  if [ ! -z "$COMMENT_IDS" ]; then
+                    echo "Found matching comments to delete"
+                    # Loop through each comment ID
+                    echo "$COMMENT_IDS" | while read -r COMMENT_ID; do
+                      echo "Deleting comment with ID: $COMMENT_ID"
+                      curl -sSL \
+                        -H "Authorization: token ${{ secrets.GITHUB_TOKEN }}" \
+                        -X DELETE \
+                        "https://api.github.com/repos/${{ github.repository }}/issues/comments/${COMMENT_ID}"
+                    done
+                  else
+                    echo "No matching comments found to delete"
+                  fi
+
+            - name: Add comment to the PR with Storybook URL and Docs URL
               # Don't add comment on PRs from forks
               if: ${{ github.event.pull_request.head.repo.full_name == github.repository }}
               run: |
                   PR_NUMBER="${{ github.event.number }}"
-                  COMMENT_BODY="🎨 Storybook -> https://opensource.adobe.com/react-spectrum-charts/PR-${PR_NUMBER}"
+                  COMMENT_BODY="🎨 Storybook -> https://opensource.adobe.com/react-spectrum-charts/PR-${PR_NUMBER}\n\n📚 Docs -> https://opensource.adobe.com/react-spectrum-charts/PR-${PR_NUMBER}-docs/"
 
                   curl -sSL \
                     -H "Authorization: token ${{ secrets.GITHUB_TOKEN }}" \

.github/workflows/publish-prod-storybook.yml

@@ -1,4 +1,4 @@
-name: Publish Storybook to GitHub Pages
+name: Publish Storybook and Docs to GitHub Pages
 # This action runs when a branch has been merged to main.
 
 on:
@@ -32,6 +32,9 @@ jobs:
             - name: Build Storybook
               run: yarn build:storybook
 
+            - name: Build Docs
+              run: yarn build:docs
+
             - name: Checkout and clean current 'gh-pages' branch
               run: |
                   git config user.name "marshallpete"
@@ -56,6 +59,10 @@ jobs:
               run: |
                   cp -r dist-storybook/* .
 
+            - name: Copy 'dist' to 'gh-pages' branch
+              run: |
+                  cp -r packages/docs/dist/* ./docs
+
             - name: Commit and push changes to 'gh-pages' branch
               run: |
                   git add -- . ':!dist-storybook'

.gitignore

@@ -26,3 +26,6 @@ test-report.xml
 # cursor
 cursor
 .cursor
+
+# docusaurus
+.docusaurus

.prettierrc

@@ -1,6 +1,6 @@
 {
-	"tabWidth": 4,
-	"useTabs": true,
+	"tabWidth": 2,
+	"useTabs": false,
 	"printWidth": 120,
 	"singleQuote": true,
 	"importOrder": [

README.md

@@ -14,6 +14,10 @@
 
 ![Scatter plot of penguin bill dimensions by species and body mass](https://github.com/adobe/react-spectrum-charts/wiki/images/penguins.png)
 
+## Documentation
+
+[React Spectrum Charts documentation](https://opensource.adobe.com/react-spectrum-charts/docs)
+
 ## Table of Contents
 
 -   [React Spectrum Charts](#react-spectrum-charts)
@@ -62,6 +66,11 @@ npm install @adobe/react-spectrum-charts @adobe/react-spectrum vega vega-lite
 yarn add @adobe/react-spectrum-charts @adobe/react-spectrum vega vega-lite
 ```
 
+#### pnpm
+```bash
+pnpm add @adobe/react-spectrum-charts @adobe/react-spectrum vega vega-lite
+```
+
 ## Usage
 
 `react-spectrum-charts` is designed in a way that makes composing charts similar to composing any other app content in JSX.

package.json

@@ -59,6 +59,7 @@
 	"scripts": {
 		"build": "yarn workspaces run build",
 		"build:parallel": "concurrently 'yarn workspace @spectrum-charts/themes build' 'yarn workspace @spectrum-charts/constants build' 'yarn workspace @spectrum-charts/utils build' 'yarn workspace @spectrum-charts/locales build' && yarn workspace @spectrum-charts/vega-spec-builder build && yarn workspace @adobe/react-spectrum-charts build",
+		"build:docs": "yarn workspace @spectrum-charts/docs build",
 		"clean": "yarn workspaces run clean",
 		"clean:parallel": "concurrently 'yarn workspace @spectrum-charts/themes clean' 'yarn workspace @spectrum-charts/constants clean' 'yarn workspace @spectrum-charts/utils clean' 'yarn workspace @spectrum-charts/locales clean' 'yarn workspace @spectrum-charts/vega-spec-builder clean' 'yarn workspace @adobe/react-spectrum-charts clean'",
 		"build:force": "yarn clean && yarn build",
@@ -73,6 +74,7 @@
 		"sonar": "node ./scripts/runSonarOnBranch.js",
 		"sonar-fork-pr": "node ./scripts/runSonarOnFork.js",
 		"start": "yarn storybook",
+		"start:docs": "yarn workspace @spectrum-charts/docs start",
 		"storybook": "cross-env NODE_OPTIONS=--openssl-legacy-provider && storybook dev -p 6009",
 		"test": "cross-env TZ=UTC BABEL_ENV=test jest",
 		"watch": "cross-env TZ=UTC BABEL_ENV=test jest --watch",

packages/docs/.babelrc

@@ -0,0 +1,6 @@
+{
+  "presets": [
+    "@babel/preset-env",
+    "@babel/preset-react"
+  ]
+} 

packages/docs/README.md

@@ -0,0 +1,53 @@
+# React Spectrum Charts Documentation
+
+This package contains the documentation website for React Spectrum Charts, built with [Docusaurus](https://docusaurus.io/).
+
+## Development
+
+To start the development server:
+
+```bash
+# From the root of the monorepo
+yarn workspace @spectrum-charts/docs start
+```
+
+This will start a local development server and open up a browser window. Most changes are reflected live without having to restart the server.
+
+## Build
+
+To build the documentation:
+
+```bash
+# From the root of the monorepo
+yarn workspace @spectrum-charts/docs build
+```
+
+This command generates static content into the `build` directory and can be served using any static contents hosting service.
+
+## Writing Documentation
+
+The documentation is written in Markdown and is located in the `docs` directory. The sidebar structure is defined in `sidebars.ts`.
+
+### Directory Structure
+
+```
+docs/
+├── docs/
+│   ├── intro.md
+│   ├── installation.md
+│   ├── Developer-Docs.md
+│   ├── guides/
+│   ├── api/
+│   └── supplemental/
+├── src/
+│   ├── components/
+│   ├── css/
+│   ├── pages/
+│   └── theme/
+└── static/
+    └── img/
+```
+
+## Contributing
+
+Please see the main repository's CONTRIBUTING.md file for guidelines on how to contribute to the documentation.