timeline group/sort and more

esbuild.config.js

@@ -1,33 +1,63 @@
-// const postcss = require('postcss')
-import postcss from 'postcss'
-// const autoprefixer = require('autoprefixer')
-import autoprefixer from 'autoprefixer'
-// const postcssPresetEnv = require('postcss-preset-env')
-import postcssPresetEnv from 'postcss-preset-env'
-import copyAssets from 'postcss-copy-assets';
+import postcss from 'postcss';
+import autoprefixer from 'autoprefixer';
+import postcssPresetEnv from 'postcss-preset-env';
+import { sassPlugin } from 'esbuild-sass-plugin';
+import * as esbuild from 'esbuild';
 
-import { sassPlugin, postcssModules } from 'esbuild-sass-plugin'
-import * as esbuild from 'esbuild'
+// ESM Build
 await esbuild.build({
     entryPoints: ['./src/index.ts'],
     bundle: true,
     write: true,
-    outfile:'dist/index.js',
+    outfile: 'dist/index.js', // ESM output
     format: 'esm',
-    packages: 'external',
+    external: ['react', 'react-dom', 'mobx', 'mobx-react'],
     sourcemap: 'external',
+    minify: true,
     plugins: [
         sassPlugin({
-            type:"style",
+            type: 'style',
             cssImports: true,
             async transform(source, resolveDir) {
-                const {css} = await postcss([autoprefixer, postcssPresetEnv({stage: 0})]).process(source, { from: resolveDir | undefined })
-                return css
-            }
-        }
-        ),
-
-    ]
-  })
-
+                try {
+                    const { css } = await postcss([autoprefixer, postcssPresetEnv({ stage: 0 })]).process(source, {
+                        from: resolveDir | undefined,
+                    });
+                    return css;
+                } catch (error) {
+                    console.error('Error processing CSS:', error);
+                    throw error;
+                }
+            },
+        }),
+    ],
+});
 
+// CommonJS Build
+await esbuild.build({
+    entryPoints: ['./src/index.ts'],
+    bundle: true,
+    write: true,
+    outfile: 'dist/index.cjs.js', // CommonJS output
+    format: 'cjs',
+    external: ['react', 'react-dom', 'mobx', 'mobx-react'],
+    sourcemap: 'external',
+    minify: true,
+    plugins: [
+        sassPlugin({
+            type: 'style',
+            cssImports: true,
+            async transform(source, resolveDir) {
+                try {
+                    const { css } = await postcss([autoprefixer, postcssPresetEnv({ stage: 0 })]).process(source, {
+                        from: resolveDir | undefined,
+                    });
+                    return css;
+                } catch (error) {
+                    console.error('Error processing CSS:', error);
+                    throw error;
+                }
+            },
+        }),
+    ],
+});

esbuild.config.watch.js

@@ -1,31 +1,65 @@
-import * as esbuild from 'esbuild'
-import {sassPlugin} from "esbuild-sass-plugin";
-import postcss from "postcss";
-import autoprefixer from "autoprefixer";
-import postcssPresetEnv from "postcss-preset-env";
+import * as esbuild from 'esbuild';
+import { sassPlugin } from 'esbuild-sass-plugin';
+import postcss from 'postcss';
+import autoprefixer from 'autoprefixer';
+import postcssPresetEnv from 'postcss-preset-env';
 
