Merge branch 'dev' of github.com:elycruz/atomic-ui-js into main

.gitignore

@@ -80,7 +80,7 @@ typings/
 
 # Nuxt.js build / generate output
 .nuxt
-dist
+**/dist
 
 # Documentation output
 **/docs/
@@ -108,9 +108,10 @@ dist
 
 # IDEs
 .idea/
+**/.vscode/
 
 # Vercel
-.turbo
+**/.turbo
 
 # Added by cargo
 

.stylelintrc.json

@@ -1,10 +1,12 @@
-{ "extends": ["stylelint-config-standard"],
+{
   "ignoreFiles": [
-    "./dist/**/*"
+    "**/dist/**/*",
+    "**/archived/**/*"
   ],
   "rules": {
-    "selector-class-pattern": "[a-zA-Z][\\w-]+",
     "number-max-precision": 5,
-    "selector-attribute-quotes": "always"
+    "no-descending-specificity": null,
+    "selector-attribute-quotes": "always",
+    "selector-class-pattern": "[a-zA-Z][\\w-]+"
   }
 }

ATOMIC-UI-JS.md

@@ -5,7 +5,7 @@ An atomic, CSS first, user interface library.
 ## CSS Components
 
 - [ ] `.x-alert`
-- [ ] `.x-app-bar`
+- [ ] `.x-appbar`
 - [ ] `.x-badge`
 - [x] `.x-btn`
 - [ ] `.x-card`
@@ -92,6 +92,7 @@ Default color variants:
 
 - `x-ripple`
 - `x-field`
+- `x-toggleonscroll`
 
 ### Tentative/For future development
 
@@ -117,9 +118,55 @@ General:
 - SPA (nextjs/react).
 - SPA (custom 'vanilla js' approach).
 
-### SPA (custom/vanillajs)
+### SPA (custom/vanilla-js)
 
 ### Todos
 
 - Can we perform custom "dropdown" menu animation with `details` element?
 - [ ] Move story styles into './apps/atomic-ui-js-site'.
+
+## Font Icons
+
+Solution here is similar to SVG Icons solution:
+
+1.  If possible export icons, to a given page, to an font-icon - If not possible an overall application font-icon file would suffice.
+2.  Load font icon file in application and allow icon component to load/set icons, where required.
+
+### From the icon component side
+
+Use ligatures, etc., to render the given font-icon variant (see [material icons ligature examples](https://developers.google.com/fonts/docs/material_icons))
+
+## SVG Icons
+
+The way svg icons are included in a project can sometimes cause degradation to the overall user experience, and inconsistent language in application sources when different icon sets are included from different libraries (material, clarity, and/or font-awesome, icons etc.) - Examples:
+
+- Flashes of un-styled content (FOUC) sometimes happen while icons are loading.
+- Icon libraries/files are some times not tree-shaken, causing large number of assets to be minified/included in project build artifacts.
+- Repetition of icons (when using only SVG) contributes to artifact bloat, which can also cause FOUCs.
+
+What solution can we implement to allow icons to be easily used in all UI project contexts, that improve performance (over traditional methods), and improves code agility for developers working on apps.
+
+### Solutions:
+
+- Use SVG sprites per application page.
+- Use SVG body imports - Methods that return the SVG icon body contents, which could be referenced via an `iconsMap: Map<string, callback>` from a web-component implementation.
+- Font icons - This solution works great if icons are not multi-colored, are not many in one file (font file bloat can occur when too many icons are included/required), and/or contain dynamic functionality (see badges in [clarity icons](https://clarity.design/documentation/icons)) 
+
+#### SVG Body Callback Imports
+
+@todo
+
+#### SVG Sprites per App Page
+
+@todo
+
+### FAQs
+
+- Can we reference svg sprites, from an `svg` element that contains a `hidden` attribute?  
+- Do empty spaces come up as `TextNode` in html? They are listed as child nodes but will not show up when querying an element's `children` prop.. 
+
+### References:
+
+- [Clarity Icons] (https://clarity.design/documentation/icons/shapes)
+- [Font Awesome Icons] (https://fontawesome.com/icons)
+- [Material Symbols] (https://fonts.google.com/icons)

README.md

@@ -1,3 +1,22 @@
 # atomic-ui-js (work-in-progress)
 
-An atomic user interface toolkit, and library, for building custom elements, and user interfaces.  Built purely on the web platform.
+An atomic user interface toolkit library experiment for building custom elements, and user interfaces.  The library part of the experiment is built purely on the web platform (and the 'lit' library in places).
+
+## CSS Components
+
+- [ ] `.z-button`
+- [ ] `.z-checkbox`
+- [ ] `.z-radio`
+- [ ] `.z-input`
+- [ ] `.z-field`
+- [ ] `.z-fieldset`
+- [ ] `.z-table`
+
+## CSS Helpers
+
+## Components
+
+- [ ] `z-field`
+- [ ] `z-ripple`
+- [ ] `z-onintersection` (A.K.A. `x-toggleonscroll`).
+- 

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

@@ -0,0 +1,11 @@
+{
+  "extends": [
+    "stylelint-config-standard-scss",
+    "../../.stylelintrc.json"
+  ],
+  "ignoreFiles": [
+    "dist/**/*",
+    "node_modules/**/*",
+    ".turbo/**/*"
+  ]
+}

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

@@ -1,6 +1,7 @@
 import nextMdx from '@next/mdx';
 import path from 'node:path';
 import url from 'url';
+import CopyPlugin from 'copy-webpack-plugin';
 
 const __dirname = url.fileURLToPath(new URL('.', import.meta.url));
 
@@ -19,24 +20,44 @@ const withMDX = nextMdx({
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-  output: 'export',
+  // output: 'export',
   distDir: '../../dist/atomic-ui-js-site',
   basePath: '/atomic-ui-js',
   trailingSlash: true,
   // 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')
     ],
   },
-};
+  webpack: (
+    config,
+    {buildId, dev, isServer, defaultLoaders, nextRuntime, webpack}
+  ) => {
+    const copyPlugin = new CopyPlugin({
+      patterns: [
+        '**/*.md'
+      ],
+    });
+
+    if (config.devServer)
+      config.devServer.writeToDisk = true;
+    else
+      config.devServer = {writeToDisk: true};
+
+    if (config.plugins)
+      config.plugins.push(copyPlugin);
+    else
+      config.plugins = [copyPlugin];
+
+    // Important: return the modified config
+    return config;
+  }
+}
 
 // Merge MDX config with Next.js config
 export default withMDX(nextConfig);

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

@@ -32,7 +32,7 @@ const __dirname = url.fileURLToPath(new URL('.', import.meta.url)),
     getNavItemConstructor(dir),
 
     // Directory effect factory
-    (dirPath, stat, dirName) => fileInfoObj => fileInfoObj,
+    (dirPath, stat, dirName) => fileInfoObj => dirPath.includes('/api') ? null : fileInfoObj,
 
     // File effect factory
     (filePath, stat, fileName) => fileInfoObj => /\./.test(fileInfoObj.uri) ? undefined : fileInfoObj,

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

@@ -10,7 +10,7 @@
     "lintfix": "pnpm stylelint --fix && next lint --fix",
     "docs": "pnpm typedoc",
     "gen-navitems": "node node_scripts/gen-navItems.mjs",
-    "stylelint": "stylelint src/**/*.css",
+    "stylelint": "stylelint src/**/*.{css,scss}",
     "typedoc": "typedoc ",
     "test": "echo \"Tests not yet writtent\""
   },
@@ -19,33 +19,40 @@
     "> 0.2% and not dead"
   ],
   "dependencies": {
+    "@lit-labs/react": "^1.2.1",
     "@mdx-js/loader": "^2.3.0",
     "@mdx-js/react": "^2.3.0",
-    "@next/mdx": "^13.3.4",
+    "@next/mdx": "^13.5.4",
     "@types/node": "18.16.3",
     "@types/react": "18.2.0",
     "@types/react-dom": "18.2.3",
     "atomic-ui-js": "workspace:^",
     "atomic-ui-js-next": "workspace:^",
     "atomic-ui-js-react": "workspace:^",
-    "eslint": "^8.39.0",
-    "eslint-config-next": "^13.3.4",
+    "eslint": "^8.51.0",
+    "eslint-config-next": "^13.5.4",
     "fjl": "2.0.0-alpha.5",
-    "next": "^13.3.4",
+    "lit": "^2.8.0",
+    "markdown-it": "^13.0.2",
+    "next": "^13.5.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "rollup": "^3.21.2",
-    "stylelint": "^15.6.0",
+    "rollup": "^3.29.4",
+    "server-only": "^0.0.1",
+    "stylelint": "^15.10.3",
     "stylelint-config-standard": "^33.0.0",
-    "typedoc": "^0.24.6",
-    "typescript": "^5.0.4",
-    "webpack": "^5.81.0"
+    "typedoc": "^0.24.8",
+    "webpack": "^5.88.2"
   },
   "devDependencies": {
-    "css-loader": "^6.7.4",
+    "copy-webpack-plugin": "^11.0.0",
+    "css-loader": "^6.8.1",
     "node-dirwalk": "^0.8.6",
-    "sass": "^1.62.1",
-    "sass-loader": "^13.2.2",
-    "style-loader": "^3.3.3"
+    "postcss": "^8.4.31",
+    "sass": "^1.69.2",
+    "sass-loader": "^13.3.2",
+    "style-loader": "^3.3.3",
+    "stylelint-config-standard-scss": "^9.0.0",
+    "typescript": "^5.2.2"
   }
 }