@nx-extend/shadcn-ui 0.1.1 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/CHANGELOG.md +9 -0
  2. package/README.md +17 -0
  3. package/package.json +1 -1
  4. package/src/generators/init/files-utils/tailwind.config.ts.template +78 -0
  5. package/src/generators/init/files-utils/tailwind.config.js.template +0 -78
package/CHANGELOG.md CHANGED
@@ -2,6 +2,15 @@
2
2
 
3
3
  This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
4
4
 
5
+ # [0.2.0](https://github.com/TriPSs/nx-extend/compare/shadcn-ui@0.1.1...shadcn-ui@0.2.0) (2024-01-18)
6
+
7
+
8
+ ### Features
9
+
10
+ * **shadcn-ui:** Update tailwind config to export build function ([1e4b055](https://github.com/TriPSs/nx-extend/commit/1e4b055f93d7afda833d499d095102b309ae439a))
11
+
12
+
13
+
5
14
  ## [0.1.1](https://github.com/TriPSs/nx-extend/compare/shadcn-ui@0.1.0...shadcn-ui@0.1.1) (2024-01-18)
6
15
 
7
16
 
package/README.md CHANGED
@@ -15,6 +15,23 @@ npm install -D @nx-extend/shadcn-ui
15
15
  nx g @nx-extend/shadcn-ui:init
16
16
  ```
17
17
 
18
+ After installation update your APPs `tailwind.config.ts` to this:
19
+ ```ts
20
+ import { buildConfig } from '../libs/<lib directory>/src/tailwind.config'
21
+
22
+ export default buildConfig(__dirname)
23
+ ```
24
+
25
+ If you are using Remix you can import `global.css` directly like:
26
+
27
+ ```tsx
28
+ import stylesheet from '@<scope>/<utils lib name>/global.css'
29
+
30
+ export const links: LinksFunction = () => [
31
+ { rel: 'stylesheet', href: stylesheet }
32
+ ]
33
+ ```
34
+
18
35
  ## Usage
19
36
 
20
37
  ### Add
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nx-extend/shadcn-ui",
3
- "version": "0.1.1",
3
+ "version": "0.2.0",
4
4
  "keywords": [
5
5
  "nx",
6
6
  "shadcn-ui"
package/src/generators/init/files-utils/tailwind.config.ts.template ADDED
@@ -0,0 +1,78 @@
1
+ import { createGlobPatternsForDependencies } from '@nx/react/tailwind'
2
+ import { join } from 'node:path'
3
+ import TailwindAnimate from 'tailwindcss-animate'
4
+
5
+ import type { Config } from 'tailwindcss'
6
+
7
+ export function buildConfig(
8
+ appDir: string
9
+ ): Config {
10
+ return {
11
+ content: [
12
+ join(
13
+ appDir,
14
+ '{src,pages,components,app}/**/*!(*.stories|*.spec).{ts,tsx,html}'
15
+ ),
16
+ ...createGlobPatternsForDependencies(appDir)
17
+ ],
18
+ theme: {
19
+ extend: {
20
+ colors: {
21
+ border: 'hsl(var(--border))',
22
+ input: 'hsl(var(--input))',
23
+ ring: 'hsl(var(--ring))',
24
+ background: 'hsl(var(--background))',
25
+ foreground: 'hsl(var(--foreground))',
26
+ primary: {
27
+ DEFAULT: 'hsl(var(--primary))',
28
+ foreground: 'hsl(var(--primary-foreground))'
29
+ },
30
+ secondary: {
31
+ DEFAULT: 'hsl(var(--secondary))',
32
+ foreground: 'hsl(var(--secondary-foreground))'
33
+ },
34
+ destructive: {
35
+ DEFAULT: 'hsl(var(--destructive))',
36
+ foreground: 'hsl(var(--destructive-foreground))'
37
+ },
38
+ muted: {
39
+ DEFAULT: 'hsl(var(--muted))',
40
+ foreground: 'hsl(var(--muted-foreground))'
41
+ },
42
+ accent: {
43
+ DEFAULT: 'hsl(var(--accent))',
44
+ foreground: 'hsl(var(--accent-foreground))'
45
+ },
46
+ popover: {
47
+ DEFAULT: 'hsl(var(--popover))',
48
+ foreground: 'hsl(var(--popover-foreground))'
49
+ },
50
+ card: {
51
+ DEFAULT: 'hsl(var(--card))',
52
+ foreground: 'hsl(var(--card-foreground))'
53
+ }
54
+ },
55
+ borderRadius: {
56
+ lg: `var(--radius)`,
57
+ md: `calc(var(--radius) - 2px)`,
58
+ sm: 'calc(var(--radius) - 4px)'
59
+ },
60
+ keyframes: {
61
+ 'accordion-down': {
62
+ from: { height: '0' },
63
+ to: { height: 'var(--radix-accordion-content-height)' }
64
+ },
65
+ 'accordion-up': {
66
+ from: { height: 'var(--radix-accordion-content-height)' },
67
+ to: { height: '0' }
68
+ }
69
+ },
70
+ animation: {
71
+ 'accordion-down': 'accordion-down 0.2s ease-out',
72
+ 'accordion-up': 'accordion-up 0.2s ease-out'
73
+ }
74
+ }
75
+ },
76
+ plugins: [TailwindAnimate]
77
+ }
78
+ }
package/src/generators/init/files-utils/tailwind.config.js.template DELETED
@@ -1,78 +0,0 @@
1
- /**
2
- * Don't forget to update your APPs tailwind.config.js to include this file!
3
- */
4
- const { join } = require('path');
5
-
6
- const { createGlobPatternsForDependencies } = require('@nx/react/tailwind');
7
- const defaultTheme = require('tailwindcss/defaultTheme');
8
- const TailwindAnimate = require('tailwindcss-animate');
9
-
10
- module.exports = {
11
- content: [
12
- join(
13
- __dirname,
14
- '{src,pages,components,app}/**/*!(*.stories|*.spec).{ts,tsx,html}'
15
- ),
16
- ...createGlobPatternsForDependencies(__dirname),
17
- ],
18
- theme: {
19
- extend: {
20
- colors: {
21
- border: 'hsl(var(--border))',
22
- input: 'hsl(var(--input))',
23
- ring: 'hsl(var(--ring))',
24
- background: 'hsl(var(--background))',
25
- foreground: 'hsl(var(--foreground))',
26
- primary: {
27
- DEFAULT: 'hsl(var(--primary))',
28
- foreground: 'hsl(var(--primary-foreground))',
29
- },
30
- secondary: {
31
- DEFAULT: 'hsl(var(--secondary))',
32
- foreground: 'hsl(var(--secondary-foreground))',
33
- },
34
- destructive: {
35
- DEFAULT: 'hsl(var(--destructive))',
36
- foreground: 'hsl(var(--destructive-foreground))',
37
- },
38
- muted: {
39
- DEFAULT: 'hsl(var(--muted))',
40
- foreground: 'hsl(var(--muted-foreground))',
41
- },
42
- accent: {
43
- DEFAULT: 'hsl(var(--accent))',
44
- foreground: 'hsl(var(--accent-foreground))',
45
- },
46
- popover: {
47
- DEFAULT: 'hsl(var(--popover))',
48
- foreground: 'hsl(var(--popover-foreground))',
49
- },
50
- card: {
51
- DEFAULT: 'hsl(var(--card))',
52
- foreground: 'hsl(var(--card-foreground))',
53
- },
54
- },
55
- borderRadius: {
56
- lg: `var(--radius)`,
57
- md: `calc(var(--radius) - 2px)`,
58
- sm: 'calc(var(--radius) - 4px)',
59
- },
60
- keyframes: {
61
- 'accordion-down': {
62
- from: { height: 0 },
63
- to: { height: 'var(--radix-accordion-content-height)' },
64
- },
65
- 'accordion-up': {
66
- from: { height: 'var(--radix-accordion-content-height)' },
67
- to: { height: 0 },
68
- },
69
- },
70
- animation: {
71
- 'accordion-down': 'accordion-down 0.2s ease-out',
72
- 'accordion-up': 'accordion-up 0.2s ease-out',
73
- },
74
- },
75
- },
76
- plugins: [TailwindAnimate],
77
- darkMode: ['class'],
78
- };