@yusufalperendumlu/component-library 0.0.2

package/.storybook/main.ts

@@ -0,0 +1,17 @@
+import type { StorybookConfig } from '@storybook/react-webpack5';
+
+const config: StorybookConfig = {
+  "stories": [
+    "../src/**/*.mdx",
+    "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"
+  ],
+  "addons": [
+    "@storybook/addon-webpack5-compiler-swc",
+    "@storybook/addon-docs"
+  ],
+  "framework": {
+    "name": "@storybook/react-webpack5",
+    "options": {}
+  }
+};
+export default config;

package/.storybook/preview.ts

@@ -0,0 +1,14 @@
+import type { Preview } from '@storybook/react-webpack5'
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+       color: /(background|color)$/i,
+       date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

package/dist/cjs/index.js

@@ -0,0 +1,2 @@
+"use strict";var r=require("react/jsx-runtime");exports.Button=({variant:e,...o})=>r.jsx("button",{style:{..."primary"===e?{borderColor:"#053786ff",color:"#ca1515ff",backgroundColor:"#bfdbfe",padding:"2rem 5rem"}:"secondary"===e?{borderColor:"#cbd5e1",textColor:"#6b7280",backgroundColor:"#f3f4f6"}:{},...o.style},...o,children:o.title}),exports.Input=({placeholder:e})=>r.jsx("input",{placeholder:e,children:"Input"});
+//# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../src/components/Button/Button.tsx","../../src/components/Input/Input.tsx"],"sourcesContent":[null,null],"names":["variant","props","_jsx","style","borderColor","color","backgroundColor","padding","textColor","children","title","placeholder"],"mappings":"+DAKuC,EAAGA,aAAYC,KAsBlDC,EAAAA,cAAQC,MAAO,IApBC,YAAZH,EACK,CACLI,YAAa,YACbC,MAAO,YACPC,gBAAiB,UACjBC,QAAS,aAGG,cAAZP,EACK,CACLI,YAAa,UACbI,UAAW,UACXF,gBAAiB,WAId,CAAA,KAIgCL,EAAME,UAAaF,EAAKQ,SAC5DR,EAAMS,sBCxBuB,EAAGC,iBAC9BT,EAAAA,IAAA,QAAA,CAAOS,YAAaA"}

package/dist/esm/components/Button/Button.d.ts

@@ -0,0 +1,5 @@
+type ButtonProps = {
+    title: string;
+};
+declare const Button: React.FC<ButtonProps>;
+export default Button;

package/dist/esm/components/Button/index.d.ts

@@ -0,0 +1,2 @@
+import Button from "./Button";
+export default Button;

package/dist/esm/components/Input/Input.d.ts

@@ -0,0 +1,5 @@
+type InputProps = {
+    placeholder?: string;
+};
+declare const Input: React.FC<InputProps>;
+export default Input;

package/dist/esm/components/Input/index.d.ts

@@ -0,0 +1,2 @@
+import Input from "./Input";
+export default Input;

package/dist/esm/components/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Button } from "./Button";
+export { default as Input } from "./Input";

package/dist/esm/index.d.ts

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

package/dist/esm/index.js

@@ -0,0 +1,2 @@
+import{jsx as r}from"react/jsx-runtime";const o=({variant:o,...e})=>r("button",{style:{..."primary"===o?{borderColor:"#053786ff",color:"#ca1515ff",backgroundColor:"#bfdbfe",padding:"2rem 5rem"}:"secondary"===o?{borderColor:"#cbd5e1",textColor:"#6b7280",backgroundColor:"#f3f4f6"}:{},...e.style},...e,children:e.title}),e=({placeholder:o})=>r("input",{placeholder:o,children:"Input"});export{o as Button,e as Input};
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../src/components/Button/Button.tsx","../../src/components/Input/Input.tsx"],"sourcesContent":[null,null],"names":["Button","variant","props","_jsx","style","borderColor","color","backgroundColor","padding","textColor","children","title","Input","placeholder"],"mappings":"wCAKA,MAAMA,EAAiC,EAAGC,aAAYC,KAsBlDC,YAAQC,MAAO,IApBC,YAAZH,EACK,CACLI,YAAa,YACbC,MAAO,YACPC,gBAAiB,UACjBC,QAAS,aAGG,cAAZP,EACK,CACLI,YAAa,UACbI,UAAW,UACXF,gBAAiB,WAId,CAAA,KAIgCL,EAAME,UAAaF,EAAKQ,SAC5DR,EAAMS,QCxBPC,EAA8B,EAAGC,iBAC9BV,EAAA,QAAA,CAAOU,YAAaA"}

