fiboui 1.0.0

package/src/structure/cards/AssetCard/index.ts

@@ -0,0 +1,158 @@
+import React, { ReactElement } from 'react';
+import { FiboBuilder, createBuilder } from '../../../core/builder';
+import { BaseProps } from '../../../core/types';
+import { Box } from '../../Box';
+import { Text } from '../../../content/Text';
+import { Row } from '../../../layout/Row';
+import { Column } from '../../../layout/Column';
+import { Spacer } from '../../../layout/Spacer';
+import { Button } from '../../../interactive/Button';
+import { Card } from '../../Card';
+import { Badge } from '../../../content/Badge';
+import { Icons } from '../../../core/icons';
+
+const AssetCardInner = React.memo((props: any) => {
+    const { image, title, price, likes, timeLeft, className, style, ...rest } = props;
+
+    return Card()
+      .classNames(['group', 'transition-all', 'duration-300', 'hover:-translate-y-1'])
+      .style({
+        width: '100%',
+        borderRadius: '24px',
+        border: 'none',
+        boxShadow: '0 10px 40px -10px rgba(0,0,0,0.05)',
+        padding: '16px',
+        background: '#fff',
+        ...style
+      })
+      .className(className)
+      .props(rest)
+      .children([
+        
+        Box().classNames(['relative', 'aspect-square', 'overflow-hidden', 'rounded-[20px]']).children([
+           Box()
+             .classNames(['w-full', 'h-full', 'bg-gray-200', 'bg-cover', 'bg-center'])
+             .style({ backgroundImage: `url(${image})` })
+             .build(),
+           
+           
+           Box()
+             .classNames(['absolute', 'top-3', 'right-3'])
+             .children(
+                Badge().variant("glass").shape("pill")
+                .icon(Box().classNames(['text-gray-400', 'hover:text-red-500']).children(Icons.Heart).build())
+                .text(`${likes}`)
+                .build()
+             ).build()
+        ]).build(),
+        
+        Spacer().height(16).build(),
+        
+        
+        Row().justifyContent("between").alignItems("start").children([
+           Column().gap(4).children([
+              Text(title).fontWeight(700).fontSize(18).color("#111827").build(), 
+              Badge().variant("neutral").text("Not for sale x1").build()
+           ]).build(),
+           Box().classNames(['text-gray-300']).children(Icons.More).build()
+        ]).build(),
+        
+        Spacer().height(16).build(),
+        
+        
+        Row().justifyContent("between").alignItems("center").children([
+           Column().gap(4).children([
+               Text("Current Bid").fontSize(11).fontWeight(600).color("#6B7280").build(),
+               Row().gap(4).alignItems("center").children([
+                   Box().classNames(['text-blue-500']).children(Icons.Eth).build(),
+                   Text(`${price} ETH`).fontSize(15).fontWeight(700).color("#111827").build(),
+               ]).build()
+           ]).build(),
+           
+           Button("Place a bid")
+             .variant("filled")
+             .shape("pill")
+             .shadow("soft")
+             .style({
+                backgroundColor: '#111827',
+                color: '#fff',
+                padding: '10px 20px',
+                fontSize: '13px',
+                fontWeight: 600
+             })
+             .build()
+        ]).build(),
+        
+         Spacer().height(12).build(),
+         
+         
+         timeLeft ? 
+           Badge()
+             .variant("accent")
+             .shape("rounded")
+             .icon(Box().children(Icons.Clock).build())
+             .text(timeLeft)
+             .style({ width: '100%' }) 
+             .build() 
+           : null
+  
+      ]).build();
+});
+
+class AssetCardBuilder extends FiboBuilder {
+  private _image: string = '';
+  private _title: string = '';
+  private _price: string | number = '';
+  private _likes: string | number = '';
+  private _timeLeft?: string;
+
+  image(url: string): this {
+    this._image = url;
+    return this;
+  }
+
+  title(text: string): this {
+    this._title = text;
+    return this;
+  }
+
+  price(value: string | number): this {
+    this._price = value;
+    return this;
+  }
+
+  likes(count: string | number): this {
+    this._likes = count;
+    return this;
+  }
+
+  timeLeft(time: string): this {
+    this._timeLeft = time;
+    return this;
+  }
+
+  build(): ReactElement {
+    const props = {
+        image: this._image,
+        title: this._title,
+        price: this._price,
+        likes: this._likes,
+        timeLeft: this._timeLeft,
+        className: this.getClassName(),
+        style: this.getStyle(),
+        ...this._props
+    };
+    return React.createElement(AssetCardInner, props);
+  }
+}
+
+
+export const AssetCard = createBuilder(AssetCardBuilder);
+
+export interface AssetCardProps extends BaseProps {
+  image: string;
+  title: string;
+  price: string | number;
+  likes: string | number;
+  timeLeft?: string;
+}

