Merge pull request #399 from dawaltconley/type-fixes

WIP: Type fixes

src/components/common/SplitbeeAnalytics.astro

@@ -3,4 +3,4 @@ const { doNotTrack = true, noCookieMode = false, url = 'https://cdn.splitbee.io/
 ---
 
 <!-- Splitbee Analytics -->
-<script data-respect-dnt={doNotTrack} data-no-cookie={noCookieMode} async src={url}></script>
+<script is:inline data-respect-dnt={doNotTrack} data-no-cookie={noCookieMode} async src={url}></script>

src/components/ui/Background.astro

@@ -1,4 +1,8 @@
 ---
+export interface Props {
+  isDark?: boolean
+}
+
 const { isDark = false } = Astro.props;
 ---
 

src/components/ui/Button.astro

@@ -1,7 +1,7 @@
 ---
 import { Icon } from 'astro-icon/components';
 import { twMerge } from 'tailwind-merge';
-import type { CallToAction } from '~/types';
+import type { CallToAction as Props } from '~/types';
 
 const {
   variant = 'secondary',
@@ -11,7 +11,7 @@ const {
   class: className = '',
   type,
   ...rest
-} = Astro.props as CallToAction;
+} = Astro.props;
 
 const variants = {
   primary: 'btn-primary',

src/components/ui/Form.astro

@@ -1,8 +1,8 @@
 ---
-import type { Form } from '~/types';
+import type { Form as Props } from '~/types';
 import Button from '~/components/ui/Button.astro';
 
-const { inputs, textarea, disclaimer, button = 'Contact us', description = '' } = Astro.props as Form;
+const { inputs, textarea, disclaimer, button = 'Contact us', description = '' } = Astro.props;
 ---
 
 <form>

src/components/ui/Headline.astro

@@ -1,5 +1,5 @@
 ---
-import type { Headline } from "~/types";
+import type { Headline as Props } from "~/types";
 import { twMerge } from "tailwind-merge";
 
 const {
@@ -7,7 +7,7 @@ const {
   subtitle = await Astro.slots.render("subtitle"),
   tagline,
   classes = {},
-} = Astro.props as Headline;
+} = Astro.props;
 
 const {
   container: containerClass = "max-w-3xl",

src/components/ui/ItemGrid.astro

@@ -1,10 +1,10 @@
 ---
+import type { ItemGrid as Props } from '~/types';
 import { twMerge } from 'tailwind-merge';
-import type { ItemGrid } from '~/types';
 import Button from './Button.astro';
 import { Icon } from 'astro-icon/components';
 
-const { items = [], columns, defaultIcon = '', classes = {} } = Astro.props as ItemGrid;
+const { items = [], columns, defaultIcon = '', classes = {} } = Astro.props;
 
 const {
   container: containerClass = '',

src/components/ui/ItemGrid2.astro

@@ -1,7 +1,7 @@
 ---
+import type { ItemGrid as Props } from "~/types";
 import { Icon } from "astro-icon/components";
 import { twMerge } from "tailwind-merge";
-import type { ItemGrid } from "~/types";
 import Button from "./Button.astro";
 
 const {
@@ -9,7 +9,7 @@ const {
   columns,
   defaultIcon = "",
   classes = {},
-} = Astro.props as ItemGrid;
+} = Astro.props;
 
 const {
   container: containerClass = "",

src/components/ui/WidgetWrapper.astro

@@ -1,7 +1,14 @@
 ---
+import type { HTMLTag } from "astro/types";
+import type { Widget } from "~/types";
 import { twMerge } from "tailwind-merge";
 import Background from "./Background.astro";
 
+export interface Props extends Widget {
+  containerClass?: string;
+  ["as"]?: HTMLTag;
+}
+
 const { id, isDark = false, containerClass = "", bg, as = "section" } = Astro.props;
 
 const WrapperTag = as;

src/components/widgets/Brands.astro

@@ -1,6 +1,6 @@
 ---
 import { Icon } from 'astro-icon/components';
-import type { Brands } from '~/types';
+import type { Brands as Props } from '~/types';
 import Headline from '~/components/ui/Headline.astro';
 import WidgetWrapper from '~/components/ui/WidgetWrapper.astro';
 const {
@@ -13,7 +13,7 @@ const {
   isDark = false,
   classes = {},
   bg = await Astro.slots.render('bg'),
-} = Astro.props as Brands;
+} = Astro.props;
 ---
 
 <WidgetWrapper id={id} isDark={isDark} containerClass={`max-w-6xl mx-auto ${classes?.container ?? ''}`} bg={bg}>

src/components/widgets/CallToAction.astro

@@ -2,7 +2,7 @@
 import WidgetWrapper from '../ui/WidgetWrapper.astro';
 import type { CallToAction, Widget } from '~/types';
 import Headline from '~/components/ui/Headline.astro';
-import Button from "~/components/ui/Button.astro"
+import Button from '~/components/ui/Button.astro';
 
 interface Props extends Widget {
   title?: string;
@@ -22,7 +22,7 @@ const {
   isDark = false,
   classes = {},
   bg = await Astro.slots.render('bg'),
-} = Astro.props as Props;
+} = Astro.props;
 ---
 
 <WidgetWrapper id={id} isDark={isDark} containerClass={`max-w-6xl mx-auto ${classes?.container ?? ''}`} bg={bg}>

src/components/widgets/Contact.astro

@@ -2,7 +2,7 @@
 import FormContainer from '~/components/ui/Form.astro';
 import Headline from '~/components/ui/Headline.astro';
 import WidgetWrapper from '~/components/ui/WidgetWrapper.astro';
-import type { Contact } from '~/types';
+import type { Contact as Props } from '~/types';
 
 const {
   title = await Astro.slots.render('title'),
@@ -18,7 +18,7 @@ const {
   isDark = false,
   classes = {},
   bg = await Astro.slots.render('bg'),
-} = Astro.props as Contact;
+} = Astro.props;
 ---
 
 <WidgetWrapper id={id} isDark={isDark} containerClass={`max-w-7xl mx-auto ${classes?.container ?? ''}`} bg={bg}>

src/components/widgets/Content.astro

@@ -1,5 +1,5 @@
 ---
-import type { Content } from '~/types';
+import type { Content as Props } from '~/types';
 import Headline from '../ui/Headline.astro';
 import WidgetWrapper from '../ui/WidgetWrapper.astro';
 import Image from '~/components/common/Image.astro';
@@ -22,7 +22,7 @@ const {
   isDark = false,
   classes = {},
   bg = await Astro.slots.render('bg'),
-} = Astro.props as Content;
+} = Astro.props;
 ---
 
 <WidgetWrapper

src/components/widgets/FAQs.astro

@@ -2,7 +2,7 @@
 import Headline from '~/components/ui/Headline.astro';
 import ItemGrid from '~/components/ui/ItemGrid.astro';
 import WidgetWrapper from '~/components/ui/WidgetWrapper.astro';
-import type { Faqs } from '~/types';
+import type { Faqs as Props } from '~/types';
 
 const {
   title = '',
@@ -15,7 +15,7 @@ const {
   isDark = false,
   classes = {},
   bg = await Astro.slots.render('bg'),
-} = Astro.props as Faqs;
+} = Astro.props;
 ---
 
 <WidgetWrapper id={id} isDark={isDark} containerClass={`max-w-7xl mx-auto ${classes?.container ?? ''}`} bg={bg}>

src/components/widgets/Features.astro

@@ -2,7 +2,7 @@
 import WidgetWrapper from "~/components/ui/WidgetWrapper.astro";
 import ItemGrid from "~/components/ui/ItemGrid.astro";
 import Headline from "~/components/ui/Headline.astro";
-import type { Features } from "~/types";
+import type { Features as Props } from "~/types";
 
 const {
   title = await Astro.slots.render("title"),
@@ -17,7 +17,7 @@ const {
   isDark = false,
   classes = {},
   bg = await Astro.slots.render("bg"),
-} = Astro.props as Features;
+} = Astro.props;
 ---
 
 <WidgetWrapper

src/components/widgets/Features2.astro

@@ -2,7 +2,7 @@
 import WidgetWrapper from "~/components/ui/WidgetWrapper.astro";
 import Headline from "~/components/ui/Headline.astro";
 import ItemGrid2 from "~/components/ui/ItemGrid2.astro";
-import type { Features } from "~/types";
+import type { Features as Props } from "~/types";
 
 const {
   title = await Astro.slots.render("title"),
@@ -16,7 +16,7 @@ const {
   isDark = false,
   classes = {},
   bg = await Astro.slots.render("bg"),
-} = Astro.props as Features;
+} = Astro.props;
 ---
 
 <WidgetWrapper

src/components/widgets/Features3.astro

@@ -3,7 +3,7 @@ import Headline from '~/components/ui/Headline.astro';
 import ItemGrid from '~/components/ui/ItemGrid.astro';
 import WidgetWrapper from '~/components/ui/WidgetWrapper.astro';
 import Image from '~/components/common/Image.astro';
-import type { Features } from '~/types';
+import type { Features as Props } from '~/types';
 
 const {
   title = await Astro.slots.render('title'),
@@ -20,7 +20,7 @@ const {
   isDark = false,
   classes = {},
   bg = await Astro.slots.render('bg'),
-} = Astro.props as Features;
+} = Astro.props;
 ---
 
 <WidgetWrapper

src/components/widgets/HeroText.astro

@@ -1,6 +1,16 @@
 ---
+import type { CallToAction } from '~/types';
 import Button from '~/components/ui/Button.astro';
 
+export interface Props {
+  title?: string;
+  subtitle?: string;
+  tagline?: string;
+  content?: string;
+  callToAction?: string | CallToAction;
+  callToAction2?: string | CallToAction;
+}
+
 const {
   title = await Astro.slots.render('title'),
   subtitle = await Astro.slots.render('subtitle'),

src/components/widgets/Pricing.astro

@@ -3,7 +3,7 @@ import { Icon } from 'astro-icon/components';
 import Button from '~/components/ui/Button.astro';
 import Headline from '~/components/ui/Headline.astro';
 import WidgetWrapper from '~/components/ui/WidgetWrapper.astro';
-import type { Pricing } from '~/types';
+import type { Pricing as Props } from '~/types';
 
 const {
   title = '',
@@ -15,7 +15,7 @@ const {
   isDark = false,
   classes = {},
   bg = await Astro.slots.render('bg'),
-} = Astro.props as Pricing;
+} = Astro.props;
 ---
 
 <WidgetWrapper id={id} isDark={isDark} containerClass={`max-w-7xl mx-auto ${classes?.container ?? ''}`} bg={bg}>

src/components/widgets/Stats.astro

@@ -1,5 +1,5 @@
 ---
-import type { Stats } from '~/types';
+import type { Stats as Props } from '~/types';
 import WidgetWrapper from '../ui/WidgetWrapper.astro';
 import Headline from '../ui/Headline.astro';
 import { Icon } from 'astro-icon/components';
@@ -14,7 +14,7 @@ const {
   isDark = false,
   classes = {},
   bg = await Astro.slots.render('bg'),
-} = Astro.props as Stats;
+} = Astro.props;
 ---
 
 <WidgetWrapper id={id} isDark={isDark} containerClass={`max-w-6xl mx-auto ${classes?.container ?? ''}`} bg={bg}>

src/components/widgets/Steps.astro

@@ -3,7 +3,7 @@ import WidgetWrapper from '~/components/ui/WidgetWrapper.astro';
 import Timeline from '~/components/ui/Timeline.astro';
 import Headline from '~/components/ui/Headline.astro';
 import Image from '~/components/common/Image.astro';
-import type { Steps } from '~/types';
+import type { Steps as Props } from '~/types';
 
 const {
   title = await Astro.slots.render('title'),
@@ -17,7 +17,7 @@ const {
   isDark = false,
   classes = {},
   bg = await Astro.slots.render('bg'),
-} = Astro.props as Steps;
+} = Astro.props;
 ---
 
 <WidgetWrapper id={id} isDark={isDark} containerClass={`max-w-5xl ${classes?.container ?? ''}`} bg={bg}>

src/components/widgets/Steps2.astro

@@ -3,7 +3,7 @@ import { Icon } from 'astro-icon/components';
 import WidgetWrapper from '~/components/ui/WidgetWrapper.astro';
 import Headline from '~/components/ui/Headline.astro';
 import Button from '~/components/ui/Button.astro';
-import type { Steps } from '~/types';
+import type { Steps as Props } from '~/types';
 
 const {
   title = await Astro.slots.render('title'),
@@ -17,7 +17,7 @@ const {
   isDark = false,
   classes = {},
   bg = await Astro.slots.render('bg'),
-} = Astro.props as Steps;
+} = Astro.props;
 ---
 
 <WidgetWrapper id={id} isDark={isDark} containerClass={`max-w-6xl mx-auto ${classes?.container ?? ''}`} bg={bg}>

src/components/widgets/Testimonials.astro

@@ -3,7 +3,7 @@ import Headline from '~/components/ui/Headline.astro';
 import WidgetWrapper from '~/components/ui/WidgetWrapper.astro';
 import Button from '~/components/ui/Button.astro';
 import Image from '~/components/common/Image.astro';
-import type { Testimonials } from '~/types';
+import type { Testimonials as Props } from '~/types';
 
 
 const {
@@ -17,7 +17,7 @@ const {
   isDark = false,
   classes = {},
   bg = await Astro.slots.render('bg'),
-} = Astro.props as Testimonials;
+} = Astro.props;
 ---
 
 <WidgetWrapper id={id} isDark={isDark} containerClass={`max-w-6xl mx-auto ${classes?.container ?? ''}`} bg={bg}>

src/types.d.ts

@@ -122,7 +122,7 @@ interface Social {
 }
 
 export interface Stat {
-  amount?: number;
+  amount?: number | string;
   title?: string;
   icon?: string;
 }
@@ -140,7 +140,7 @@ export interface Price {
   title?: string;
   subtitle?: string;
   description?: string;
-  price?: number;
+  price?: number | string;
   period?: string;
   items?: Array<Item>;
   callToAction?: CallToAction;
@@ -166,7 +166,7 @@ export interface Input {
 
 export interface Textarea {
   label?: string;
-  name: string;
+  name?: string;
   placeholder?: string;
   rows?: number;
 }
@@ -176,7 +176,7 @@ export interface Disclaimer {
 }
 
 // COMPONENTS
-export interface CallToAction extends HTMLAttributes<a> {
+export interface CallToAction extends Omit<HTMLAttributes<'a'>, 'slot'> {
   variant?: 'primary' | 'secondary' | 'tertiary' | 'link';
   text?: string;
   icon?: string;
@@ -241,8 +241,8 @@ export interface Brands extends Headline, Widget {
 export interface Features extends Headline, Widget {
   image?: string | unknown;
   video?: Video;
-  items: Array<Item>;
-  columns: number;
+  items?: Array<Item>;
+  columns?: number;
   defaultIcon?: string;
   callToAction1?: CallToAction;
   callToAction2?: CallToAction;