package/dist/index.d.ts

@@ -0,0 +1,11 @@
+interface IButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: "primary" | "secondary";
+}
+declare const Button: React.FC<IButtonProps>;
+
+type InputProps = {
+    placeholder?: string;
+};
+declare const Input: React.FC<InputProps>;
+
+export { Button, Input };

package/package.json

@@ -0,0 +1,67 @@
+{
+  "name": "@yusufalperendumlu/component-library",
+  "version": "0.0.2",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/index.d.ts",
+  "private": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "dev": "rollup -c --watch",
+    "build": "rollup -c",
+    "test": "jest --watchAll --verbose",
+    "clean": "rm -rf dist",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "jest": {
+    "testEnvironment": "jsdom",
+    "preset": "ts-jest",
+    "setupFilesAfterEnv": [
+      "<rootDir>/src/tests/styleMock.ts"
+    ],
+    "moduleNameMapper": {
+      "\\.(css|less|scss|sass)$": "/src/tests/styleMock.ts"
+    }
+  },
+  "author": "",
+  "license": "MIT",
+  "description": "A collection of reusable React components for building user interfaces.",
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0"
+  },
+  "devDependencies": {
+    "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-typescript": "^12.1.4",
+    "@storybook/addon-docs": "9.0.17",
+    "@storybook/addon-webpack5-compiler-swc": "3.0.0",
+    "@storybook/react-webpack5": "9.0.17",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/jest": "^30.0.0",
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^18.0.0",
+    "jest": "^30.0.5",
+    "jest-environment-jsdom": "^30.0.5",
+    "postcss": "^8.5.6",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "storybook": "9.0.17",
+    "ts-jest": "^29.4.0",
+    "tslib": "^2.8.1",
+    "typescript": "^5.8.3"
+  },
+  "dependencies": {
+    "@rollup/plugin-commonjs": "^28.0.6",
+    "@rollup/plugin-node-resolve": "^16.0.1",
+    "rollup": "^4.45.1",
+    "rollup-plugin-dts": "^6.2.1",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^4.0.2"
+  }
+}

package/rollup.config.mjs

@@ -0,0 +1,65 @@
+import commonjs from "@rollup/plugin-commonjs";
+import resolve from "@rollup/plugin-node-resolve";
+import terser from "@rollup/plugin-terser";
+import typescript from "@rollup/plugin-typescript";
+import postcss from "rollup-plugin-postcss";
+import dts from "rollup-plugin-dts";
+import peerDepsExternal from "rollup-plugin-peer-deps-external";
+import { readFileSync } from "fs";
+
+// Read package.json using ES modules syntax
+const packageJson = JSON.parse(readFileSync("./package.json", "utf8"));
+
+export default [
+  // Main build configuration
+  {
+    input: "src/index.ts",
+    output: [
+      {
+        file: packageJson.main,
+        format: "cjs",
+        sourcemap: true,
+        exports: "auto",
+      },
+      {
+        file: packageJson.module,
+        format: "esm",
+        sourcemap: true,
+      },
+    ],
+    plugins: [
+      peerDepsExternal(),
+      resolve({
+        browser: true,
+        preferBuiltins: false,
+      }),
+      commonjs(),
+      typescript({
+        tsconfig: "./tsconfig.json",
+        declaration: false, // We'll handle declarations separately
+        declarationMap: false,
+      }),
+      postcss({
+        extensions: [".css"],
+        extract: true,
+        minimize: true,
+        sourceMap: true,
+        inject: {
+          insertAt: "top",
+        },
+      }),
+      terser(),
+    ],
+    external: ["react", "react-dom"],
+  },
+  // Type definitions build
+  {
+    input: "src/index.ts",
+    output: {
+      file: packageJson.types,
+      format: "esm",
+    },
+    plugins: [dts()],
+    external: [/\.css$/],
+  },
+];

