edit docs for interactive event modal

components/pages/landing-page.tsx

@@ -81,7 +81,7 @@ export default function LandingPage() {
           </div>
 
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 230">
-            <path fill="#fff" fill-opacity="1" d="M0,64L480,160L960,64L1440,96L1440,320L960,320L480,320L0,320Z"></path>
+            <path fill="#fff" fillOpacity="1" d="M0,64L480,160L960,64L1440,96L1440,320L960,320L480,320L0,320Z"></path>
           </svg>
         </section>
 

components/pages/validate-license-key.module.scss

@@ -19,10 +19,10 @@
   }
 
   button {
-    background-color: #007bff;
+    background-color: var(--sx-color-primary);
     color: #fff;
     border: none;
-    border-radius: 0.25rem;
+    border-radius: var(--sx-rounding-small);
     padding: 0.5rem 1rem;
     font-size: 1rem;
     cursor: pointer;

components/pages/validate-license-key.tsx

@@ -36,11 +36,11 @@ export default function ValidateLicenseKeyPage() {
           {!isLoading && !accessToken && !hasError && (
             <Fragment>
               <h1>
-                Validate your license key
+                Validate your license key 🔑
               </h1>
 
               <p>
-                Enter your license key to validate it. If we can validate your key, you will get an access token for the
+                Enter your license key to validate it. In return, you will get an access token for the
                 Schedule-X private registry. If you run into any problems, please contact us at tom@schedule-x.dev.
               </p>
 
@@ -62,7 +62,7 @@ export default function ValidateLicenseKeyPage() {
           {accessToken && (
             <Fragment>
               <h1>
-                Your access token
+                Your access token ✅
               </h1>
               <p>
                 Your access token is: <strong>{accessToken}</strong>
@@ -74,7 +74,13 @@ export default function ValidateLicenseKeyPage() {
           )}
 
           {hasError && (
-            <p>There was an error validating your license key. Please try again or contact us at tom@schedule-x.dev, and we will get in touch as soon as possible.</p>
+            <>
+              <h1>
+                Something went wrong 🤔
+              </h1>
+
+              <p>There was an error validating your license key. Please try again or contact us at tom@schedule-x.dev, and we will get in touch as soon as possible.</p>
+            </>
           )}
         </section>
       </div>

components/partials/sales-card/checkmark.tsx

@@ -1,8 +1,12 @@
 export default function AppCheckmark() {
   const green = '#7fbb46'
+  const svgStyles = {
+    minWidth: '18px',
+    width: '18px',
+  }
 
   return <>
-    <svg width={18} version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
+    <svg style={svgStyles} version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 32 32" enableBackground="new 0 0 32 32" fill={green}><g id="SVGRepo_bgCarrier" strokeWidth="0"></g>
       <g id="SVGRepo_tracerCarrier" strokeLinecap="round" strokeLinejoin="round"></g>
       <g id="SVGRepo_iconCarrier"> <polyline fill="none" stroke={green} strokeWidth="2" strokeMiterlimit="10"

pages/changelog.mdx

@@ -1,6 +1,27 @@
 # Change Log
 
-# 0.15.0(2024-07-31)
+## 0.16.1 (2024-08-09)
+
+
+### Bug Fixes
+
+* **drag-to-create:** remove event listeners in month-grid when adding new event
+
+## 0.16.0 (2024-08-08)
+
+### Bug Fixes
+
+* **modal:** remove disturbing animation
+* **modal:** set higher zindex for popups
+* prevent display of recurrence warning on empty rrule
+
+
+### Features
+
+* add resource view beta
+* **resource-view:** add resource color icons
+
+## 0.15.0(2024-07-31)
 
 ### Features
 

pages/docs/interactive-event-modal.mdx

@@ -33,60 +33,71 @@ import '@sx-premium/interactive-event-modal/index.css'
 
 const eventsService = createEventsServicePlugin()
 
+const eventModal = createInteractiveEventModal({
+  // dependency needed to add events
+  eventsService,
+
+  // (Optional): Available people for the event form
+  availablePeople: ['John Doe', 'Jane Doe'],
+
+  // (Optional): callback for when an event is added
+  onAddEvent: (event) => {
+    console.log(event)
+  },
+
+  // (Optional): callback for when an event is updated
+  onDeleteEvent: (eventId) => {
+    console.log(eventId)
+  },
+
+  // (Optional): callback for when an event start property is updated
+  onStartUpdate(start) {
+    console.log(start)
+  },
+
+  // (Optional): callback for when an event end property is updated
+  onEndUpdate(end) {
+    console.log(end)
+  },
+
+  // (Optional): callback which is invoked before opening the modal. Return false to prevent the modal from opening
+  canOpenModal: (event) => {
+    return event.calendarId === 'calendar-1';
+  },
+
+  // (Optional): configure the time picker to use 12-hour format
+  has12HourTimeFormat: true,
+
+  // (Optional): configuration for the field "title"
+  fields: {
+    title: {
+      label: 'Event Title',
+      name: 'event-title',
+      validator: (value) => {
+        return {
+          isValid: !!value && value.length >= 3,
+          message: 'Title must be at least 3 characters long'
+        }
+      }
+    },
+    description: {},
+  }
+})
+
 const calendar = createCalendar({
   // ...other configuration
   plugins: [
-    createInteractiveEventModal({
-      // dependency needed to add events
-      eventsService,
-
-      // (Optional): Available people for the event form
-      availablePeople: ['John Doe', 'Jane Doe'],
-
-      // (Optional): callback for when an event is added
-      onAddEvent: (event) => {
-        console.log(event)
-      },
-
-      // (Optional): callback for when an event is updated
-      onDeleteEvent: (eventId) => {
-        console.log(eventId)
-      },
-
-      // (Optional): callback for when an event start property is updated
-      onStartUpdate(start) {
-        console.log(start)
-      },
-
-      // (Optional): callback for when an event end property is updated
-      onEndUpdate(end) {
-        console.log(end)
-      },
-
-      // (Optional): callback which is invoked before opening the modal. Return false to prevent the modal from opening
-      canOpenModal: (event) => {
-        return event.calendarId === 'calendar-1';
-      },
-
-      // (Optional): configure the time picker to use 12-hour format
-      has12HourTimeFormat: true,
-
-      // (Optional): configuration for the field "title"
-      fields: {
-        title: {
-          label: 'Event Title',
-          name: 'event-title',
-          validator: (value) => {
-            return {
-              isValid: !!value && value.length >= 3,
-              message: 'Title must be at least 3 characters long'
-            }
-          }
-        },
-        description: {},
-      }
-    })
-  ]
+    eventModal,
+    eventsService,
+  ],
+
+  callbacks: {
+    onDoubleClickDateTime(dateTime) {
+      eventModal.clickToCreate(dateTime, {
+        id: 'some-event-id',
+      })
+    }
+  }
 })
 
 calendar.render(document.getElementById('your-calendar-wrapper'))

theme.config.tsx

@@ -13,11 +13,19 @@ const config: DocsThemeConfig = {
   chat: {
     link: 'https://discord.gg/yHbT3C4M8w',
   },
-  docsRepositoryBase:
-    'https://github.com/schedule-x/schedule-x/tree/main/website',
   footer: {
     component: CustomFooter,
   },
+  editLink: {
+    component: () => {
+      return <></>
+    }
+  },
+  feedback: {
+    content: () => {
+      return <></>
+    }
+  },
   darkMode: false,
   useNextSeoProps() {
     const { asPath } = useRouter()