@colabcommerce/elements 0.0.4 → 0.9.1

package/.yarnrc.yml

@@ -0,0 +1 @@
+yarnPath: .yarn/releases/yarn-4.12.0.cjs

package/README.md

@@ -1,70 +1,89 @@
-# Colab Elements
+# Colab Commerce Elements
 
-This is a bespoke version of Colab Commerce Elements customized for Palliser Furniture.
-
-The API is the same as the standard Colab Commerce elements.
+This library provides a set of foundational elements for customer facing Colab Commerce integrations. It supplies hooks and prebuilt elements.
 
 ## Installation
 
-You will need an NPM token to install.
+npm
 
-<pre>
-npm install @colabocmmerce/elements
-</pre>
+`npm install @colabcommerce/elements`
 
-or
+yarn
 
-<pre>
-yarn add @colabcommerce/lements
-</pre>
+`yarn add @colabcommerce/elements`
 
-## Store Locator
+## Top Level Components
 
-The store locator provides a drop in component to embed a store locator on any page.
+These components provide high level functionality and are prepackaged to get up and running as fast as possible.
+Each component is self contained and able to be placed anywhere on a page.
 
-## Usage
+### StoreLocator
 
-<pre>
-import StoreLocator from '@colabcommerce/elements/StoreLocator';
-import '@colabcommerce/elements/dist/index.css';
+The `StoreLocator` is an out of the box store locator tool. It can be placed anywhere on a page.
 
-<StoreLocator id={YOUR_CC_ORGANIZATION_ID} locale="en-US" root="/retailers" />
-</pre>
+#### Usage
 
-### Props
+```js
+import StoreLocator from '@colabcommerce/elements/StoreLocator'
+import '@colabcommerce/elements/elements.css'
 
-#### ID => `String`
+const MyStoreLocator = () => {
+  return <StoreLocator organizationId="YOUR_ORG_ID" locale="en" />
+}
+```
 
-The Colab Commerce Organization ID that retailers will be loaded for
+#### Props
 
-#### locale => `String`
+| Prop    | Type | Default |
+| --------------- | ------- | ------- |
+| organizationId  | String    | null
+| locale | String     | 'en'
 
-An ISO string representing the locale of the user.
+### StoreDetails
 
-#### root => `String`
+#### Usage
 
-The root path, this is necessary for the correct linking paths for the retailer pages.
+```js
+import Store from '@colabcommerce/elements/Store'
+import '@colabcommerce/elements/elements.css'
 
-## Retailer
+const MyStoreLocator = () => {
+  return <Store id="STORE_ID" locale="en" />
+}
+```
 
-The store locator provides a drop in component to embed a store locator on any page.
+#### Props
 
-## Usage
+| Prop    | Type | Default |
+| --------------- | ------- | ------- |
+| id  | String    | null
+| locale | String     | 'en'
 
-<pre>
-import Retailer from '@colabcommerce/elements/Retailer';
-import '@colabcommerce/elements/dist/index.css';
 
-<Retailer id={RETAILER_CC_ID} locale="en-US" />
-</pre>
+## Sub Components
 
-### Props
+These components are what the top level components are built on top of. You can use these individually but beware
+as some of these components may require a context provider to be used.
 
-#### ID => `String`
+## StoreLocatorProvider
 
-The Colab Commerce Organization ID that retailers will be loaded for
+The store locator provider is a context that provides a base store locator instance. Many of the `StoreLocator*` components depend on this
+context to be provided.
 
-#### locale => `String`
-
-An ISO string representing the locale of the user.
+### Props
 
+organizationID - The Colab org. to provide context for.
+locale - String for the locale that the element should display translations for
+baseUrl - Base url to build linking structure around
+children
+
+## TranslationsProvider
+resources: {
+        en: {
+          default: {
+            message: "Howdy",
+          }
+        }
+      }
+
+## Styling

package/cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

package/cypress/support/commands.js

