Merge pull request #3 from hotosm/controls

Add controls for all stories.

src/button/Button.stories.tsx

@@ -1,3 +1,18 @@
-import { Button } from "./Button.js";
+import { Button, ButtonProps } from "./Button.js";
+import { Story } from "@ladle/react";
 
-export const ButtonStory = () => <Button>Hello Button</Button>;
+export const ButtonStory: Story<ButtonProps> = (props) => <Button {...props} />;
+ButtonStory.argTypes = {
+  children: {
+    control: {
+      type: "text",
+    },
+    defaultValue: "Button",
+  },
+  disabled: {
+    control: {
+      type: "boolean",
+    },
+    defaultValue: false,
+  },
+};

src/button/Button.tsx

@@ -1,14 +1,18 @@
 import { cn } from "@/utils/merge.js";
 
-export interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {}
+export interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
+  disabled?: boolean;
+}
 
 export const Button = (props: ButtonProps) => {
   const { className, ...rest } = props;
 
   return (
     <button
       className={cn(
-        "bg-primary text-white py-3 px-6 rounded leading-[1.15]",
+        `bg-primary text-white py-3 px-6 rounded leading-[1.15] ${
+          props.disabled ? "opacity-50 cursor-not-allowed" : ""
+        }`,
         className,
       )}
       {...rest}

src/card/Card.stories.tsx

@@ -1,14 +1,41 @@
-import { Card } from "./Card.js";
+import { Card, CardProps } from "./Card.js";
+import { Story } from "@ladle/react";
 
-export const CardStory = () => (
+export const CardStory: Story<
+  CardProps & {
+    title: string;
+    body: string;
+    footer: string;
+  }
+> = (props) => (
   <Card>
-    <Card.CardTitle>Card Title</Card.CardTitle>
-    <Card.CardBody>
-      lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
-      voluptatum. lorem ipsum dolor sit amet consectetur adipisicing elit.
-      Quisquam, voluptatum. lorem ipsum dolor sit amet consectetur adipisicing
-      elit. Quisquam, voluptatum.
-    </Card.CardBody>
-    <Card.CardFooter>Card Footer</Card.CardFooter>
+    <Card.CardTitle>{props.title}</Card.CardTitle>
+    <Card.CardBody>{props.body}</Card.CardBody>
+    <Card.CardFooter>{props.footer}</Card.CardFooter>
   </Card>
 );
+
+CardStory.argTypes = {
+  title: {
+    control: {
+      type: "text",
+    },
+    defaultValue: "Card Title",
+  },
+  body: {
+    control: {
+      type: "text",
+    },
+    defaultValue:
+      "lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,\n" +
+      "voluptatum. lorem ipsum dolor sit amet consectetur adipisicing elit.\n" +
+      "Quisquam, voluptatum. lorem ipsum dolor sit amet consectetur adipisicing\n" +
+      "elit. Quisquam, voluptatum.",
+  },
+  footer: {
+    control: {
+      type: "text",
+    },
+    defaultValue: "Card Footer",
+  },
+};

src/card/Card.tsx

@@ -15,7 +15,8 @@ export const Card = (props: CardProps) => {
   );
 };
 
-interface CardTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {}
+export interface CardTitleProps
+  extends React.HTMLAttributes<HTMLHeadingElement> {}
 const CardTitle = (props: CardTitleProps) => {
   const { className, ...rest } = props;
 
@@ -28,7 +29,7 @@ const CardTitle = (props: CardTitleProps) => {
 
 Card.CardTitle = CardTitle;
 
-interface CardBodyProps extends React.HTMLAttributes<HTMLDivElement> {}
+export interface CardBodyProps extends React.HTMLAttributes<HTMLDivElement> {}
 const CardBody = (props: CardBodyProps) => {
   const { className, ...rest } = props;
 
@@ -41,7 +42,7 @@ const CardBody = (props: CardBodyProps) => {
 
 Card.CardBody = CardBody;
 
-interface CardFooterProps extends React.HTMLAttributes<HTMLDivElement> {}
+export interface CardFooterProps extends React.HTMLAttributes<HTMLDivElement> {}
 const CardFooter = (props: CardFooterProps) => {
   const { className, ...rest } = props;
 

src/dropdown/Dropdown.tsx

@@ -10,7 +10,8 @@ export const Dropdown = (props: DropdownProps) => {
   const { options, ...rest } = props;
 
   // Use destructuring to get the selected state and the setter function
-  const [selectedOption, setSelectedOption] = useState(options[0]);
+  // TODO: Finish component
+  const [_selectedOption, setSelectedOption] = useState(options[0]);
 
   return (
     <div className="relative">

tailwind.config.js

@@ -8,6 +8,7 @@ module.exports = {
       },
       colors: {
         primary: "#d73f3f",
+        secondary: "#2C3038",
       },
     },
   },

tsconfig.json

@@ -2,7 +2,7 @@
   "compilerOptions": {
     "outDir": "dist",
     "target": "es2020",
-    "lib": ["es2020"],
+    "lib": ["es2020", "DOM"],
     "baseUrl": ".",
     "paths": {
       "@/*": ["src/*"],