willba-component-library 0.0.28 → 0.0.31

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "willba-component-library",
-  "version": "0.0.28",
+  "version": "0.0.31",
   "description": "A stroybook 6 with TypeScript demo",
   "main": "lib/index.js",
   "module": "lib/index.esm.js",
@@ -17,8 +17,8 @@
     "classnames": "^2.3.2"
   },
   "peerDependencies": {
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^25.0.3",
@@ -34,8 +34,8 @@
     "@storybook/testing-library": "^0.2.0",
     "@types/react": "^18.2.19",
     "postcss": "^8.4.27",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "rollup": "^3.28.0",
     "rollup-plugin-dts": "^5.3.1",
     "rollup-plugin-peer-deps-external": "^2.2.4",

package/rollup.config.mjs

@@ -1,59 +1,59 @@
-import peerDepsExternal from "rollup-plugin-peer-deps-external";
-import resolve from "@rollup/plugin-node-resolve";
-import commonjs from "@rollup/plugin-commonjs";
-import typescript from "@rollup/plugin-typescript";
-import postcss from "rollup-plugin-postcss";
-import dts from "rollup-plugin-dts";
-
-// This is required to read package.json file when
-// using Native ES modules in Node.js
-// https://rollupjs.org/command-line-interface/#importing-package-json
-import { createRequire } from "node:module";
-const requireFile = createRequire(import.meta.url);
-const packageJson = requireFile("./package.json");
-
-const globals = {
-  react: "React",
-  "react-dom": "ReactDOM",
-  "react-query": "ReactQuery",
-};
-
-export default [
-  {
-    input: "src/index.ts",
-    output: [
-      {
-        file: packageJson.main,
-        format: "cjs",
-        sourcemap: true,
-      },
-      {
-        file: packageJson.module,
-        format: "esm",
-        sourcemap: true,
-      },
-      {
-        name: "MyComponentLibrary",
-        file: `lib/index.umd.js`,
-        format: "umd",
-        sourcemap: true,
-        globals,
-      },
-    ],
-    plugins: [
-      peerDepsExternal(),
-      resolve(),
-      commonjs(),
-      typescript(),
-      postcss({
-        extensions: [".css"],
-      }),
-    ],
-  },
-  {
-    input: "lib/index.d.ts",
-    output: [{ file: "lib/index.d.ts", format: "es" }],
-    plugins: [dts()],
-    external: [/\.css$/],
-  },
-];
+import peerDepsExternal from "rollup-plugin-peer-deps-external";
+import resolve from "@rollup/plugin-node-resolve";
+import commonjs from "@rollup/plugin-commonjs";
+import typescript from "@rollup/plugin-typescript";
+import postcss from "rollup-plugin-postcss";
+import dts from "rollup-plugin-dts";
+
+// This is required to read package.json file when
+// using Native ES modules in Node.js
+// https://rollupjs.org/command-line-interface/#importing-package-json
+import { createRequire } from "node:module";
+const requireFile = createRequire(import.meta.url);
+const packageJson = requireFile("./package.json");
+
+const globals = {
+  react: "React",
+  "react-dom": "ReactDOM",
+  "react-query": "ReactQuery",
+};
+
+export default [
+  {
+    input: "src/index.ts",
+    output: [
+      {
+        file: packageJson.main,
+        format: "cjs",
+        sourcemap: true,
+      },
+      {
+        file: packageJson.module,
+        format: "esm",
+        sourcemap: true,
+      },
+      {
+        name: "WillbaComponentLibrary",
+        file: `lib/index.umd.js`,
+        format: "umd",
+        sourcemap: true,
+        globals,
+      },
+    ],
+    plugins: [
+      peerDepsExternal(),
+      resolve(),
+      commonjs(),
+      typescript(),
+      postcss({
+        extensions: [".css"],
+      }),
+    ],
+  },
+  {
+    input: "lib/index.d.ts",
+    output: [{ file: "lib/index.d.ts", format: "es" }],
+    plugins: [dts()],
+    external: [/\.css$/],
+  },
+];

package/src/components/Button/Button.stories.tsx

@@ -1,34 +1,34 @@
-import React from "react";
-import type { Meta, StoryObj } from "@storybook/react";
-import Button from "./Button";
-
-// Default metadata of the story https://storybook.js.org/docs/react/api/csf#default-export
-const meta: Meta<typeof Button> = {
-  title: "Components/Button",
-  component: Button,
-  argTypes: {
-    textColor: { control: "color" },
-    onClick: { action: "clicked" },
-  },
-};
-
-export default meta;
-
-// The story type for the component https://storybook.js.org/docs/react/api/csf#named-story-exports
-type Story = StoryObj<typeof Button>;
-
-export const Primary: Story = {
-  args: {
-    label: "Primary 😃",
-    size: "large",
-    type: "primary",
-  },
-};
-
-export const Secondary: Story = {
-  args: {
-    ...Primary.args,
-    type: "secondary",
-    label: "Secondary 😇",
-  },
-};
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import Button from "./Button";
+
+// Default metadata of the story https://storybook.js.org/docs/react/api/csf#default-export
+const meta: Meta<typeof Button> = {
+  title: "Components/Button",
+  component: Button,
+  argTypes: {
+    textColor: { control: "color" },
+    onClick: { action: "clicked" },
+  },
+};
+
+export default meta;
+
+// The story type for the component https://storybook.js.org/docs/react/api/csf#named-story-exports
+type Story = StoryObj<typeof Button>;
+
+export const Primary: Story = {
+  args: {
+    label: "Primary 😃",
+    size: "large",
+    type: "primary",
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    ...Primary.args,
+    type: "secondary",
+    label: "Secondary 😇",
+  },
+};

package/src/components/Button/Button.tsx

@@ -1,56 +1,56 @@
-import React, { useState } from "react";
-import classNames from "classnames";
-import "./button.css";
-
-export interface ButtonProps {
-  /**
-   * Is this the principal call to action on the page?
-   */
-  type?: "primary" | "secondary";
-  /**
-   * What background color to use
-   */
-  textColor?: string;
-  /**
-   * How large should the button be?
-   */
-  size?: "small" | "medium" | "large";
-  /**
-   * Button contents
-   */
-  label: string;
-  /**
-   * Optional click handler
-   */
-  onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
-}
-
-/**
- * Primary UI component for user interaction
- */
-const Button = ({
-  type = "primary",
-  textColor,
-  size = "medium",
-  onClick,
-  label,
-}: ButtonProps) => {
-  const [theState, setTheState] = useState(4);
-
-  return (
-    <button
-      type="button"
-      className={classNames(
-        "storybook-button",
-        `storybook-button--${size}`,
-        `storybook-button--${type}`
-      )}
-      style={textColor ? { color: textColor } : {}}
-      onClick={onClick}
-    >
-      {`${label} ${theState}`}
-    </button>
-  );
-};
-
-export default Button;
+import React, { useState } from "react";
+import classNames from "classnames";
+import "./button.css";
+
+export interface ButtonProps {
+  /**
+   * Is this the principal call to action on the page?
+   */
+  type?: "primary" | "secondary";
+  /**
+   * What background color to use
+   */
+  textColor?: string;
+  /**
+   * How large should the button be?
+   */
+  size?: "small" | "medium" | "large";
+  /**
+   * Button contents
+   */
+  label: string;
+  /**
+   * Optional click handler
+   */
+  onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+}
+
+/**
+ * Primary UI component for user interaction
+ */
+const Button = ({
+  type = "primary",
+  textColor,
+  size = "medium",
+  onClick,
+  label,
+}: ButtonProps) => {
+  const [theState, setTheState] = useState(4);
+
+  return (
+    <button
+      type="button"
+      className={classNames(
+        "storybook-button",
+        `storybook-button--${size}`,
+        `storybook-button--${type}`
+      )}
+      style={textColor ? { color: textColor } : {}}
+      onClick={onClick}
+    >
+      {`${label} ${theState}`}
+    </button>
+  );
+};
+
+export default Button;

package/src/components/Button/button.css

@@ -1,30 +1,30 @@
-.storybook-button {
-  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-  font-weight: 700;
-  border: 0;
-  border-radius: 3em;
-  cursor: pointer;
-  display: inline-block;
-  line-height: 1;
-}
-.storybook-button--primary {
-  color: white;
-  background-color: #1ea7fd;
-}
-.storybook-button--secondary {
-  color: #333;
-  background-color: transparent;
-  box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
-}
-.storybook-button--small {
-  font-size: 12px;
-  padding: 10px 16px;
-}
-.storybook-button--medium {
-  font-size: 14px;
-  padding: 11px 20px;
-}
-.storybook-button--large {
-  font-size: 16px;
-  padding: 12px 24px;
+.storybook-button {
+  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-weight: 700;
+  border: 0;
+  border-radius: 3em;
+  cursor: pointer;
+  display: inline-block;
+  line-height: 1;
+}
+.storybook-button--primary {
+  color: white;
+  background-color: #1ea7fd;
+}
+.storybook-button--secondary {
+  color: #333;
+  background-color: transparent;
+  box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
+}
+.storybook-button--small {
+  font-size: 12px;
+  padding: 10px 16px;
+}
+.storybook-button--medium {
+  font-size: 14px;
+  padding: 11px 20px;
+}
+.storybook-button--large {
+  font-size: 16px;
+  padding: 12px 24px;
 }

package/src/components/Button/index.ts

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

package/src/components/FilterBar/FilterBar.css

@@ -19,12 +19,12 @@
   z-index: 222;
   
   border-radius: 40px;
-  background-color: #ecf1f4;
+  background-color: #fff;
   box-shadow: 0px 6px 11px 0px #a7a4a480;
 }
 
 .search-widget-container {
-  background-color: #ecf1f4;
+  background-color: #fff;
   min-height: 100px;
  
   padding: 90px 40px 30px 40px;

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,4 +1,4 @@
-import Button from "./components/Button";
-import FilterBar from "./components/FilterBar";
-
-export { Button, FilterBar };
+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',
+  },
+};