devin-ai-integration[bot]GitHubDevin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>somay@cal.com <somay@cal.com>Somay Chauhan* feat: expose form validation methods from EventTypePlatformWrapper - Add validateForm and handleFormSubmit methods to onFormStateChange prop - Update useEventTypeForm hook to return validateForm method - Add proper TypeScript types for form validation result - Enable external form validation and submission capabilities Co-Authored-By: somay@cal.com <somay@cal.com> * fix: correct forwardRef syntax to resolve parsing errors - Fix forwardRef parameter destructuring syntax - Use proper props parameter pattern for forwardRef components - Ensure prettier can parse the file correctly Co-Authored-By: somay@cal.com <somay@cal.com> * feat: add form validation and submission handlers to event types platform wrapper * refactor: move form validation and submit handlers from hook to wrapper component * fix: add ref to the save button for proper form validation * feat: extend ref-based validation API to AvailabilitySettingsPlatformWrapper - Add AvailabilityFormValidationResult and AvailabilitySettingsPlatformWrapperRef types - Implement forwardRef pattern in AvailabilitySettings component with save button ref - Add validateForm and handleFormSubmit methods using useImperativeHandle - Update AvailabilitySettingsPlatformWrapper to support ref forwarding - Add comprehensive documentation for ref-based validation API in both event-type.mdx and availability-settings.mdx - Follow same patterns established in EventTypePlatformWrapper for consistency Co-Authored-By: somay@cal.com <somay@cal.com> * refactor: rename AvailabilitySettingsPlatformWrapperRef to AvailabilitySettingsFormRef * feat: add ref-based validation pattern to availability example page - Mirror the ref-based validation implementation from event-types.tsx - Add useRef, handleValidate, and handleSubmit functions - Demonstrate validateForm() and handleFormSubmit() methods - Add validation and submit buttons to showcase the new API - Use AvailabilitySettingsFormRef type for proper typing Co-Authored-By: somay@cal.com <somay@cal.com> * refactor: remove unused state variables * docs: clarify form validation behavior for availability and event type atoms * chore: remove console.logs --------- Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> Co-authored-by: somay@cal.com <somay@cal.com> Co-authored-by: Somay Chauhan <somaychauhan98@gmail.com>
Atoms examples
Example apps using atoms - customizable UI components to integrate scheduling into your product.
Running examples apps locally
-
Cal's backend is required to run example apps, so clone
https://github.com/calcom/cal.comand follow setup instructions in the readme. Importantly, you need to have Google credentials setup by following this section in the docs. -
Open "apps/api/v2/.env" and copy environment variables below, and then copy
NEXTAUTH_SECRETfrom the root ".env" of repository cloned in step 1.
NODE_ENV="development"
API_PORT=5555
DATABASE_READ_URL="postgresql://postgres:@localhost:5450/calendso"
DATABASE_WRITE_URL="postgresql://postgres:@localhost:5450/calendso"
API_URL="http://localhost"
NEXTAUTH_SECRET="copy from .env of root of repository cloned in step 1"
DATABASE_URL="postgresql://postgres:@localhost:5450/calendso"
JWT_SECRET="asjdijI1JIO12I3O89198jojioSAJDU"
REDIS_URL="redis://localhost:6379"
- Start "apps/api/v2" api using
yarn dev. - Start "packages/platform/atoms" atoms package with
yarn dev. - Start "apps/web" cal web app using
yarn dx. - Open your browser at "http://localhost:3000/" and login with admin username
admin@example.comand passwordADMINadmin2022!. - In the web app navigate to
http://localhost:3000/settings/organizations/newand create a sample organization. When asked for phone verification code enter111111. - In the web app navigate to
http://localhost:3000/settings/organizations/platform/oauth-clientsand create a new oAuth client - give all permissions and set redirect uri tohttp://localhost:4321which points to example app. - Setup environment for the example app you want to run:
- First, copy ".env.example" into ".env".
- Open ".env" file and paste client id from step 8 in
NEXT_PUBLIC_X_CAL_IDand client secret inX_CAL_SECRET_KEY. If in step 2 you used the same environment variables, thenNEXT_PUBLIC_CALCOM_API_URLcan stay as is. Otherwise adjust the port to point to the sameAPI_PORTas you used in step 2.
- Navigate to example app and setup database by running
rm -f prisma/dev.db && yarn prisma db push. - Start the example app by running
yarn devand go tohttp://localhost:4321. - In the Google Cloud Console "API & Services" "Credentials"
https://console.cloud.google.com/apis/credentialsopen web project setup in step 1 and addhttp://localhost:5555/v2/gcal/oauth/saveto the authorized redirect URIs.