feat(docs): ✨ add nextra with initial set of docs

components/ComponentLinks.tsx

@@ -0,0 +1,67 @@
+import { SiGithub, SiStorybook } from "react-icons/si";
+import { Link } from "@renderlesskit/react";
+import { Button, ButtonGroup } from "@renderlesskit/react-tailwind";
+
+type ComponentLinkProps = {
+  github: string;
+  story: string;
+  theme: string;
+};
+
+const ComponentLinks: React.FC<ComponentLinkProps> = ({
+  github,
+  story,
+  theme,
+}) => {
+  const githubBase =
+    "https://github.com/timelessco/renderlesskit-react-tailwind/tree/main/src/";
+  const themeBase =
+    "https://github.com/timelessco/renderlesskit-react-tailwind/tree/main/src/theme/defaultTheme/";
+  const storybookBase =
+    "https://renderlesskit-react-tailwind.vercel.app/?path=/story/";
+
+  return (
+    <ButtonGroup size="md" className="mt-5 component-links">
+      {github && (
+        <Button
+          as={Link}
+          isExternal
+          variant="outline"
+          className="no-underline"
+          prefix={<SiGithub />}
+          href={`${githubBase}${github}`}
+        >
+          View source
+        </Button>
+      )}
+
+      {theme && (
+        <Button
+          as={Link}
+          isExternal
+          variant="outline"
+          className="no-underline"
+          prefix={<SiGithub />}
+          href={`${themeBase}${theme}.ts`}
+        >
+          View theme source
+        </Button>
+      )}
+
+      {story && (
+        <Button
+          as={Link}
+          isExternal
+          variant="outline"
+          className="no-underline"
+          prefix={<SiStorybook />}
+          href={`${storybookBase}${story}`}
+        >
+          View storybook
+        </Button>
+      )}
+    </ButtonGroup>
+  );
+};
+
+export default ComponentLinks;

components/PropsTable.tsx

@@ -0,0 +1,154 @@
+import React from "react";
+import {
+  Popover as ReakitPopover,
+  PopoverArrow,
+  PopoverDisclosure,
+  usePopoverState,
+} from "reakit/Popover";
+import {
+  Box,
+  Button,
+  InfoCircleIcon,
+  useTheme,
+} from "@renderlesskit/react-tailwind";
+import { get } from "lodash";
+
+import { RegionTable } from "./RegionTable";
+
+type PropDef = {
+  name: string;
+  themeKey?: string;
+  required?: boolean;
+  default?: string | boolean;
+  type: string;
+  typeSimple: string;
+  description?: string;
+};
+
+type PopoverTypes = {
+  children: React.ReactNode;
+  content: React.ReactNode;
+  label?: string;
+};
+const Popover: React.FC<PopoverTypes> = ({ children, content, label }) => {
+  const popover = usePopoverState({ placement: "top" });
+  return (
+    <>
+      <PopoverDisclosure
+        as={Button}
+        size="sm"
+        variant="subtle"
+        className="mx-2 text-sm"
+        {...popover}
+      >
+        {children}
+      </PopoverDisclosure>
+      <ReakitPopover
+        {...popover}
+        aria-label={label || ""}
+        className="max-w-xs px-3 py-3 text-sm text-gray-800 bg-white border-none rounded-md shadow-xl outline-none"
+      >
+        <PopoverArrow size="12px" style={{ fill: "white" }} {...popover} />
+        {content}
+      </ReakitPopover>
+    </>
+  );
+};
+
+type PropsTableProps = {
+  data: PropDef[];
+  "aria-label"?: string;
+  "aria-labelledby"?: string;
+};
+
+const PropsTable: React.FC<PropsTableProps> = ({
+  data,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+}) => {
+  const theme = useTheme();
+  const hasAriaLabel = !!(ariaLabel || ariaLabelledBy);
+
+  const tdStyles = "border-0 border-b-0 border-gray-500";
+  const thStyles = `px-2 py-2 text-gray-800 ${tdStyles}`;
+  const typeStyles = "bg-blue-100 text-blue-800 px-2 py-1";
+
+  return (
+    <RegionTable
+      className="w-full border-collapse p-left"
+      aria-label={hasAriaLabel ? ariaLabel : "Component Props"}
+      aria-labelledby={ariaLabelledBy}
+    >
+      <thead>
+        <tr className="bg-transparent">
+          <Box as="th" className={thStyles}>
+            <p>Prop</p>
+          </Box>
+          <Box as="th" className={thStyles}>
+            <p>Type</p>
+          </Box>
+          <Box as="th" className={thStyles}>
+            <p>Default</p>
+          </Box>
+        </tr>
+      </thead>
+      <tbody>
+        {data.map(
+          (
+            {
+              name,
+              themeKey,
+              type,
+              typeSimple,
+              required,
+              default: defaultValue,
+              description,
+            },
+            i,
+          ) => (
+            <tr className="bg-transparent" key={`${name}-${i}`}>
+              <Box as="td" className={tdStyles}>
+                <code>
+                  {name}
+                  {required ? "*" : null}
+                </code>
+                {description && (
+                  <Popover content={description}>
+                    <InfoCircleIcon aria-label="Prop description" />
+                  </Popover>
+                )}
+              </Box>
+              <Box as="td" className={tdStyles}>
+                <code className="text-gray-800">
+                  {themeKey ? "union" : Boolean(typeSimple) ? typeSimple : type}
+                </code>
+                {!!(typeSimple || themeKey) && (
+                  <Popover
+                    content={
+                      <code className={typeStyles}>
+                        {themeKey
+                          ? Object.keys(get(theme, themeKey)).join(" | ")
+                          : type}
+                      </code>
+                    }
+                  >
+                    <InfoCircleIcon aria-label="See full type" />
+                  </Popover>
+                )}
+              </Box>
+              <Box as="td" className={tdStyles}>
+                {!!defaultValue ? (
+                  <code className="text-gray-800">{defaultValue}</code>
+                ) : (
+                  "-"
+                )}
+              </Box>
+            </tr>
+          ),
+        )}
+      </tbody>
+    </RegionTable>
+  );
+};
+
+export default PropsTable;