package/src/components/Button/Button.stories.ts

@@ -0,0 +1,34 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import Button from "./Button";
+
+const meta: Meta<typeof Button> = {
+  title: "components-library/Button",
+  component: Button,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+}
+} as Meta<typeof Button> ;
+
+export default meta;
+type Story = StoryObj<typeof Button>;
+
+export const Primary: Story = {
+  args: {
+    title: "Primary Button",
+    variant: "primary",
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    title: "Secondary Button",
+    variant: "secondary",
+  },
+};
+
+export const Default: Story = {
+  args: {
+    title: "Default Button",
+  },
+};

package/src/components/Button/Button.tsx

@@ -0,0 +1,34 @@
+export interface IButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: "primary" | "secondary";
+}
+
+const Button: React.FC<IButtonProps> = ({ variant, ...props }) => {
+  const colorClasses = () => {
+    if (variant === "primary") {
+      return {
+        borderColor: "#053786ff",
+        color: "#ca1515ff",
+        backgroundColor: "#bfdbfe",
+        padding: "2rem 5rem",
+      };
+    }
+    if (variant === "secondary") {
+      return {
+        borderColor: "#cbd5e1",
+        textColor: "#6b7280",
+        backgroundColor: "#f3f4f6",
+      };
+    }
+
+    return {};
+  };
+
+  return (
+    <button style={{ ...colorClasses(), ...props.style }} {...props}>
+      {props.title}
+    </button>
+  );
+};
+
+export default Button;

package/src/components/Button/index.ts

@@ -0,0 +1,3 @@
+import Button from "./Button";
+
+export default Button;

package/src/components/Input/Input.tsx

@@ -0,0 +1,9 @@
+type InputProps = {
+  placeholder?: string;
+};
+
+const Input: React.FC<InputProps> = ({ placeholder }) => {
+  return <input placeholder={placeholder}>Input</input>;
+};
+
+export default Input;

package/src/components/Input/index.tsx

@@ -0,0 +1,3 @@
+import Input from "./Input";
+
+export default Input;

package/src/components/index.ts

@@ -0,0 +1,2 @@
+export { default as Button } from "./Button";
+export { default as Input } from "./Input";

package/src/index.ts

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

package/src/tests/Button.test.tsx

@@ -0,0 +1,37 @@
+// src/tests/Button.test.tsx
+
+import React from "react";
+import "@testing-library/jest-dom";
+import { render, screen } from "@testing-library/react";
+import Button from "../components/Button";
+
+describe("Button", () => {
+  test("renders with default styles when no variant is provided", () => {
+    render(<Button title="Default Button" />);
+    const buttonElement = screen.getByRole("button", {
+      name: /default button/i,
+    });
+
+    expect(buttonElement.style.borderColor).toBe("");
+    expect(buttonElement.style.color).toBe("");
+    expect(buttonElement.style.backgroundColor).toBe("");
+  });
+
+  test("renders with custom style prop", () => {
+    render(<Button title="Custom Button" style={{ padding: "10px" }} />);
+    const buttonElement = screen.getByRole("button", {
+      name: /custom button/i,
+    });
+
+    expect(buttonElement).toHaveStyle("padding: 10px");
+  });
+
+  test("button click event works", () => {
+    const handleClick = jest.fn();
+    render(<Button title="Click Me" onClick={handleClick} />);
+    const buttonElement = screen.getByRole("button", { name: /click me/i });
+
+    buttonElement.click();
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+});

package/src/tests/styleMock.ts

@@ -0,0 +1 @@
+module.exports = {}

package/tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "jsx": "react-jsx",
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "declaration": true,
+    "emitDeclarationOnly": false,
+    "sourceMap": true,
+    "outDir": "dist",
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "skipLibCheck": true
+  },
+  "include": [
+    "src/**/*"
+  ],
+  "exclude": [
+    "node_modules",
+    "dist",
+    "**/*.test.*",
+    "**/*.stories.*"
+  ]
+}