Mark all react components as 'use client'

[rajsite]

Pull Request

🤨 Rationale

Nimble components rely on running client side so mark all the Nimble / Spright / Ok components with 'use client';

👩‍💻 Implementation

• Update each file and the icon build script to be marked as use client

🧪 Testing

• Rely on CI to avoid regressions
• Manual testing from React Server Components (RSC) and Next.JS users

✅ Checklist

• I have updated the project documentation to reflect my changes or determined no changes are needed.

[rajsite]

@jattasNI bypassing for trivial change to react components. Can address any concerns in follow-up

[rajsite]

Just capturing some notes, looks like for a next.js hello world one also needs to disable SSR for the Nimble components: https://blog.bitsrc.io/using-non-ssr-friendly-components-with-next-js-916f38e8992c

One way is to do that on import using a next.js specific pattern, not clear to me yet if there is a more generic react server component pattern:

'use client'
 
import dynamic from 'next/dynamic'
 
export const NimbleButton = dynamic(() => import('@ni/nimble-react/button').then(mod => mod.NimbleButton), { ssr: false,});
export const NimbleThemeProvider = dynamic(() => import('@ni/nimble-react/theme-provider').then(mod => mod.NimbleThemeProvider), { ssr: false,});

But with the above does seem to work: https://stackblitz.com/edit/nextjs-nimble-nossrimport?file=app%2Fpage.tsx&file=app%2Fnimble.ts