CRM Dance Studio Kit

Shared CRM Dance components. Right now it ships the ProviderCredit attribution block used across client sites; future shared UI, analytics helpers, or scripts will also live here so every project stays in sync.

Installation

npm install @crm-dance/studio-kit
# or
pnpm add @crm-dance/studio-kit

Usage (ProviderCredit)

import { ProviderCredit, CRM_DANCE_PROVIDER } from "@crm-dance/studio-kit"

export function Footer() {
  return (
    <footer>
      {/* existing footer */}
      <ProviderCredit />
    </footer>
  )
}

Override copy, tracking, or palette as needed while reusing the shared metadata:

const PROVIDER_COLORS = {
  panel: "#1F1B24",
  border: "rgba(181, 164, 106, 0.2)",
  ink: "#F7F1E8",
  inkSoft: "#D8CDB6",
  ctaBorder: "rgba(181, 164, 106, 0.4)",
  ctaHover: "rgba(181, 164, 106, 0.12)",
}

<ProviderCredit
  providerName={CRM_DANCE_PROVIDER.name}
  logoSrc={CRM_DANCE_PROVIDER.logoSrc}
  href={`${CRM_DANCE_PROVIDER.url}/?utm_source=my-site&utm_medium=footer`}
  description="Custom positioning statement"
  visitLabel="Meet CRM Dance"
  colors={PROVIDER_COLORS}
/>

Color system

colors maps to CSS variables so each client can blend the block with their footer.

| Prop | CSS var | Purpose | | --- | --- | --- | | panel | --crm-panel | Block background | | border | --crm-border | Top separator line | | ink | --crm-ink | Headline/CTA text | | inkSoft | --crm-ink-soft | Body text & eyebrow | | ctaBorder | --crm-cta-border | CTA outline | | ctaHover | --crm-cta-hover | CTA hover background |

Defaults are pure white/black so the block looks acceptable without overrides. Magic of Dance and Chevy Chase Ballroom both pass custom palettes (see those repos for examples).

Development

pnpm install
pnpm lint
pnpm typecheck
pnpm build

You can also pnpm dev --filter=<client> after linking, but in practice we release new versions quickly instead of local linking.

Release Playbook

1. Implement changes + update README/examples.
2. pnpm lint && pnpm typecheck && pnpm build.
3. pnpm version <patch|minor|major>.
4. git push origin main --follow-tags.
5. pnpm publish.
6. In consuming repos: pnpm update @crm-dance/studio-kit and adjust props/colors as needed.

Troubleshooting

• Colors look off: inspect the rendered element, verify the CSS variables are being set via the colors prop, and that surrounding CSS isn't overriding them.
• Need another shared component: add it under src/components, export through src/index.ts, document props + usage here, then follow the release steps above.