@@ -0,0 +1,25 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })

package/cypress/support/component-index.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width,initial-scale=1.0">
+  <title>Components App</title>
+</head>
+
+<body>
+  <div data-cy-root class="cc"></div>
+</body>
+
+</html>

package/cypress/support/component.js

@@ -0,0 +1,26 @@
+// ***********************************************************
+// This example support/component.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+import { mount } from 'cypress/react'
+
+import '@fontsource/plus-jakarta-sans/latin.css'
+import '@/index.css'
+Cypress.Commands.add('mount', mount)
+
+// Example use:
+// cy.mount(<MyComponent />)

package/cypress.config.js

@@ -0,0 +1,10 @@
+import { defineConfig } from "cypress";
+
+export default defineConfig({
+  component: {
+    devServer: {
+      framework: "react",
+      bundler: "vite",
+    },
+  },
+});

package/eslint.config.js

@@ -0,0 +1,32 @@
+// For more info, see https://github.com/storybookjs/eslint-plugin-storybook#configuration-flat-config-format
+import storybook from "eslint-plugin-storybook";
+
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{js,jsx}'],
+    extends: [
+      js.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+      parserOptions: {
+        ecmaVersion: 'latest',
+        ecmaFeatures: { jsx: true },
+        sourceType: 'module',
+      },
+    },
+    rules: {
+      'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
+    },
+  },
+])

package/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>elements</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

package/package.json

