25/11 - Daily promotion

.env.example

@@ -21,11 +21,6 @@ APPSMITH_SIGNUP_DISABLED=
 # Segment
 APPSMITH_SEGMENT_KEY=
 
-# Algolia Search (Docs)
-APPSMITH_ALGOLIA_API_ID=
-APPSMITH_ALGOLIA_API_KEY=
-APPSMITH_ALGOLIA_SEARCH_INDEX_NAME=
-
 #Client log level (debug | error)
 APPSMITH_CLIENT_LOG_LEVEL=
 

README.md

@@ -15,6 +15,12 @@
 <a href="https://docs.appsmith.com/getting-started/setup/installation-guides/docker?utm_source=github&utm_medium=organic&utm_campaign=readme&utm_content=badge">
 <img src="https://img.shields.io/docker/pulls/appsmith/appsmith-ce?color=4591df&style=for-the-badge">
 </a>
+<a href="https://www.youtube.com/@appsmith/?sub_confirmation=1" target="_blank">
+    <img alt="YouTube Channel Subscribers" src="https://img.shields.io/youtube/channel/subscribers/UCMYwzPG2txS8nR5ZbNY6T5g?color=00FF0&style=for-the-badge">
+</a>
+<a href="https://www.youtube.com/@appsmith/?sub_confirmation=1" target="_blank">
+    <img alt="YouTube Channel Views" src="https://img.shields.io/youtube/channel/views/UCMYwzPG2txS8nR5ZbNY6T5g?color=00FF0&style=for-the-badge">
+</a>
 </p>
 
 ---

app/client/docker/templates/nginx-app.conf.template

