FeatureBaseOrg
import { FeatureBaseOrg } from '@feedback/portal/schemas/FeatureBaseOrg.schema'
Location
- FeatureBaseOrg.schema.ts
Zod Schema
What the schema would look like when defined with z.object()
in Zod V3:
const FeatureBaseOrg = z.object({
id: z
.string()
.describe("Customer's current organization ID, used to identify / display within FeatureBase"),
name: z
.string()
.describe("Customer's current organization name, used to identify / display within FeatureBase"),
monthlySpend: z
.number()
.optional()
.describe("Customer's current organization monthly spend, used for tracking"),
customFields: z
.record(z.string(), z.string())
.optional()
.describe("Customer's current organization custom fields, used for tracking"),
})
(💡 Could be handy to copy-paste this schema info into an AI chat assistant)
Type Definition
You can extract the TypeScript type from the schema using z.input()
, z.output()
or z.infer()
methods. e.g.:
type FeatureBaseOrg = z.input<typeof FeatureBaseOrg>
What the resulting TypeScript type would look like:
{
/** Customer's current organization ID, used to identify / display within FeatureBase */
id: string;
/** Customer's current organization name, used to identify / display within FeatureBase */
name: string;
/** Customer's current organization monthly spend, used for tracking */
monthlySpend?: number | undefined;
/** Customer's current organization custom fields, used for tracking */
customFields?: {
[x: string]: string;
} | undefined;
}
(💡 Could be handy to copy-paste this type info into an AI chat assistant)
Usage - Validation
To validate data against this schema, you have a few options:
// Throws if invalid
const featureBaseOrg = FeatureBaseOrg.parse(data)
// Returns { success: boolean, data?: T, error?: ZodError }
const featureBaseOrg = FeatureBaseOrg.safeParse(data)
This might be useful for parsing API input data or validating form data before submission.
You can also directly integrate this schema with form state managers like our own:
Usage - Form State
import { useFormState } from '@green-stack/forms/useFormState'
const formState = useFormState(FeatureBaseOrg, {
initialValues: { /* ... */ }, // Provide initial values?
validateOnMount: true, // Validate on component mount?
})
Learn more about using schemas for form state in our Form Management Docs.
Usage - Component Props / Docs
Another potential use case for the ‘FeatureBaseOrg’ schema is to type component props, provide default values and generate documentation for that component:
export const FeatureBaseOrgComponentProps = FeatureBaseOrg.extend({
// Add any additional props here
})
export type FeatureBaseOrgComponentProps = z.input<typeof FeatureBaseOrgComponentProps>
/* --- <FeatureBaseOrgComponent/> --------------- */
export const FeatureBaseOrgComponent = (rawProps: FeatureBaseOrgComponentProps) => {
// Extract the props and apply defaults + infer resulting type
const props = ComponentProps.applyDefaults(rawProps)
// ... rest of the component logic ...
}
/* --- Documentation --------------- */
export const documentationProps = FeatureBaseOrgComponentProps.documentationProps('FeatureBaseOrgComponent')
Other
Disclaimer - Automatic Docgen
These dynamic schema docs were auto-generated with npm run regenerate-docs
. This happens automatically for schema files in any \schemas\
folder. You can opt-out of this by adding // export const optOut = true
somewhere in the file.