docs: playground improvements

gpbl · Jun 23, 2024 · 0634b3b · 0634b3b
1 parent c71d577
commit 0634b3b
Show file tree

Hide file tree

Showing 5 changed files with 152 additions and 77 deletions.
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/website/package.json b/website/package.json
@@ -19,6 +19,7 @@
     "@docusaurus/core": "3.4.0",
     "@docusaurus/preset-classic": "3.4.0",
     "@docusaurus/remark-plugin-npm2yarn": "^3.4.0",
+    "@docusaurus/theme-common": "^3.4.0",
     "@mdx-js/react": "^3.0.1",
     "clsx": "^2.1.1",
     "date-fns-jalali": "3.6.0-0",

diff --git a/website/src/components/HighlightWithTheme.tsx b/website/src/components/HighlightWithTheme.tsx
@@ -0,0 +1,21 @@
+import React from "react";
+
+import { usePrismTheme } from "@docusaurus/theme-common";
+import { Highlight, HighlightProps } from "prism-react-renderer";
+
+export function HighlightWithTheme(props: HighlightProps) {
+  const prismTheme = usePrismTheme();
+  return (
+    <Highlight theme={prismTheme} {...props}>
+      {({ className, style, tokens, getTokenProps }) => (
+        <pre style={style} className={className}>
+          {tokens.map((line, i) => {
+            return line.map((token, key) => (
+              <span key={key} {...getTokenProps({ token })} />
+            ));
+          })}
+        </pre>
+      )}
+    </Highlight>
+  );
+}
diff --git a/website/src/pages/playground.module.css b/website/src/pages/playground.module.css
@@ -8,7 +8,6 @@
 }
 
 .form {
-  font-size: 0.85rem;
   display: flex;
   flex-direction: row;
   gap: 1rem;
@@ -40,27 +39,31 @@
   display: flex;
   flex-direction: column;
   gap: 0.5em;
+  font-size: 0.85rem;
 }
 
 .form fieldset legend {
   display: inline-block;
   padding: 0 0.5em;
+  text-align: center;
   font-weight: bold;
 }
 
 .form label {
   display: flex;
   flex-direction: row;
-  gap: 0.25em;
+  gap: 0.5em;
   align-items: center;
   white-space: nowrap;
 }
 
 .form label:has(select),
