@kwiknpm/glass-cfg

v0.2.5

Published

a day ago

Shared glass configurator components for shower screen configuration

0High
0Medium
0Low

kwikai

@kwik/glass-cfg

Shared React component library for glass shower screen configuration.

Installation

npm install github:KwikGlassGreenacre/glass-configurator#main

Or add to package.json:

{
  "dependencies": {
    "@kwik/glass-cfg": "github:KwikGlassGreenacre/glass-configurator#main"
  }
}

Styling

The package provides CSS variables that apps can override for custom theming.

Import Styles

/* In your app's globals.css */
@import '@kwik/glass-cfg/styles';

Override Variables

All theme variables are prefixed with --cfg- to avoid conflicts:

/* In your app's globals.css - after the import */
:root {
  --cfg-primary: 200 80% 40%;      /* Your brand color */
  --cfg-background: 0 0% 100%;     /* White background */
  --cfg-border: 220 13% 91%;       /* Border color */
}

Available Variables

| Variable | Default | Description | |----------|---------|-------------| | --cfg-primary | 173 58% 39% (teal) | Main brand color | | --cfg-background | 210 20% 98% | Page background | | --cfg-foreground | 222 47% 11% | Text color | | --cfg-card | 0 0% 100% | Card background | | --cfg-border | 214 32% 91% | Border color | | --cfg-muted | 210 20% 96% | Muted background | | --cfg-muted-foreground | 215 16% 47% | Muted text | | --cfg-destructive | 0 84% 60% | Error/danger color | | --cfg-success | 142 71% 45% | Success color | | --cfg-warning | 38 92% 50% | Warning color |

Fonts

The package does NOT include font imports. Use Next.js font optimization:

// app/layout.tsx
import { Plus_Jakarta_Sans } from 'next/font/google'

const jakarta = Plus_Jakarta_Sans({ subsets: ['latin'] })

export default function RootLayout({ children }) {
  return <html className={jakarta.className}>{children}</html>
}

Quick Start

import {
  DoorMechanismSelector,
  InlineCustomerInput,
  calculateInlineProduction,
  createDefaultCustomerInput,
  type DoorMechanism,
  type InlineCustomerInputType,
} from '@kwik/glass-cfg'

function ShowerConfigurator() {
  const [doorMechanism, setDoorMechanism] = useState<DoorMechanism | null>(null)
  const [customerInput, setCustomerInput] = useState(createDefaultCustomerInput())

  // Step 1: Select door mechanism
  if (!doorMechanism) {
    return <DoorMechanismSelector value={doorMechanism} onChange={setDoorMechanism} />
  }

  // Step 2: Enter measurements
  return (
    <InlineCustomerInput
      customerInput={customerInput}
      onChange={setCustomerInput}
      hingeSide="left"
      onHingeSideChange={() => {}}
      hardwareColour="chrome"
      onColourChange={() => {}}
    />
  )
}

Available Exports

Wizard Step Components

import {
  DoorMechanismSelector,  // Pivot/Sliding/Bifold
  FrameTypeSelector,      // Semi-framed/Framed/Frameless
  ShapeSelector,          // Wall-to-wall/L-shape/Splayed
  ConfigurationGrid,      // Visual config selection
} from '@kwik/glass-cfg'

Customer Input Components

import {
  InlineCustomerInput,      // Door + Panel
  DoorOnlyCustomerInput,    // Single door
  TwoPanelsCustomerInput,   // Door + Two panels
  CutoutCustomerInput,      // Over-bath/cutout
} from '@kwik/glass-cfg'

Production View Components

import {
  InlineProductionView,
  DoorOnlyProductionView,
  TwoPanelsProductionView,
  CutoutProductionView,
} from '@kwik/glass-cfg'

Calculation Functions

import {
  calculateInlineProduction,
  calculateDoorOnlyProduction,
  calculateTwoPanelsProduction,
  calculateCutoutShower,
  createDefaultCustomerInput,
  createDefaultDoorOnlyInput,
  createDefaultTwoPanelsInput,
  createDefaultCutoutInput,
} from '@kwik/glass-cfg'

Shared Components

import {
  MeasurementInput,
  MeasurementDisplay,
  HingeSideSelector,
  ColourSelector,
  FixtureSelector,
  DoorPanelSVG,
  DoglegPanelSVG,
  RunOutCircle,
  RunOutSummaryRow,
} from '@kwik/glass-cfg'

Types

import type {
  DoorMechanism,
  FrameType,
  ShapeType,
  HingeSide,
  CutoutSide,
  MVPHardwareColour,
  InlineCustomerInputType,
  DoorOnlyCustomerInputType,
  TwoPanelsCustomerInputType,
  CutoutCustomerInputType,
} from '@kwik/glass-cfg'

Supported Configurations

| Configuration | Description | |---------------|-------------| | Door + Panel | Standard inline with door and one fixed panel | | Door Only | Single pivot door | | Door + Two Panels | Door centered with panels on both sides | | Cutout Left | Door with L-shaped panel over bath (left) | | Cutout Right | Door with L-shaped panel over bath (right) |

Peer Dependencies

This package requires React 18 or 19:

{
  "peerDependencies": {
    "react": "^18.0.0 || ^19.0.0",
    "react-dom": "^18.0.0 || ^19.0.0"
  }
}

Updating

To get the latest version in your app:

npm update @kwik/glass-cfg

Or delete node_modules and reinstall:

rm -rf node_modules package-lock.json && npm install

License

UNLICENSED - Private package