diff --git a/README.md b/README.md index 09a92cf4..cc2294d5 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ -[//]: # "This README file is part of the Overflow UI 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. +A React Flow components 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. Developed and maintained by **[Synergy Codes](https://www.synergycodes.com/)**. @@ -52,7 +52,7 @@ import { Input } from '@synergycodes/overflow-ui'; ; ``` -## Customization +### Customization Each Overflow UI component uses CSS variables that are derived from primitive values. @@ -72,11 +72,10 @@ or a derived value used by the selected component: } ``` -### Overflow UI css layers +### Overflow UI CSS layers 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 @layer ui.component { .separator { @@ -86,14 +85,34 @@ Overflow UI uses [CSS layers](https://developer.mozilla.org/en-US/docs/Web/CSS/@ ``` Default Overflow UI order: + ```css @layer ui.base, ui.component; ``` If you want to use layers in your code, just add them at the end. -## Showcase +### Showcase **[Workflow Builder](https://www.workflowbuilder.io/)** is a frontend-focused starter app for building workflows, offering core features, best practices, and easy backend integration for faster client delivery. https://www.workflowbuilder.io/ + +**Browse the list of components and discover solutions tailored to your needs. If you have questions or suggestions, feel free to reach out.** + +### FAQ + +**1. What is the Overflow UI component library?**\ +Overflow UI is an open-source component library designed to enrich the user interface of diagramming applications. It includes both standard UI components – such as buttons, modals, and menus – as well as diagram-specific components like nodes and edges. All components follow the Overflow Design System, ensuring a consistent and modern look for your application. + +**2. Where should I start with Overflow libraries?**\ +We encourage you to explore both libraries – each component comes with its own documentation, usage examples, and implementation guidelines to help you get started quickly. + +**3. How do you ensure transparency in the direction of the UI components library?**\ +The UI Components library is developed iteratively. New features and improvements are released regularly, and all key design and implementation decisions are documented in our decision logs. This gives you full insight into the direction of development and the rationale behind every change. + +**4. Can I safely override styles without fighting specificity?**\ +Yes. Overflow UI uses CSS layers (@layer ui.base, ui.component). Your non-layered styles or layers declared later take precedence, so simple selectors win. + +**5. Do you have a design system available?**\ +Yes, we have a design system available in Figma, and we can provide it as a PRO component. diff --git a/packages/website/docs/authored/overview.mdx b/packages/website/docs/authored/overview.mdx index 84d62362..59f0727c 100644 --- a/packages/website/docs/authored/overview.mdx +++ b/packages/website/docs/authored/overview.mdx @@ -3,24 +3,23 @@ sidebar_position: 0 title: Overview slug: /authored/overview hide_table_of_contents: true +show_navigation_tabs: true --- import { OverflowUIBanner } from '@site/src/components/overflow-ui-banner/overflow-ui-banner' -# Components that accelerate your development +# UI Components for React Flow -Welcome to the UI Components documentation! Here you’ll find everything you need to know about our user interface components, including usage examples and best practices. +Welcome to the Overflow UI Components documentation! Here you’ll find everything you need to know about our user interface components, including usage examples and best practices. -## Explore Our Libraries +## Explore Overflow open-source components - [Diagram Components](/ui-components/category/diagram-components) – A set of ready-made elements for building and visualizing diagrams, making it easy to present complex processes and structures. - [UI Components](/ui-components/category/ui-components) – Universal interface components you can seamlessly integrate into your applications for consistent, accessible, and modern design. -We encourage you to explore both libraries—each component comes with its own documentation, usage examples, and implementation guidelines to help you get started quickly. - -## Iterative Development and Transparency +## Iterative development The UI Components library is developed iteratively. New features and improvements are released regularly, and all key design and implementation decisions are documented in our decision logs. This gives you full insight into the direction of development and the rationale behind every change. diff --git a/packages/website/docs/authored/quickstart.mdx b/packages/website/docs/authored/quickstart.mdx index bb370da4..ca32d8b6 100644 --- a/packages/website/docs/authored/quickstart.mdx +++ b/packages/website/docs/authored/quickstart.mdx @@ -3,6 +3,8 @@ sidebar_position: 1 title: Quickstart slug: /authored/quickstart hide_table_of_contents: true +show_navigation_tabs: true +highlight_overview_tab: true --- import README from '@site/../../README.md'; diff --git a/packages/website/src/components/component-utils/component-page/component-page.tsx b/packages/website/src/components/component-utils/component-page/component-page.tsx index 78e7fa08..fc6beae0 100644 --- a/packages/website/src/components/component-utils/component-page/component-page.tsx +++ b/packages/website/src/components/component-utils/component-page/component-page.tsx @@ -1,11 +1,11 @@ -import { Description } from '../description/description'; -import { PropMap, PropsList } from '../props-list/props-list'; import { OverflowUICSSRelativePath, OverflowUITSXRelativePath, } from '@site/generated/path-types'; -import { CSSVariablesList } from '../css-variable-list/css-variable-list'; import { Playground } from '../code-playground/code-playground'; +import { CSSVariablesList } from '../css-variable-list/css-variable-list'; +import { Description } from '../description/description'; +import { PropMap, PropsList } from '../props-list/props-list'; import styles from './component-page.module.css'; diff --git a/packages/website/src/components/navigation-tabs/navigation-tabs.module.css b/packages/website/src/components/navigation-tabs/navigation-tabs.module.css new file mode 100644 index 00000000..f68074b3 --- /dev/null +++ b/packages/website/src/components/navigation-tabs/navigation-tabs.module.css @@ -0,0 +1,72 @@ +.tabsContainer { + --transition: all 0.2s ease-in-out; + + display: flex; + width: 100%; + gap: 16px; + box-sizing: border-box; + margin: 0; +} + +.tabItem { + display: flex; + align-items: center; + gap: 12px; + flex: 1; + padding: 16px; + border: 1px solid var(--ax-ui-stroke-primary-default); + border-radius: 6px; + text-decoration: none; + color: var(--ax-txt-primary-default); + font-weight: 600; + font-size: 16px; + transition: var(--transition); + position: relative; + background-color: transparent; + line-height: 100%; +} + +.tabItem:hover { + border-color: var(--ax-txt-secondary-default); + text-decoration: none; + color: inherit; +} + +.tabItem[aria-current='page'], +.tabItem.active { + border-color: var(--ifm-color-primary); + background-color: var(--ax-colors-acc1-500-10); + color: var(--ifm-color-primary); +} + +.radioIndicator { + width: 20px; + height: 20px; + border: 2px solid var(--ax-txt-secondary-default); + border-radius: 50%; + position: relative; + flex-shrink: 0; + transition: var(--transition); + display: flex; + align-items: center; + justify-content: center; +} + +.tabItem:hover .radioIndicator { + border-color: var(--ax-txt-primary-default); +} + +.tabItem[aria-current='page'] .radioIndicator, +.tabItem.active .radioIndicator { + border-color: var(--ifm-color-primary); +} + +.tabItem[aria-current='page'] .radioIndicator::after, +.tabItem.active .radioIndicator::after { + content: ''; + width: 10px; + height: 10px; + background-color: var(--ifm-color-primary); + border-radius: 50%; + display: block; +} diff --git a/packages/website/src/components/navigation-tabs/navigation-tabs.tsx b/packages/website/src/components/navigation-tabs/navigation-tabs.tsx new file mode 100644 index 00000000..54ef96db --- /dev/null +++ b/packages/website/src/components/navigation-tabs/navigation-tabs.tsx @@ -0,0 +1,73 @@ +import styles from './navigation-tabs.module.css'; + +interface TabItem { + id: string; + label: string; + href: string; +} + +interface NavigationTabsProps { + tabs: TabItem[]; + activeTabId?: string; +} + +function NavigationTabsComponent({ tabs, activeTabId }: NavigationTabsProps) { + return ( + + ); +} + +export function NavigationTabs({ + isOverviewActive, +}: { + isOverviewActive: boolean; +}) { + const items = [ + { + id: 'ui-components', + label: 'Diagram and UI Components Quickstart', + href: '/ui-components/authored/quickstart', + }, + { + id: 'interaction-components', + label: 'Interaction Components Quickstart', + href: '/premium', + }, + ]; + + return ( + + ); +} diff --git a/packages/website/src/components/overflow-ui-banner/overflow-ui-banner.tsx b/packages/website/src/components/overflow-ui-banner/overflow-ui-banner.tsx index c9b8729c..1d004d53 100644 --- a/packages/website/src/components/overflow-ui-banner/overflow-ui-banner.tsx +++ b/packages/website/src/components/overflow-ui-banner/overflow-ui-banner.tsx @@ -7,9 +7,9 @@ export function OverflowUIBanner() {

React Flow UI Components

- Build better and engage your customers across all channels with our - API reference documentation, quickstarts, SDKs and multi- language - code samples. + Start building with open-source UI components for React Flow. + Ready-to-use documentation, code examples, and API references help + you reduce setup time and scale faster.

diff --git a/packages/website/src/theme/DocItem/Layout/index.tsx b/packages/website/src/theme/DocItem/Layout/index.tsx new file mode 100644 index 00000000..4946c2fc --- /dev/null +++ b/packages/website/src/theme/DocItem/Layout/index.tsx @@ -0,0 +1,80 @@ +import { useDoc } from '@docusaurus/plugin-content-docs/client'; +import { useWindowSize } from '@docusaurus/theme-common'; +import ContentVisibility from '@theme/ContentVisibility'; +import DocBreadcrumbs from '@theme/DocBreadcrumbs'; +import DocItemContent from '@theme/DocItem/Content'; +import DocItemFooter from '@theme/DocItem/Footer'; +import type { Props } from '@theme/DocItem/Layout'; +import DocItemPaginator from '@theme/DocItem/Paginator'; +import DocItemTOCDesktop from '@theme/DocItem/TOC/Desktop'; +import DocItemTOCMobile from '@theme/DocItem/TOC/Mobile'; +import DocVersionBadge from '@theme/DocVersionBadge'; +import DocVersionBanner from '@theme/DocVersionBanner'; +import clsx from 'clsx'; +import { type ReactNode } from 'react'; + +import { DocFrontMatter } from '@docusaurus/plugin-content-docs'; +import { NavigationTabs } from '@site/src/components/navigation-tabs/navigation-tabs'; +import styles from './styles.module.css'; + +function useDocTOC() { + const { frontMatter, toc } = useDoc(); + const windowSize = useWindowSize(); + + const hidden = frontMatter.hide_table_of_contents; + const canRender = !hidden && toc.length > 0; + + const mobile = canRender ? : undefined; + + const desktop = + canRender && (windowSize === 'desktop' || windowSize === 'ssr') ? ( + + ) : undefined; + + return { + hidden, + mobile, + desktop, + }; +} + +type DocFrontMatterExtended = DocFrontMatter & { + show_navigation_tabs?: boolean; + highlight_overview_tab?: boolean; +}; + +export default function DocItemLayout({ children }: Props): ReactNode { + const docTOC = useDocTOC(); + const { metadata, frontMatter } = useDoc(); + const customFrontMatter: DocFrontMatterExtended = frontMatter; + + const showNavigationTabs = customFrontMatter.show_navigation_tabs === true; + const isOverviewActive = customFrontMatter.highlight_overview_tab === true; + + return ( + <> + {showNavigationTabs && ( +
+ +
+ )} +
+
+ + +
+
+ + + {docTOC.mobile} + {children} + +
+ +
+
+ {docTOC.desktop &&
{docTOC.desktop}
} +
+ + ); +} diff --git a/packages/website/src/theme/DocItem/Layout/styles.module.css b/packages/website/src/theme/DocItem/Layout/styles.module.css new file mode 100644 index 00000000..bf999a13 --- /dev/null +++ b/packages/website/src/theme/DocItem/Layout/styles.module.css @@ -0,0 +1,34 @@ +.docItemContainer header + *, +.docItemContainer article > *:first-child { + margin-top: 0; +} + +@media (min-width: 997px) { + .docItemCol { + max-width: 75% !important; + } +} + +.stickyTabsContainer { + position: sticky; + top: var(--ifm-navbar-height); + z-index: 10; + background-color: var(--ifm-background-color); + padding: 16px; + margin-bottom: 1rem; +} + +.theme-doc-sidebar-container { + position: relative; + z-index: 100; +} + +.docItemCol { + max-width: 100% !important; +} + +.docItemContainer { + display: flex; + flex-direction: column; + height: 100%; +} diff --git a/packages/website/src/theme/Navbar/Content/index.tsx b/packages/website/src/theme/Navbar/Content/index.tsx index c2799175..00a87cec 100644 --- a/packages/website/src/theme/Navbar/Content/index.tsx +++ b/packages/website/src/theme/Navbar/Content/index.tsx @@ -1,16 +1,16 @@ -import { type ReactNode } from 'react'; import { useNavbarMobileSidebar } from '@docusaurus/theme-common/internal'; -import SearchBar from '@theme/SearchBar'; -import NavbarMobileSidebarToggle from '@theme/Navbar/MobileSidebar/Toggle'; import NavbarLogo from '@theme/Navbar/Logo'; +import NavbarMobileSidebarToggle from '@theme/Navbar/MobileSidebar/Toggle'; import NavbarSearch from '@theme/Navbar/Search'; +import SearchBar from '@theme/SearchBar'; +import React from 'react'; -import styles from './navbar-content.module.css'; -import { NavButton } from '@synergycodes/overflow-ui'; -import { GithubLogo } from '@phosphor-icons/react'; -import { MagnifyingGlass } from '@phosphor-icons/react/dist/ssr'; import Link from '@docusaurus/Link'; +import { DiscordLogo, GithubLogo } from '@phosphor-icons/react'; +import { MagnifyingGlass } from '@phosphor-icons/react/dist/ssr'; +import { NavButton } from '@synergycodes/overflow-ui'; import { clsx } from 'clsx'; +import styles from './navbar-content.module.css'; const LINKS = [ { @@ -19,10 +19,15 @@ const LINKS = [ active: true, }, { - label: 'Premium', + label: 'Interaction Components', href: 'https://www.overflow.dev/premium?path=/', active: false, }, + { + label: 'Consulting', + href: 'https://www.overflow.dev/react-flow-consulting', + active: false, + }, { label: 'Contact', href: 'https://www.overflow.dev/contact', @@ -34,12 +39,16 @@ const openGithub = () => { window.location.href = 'https://github.com/synergycodes/overflow-ui'; }; +const openDiscord = () => { + window.location.href = 'https://discord.com/invite/FDMjRuarFb'; +}; + function NavbarContentLayout({ left, right, }: { - left: ReactNode; - right: ReactNode; + left: React.ReactNode; + right: React.ReactNode; }) { return (
@@ -63,7 +72,7 @@ function NavbarContentLayout({ ); } -export default function NavbarContent(): ReactNode { +export default function NavbarContent(): React.ReactNode { const mobileSidebar = useNavbarMobileSidebar(); return ( @@ -87,6 +96,13 @@ export default function NavbarContent(): ReactNode { > + + + } /> diff --git a/packages/website/static/img/logo.svg b/packages/website/static/img/logo.svg index 57d5c910..022b2ef9 100644 --- a/packages/website/static/img/logo.svg +++ b/packages/website/static/img/logo.svg @@ -1,9 +1,9 @@ - - - - - - - - + + + + + + + +