@stack-dev/react-styled-components 0.1.0

package/.turbo/turbo-build.log

@@ -0,0 +1,81 @@
+
+
+> @stack-dev/react-styled-components@0.1.0 build /home/benmclean/projects/stack-dev/packages/react-styled-components
+> tsup
+
+▲ [WARNING] The condition "types" here will never be used as it comes after both "import" and "require" [package.json]
+
+    package.json:13:6:
+      13 │       "types": "./dist/index.d.ts"
+         ╵       ~~~~~~~
+
+  The "import" condition comes earlier and will be used for all "import" statements:
+
+    package.json:11:6:
+      11 │       "import": "./dist/index.mjs",
+         ╵       ~~~~~~~~
+
+  The "require" condition comes earlier and will be used for all "require" calls:
+
+    package.json:12:6:
+      12 │       "require": "./dist/index.js",
+         ╵       ~~~~~~~~~
+
+CLI Building entry: src/index.ts
+CLI Using tsconfig: tsconfig.json
+CLI tsup v8.5.1
+CLI Using tsup config: /home/benmclean/projects/stack-dev/packages/react-styled-components/tsup.config.ts
+CLI Target: esnext
+CLI Cleaning output folder
+CJS Build start
+ESM Build start
+
+ WARN  ▲ [WARNING] The condition "types" here will never be used as it comes after both "import" and "require" [package.json]                                                                                        10:12:34 p.m.
+
+    package.json:13:6:
+      13 │       "types": "./dist/index.d.ts"
+         ╵       ~~~~~~~
+
+  The "import" condition comes earlier and will be used for all "import" statements:
+
+    package.json:11:6:
+      11 │       "import": "./dist/index.mjs",
+         ╵       ~~~~~~~~
+
+  The "require" condition comes earlier and will be used for all "require" calls:
+
+    package.json:12:6:
+      12 │       "require": "./dist/index.js",
+         ╵       ~~~~~~~~~
+
+
+
+
+ WARN  ▲ [WARNING] The condition "types" here will never be used as it comes after both "import" and "require" [package.json]                                                                                        10:12:34 p.m.
+
+    package.json:13:6:
+      13 │       "types": "./dist/index.d.ts"
+         ╵       ~~~~~~~
+
+  The "import" condition comes earlier and will be used for all "import" statements:
+
+    package.json:11:6:
+      11 │       "import": "./dist/index.mjs",
+         ╵       ~~~~~~~~
+
+  The "require" condition comes earlier and will be used for all "require" calls:
+
+    package.json:12:6:
+      12 │       "require": "./dist/index.js",
+         ╵       ~~~~~~~~~
+
+
+
+CJS dist/index.js 973.00 B
+CJS ⚡️ Build success in 43ms
+ESM dist/index.mjs 336.00 B
+ESM ⚡️ Build success in 44ms
+DTS Build start
+DTS ⚡️ Build success in 2014ms
+DTS dist/index.d.cts 215.00 B
+DTS dist/index.d.ts  215.00 B

package/dist/index.d.cts

@@ -0,0 +1,6 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { HTMLAttributes } from 'react';
+
+declare function Button(props: HTMLAttributes<HTMLButtonElement>): react_jsx_runtime.JSX.Element;
+
+export { Button };

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { HTMLAttributes } from 'react';
+
+declare function Button(props: HTMLAttributes<HTMLButtonElement>): react_jsx_runtime.JSX.Element;
+
+export { Button };

package/dist/index.js

@@ -0,0 +1,13 @@
+"use strict";var i=Object.create;var e=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var l=Object.getPrototypeOf,s=Object.prototype.hasOwnProperty;var m=(o,t)=>{for(var r in t)e(o,r,{get:t[r],enumerable:!0})},p=(o,t,r,u)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of f(t))!s.call(o,n)&&n!==r&&e(o,n,{get:()=>t[n],enumerable:!(u=c(t,n))||u.enumerable});return o};var x=(o,t,r)=>(r=o!=null?i(l(o)):{},p(t||!o||!o.__esModule?e(r,"default",{value:o,enumerable:!0}):r,o)),a=o=>p(e({},"__esModule",{value:!0}),o);var H={};m(H,{Button:()=>B});module.exports=a(H);var b=x(require("styled-components"),1),d=require("react/jsx-runtime"),g=b.default.button`
+  background-color: #007bff;
+  color: white;
+  padding: 10px 20px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 16px;
+
+  &:hover {
+    background-color: #0056b3;
+  }
+`;function B(o){return(0,d.jsx)(g,{...o})}0&&(module.exports={Button});

