Describe examples

README.md

@@ -5,3 +5,20 @@
 > Highly flexible building blocks to build calendars with Temporal API
 
 👉 **Check out the [documentation](https://tempocal.pierluc.io/#documentation) and [interactive examples](https://tempocal.pierluc.io/#examples)!**
+
+## Features
+
+- 🕰 Built on [Temporal API](https://github.com/tc39/proposal-temporal) (stage 3) and [temporal-polyfill](https://github.com/js-temporal/temporal-polyfill)
+- 🤝 Works great with [Intl API](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl)
+- 🚛 Bring your own DOM!
+- ✨ Calendars, date pickers (with or without time), date range, anything goes!
+- 🤹‍♂️ Well suited for complex use cases!
+- 🤓 Available as ESM and CJS!
+
+## Getting started
+
+**npm**
+
+```
+npm install @tempocal/react
+```

packages/www/App.tsx

@@ -1,11 +1,9 @@
 import { toTemporalInstant } from "@js-temporal/polyfill";
 import * as React from "react";
 import { TabPanel, useTabs } from "react-headless-tabs";
-import { Locale } from "../lib";
 import { Documentation } from "./Documentation";
 import { Examples } from "./Examples";
 import { Overview } from "./Overview";
-import { Select } from "./Select";
 
 const baseClassName =
   "inline-flex items-center border-b-2 cursor-pointer mr-8 px-2 py-4 font-medium text-sm whitespace-nowrap focus:outline-none focus:border-gray-300 focus:text-gray-400";
@@ -17,8 +15,6 @@ const inactiveClassName =
 Date.prototype.toTemporalInstant = toTemporalInstant;
 
 export function App() {
-  const [locale, setLocale] = React.useState<Locale>("en-US");
-
   const defaultTab = React.useMemo(() => {
     if (typeof window === "undefined" || !window.location.hash) {
       return;
@@ -81,19 +77,6 @@ export function App() {
           >
             Examples
           </button>
-          <div className="ml-auto" hidden={selectedTab !== "examples"}>
-            <Select
-              onChange={({ target: { value } }) => setLocale(value)}
-              title="Locale"
-              value={locale}
-            >
-              <option value="en-US">en-US</option>
-              <option value="es-ES">es-ES</option>
-              <option value="fr-CA">fr-CA</option>
-              <option value="pt-BR">pt-BR</option>
-              <option value="uk-UA">uk-UA</option>
-            </Select>
-          </div>
         </nav>
         <TabPanel
           className="space-y-12 py-6"
@@ -111,7 +94,7 @@ export function App() {
           className="space-y-12 py-6"
           hidden={selectedTab !== "examples"}
         >
-          <Examples locale={locale} />
+          <Examples />
         </TabPanel>
       </main>
     </div>

packages/www/Examples.tsx

@@ -1,56 +1,42 @@
 import * as React from "react";
-import { Locale } from "../lib";
 import { Basic } from "./examples/Basic";
 import { DateInput } from "./examples/DateInput";
 import { DatePicker } from "./examples/DatePicker";
 import { DateRangePicker } from "./examples/DateRangePicker";
 import { DateTimePicker } from "./examples/DateTimePicker";
 
-export function Examples({ locale }: { locale: Locale }) {
-  const { dateFormatter, dateTimeFormatter } = React.useMemo(
-    () => ({
-      dateFormatter: new Intl.DateTimeFormat(locale, {
-        dateStyle: "long",
-      }),
-      dateTimeFormatter: new Intl.DateTimeFormat(locale, {
-        dateStyle: "long",
-        timeStyle: "short",
-      }),
-    }),
-    [locale]
-  );
-
+export function Examples() {
   return (
     <>
       <Example
         title="Basic"
         url="https://github.com/Zertz/tempocal/blob/main/packages/www/examples/Basic.tsx"
       >
-        <Basic dateFormatter={dateFormatter} locale={locale} />
-      </Example>
-      <Example
-        title="DateInput"
-        url="https://github.com/Zertz/tempocal/blob/main/packages/www/examples/DateInput.tsx"
-      >
-        <DateInput dateFormatter={dateFormatter} locale={locale} />
+        <Basic />
       </Example>
       <Example
         title="DatePicker"
         url="https://github.com/Zertz/tempocal/blob/main/packages/www/examples/DatePicker.tsx"
       >
         <DatePicker />
       </Example>
+      <Example
+        title="DateInput"
+        url="https://github.com/Zertz/tempocal/blob/main/packages/www/examples/DateInput.tsx"
+      >
+        <DateInput />
+      </Example>
       <Example
         title="DateTimePicker"
         url="https://github.com/Zertz/tempocal/blob/main/packages/www/examples/DateTimePicker.tsx"
       >
-        <DateTimePicker dateTimeFormatter={dateTimeFormatter} locale={locale} />
+        <DateTimePicker />
       </Example>
       <Example
         title="DateRangePicker"
         url="https://github.com/Zertz/tempocal/blob/main/packages/www/examples/DateRangePicker.tsx"
       >
-        <DateRangePicker dateFormatter={dateFormatter} locale={locale} />
+        <DateRangePicker />
       </Example>
     </>
   );

packages/www/Overview.tsx

@@ -34,7 +34,13 @@ export function Overview() {
               Intl API
             </a>
           </li>
-          <li>🤓 Available as ESM and CJS</li>
+          <li>🚛 Bring your own DOM!</li>
+          <li>
+            ✨ Calendars, date pickers (with or without time), date range,
+            anything goes!
+          </li>
+          <li>🤹‍♂️ Well suited for complex use cases!</li>
+          <li>🤓 Available as ESM and CJS!</li>
         </ul>
       </div>
       <div>

packages/www/Select.tsx

@@ -24,7 +24,7 @@ export function Select({
       </label>
       <select
         {...props}
-        className="mt-1 block w-min rounded-md border-gray-300 py-2 pl-3 pr-10 text-base text-gray-700 focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 sm:text-sm"
+        className="mt-1 block w-min rounded-md border-gray-300 py-1.5 pl-3 pr-10 text-sm text-gray-700 focus:border-indigo-500 focus:outline-none focus:ring-indigo-500"
       />
     </div>
   );

packages/www/examples/Basic.tsx

@@ -1,14 +1,9 @@
 import { Temporal } from "@js-temporal/polyfill";
 import * as React from "react";
-import { Calendar, Locale, useTempocal } from "../../lib";
+import { Calendar, useTempocal } from "../../lib";
+import { Code } from "../Code";
 
-export function Basic({
-  dateFormatter,
-  locale,
-}: {
-  dateFormatter: Intl.DateTimeFormat;
-  locale: Locale;
-}) {
+export function Basic() {
   const [value, setValue] = React.useState(
     Temporal.PlainDate.from({
       year: 2021,
@@ -18,22 +13,27 @@ export function Basic({
   );
 
   const { calendarProps } = useTempocal({
-    locale,
+    locale: "en-US",
     mode: "date",
     setValue,
     value,
   });
 
-  const formattedDate = React.useMemo(() => {
-    return dateFormatter.format(
-      new Date(value.year, value.month - 1, value.day)
-    );
-  }, [dateFormatter, value]);
-
   return (
-    <div className="flex flex-col gap-4">
-      <p>{formattedDate}</p>
-      <Calendar {...calendarProps} />
+    <div className="flex  items-start gap-4">
+      <Calendar
+        {...calendarProps}
+        calendarProps={() => ({
+          className:
+            "flex-shrink-0 gap-1 border border-gray-300 p-2 rounded text-center w-72",
+        })}
+      />
+      <p className="text-sm text-gray-700">
+        Out of the box, <Code>Calendar</Code> is just a grid with weekdays and
+        days. While this example adds a tiny bit of styling with TailwindCSS to
+        make it slightly nicer to look at, the component is friendly to all
+        styling solutions that can use classes.
+      </p>
     </div>
   );
 }

packages/www/examples/DateInput.tsx

@@ -1,16 +1,12 @@
 import { Temporal } from "@js-temporal/polyfill";
 import classnames from "classnames";
 import * as React from "react";
-import { Calendar, Locale, useTempocal } from "../../lib";
+import { Calendar, useTempocal } from "../../lib";
 import { Select } from "../Select";
 
-export function DateInput({
-  dateFormatter,
-  locale,
-}: {
-  dateFormatter: Intl.DateTimeFormat;
-  locale: Locale;
-}) {
+const locale = "en-US";
+
+export function DateInput() {
   const [isOpen, setOpen] = React.useState(false);
 
   const [value, setValue] = React.useState(
@@ -34,18 +30,20 @@ export function DateInput({
     value,
   });
 
+  const dateFormatter = React.useMemo(() => {
+    return new Intl.DateTimeFormat(locale, {
+      dateStyle: "long",
+    });
+  }, []);
+
   const formattedDate = React.useMemo(() => {
     return dateFormatter.format(
       new Date(value.year, value.month - 1, value.day)
     );
   }, [dateFormatter, value]);
 
-  React.useEffect(() => {
-    setOpen(false);
-  }, [value]);
-
   return (
-    <div className="relative">
+    <div className="relative flex items-start gap-4">
       <input
         className="rounded px-1"
         onClick={() => setOpen((isOpen) => !isOpen)}
@@ -56,13 +54,12 @@ export function DateInput({
           .toString()
           .padStart(2, "0")}-${value.day.toString().padStart(2, "0")}`}
       />
-      <div className="absolute top-7 left-0" hidden={!isOpen}>
+      <div className="absolute top-9 left-0" hidden={!isOpen}>
         <Calendar
           {...calendarProps}
-          rollover
           calendarProps={() => ({
             className:
-              "gap-1 bg-white border border-gray-300 p-2 rounded shadow text-center w-72",
+              "bg-white flex-shrink-0 gap-1 border border-gray-300 p-2 rounded text-center w-72",
           })}
           headerProps={() => ({ className: "flex gap-2 mx-auto w-min" })}
           renderHeader={() => (
@@ -98,15 +95,14 @@ export function DateInput({
             </>
           )}
           weekdayProps={() => ({ className: "font-medium" })}
-          renderDay={({ date, disabled, plainDateLike }) => (
+          renderDay={({ date, plainDateLike }) => (
             <button
               className={classnames(
                 "w-full rounded border text-gray-700 transition-colors",
                 value.equals(date)
                   ? "border-blue-600 bg-blue-100"
                   : "border-gray-300 hover:bg-gray-100"
               )}
-              disabled={disabled}
               onClick={() => onChangeSelectedValue(plainDateLike)}
               type="button"
             >
@@ -115,6 +111,11 @@ export function DateInput({
           )}
         />
       </div>
+      <p className="text-sm text-gray-700">
+        This example uses a simple toggle to show and hide the calendar when the
+        input is clicked. You are free to use whichever fancy library you have
+        already installed!
+      </p>
     </div>
   );
 }