@@ -30,9 +30,6 @@ server {
         sub_filter __APPSMITH_SENTRY_DSN__ '${APPSMITH_SENTRY_DSN}';
         sub_filter __APPSMITH_SMART_LOOK_ID__ '${APPSMITH_SMART_LOOK_ID}';
         sub_filter __APPSMITH_SEGMENT_KEY__ '${APPSMITH_SEGMENT_KEY}';
-        sub_filter __APPSMITH_ALGOLIA_API_ID__ '${APPSMITH_ALGOLIA_API_ID}';
-        sub_filter __APPSMITH_ALGOLIA_SEARCH_INDEX_NAME__ '${APPSMITH_ALGOLIA_SEARCH_INDEX_NAME}';
-        sub_filter __APPSMITH_ALGOLIA_API_KEY__ '${APPSMITH_ALGOLIA_API_KEY}';
         sub_filter __APPSMITH_CLIENT_LOG_LEVEL__ '${APPSMITH_CLIENT_LOG_LEVEL}';
         sub_filter __APPSMITH_SENTRY_RELEASE__ '${APPSMITH_SENTRY_RELEASE}';
         sub_filter __APPSMITH_SENTRY_ENVIRONMENT__ '${APPSMITH_SENTRY_ENVIRONMENT}';

app/client/jest.config.js

@@ -114,11 +114,6 @@ module.exports = {
         enabled: parseConfig("__APPSMITH_SEGMENT_KEY__"),
         apiKey: parseConfig("__APPSMITH_MIXPANEL_KEY__"),
       },
-      algolia: {
-        apiId: parseConfig("__APPSMITH_ALGOLIA_API_ID__"),
-        apiKey: parseConfig("__APPSMITH_ALGOLIA_API_KEY__"),
-        indexName: parseConfig("__APPSMITH_ALGOLIA_SEARCH_INDEX_NAME__"),
-      },
       logLevel:
         CONFIG_LOG_LEVEL_INDEX > -1
           ? LOG_LEVELS[CONFIG_LOG_LEVEL_INDEX]

app/client/package.json

@@ -131,6 +131,7 @@
     "deep-diff": "^1.0.2",
     "downloadjs": "^1.4.7",
     "echarts": "^5.4.2",
+    "eslint-linter-browserify": "^9.15.0",
     "fast-deep-equal": "^3.1.3",
     "fast-sort": "^3.4.0",
     "fastdom": "^1.0.11",
@@ -276,7 +277,6 @@
     "@types/react-dom": "^17.0.2",
     "@types/react-google-recaptcha": "^2.1.1",
     "@types/react-helmet": "^5.0.14",
-    "@types/react-instantsearch-core": "^6.26.10",
     "@types/react-modal": "^3.13.1",
     "@types/react-redux": "^7.0.1",
     "@types/react-router-dom": "^5.1.2",

app/client/packages/design-system/widgets/src/components/Calendar/src/Calendar.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import type {
+  DateValue,
+  CalendarProps as HeadlessCalendarProps,
+} from "react-aria-components";
+import {
+  CalendarGrid as HeadlessCalendarGrid,
+  CalendarGridBody as HeadlessCalendarGridBody,
+  CalendarGridHeader as HeadlessCalendarGridHeader,
+  Calendar as HeadlessCalendar,
+} from "react-aria-components";
+import { Flex, IconButton } from "@appsmith/wds";
+
+import styles from "./styles.module.css";
+import { CalendarCell } from "./CalendarCell";
+import { CalendarHeading } from "./CalendarHeading";
+import { CalendarHeaderCell } from "./CalendarHeaderCell";
+
+type CalendarProps<T extends DateValue> = HeadlessCalendarProps<T>;
+
+export const Calendar = <T extends DateValue>(props: CalendarProps<T>) => {
+  return (
+    <HeadlessCalendar {...props} className={styles.calendar}>
+      <Flex alignItems="center" justifyContent="space-between" width="100%">
+        <IconButton icon="chevron-left" slot="previous" variant="ghost" />
+        <CalendarHeading size="subtitle" />
+        <IconButton icon="chevron-right" slot="next" variant="ghost" />
+      </Flex>
+      <HeadlessCalendarGrid>
+        <HeadlessCalendarGridHeader>
+          {(day) => <CalendarHeaderCell>{day}</CalendarHeaderCell>}
+        </HeadlessCalendarGridHeader>
+        <HeadlessCalendarGridBody>
+          {(date) => <CalendarCell date={date} />}
+        </HeadlessCalendarGridBody>
+      </HeadlessCalendarGrid>
+    </HeadlessCalendar>
+  );
+};

app/client/packages/design-system/widgets/src/components/Calendar/src/CalendarCell.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import { Text } from "@appsmith/wds";
+import {
+  CalendarCell as HeadlessCalendarCell,
+  type CalendarCellProps as HeadlessCalendarCellProps,
+} from "react-aria-components";
+
+import styles from "./styles.module.css";
+
+export type CalendarCellProps = HeadlessCalendarCellProps &
+  React.RefAttributes<HTMLTableCellElement>;
+
+function CalendarCell(props: CalendarCellProps) {
+  const { date } = props;
+
+  return (
+    <HeadlessCalendarCell {...props} className={styles["calendar-cell"]}>
+      <Text>{date.day}</Text>
+    </HeadlessCalendarCell>
+  );
+}
+
+export { CalendarCell };

app/client/packages/design-system/widgets/src/components/Calendar/src/CalendarHeaderCell.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import { Text } from "@appsmith/wds";
+import { CalendarHeaderCell as HeadlessCalendarHeaderCell } from "react-aria-components";
+
+import { type CalendarHeaderCellProps as HeadlessCalendarHeaderCellProps } from "react-aria-components";
+
+export type CalendarHeaderCellProps = HeadlessCalendarHeaderCellProps &
+  React.RefAttributes<HTMLTableCellElement>;
+
+function CalendarHeaderCell(props: CalendarHeaderCellProps) {
+  const { children } = props;
+
+  return (
+    <HeadlessCalendarHeaderCell {...props}>
+      <Text color="neutral" fontWeight={700} textAlign="center">
+        {children}
+      </Text>
+    </HeadlessCalendarHeaderCell>
+  );
+}
+
+export { CalendarHeaderCell };

app/client/packages/design-system/widgets/src/components/Calendar/src/CalendarHeading.tsx

@@ -0,0 +1,21 @@
+import { Text, type TextProps } from "@appsmith/wds";
+import React, { forwardRef, type ForwardedRef } from "react";
+import { HeadingContext, useContextProps } from "react-aria-components";
+
+function CalendarHeading(
+  props: TextProps,
+  ref: ForwardedRef<HTMLHeadingElement>,
+) {
+  [props, ref] = useContextProps(props, ref, HeadingContext);
+  const { children, ...domProps } = props;
+
+  return (
+    <Text {...domProps} color="neutral" ref={ref}>
+      {children}
+    </Text>
+  );
+}
+
+const _CalendarHeading = forwardRef(CalendarHeading);
+
+export { _CalendarHeading as CalendarHeading };

app/client/packages/design-system/widgets/src/components/Calendar/src/index.ts

@@ -0,0 +1,4 @@
+export { Calendar } from "./Calendar";
+export { CalendarCell } from "./CalendarCell";
+export { CalendarHeading } from "./CalendarHeading";
+export { CalendarHeaderCell } from "./CalendarHeaderCell";

app/client/packages/design-system/widgets/src/components/Calendar/src/styles.module.css

@@ -0,0 +1,66 @@
+.calendar {
+  padding: var(--outer-spacing-3);
+}
+
+.calendar table {
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+}
+
+.calendar thead tr {
+  display: flex;
+  justify-content: space-around;
+  padding-block-start: var(--inner-spacing-1);
+}
+
+.calendar tbody tr {
+  display: flex;
+  justify-content: space-between;
+}
+
+.calendar thead th {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: var(--sizing-9);
+  block-size: var(--sizing-9);
+}
+
+.calendar tbody td {
+  padding: var(--inner-spacing-1);
+}
+
+.calendar tbody [role="button"] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: var(--sizing-9);
+  block-size: var(--sizing-9);
+  border-radius: var(--border-radius-elevation-3);
+  border: var(--border-width-2) solid transparent;
+  text-align: center;
+}
+
+.calendar tbody [role="button"][data-disabled] {
+  opacity: var(--opacity-disabled);
+}
+
+.calendar tbody [role="button"][data-hovered] {
+  background-color: var(--color-bg-accent-subtle-hover);
+  cursor: pointer;
+}
+
+.calendar tbody [role="button"][data-pressed] {
+  background-color: var(--color-bg-accent-subtle-active);
+}
+
+.calendar tbody [role="button"][data-selected] {
+  background-color: var(--color-bg-accent);
+  color: var(--color-fg-on-accent);
+}
+
+.calendar tbody [role="button"][data-focus-visible] {
+  outline: var(--border-width-2) solid var(--color-bd-accent);
+  outline-offset: var(--border-width-2);
+}

