willba-component-library 0.0.27 → 0.0.31

package/src/components/FilterBar/FilterBar.stories.tsx

@@ -1,20 +1,20 @@
-import React from "react";
-import type { Meta, StoryObj } from "@storybook/react";
-import FilterBar from "./FilterBar";
-
-// Default metadata of the story https://storybook.js.org/docs/react/api/csf#default-export
-const meta: Meta<typeof FilterBar> = {
-  title: "Components/FilterBar",
-  component: FilterBar,
-};
-
-export default meta;
-
-// The story type for the component https://storybook.js.org/docs/react/api/csf#named-story-exports
-type Story = StoryObj<typeof FilterBar>;
-
-export const Primary: Story = {
-  args: {
-    label: "Primary 😃",
-  },
-};
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import FilterBar from "./FilterBar";
+
+// Default metadata of the story https://storybook.js.org/docs/react/api/csf#default-export
+const meta: Meta<typeof FilterBar> = {
+  title: "Components/FilterBar",
+  component: FilterBar,
+};
+
+export default meta;
+
+// The story type for the component https://storybook.js.org/docs/react/api/csf#named-story-exports
+type Story = StoryObj<typeof FilterBar>;
+
+export const Primary: Story = {
+  args: {
+    label: "Primary 😃",
+  },
+};

package/src/components/FilterBar/FilterBar.tsx

@@ -1,11 +1,16 @@
 import React, { useState } from "react";
+
+import Divider from "./components/Divider";
+import SelectButton from "./components/SelectButton";
+import SubmitButton from "./components/SubmitButton";
+
 import "./FilterBar.css";
 
 export default function FilterBar() {
   const [selectedFilter, setSelectedFilter] = useState<number | boolean>(false);
   // const [startDate, setStartDate] = useState(0);
   // const [endDate, setEndDate] = useState(0);
-  const [guestsAdults, setGuestsAdults] = useState(0);
+  const [guestsAdults, setGuestsAdults] = useState(1);
   const [guestsKids, setGuestsKids] = useState(0);
   const [categories, setCategories] = useState(0);
 
@@ -80,26 +85,6 @@ export default function FilterBar() {
   );
 }
 
-const Divider = () => {
-  return <div className="search-widget-divider" />;
-};
-
-const SubmitButton = ({ onClick }: any) => {
-  return (
-    <button className="search-widget-submit-button" onClick={onClick}>
-      Apply filters
-    </button>
-  );
-};
-
-const SelectButton = ({ label, onClick }: any) => {
-  return (
-    <button className="search-widget-select-button" onClick={onClick}>
-      {label}
-    </button>
-  );
-};
-
 const StartDate = () => {
   return <div>Start date</div>;
 };

package/src/components/FilterBar/components/Callendar.tsx

@@ -0,0 +1,5 @@
+import React from "react";
+
+export default function Calendar() {
+  return <div>calendar</div>;
+}

package/src/components/FilterBar/components/Divider.tsx

@@ -0,0 +1,5 @@
+import React from "react";
+
+export default function Divider() {
+  return <div className="search-widget-divider" />;
+}

package/src/components/FilterBar/components/SelectButton.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+
+export default function SelectButton({ label, onClick }: any) {
+  return (
+    <button className="search-widget-select-button" onClick={onClick}>
+      {label}
+    </button>
+  );
+}

package/src/components/FilterBar/components/SubmitButton.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+
+export default function SubmitButton({ onClick }: any) {
+  return (
+    <button className="search-widget-submit-button" onClick={onClick}>
+      Apply filters
+    </button>
+  );
+}

package/src/components/FilterBar/index.ts

@@ -1 +1 @@
-export { default } from "./FilterBar";
+export { default } from "./FilterBar";

package/src/index.ts

@@ -1,3 +1,4 @@
-import Button from "./components/Button";
-
-export { Button };
+import Button from "./components/Button";
+import FilterBar from "./components/FilterBar";
+
+export { Button, FilterBar };

package/stories/Button.stories.ts

@@ -1,50 +1,50 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { Button } from './Button';
-
-// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-const meta = {
-  title: 'Example/Button',
-  component: Button,
-  parameters: {
-    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
-    layout: 'centered',
-  },
-  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
-  tags: ['autodocs'],
-  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
-  argTypes: {
-    backgroundColor: { control: 'color' },
-  },
-} satisfies Meta<typeof Button>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
-export const Primary: Story = {
-  args: {
-    primary: true,
-    label: 'Button',
-  },
-};
-
-export const Secondary: Story = {
-  args: {
-    label: 'Button',
-  },
-};
-
-export const Large: Story = {
-  args: {
-    size: 'large',
-    label: 'Button',
-  },
-};
-
-export const Small: Story = {
-  args: {
-    size: 'small',
-    label: 'Button',
-  },
-};
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Button } from './Button';
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+const meta = {
+  title: 'Example/Button',
+  component: Button,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
+    layout: 'centered',
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
+  tags: ['autodocs'],
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+export const Primary: Story = {
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    label: 'Button',
+  },
+};
+
+export const Large: Story = {
+  args: {
+    size: 'large',
+    label: 'Button',
+  },
+};
+
+export const Small: Story = {
+  args: {
+    size: 'small',
+    label: 'Button',
+  },
+};

package/stories/Button.tsx

@@ -1,48 +1,48 @@
-import React from 'react';
-import './button.css';
-
-interface ButtonProps {
-  /**
-   * Is this the principal call to action on the page?
-   */
-  primary?: boolean;
-  /**
-   * What background color to use
-   */
-  backgroundColor?: string;
-  /**
-   * How large should the button be?
-   */
-  size?: 'small' | 'medium' | 'large';
-  /**
-   * Button contents
-   */
-  label: string;
-  /**
-   * Optional click handler
-   */
-  onClick?: () => void;
-}
-
-/**
- * Primary UI component for user interaction
- */
-export const Button = ({
-  primary = false,
-  size = 'medium',
-  backgroundColor,
-  label,
-  ...props
-}: ButtonProps) => {
-  const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
-  return (
-    <button
-      type="button"
-      className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
-      style={{ backgroundColor }}
-      {...props}
-    >
-      {label}
-    </button>
-  );
-};
+import React from 'react';
+import './button.css';
+
+interface ButtonProps {
+  /**
+   * Is this the principal call to action on the page?
+   */
+  primary?: boolean;
+  /**
+   * What background color to use
+   */
+  backgroundColor?: string;
+  /**
+   * How large should the button be?
+   */
+  size?: 'small' | 'medium' | 'large';
+  /**
+   * Button contents
+   */
+  label: string;
+  /**
+   * Optional click handler
+   */
+  onClick?: () => void;
+}
+
+/**
+ * Primary UI component for user interaction
+ */
+export const Button = ({
+  primary = false,
+  size = 'medium',
+  backgroundColor,
+  label,
+  ...props
+}: ButtonProps) => {
+  const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
+  return (
+    <button
+      type="button"
+      className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
+      style={{ backgroundColor }}
+      {...props}
+    >
+      {label}
+    </button>
+  );
+};