+ {Icon && (
+
+
+ );
+}
diff --git a/website/src/components/Heading.tsx b/website/src/components/Heading.tsx
new file mode 100644
index 000000000..ab8b254f5
--- /dev/null
+++ b/website/src/components/Heading.tsx
@@ -0,0 +1,14 @@
+import classNames from 'classnames';
+import React from 'react';
+
+import styles from '../css/index.module.css';
+
+export type HeadingProps = JSX.IntrinsicElements['h1'];
+
+export function Heading({ children, className, ...props }: HeadingProps) {
+ return (
+ + {children} +
+ ); +} diff --git a/website/src/components/IconLink.tsx b/website/src/components/IconLink.tsx new file mode 100644 index 000000000..79b98c05a --- /dev/null +++ b/website/src/components/IconLink.tsx @@ -0,0 +1,28 @@ +import Link from '@docusaurus/Link'; +import classNames from 'classnames'; +import React, { ComponentType } from 'react'; + +import styles from '../css/index.module.css'; + +export type IconLinkProps = JSX.IntrinsicElements['div'] & { + icon: ComponentType; + to: string; +}; + +export function IconLink({ + className, + icon: Icon, + to, + ...props +}: IconLinkProps) { + return ( + +
+
+
+ );
+}
diff --git a/website/src/components/Oval.tsx b/website/src/components/Oval.tsx
new file mode 100644
index 000000000..b7553478c
--- /dev/null
+++ b/website/src/components/Oval.tsx
@@ -0,0 +1,14 @@
+import classNames from 'classnames';
+import React from 'react';
+
+import styles from '../css/index.module.css';
+
+export type OvalProps = JSX.IntrinsicElements['span'];
+
+export function Oval({ children, className, ...props }: OvalProps) {
+ return (
+
+ {children}
+
+ );
+}
diff --git a/website/src/components/Playground.tsx b/website/src/components/Playground.tsx
new file mode 100644
index 000000000..8ea47b679
--- /dev/null
+++ b/website/src/components/Playground.tsx
@@ -0,0 +1,291 @@
+import ConfigProvider from 'antd/lib/config-provider';
+import classNames from 'classnames';
+import omit from 'lodash/omit';
+import React, { Component } from 'react';
+import Frame, { FrameContextConsumer } from 'react-frame-component';
+import { ValidatedForm, connectField, context, useForm } from 'uniforms';
+import type { Option } from 'uniforms-unstyled/src/types';
+
+import playgroundStyles from '../css/index.module.css';
+import presets from '../lib/presets';
+import { bridge, schema } from '../lib/schema';
+import styles from '../lib/styles';
+import { themes } from '../lib/universal';
+import { compress, parseQuery, updateQuery } from '../lib/utils';
+
+export class Playground extends Component+
+
+ {`const model = ${JSON.stringify(model, null, 2)};`}
+
+
+ );
+};
+
+class PlaygroundPreview extends Component+ {children} +
+ ); +} diff --git a/website/src/components/Tabs.tsx b/website/src/components/Tabs.tsx new file mode 100644 index 000000000..06e96589c --- /dev/null +++ b/website/src/components/Tabs.tsx @@ -0,0 +1,80 @@ +import classNames from 'classnames'; +import React, { ReactNode } from 'react'; + +import styles from '../css/index.module.css'; +import { useTabs } from '../lib/tabs'; + +export type TabsItem = { + name: string; +}; + +export type TabsHeaderProps
+ {items.map(({ name }, key) => (
+ onTab(key)}
+ >
+ {name}
+
+ ))}
+
+ );
+}
+
+export type TabsHeaderItemProps = {
+ active: boolean;
+ children: ReactNode;
+ onClick: () => void;
+};
+
+export function TabsHeaderItem({
+ active,
+ children,
+ onClick,
+}: TabsHeaderItemProps) {
+ return (
+ event.key === 'Enter' && onClick()}
+ role="button"
+ tabIndex={0}
+ >
+ {children}
+
+ );
+}
+
+export type TabsProps
+
+
+
+
+
+
+ Shipping address
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {
+ if (files && files[0]) {
+ onChange(URL.createObjectURL(files[0]));
+ }
+ }}
+ style={{ display: 'none' }}
+ type="file"
+ />
+
+ );
+}
+
+const ImageField = connectField(Image);
+
+export function ImageFieldForm() {
+ return (
+
+
+
+
+ );
+}
diff --git a/website/src/pages-parts/LandingPage/Comparison.tsx b/website/src/pages-parts/LandingPage/Comparison.tsx
new file mode 100644
index 000000000..76a14aa80
--- /dev/null
+++ b/website/src/pages-parts/LandingPage/Comparison.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+
+import Matrix from '../../../docs/compare-matrix-landing.md';
+import { Button } from '../../components/Button';
+import { Heading } from '../../components/Heading';
+import styles from '../../css/index.module.css';
+
+export function Comparison() {
+ return (
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+ Forminer
+
+ + Commercial support +
++ A commercial implementation of uniforms, which can save you up to + 1500 hours of work. +
+-
+
- + Ideal for building no-code tools - thanks to a + schema-first approach + +
- + Package - easy to integrate with your project and design + system + +
- + Powerful solution - custom fields, full state machine + +
- + Good level of support - based on our popular OS solution, + uniforms + +
+
+
+
+
+ Comparison
+
+ with similar libraries +
+
+ );
+}
diff --git a/website/src/pages-parts/LandingPage/Discussions.tsx b/website/src/pages-parts/LandingPage/Discussions.tsx
new file mode 100644
index 000000000..2e961dc3b
--- /dev/null
+++ b/website/src/pages-parts/LandingPage/Discussions.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+
+import { Button } from '../../components/Button';
+import { Heading } from '../../components/Heading';
+import styles from '../../css/index.module.css';
+
+export function Discussions() {
+ return (
+ + with similar libraries +
+
+
+
+
+
+
+ If You want to know more – join us at GitHub Discussions!
+
+
+
+ );
+}
diff --git a/website/src/pages-parts/LandingPage/ExampleFullyCustomizable.tsx b/website/src/pages-parts/LandingPage/ExampleFullyCustomizable.tsx
new file mode 100644
index 000000000..d17b352ad
--- /dev/null
+++ b/website/src/pages-parts/LandingPage/ExampleFullyCustomizable.tsx
@@ -0,0 +1,54 @@
+import classNames from 'classnames';
+import React from 'react';
+
+import { ExampleCustomizer } from '../../components/ExampleCustomizer';
+import { Heading } from '../../components/Heading';
+import styles from '../../css/index.module.css';
+
+export function ExampleFullyCustomizable() {
+ return (
+
+
+ );
+}
diff --git a/website/src/pages-parts/LandingPage/ExampleSimpleYetPowerful.tsx b/website/src/pages-parts/LandingPage/ExampleSimpleYetPowerful.tsx
new file mode 100644
index 000000000..d5b7bfe9c
--- /dev/null
+++ b/website/src/pages-parts/LandingPage/ExampleSimpleYetPowerful.tsx
@@ -0,0 +1,59 @@
+import classNames from 'classnames';
+import React from 'react';
+
+import { ExampleCustomizer } from '../../components/ExampleCustomizer';
+import { Heading } from '../../components/Heading';
+import styles from '../../css/index.module.css';
+
+export function ExampleSimpleYetPowerful() {
+ return (
+
+
+
+
+
+
+
+ Fully
+
+ customizable +
+
+ + customizable +
-
+
- One-line helper for creating custom fields +
- Supports all types of objects +
- + Freedom of choice when defining custom fields depending on the + abstraction level-schema or theme dependent approach + +
+
+
+
+
+
+ );
+}
diff --git a/website/src/pages-parts/LandingPage/Footer.tsx b/website/src/pages-parts/LandingPage/Footer.tsx
new file mode 100644
index 000000000..b37b45553
--- /dev/null
+++ b/website/src/pages-parts/LandingPage/Footer.tsx
@@ -0,0 +1,87 @@
+import Link from '@docusaurus/Link';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import classNames from 'classnames';
+import React from 'react';
+
+import styles from '../../css/index.module.css';
+import { ShowcaseCard } from './ShowcaseCard';
+
+export function Footer() {
+ const context = useDocusaurusContext();
+ const { email } = context.siteConfig.customFields;
+
+ const currentYear = new Date().getFullYear();
+
+ return (
+
+ );
+}
diff --git a/website/src/pages-parts/LandingPage/Header.tsx b/website/src/pages-parts/LandingPage/Header.tsx
new file mode 100644
index 000000000..214ec231f
--- /dev/null
+++ b/website/src/pages-parts/LandingPage/Header.tsx
@@ -0,0 +1,140 @@
+import Link from '@docusaurus/Link';
+import classNames from 'classnames';
+import React from 'react';
+
+import { Button } from '../../components/Button';
+import { CodeSection } from '../../components/CodeSection';
+import { FormWrapper } from '../../components/FormWrapper';
+import styles from '../../css/index.module.css';
+import { themeContext } from '../../lib/universal';
+import { ShippingForm } from '../CommonForms/ShippingForm';
+
+type SystemWindowProps = JSX.IntrinsicElements['div'];
+
+function SystemWindow({ children, className, ...props }: SystemWindowProps) {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+ Simple,
+
+ yet powerful +
+
+ + yet powerful +
-
+
- Abbreviates form code by 51% +
- + Out-of-the box built-in fields capable of rendering every schema + +
- Automatic state management +
- Inline and asynchronous form validation +
- + Clean-looking components while keeping extensibility and + separation of concerns + +
+
+ );
+}
+
+function Showcase() {
+ return (
+
+
+
+
+
+ {children}
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+const themes = [
+ {
+ alt: 'Semantic UI',
+ src: 'themes/semantic.svg',
+ to: 'https://semantic-ui.com/',
+ },
+ {
+ alt: 'Ant Design',
+ src: 'themes/antd.png',
+ to: 'https://ant.design/',
+ },
+ {
+ alt: 'MUI',
+ src: 'themes/mui.png',
+ to: 'https://mui.com/',
+ },
+ {
+ alt: 'Bootstrap',
+ src: 'themes/bootstrap.svg',
+ to: 'https://getbootstrap.com/',
+ },
+];
+
+export function Header() {
+ return (
+
+
+ );
+}
diff --git a/website/src/pages-parts/LandingPage/LandingPage.tsx b/website/src/pages-parts/LandingPage/LandingPage.tsx
new file mode 100644
index 000000000..2bf3120c8
--- /dev/null
+++ b/website/src/pages-parts/LandingPage/LandingPage.tsx
@@ -0,0 +1,43 @@
+import classNames from 'classnames';
+import React from 'react';
+
+import styles from '../../css/index.module.css';
+import { CommercialServices } from './CommercialServices';
+import { Comparison } from './Comparison';
+import { Discussions } from './Discussions';
+import { ExampleFullyCustomizable } from './ExampleFullyCustomizable';
+import { ExampleSimpleYetPowerful } from './ExampleSimpleYetPowerful';
+import { Footer } from './Footer';
+import { Header } from './Header';
+import { OpenSource } from './OpenSource';
+import { Testimonials } from './Testimonials';
+import { WhoUses } from './WhoUses';
+import { WhyUs } from './WhyUs';
+
+export function LandingPage() {
+ return (
+
+
+
+
+
+
+ uniforms
+
+
+ + A React library for building forms from any schema +
+-
+
- support of all schemas and themes +
- instant prototyping +
- simplifies separation of concerns +
+ 
+
+ ))}
+
+ + Supported design libraries: +
+ {themes.map(({ alt, src, to }) => ( + +
+
+
+
+
+
+
+ );
+}
diff --git a/website/src/pages-parts/LandingPage/OpenSource.tsx b/website/src/pages-parts/LandingPage/OpenSource.tsx
new file mode 100644
index 000000000..e85a5dafb
--- /dev/null
+++ b/website/src/pages-parts/LandingPage/OpenSource.tsx
@@ -0,0 +1,54 @@
+import classNames from 'classnames';
+import React from 'react';
+import { Download, GitBranch, Star } from 'react-feather';
+
+import { Badge } from '../../components/Badge';
+import { Heading } from '../../components/Heading';
+import styles from '../../css/index.module.css';
+import { useStats } from '../../lib/stats';
+
+export function OpenSource() {
+ const { stars, forks, downloads } = useStats();
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+ React form library
trusted by GitHub community +
+
+ );
+}
diff --git a/website/src/pages-parts/LandingPage/ShowcaseCard.tsx b/website/src/pages-parts/LandingPage/ShowcaseCard.tsx
new file mode 100644
index 000000000..b64daaecb
--- /dev/null
+++ b/website/src/pages-parts/LandingPage/ShowcaseCard.tsx
@@ -0,0 +1,18 @@
+import classNames from 'classnames';
+import React from 'react';
+
+import styles from '../../css/index.module.css';
+
+export function ShowcaseCard() {
+ return (
+ + Always Open Source. +
+trusted by GitHub community +
+
+
+ 
+
+ );
+}
diff --git a/website/src/pages-parts/LandingPage/Testimonials.tsx b/website/src/pages-parts/LandingPage/Testimonials.tsx
new file mode 100644
index 000000000..59983d2f0
--- /dev/null
+++ b/website/src/pages-parts/LandingPage/Testimonials.tsx
@@ -0,0 +1,279 @@
+import classNames from 'classnames';
+import React, { useState } from 'react';
+import { GitHub, Linkedin } from 'react-feather';
+
+import { Heading } from '../../components/Heading';
+import { IconLink } from '../../components/IconLink';
+import styles from '../../css/index.module.css';
+
+type Testimonial = {
+ company: string;
+ description: JSX.Element;
+ position: string;
+ who: string;
+ avatar: string;
+ linkGithub: string;
+ linkLinkedin: string;
+};
+
+const testimonials: Testimonial[] = [
+ {
+ company: 'Resolve',
+ description: (
+ <>
+ uniforms is the backbone of our data-intensive web-applications. We have
+ about 200 different forms, from very simple ones, to ones that are
+ filled with complex data-loading conditional form components, which
+ create an incredible UX for our users. And if you really need to push
+ the limits of what you can do with forms, I would highly recommend{' '}
+
+
+ reaching out to Vazco
+
+ {' '}
+ themselves for expert advice.
+
+ ),
+ position: 'CTO and Co-Founder',
+ who: 'Florian Bienefelt',
+ avatar: 'avatar/florian-bienefelt.jpg',
+ linkGithub: 'https://github.com/Floriferous',
+ linkLinkedin: 'https://ch.linkedin.com/in/florianbienefelt',
+ },
+ {
+ company: 'Mindtree',
+ description: (
+ <>
+ Vazco's uniforms is a developer's go-to solution for
+ simplifying form creation and validation in JavaScript applications.
+ With its intuitive APIs and extensive feature set, uniforms streamlines
+ the process of building complex forms. It offers a wide range of input
+ types, validation options, and customization possibilities. Backed by an
+ active community, Vazco's uniforms ensures ongoing support and
+ updates, empowering developers to enhance productivity and deliver
+ polished, user-friendly applications.
+
+ ),
+ position: 'Senior Technical Specialist',
+ who: 'Lorant Vajda',
+ avatar: 'avatar/lorant-vajda.jpg',
+ linkGithub: 'https://github.com/lortschi',
+ linkLinkedin: 'https://www.linkedin.com/in/lorant-vajda-596372181/',
+ },
+
+ {
+ company: 'Simple Commerce',
+ description: (
+ <>
+ We were looking for a forms library that was compatible with React and
+ would help us build forms quicker with built-in logic without having to
+ create it from scratch. And the addition of a GraphQL schema bridge was
+ a no-brainer for us. We added a custom method to help validate required
+ fields based on our GraphQL schema which made it even more practical and
+ quick to use with the built-in features and extensibility. The support
+ for the library is also great, I have never had issues asking questions
+ and getting answers to point me in the right direction.
+
+ ),
+ position: 'Software Developer',
+ who: 'Kheang Hok Chin',
+ avatar: 'avatar/kheang-hok-chin.jpg',
+ linkGithub: 'https://github.com/simplecommerce',
+ linkLinkedin: 'https://www.linkedin.com/in/khokchin',
+ },
+ {
+ company: 'Okra',
+ description: (
+ <>
+ I used uniforms extensively during the height of Meteor.js as a
+ replacement for the dominant forms solution which hadn't caught up
+ with React. The flexibility to leverage different schema solutions
+ coupled with a thoughtfully architected API with a very clean source
+ implementation quickly made it my go-to solution for multiple
+ forms-heavy applications that probably shaved off significant
+ development time and directly boosted my productivity.
+
+ ),
+ position: 'Head of Engineering',
+ who: 'Serkan Durusoy',
+ avatar: 'avatar/serkan-durusoy.jpg',
+ linkGithub: 'https://github.com/serkandurusoy',
+ linkLinkedin: 'https://www.linkedin.com/in/serkandurusoy/',
+ },
+
+ {
+ company: 'Toptal',
+ description: (
+ <>
+ uniforms is my go-to solution for quite a while. Great holistic approach
+ to tackle forms. I especially love the approach to making custom form
+ layouts. Developer experience par-excellence.
+
+ ),
+ position: 'Front-end Platform Architect',
+ who: 'Viktor Bezdek',
+ avatar: 'avatar/viktor-bezdek.jpg',
+ linkGithub: 'https://github.com/viktorbezdek',
+ linkLinkedin: 'https://www.linkedin.com/in/viktorbezdek/',
+ },
+ {
+ company: 'MongoDB',
+ description: (
+ <>
+ Vazco's uniforms is one and the only library that allows you to
+ have greater flexibility on top of the React platform to building forms
+ you like.
+
+ ),
+ position: 'Software Engineer',
+ who: 'Wojciech Trocki',
+ avatar: 'avatar/wojciech-trocki.jpg',
+ linkGithub: 'https://github.com/wtrocki',
+ linkLinkedin: 'https://www.linkedin.com/in/wojciech-t-39574526/',
+ },
+];
+
+export type TestimonialProps = {
+ avatar: string;
+ company: string;
+ description: JSX.Element;
+ linkGithub: string;
+ linkLinkedin: string;
+ position: string;
+ who: string;
+};
+
+export function Testimonial({
+ testimonial,
+ mirror,
+}: {
+ testimonial: TestimonialProps;
+ mirror: boolean;
+}) {
+ const {
+ avatar,
+ company,
+ description,
+ linkGithub,
+ linkLinkedin,
+ position,
+ who,
+ } = testimonial;
+
+ return (
+
+ + A React library for building forms. Integrates with every schema and + wide range of themes. +
+
+
+ );
+}
+
+export function Testimonials() {
+ const [slide, setSlide] = useState(0);
+
+ const setNextSlide = () => {
+ setSlide(prevSlide =>
+ prevSlide === testimonials.length - 2 ? 0 : prevSlide + 1,
+ );
+ };
+
+ const setPrevSlide = () => {
+ setSlide(prevSlide =>
+ prevSlide === 0 ? testimonials.length - 2 : prevSlide - 1,
+ );
+ };
+
+ return (
+
+ 
+
+
+ {who}
+
+ {position} at {company}
+
+
+
+ + {description} +
+
+ Testimonials
+
+ );
+}
diff --git a/website/src/pages-parts/LandingPage/WhoUses.tsx b/website/src/pages-parts/LandingPage/WhoUses.tsx
new file mode 100644
index 000000000..8c291c1aa
--- /dev/null
+++ b/website/src/pages-parts/LandingPage/WhoUses.tsx
@@ -0,0 +1,69 @@
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import classNames from 'classnames';
+import React from 'react';
+
+import { Button } from '../../components/Button';
+import { Heading } from '../../components/Heading';
+import { Subtitle } from '../../components/Subtitle';
+import styles from '../../css/index.module.css';
+
+export function WhoUses() {
+ const context = useDocusaurusContext();
+ const { companies, email } = context.siteConfig.customFields;
+
+ return (
+ + They speak about us +
+
+
+
+
+
+
+
+
+
+ {testimonials.map((testimonial, testimonialIdx) => (
+
+
+
+ );
+}
diff --git a/website/src/pages-parts/LandingPage/WhyUs.tsx b/website/src/pages-parts/LandingPage/WhyUs.tsx
new file mode 100644
index 000000000..94efcb89f
--- /dev/null
+++ b/website/src/pages-parts/LandingPage/WhyUs.tsx
@@ -0,0 +1,103 @@
+import classNames from 'classnames';
+import React from 'react';
+
+import { Heading } from '../../components/Heading';
+import { Oval } from '../../components/Oval';
+import { Subtitle } from '../../components/Subtitle';
+import styles from '../../css/index.module.css';
+
+export function WhyUs() {
+ return (
+
+
+
+
+
+
+
+
+
+
+ {/* FIXME: @docusaurus/* types. */}
+ {(companies as any[]).map(({ image, url, alt }) => (
+
+ 
+
+ ))}
+
+
+ References
+
+ Who uses uniforms
+
+
+ + Our package has been used in several projects worldwide. From + small to the corporate business solutions and well-known + enterprises. Companies trusted us in the development of both + simple forms and sophisticated management systems. +
+
+
+
+
+
+ );
+}
diff --git a/website/src/pages/index.tsx b/website/src/pages/index.tsx
index 169b25c7c..ff74e9277 100644
--- a/website/src/pages/index.tsx
+++ b/website/src/pages/index.tsx
@@ -1,5 +1,6 @@
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import Layout from '@theme/Layout';
+import { LandingPage } from '../pages-parts/LandingPage/LandingPage';
export default function Home(): JSX.Element {
const { siteConfig } = useDocusaurusContext();
@@ -7,6 +8,8 @@ export default function Home(): JSX.Element {
+
+
+
+
+
+
+ Why choose us
+
+ Easy and ready
+
+ to implement solution +
+
+ + to implement solution +
+ A set of open-source libraries capable of instantly generating + any given form in React. +
++ Carried out by the global community of 50+ developers. +
++ Focused on providing a ready-to-implement solution, and + effortless development experience. Keeps your code simple. +
+
+
+
+
+
+
+
+ 
+
+
+
+ + Integrations with various schemas: +
+-
+
- JSON Schema +
- GraphQL +
- SimpleSchema +
- SimpleSchema2 +
- Zod +
- And any other - only a small wrapper is needed! +
+
+ 
+
+
+
+ + Wide range of themes: +
+-
+
- AntD theme +
- Bootstrap4 +
- Bootstrap5 +
- MUI +
- Semantic UI +
- Plain HTML +