willba-component-library 0.0.28 → 0.0.33

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "willba-component-library",
-  "version": "0.0.28",
+  "version": "0.0.33",
   "description": "A stroybook 6 with TypeScript demo",
   "main": "lib/index.js",
   "module": "lib/index.esm.js",
@@ -14,11 +14,13 @@
   "author": "Willba",
   "license": "MIT",
   "dependencies": {
-    "classnames": "^2.3.2"
+    "classnames": "^2.3.2",
+    "date-fns": "^2.30.0",
+    "react-day-picker": "^8.8.0"
   },
   "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 +36,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/prettier.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  arrowParens: 'always',
+  semi: false,
+  singleQuote: true,
+  trailingComma: 'es5',
+}

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

@@ -1,16 +1,10 @@
-/* Structure ---------------------------- */
-
-.root {
-  width: 100%;
-}
-
-.search-widget {
+.filter-bar {
   box-sizing: border-box;
   max-width: 1100px;
   position: relative;
 }
 
-.search-widget-header {
+.filter-bar-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -19,12 +13,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;
+.filter-bar-container {
+  background-color: #fff;
   min-height: 100px;
  
   padding: 90px 40px 30px 40px;
@@ -36,96 +30,8 @@
   box-shadow: 0px 6px 11px 0px #a7a4a480;
 }
 
-.search-widget-divider {
-  width: 1px;
-  margin: 0 10px;
-  height: 35px;
-  background-color: #384265;
-}
-
-.search-widget-submit-button {
-  width: auto;
-  height: auto;
-  background-color: #384265;
-  color: #fff;
-  padding: 10px 20px;
-  border-radius: 20px;
-  cursor: pointer;
-  border: none;
-}
-
-.search-widget-select-button {
-  width: auto;
-  height: auto;
-  background-color: transparent;
-  border: none;
-  padding: 10px 20px;
-  border-radius: 20px;
-  cursor: pointer;
-}
-
-/* Filters - Guests ---------------------------- */
-
-.search-widget-guests {
-  text-align: initial;
-}
 
-.guests-filter-container {
-  display: flex;
-  margin-top: 30px;
-}
 
-.guests-filter-inner {
-  display: flex;
-  align-items: center;
-}
 
-.guests-filter-inner:not(:last-child) {
-  margin-right: 50px;
-}
 
-.guests-filter-inner > span {
-  display: block;
-  margin-right: 20px;
-  font-weight: bold;
-}
-
-.guests-filter-inner > div {
-  display: flex;
-  align-items: center;
-}
-
-.guests-filter-inner > div > span {
-  margin: 0 10px;
-}
-
-.guests-filter-inner > div button {
-  border-radius: 50%;
-  border: none;
-  background-color: #CDEEFF;
-  width: 25px;
-  height: 25px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-size: 20px;
-}
-
-/* Filters - Categories ---------------------------- */
-
-.search-widget-categories {
-  text-align: center;
-}
-
-.categories-filter-inner {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 20px;
-}
-
-.categories-filter-inner input {
-  cursor: pointer;
-  margin-right: 10px;
-}
 

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 😃",
+  },
+};