app/client/packages/design-system/widgets/src/components/Calendar/stories/Calendar.stories.tsx

@@ -0,0 +1,52 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Calendar } from "../src";
+import { today, getLocalTimeZone } from "@internationalized/date";
+
+const meta: Meta<typeof Calendar> = {
+  component: Calendar,
+  title: "WDS/Widgets/Calendar",
+  parameters: {
+    docs: {
+      description: {
+        component: "A calendar component for date selection and display.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Calendar>;
+
+export const Default: Story = {
+  args: {
+    defaultValue: today(getLocalTimeZone()),
+  },
+};
+
+export const WithMinDate: Story = {
+  args: {
+    defaultValue: today(getLocalTimeZone()),
+    minValue: today(getLocalTimeZone()),
+  },
+};
+
+export const WithMaxDate: Story = {
+  args: {
+    defaultValue: today(getLocalTimeZone()),
+    maxValue: today(getLocalTimeZone()).add({ days: 10 }),
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    defaultValue: today(getLocalTimeZone()),
+    isDisabled: true,
+  },
+};
+
+export const ReadOnly: Story = {
+  args: {
+    defaultValue: today(getLocalTimeZone()),
+    isReadOnly: true,
+  },
+};

app/client/packages/design-system/widgets/src/components/Datepicker/index.ts

@@ -0,0 +1 @@
+export * from "./src";