-
-let ctx = await esbuild.context({
+// Create two contexts, one for ESM and one for CommonJS
+const esmCtx = await esbuild.context({
     entryPoints: ['./src/index.ts'],
     bundle: true,
     write: true,
-    outfile:'dist/index.js',
+    outfile: 'dist/index.js', // ESM output
     format: 'esm',
-    packages: 'external',
     sourcemap: 'external',
+    external: ['react', 'react-dom', 'mobx', 'mobx-react'],
     plugins: [
         sassPlugin({
-                type:"style",
-                cssImports: true,
-                async transform(source, resolveDir) {
-                    const {css} = await postcss([autoprefixer, postcssPresetEnv({stage: 0})]).process(source, { from: resolveDir | undefined })
-                    return css
+            type: 'style',
+            cssImports: true,
+            async transform(source, resolveDir) {
+                try {
+                    const { css } = await postcss([autoprefixer, postcssPresetEnv({ stage: 0 })]).process(source, {
+                        from: resolveDir | undefined,
+                    });
+                    return css;
+                } catch (error) {
+                    console.error('Error processing CSS:', error);
+                    throw error;
                 }
-            }
-        ),
+            },
+        }),
+    ],
+});
 
-    ]
-})
+const cjsCtx = await esbuild.context({
+    entryPoints: ['./src/index.ts'],
+    bundle: true,
+    write: true,
+    outfile: 'dist/index.cjs.js', // CommonJS output
+    format: 'cjs',
+    sourcemap: 'external',
+    external: ['react', 'react-dom', 'mobx', 'mobx-react'],
+    plugins: [
+        sassPlugin({
+            type: 'style',
+            cssImports: true,
+            async transform(source, resolveDir) {
+                try {
+                    const { css } = await postcss([autoprefixer, postcssPresetEnv({ stage: 0 })]).process(source, {
+                        from: resolveDir | undefined,
+                    });
+                    return css;
+                } catch (error) {
+                    console.error('Error processing CSS:', error);
+                    throw error;
+                }
+            },
+        }),
+    ],
+});
 
-await ctx.watch()
-console.log('watching...')
+// Watch both contexts
+await esmCtx.watch();
+await cjsCtx.watch();
+console.log('watching...');

package.json

@@ -1,13 +1,19 @@
 {
   "name": "@strategies/react-timeline",
-  "version": "1.2.5",
+  "version": "2.1.1",
   "description": "A timeline component for React",
   "author": "Eric Youngberg <eyoungberg@sasaki.com>",
   "repository": "https://github.com/sasakiassociates/react-timeline",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "type": "module",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs.js"
+    }
+  },
   "module": "dist/index.js",
   "jsnext:main": "dist/index.js",
   "publishConfig": {
@@ -23,37 +29,42 @@
   "scripts": {
     "type:watch": "tsc --watch --emitDeclarationOnly",
     "type": "tsc --emitDeclarationOnly",
-    "build": "pnpm run type | node esbuild.config.js",
+    "build": "pnpm run type && node esbuild.config.js",
     "start": "pnpm run type:watch | node esbuild.config.watch.js"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^22.0.2",
     "@rollup/plugin-node-resolve": "^13.3.0",
     "@rollup/plugin-typescript": "^8.5.0",
-    "@types/react": "^18.0.37",
-    "@types/react-dom": "^18.0.11",
+    "@types/react": "^18.3.10",
+    "@types/react-dom": "^18.3.0",
     "autoprefixer": "^10.4.20",
     "esbuild": "^0.24.0",
+    "esbuild-node-externals": "^1.18.0",
     "esbuild-sass-plugin": "^3.3.1",
+    "mobx": "^6.12.4",
+    "mobx-react": "^9.1.1",
     "postcss": "^8.4.47",
     "postcss-copy-assets": "^0.3.1",
     "postcss-preset-env": "^10.0.5",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "rollup": "^2.79.1",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
     "sass": "^1.79.2",
     "tslib": "^2.7.0",
-    "typescript": "^4.9.5"
+    "typescript": "^5.8.2"
   },
   "peerDependencies": {
     "mobx": "^6.12.4",
     "mobx-react": "^9.1.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
   },
   "dependencies": {
-    "@strategies/tokens": "^4.0.29",
-    "@strategies/ui": "^2.4.19",
+    "@strategies/tokens": "^4.0.36",
+    "framer-motion": "^12.4.10",
     "react-icons": "^5.3.0",
     "uuid": "^8.3.2"
   }