@leancodepl/styled-tools 8.4.0 → 8.5.0

package/README.md

@@ -1,7 +1,58 @@
-# styled-tools
+# @leancodepl/styled-tools
 
-This library was generated with [Nx](https://nx.dev).
+TypeScript utilities for styled-components with type-safe theme access.
 
-## Running unit tests
+## Installation
 
-Run `nx test styled-tools` to execute the unit tests via [Jest](https://jestjs.io).
+```bash
+npm install @leancodepl/styled-tools
+# or
+yarn add @leancodepl/styled-tools
+```
+
+## API
+
+### `mkTheme()`
+
+Creates type-safe theme utilities for styled-components with full TypeScript support.
+
+**Returns:** Object containing `theme` proxy and `useTheme` hook
+
+## Usage Examples
+
+### Basic Setup
+
+```typescript
+// theme.ts
+import { mkTheme } from '@leancodepl/styled-tools';
+import styled from 'styled-components';
+
+interface AppTheme {
+  colors: { primary: string; secondary: string };
+  spacing: { small: string; large: string };
+}
+
+export const { theme, useTheme } = mkTheme<AppTheme>();
+
+const Button = styled.button`
+  color: ${theme.colors.primary};
+  padding: ${theme.spacing.small};
+`;
+```
+
+### React Hook Usage
+
+```typescript
+import React from 'react';
+import { useTheme } from './theme';
+
+function ThemedComponent() {
+  const theme = useTheme();
+
+  return (
+    <div style={{ backgroundColor: theme.colors.primary }}>
+      <h1>Themed Component</h1>
+    </div>
+  );
+}
+```

package/package.json

@@ -1,19 +1,55 @@
 {
   "name": "@leancodepl/styled-tools",
-  "version": "8.4.0",
+  "version": "8.5.0",
   "peerDependencies": {
     "styled-components": ">=6.0.0"
   },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/leancodepl/js_corelibrary.git",
+    "directory": "packages/styled-tools"
+  },
+  "homepage": "https://github.com/leancodepl/js_corelibrary",
+  "bugs": {
+    "url": "https://github.com/leancodepl/js_corelibrary/issues"
+  },
+  "description": "Utilities for styled-components",
+  "keywords": [
+    "styled-components",
+    "theme",
+    "css-in-js",
+    "react",
+    "typescript",
+    "javascript",
+    "leancode"
+  ],
+  "author": {
+    "name": "LeanCode",
+    "url": "https://leancode.co"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "CHANGELOG.md"
+  ],
+  "sideEffects": false,
   "exports": {
     "./package.json": "./package.json",
     ".": {
       "module": "./index.esm.js",
-      "types": "./index.esm.d.ts",
+      "types": "./index.d.ts",
       "import": "./index.cjs.mjs",
       "default": "./index.cjs.js"
     }
   },
   "module": "./index.esm.js",
   "main": "./index.cjs.js",
-  "types": "./index.esm.d.ts"
+  "types": "./index.d.ts"
 }

package/index.cjs.d.ts

@@ -1 +0,0 @@
-export * from "./src/index";

package/index.cjs.default.js

@@ -1 +0,0 @@
-exports._default = require('./index.cjs.js').default;

package/index.cjs.js

@@ -1,37 +0,0 @@
-'use strict';
-
-var styledComponents = require('styled-components');
-
-function mkProxy(accessor) {
-    var cache = {};
-    return new Proxy(accessor, {
-        get: function get(target, property) {
-            var _cache, _property;
-            if (property === "prototype") {
-                return Function.prototype;
-            }
-            var _;
-            (_ = (_cache = cache)[_property = property]) !== null && _ !== void 0 ? _ : _cache[_property] = mkProxy(function(context) {
-                var value = target(context);
-                return guard(value) ? value === null || value === void 0 ? void 0 : value[property] : undefined;
-            });
-            return cache[property];
-        }
-    });
-}
-function guard(value) {
-    return typeof value === "object";
-}
-
-function mkTheme() {
-    return {
-        theme: mkProxy(function(ctx) {
-            return ctx.theme;
-        }),
-        useTheme: function() {
-            return styledComponents.useTheme();
-        }
-    };
-}
-
-exports.mkTheme = mkTheme;

package/index.cjs.mjs

@@ -1,2 +0,0 @@
-export * from './index.cjs.js';
-export { _default as default } from './index.cjs.default.js';

package/index.esm.d.ts

@@ -1 +0,0 @@
-export * from "./src/index";

package/index.esm.js

@@ -1,35 +0,0 @@
-import { useTheme } from 'styled-components';
-
-function mkProxy(accessor) {
-    var cache = {};
-    return new Proxy(accessor, {
-        get: function get(target, property) {
-            var _cache, _property;
-            if (property === "prototype") {
-                return Function.prototype;
-            }
-            var _;
-            (_ = (_cache = cache)[_property = property]) !== null && _ !== void 0 ? _ : _cache[_property] = mkProxy(function(context) {
-                var value = target(context);
-                return guard(value) ? value === null || value === void 0 ? void 0 : value[property] : undefined;
-            });
-            return cache[property];
-        }
-    });
-}
-function guard(value) {
-    return typeof value === "object";
-}
-
-function mkTheme() {
-    return {
-        theme: mkProxy(function(ctx) {
-            return ctx.theme;
-        }),
-        useTheme: function() {
-            return useTheme();
-        }
-    };
-}
-
-export { mkTheme };

package/src/index.d.ts

@@ -1 +0,0 @@
-export * from "./lib/mkTheme";

package/src/lib/mkProxy.d.ts

@@ -1,5 +0,0 @@
-import type { ExecutionContext, RuleSet } from "styled-components";
-export declare function mkProxy(accessor: (context: ExecutionContext) => Value): (context: ExecutionContext) => Value;
-export type Value = number | RuleSet | string | {
-    [key: string | symbol]: Value | undefined;
-} | undefined;

package/src/lib/mkTheme.d.ts

@@ -1,10 +0,0 @@
-import { type ExecutionContext, type RuleSet } from "styled-components";
-import { Value } from "./mkProxy";
-export declare function mkTheme<TTheme extends Value>(): {
-    theme: TransformDeep<TTheme>;
-    useTheme: () => TTheme;
-};
-type TransformDeep<T> = T extends RuleSet ? (context: ExecutionContext) => RuleSet : T extends Array<infer TArrayElement> ? Array<TransformDeep<TArrayElement>> : T extends object ? {
-    [TKey in keyof T]: TransformDeep<T[TKey]>;
-} : T extends null ? undefined : (context: ExecutionContext) => T;
-export {};