package/src/structure/cards/CollectionCard/index.ts

@@ -0,0 +1,95 @@
+import React, { ReactElement } from 'react';
+import { FiboBuilder, createBuilder } from '../../../core/builder';
+import { BaseProps } from '../../../core/types';
+import { Box } from '../../Box';
+import { Text } from '../../../content/Text';
+import { Row } from '../../../layout/Row';
+import { Column } from '../../../layout/Column';
+import { Card } from '../../Card';
+import { Icons } from '../../../core/icons';
+
+const CollectionCardInner = React.memo((props: any) => {
+    const { image, title, author, items, className, style, ...rest } = props;
+
+    return Card()
+        .classNames(['group', 'cursor-pointer'])
+        .style({
+           width: '100%',
+           borderRadius: '24px',
+           height: '320px',
+           position: 'relative',
+           overflow: 'hidden',
+           border: 'none',
+           ...style
+        })
+        .className(className)
+        .props(rest)
+        .children([
+            
+            Box().classNames(['absolute', 'inset-0', 'bg-cover', 'bg-center', 'transition-transform', 'duration-500'])
+                 .style({ backgroundImage: `url(${image})` }).build(),
+            
+            
+            Box().classNames(['absolute', 'inset-0', 'bg-gradient-to-t', 'from-black/80', 'via-black/20', 'to-transparent']).build(),
+            
+            
+             Column().classNames(['absolute', 'bottom-0', 'left-0', 'p-6']).gap(4).children([
+                Text(items).color("white").fontSize(12).classNames(['opacity-90', 'mb-1', 'uppercase', 'tracking-wider']).fontWeight(600).build(),
+                Text(title).color("white").fontSize(22).fontWeight(700).build(),
+                 Row().gap(6).alignItems("center").children([
+                    Text("Created by").color("white").fontSize(13).classNames(['opacity-80']).build(),
+                    Text(author).color("white").fontSize(13).fontWeight(600).build(),
+                    Icons.Verify
+                 ]).build()
+            ]).build()
+        ]).build();
+});
+
+class CollectionCardBuilder extends FiboBuilder {
+  private _image: string = '';
+  private _title: string = '';
+  private _author: string = '';
+  private _items: string = '';
+
+  image(url: string): this {
+    this._image = url;
+    return this;
+  }
+
+  title(text: string): this {
+    this._title = text;
+    return this;
+  }
+
+  author(text: string): this {
+    this._author = text;
+    return this;
+  }
+
+  items(text: string): this {
+    this._items = text;
+    return this;
+  }
+
+  build(): ReactElement {
+    const props = {
+        image: this._image,
+        title: this._title,
+        author: this._author,
+        items: this._items,
+        className: this.getClassName(),
+        style: this.getStyle(),
+        ...this._props
+    };
+    return React.createElement(CollectionCardInner, props);
+  }
+}
+
+
+export const CollectionCard = createBuilder(CollectionCardBuilder);
+
+export interface CollectionCardProps extends BaseProps {
+  image: string;
+  title: string;
+  author: string;
+}

package/src/structure/cards/ContentCard/index.ts