components/RegionTable.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { Box, BoxProps } from "@renderlesskit/react-tailwind";
+
+export function RegionTable({
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  ...props
+}: BoxProps) {
+  return (
+    <Box
+      as="div"
+      role="region"
+      aria-label={ariaLabel}
+      aria-labelledby={ariaLabelledBy}
+      tabIndex={0}
+      className="region-table relative mt-8"
+    >
+      <Box as="table" className="border-0 outline-none" {...props} />
+    </Box>
+  );
+}

next.config.js

@@ -0,0 +1,8 @@
+const withNextra = require("nextra")({
+  theme: "nextra-theme-docs",
+  themeConfig: "./theme.config.js",
+  unstable_stork: false,
+  unstable_staticImage: true,
+});
+
+module.exports = withNextra({});

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "next-react-app",
+  "name": "renderlesskit-tailwind-docs",
   "version": "1.0.0",
   "private": true,
   "description": "Personal Next React App",
@@ -23,7 +23,7 @@
   "scripts": {
     "postinstall": "husky install",
     "dev": "next dev",
-    "build": "next build",
+    "build": "STORK_PATH=$(pwd)/bin/stork.bin next build",
     "start": "next start",
     "test": "jest --watch --watchAll=false",
     "test:ci": "jest --ci",
@@ -63,9 +63,13 @@
     ]
   },
   "dependencies": {
+    "@renderlesskit/react-tailwind": "0.0.1-alpha.33",
     "next": "12.0.7",
+    "nextra": "2.0.0-beta.5",
+    "nextra-theme-docs": "2.0.0-beta.5",
     "react": "17.0.2",
-    "react-dom": "17.0.2"
+    "react-dom": "17.0.2",
+    "lodash": "4.17.21"
   },
   "devDependencies": {
     "@babel/core": "7.16.5",
@@ -78,6 +82,7 @@
     "@testing-library/react": "12.1.2",
     "@testing-library/user-event": "13.5.0",
     "@types/jest": "27.0.3",
+    "@types/lodash": "4.14.178",
     "@types/node": "17.0.5",
     "@types/react": "17.0.38",
     "@types/react-dom": "17.0.11",
@@ -95,6 +100,7 @@
     "lint-staged": "12.1.4",
     "postcss": "8.4.5",
     "prettier": "2.5.1",
+    "react-icons": "4.3.1",
     "release-it": "14.11.8",
     "sort-package-json": "1.53.1",
     "tailwindcss": "3.0.8",

pages/_app.tsx

@@ -1,7 +1,13 @@
+import { RenderlesskitProvider } from "@renderlesskit/react-tailwind";
 import type { AppProps } from "next/app";
 
 import "@/styles/global.css";
+import "nextra-theme-docs/style.css";
 
 export default function MyApp({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />;
+  return (
+    <RenderlesskitProvider>
+      <Component {...pageProps} />
+    </RenderlesskitProvider>
+  );
 }

pages/_document.tsx

@@ -0,0 +1,19 @@
+import Document, { Head, Html, Main, NextScript } from "next/document";
+
+class MyDocument extends Document {
+  render() {
+    return (
+      <Html>
+        <Head>
+          <link href="https://rsms.me/inter/inter.css" rel="stylesheet" />
+        </Head>
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    );
+  }
+}
+
+export default MyDocument;