@@ -1,82 +1,106 @@
 {
   "name": "@colabcommerce/elements",
-  "version": "0.0.4",
   "license": "UNLICENSED",
+  "version": "0.9.1",
   "type": "module",
-  "exports": {
-    "./Retailer": "./dist/Retailer.js",
-    "./StoreLocator": "./dist/StoreLocator.js",
-    "./ProductForm": "./dist/ProductForm.js",
-    "./CartForm": "./dist/CartForm.js",
-    "./dist/*.css": "./dist/*.css"
-  },
-  "files": [
-    "dist"
-  ],
-  "sideEffects": [
-    "*.css"
-  ],
   "scripts": {
+    "dev": "vite",
+    "playground": "vite ./playground -c vite.config.js",
     "build": "vite build",
-    "build:dev": "vite build --mode development",
-    "build:debug": "DEBUG=vite:* vite build",
-    "dev:storeLocator": "vite ./playground/StoreLocator -c vite.config.js",
-    "dev:retailer": "vite ./playground/Retailer -c vite.config.js",
-    "dev:cartForm": "vite ./playground/CartForm -c vite.config.js",
-    "dev:productForm": "DEBUG=vite:* vite ./playground/ProductForm -c vite.config.js",
+    "lint": "eslint .",
+    "preview": "vite preview",
     "test": "vitest",
-    "e2e": "cypress open"
+    "cypress:open": "cypress open",
+    "cypress:run": "cypress run",
+    "i18n:pull": "i18nexus pull -k _oBNcssuWEgjubWZE9ZWsQ -p src/locales"
+  },
+  "exports": {
+    "./QuoteForm": "./dist/QuoteForm.js",
+    "./StoreLocator": "./dist/StoreLocator.js",
+    "./Store": "./dist/Store.js",
+    "./*.css": "./dist/*.css"
   },
   "peerDependencies": {
-    "react": ">=18",
-    "react-dom": ">=18"
+    "@radix-ui/react-collapsible": "^1.1.0",
+    "@radix-ui/react-popover": "^1.1.0",
+    "@radix-ui/react-scroll-area": "^1.2.0",
+    "@radix-ui/react-slot": "^1.2.0",
+    "i18next": "^25.0.0",
+    "luide-react": "^0.560.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-i18next": "^16.0.0",
+    "tw-animate-css": "^1.0.0"
   },
-  "devDependencies": {
-    "@csstools/postcss-sass": "^5.1.1",
-    "@vitejs/plugin-react": "^4",
-    "autoprefixer": "^10",
-    "cypress": "^15.4.0",
-    "cypress-vite": "^1.8.0",
-    "dotenv": "^17.2.2",
-    "fast-glob": "^3.3.3",
-    "postcss": "^8",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
-    "rollup-plugin-postcss": "^4",
-    "sass": "^1",
-    "typescript": "^5",
-    "vite": "^5",
-    "vite-plugin-dts": "^4",
-    "vite-plugin-i18next-loader": "^3.1.2",
-    "vitest": "^3.2.4"
+  "peerDependenciesMeta": {
+    "i18next": {
+      "optional": true
+    },
+    "react-i18next": {
+      "optional": true
+    }
   },
   "dependencies": {
-    "@date-fns/tz": "^1.4.1",
-    "@tailwindcss/vite": "^4.1.14",
-    "@vis.gl/react-google-maps": "^1.5.5",
-    "bootstrap": "^5.3.8",
-    "formik": "^2.4.6",
-    "i18next": "^25.4.2",
-    "i18next-fetch-backend": "^6.0.0",
-    "i18next-http-backend": "^3.0.2",
-    "lucide-react": "^0.542.0",
-    "qs": "^6.14.0",
-    "react-bootstrap": "^2.10.10",
+    "@fontsource/plus-jakarta-sans": "^5.2.8",
+    "@rudderstack/analytics-js": "^3.26.0",
+    "@vis.gl/react-google-maps": "^1.7.1",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "formik": "^2.4.9",
+    "libphonenumber-js": "^1.12.33",
     "react-geocode": "^2.0.1",
-    "react-geolocated": "^4.3.0",
-    "react-i18next": "^15.7.3",
-    "react-icons": "^5.5.0",
-    "react-loading-skeleton": "^3.5.0",
-    "react-slick": "^0.31.0",
-    "react-toggle": "^4.1.3",
-    "slick-carousel": "^1.8.1",
-    "swiper": "^11.2.10",
-    "swr": "^2.3.6",
-    "tailwindcss": "^4.1.14",
-    "vite-plugin-sass": "^0.1.0",
-    "yup": "^1.7.0"
+    "react-geolocated": "^4.4.0",
+    "react-google-autocomplete": "^2.7.5",
+    "react-phone-number-input": "^3.4.14",
+    "react-places-autocomplete": "^7.3.0",
+    "tailwind-merge": "^3.4.0",
+    "yup": "^1.7.1"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@radix-ui/react-collapsible": "^1.1.12",
+    "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-scroll-area": "^1.2.10",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@tailwindcss/vite": "^4.1.18",
+    "@types/react": "^19.2.5",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.1",
+    "@vitest/browser-playwright": "^4.0.16",
+    "@vitest/coverage-v8": "^4.0.16",
+    "autoprefixer": "^10.4.23",
+    "babel-plugin-react-compiler": "^1.0.0",
+    "cypress": "^15.8.1",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^16.5.0",
+    "i18next": "^25.7.4",
+    "i18nexus-cli": "^3.8.2",
+    "lucide-react": "^0.562.0",
+    "playwright": "^1.57.0",
+    "postcss": "^8.5.6",
+    "prop-types": "^15.8.1",
+    "radix-ui": "^1.4.3",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-i18next": "^16.5.1",
+    "tailwindcss": "^4.1.18",
+    "terser": "^5.44.1",
+    "tw-animate-css": "^1.4.0",
+    "vite": "^7.2.4",
+    "vitest": "^4.0.16"
+  },
+  "packageManager": "yarn@4.12.0",
+  "description": "This library provides a set of foundational elements for customer facing Colab Commerce integrations. It supplies hooks and prebuilt elements.",
+  "main": "cypress.config.js",
+  "author": "colabcommerce",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/TruRooms/elements.git"
+  },
+  "bugs": {
+    "url": "https://github.com/TruRooms/elements/issues"
   },
-  "description": "",
-  "main": "vite.config.js",
-  "author": "colabcommerce"
+  "homepage": "https://github.com/TruRooms/elements#readme"
 }