@@ -0,0 +1,127 @@
+import React, { ReactElement } from 'react';
+import { FiboBuilder, createBuilder } from '../../../core/builder';
+import { BaseProps } from '../../../core/types';
+import { Card } from '../../Card';
+import { Image } from '../../../content/Image';
+import { Text } from '../../../content/Text';
+import { Box } from '../../Box';
+
+const ContentCardInner = React.memo((props: any) => {
+    const { 
+        image, 
+        title, 
+        description, 
+        date, 
+        source, 
+        className, 
+        style 
+    } = props;
+
+    return Card()
+        .className(`overflow-hidden hover:shadow-lg transition-shadow duration-300 ${className}`)
+        .style(style)
+        .children([
+            
+            image ? Image()
+                .src(image)
+                .className("w-full object-cover rounded-[20px] mb-4") 
+                .style({ height: '200px' })
+                .build() : null,
+
+            
+            Box()
+                .className("flex flex-col gap-2")
+                .children([
+                    
+                    title ? Text(title)
+                        .fontSize(18)
+                        .fontWeight(700)
+                        .color("#111827")
+                        .lineHeight(1.25)
+                        .build() : null,
+                    
+                    
+                    description ? Text(description)
+                         .fontSize(14)
+                         .color("#4B5563")
+                         .lineHeight(1.5)
+                         .className("line-clamp-2")
+                         .build() : null,
+
+                    
+                    (source || date) ? Box()
+                        .className("flex items-center gap-2 mt-2")
+                        .children([
+                           Text(`${source ? source : ''}${source && date ? ' • ' : ''}${date ? date : ''}`)
+                                .fontSize(11)
+                                .fontWeight(600)
+                                .color("#9CA3AF")
+                                .textTransform("uppercase")
+                                .letterSpacing("0.05em")
+                                .build()
+                        ])
+                        .build() : null
+                ])
+                .build()
+        ])
+        .build();
+});
+
+class ContentCardBuilder extends FiboBuilder {
+  private _image?: string;
+  private _title?: string;
+  private _description?: string;
+  private _date?: string;
+  private _source?: string;
+
+  image(url: string): this {
+    this._image = url;
+    return this;
+  }
+
+  title(text: string): this {
+    this._title = text;
+    return this;
+  }
+
+  description(text: string): this {
+    this._description = text;
+    return this;
+  }
+
+  date(text: string): this {
+    this._date = text;
+    return this;
+  }
+
+  source(text: string): this {
+    this._source = text;
+    return this;
+  }
+
+  build(): ReactElement {
+    const props = {
+        image: this._image,
+        title: this._title,
+        description: this._description,
+        date: this._date,
+        source: this._source,
+        className: this.getClassName(),
+        style: this.getStyle(),
+        ...this._props
+    };
+    
+    return React.createElement(ContentCardInner, props);
+  }
+}
+
+
+export const ContentCard = createBuilder(ContentCardBuilder);
+
+export interface ContentCardProps extends BaseProps {
+  image?: string;
+  title?: string;
+  description?: string;
+  date?: string;
+  source?: string;
+}

package/src/structure/cards/ProfileCard/index.ts

