@yosang/react-ui 1.0.0

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@yosang/react-ui",
+  "version": "1.0.0",
+  "description": "A small web component ui library",
+  "main": "src/main.js",
+  "files": [
+    "src"
+  ],
+  "type": "module",
+  "scripts": {
+    "start": "ladle serve",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [
+    "web-components",
+    "ui",
+    "library"
+  ],
+  "author": "Yosmel Chiang",
+  "license": "MIT",
+  "peerDependencies": {
+    "react": "^18 || ^19",
+    "react-dom": "^18 || ^19"
+  },
+  "dependencies": {
+    "lucide-react": "^1.7.0"
+  },
+  "devDependencies": {
+    "@ladle/react": "^5.1.1"
+  }
+}

package/readme.md

@@ -0,0 +1,51 @@
+# Demo ui lib
+
+## Consuming the library
+
+To consume this library simply install it on your app.
+
+```bash
+npm install @yosang/react-ui
+```
+
+then import the components as needed.
+
+```jsx
+import { Button } from '@yosang/react-ui'
+```
+
+# Testing the components locally
+This library uses [@ladle/react](https://www.npmjs.com/package/@ladle/react) for component testing.
+
+Simply do `npm install` inside the library to install it before using it.
+
+Create a component story like this example `button.stories.jsx` and make sure you import the component.
+
+Now we simply just export normal functions that apply this component in the different scenarios we want to test them.
+
+```jsx
+import { Button } from "./button.jsx";
+import './button.css';
+
+export const Primary = () => (
+    <Button variant="primary">Primary Button</Button>
+);
+
+export const Secondary = () => (
+    <Button variant="secondary">Secondary Button</Button>
+);
+
+export const Clickable = () => (
+    <Button
+        variant="primary"
+        onClick={() => alert("Button clicked!")}
+    >
+        Click me
+    </Button>
+);
+```
+
+Run ladle with `npx ladle serve` or use the script provided `npm start`.
+
+# Dependencies
+- [lucide-react](https://lucide.dev/icons/)

package/src/button/button.css

@@ -0,0 +1,43 @@
+/* Global styles */
+.ui-button {
+    padding: var(--spacing-sm) var(--spacing-md);
+    border: none;
+    border-radius: var(--radius);
+    font-size: var(--font-size);
+    color: var(--color-text);
+    cursor: pointer;
+    transition: all 0.2s;
+}
+
+/* Variants */
+.ui-button.primary {
+    background: var(--color-primary);
+}
+
+.ui-button.primary:hover {
+    background: var(--color-primary-hover);
+}
+
+.ui-button.secondary {
+    background: var(--color-secondary);
+}
+.ui-button.secondary:hover {
+    background: var(--color-secondary-hover);
+}
+
+.ui-button-icon-with-text:hover {
+    margin-right: 8px;
+    position: relative;
+    top: 5px;
+}
+
+.ui-button-icon-text {
+    margin-right: 8px;
+    position: relative;
+    top: 5px;
+}
+
+.ui-button-icon {
+    position: relative;
+    top: 5px;
+}

package/src/button/button.jsx

@@ -0,0 +1,12 @@
+import './button.css'
+import '../main.css'
+
+export function Button({ children, variant = "primary", onClick, icon, hasText, ...props }) {
+    return (
+        <button className={`ui-button ${variant}`} onClick={onClick} {...props} >
+            {icon && hasText && <span className='ui-button-icon-text'>{icon}</span>}
+            {icon && !hasText && <span className='ui-button-icont'>{icon}</span>}
+            {children}
+        </button>
+    );
+}

package/src/button.stories.jsx

@@ -0,0 +1,40 @@
+import { Button } from "./button/button.jsx";
+import { CrossIcon } from "./icons/action/CrossIcon.jsx";
+import { TrashIcon } from "./icons/content/TrashIcon.jsx";
+
+export const Primary = () => (
+    <Button variant="primary">Primary Button</Button>
+);
+
+export const Secondary = () => (
+    <Button variant="secondary">Secondary Button</Button>
+);
+
+export const Clickable = () => (
+    <Button
+        variant="primary"
+        onClick={() => alert("Button clicked!")}
+    >
+        Click me
+    </Button>
+);
+
+export const Custom = () => (
+    <Button variant="primary" style={{ backgroundColor: "red" }}>
+        Custom color
+    </Button>
+)
+
+export const IconWithText = () => (
+    <Button variant="primary" icon={<CrossIcon />} hasText={true}>
+        Button with an icon
+    </Button>
+)
+
+export const IconWithoutText = () => (
+    <Button variant="primary" icon={<CrossIcon />} />
+)
+
+export const TrashIconWithoutText = () => (
+    <Button variant="primary" icon={<TrashIcon />} />
+)

package/src/icon.stories.jsx

@@ -0,0 +1,50 @@
+import { ArrowRightIcon } from "./icons/action/ArrowRight";
+import { ArrowLeftIcon } from "./icons/action/ArrowLeft";
+import { MenuIcon } from "./icons/interface/MenuIcon";
+import { HomeIcon } from "./icons/interface/HomeIcon"
+import { SettingsIcon } from "./icons/interface/SettingsIcon"
+import { TickIcon } from "./icons/forms/TickIcon";
+import { PlusIcon } from "./icons/forms/PlusIcon";
+import { InfoIcon } from "./icons/forms/InfoIcon"
+import { TrashIcon } from "./icons/content/TrashIcon"
+import { EditIcon } from "./icons/content/EditIcon"
+
+export function Menu() {
+    return <MenuIcon />
+}
+
+export function ArrowLeft() {
+    return <ArrowLeftIcon />
+}
+
+export function ArrowRight() {
+    return <ArrowRightIcon />
+}
+
+export function Home() {
+    return <HomeIcon />
+}
+
+export function Settings() {
+    return <SettingsIcon />
+}
+
+export function Tick() {
+    return <TickIcon />
+}
+
+export function Plus() {
+    return <PlusIcon />
+}
+
+export function Info() {
+    return <InfoIcon />
+}
+
+export function Trash() {
+    return <TrashIcon />
+}
+
+export function Edit() {
+    return <EditIcon />
+}

package/src/icons/action/ArrowLeft.jsx

@@ -0,0 +1,5 @@
+import { ArrowLeft } from "lucide-react";
+
+export function ArrowLeftIcon() {
+    return <ArrowLeft color="currentColor" />
+}

package/src/icons/action/ArrowRight.jsx

@@ -0,0 +1,5 @@
+import { ArrowRight } from "lucide-react";
+
+export function ArrowRightIcon() {
+    return <ArrowRight color="currentColor" />
+}

package/src/icons/action/CrossIcon.jsx

@@ -0,0 +1,5 @@
+import { X } from "lucide-react";
+
+export function CrossIcon() {
+    return <X color="currentColor" />;
+}

package/src/icons/content/EditIcon.jsx

@@ -0,0 +1,5 @@
+import { Pencil } from "lucide-react";
+
+export function EditIcon() {
+    return <Pencil color="currentColor" />
+}

package/src/icons/content/TrashIcon.jsx

@@ -0,0 +1,5 @@
+import { Trash } from "lucide-react";
+
+export function TrashIcon() {
+    return <Trash color="currentColor" />
+}

package/src/icons/forms/InfoIcon.jsx

@@ -0,0 +1,5 @@
+import { Info } from "lucide-react";
+
+export function InfoIcon() {
+    return <Info color="currentColor" />
+}

package/src/icons/forms/PlusIcon.jsx

@@ -0,0 +1,5 @@
+import { Plus } from "lucide-react";
+
+export function PlusIcon() {
+    return <Plus color="currentColor" />
+}

package/src/icons/forms/TickIcon.jsx

@@ -0,0 +1,5 @@
+import { Check } from "lucide-react";
+
+export function TickIcon() {
+    return <Check color="currentColor" />
+}

package/src/icons/index.js

@@ -0,0 +1,10 @@
+export * from "./action/ArrowRight";
+export * from "./action/ArrowLeft";
+export * from "./interface/MenuIcon";
+export * from "./interface/HomeIcon";
+export * from "./interface/SettingsIcon";
+export * from "./forms/TickIcon";
+export * from "./forms/PlusIcon";
+export * from "./forms/InfoIcon";
+export * from "./content/TrashIcon";
+export * from "./content/EditIcon";

package/src/icons/interface/HomeIcon.jsx

@@ -0,0 +1,5 @@
+import { House } from "lucide-react";
+
+export function HomeIcon() {
+    return <House color="currentColor" />
+}

package/src/icons/interface/MenuIcon.jsx

@@ -0,0 +1,5 @@
+import { Menu } from "lucide-react";
+
+export function MenuIcon() {
+    return <Menu color="currentColor" />
+}

package/src/icons/interface/SettingsIcon.jsx

@@ -0,0 +1,5 @@
+import { Settings } from "lucide-react";
+
+export function SettingsIcon() {
+    return <Settings color="currentColor" />
+}

package/src/main.css

@@ -0,0 +1,38 @@
+/* CSS Reset */
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+/* Design Tokens */
+
+:root {
+    /* Colors */
+    --color-primary: #004A99;
+    --color-primary-hover: #0362c6;
+
+    --color-secondary: #536070;
+    --color-secondary-hover: #373c41;
+
+    --color-text: #ecedef;
+    --color-bg: #ffffff;
+    
+
+    /* Spacing */
+    --radius: 8px;
+    --spacing-sm: 8px;
+    --spacing-md: 16px;
+
+    /* Typography */
+    --font-size: 1rem;
+}
+
+@media (max-width: 640px){
+    :root {
+        --spacing-sm: 8px;
+        --spacing-md: 12px;
+
+        --font-size: 0.95rem;
+    }
+}

package/src/main.js

@@ -0,0 +1,4 @@
+export * from "./button/button.jsx";
+
+// Icons
+export * from "./icons"