package/playground/index.html

@@ -0,0 +1,14 @@
+<html style="font-size: 10px;">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width,initial-scale=1" />
+  <title>Playground</title>
+</head>
+
+<body>
+  <div id="root"></div>
+  <script type="module" src="/main.jsx"></script>
+</body>
+
+</html>

package/playground/main.jsx

@@ -0,0 +1,36 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import CartForm from "../../src/components/CartForm"; // import from source, not dist
+
+ReactDOM.createRoot(document.getElementById("root")).render(
+  <React.StrictMode>
+    <CartForm
+      id="b594100c-7a81-4114-a2fe-043ce7e69ae9"
+      products={[
+        {
+          "collection_id": "41080",
+          "options": [
+            {
+              "key": "Configuration",
+              "value": "41080-67/10/09/60/66"
+            },
+            {
+              "key": "Cover",
+              "value": "Classic Buff"
+            },
+            {
+              "key": "Category"
+            },
+            {
+              "key": "Quantity",
+              "value": 1
+            }
+          ],
+          "name": "Acacia",
+          "url": "https://www.palliser.com/acacia-41080-09",
+          "image": "https://www.palliser.com/media/catalog/product/a/c/acacia_sectionals_67_6h_09_10_66_41080_front_angle_plp.jpg"
+        }
+      ]}
+      locale="en-US" />
+  </React.StrictMode>
+);

package/public/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/src/App.jsx

@@ -0,0 +1,65 @@
+import { useState } from 'react'
+import { Button } from '@/components/ui/Button'
+import StoreLocatorSearch from './components/StoreLocatorSearch'
+import StoreLocatorMap from './components/StoreLocatorMap'
+import Input from '@/components/ui/Input'
+import useGeolocation from '@/lib/useGeolocation'
+import StoreList from './components/StoreList'
+import useSearchResults from '@/lib/useSearchResults'
+import { APIProvider } from '@vis.gl/react-google-maps'
+import StoreInfo from '@/components/StoreInfo'
+import StoreContact from '@/components/StoreContact'
+import Store from '@/components/Store'
+import StoreLocator from '@/components/StoreLocator'
+import QuoteForm from '@/components/QuoteForm'
+import '@fontsource/plus-jakarta-sans/latin.css'
+import './App.css'
+
+function App() {
+  const [showQuoteForm, setShowQuoteForm] = useState(true)
+
+  const products = [{
+    name: 'Juno',
+    sku: 'juno',
+    quantity: 2
+  },
+  {
+    name: 'Braxton',
+    sku: 'braxton',
+    quantity: 1
+  }
+  ]
+
+  const handleClose = () => {
+    console.log('Quote form closed')
+    // Super hack, hide the form after close to simulate unmount
+    setShowQuoteForm(false)
+    // Timeout to show the form again
+    setTimeout(() => {
+      setShowQuoteForm(true)
+    }, 2000)
+  }
+
+  const handleSuccess = (values) => {
+    console.log('Quote form submitted successfully with values:', values)
+  }
+
+  return (
+    <div className="cc">
+      {/* <StoreLocator organizationId="d58bcec2-0769-48ba-9c82-a234dcdc7073" locale="fr" /> */}
+      {/* <Store storeId="d10ede1f-0f2f-45e2-94d1-c5b387365302" /> */}
+      <div style={{ maxWidth: '600px', height: '100vh', margin: '0 auto' }}>
+        {showQuoteForm &&
+          <QuoteForm
+            organizationId="4f155976-8631-445a-b1b7-c8ccac28cca1"
+            products={products}
+            onClose={handleClose}
+            onSuccess={handleSuccess}
+          />
+        }
+      </div>
+    </div>
+  )
+}
+
+export default App