Merge pull request #10 from elycruz/monorepo

First monorepo to main merge

.eslintrc.json

@@ -3,7 +3,7 @@
     "browser": true,
     "es2021": true
   },
-  "extends": ["eslint:recommended", "next"],
+  "extends": ["eslint:recommended"],
   "ignorePatterns": [
     "**/archived/**/*",
     "**/node_modules/**/*"

.github/workflows/site.yaml

@@ -0,0 +1,106 @@
+# Sample workflow for building and deploying a Next.js site to GitHub Pages
+#
+# To get started with Next.js see: https://nextjs.org/docs/getting-started
+#
+name: Deploy Site to Pages
+
+on:
+  # Runs on pushes targeting the default branch
+  push:
+    branches: ["main"]
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+jobs:
+
+  # Build job
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v2.2.4
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Detect package manager
+        id: detect-package-manager
+        run: |
+          if [ -f "${{ github.workspace }}/yarn.lock" ]; then
+            echo "manager=yarn" >> $GITHUB_OUTPUT
+            echo "command=install" >> $GITHUB_OUTPUT
+            echo "runner=yarn" >> $GITHUB_OUTPUT
+            exit 0
+          elif [ -f "${{ github.workspace }}/package-lock.json" ]; then
+            echo "manager=npm" >> $GITHUB_OUTPUT
+            echo "command=ci" >> $GITHUB_OUTPUT
+            echo "runner=npx --no-install" >> $GITHUB_OUTPUT
+            exit 0
+          elif [ -f "${{ github.workspace }}/pnpm-lock.yaml" ]; then
+            echo "manager=pnpm" >> $GITHUB_OUTPUT
+            echo "command=i" >> $GITHUB_OUTPUT
+            echo "runner=pnpm dlx --skip-install" >> $GITHUB_OUTPUT
+            exit 0
+          else
+            echo "Unable to determine package manager"
+            exit 1
+          fi
+      - name: Setup Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: "18"
+          cache: ${{ steps.detect-package-manager.outputs.manager }}
+      - name: Install (Vercel) Turbo
+        id: install-vercel-turbo
+        run: ${{ steps.detect-package-manager.outputs.manager }} i -g turbo
+      - name: Setup Pages
+        uses: actions/configure-pages@v3
+        with:
+          # Automatically inject basePath in your Next.js configuration file and disable
+          # server side image optimization (https://nextjs.org/docs/api-reference/next/image#unoptimized).
+          #
+          # You may remove this line if you want to manage the configuration yourself.
+          static_site_generator: next
+      - name: Restore cache
+        uses: actions/cache@v3
+        with:
+          path: |
+            apps/atomic-ui-js-site/.next/cache
+          # Generate a new cache whenever packages or source files change.
+          key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock', '**/pnpm-lock.yaml') }}-${{ hashFiles('**.[jt]s', '**.[jt]sx') }}
+          # If source files changed but packages didn't, rebuild from a prior cache.
+          restore-keys: |
+            ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock', '**/pnpm-lock.yaml') }}-
+      - name: Install dependencies
+        run: ${{ steps.detect-package-manager.outputs.manager }} ${{ steps.detect-package-manager.outputs.command }}
+      - name: Build with Next.js
+        run: turbo build
+      - name: Static HTML export with Next.js
+        run: turbo export
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v1
+        with:
+          path: ./dist/atomic-ui-js-site
+
+  # Deployment job
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v2

.gitignore

@@ -82,6 +82,9 @@ typings/
 .nuxt
 dist
 
+# Documentation output
+**/docs/
+
 # Gatsby files
 .cache/
 # Comment in the public line in if your project uses Gatsby and *not* Next.js
@@ -106,6 +109,8 @@ dist
 # IDEs
 .idea/
 
+# Vercel
+.turbo
 
 # Added by cargo
 

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+pnpm lint

.stylelintrc.json

@@ -1,7 +1,10 @@
 { "extends": ["stylelint-config-standard"],
+  "ignoreFiles": [
+    "./dist/**/*"
+  ],
   "rules": {
     "selector-class-pattern": "[a-zA-Z][\\w-]+",
     "number-max-precision": 5,
-    "color-function-notation": "legacy"
+    "selector-attribute-quotes": "always"
   }
 }

ATOMIC-UI-JS.md

@@ -107,6 +107,21 @@ Default color variants:
 - z-overlay
 - z-with-overlay
 
+## Site Approaches
+
+General:
+
+- static site.
+- SPA (nextjs/react).
+- SPA (custom 'vanilla js' approach).
+
+### SPA (custom/vanillajs)
+
+
+
 ### Todos
 
 - Can we perform custom "dropdown" menu animation with `details` element?
+
+- [ ] Move story styles into './apps/atomic-ui-js-site'.
+

apps/atomic-ui-js-site/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

apps/atomic-ui-js-site/.gitignore

@@ -0,0 +1,35 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

apps/atomic-ui-js-site/.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+  "typescript.tsdk": "../../node_modules/.pnpm/typescript@5.0.4/node_modules/typescript/lib",
+  "typescript.enablePromptUseWorkspaceTsdk": true
+}