-.form label:has(input[type="number"]) {
+.form label:has(input[type="number"]),
+.form label:has(input[type="color"]) {
   justify-content: space-between;
 }
 
-.browserWindow {
+.browserWindow,
+.props {
   margin: 2rem;
 }
diff --git a/website/src/pages/playground.tsx b/website/src/pages/playground.tsx
@@ -2,7 +2,6 @@ import React from "react";
 
 import Layout from "@theme/Layout";
 import * as locales from "date-fns/locale";
-import { Highlight, Prism, themes } from "prism-react-renderer";
 import {
   DateRange,
   DayPicker,
@@ -13,6 +12,7 @@ import {
 import { DayPicker as DayPickerUtc } from "react-day-picker/utc";
 
 import { BrowserWindow } from "../components/BrowserWindow";
+import { HighlightWithTheme } from "../components/HighlightWithTheme";
 
 import styles from "./playground.module.css";
 
@@ -53,11 +53,23 @@ export default function Playground() {
   >();
   const [utc, setUtc] = React.useState(false);
 
+  const [accentColor, setAccentColor] = React.useState<string>();
+  const [backgroundAccentColor, setAccentBackgroundColor] =
+    React.useState<string>();
+
   const Component = utc ? DayPickerUtc : DayPicker;
   const formattedProps = `<DayPicker${toJSX({ ...props, locale: undefined })} />`;
 
   return (
     <Layout>
+      <style>
+        {`
+          .rdp-calendar {
+            ${accentColor ? `--rdp-accent-color: ${accentColor} !important` : ""};
+            ${backgroundAccentColor ? `--rdp-accent-background-color: ${backgroundAccentColor} !important` : ""};
+          }
+        `}
+      </style>
       <div className={styles.playground}>
         <h1>DayPicker v9 Playground</h1>
         <form className={styles.form}>
@@ -125,47 +137,73 @@ export default function Playground() {
                 />
                 Hide weekdays
               </label>
+              <label>
+                Accent Color:
+                <input
+                  value={accentColor}
+                  type="color"
+                  name="numberOfMonths"
+                  onChange={(e) => setAccentColor(e.target.value)}
+                />
+              </label>
             </div>
           </fieldset>
+
           <fieldset>
             <legend>Navigation</legend>
             <div className={styles.fields}>
               <label>
+                Number of months:
                 <input
-                  type="checkbox"
-                  name="showWeekDays"
+                  type="number"
+                  min={1}
+                  max={12}
+                  size={4}
+                  name="numberOfMonths"
                   onChange={(e) =>
-                    setProps({ ...props, hideNavigation: e.target.checked })
+                    setProps({
+                      ...props,
+                      numberOfMonths: Number(e.target.value)
+                    })
                   }
                 />
-                Hide navigation
               </label>
               <label>
                 <input
                   type="checkbox"
-                  name="showWeekDays"
+                  name="hideNavigation"
                   onChange={(e) =>
-                    setProps({ ...props, disableNavigation: e.target.checked })
+                    setProps({ ...props, hideNavigation: e.target.checked })
                   }
                 />
-                Disable navigation
+                Hide Navigation
               </label>
               <label>
-                Number of months:
                 <input
-                  type="number"
-                  min={1}
-                  max={12}
-                  size={3}
-                  name="numberOfMonths"
+                  type="checkbox"
+                  name="disableNavigation"
                   onChange={(e) =>
-                    setProps({
-                      ...props,
-                      numberOfMonths: Number(e.target.value)
-                    })
+                    setProps({ ...props, disableNavigation: e.target.checked })
                   }
                 />
+                Disable Navigation
               </label>
+
+              {(props.numberOfMonths ?? 1) > 1 && (
+                <label>
+                  <input
+                    type="checkbox"
+                    name="reverseMonths"
+                    onChange={(e) =>
+                      setProps({
+                        ...props,
+                        reverseMonths: e.target.checked
+                      })
+                    }
+                  />
+                  Reverse Months
+                </label>
+              )}
             </div>
           </fieldset>
 
@@ -247,30 +285,30 @@ export default function Playground() {
                     setUtc(e.target.checked);
                   }}
                 />
-                UTC
+                UTC Dates
               </label>
               <label>
                 <input
                   type="checkbox"
-                  name="rtl"
+                  name="ISOWeek"
                   onChange={(e) =>
-                    setProps({
-                      ...props,
-                      dir: e.target.checked ? "rtl" : "ltr"
-                    })
+                    setProps({ ...props, ISOWeek: e.target.checked })
                   }
                 />
-                Right-to-left
+                ISO Week
               </label>
               <label>
                 <input
                   type="checkbox"
-                  name="ISOWeek"
+                  name="rtl"
                   onChange={(e) =>
-                    setProps({ ...props, ISOWeek: e.target.checked })
+                    setProps({
+                      ...props,
+                      dir: e.target.checked ? "rtl" : "ltr"
+                    })
                   }
                 />
-                ISO Week
+                Right-to-left direction
               </label>
             </div>
           </fieldset>
@@ -320,7 +358,7 @@ export default function Playground() {
                     type="number"
                     min={0}
                     max={12}
-                    size={3}
+                    size={4}
                     name="min"
                     onChange={(e) =>
                       setProps({
@@ -338,7 +376,7 @@ export default function Playground() {
                     type="number"
                     min={0}
                     max={12}
-                    size={3}
+                    size={4}
                     name="max"
                     onChange={(e) =>
                       setProps({
@@ -349,6 +387,17 @@ export default function Playground() {
                   />
                 </label>
               ) : null}
+              {props.mode === "range" && (
+                <label>
+                  Range Color:
+                  <input
+                    value={backgroundAccentColor ?? ""}
+                    type="color"
+                    name="numberOfMonths"
+                    onChange={(e) => setAccentBackgroundColor(e.target.value)}
+                  />
+                </label>
+              )}
             </div>
           </fieldset>
         </form>
@@ -358,51 +407,49 @@ export default function Playground() {
             <Component {...props} onSelect={setSelected} selected={selected} />
           </BrowserWindow>
         </div>
-        <h2>Props</h2>
-        <Highlight
-          theme={themes.shadesOfPurple}
-          code={formattedProps}
-          language="tsx"
-        >
-          {({ className, style, tokens, getTokenProps }) => (
-            <pre style={style} className={className}>
-              {tokens.map((line, i) => {
-                return line.map((token, key) => (
-                  <span key={key} {...getTokenProps({ token })} />
-                ));
-              })}
-            </pre>
+        <div className={styles.props}>
+          <h2>Selection</h2>
+          {selected ? (
+            <>
+              <pre>
+                {props.mode === "single" && selected && selected.toString()}
+                {props.mode === "multiple" &&
+                  (selected as Date[] | undefined)?.map((date) => {
+                    return (
+                      <>
+                        {date.toString()}
+                        <br />
+                      </>
+                    );
+                  })}
+                {props.mode === "range" && isDateRange(selected) && (
+                  <>
+                    From: {selected.from && selected.from.toString()}
+                    <br />
+                    To: {"  "}
+                    {selected.to && selected.to.toString()}
+                  </>
+                )}
+              </pre>
+            </>
+          ) : props.mode ? (
+            <p>Pick on a day to start selection.</p>
+          ) : (
+            <p>Pick a selection mode to enable selections.</p>
           )}
-        </Highlight>
-        {props.mode && (
-          <h2>
-            Selection mode: <code>{props.mode}</code>
-          </h2>
-        )}
-        {selected && (
-          <>
-            <pre>
-              {props.mode === "single" && selected && selected.toString()}
-              {props.mode === "multiple" &&
-                (selected as Date[] | undefined)?.map((date) => {
-                  return (
-                    <>
-                      {date.toString()}
-                      <br />
-                    </>
-                  );
+          <h2>Props</h2>
+          <HighlightWithTheme code={formattedProps} language="tsx">
+            {({ className, style, tokens, getTokenProps }) => (
+              <pre style={style} className={className}>
+                {tokens.map((line, i) => {
+                  return line.map((token, key) => (
+                    <span key={key} {...getTokenProps({ token })} />
+                  ));
                 })}
-              {props.mode === "range" && isDateRange(selected) && (
-                <>
-                  From: {selected.from && selected.from.toString()}
-                  <br />
-                  To: {"  "}
-                  {selected.to && selected.to.toString()}
-                </>
-              )}
-            </pre>
-          </>
-        )}
+              </pre>
+            )}
+          </HighlightWithTheme>
+        </div>
       </div>
     </Layout>
   );