- exploring shadcn/ui

wp-graphql · Apr 2, 2024 · b747fd3 · b747fd3
1 parent a15f885
commit b747fd3
Show file tree

Hide file tree

Showing 20 changed files with 1,456 additions and 421 deletions.
diff --git a/bin/packages/build-worker.js b/bin/packages/build-worker.js
@@ -101,31 +101,31 @@ async function buildCSS( file ) {
 		readFile( file, 'utf8' ),
 	] );
 
-	const importLists = [
-		'colors',
-		'breakpoints',
-		'variables',
-		'mixins',
-		'animations',
-		'z-index',
-	]
-		// Editor and component styles should be excluded from the default CSS vars output.
-		.concat(
-			file.includes( 'common.scss' ) ||
-			! (
-				file.includes( 'block-library' ) ||
-				file.includes( 'components' )
-			)
-				? [ 'default-custom-properties' ]
-				: []
-		)
-		.map( ( imported ) => `@import "${ imported }";` )
-		.join( ' ' );
-
+	// const importLists = [
+	// 	'colors',
+	// 	'breakpoints',
+	// 	'variables',
+	// 	'mixins',
+	// 	'animations',
+	// 	'z-index',
+	// ]
+	// 	// Editor and component styles should be excluded from the default CSS vars output.
+	// 	.concat(
+	// 		file.includes( 'common.scss' ) ||
+	// 		! (
+	// 			file.includes( 'block-library' ) ||
+	// 			file.includes( 'components' )
+	// 		)
+	// 			? [ 'default-custom-properties' ]
+	// 			: []
+	// 	)
+	// 	.map( ( imported ) => `@import "${ imported }";` )
+	// 	.join( ' ' );
+	//
 	const builtSass = await renderSass( {
 		file,
 		includePaths: [ path.join( PACKAGES_DIR, 'base-styles' ) ],
-		data: ''.concat( '@use "sass:math";', importLists, contents ),
+		data: ''.concat( '@use "sass:math";', contents ),
 	} );
 
 	const result = await postcss(
@@ -154,7 +154,7 @@ async function buildJS( file ) {
 		JS_ENVIRONMENTS
 	) ) {
 		const destPath = getBuildPath(
-			file.replace( /\.tsx?$/, '.js' ),
+			file.replace( /\.(tsx|jsx)?$/, '.js' ),
 			buildDir
 		);
 		const babelOptions = getBabelConfig(
@@ -187,7 +187,9 @@ async function buildJS( file ) {
  */
 const BUILD_TASK_BY_EXTENSION = {
 	'.scss': buildCSS,
+	'.css': buildCSS,
 	'.js': buildJS,
+	'.jsx': buildJS,
 	'.ts': buildJS,
 	'.tsx': buildJS,
 };

diff --git a/bin/packages/build.js b/bin/packages/build.js
@@ -28,7 +28,7 @@ const PACKAGES_DIR = path
 	.replace( /\\/g, '/' );
 
 const stylesheetEntryPoints = glob.sync(
-	path.resolve( PACKAGES_DIR, '*/src/*.scss' )
+	path.resolve( PACKAGES_DIR, '*/src/*.css' )
 );
 
 /**
@@ -109,7 +109,7 @@ function createStyleEntryTransform() {
 		objectMode: true,
 		async transform( file, encoding, callback ) {
 			// Only stylesheets are subject to this transform.
-			if ( path.extname( file ) !== '.scss' ) {
+			if ( path.extname( file ) !== '.css' ) {
 				this.push( file );
 				callback();
 				return;
@@ -125,7 +125,7 @@ function createStyleEntryTransform() {
 			packages.add( packageName );
 			const entries = await glob(
 				path
-					.resolve( PACKAGES_DIR, packageName, 'src/*.scss' )
+					.resolve( PACKAGES_DIR, packageName, 'src/*.css' )
 					.replace( /\\/g, '/' )
 			);
 
@@ -221,13 +221,9 @@ if ( files.length ) {
 
 	stream = glob.stream(
 		[
-			`${ PACKAGES_DIR }/*/src/**/*.{js,ts,tsx}`,
-			`${ PACKAGES_DIR }/*/src/*.scss`,
-			`${ PACKAGES_DIR }/block-library/src/**/*.js`,
-			`${ PACKAGES_DIR }/block-library/src/*/style.scss`,
-			`${ PACKAGES_DIR }/block-library/src/*/theme.scss`,
-			`${ PACKAGES_DIR }/block-library/src/*/editor.scss`,
-			`${ PACKAGES_DIR }/block-library/src/*.scss`,
+			`${ PACKAGES_DIR }/*/src/**/*.{js,jsx,ts,tsx}`,
+			`${ PACKAGES_DIR }/*/src/**/**/*.{js,jsx,ts,tsx}`,
+			`${ PACKAGES_DIR }/*/src/*.css`,
 		],
 		{
 			ignore: [

diff --git a/bin/packages/watch.js b/bin/packages/watch.js
@@ -64,7 +64,7 @@ function isSourceFile( filename ) {
 		.replace( /\\/g, '/' );
 
 	return (
-		/\/src\/.+\.(js|json|scss|ts|tsx)$/.test( relativePath ) &&
+		/\/src\/.+\.(js|jsx|json|css|scss|ts|tsx)$/.test( relativePath ) &&
 		! [
 			/\/(benchmark|__mocks__|__tests__|test|storybook|stories|e2e-test-utils-playwright)\/.+/,
 			/.\.(spec|test)\.js$/,

diff --git a/components.json b/components.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": false,
+  "tsx": false,
+  "tailwind": {
+    "config": "@ui/tailwind.config.js",
+    "css": "@ui/globals.css",
+    "baseColor": "slate",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@ui/components",
+    "utils": "@ui/lib/utils"
+  }
+}
diff --git a/jsconfig.json b/jsconfig.json
@@ -2,7 +2,9 @@
   "compilerOptions": {
     "baseUrl": ".",
     "paths": {
-      "@wpgraphql-ide/*": [ "./*", "./packages/*/src" ]
+      "@wpgraphql-ide/*": [ "./*", "./packages/*/src" ],
+      "@ui/*": ["./packages/components/src/*"],
+      "@components/*": ["./packages/components/src/*"]
     }
   },
   "exclude": [