apps/atomic-ui-js-site/README.md

@@ -0,0 +1,34 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

next.config.mjs → apps/atomic-ui-js-site/next.config.mjs

@@ -1,4 +1,8 @@
 import nextMdx from '@next/mdx';
+import path from 'node:path';
+import url from 'url';
+
+const __dirname = url.fileURLToPath(new URL('.', import.meta.url));
 
 const withMDX = nextMdx({
   extension: /\.mdx?$/,
@@ -11,19 +15,26 @@ const withMDX = nextMdx({
     // If you use `MDXProvider`, uncomment the following line.
     // providerImportSource: "@mdx-js/react",
   },
-})
+});
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
+  output: 'export',
+  distDir: '../../dist/atomic-ui-js-site',
   // Configure pageExtensions to include md and mdx
   pageExtensions: ['ts', 'tsx', 'js', 'jsx', 'md', 'mdx'],
   // Optionally, add any other Next.js config below
   reactStrictMode: true,
   experimental: {
     appDir: true
-  }
-}
+  },
+  sassOptions: {
+    includePaths: [
+      path.join(__dirname, 'src/css'),
+      path.join(__dirname, '../../packages')
+    ],
+  },
+};
 
 // Merge MDX config with Next.js config
-export default withMDX(nextConfig)
-
+export default withMDX(nextConfig);

apps/atomic-ui-js-site/node_scripts/gen-navItems.mjs

@@ -0,0 +1,55 @@
+import fs from 'node:fs/promises';
+import path from 'path';
+import url from "url";
+
+import {dirWalk} from 'node-dirwalk';
+
+const __dirname = url.fileURLToPath(new URL('.', import.meta.url)),
+
+  targetDir = path.join(__dirname, '../src/app/'),
+  outFilePath = path.join(__dirname, '../src/data/generated/navigation-items.ts'),
+
+  getNavItemConstructor = dirToWalk => function NavItem(fileName, filePath, stat, files) {
+    const ext = path.extname(fileName),
+      basename = path.basename(fileName, ext),
+      uri = filePath.split(dirToWalk)[1];
+
+    Object.defineProperties(this, {
+      label: {value: basename[0].toUpperCase() + basename.slice(1), enumerable: true},
+      uri: {value: `${uri}${!uri.endsWith('/') ? '/' : ''}`, enumerable: true},
+      alias: {value: basename, enumerable: true},
+    });
+
+    if (files?.filter(Boolean).length) {
+      Object.defineProperty(this, 'items', {
+        value: files.filter(Boolean),
+        enumerable: true
+      });
+    }
+  },
+
+  genNavItemsJson = async dir => dirWalk(
+    getNavItemConstructor(dir),
+
+    // Directory effect factory
+    (dirPath, stat, dirName) => fileInfoObj => fileInfoObj,
+
+    // File effect factory
+    (filePath, stat, fileName) => fileInfoObj => /\./.test(fileInfoObj.uri) ? undefined : fileInfoObj,
+
+    // Directory to walk
+    dir
+  )
+;
+
+// Generation file contents
+(async () => {
+  console.log(`Generation nav-items json, from dir: ${targetDir} ...`);
+
+  return genNavItemsJson(targetDir)
+    .then(json => fs.writeFile(outFilePath, `import {NavItem} from '../types';
+
+export const navigationItems: NavItem[] = [${JSON.stringify(json, null, '  ')}];
+`))
+    .catch(console.error);
+})();