Copied all pages into docs folder

nextra-docs-template/components/Badge.tsx

@@ -0,0 +1,45 @@
+import Link from '@docusaurus/Link';
+import classNames from 'classnames';
+import React, { ComponentType } from 'react';
+
+import styles from '../index.module.css';
+import { Oval } from './Oval';
+
+export type BadgeProps = {
+  border: number;
+  color: string;
+  icon: ComponentType<{ color?: string }>;
+  number?: string;
+  text: string;
+  to: string;
+};
+
+export function Badge({
+  border,
+  color,
+  icon: Icon,
+  number,
+  text,
+  to,
+}: BadgeProps) {
+  return (
+    <Link to={to} className={classNames(styles.badge)}>
+      <img
+        className={styles['badge-image']}
+        src={`assets/border-0${border}.svg`}
+        alt=""
+      />
+      {Icon && (
+        <Oval className={styles['top-right-corner']}>
+          <Icon color={color} />
+        </Oval>
+      )}
+      <div className={classNames(styles['badge-centered'], styles.centered)}>
+        <div style={{ color }} className={styles['badge-number']}>
+          {number}
+        </div>
+        <p className={styles.text}>{text}</p>
+      </div>
+    </Link>
+  );
+}

nextra-docs-template/components/Button.tsx

@@ -0,0 +1,24 @@
+import Link from '@docusaurus/Link';
+import classNames from 'classnames';
+import React from 'react';
+
+import styles from '../index.module.css';
+
+export type ButtonProps = JSX.IntrinsicElements['button'] & { to: string };
+
+export function Button({ children, className, to, ...props }: ButtonProps) {
+  return (
+    <Link to={to}>
+      <button
+        {...props}
+        className={classNames(
+          'button button--lg button--primary',
+          styles['call-to-action'],
+          className,
+        )}
+      >
+        {children}
+      </button>
+    </Link>
+  );
+}

nextra-docs-template/components/CodeSection.tsx

@@ -0,0 +1,65 @@
+import components from '@theme/MDXComponents';
+import React from 'react';
+
+export type CodeSectionProps = {
+  language: string;
+  replace?: Record<string, string>;
+  section?: string;
+  source: string | { default: string };
+};
+
+export function CodeSection({
+  language,
+  replace,
+  section,
+  source,
+}: CodeSectionProps) {
+  // Unwrap ES module.
+  if (typeof source === 'object' && 'default' in source) {
+    source = source.default;
+  }
+
+  // Cut out only desired section.
+  if (section) {
+    const pattern = new RegExp(
+      `// <${section}>\\s([\\s\\S]*?)\\s// </${section}>\\s`,
+      'g',
+    );
+
+    source = source
+      .split(pattern)
+      .reduce(
+        (source, part, index) =>
+          index % 2 === 0 ? source : `${source}\n\n${part}`,
+        '',
+      );
+  }
+
+  // Remove remaining section tags.
+  source = source.replace(/\/\/ <.*?\n/g, '');
+
+  // Replace all mapped things.
+  if (replace) {
+    for (const [pattern, value] of Object.entries(replace)) {
+      source = source.replace(new RegExp(pattern, 'gs'), value);
+    }
+  }
+
+  // At least one newline is required for non-inline view.
+  source = source.trim();
+  if (!source.includes('\n')) {
+    source += '\n';
+  }
+
+  return (
+    <components.pre>
+      <components.code
+        children={source}
+        className={`language-${language}`}
+        mdxType="code"
+        originalType="code"
+        parentName="pre"
+      />
+    </components.pre>
+  );
+}

nextra-docs-template/components/ExampleCustomizer.tsx

