@kwik/glass-cfg

Shared React component library for glass shower screen configuration.

Installation

``bash
npm install github:KwikGlassGreenacre/glass-configurator#main
`

Or add to package.json:

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

Styling

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

$3

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

$3

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

`css
/ 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 /
}
`

$3

| 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 |

$3

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

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

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

export default function RootLayout({ children }) {
return {children}
}
`

Quick Start

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

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

// Step 1: Select door mechanism
if (!doorMechanism) {
return
}

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

Available Exports

$3

`tsx
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'
`

$3

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

$3

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

$3

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

$3

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

$3

`tsx
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:

`json
{
"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:

`bash
npm update @kwik/glass-cfg
`

Or delete node_modules and reinstall:

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

License

UNLICENSED - Private package