v3 - custom string input with character count

studio/components/StringInputWithCharacterCount.tsx

@@ -0,0 +1,26 @@
+import { Box, Stack, Text } from "@sanity/ui";
+import { StringInputProps } from "sanity";
+
+type StringInputWithCharacterCountProps = StringInputProps & {
+  maxCount?: number;
+};
+
+export const StringInputWithCharacterCount = ({
+  maxCount,
+  ...defaultProps
+}: StringInputWithCharacterCountProps) => {
+  const characterCount = defaultProps.value?.length ?? 0;
+  const isPlural =
+    (maxCount !== undefined && maxCount !== 1) ||
+    (maxCount === undefined && characterCount !== 1);
+
+  return (
+    <Stack space={3}>
+      <Box>{defaultProps.renderDefault(defaultProps)}</Box>
+      <Text size={1} muted>
+        {characterCount}
+        {maxCount && `/${maxCount}`} character{isPlural ? "s" : ""}
+      </Text>
+    </Stack>
+  );
+};

studio/schemas/builders/pageBuilder.ts

@@ -11,6 +11,7 @@ import testimonals from "../objects/sections/testimonials";
 import imageSection from "../objects/sections/image";
 import grid from "../objects/sections/grid";
 import contactForm from "../objects/sections/form";
+import { StringInputWithCharacterCount } from "../../components/StringInputWithCharacterCount";
 
 export const pageBuilderID = "pageBuilder";
 
@@ -25,7 +26,11 @@ const pageBuilder = defineType({
       description:
         "Enter a distinctive name for the dynamic page to help content editors easily identify and manage it. This name is used internally and is not visible on your website.",
       type: "string",
-      validation: (Rule) => Rule.required().max(30),
+      validation: (rule) => rule.required().max(30),
+      components: {
+        input: (props) =>
+          StringInputWithCharacterCount({ ...props, maxCount: 30 }),
+      },
     }),
     pageSlug,
     seo,

studio/schemas/documents/blog.ts

@@ -2,6 +2,7 @@ import { defineField, defineType } from "sanity";
 import seo from "../objects/seo";
 import { pageSlug } from "../schemaTypes/slug";
 import { title } from "../fields/text";
+import { StringInputWithCharacterCount } from "../../components/StringInputWithCharacterCount";
 
 export const blogId = "blog";
 
@@ -16,7 +17,11 @@ const blog = defineType({
       description:
         "Enter a distinctive name for the page to help content editors easily identify and manage it. This name is used internally and is not visible on your website.",
       type: "string",
-      validation: (Rule) => Rule.required().max(30),
+      validation: (rule) => rule.required().max(30),
+      components: {
+        input: (props) =>
+          StringInputWithCharacterCount({ ...props, maxCount: 30 }),
+      },
     }),
     pageSlug,
     seo,
@@ -28,7 +33,11 @@ const blog = defineType({
         "Enter the label used to refer to all posts regardless of their category. This label will be displayed in the filter section on the main blog page. Examples include 'news', 'stories', or 'posts'.",
       type: "string",
       initialValue: "All posts",
-      validation: (Rule) => Rule.required(),
+      validation: (rule) => rule.required().max(20),
+      components: {
+        input: (props) =>
+          StringInputWithCharacterCount({ ...props, maxCount: 20 }),
+      },
     }),
     defineField({
       name: "categories",
@@ -48,7 +57,11 @@ const blog = defineType({
               description:
                 "The name of the category. This will be displayed on the website and used for organizing blog posts.",
               type: "string",
-              validation: (Rule) => Rule.required().min(1).max(100),
+              validation: (rule) => rule.required().min(1).max(100),
+              components: {
+                input: (props) =>
+                  StringInputWithCharacterCount({ ...props, maxCount: 100 }),
+              },
             }),
           ],
         }),

studio/schemas/documents/companyInfo.ts

@@ -1,5 +1,6 @@
 import { defineType, defineField } from "sanity";
 import seo from "../objects/seo";
+import { StringInputWithCharacterCount } from "../../components/StringInputWithCharacterCount";
 
 export const companyInfoID = "companyInfo";
 
@@ -24,6 +25,11 @@ const companyInfo = defineType({
           type: "string",
           title: "Site Name",
           description: "The name of your website.",
+          validation: (rule) => rule.max(60),
+          components: {
+            input: (props) =>
+              StringInputWithCharacterCount({ ...props, maxCount: 60 }),
+          },
         }),
         defineField({
           name: "defaultLanguage",

studio/schemas/documents/companyLocation.ts

@@ -1,4 +1,5 @@
 import { defineField, defineType } from "sanity";
+import { StringInputWithCharacterCount } from "../../components/StringInputWithCharacterCount";
 
 export const companyLocationID = "companyLocation";
 export const companyLocationNameID = "companyLocationName";
@@ -13,6 +14,11 @@ const companyLocation = defineType({
       name: companyLocationNameID,
       type: "string",
       title: "Location",
+      validation: (rule) => rule.max(50),
+      components: {
+        input: (props) =>
+          StringInputWithCharacterCount({ ...props, maxCount: 50 }),
+      },
     }),
   ],
 });

