# switchless

> A set of UI components that is often used by my personal projects and cashflowy.

Latest version **0.19.18** (published 2025-03-22) · 0 weekly downloads

## Install

```sh
npm install switchless
pnpm add switchless
yarn add switchless
bun add switchless
```

## Health

**Score 30/100 (F)** — status: maintenance-mode.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.19.18 |
| Published | 2025-03-22 |
| First published | 2024-07-30 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 8 |
| Unpacked size | 3 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | alexjv89, fahimansari |

## Links

- npm: https://www.npmjs.com/package/switchless
- npm.io page: https://npm.io/package/switchless

## Dependencies (8)

- [cypress](https://npm.io/package/cypress.md) ^13.17.0
- [@swc/core](https://npm.io/package/@swc/core.md) ^1.10.7
- [babel-loader](https://npm.io/package/babel-loader.md) ^9.2.1
- [@cypress/react](https://npm.io/package/@cypress/react.md) ^9.0.0
- [@babel/preset-env](https://npm.io/package/@babel/preset-env.md) ^7.26.0
- [react-json-pretty](https://npm.io/package/react-json-pretty.md) ^2.2.0
- [@babel/preset-react](https://npm.io/package/@babel/preset-react.md) ^7.26.3
- [@uiw/react-json-view](https://npm.io/package/@uiw/react-json-view.md) ^2.0.0-alpha.30

## Recent versions

- 0.19.18 (latest) — 2025-03-22
- 0.19.17 — 2025-03-15
- 0.19.16 — 2025-03-15
- 0.19.15 — 2025-03-15
- 0.19.14 — 2025-03-15
- 0.19.13 — 2025-03-15
- 0.19.12 — 2025-03-15
- 0.19.11 — 2025-03-15
- 0.19.10 — 2025-03-15
- 0.19.9 — 2025-03-15
- 0.19.8 — 2025-03-15
- 0.19.7 — 2025-03-10
- 0.19.6 — 2025-03-10
- 0.19.5 — 2025-03-10
- 0.20.2 — 2025-03-09
- … 69 more at https://npm.io/package/switchless/versions

## README

# Switchless

A set of UI components that is often used by my personal projects and cashflowy.

The story book is hosted on https://switchless.cashflowy.io

## Create new component to be exported via npm

- create the component in `src` folder
- create the stories for the component
- npm install - to update the packagelock version
- update index.js to export the component
- update version - in package.json
- Perform `npm run build`
- commit code to remote repo
- npm publish
- update Change Log

in the other repo

- npm cache clean --force // sometimes npm might not get the latest
- npm install switchless@0.3.2 // what ever version you need

## Create a new example reusable pattern
- create the component in `examples` folder  
- create stories for the component
- commit code


### Component Testing
- Write Cypress component tests with `.cy.jsx` extension
- Follow the pattern shown in existing components (e.g. CustomTab.cy.jsx)
- Run component tests with `npm run test`


### Best Practices
- Test component behavior, not implementation details
- Use meaningful test descriptions
- Keep tests focused and atomic
- Mock external dependencies appropriately
- Update tests when component behavior changes


## Maturity of each component

Every component that is in switchless has one of the following maturity
- planned - we have not build this yet. planning to build it.
- minimal - poc implemented
- viable - can be used internally, might be missing features, preferably dont expose to customer facing components
- complete - might be missing polish, but can be exposed in customer facing components
- lovable - has polish

#### Recommended usage of components at different maturity levels
| Maturity Level | Core features | Support features | Polish | Use for POC | Use for Internal components | Use in customer facing components | MUI JOY color level |
|----------|---------|---------|---------|-----|-----|-----|-----|
| Planned  | missing | missing | missing | N/A | N/A | N/A | N/A |
| Minimal  | present | missing | missing | Use | Avoid | Strictly Avoid | danger |
| Viable   | present | partial | missing | Use | Use | Avoid | warning |
| Complete | present | present | missing | Use | Use | Use | primary |
| Lovable  | present | present | present | Use | Use | Use | success |

---
_Source: https://npm.io/package/switchless · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._