feat(packages/stylish): foundations of the lib

Author: itssimmons

.editorconfig

@@ -20,6 +20,6 @@ indent_size = 4
 indent_style = space
 indent_size = 2
 
-[package.json]
+[*.json]
 indent_style = space
 indent_size = 2

.rules

@@ -3,7 +3,7 @@
 ## Core Architecture
 
 **Monorepo Structure**: Turborepo with pnpm workspaces
-- `packages/ui` (@snap-ui): Component library (React 19, TypeScript)
+- `packages/ui` (@snapverse/gui): Component library (React 19, TypeScript)
 - `packages/stylish` (@snapverse/stylish): Styling system (empty/WIP)
 - `apps/docs`: Next.js 15 demo app (port 3001)
 - `apps/web`: Next.js 15 app (port 3000)
@@ -35,11 +35,11 @@ export default Component
 
 ### Package Exports
 UI package uses wildcard exports: `./*` maps to `./src/*/index.ts`
-- Consumers import: `import Accordion from "@snap-ui/accordion"`
+- Consumers import: `import Accordion from "@snapverse/gui/accordion"`
 
 ### Code Generation
 Turbo generator at `packages/ui/turbo/generators/config.ts`:
-- Run: `pnpm --filter @snap-ui generate:component`
+- Run: `pnpm --filter @snapverse/gui generate:component`
 - Uses Handlebars template with kebabCase/pascalCase helpers
 - Auto-appends export to package.json
 
@@ -74,7 +74,7 @@ All components use `@snapverse/{ComponentName}` for React DevTools
 - Don't suggest `pnpm build` or `npm build` unless explicitly asked
 
 ## Development Flow
-1. Generate component: `pnpm --filter @snap-ui generate:component`
+1. Generate component: `pnpm --filter @snapverse/gui generate:component`
 2. Edit in `packages/ui/src/{component}/`
 3. Export via namespace pattern in `namespace.ts`
 4. Apps auto-reload via turborepo watch mode

apps/docs/app/page.tsx

@@ -1,4 +1,4 @@
-import Accordion from "@snap-ui/accordion";
+import Accordion from "@snapverse/gui/accordion";
 
 export default function Home() {
   return (

apps/docs/package.json

@@ -11,7 +11,7 @@
     "check-types": "tsc --noEmit"
   },
   "dependencies": {
-    "@snap-ui": "workspace:*",
+    "@snapverse/gui": "workspace:*",
     "next": "^15.3.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0"

apps/web/package.json

@@ -11,7 +11,7 @@
     "check-types": "tsc --noEmit"
   },
   "dependencies": {
-    "@snap-ui": "workspace:*",
+    "@snapverse/gui": "workspace:*",
     "next": "^15.3.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0"

packages/stylish/src/builder.ts

@@ -0,0 +1,32 @@
+import { createElement as createReactElement, HTMLAttributes } from "react";
+import { type ElementTagNames, type StylishProps } from "./index";
+
+export const createElement = <
+  T extends ElementTagNames,
+  P extends React.HTMLAttributes<T> = StylishProps,
+>(
+  tag: T,
+  _props: P,
+  children?: React.ReactNode,
+) => {
+  const props = new Proxy(_props, {
+    set(target, prop, value) {
+      if (prop === "style" && typeof value === "object") {
+        // Here you would implement the logic to transform the style object into a CSS class
+        // and inject the corresponding styles into the document.
+        // For simplicity, we will just log the styles here.
+        console.log("Transforming style:", value);
+        // You would replace this with the actual class name generated from the styles.
+        target["className"] = "generated-class";
+        return true;
+      }
+      return true;
+    },
+  });
+
+  return createReactElement<HTMLAttributes<typeof tag> & P>(
+    tag,
+    props,
+    children,
+  );
+};

packages/stylish/src/factory.ts

@@ -0,0 +1,7 @@
+import { createElement } from "./builder";
+
+export const gui = {
+  div: createElement.bind(null, "div"),
+  span: createElement.bind(null, "span"),
+  // ...
+};

packages/stylish/src/index.d.ts

@@ -0,0 +1,10 @@
+import { HTMLElementType } from "react";
+
+export type ElementTagNames = HTMLElementType;
+
+export type StyleProps = HTMLElement["style"];
+
+export interface StylishProps extends React.ReactElement<StylishProps> {
+  color?: string;
+  // ...
+}

packages/stylish/src/index.ts

@@ -0,0 +1,4 @@
+export * from "./builder";
+export * from "./factory";
+export * from "./stylesheet";
+export * from "./index.d";

packages/stylish/src/stylesheet.ts

@@ -0,0 +1,32 @@
+export type CSSClass = string;
+
+export const css = (
+  strings: TemplateStringsArray,
+  ...values: unknown[]
+): CSSClass => {
+  // This function would contain the logic to generate a unique class name based on the provided styles,
+  // and inject the corresponding CSS into the document.
+  // For simplicity, we will return a placeholder class name here.
+  return `generated-class-${Math.random().toString(36).substr(2, 9)}`;
+};
+
+/**
+ *
+ * Transforms a style prop attribute into an isolated CSS class name, adding vendor compatibility prefixes if needed.
+ *
+ * @param key - The CSS property name (e.g., "backgroundColor", "transform", etc.)
+ * @param value - The CSS property value (e.g., "red", "rotate(45deg)", etc.)
+ *
+ * @example
+ * // Example usage:
+ * const className = transformStyleAttribute("backgroundColor", "red");
+ * // This would generate a CSS class with the appropriate styles and return its name.
+ */
+export const transformxStyleAttribute = (
+  key: string,
+  value: unknown,
+): CSSClass => {
+  return css`
+    ${key}: ${value}
+  `;
+};