@stack-dev/cli 0.1.7 → 0.3.0

package/src/packages/react-package/{css-react-package/create-css-react-package.ts → unstyled-react-package/create-unstyled-react-package.ts}

@@ -3,7 +3,6 @@ import { PackageJsonGenerator } from '../../../file-generator';
 import { Dependency, PackageJSON } from '../../../package-json';
 import { PackageGenerator } from '../../../utils/package-generator';
 import { getNamespace, getWorkspaceRoot } from '../../../utils/workspace';
-import { BUTTON_CSS_MODULE_FILE_GENERATOR } from './files/button-css-module-file-generator';
 import { BUTTON_FILE_GENERATOR } from './files/button-file-generator';
 import { BUTTON_SPEC_FILE_GENERATOR } from './files/button-spec-file-generator';
 import { ESLINT_CONFIG_FILE_GENERATOR } from './files/eslint-config-file-generator';
@@ -13,14 +12,14 @@ import { TSCONFIG_FILE_GENERATOR } from './files/tsconfig-file-generator';
 import { TSUP_CONFIG_FILE_GENERATOR } from './files/tsup-config-file-generator';
 import { VITEST_CONFIG_FILE_GENERATOR } from './files/vitest-config-file-generator';
 
-export async function createCssReactPackage(name: string): Promise<void> {
+export async function createUnstyledReactPackage(name: string): Promise<void> {
   const rootDir = await getWorkspaceRoot();
   const directory = path.join(rootDir, 'packages', name);
 
   const namespace = await getNamespace(rootDir);
   const packageName = `${namespace}/${name}`;
 
-  console.log(`✨ Creating CSS Modules React library: ${packageName}`);
+  console.log(`✨ Creating Un-styled React library: ${packageName}`);
 
   const generator = new PackageGenerator(
     directory,
@@ -28,7 +27,6 @@ export async function createCssReactPackage(name: string): Promise<void> {
     [
       INDEX_FILE_GENERATOR,
       BUTTON_FILE_GENERATOR,
-      BUTTON_CSS_MODULE_FILE_GENERATOR,
       BUTTON_SPEC_FILE_GENERATOR,
       TSUP_CONFIG_FILE_GENERATOR,
       TSCONFIG_FILE_GENERATOR,
@@ -46,6 +44,7 @@ export async function createCssReactPackage(name: string): Promise<void> {
 function makePackageGenerator(packageName: string, namespace: string) {
   const packageJsonModel = new PackageJSON({
     name: packageName,
+    // Peer deps are crucial for Styled Components to prevent "Multiple instances" errors
     peerDependencies: [
       new Dependency('react', '>=18'),
       new Dependency('react-dom', '>=18'),
@@ -65,7 +64,6 @@ function makePackageGenerator(packageName: string, namespace: string) {
       new Dependency('prettier-plugin-organize-imports', '^4.2.0'),
       // Build
       new Dependency('tsup', '^8.0.0'),
-      new Dependency('postcss', '^8.4.0'),
       // Testing
       new Dependency('vitest', '^3.2.4'),
       new Dependency('@vitest/coverage-v8', '^3.2.4'),
@@ -76,6 +74,7 @@ function makePackageGenerator(packageName: string, namespace: string) {
     additionalData: {
       version: '0.1.0',
       private: true,
+      type: 'module', // Added this to ensure ESM consistency
       main: 'dist/index.js',
       module: 'dist/index.mjs',
       types: 'dist/index.d.ts',
@@ -86,16 +85,18 @@ function makePackageGenerator(packageName: string, namespace: string) {
           require: './dist/index.js',
           types: './dist/index.d.ts',
         },
-        './index.css': './dist/index.css',
+        // Removed './index.css' as it's no longer produced by Styled Components
       },
       scripts: {
         build: 'tsup',
+        dev: 'tsup --watch', // Helpful for local lib dev
         lint: 'eslint .',
         format: 'prettier . --write',
         test: 'vitest run',
         'test:watch': 'vitest',
       },
-      sideEffects: ['**/*.css'],
+      // Set to false or removed because Styled Components are pure JS/TS
+      sideEffects: false,
     },
   });
 

package/src/packages/react-package/{css-react-package → unstyled-react-package}/files/button-file-generator.ts

@@ -1,10 +1,9 @@
 import { FileGeneratorImp } from '../../../../file-generator/file-generator-imp';
 
-const BUTTON = `import React from 'react';
-import * as styles from './button.module.css';
+const BUTTON = `import React, { HTMLAttributes } from 'react';
 
 export function Button(props: HTMLAttributes<HTMLButtonElement>) {
-  return <button className={styles.styledButton} {...props} />;
+  return <button {...props} />;
 }
 `;
 

package/src/packages/react-package/{css-react-package → unstyled-react-package}/files/button-spec-file-generator.ts

@@ -14,16 +14,6 @@ describe('Button', () => {
     const buttonElement = screen.getByRole('button');
     expect(buttonElement.tagName).toBe('BUTTON');
   });
-
-  /* Note: Testing for specific CSS classes with CSS Modules is tricky 
-     because class names are mangled (e.g., _styledButton_123). 
-     Usually, we just test that the class attribute exists.
-  */
-  it('applies a class name', () => {
-    render(<Button>Styled</Button>);
-    const buttonElement = screen.getByRole('button');
-    expect(buttonElement.className).toBeTruthy();
-  });
 });
 `;
 

package/src/packages/react-package/{css-react-package → unstyled-react-package}/files/tsup-config-file-generator.ts

@@ -4,19 +4,16 @@ const TSUP_CONFIG = `import { defineConfig } from 'tsup';
 
 export default defineConfig({
   entry: ['src/index.ts'],
-  format: ['cjs', 'esm'],
+  format: ['esm', 'cjs'],
   dts: true,
-  minify: true,
   clean: true,
-  injectStyle: true,
-  external: ['react', 'react-dom'],
+  external: ['react', 'react-dom', 'styled-components'],
   outExtension({ format }) {
     return {
       js: format === 'esm' ? '.mjs' : '.js',
     };
   },
-});
-`;
+});`;
 
 export const TSUP_CONFIG_FILE_GENERATOR = new FileGeneratorImp(
   'tsup.config.ts',

package/src/packages/vite-react-app/index.ts

@@ -0,0 +1 @@
+export * from './create-vite-react-app';

package/src/utils/style-type.ts

@@ -1,11 +1,6 @@
 import { prompt } from 'enquirer';
 
-export const styleTypes = [
-  'tailwind',
-  'css-modules',
-  'styled-components',
-  'none',
-] as const;
+export const styleTypes = ['styled-components', 'none'] as const;
 
 export type StyleType = (typeof styleTypes)[number];
 

package/src/packages/react-package/create-unstyled-react-package.ts

@@ -1,3 +0,0 @@
-export async function createUnstyledReactPackage(name: string): Promise<void> {
-  throw new Error('Not implemented.');
-}

package/src/packages/react-package/css-react-package/files/button-css-module-file-generator.ts

@@ -1,16 +0,0 @@
-import { FileGeneratorImp } from '../../../../file-generator/file-generator-imp';
-
-const BUTTON_CSS_MODULE = `.styledButton {
-  background: blue;
-  color: white;
-  padding: 10px;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-}
-`;
-
-export const BUTTON_CSS_MODULE_FILE_GENERATOR = new FileGeneratorImp(
-  'src/button.module.css',
-  BUTTON_CSS_MODULE,
-);