willba-component-library 0.1.13 → 0.1.14

package/package.json

@@ -1,51 +1,51 @@
-{
-  "name": "willba-component-library",
-  "version": "0.1.13",
-  "description": "A stroybook 6 with TypeScript demo",
-  "main": "lib/index.js",
-  "module": "lib/index.esm.js",
-  "types": "lib/index.d.ts",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build",
-    "build": "rollup -c"
-  },
-  "author": "Willba",
-  "license": "MIT",
-  "dependencies": {
-    "@rollup/plugin-json": "^6.0.0",
-    "classnames": "^2.3.2",
-    "react-day-picker": "^8.8.0",
-    "react-i18next": "^13.1.2",
-    "react-icons": "^4.11.0",
-    "react-responsive": "^9.0.2"
-  },
-  "peerDependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
-  },
-  "devDependencies": {
-    "@rollup/plugin-commonjs": "^25.0.3",
-    "@rollup/plugin-node-resolve": "^15.1.0",
-    "@rollup/plugin-typescript": "^11.1.2",
-    "@storybook/addon-essentials": "^7.2.1",
-    "@storybook/addon-interactions": "^7.2.1",
-    "@storybook/addon-links": "^7.2.1",
-    "@storybook/addon-onboarding": "^1.0.8",
-    "@storybook/blocks": "^7.2.1",
-    "@storybook/react": "^7.2.1",
-    "@storybook/react-vite": "^7.2.1",
-    "@storybook/testing-library": "^0.2.0",
-    "@types/react": "^18.2.19",
-    "postcss": "^8.4.27",
-    "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",
-    "rollup-plugin-postcss": "^4.0.2",
-    "storybook": "^7.2.1",
-    "typescript": "^5.1.6"
-  }
-}
+{
+  "name": "willba-component-library",
+  "version": "0.1.14",
+  "description": "A stroybook 6 with TypeScript demo",
+  "main": "lib/index.js",
+  "module": "lib/index.esm.js",
+  "types": "lib/index.d.ts",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "build": "rollup -c"
+  },
+  "author": "Willba",
+  "license": "MIT",
+  "dependencies": {
+    "@rollup/plugin-json": "^6.0.0",
+    "classnames": "^2.3.2",
+    "react-day-picker": "^8.8.0",
+    "react-i18next": "^13.1.2",
+    "react-icons": "^4.11.0",
+    "react-responsive": "^9.0.2"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^25.0.3",
+    "@rollup/plugin-node-resolve": "^15.1.0",
+    "@rollup/plugin-typescript": "^11.1.2",
+    "@storybook/addon-essentials": "^7.2.1",
+    "@storybook/addon-interactions": "^7.2.1",
+    "@storybook/addon-links": "^7.2.1",
+    "@storybook/addon-onboarding": "^1.0.8",
+    "@storybook/blocks": "^7.2.1",
+    "@storybook/react": "^7.2.1",
+    "@storybook/react-vite": "^7.2.1",
+    "@storybook/testing-library": "^0.2.0",
+    "@types/react": "^18.2.19",
+    "postcss": "^8.4.27",
+    "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",
+    "rollup-plugin-postcss": "^4.0.2",
+    "storybook": "^7.2.1",
+    "typescript": "^5.1.6"
+  }
+}

package/prettier.config.js

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

package/rollup.config.mjs

@@ -1,61 +1,61 @@
-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'
-import json from '@rollup/plugin-json'
-
-// 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'],
-      }),
-      json(),
-    ],
-  },
-  {
-    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'
+import json from '@rollup/plugin-json'
+
+// 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'],
+      }),
+      json(),
+    ],
+  },
+  {
+    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,83 +1,83 @@
-.will-root {
-  z-index: 99999;
-  width: 100%;
-  max-height: 100vh;
-  position: relative;
- 
-}
-
-.will-filter-bar {
-  box-sizing: border-box;
-  position: relative;
-}
-
-.will-filter-bar-underlay {
-  background-color: rgba(0,0,0,.8);
-  position: absolute;
-  /* top:0; */
-  left: 0;
-  width: 100%;
-  height: 100%;
-  cursor: pointer;
-  min-height: 200vh;
-  z-index: 88888;
-
-  transform: translateY(-50%);
-}
-
-/* Header */
-.will-filter-bar-header {
-  display: flex;
-  justify-content: space-between;
-  padding: 10px 20px;
-  position: relative;
-  z-index: 222;
-  
-  
-  border-radius: 40px;
-  background-color: var(--will-white);
-  box-shadow: var(--will-box-shadow);
-}
-
-@media (max-width: 960px) {
-  .will-filter-bar-header {
-    flex-direction: column;
-    padding: 20px;
-  }
-}
-
-/* Container */
-
-.will-filter-bar-container {
-  background-color: var(--will-white);
-  min-height: 100px;
- 
-  padding: 90px 40px 30px 40px;
-  position: absolute;
-  top: 0;
-  z-index: 111;
-  border-radius: 25px;
-  width: -webkit-fill-available;
-  box-shadow: var(--will-box-shadow);
-}
-
-@media (max-width: 960px) {
-  .will-root {   
-    overflow-y: auto;
-    padding: 40px 10px;
-    top: 15px;
-    z-index: 0;
-  }
-
-  .will-filter-bar-container {
-    margin-top: 20px;
-    padding: 30px 40px;
-    position: relative;
-  }
-
-  .will-root.isMobileAbsolute {
-    position: relative;
-    z-index: 99999;
-  }
-}
-
+.will-root {
+  z-index: 99999;
+  width: 100%;
+  max-height: 100vh;
+  position: relative;
+ 
+}
+
+.will-filter-bar {
+  box-sizing: border-box;
+  position: relative;
+}
+
+.will-filter-bar-underlay {
+  background-color: rgba(0,0,0,.8);
+  position: absolute;
+  /* top:0; */
+  left: 0;
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+  min-height: 200vh;
+  z-index: 88888;
+
+  transform: translateY(-50%);
+}
+
+/* Header */
+.will-filter-bar-header {
+  display: flex;
+  justify-content: space-between;
+  padding: 10px 20px;
+  position: relative;
+  z-index: 222;
+  
+  
+  border-radius: 40px;
+  background-color: var(--will-white);
+  box-shadow: var(--will-box-shadow);
+}
+
+@media (max-width: 960px) {
+  .will-filter-bar-header {
+    flex-direction: column;
+    padding: 20px;
+  }
+}
+
+/* Container */
+
+.will-filter-bar-container {
+  background-color: var(--will-white);
+  min-height: 100px;
+ 
+  padding: 90px 40px 30px 40px;
+  position: absolute;
+  top: 0;
+  z-index: 111;
+  border-radius: 25px;
+  width: -webkit-fill-available;
+  box-shadow: var(--will-box-shadow);
+}
+
+@media (max-width: 960px) {
+  .will-root {   
+    overflow-y: auto;
+    padding: 40px 10px;
+    top: 15px;
+    z-index: 0;
+  }
+
+  .will-filter-bar-container {
+    margin-top: 20px;
+    padding: 30px 40px;
+    position: relative;
+  }
+
+  .will-root.isMobileAbsolute {
+    position: relative;
+    z-index: 99999;
+  }
+}
+