package/dist/index.mjs

@@ -0,0 +1,13 @@
+import t from"styled-components";import{jsx as n}from"react/jsx-runtime";var r=t.button`
+  background-color: #007bff;
+  color: white;
+  padding: 10px 20px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 16px;
+
+  &:hover {
+    background-color: #0056b3;
+  }
+`;function u(o){return n(r,{...o})}export{u as Button};

package/eslint.config.mjs

@@ -0,0 +1,10 @@
+import base from '@stack-dev/eslint-config/base.mjs';
+import react from '@stack-dev/eslint-config/react.mjs';
+
+export default [
+  ...base,
+  ...react,
+  { 
+    ignores: ['**/dist/**', '**/coverage/**'] 
+  }
+];

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@stack-dev/react-styled-components",
+  "version": "0.1.0",
+  "private": false,
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "development": "./src/index.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18",
+    "styled-components": ">=6"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.0.0",
+    "@testing-library/react": "^16.0.0",
+    "@types/react": "^18.3.1",
+    "@types/react-dom": "^18.3.1",
+    "@types/styled-components": "^5.1.34",
+    "@vitest/coverage-v8": "^3.2.4",
+    "eslint": "^9.32.0",
+    "jsdom": "^25.0.0",
+    "prettier": "^3.6.2",
+    "prettier-plugin-organize-imports": "^4.2.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "styled-components": "^6.1.13",
+    "tsup": "^8.0.0",
+    "vitest": "^3.2.4",
+    "@stack-dev/eslint-config": "0.1.0",
+    "@stack-dev/prettier-config": "0.1.0",
+    "@stack-dev/typescript-config": "0.1.0"
+  },
+  "type": "module",
+  "sideEffects": false,
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "lint": "eslint .",
+    "format": "prettier . --write",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  }
+}

package/prettier.config.mjs

@@ -0,0 +1,3 @@
+import base from '@stack-dev/prettier-config/base.mjs';
+
+export default base;

package/src/button.spec.tsx

@@ -0,0 +1,27 @@
+import { render, screen } from '@testing-library/react';
+import { Button } from './button';
+
+import { describe, expect, it } from 'vitest';
+
+describe('Button', () => {
+  it('renders the label correctly', () => {
+    render(<Button>Click Me</Button>);
+    expect(screen.getByText('Click Me')).toBeDefined();
+  });
+
+  it('is a button element', () => {
+    render(<Button>Submit</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/button.tsx

@@ -0,0 +1,21 @@
+import { HTMLAttributes } from 'react';
+
+import styled from 'styled-components';
+
+const StyledButton = styled.button`
+  background-color: #007bff;
+  color: white;
+  padding: 10px 20px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 16px;
+
+  &:hover {
+    background-color: #0056b3;
+  }
+`;
+
+export function Button(props: HTMLAttributes<HTMLButtonElement>) {
+  return <StyledButton {...props} />;
+}

package/src/index.ts

@@ -0,0 +1 @@
+export * from './button';

package/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "@stack-dev/typescript-config/tsconfig.react.json",
+  "compilerOptions": {
+    "outDir": "dist"
+  },
+  "include": ["src"]
+}

package/tsup.config.ts

@@ -0,0 +1,16 @@
+import { defineConfig } from 'tsup';
+
+export default defineConfig({
+  entry: ['src/index.ts'],
+  format: ['cjs', 'esm'],
+  dts: true,
+  minify: true,
+  clean: true,
+  splitting: false,
+  external: ['react', 'react-dom', 'styled-components'],
+  outExtension({ format }) {
+    return {
+      js: format === 'esm' ? '.mjs' : '.js',
+    };
+  },
+});

package/vitest.config.ts

@@ -0,0 +1,15 @@
+import { defineConfig } from 'vitest/config';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    coverage: {
+      provider: 'v8',
+      reporter: ['text', 'json', 'html'],
+    },
+    css: true,
+  },
+});