Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions .github/workflows/deploy-production.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -64,14 +64,14 @@ jobs:

# 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
Expand Down
24 changes: 12 additions & 12 deletions README.md
Original file line number Diff line number Diff line change
@@ -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.

Expand All @@ -8,30 +8,30 @@ 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

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
Expand All @@ -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';

// …

Expand All @@ -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:

Expand All @@ -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
Expand All @@ -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;
```
Expand Down
8 changes: 4 additions & 4 deletions about/images/CONTRIBUTING.md
Original file line number Diff line number Diff line change
@@ -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/`
2 changes: 1 addition & 1 deletion eslint.config.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"name": "axiom",
"name": "overflow-ui",
"scripts": {
"lint": "pnpm -r lint",
"lint:fix": "pnpm -r lint:fix",
Expand Down
2 changes: 1 addition & 1 deletion packages/tokens/package.json
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"name": "@synergycodes/axiom-tokens",
"name": "@synergycodes/overflow-ui-tokens",
"version": "0.0.0",
"private": true,
"files": [
Expand Down
36 changes: 18 additions & 18 deletions packages/ui/README.md
Original file line number Diff line number Diff line change
@@ -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.

Expand All @@ -8,30 +8,30 @@ 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

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
Expand All @@ -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';

// …

Expand All @@ -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

Expand All @@ -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:

Expand All @@ -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
Expand All @@ -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;
```
Expand Down Expand Up @@ -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, weve 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 UIs progress and will consider migrating when we feel its 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!

Expand Down
2 changes: 1 addition & 1 deletion packages/ui/eslint.config.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ export default defineConfig([
},
},
{
name: 'Axiom / UI',
name: 'Overflow UI / UI',
files: ['**/*.{ts,tsx}'],
plugins: {
'react-hooks': pluginHooks,
Expand Down
18 changes: 9 additions & 9 deletions packages/ui/package.json
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"name": "@synergycodes/axiom",
"name": "@synergycodes/overflow-ui",
"type": "module",
"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.",
Expand All @@ -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",
Expand All @@ -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"
},
Expand All @@ -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",
Expand Down
2 changes: 1 addition & 1 deletion packages/ui/src/components/node/nodes.decision-log.md
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ To meet these requirements, the following components were introduced:
2. **NodePanel**:

- A foundational building block for nodes.
- Offers a well-designed interface for various states, leveraging the Axiom design system.
- Offers a well-designed interface for various states, leveraging the Overflow UI design system.
- Accepts three slots as children for structuring the node: `header`, `content`, and `handles`.

3. **NodeIcon & NodeDescription**:
Expand Down
32 changes: 16 additions & 16 deletions packages/ui/vite.config.mts
Original file line number Diff line number Diff line change
@@ -1,34 +1,34 @@
import { dirname, resolve } from "node:path";
import { fileURLToPath } from "node:url";
import { defineConfig } from "vite";
import { libInjectCss } from "vite-plugin-lib-inject-css";
import { dirname, resolve } from 'node:path';
import { fileURLToPath } from 'node:url';
import { defineConfig } from 'vite';
import { libInjectCss } from 'vite-plugin-lib-inject-css';
import { viteStaticCopy } from 'vite-plugin-static-copy';
import dts from "vite-plugin-dts";
import dts from 'vite-plugin-dts';

const __dirname = dirname(fileURLToPath(import.meta.url));

export default defineConfig({
build: {
lib: {
entry: resolve(__dirname, "src/index.ts"),
name: "Axiom",
fileName: "axiom",
formats: ["es"],
entry: resolve(__dirname, 'src/index.ts'),
name: 'Overflow UI',
fileName: 'overflow-ui',
formats: ['es'],
},
rollupOptions: {
external: ["react", "react-dom", "react/jsx-runtime"],
external: ['react', 'react-dom', 'react/jsx-runtime'],
// [TODO] Fix: suppress "Module level directives cause errors when bundled" warnings
onwarn: (warning, warn) => {
if (warning.code === "MODULE_LEVEL_DIRECTIVE") {
if (warning.code === 'MODULE_LEVEL_DIRECTIVE') {
return;
}
warn(warning);
},
output: {
globals: {
"react-dom": "ReactDom",
react: "React",
"react/jsx-runtime": "ReactJsxRuntime",
'react-dom': 'ReactDom',
react: 'React',
'react/jsx-runtime': 'ReactJsxRuntime',
},
},
},
Expand All @@ -38,15 +38,15 @@ export default defineConfig({
},
resolve: {
alias: {
"@ui": resolve(__dirname, "./src"),
'@ui': resolve(__dirname, './src'),
},
},
// [TODO]: Preferably we should include just a single .d.ts file, but setting rollupTypes to true doesn't work with current setup
// Source: https://github.com/qmhc/vite-plugin-dts?tab=readme-ov-file#internal-error-occurs-when-using-rolluptypes-true
plugins: [
libInjectCss(),
dts({
entryRoot: "src",
entryRoot: 'src',
}),
viteStaticCopy({
targets: [
Expand Down
Loading