chore: Exports in package.json and coder sync

docs/development/using-factorial-one-source.md

@@ -0,0 +1,63 @@
+# Using factorial one "source"
+
+## Motivation
+
+For development scenarios is necessary to be agile and be able to apply changes in factorial one and check how then
+integrates in the consumer (ex. factorial's monorepo)
+
+In this scenario the regular release process (build, publish, update dependency's version on the consumer and update) is
+very slow and doesn't provide a fast feedback of the
+changes.
+
+Use the `factorial-one`'s source as dependencies has a lot of tradeoffs and issues: aliases, vite plugins, etc. needs to
+be configured in the same way in the consumer of `factorial-one`
+
+### Strategy
+
+Building the library will be necessary to use it in the same way as in production, but in some scenarios (like local
+development) we can skip publishing and reinstalling (check how to: [in local development](#local)
+or [in coder](#coder))
+
+## How to
+
+### Using an specific commit
+
+In the monorepo folder:
+
+1. open the `package.json` file
+2. run `pnpm add `github:factorialco/factorial-one#[COMMIT_SHA1]` where `[COMMIT_SHA1]` is the commit identifier to use:
+    - example: `pnpm add github:factorialco/factorial-one#9c270d1db734771f7def654c20114ad947f156d2`
+
+> IMPORTANT: Remember to remove use an stable version before to merge into `main` or release
+
+### How to use local version of `factorial-one` in your local repo (ex. `factorial`'s monorepo) {#local}
+
+This applies when both `factorial-one` and `factorial`'s monorepo are in the local computer
+
+1. Go to the `factorial-one` folder: `cd factorial-one`
+2. Run `pnpm build:watch` to rebuild the project on any change
+3. Run `pnpm link --global` to add the package to the local links
+4. Go to the factorial app monorepo: `cd factorial/frontend`
+5. Run `pnpm link --global @factorialco/factorial-one` to use the local version of the package
+
+### How to use local version of `factorial-one` in coder {#cder}
+
+This applies when `factorial-one` is in your local computer and `factorial`'s monorepo is in coder's dev environment
+
+**Prerequisites:**
+
+- [rsync](https://linux.die.net/man/1/rsync) in your local computer: `brew install rsync`
+- [coder cli](https://coder.com/docs/getting-started/installation) in your local computer
+    - ![Coder ssh](images/coder.png)
+- Create if not exists `.env.local` and add this line `CODER_REMOTE=[YOUR_CODER_SSH_CONNECTION_STRING]`, for example:
+  `CODER_REMOTE=coder.sergiocarracedo-dev-env`
+  > This file is in the `.gitignore` file, so it won't be pushed to the repository
+
+**Steps:**
+
+1. Go to the `factorial-one` folder: `cd factorial-one`
+2. Run `pnpm dev:coder` to rebuild the project on any change and sync that build to coder workspace
+
+> Now on each change in the `factorial-one`'s source code, the changes will be reflected in the coder workspace and the
+> frontend will be reloaded using always the latest `factorial-one`'s code
+

docs/getting-started.md

@@ -18,7 +18,11 @@ import "@factorialco/factorial-one/styles.css"
 import "@factorialco/factorial-one/fonts.js"
 
 // In any of your components
-import { Button } from "@factorialco/factorial-one"
+import {Button} from "@factorialco/factorial-one"
 ```
 
 And that's it!
+
+Related:
+
+- [Using factorial one source](development/using-factorial-one-source.md)

docs/index.md

@@ -2,6 +2,6 @@
 
 `factorial-one` is a set of component, hooks, utilities used as foundations for the factorial's app
 
-
 - [Getting started](./getting-started.md)
-- [Local Development](./development.md)
+- [Local Development](development/development.md)
+    - [Using factorial-one without build it](development/using-factorial-one-source.md)

lib/experimental/Navigation/Header/PageHeader/index.tsx

@@ -13,7 +13,6 @@ import { ReactElement } from "react"
 import { Dropdown } from "../../Dropdown"
 import Breadcrumbs, { type BreadcrumbItemType } from "../Breadcrumbs"
 
-
 export type PageAction = {
   label: string
   icon: IconType

package.json

@@ -8,23 +8,63 @@
   "packageManager": "pnpm@9.15.4+sha512.b2dc20e2fc72b3e18848459b37359a32064663e5627a51e4c74b2c29dd8e8e0491483c3abb40789cfd578bf362fb6ba8261b05f0387d76792ed6e23ea3b1b6a0",
   "files": [
     "assets",
-    "icons",
     "dist",
     "styles.css",
     "tailwind.config.ts",
     "postcss.config.js"
   ],
+  "exports": {
+    ".": {
+      "types": "./dist/lib/factorial-one.d.ts",
+      "default": "./dist/lib/factorial-one.js"
+    },
+    "./experimental": {
+      "types": "./lib/experimental/lib/exports.d.ts",
+      "default": "./dist/lib/experimental.js"
+    },
+    "./icons/animated": {
+      "types": "./dist/icons/animated/index.d.ts",
+      "default": "./dist/icons/animated/index.js"
+    },
+    "./icons/animated/*": {
+      "types": "./dist/icons/animated/*.d.ts",
+      "default": "./dist/icons/animated/*.js"
+    },
+    "./icons/app": {
+      "types": "./dist/icons/app/index.d.ts",
+      "default": "./dist/icons/app/index.js"
+    },
+    "./icons/app/*": {
+      "types": "./dist/icons/app/*.d.ts",
+      "default": "./dist/icons/app/*.js"
+    },
+    "./icons/modules": {
+      "types": "./dist/icons/modules/index.d.ts",
+      "default": "./dist/icons/modules/index.js"
+    },
+    "./icons/modules/*": {
+      "types": "./dist/icons/modules/*.d.ts",
+      "default": "./dist/icons/modules/*.js"
+    },
+    "./icons/*": {
+      "types": "./dist/icons/*",
+      "default": "./dist/icons/*"
+    },
+    "./styles.css": "./dist/styles.css"
+  },
   "sideEffects": [
     "**/*.css"
   ],
   "scripts": {
     "dev": "storybook dev -p 6006",
     "dev:docs": "DOCS_MODE=true pnpm run dev",
     "start": "pnpm run dev",
-    "build": "tsc --project ./tsconfig-build.json && BUILD_TYPES=true vite build && pnpm run build:tailwind && run-p build-icons",
+    "build": "tsc --project ./tsconfig-build.json && pnpm run build:tailwind && run-p build-icons && BUILD_TYPES=true vite build",
     "build:tsup": "tsup && pnpm run build:tailwind && run-p build-icons",
     "build-icons": "tsc --project ./tsconfig-build-icons.json",
     "build:tailwind": "NODE_ENV=production tailwindcss -i ./styles.css -o ./dist/styles.css --postcss --minify",
+    "build:watch": "pnpm build --watch",
+    "dev:coder": "pnpm build --watch -- --buildSync",
     "lint": "eslint -c eslint.config.mjs . --report-unused-disable-directives --max-warnings 0",
     "lint-fix": "pnpm run lint -- --fix",
     "preview": "vite preview",
@@ -122,8 +162,10 @@
     "@typescript-eslint/parser": "^8.24.1",
     "@vitejs/plugin-react": "^4.3.4",
     "autoprefixer": "^10.4.20",
+    "chalk": "^5.4.1",
     "axe-playwright": "^2.1.0",
     "chromatic": "^11.25.2",
+    "consola": "^3.4.0",
     "emoji-mart": "^5.6.0",
     "eslint": "^9.21.0",
     "eslint-plugin-react": "^7.37.4",
@@ -150,7 +192,8 @@
     "vite": "^6.1.1",
     "vite-plugin-dts": "4.3.0",
     "vite-plugin-lib-inject-css": "^2.2.1",
-    "vitest": "^3.0.5"
+    "vitest": "^3.0.5",
+    "dotenv": "^16.4.7"
   },
   "optionalDependencies": {
     "@rollup/rollup-linux-x64-gnu": "^4.34"

tsconfig-build-icons.json

@@ -12,9 +12,9 @@
     // Types should go into this directory.
     // Removing this would place the .d.ts files
     // next to the .js files
-    "outDir": "icons",
     "jsx": "react-jsx",
     "noEmit": false,
+    "outDir": "dist/icons",
     "allowImportingTsExtensions": false,
     // go to js file when using IDE functions like
     // "Go to Definition" in VSCode

tsconfig.node.json

@@ -7,5 +7,8 @@
     "allowSyntheticDefaultImports": true,
     "strict": true
   },
-  "include": ["vite.config.ts"]
+  "include": [
+    "vite.config.ts",
+    "vite/**/*"
+  ]
 }

vite.config.ts

@@ -1,25 +1,64 @@
 /// <reference types="vitest" />
 import react from "@vitejs/plugin-react"
+import { consola } from "consola"
+import dotenv from "dotenv"
 import path, { resolve } from "path"
-import { defineConfig } from "vite"
+import { defineConfig, Plugin } from "vite"
 import dts from "vite-plugin-dts"
 import { libInjectCss } from "vite-plugin-lib-inject-css"
+import { buildSyncPlugin } from "./vite/build-sync.plugin"
+
+dotenv.config({
+  path: [".env.local", ".env"],
+})
+
+const extraPlugins: Plugin[] = []
+
+/* Build sync */
+const defaultCoderWorkspaceFolder =
+  "/home/factorial/workspace/factorial/frontend/node_modules/@factorialco/factorial-one"
+
+const buildSyncArg = process.argv.find((arg) => arg.startsWith("--buildSync"))
+const buildSync = !!buildSyncArg
+const buildSyncValue = buildSyncArg
+  ? buildSyncArg.split("=")[1] || process.env.CODER_REMOTE
+  : null
+
+if (buildSync) {
+  if (!buildSyncValue) {
+    consola.error(
+      "The buildSync flag must remote target or you can set it in the env variable CODER_REMOTE in the `.env.local` file"
+    )
+    process.exit(1)
+  }
+
+  const [remote, remoteFolder] = buildSyncValue.split(":")
+
+  const target = [remote, remoteFolder || defaultCoderWorkspaceFolder]
+    .filter(Boolean)
+    .join(":")
+
+  extraPlugins.push(
+    buildSyncPlugin({
+      target,
+    })
+  )
+}
+/* ------------ Build sync end ------*/
+
+if (process.env.BUILD_TYPES) {
+  extraPlugins.push(
+    dts({
+      include: ["lib", "src"],
+      exclude: ["**/*.stories.tsx"],
+      rollupTypes: true,
+    })
+  )
+}
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [
-    react(),
-    libInjectCss(),
-    ...(process.env.BUILD_TYPES
-      ? [
-          dts({
-            include: ["lib", "src"],
-            exclude: ["**/*.stories.tsx"],
-            rollupTypes: true
-          }),
-        ]
-      : []),
-  ],
+  plugins: [react(), libInjectCss(), ...extraPlugins],
   resolve: {
     alias: {
       "@": path.resolve(__dirname, "./lib"),
@@ -37,9 +76,11 @@ export default defineConfig({
       },
       formats: ["es"],
     },
+    outDir: "dist/lib",
     copyPublicDir: false,
     rollupOptions: {
       external: ["react/jsx-runtime", "react", "react-dom"],
+      maxParallelFileOps: 100, // Workaround to fix rebuild https://github.com/vitejs/vite/issues/19410#issuecomment-2661835482
       output: {
         globals: {
           react: "React",
@@ -49,6 +90,6 @@ export default defineConfig({
   },
   test: {
     environment: "jsdom",
-    setupFiles: ["./vitest.setup.ts"],
+    setupFiles: ["./vite/vitest.setup.ts"],
   },
 })