diff --git a/.github/workflows/deploy-production.yml b/.github/workflows/deploy-production.yml index df18d1c9..2f366493 100644 --- a/.github/workflows/deploy-production.yml +++ b/.github/workflows/deploy-production.yml @@ -1,12 +1,12 @@ name: Deploy Production env: - APP_LOCATION: '' - OUTPUT_LOCATION: 'packages/website/build' + APP_LOCATION: "" + OUTPUT_LOCATION: "packages/website/build" on: push: - branches: ['release/*'] + branches: ["release/*"] permissions: contents: read @@ -25,7 +25,7 @@ jobs: uses: actions/setup-node@v4 with: node-version: 22 - registry-url: 'https://registry.npmjs.org' + registry-url: "https://registry.npmjs.org" - name: Enable Corepack run: npm i -g corepack@latest @@ -45,7 +45,7 @@ jobs: - name: Read versions id: version-check run: | - OLD=$(npm view @synergycodes/axiom version 2>/dev/null || echo "0.0.0") + OLD=$(npm view @synergycodes/overflow-ui version 2>/dev/null || echo "0.0.0") NEW=$(jq -r .version packages/ui/package.json) echo "old=$OLD" >> $GITHUB_OUTPUT echo "new=$NEW" >> $GITHUB_OUTPUT @@ -54,24 +54,24 @@ jobs: run: | echo "Old version: ${{ steps.version-check.outputs.old }}" echo "New version: ${{ steps.version-check.outputs.new }}" - + if [ "${{ steps.version-check.outputs.new }}" != "${{ steps.version-check.outputs.old }}" ]; then echo "Versions differ. Proceeding with build and publish." pnpm ui build cd packages/ui - + # Check if version contains "beta" if [[ "${{ steps.version-check.outputs.new }}" == *"beta"* ]]; then - echo "Publishing @synergycodes/axiom@${{ steps.version-check.outputs.new }} with 'beta' tag…" + echo "Publishing @synergycodes/overflow-ui@${{ steps.version-check.outputs.new }} with 'beta' tag…" pnpm publish --tag beta --access public --no-git-checks echo "Adding 'latest' tag to beta version…" # INFO: The line below marks each beta version as latest. Once we publish stable version we should remove it - npm dist-tag add @synergycodes/axiom@${{ steps.version-check.outputs.new }} latest + npm dist-tag add @synergycodes/overflow-ui@${{ steps.version-check.outputs.new }} latest else - echo "Publishing @synergycodes/axiom@${{ steps.version-check.outputs.new }} with 'latest' tag…" + echo "Publishing @synergycodes/overflow-ui@${{ steps.version-check.outputs.new }} with 'latest' tag…" pnpm publish --access public --no-git-checks fi else @@ -87,11 +87,11 @@ jobs: repo_token: ${{ secrets.GITHUB_TOKEN }} output_location: ${{ env.OUTPUT_LOCATION }} app_location: ${{ env.APP_LOCATION }} - app_build_command: 'pnpm website build' - action: 'upload' + app_build_command: "pnpm website build" + action: "upload" skip_api_build: true - deployment_environment: 'release' + deployment_environment: "release" env: CUSTOM_BUILD_COMMAND: npm i -g corepack@latest && corepack prepare && pnpm install --frozen-lockfile && pnpm ui build && pnpm website build ENABLE_NODE_MONOREPO_BUILD: true - NODE_VERSION: 22 \ No newline at end of file + NODE_VERSION: 22 diff --git a/README.md b/README.md index b53b1241..09a92cf4 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -[//]: # "This README file is part of the Axiom documentation website (check overview.mdx)" +[//]: # "This README file is part of the Overflow UI documentation website (check overview.mdx)" A React library for creating node-based user interfaces and diagram-driven apps. Built to work seamlessly with React Flow, it provides a collection of ready-to-use components and templates that simplify the development of visual editors, workflows, and interactive diagrams. @@ -8,18 +8,18 @@ Developed and maintained by **[Synergy Codes](https://www.synergycodes.com/)**. ### 📦 Installation -Use one of the commands below to add **Axiom** to your project: +Use one of the commands below to add **Overflow UI** to your project: ```bash -npm install @synergycodes/axiom +npm install @synergycodes/overflow-ui ``` ```bash -pnpm add @synergycodes/axiom +pnpm add @synergycodes/overflow-ui ``` ```bash -yarn add @synergycodes/axiom +yarn add @synergycodes/overflow-ui ``` ### 🎨 Import styles @@ -27,11 +27,11 @@ yarn add @synergycodes/axiom Add to your style sheet or component: ```css -@import '@synergycodes/axiom/tokens.css'; +@import '@synergycodes/overflow-ui/tokens.css'; ``` ```tsx -import '@synergycodes/axiom/tokens.css'; +import '@synergycodes/overflow-ui/tokens.css'; ``` ### 🌗 Set the theme @@ -45,7 +45,7 @@ To make the styles use proper variables, include `data-theme` (`light` or `dark` ### 🎛️ Use components ```tsx -import { Input } from '@synergycodes/axiom'; +import { Input } from '@synergycodes/overflow-ui'; // … @@ -54,7 +54,7 @@ import { Input } from '@synergycodes/axiom'; ## Customization -Each axiom component uses CSS variables that are derived from primitive values. +Each Overflow UI component uses CSS variables that are derived from primitive values. You can override them: @@ -72,9 +72,9 @@ or a derived value used by the selected component: } ``` -### Axiom css layers +### Overflow UI css layers -Axiom uses [CSS layers](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer) to separate its styles from yours. By default, CSS styles outside of any layer take precedence over what Axiom defines, so your styles will always win the specificity war. You can customize Axiom components with simple `input {}`. +Overflow UI uses [CSS layers](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer) to separate its styles from yours. By default, CSS styles outside of any layer take precedence over what Overflow UI defines, so your styles will always win the specificity war. You can customize Overflow UI components with simple `input {}`. ```css @@ -85,7 +85,7 @@ Axiom uses [CSS layers](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer) } ``` -Default axiom order: +Default Overflow UI order: ```css @layer ui.base, ui.component; ``` diff --git a/about/images/CONTRIBUTING.md b/about/images/CONTRIBUTING.md index 6a118fd7..c8bd109a 100644 --- a/about/images/CONTRIBUTING.md +++ b/about/images/CONTRIBUTING.md @@ -1,7 +1,7 @@ -# How to run a local instance of @synergycodes/axiom +# How to run a local instance of @synergycodes/overflow-ui -1. Clone the repository: `git clone https://github.com/synergycodes/axiom.git` +1. Clone the repository: `git clone https://github.com/synergycodes/overflow-ui.git` 2. Install dependencies: `pnpm install` -3. Build the Axiom library: `pnpm ui dev` +3. Build the Overflow UI library: `pnpm ui dev` 4. Start the Docusaurus documentation site: `pnpm website dev` -5. Open `http://localhost:3000/axiom/` +5. Open `http://localhost:3000/overflow-ui/` diff --git a/eslint.config.mjs b/eslint.config.mjs index bd0d2811..5cd22cdd 100644 --- a/eslint.config.mjs +++ b/eslint.config.mjs @@ -32,7 +32,7 @@ export default defineConfig([ tsEslint.configs.recommended, globalIgnores(['**/node_modules', '**/.git', '**/dist']), { - name: 'Axiom / Root', + name: 'Overflow UI / Root', files: ['**/*'], languageOptions: { globals: globals.browser, diff --git a/package.json b/package.json index 3b07e969..bf0ae2ce 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "name": "axiom", + "name": "overflow-ui", "scripts": { "lint": "pnpm -r lint", "lint:fix": "pnpm -r lint:fix", diff --git a/packages/tokens/package.json b/packages/tokens/package.json index b6a7afaa..ab279775 100644 --- a/packages/tokens/package.json +++ b/packages/tokens/package.json @@ -1,5 +1,5 @@ { - "name": "@synergycodes/axiom-tokens", + "name": "@synergycodes/overflow-ui-tokens", "version": "0.0.0", "private": true, "files": [ diff --git a/packages/ui/README.md b/packages/ui/README.md index c5e8e342..b2836b36 100644 --- a/packages/ui/README.md +++ b/packages/ui/README.md @@ -1,4 +1,4 @@ -# @synergycodes/axiom +# @synergycodes/overflow-ui A React library for creating node-based user interfaces and diagram-driven apps. Built to work seamlessly with React Flow, it provides a collection of ready-to-use components and templates that simplify the development of visual editors, workflows, and interactive diagrams. @@ -8,18 +8,18 @@ Developed and maintained by **[Synergy Codes](https://www.synergycodes.com/)**. ### 📦 Installation -Use one of the commands below to add **Axiom** to your project: +Use one of the commands below to add **Overflow UI** to your project: ```bash -npm install @synergycodes/axiom +npm install @synergycodes/overflow-ui ``` ```bash -pnpm add @synergycodes/axiom +pnpm add @synergycodes/overflow-ui ``` ```bash -yarn add @synergycodes/axiom +yarn add @synergycodes/overflow-ui ``` ### 🎨 Import styles @@ -27,11 +27,11 @@ yarn add @synergycodes/axiom Add to your style sheet or component: ```css -@import '@synergycodes/axiom/tokens.css'; +@import '@synergycodes/overflow-ui/tokens.css'; ``` ```tsx -import '@synergycodes/axiom/tokens.css'; +import '@synergycodes/overflow-ui/tokens.css'; ``` ### 🎛️ Apply the Theme @@ -45,7 +45,7 @@ To make the styles use proper variables, include data-theme (light or dark) attr ### 🧱 Use components ```tsx -import { Input } from '@synergycodes/axiom'; +import { Input } from '@synergycodes/overflow-ui'; // … @@ -54,7 +54,7 @@ import { Input } from '@synergycodes/axiom'; ## Overview -Forget cobbling together UI kits with diagram libraries. Axiom provides a unified set of designed, ready-to-use components: buttons, inputs, accordions, node templates, and more — all built to work seamlessly together. +Forget cobbling together UI kits with diagram libraries. Overflow UI provides a unified set of designed, ready-to-use components: buttons, inputs, accordions, node templates, and more — all built to work seamlessly together. ## Features @@ -66,7 +66,7 @@ Forget cobbling together UI kits with diagram libraries. Axiom provides a unifie ## Customization -Each Axiom component uses CSS variables that are derived from primitive values. +Each Overflow UI component uses CSS variables that are derived from primitive values. You can override them: @@ -84,9 +84,9 @@ or a derived value used by the selected component: } ``` -### Axiom css layers +### Overflow UI css layers -Axiom uses [CSS layers](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer) to separate its styles from yours. By default, CSS styles outside of any layer take precedence over what Axiom defines, so your styles will always win the specificity war. You can customize Axiom components with simple `input {}`. +Overflow UI uses [CSS layers](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer) to separate its styles from yours. By default, CSS styles outside of any layer take precedence over what Overflow UI defines, so your styles will always win the specificity war. You can customize Overflow UI components with simple `input {}`. ```css @@ -97,7 +97,7 @@ Axiom uses [CSS layers](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer) } ``` -Default Axiom order: +Default Overflow UI order: ```css @layer ui.base, ui.component; ``` @@ -129,18 +129,18 @@ Edit `ui/preview-page/preview-page.tsx` to display desired components. ### 📣 Important Note on Underlying Technology -> **Axiom is built on top of [MUI Base](https://v6.mui.com/base-ui/getting-started/), a headless component library that focuses on accessibility and logic, while leaving the styling up to us.** +> **Overflow UI is built on top of [MUI Base](https://v6.mui.com/base-ui/getting-started/), a headless component library that focuses on accessibility and logic, while leaving the styling up to us.** > -> Thanks to MUI Base, Axiom provides components that are **accessible by default** and **fully customizable** through our design tokens. +> Thanks to MUI Base, Overflow UI provides components that are **accessible by default** and **fully customizable** through our design tokens. > > We are aware that **MUI Base has been deprecated**, and the MUI team recommends migrating to [Base UI](https://base-ui.com). -> However, after careful evaluation, we’ve chosen to **stay with MUI Base** for now because: +> However, after careful evaluation, we've chosen to **stay with MUI Base** for now because: > > * ✅ **Base UI is not yet mature enough** for our needs. -> * ✅ We want to ensure a stable, well-tested experience for Axiom users. +> * ✅ We want to ensure a stable, well-tested experience for Overflow UI users. > > This is a **conscious and informed decision**. -> We will continue to monitor Base UI’s progress and will consider migrating when we feel it’s the right time, ensuring a smooth and thoughtful transition for Axiom users. +> We will continue to monitor Base UI's progress and will consider migrating when we feel it's the right time, ensuring a smooth and thoughtful transition for Overflow UI users. > > If you have any questions or concerns, feel free to reach out — we’re happy to share our reasoning and plans in more detail! diff --git a/packages/ui/eslint.config.mjs b/packages/ui/eslint.config.mjs index 256b66dc..29c4c371 100644 --- a/packages/ui/eslint.config.mjs +++ b/packages/ui/eslint.config.mjs @@ -28,7 +28,7 @@ export default defineConfig([ }, }, { - name: 'Axiom / UI', + name: 'Overflow UI / UI', files: ['**/*.{ts,tsx}'], plugins: { 'react-hooks': pluginHooks, diff --git a/packages/ui/package.json b/packages/ui/package.json index b17ca63b..46631a7c 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -1,7 +1,7 @@ { - "name": "@synergycodes/axiom", + "name": "@synergycodes/overflow-ui", "type": "module", - "version": "1.0.0-beta.21", + "version": "1.0.0-beta.22", "description": "A React library for creating node-based UIs and diagram-driven applications. Perfect for React Flow users, providing ready-to-use node templates and components that work seamlessly with React Flow's ecosystem.", "keywords": [ "react", @@ -17,15 +17,15 @@ ], "author": "Synergy Codes", "license": "MIT", - "url": "https://github.com/synergycodes/axiom", - "homepage": "https://github.com/synergycodes/axiom", + "url": "https://github.com/synergycodes/overflow-ui", + "homepage": "https://github.com/synergycodes/overflow-ui", "repository": { "type": "git", - "url": "git+https://github.com/synergycodes/axiom.git", + "url": "git+https://github.com/synergycodes/overflow-ui.git", "directory": "packages/ui" }, "bugs": { - "url": "https://github.com/synergycodes/axiom/issues" + "url": "https://github.com/synergycodes/overflow-ui/issues" }, "scripts": { "build": "vite build", @@ -35,16 +35,16 @@ "lint:fix": "eslint --fix", "typecheck": "tsc --noEmit --pretty" }, - "module": "./dist/axiom.js", + "module": "./dist/overflow-ui.js", "files": [ "dist" ], - "main": "./dist/axiom.js", + "main": "./dist/overflow-ui.js", "types": "./dist/index.d.ts", "exports": { ".": { "types": "./dist/index.d.ts", - "import": "./dist/axiom.js" + "import": "./dist/overflow-ui.js" }, "./tokens.css": "./dist/tokens.css" }, @@ -60,7 +60,7 @@ }, "devDependencies": { "@emotion/react": "^11.14.0", - "@synergycodes/axiom-tokens": "workspace:*", + "@synergycodes/overflow-ui-tokens": "workspace:*", "@types/react": "^19.1.8", "@types/react-dom": "^19.1.6", "@vitejs/plugin-react": "^4.3.4", diff --git a/packages/ui/src/components/modal/modal.module.css b/packages/ui/src/components/modal/modal.module.css index d1bb15bd..6c313ebe 100644 --- a/packages/ui/src/components/modal/modal.module.css +++ b/packages/ui/src/components/modal/modal.module.css @@ -74,7 +74,7 @@ left: 0; width: 100%; height: 100%; - z-index: 1; + z-index: 0; inset: 0; background-color: color-mix( in srgb, diff --git a/packages/ui/src/components/modal/modal.tsx b/packages/ui/src/components/modal/modal.tsx index b3e01f31..e1d679b7 100644 --- a/packages/ui/src/components/modal/modal.tsx +++ b/packages/ui/src/components/modal/modal.tsx @@ -67,7 +67,7 @@ export const Modal = forwardRef( open={open} onClose={onClose} slots={{ - backdrop: (props) => , + backdrop: Backdrop, }} > @@ -112,23 +112,26 @@ export const Modal = forwardRef( /** * Backdrop component for the modal that dims the background */ -const Backdrop = forwardRef< - HTMLDivElement, - { open?: boolean; className: string; onClose?: () => void } ->((props, ref) => { - const { open, className, onClose } = props; +const Backdrop = forwardRef((props, ref) => { + const { open, className } = props; return ( -
- {onClose && ( -