studio/schemas/documents/navigationManager.ts

@@ -36,8 +36,8 @@ const navigationManager = defineType({
         "Add links to the main menu. These links will appear at the top of your website and help visitors navigate to important sections. The first Call to Action (CTA) will be styled as a primary link button. Note: The order in which you add the links here is how they will be displayed on the website.",
       type: "array",
       of: [{ type: linkID }, { type: callToActionFieldID }],
-      validation: (Rule) =>
-        Rule.custom((links) => {
+      validation: (rule) =>
+        rule.custom((links) => {
           if (!Array.isArray(links)) return true;
           const ctaCount = links.filter(
             (link) => link._type === callToActionFieldID,

studio/schemas/documents/post.ts

@@ -20,8 +20,8 @@ const posts = defineType({
       description: "Select the date and time when this post will be published.",
       type: "datetime",
       initialValue: () => new Date().toISOString(),
-      validation: (Rule) =>
-        Rule.required().custom((date, context) => {
+      validation: (rule) =>
+        rule.required().custom((date, context) => {
           // Ensure date is not undefined or null
           if (!date) return "The publish date is required.";
 
@@ -57,7 +57,7 @@ const posts = defineType({
       components: {
         input: CategorySelector,
       },
-      validation: (Rule) => Rule.required(),
+      validation: (rule) => rule.required(),
     }),
     defineField({
       name: "lead",
@@ -69,15 +69,15 @@ const posts = defineType({
         defineField({
           ...richText,
           description: "Enter the introductory text for the post.",
-          validation: (Rule) => Rule.required(),
+          validation: (rule) => rule.required(),
         }),
         defineField({
           ...image,
           description: "Upload a featured image for the post.",
-          validation: (Rule) => Rule.required(),
+          validation: (rule) => rule.required(),
         }),
       ],
-      validation: (Rule) => Rule.required(),
+      validation: (rule) => rule.required(),
     }),
     defineField({
       ...richText,

studio/schemas/fields/categories.ts

@@ -1,4 +1,5 @@
-import { defineField } from "sanity";
+import { defineField, StringInputProps } from "sanity";
+import { StringInputWithCharacterCount } from "../../components/StringInputWithCharacterCount";
 
 export const categoriesId = "categories";
 
@@ -11,7 +12,11 @@ const categories = defineField({
       name: "category",
       type: "string",
       title: "Category",
-      validation: (Rule) => Rule.required().min(1).max(100),
+      validation: (rule) => rule.required().min(1).max(100),
+      components: {
+        input: (props: StringInputProps) =>
+          StringInputWithCharacterCount({ ...props, maxCount: 100 }),
+      },
     },
   ],
 });

studio/schemas/fields/media.ts

@@ -1,4 +1,5 @@
-import { defineField } from "sanity";
+import { defineField, StringInputProps } from "sanity";
+import { StringInputWithCharacterCount } from "../../components/StringInputWithCharacterCount";
 
 export enum ImageAlignment {
   Left = "left",
@@ -15,20 +16,25 @@ const alignmentOptions = [
   { title: "Right", value: ImageAlignment.Right },
 ];
 
+const imageAltField = defineField({
+  name: "alt",
+  type: "string",
+  title: "Alternative Text",
+  description:
+    "Provide a description of the image for accessibility. Leave empty if the image is purely decorative.",
+  validation: (rule) => rule.max(100),
+  components: {
+    input: (props: StringInputProps) =>
+      StringInputWithCharacterCount({ ...props, maxCount: 100 }),
+  },
+});
+
 const image = defineField({
   name: "image",
   title: "Image",
   type: "image",
   options: { hotspot: true },
-  fields: [
-    {
-      name: "alt",
-      type: "string",
-      title: "Alternative Text",
-      description:
-        "Provide a description of the image for accessibility. Leave empty if the image is purely decorative.",
-    },
-  ],
+  fields: [imageAltField],
 });
 
 export const imageExtended = defineField({
@@ -37,13 +43,7 @@ export const imageExtended = defineField({
   type: "image",
   options: { hotspot: true },
   fields: [
-    {
-      name: "alt",
-      type: "string",
-      title: "Alternative Text",
-      description:
-        "Provide a description of the image for accessibility. Leave empty if the image is purely decorative.",
-    },
+    imageAltField,
     {
       name: "imageAlignment",
       title: "Image Alignment",

studio/schemas/fields/text.ts

@@ -1,4 +1,5 @@
 import { StringRule, defineField } from "sanity";
+import { StringInputWithCharacterCount } from "../../components/StringInputWithCharacterCount";
 
 enum titleID {
   basic = "basicTitle",
@@ -22,8 +23,8 @@ const createField = ({
   isRequired = false,
   maxLength = 60,
 }: CreateFieldProps) => {
-  const validationRules = (Rule: StringRule) => {
-    let rules = Rule.max(maxLength);
+  const validationRules = (rule: StringRule) => {
+    let rules = rule.max(maxLength);
     if (isRequired) {
       rules = rules.required();
     }
@@ -35,6 +36,10 @@ const createField = ({
     title,
     type: "string",
     validation: validationRules,
+    components: {
+      input: (props) =>
+        StringInputWithCharacterCount({ ...props, maxCount: maxLength }),
+    },
   });
 };
 
@@ -53,7 +58,10 @@ export const optionalSubtitle = defineField({
   name: subtitleID.optional,
   title: "Subtitle",
   type: "string",
-  validation: (Rule) => Rule.max(60),
+  validation: (rule) => rule.max(60),
+  components: {
+    input: (props) => StringInputWithCharacterCount({ ...props, maxCount: 60 }),
+  },
 });
 
 export const richTextID = "richText";

studio/schemas/objects/compensations/benefitsByLocation.ts

@@ -28,7 +28,7 @@ const benefitType = defineField({
     layout: BENEFIT_TYPES.length > 5 ? "dropdown" : "radio",
   },
   initialValue: BENEFIT_TYPE_BASIC_VALUE,
-  validation: (Rule) => Rule.required(),
+  validation: (rule) => rule.required(),
 });
 
 export const benefitsByLocation = defineField({
@@ -45,7 +45,7 @@ export const benefitsByLocation = defineField({
           ...location,
           description:
             "Select the office location for which you are entering benefits information. Each location must be unique.",
-          validation: (Rule) => Rule.required(),
+          validation: (rule) => rule.required(),
         },
         defineField({
           name: "benefits",
@@ -93,8 +93,8 @@ export const benefitsByLocation = defineField({
       },
     },
   ],
-  validation: (Rule) =>
-    Rule.custom((benefitsByLocation) => {
+  validation: (rule) =>
+    rule.custom((benefitsByLocation) => {
       const isNotDuplicate: boolean = checkForDuplicateLocations(
         benefitsByLocation as DocumentWithLocation[] | undefined,
       );

studio/schemas/objects/compensations/bonusesByLocation.ts

@@ -25,7 +25,7 @@ export const bonusesByLocation = defineField({
           ...location,
           description:
             "Select the company location for which you are entering the yearly bonus data. Each location must be unique.",
-          validation: (Rule) => Rule.required(),
+          validation: (rule) => rule.required(),
         },
         defineField({
           name: "yearlyBonuses",
@@ -43,16 +43,17 @@ export const bonusesByLocation = defineField({
                   description:
                     "The calendar year for which this bonus was given",
                   type: "number",
-                  validation: (Rule) => Rule.required(),
+                  validation: (rule) => rule.required(),
                 }),
                 defineField({
                   name: "bonus",
                   title: "Bonus",
                   description:
                     "Enter the bonus amount for this year. Ensure the amount is positive and reflective of the compensation package for this location.",
                   type: "number",
-                  validation: (Rule) =>
-                    Rule.required()
+                  validation: (rule) =>
+                    rule
+                      .required()
                       .min(0)
                       .error("Please enter a positive bonus amount."),
                 }),
@@ -95,8 +96,8 @@ export const bonusesByLocation = defineField({
       },
     }),
   ],
-  validation: (Rule) =>
-    Rule.custom((bonusesByLocation) => {
+  validation: (rule) =>
+    rule.custom((bonusesByLocation) => {
       const isNotDuplicate: boolean = checkForDuplicateLocations(
         bonusesByLocation as DocumentWithLocation[] | undefined,
       );

studio/schemas/objects/compensations/pension.ts

@@ -6,11 +6,12 @@ export const pension = defineField({
   type: "number",
   initialValue: 7,
   description: `Specify the percentage of the pension provided by Variant for employees. The value should be a positive number and will be used to calculate the pension amount.`,
-  validation: (Rule) => [
-    Rule.min(0)
+  validation: (rule) => [
+    rule
+      .min(0)
       .max(100)
       .error("The pension percentage must be a number between 0 and 100."),
-    Rule.custom((value, context) => {
+    rule.custom((value, context) => {
       if (
         context.document?.showSalaryCalculator &&
         (value === undefined || value === null)