feat: extend ShadCN initialization #13347
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -4,3 +4,4 @@ yarn.lock | |
| package-lock.json | ||
| public | ||
| build | ||
| !tailwind.config.js | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
| import { ThemeProvider as NextThemesProvider } from "next-themes" | ||
| import type { ThemeProviderProps } from "next-themes/dist/types" | ||
|
|
||
| export const STORAGE_KEY = "theme" | ||
|
|
||
| /** | ||
| * Primary theming wrapper for use with color mode. Uses the theme provider | ||
| * from `next-themes`. | ||
| * | ||
| * Applied to _app.tsx as the main provider for the project, and supplied as the | ||
| * primary decorator to Storybook. | ||
| */ | ||
| const ThemeProvider = ({ children }: Pick<ThemeProviderProps, "children">) => { | ||
| return ( | ||
| <NextThemesProvider | ||
|
There was a problem hiding this comment. Having both providers in one reusable component helps with the sync with Storybook and prod. Also note here that I added the style tag in here with the CSS vars for the fonts for the same reason as above. See that |
||
| attribute="data-theme" | ||
| defaultTheme="system" | ||
| enableSystem | ||
| disableTransitionOnChange | ||
| storageKey={STORAGE_KEY} | ||
| > | ||
| {children} | ||
| </NextThemesProvider> | ||
| ) | ||
| } | ||
|
|
||
| export default ThemeProvider | ||
|
There was a problem hiding this comment. 🤔 hmm why this file name/route? don't like it honestly. I think we can make it simpler by just following the conventions we have with the other utils, or am I missing something? are you expecting to add more things in here? There was a problem hiding this comment. I understand. I frankly don't really understand how defining the alias in There was a problem hiding this comment. I am not anticipating other utilities to be created, but since the I still go back to my initial comment above though 😅 There was a problem hiding this comment. I still don't get the idea of what this files does haha. Can we remove it since it is currently duplicating the Not sure if this is adding a benefit or not. There was a problem hiding this comment. Are you talking about confusion with the components.json file? Used for configuration when adding components via the cli There was a problem hiding this comment. Are you talking about confusion with the components.json file? Used for configuration when adding components via the cli There was a problem hiding this comment. No, sorry. I'm taking about the filename
Me neither xD |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| import { type ClassValue, clsx } from "clsx" | ||
| import { twMerge } from "tailwind-merge" | ||
|
|
||
| export function cn(...inputs: ClassValue[]) { | ||
| return twMerge(clsx(inputs)) | ||
| } |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
why is this needed? (on the other hand, its a
.ts,.js)There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Whoops! Had issues earlier with prettier. This should be removed