@stackshift-ui/system 2.0.0 → 6.0.3

package/package.json

@@ -1,13 +1,14 @@
 {
   "name": "@stackshift-ui/system",
-  "version": "2.0.0",
+  "version": "6.0.3",
   "private": false,
   "sideEffects": false,
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
   "files": [
-    "dist/**"
+    "dist/**",
+    "src"
   ],
   "devDependencies": {
     "@testing-library/react": "^16.0.1",
@@ -24,8 +25,8 @@
     "typescript": "^5.6.2",
     "vite-tsconfig-paths": "^5.0.1",
     "vitest": "^2.1.1",
-    "@stackshift-ui/eslint-config": "1.0.0",
-    "@stackshift-ui/typescript-config": "2.0.0"
+    "@stackshift-ui/typescript-config": "6.0.2",
+    "@stackshift-ui/eslint-config": "6.0.2"
   },
   "dependencies": {
     "nextjs-darkmode": "^1.0.4",
@@ -33,7 +34,7 @@
     "r18gs": "^2.0.0",
     "react-live": "^4.1.7",
     "react18-loaders": "latest",
-    "@stackshift-ui/scripts": "1.0.0"
+    "@stackshift-ui/scripts": "6.0.2"
   },
   "peerDependencies": {
     "@types/react": "16.8 - 19",

package/src/default-component.test.tsx

@@ -0,0 +1,28 @@
+/* eslint-disable @typescript-eslint/no-unsafe-call */
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, describe, it } from "vitest";
+import { DefaultComponent } from "./default-component";
+
+describe("DefaultComponent", () => {
+  afterEach(cleanup);
+
+  it("should render a div by default", ({ expect }) => {
+    render(<DefaultComponent />);
+    const divElements = screen.getAllByRole("generic");
+
+    expect(divElements[0].nodeName).toBe("DIV");
+  });
+
+  it("should render the specified component", ({ expect }) => {
+    render(<DefaultComponent as="span" />);
+
+    expect(screen.getByTestId("span").nodeName).toBe("SPAN");
+  });
+
+  it("should pass props to the rendered component", ({ expect }) => {
+    render(<DefaultComponent as="button" type="submit" />);
+
+    expect(screen.getByRole("button").nodeName).toBe("BUTTON");
+    expect(screen.getByRole("button").getAttribute("type")).toBe("submit");
+  });
+});

package/src/default-component.tsx

@@ -0,0 +1,10 @@
+import type { HTMLProps } from "react";
+
+export const DefaultComponent = <T extends keyof JSX.IntrinsicElements>(
+  props: HTMLProps<T>,
+): JSX.Element => {
+  const { as = "div", ...rest } = props;
+  const Component = as;
+
+  return <Component {...rest} data-testid={as} />;
+};

package/src/index.ts

@@ -0,0 +1,5 @@
+"use client";
+
+// component exports
+export { DefaultComponent } from "./default-component";
+export { StackShiftUIProvider, useStackShiftUIComponents } from "./system";

package/src/system.test.tsx

@@ -0,0 +1,44 @@
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
+import { StackShiftUIProvider, useStackShiftUIComponents } from "./system";
+
+describe("StackShiftUIProvider", () => {
+  afterEach(cleanup);
+
+  it("should provide custom components", () => {
+    function CustomComponent() {
+      return <div>Custom Component</div>;
+    }
+    const components = { CustomComponent };
+
+    render(
+      <StackShiftUIProvider components={components}>
+        <CustomComponent />
+      </StackShiftUIProvider>,
+    );
+
+    const element = screen.getByText("Custom Component");
+
+    expect(element).not.toBeNull(); // Check that the element is not null
+    expect(document.body.contains(element)).toBe(true); // Check that the element is in the document
+  });
+
+  it("should use default components if none are provided", () => {
+    function DefaultComponent() {
+      const { DefaultComponent: Component = "div" } = useStackShiftUIComponents();
+      return <Component>Default Component</Component>;
+    }
+
+    render(
+      <StackShiftUIProvider>
+        <DefaultComponent />
+      </StackShiftUIProvider>,
+    );
+
+    const element = screen.getByText("Default Component");
+
+    expect(element).not.toBeNull(); // Check that the element is not null
+    expect(document.body.contains(element)).toBe(true); // Check that the element is in the document
+  });
+});

package/src/system.tsx

@@ -0,0 +1,25 @@
+import { createContext, ReactNode, useContext } from "react";
+
+// Define the type for the components object
+interface Components {
+  [key: string]: React.ComponentType<any>;
+}
+
+// Create a context for components
+const ComponentContext = createContext<Components>({});
+
+// Create a provider that allows passing custom components
+interface ComponentProviderProps {
+  components?: Components;
+  children: ReactNode;
+}
+
+export const StackShiftUIProvider: React.FC<ComponentProviderProps> = ({
+  components = {},
+  children,
+}) => {
+  return <ComponentContext.Provider value={components}>{children}</ComponentContext.Provider>;
+};
+
+// Hook to use the components
+export const useStackShiftUIComponents = () => useContext(ComponentContext);