@yosang/react-ui 1.0.0 → 1.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yosang/react-ui",
-  "version": "1.0.0",
+  "version": "1.2.0",
   "description": "A small web component ui library",
   "main": "src/main.js",
   "files": [
@@ -23,7 +23,8 @@
     "react-dom": "^18 || ^19"
   },
   "dependencies": {
-    "lucide-react": "^1.7.0"
+    "lucide-react": "^1.7.0",
+    "m3-ripple": "^1.1.3"
   },
   "devDependencies": {
     "@ladle/react": "^5.1.1"

package/readme.md

@@ -48,4 +48,5 @@ export const Clickable = () => (
 Run ladle with `npx ladle serve` or use the script provided `npm start`.
 
 # Dependencies
-- [lucide-react](https://lucide.dev/icons/)
+- [lucide-react](https://lucide.dev/icons/)
+- [m3-ripple](https://github.com/SaltyAom/m3-ripple)

package/src/Forms/Input.css

@@ -0,0 +1,34 @@
+.ui-input {
+    padding: var(--spacing-sm) var(--spacing-md);
+    border-radius: var(--radius);
+    border: 1px solid var(--color-border); 
+    background-color: var(--color-bg);
+    font-size: var(--font-size);
+    transition: var(--transition-speed);
+    width: 100%;
+}
+
+.ui-input.primary {
+    border-color: var(--color-primary);
+}
+
+.ui-input.secondary {
+    border-color: var(--color-secondary);
+}
+
+.ui-input:focus {
+    outline: none;
+    border-color: var(--color-primary);
+    box-shadow: 0 0 0 2px rgba(3, 98, 198, 0.2);
+}
+
+.ui-input:disabled {
+    background-color: var(--color-tertiary);
+    color: var(--color-muted);
+    cursor: not-allowed;
+    opacity: 0.7;
+}
+
+.ui-input:hover:not(:disabled) {
+    background-color: var(--color-highlight);
+}

package/src/Forms/Input.jsx

@@ -0,0 +1,12 @@
+import './Input.css'
+import '../main.css'
+
+export function Input({ variant = "primary", type ="text", placeholder, ...props}) {
+    return (
+        <input className={`ui-input ${variant}`} placeholder={placeholder} type={type } {...props} />
+    )
+}
+
+// Todos: 
+// Add disabled functionality
+// Add icon inside the input functionality

package/src/button/{button.css → Button.css}

@@ -6,7 +6,14 @@
     font-size: var(--font-size);
     color: var(--color-text);
     cursor: pointer;
-    transition: all 0.2s;
+    transition: all var(--transition-speed);
+    display: inline-flex;
+    align-items: center;
+}
+
+.ui-button:focus {
+    outline: 2px solid var(--color-primary-hover);
+    outline-offset: 2px;
 }
 
 /* Variants */
@@ -25,19 +32,26 @@
     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;
+    top: 1px;
 }
 
 .ui-button-icon {
     position: relative;
-    top: 5px;
+    top: 1px;
+}
+
+.ui-button.disabled {
+    background-color: var(--color-tertiary);
+    color: var(--color-muted);
+    cursor: not-allowed;
+    pointer-events: none;
+    opacity: 0.7;
+}
+
+.ui-button.disabled:hover {
+    background-color: var(--color-tertiary);
+    color: var(--color-muted);
 }

package/src/button/Button.jsx

@@ -0,0 +1,16 @@
+import './Button.css'
+import '../main.css'
+
+import { Ripple } from 'm3-ripple';
+import 'm3-ripple/ripple.css'
+
+export function Button({ children, variant = "primary", onClick, icon, hasText, rippleEffect = true, ...props }) {
+    return (
+        <button className={`ui-button ${variant} ${props.disabled ? 'disabled':''}`} onClick={onClick} {...props} style={ { position: "relative" } } disabled={props.disabled}>
+            {rippleEffect && <Ripple hoverOpacity={0}/>}
+            {icon && hasText && <span className='ui-button-icon-text'>{icon}</span>}
+            {icon && !hasText && <span className='ui-button-icon'>{icon}</span>}
+            {children}
+        </button>
+    );
+}

package/src/button.stories.jsx

@@ -1,4 +1,4 @@
-import { Button } from "./button/button.jsx";
+import { Button } from "./button/Button.jsx";
 import { CrossIcon } from "./icons/action/CrossIcon.jsx";
 import { TrashIcon } from "./icons/content/TrashIcon.jsx";
 
@@ -31,10 +31,27 @@ export const IconWithText = () => (
     </Button>
 )
 
+export const IconWithTextAndNoRipple = () => (
+    <Button variant="primary" icon={<CrossIcon />} hasText={true} rippleEffect={false}>
+        Button with an icon
+    </Button>
+)
+
 export const IconWithoutText = () => (
     <Button variant="primary" icon={<CrossIcon />} />
 )
 
 export const TrashIconWithoutText = () => (
     <Button variant="primary" icon={<TrashIcon />} />
-)
+)
+
+export const DisabledButton = () => (
+    <Button variant="primary" disabled={true}>
+        Button
+    </Button>
+)
+export const DisabledButtonWithIcon = () => (
+    <Button variant="primary" icon={<CrossIcon />} hasText={true} disabled={true}>
+        Button with an icon
+    </Button>
+)

package/src/input.stories.jsx

@@ -0,0 +1,5 @@
+import { Input } from "./Forms/Input.jsx";
+
+export function TextInput() {
+    return <Input type="text" />
+}

package/src/layout-components/LoginContainer.css

@@ -0,0 +1,18 @@
+.ui-logincontainer {
+    padding: var(--spacing-sm) var(--spacing-md);
+    border-radius: var(--radius);
+    border: 1px solid var(--color-border); 
+    background-color: var(--color-bg);
+    font-size: var(--font-size);
+    width: 100%;
+
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    justify-content: center;
+    align-items: center;
+}
+
+.ui-logincontainer.non-centered {
+    align-items: flex-start;
+}

package/src/layout-components/LoginContainer.jsx

@@ -0,0 +1,10 @@
+import './LoginContainer.css'
+import '../main.css'
+
+export function LoginContainer( { children, centered = true, ...props} ) {
+    return (
+            <div className={`ui-logincontainer ${centered ? "":"non-centered"}`}>
+                {children}
+            </div>
+    )
+}

package/src/login.stories.jsx

@@ -0,0 +1,15 @@
+import { Button } from "./button/Button";
+import { Input } from "./Forms/Input";
+import { LoginContainer } from "./layout-components/LoginContainer";
+
+export function AuthExample() {
+    return (
+    <LoginContainer centered={true}>
+        <p>Username</p>
+        <Input style={{ maxWidth: "200px"}}/>
+        <p>Password</p>
+        <Input style={{ maxWidth: "200px"}}/>
+        <Button>Login</Button>
+    </LoginContainer>
+    )
+}

package/src/main.css

@@ -17,6 +17,12 @@
 
     --color-text: #ecedef;
     --color-bg: #ffffff;
+    --color-border: #c4c4c4;
+    --color-highlight: #f5f5f5;
+
+    --color-tertiary: #c4c4c4;
+    
+    --color-muted: #7a7a7a;
     
 
     /* Spacing */
@@ -26,8 +32,12 @@
 
     /* Typography */
     --font-size: 1rem;
+
+    /* Effects */
+    --transition-speed: 0.2s;
 }
 
+
 @media (max-width: 640px){
     :root {
         --spacing-sm: 8px;

package/src/main.js

@@ -1,4 +1,7 @@
-export * from "./button/button.jsx";
+// Components
+export * from "./button/Button.jsx";
+export * from "./Forms/Input.jsx";
+export * from "./layout-components/LoginContainer.jsx";
 
 // Icons
-export * from "./icons"
+export * from "./icons";

package/src/button/button.jsx

@@ -1,12 +0,0 @@
-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>
-    );
-}