-
Notifications
You must be signed in to change notification settings - Fork 4.7k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat: extend ShadCN initialization #13347
Changes from 18 commits
1a5a98c
1893c0d
f30e52f
d1dde72
b051c50
9f06e0f
4a68d63
5656859
f527b54
c3da52f
d9ec82a
0245dd1
6f80922
e351988
7fcb255
c8d89cd
d0e4956
d07e666
c790d14
e95298b
675492d
24ca478
a680d58
7236038
a066d37
7ee19ac
94e4d1a
91b9185
4fcc57c
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
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 |
---|---|---|
|
@@ -3,5 +3,8 @@ | |
"semi": false, | ||
"singleQuote": false, | ||
"tabWidth": 2, | ||
"trailingComma": "es5" | ||
} | ||
"trailingComma": "es5", | ||
"plugins": [ | ||
"prettier-plugin-tailwindcss" | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Nice! very handy |
||
] | ||
} |
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. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 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 There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Looks better 👍🏼 |
||
attribute="data-theme" | ||
defaultTheme="system" | ||
enableSystem | ||
disableTransitionOnChange | ||
storageKey={STORAGE_KEY} | ||
> | ||
{children} | ||
</NextThemesProvider> | ||
) | ||
} | ||
|
||
export default ThemeProvider |
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 🤔 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. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I understand. I frankly don't really understand how defining the alias in There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 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. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 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. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 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. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 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. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 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