@@ -0,0 +1,63 @@
+import React, { ComponentType } from 'react';
+import { Box, Code, Database } from 'react-feather';
+
+import { themeContext } from '../lib/universal';
+import { CodeSection } from './CodeSection';
+import { FormWrapper } from './FormWrapper';
+import { TogglerTabs } from './TogglerTabs';
+
+const tabs = [
+  { name: 'Semantic', value: 'semantic' as const },
+  { name: 'MUI', value: 'mui' as const },
+  { name: 'Bootstrap4', value: 'bootstrap4' as const },
+  { name: 'Bootstrap5', value: 'bootstrap5' as const },
+  { name: 'AntD', value: 'antd' as const },
+  { name: 'Unstyled', value: 'unstyled' as const },
+];
+
+const toggles = [
+  { icon: <Box />, name: 'Example', tooltipText: 'Show example' },
+  { icon: <Code />, name: 'Code', tooltipText: 'Show source code' },
+  { icon: <Database />, name: 'Schema', tooltipText: 'Show schema' },
+];
+
+export type ExampleCustomizerProps = {
+  code: { default: string };
+  example: ComponentType;
+  schema: { default: string };
+};
+
+export function ExampleCustomizer({
+  code: { default: code },
+  example: Example,
+  schema: { default: schema },
+}: ExampleCustomizerProps) {
+  return (
+    <TogglerTabs group="examples" tabsItems={tabs} togglerItems={toggles}>
+      {({ tab: { value: theme }, toggle: { name } }) => {
+        switch (name) {
+          case 'Code':
+            return (
+              <CodeSection
+                language="tsx"
+                replace={{ "'[^']*?/universal'": `'uniforms-${theme}'` }}
+                source={code}
+              />
+            );
+          case 'Example':
+            return (
+              <themeContext.Provider value={theme}>
+                <FormWrapper>
+                  <Example />
+                </FormWrapper>
+              </themeContext.Provider>
+            );
+          case 'Schema':
+            return <CodeSection language="tsx" source={schema} />;
+          default:
+            return null;
+        }
+      }}
+    </TogglerTabs>
+  );
+}

nextra-docs-template/components/FormWrapper.tsx

@@ -0,0 +1,21 @@
+import React, { ReactNode, useContext } from 'react';
+
+import styles from '../index.module.css';
+import { useFrameAutoResize } from '../lib/autoresize';
+import { themeContext } from '../lib/universal';
+import { PlaygroundWrap } from './Playground';
+
+export type FormWrapperProps = {
+  children: ReactNode;
+};
+
+export function FormWrapper(props: FormWrapperProps) {
+  const theme = useContext(themeContext);
+  const frameProps = useFrameAutoResize([props.children]);
+
+  return (
+    <div className={styles['form-wrapper']}>
+      <PlaygroundWrap frameProps={frameProps} theme={theme} {...props} />
+    </div>
+  );
+}

nextra-docs-template/components/Heading.tsx

@@ -0,0 +1,14 @@
+import classNames from 'classnames';
+import React from 'react';
+
+import styles from '../index.module.css';
+
+export type HeadingProps = JSX.IntrinsicElements['h1'];
+
+export function Heading({ children, className, ...props }: HeadingProps) {
+  return (
+    <h2 {...props} className={classNames(styles.heading, className)}>
+      {children}
+    </h2>
+  );
+}

nextra-docs-template/components/IconLink.tsx

@@ -0,0 +1,28 @@
+import Link from '@docusaurus/Link';
+import classNames from 'classnames';
+import React, { ComponentType } from 'react';
+
+import styles from '../index.module.css';
+
+export type IconLinkProps = JSX.IntrinsicElements['div'] & {
+  icon: ComponentType;
+  to: string;
+};
+
+export function IconLink({
+  className,
+  icon: Icon,
+  to,
+  ...props
+}: IconLinkProps) {
+  return (
+    <Link to={to}>
+      <div
+        {...props}
+        className={classNames(styles['link-icon-container'], className)}
+      >
+        <Icon />
+      </div>
+    </Link>
+  );
+}

nextra-docs-template/components/Oval.tsx

@@ -0,0 +1,14 @@
+import classNames from 'classnames';
+import React from 'react';
+
+import styles from '../index.module.css';
+
+export type OvalProps = JSX.IntrinsicElements['span'];
+
+export function Oval({ children, className, ...props }: OvalProps) {
+  return (
+    <span {...props} className={classNames(styles.oval, className)}>
+      {children}
+    </span>
+  );
+}