@@ -0,0 +1,152 @@
+import React, { ReactElement } from 'react';
+import { FiboBuilder, createBuilder } from '../../../core/builder';
+import { BaseProps } from '../../../core/types';
+import { Box } from '../../Box';
+import { Text } from '../../../content/Text';
+import { Row } from '../../../layout/Row';
+import { Column } from '../../../layout/Column';
+import { Spacer } from '../../../layout/Spacer';
+import { Button } from '../../../interactive/Button';
+import { Card } from '../../Card';
+import { Avatar } from '../../../content/Avatar';
+import { Icons } from '../../../core/icons';
+
+const ProfileCardInner = React.memo((props: any) => {
+    const { banner, avatar, name, handle, stats, className, style, ...rest } = props;
+
+    return Card()
+        .style({
+          width: '100%',
+          borderRadius: '24px',
+          border: 'none',
+          boxShadow: '0 10px 40px -10px rgba(0,0,0,0.05)',
+          padding: '0',
+          overflow: 'hidden',
+          background: '#fff',
+          ...style
+        })
+        .className(className)
+        .props(rest)
+        .children([
+            
+            Box()
+              .style({ height: '100px', backgroundImage: `url(${banner})`, backgroundSize: 'cover', backgroundPosition: 'center' })
+              .build(),
+              
+            
+            Column().padding(20).alignItems("center").style({ marginTop: '-50px' }).children([
+                
+                Avatar()
+                   .image(avatar)
+                   .size(80)
+                   .border('4px solid #fff')
+                   .build(),
+                   
+                Spacer().height(12).build(),
+                
+                
+                Row().gap(6).alignItems("center").children([
+                    Text(name).fontWeight(700).fontSize(18).color("#111827").build(),
+                    Icons.Verify
+                ]).build(),
+                
+                Text(handle).fontSize(13).color("#6B7280").style({ marginTop: '4px' }).build(),
+                
+                Spacer().height(16).build(),
+                
+                
+                Button("+ Follow")
+                   .variant("filled")
+                   .shape("pill")
+                   .shadow("soft")
+                   .style({
+                       backgroundColor: '#3B82F6',
+                       color: '#fff',
+                       padding: '8px 24px',
+                       fontSize: '13px',
+                       fontWeight: 600
+                   })
+                   .build(),
+    
+                Spacer().height(24).build(),
+                
+                
+                Row().classNames(['w-full', 'border-t', 'border-gray-100', 'pt-4']).justifyContent("between").children([
+                    Column().alignItems("center").gap(4).children([
+                        Text(stats.items).fontWeight(700).fontSize(14).build(),
+                        Text("Items").fontSize(11).color("#9CA3AF").build()
+                    ]).build(),
+                    Column().alignItems("center").gap(4).children([
+                        Text(stats.owners).fontWeight(700).fontSize(14).build(),
+                        Text("Owners").fontSize(11).color("#9CA3AF").build()
+                    ]).build(),
+                     Column().alignItems("center").gap(4).children([
+                        Row().alignItems("center").gap(2).children([
+                            Box().width(8).children(Icons.Eth).build(),
+                            Text(stats.floor).fontWeight(700).fontSize(14).build(),
+                        ]).build(),
+                        Text("Floor").fontSize(11).color("#9CA3AF").build()
+                    ]).build(),
+                ]).build()
+    
+            ]).build()
+        ]).build();
+});
+
+class ProfileCardBuilder extends FiboBuilder {
+  private _banner: string = '';
+  private _avatar: string = '';
+  private _name: string = '';
+  private _handle: string = '';
+  private _stats: { items: string, owners: string, floor: string } = { items: '0', owners: '0', floor: '0' };
+
+  banner(url: string): this {
+    this._banner = url;
+    return this;
+  }
+
+  avatar(url: string): this {
+    this._avatar = url;
+    return this;
+  }
+
+  name(text: string): this {
+    this._name = text;
+    return this;
+  }
+
+  handle(text: string): this {
+    this._handle = text;
+    return this;
+  }
+
+  stats(stats: { items: string, owners: string, floor: string }): this {
+    this._stats = stats;
+    return this;
+  }
+
+  build(): ReactElement {
+    const props = {
+        banner: this._banner,
+        avatar: this._avatar,
+        name: this._name,
+        handle: this._handle,
+        stats: this._stats,
+        className: this.getClassName(),
+        style: this.getStyle(),
+        ...this._props
+    };
+    return React.createElement(ProfileCardInner, props);
+  }
+}
+
+
+export const ProfileCard = createBuilder(ProfileCardBuilder);
+
+export interface ProfileCardProps extends BaseProps {
+  banner: string;
+  avatar: string;
+  name: string;
+  handle: string;
+  stats: { items: string, owners: string, floor: string };
+}

package/src/structure/cards/index.ts

@@ -0,0 +1,5 @@
+export * from './AssetCard';
+export * from './ProfileCard';
+export * from './CollectionCard';
+export * from './ContentCard';
+export * from './variants';