@vaneui/ui 0.0.1

package/src/components/complex/sharer.tsx

@@ -0,0 +1,220 @@
+'use client';
+
+import React from 'react';
+
+type Platform = 'fb' | 'li' | 'x' | 'th' | 'em' | 'wa' | 'tg' | 're';
+
+interface SocialShareCommonProps {
+  url?: string;
+  text?: string;
+  width?: number;
+  height?: number;
+  isLink?: boolean;
+  isBlank?: boolean;
+  platforms?: Platform[];
+  containerComponent?: React.ElementType;
+  buttonComponent?: React.ElementType;
+  buttonComponents?: Partial<Record<Platform, React.ElementType>>;
+}
+
+interface FacebookShareProps {
+  hashtag?: string;
+}
+
+interface TwitterShareProps {
+  hashtags?: string;
+  via?: string;
+  related?: string;
+  inReplyTo?: string;
+}
+
+interface EmailShareProps {
+  title?: string;
+  to?: string;
+}
+
+interface WhatsAppShareProps {
+  to?: string;
+  web?: boolean;
+}
+
+interface SocialShareProps extends SocialShareCommonProps {
+  facebookProps?: FacebookShareProps;
+  twitterProps?: TwitterShareProps;
+  emailProps?: EmailShareProps;
+  whatsappProps?: WhatsAppShareProps;
+}
+
+interface ShareConfig {
+  shareUrl: string;
+  getParams: () => { [key: string]: string | number | boolean | undefined };
+}
+
+const buildQueryString = (
+  params: { [key: string]: string | number | boolean | undefined }
+): string => {
+  const validKeys = Object.keys(params).filter(
+    key => params[key] !== undefined && params[key] !== ''
+  );
+  return validKeys.length > 0
+    ? '?' +
+        validKeys
+          .map(key => `${key}=${encodeURIComponent(String(params[key]))}`)
+          .join('&')
+    : '';
+};
+
+const SocialShare: React.FC<SocialShareProps> = ({
+  url = window.location.href,
+  text = '',
+  width = 600,
+  height = 480,
+  isLink = false,
+  isBlank = true,
+  platforms,
+  containerComponent,
+  buttonComponent,
+  buttonComponents,
+  facebookProps = {},
+  twitterProps = {},
+  emailProps = {},
+  whatsappProps = {},
+}) => {
+  const shareConfigs: { [key in Platform]: ShareConfig } = {
+    fb: {
+      shareUrl: 'https://www.facebook.com/sharer/sharer.php',
+      getParams: () => ({
+        u: url,
+        hashtag: facebookProps.hashtag
+          ? facebookProps.hashtag.startsWith('#')
+            ? facebookProps.hashtag
+            : `#${facebookProps.hashtag}`
+          : '',
+        quote: text,
+      }),
+    },
+    li: {
+      shareUrl: 'https://www.linkedin.com/shareArticle',
+      getParams: () => ({
+        url,
+      }),
+    },
+    x: {
+      shareUrl: 'https://x.com/intent/tweet',
+      getParams: () => ({
+        text,
+        url,
+        hashtags: twitterProps.hashtags,
+        via: twitterProps.via,
+        related: twitterProps.related,
+        in_reply_to: twitterProps.inReplyTo,
+      }),
+    },
+    th: {
+      shareUrl: 'https://threads.net/intent/post',
+      getParams: () => ({
+        text: `${text} ${url}`,
+      }),
+    },
+    em: {
+      shareUrl: 'mailto:' + (emailProps.to || ''),
+      getParams: () => ({
+        subject: emailProps.title,
+        body: `${text}\n${url}`,
+      }),
+    },
+    wa: {
+      shareUrl: whatsappProps.web
+        ? 'https://web.whatsapp.com/send'
+        : 'https://wa.me/',
+      getParams: () => ({
+        phone: whatsappProps.to,
+        text: `${text} ${url}`,
+      }),
+    },
+    tg: {
+      shareUrl: 'https://t.me/share',
+      getParams: () => ({
+        text,
+        url,
+      }),
+    },
+    re: {
+      shareUrl: 'https://www.reddit.com/submit',
+      getParams: () => ({
+        url,
+        title: text,
+      }),
+    },
+  };
+
+  const platformLabels: { [key in Platform]: string } = {
+    fb: 'Facebook',
+    li: 'LinkedIn',
+    x: 'X',
+    th: 'Threads',
+    em: 'Email',
+    wa: 'WhatsApp',
+    tg: 'Telegram',
+    re: 'Reddit',
+  };
+
+  const buildShareUrl = (config: ShareConfig): string => {
+    const params = config.getParams();
+    const queryString = buildQueryString(params);
+    return config.shareUrl + queryString;
+  };
+
+  const openShareWindow = (shareUrl: string): void => {
+    if (isLink) {
+      if (isBlank) {
+        window.open(shareUrl, '_blank');
+      } else {
+        window.location.href = shareUrl;
+      }
+    } else {
+      const left = window.innerWidth / 2 - width / 2 + window.screenX;
+      const top = window.innerHeight / 2 - height / 2 + window.screenY;
+      const popParams = `scrollbars=no, width=${width}, height=${height}, top=${top}, left=${left}`;
+      const newWindow = window.open(shareUrl, '', popParams);
+      if (newWindow) {
+        newWindow.focus();
+      }
+    }
+  };
+
+  const handleShare = (key: Platform): void => {
+    const config = shareConfigs[key];
+    if (!config) return;
+    const shareUrl = buildShareUrl(config);
+    openShareWindow(shareUrl);
+  };
+
+  // Use the provided container component or default to 'div'
+  const Container = containerComponent || 'div';
+  // Default button component to use if no platform-specific component is provided
+  const DefaultButton = buttonComponent || 'button';
+  const platformsToShow: Platform[] =
+    platforms || (Object.keys(shareConfigs) as Platform[]);
+
+  return (
+    <Container>
+      {platformsToShow.map(key => {
+        // Use a specific button component if defined for the key
+        const Button = (buttonComponents && buttonComponents[key]) || DefaultButton;
+        const label = platformLabels[key] || key;
+        return (
+          <Button
+            key={key}
+            onClick={() => handleShare(key)}
+            title={`Share on ${label}`}
+          >
+            {label}
+          </Button>
+        );
+      })}
+    </Container>
+  );
+};
+
+export default SocialShare;

package/src/components/ui/badge.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { componentBuilder } from "./utils";
+import { TypographyComponentProps } from "./props";
+
+export const Badge: React.FC<TypographyComponentProps> = (props) =>
+  componentBuilder(props, "span", "rounded-full w-fit")
+    .withSizes({
+      xs: "px-2 py-1 text-xs",
+      sm: "px-3 py-1 text-sm",
+      md: "px-4 py-2 text-base",
+      lg: "px-5 py-2 text-lg",
+      xl: "px-6 py-3 text-xl",
+    })
+    .withAppearance({
+      default: "bg-gray-200",
+      accent: "bg-gray-200",
+      primary: "bg-blue-200",
+      secondary: "bg-gray-200",
+      tertiary: "bg-gray-200",
+      success: "bg-green-200",
+      danger: "bg-red-200",
+      warning: "bg-yellow-200",
+      info: "bg-blue-200"
+    }, {})
+    .withTypography({
+      fontWeight: { semibold: true },
+      fontFamily: { mono: true },
+      textTransform: { uppercase: true },
+      textAppearance: { secondary: true },
+    })
+    .build();
+    

package/src/components/ui/button.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { componentBuilder } from "./utils";
+import { TypographyComponentProps } from "./props";
+
+export const Button: React.FC<TypographyComponentProps> = (props) =>
+  componentBuilder(props, "button", "w-fit h-fit cursor-pointer flex justify-center items-center border border-gray-200 transition-all duration-300")
+    .withSizes({
+      xs: "px-2 py-1 rounded-sm text-xs",
+      sm: "px-3 py-1 rounded-md text-sm",
+      md: "px-4 py-2 rounded-md text-base",
+      lg: "px-6 py-3 rounded-lg text-lg",
+      xl: "px-8 py-4 rounded-xl text-xl",
+    })
+    .withSizes({
+      xs: "shadow-xs hover:shadow-sm",
+      sm: "shadow-xs hover:shadow-sm",
+      md: "shadow-sm hover:shadow-md",
+      lg: "shadow-md hover:shadow-lg",
+      xl: "shadow-lg hover:shadow-xl",
+    })
+    .withTypography({
+      fontWeight: { semibold: true },
+    })
+    .build();

package/src/components/ui/chip.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { componentBuilder } from "./utils";
+import { TypographyComponentProps } from "./props";
+
+export const Chip: React.FC<TypographyComponentProps> = (props) =>
+  componentBuilder(props, "span", "rounded-full w-fit h-fit border")
+    .withSizes({
+      xs: "px-1 py-1 rounded-sm text-xs",
+      sm: "px-2 py-1 rounded-md text-sm",
+      md: "px-2 py-1 rounded-lg text-base",
+      lg: "px-3 py-2 rounded-xl text-lg",
+      xl: "px-4 py-3 rounded-2xl text-xl",
+    })
+    .withAppearance({
+      default: "bg-gray-100",
+      accent: "bg-gray-200",
+      primary: "bg-blue-200",
+      secondary: "bg-gray-200",
+      tertiary: "bg-gray-200",
+      success: "bg-green-200",
+      danger: "bg-red-200",
+      warning: "bg-yellow-200",
+      info: "bg-blue-200"
+    }, {})
+    .withTypography({
+      fontFamily: { mono: true },
+      textAppearance: { secondary: true },
+    })
+    .build();

package/src/components/ui/commonValues.ts

@@ -0,0 +1,51 @@
+export const fontWeightClasses = {
+  thin: "font-thin",
+  extralight: "font-extralight",
+  light: "font-light",
+  normal: "font-normal",
+  medium: "font-medium",
+  semibold: "font-semibold",
+  bold: "font-bold",
+  extrabold: "font-extrabold",
+  black: "font-black",
+}
+
+export const fontStyleClasses = {
+  italic: "italic",
+  notItalic: "not-italic",
+}
+
+export const fontFamilyClasses = {
+  sans: "font-sans",
+  serif: "font-serif",
+  mono: "font-mono",
+}
+
+export const textDecorationClasses = {
+  underline: "underline",
+  lineThrough: "line-through",
+  noUnderline: "no-underline",
+  overline: "overline",
+}
+
+export const textTransformClasses = {
+  uppercase: "uppercase",
+  lowercase: "lowercase",
+  capitalize: "capitalize",
+  normalCase: "normal-case",
+}
+
+export const textAppearanceClasses = {
+  default: "text-(--text-color-default)",
+  primary: "text-(--text-color-primary)",
+  secondary: "text-(--text-color-secondary)",
+  tertiary: "text-(--text-color-tertiary)",
+  muted: "text-(--text-color-muted)",
+  link: "text-(--text-color-link)",
+
+  accent: "text-(--text-color-accent)",
+  success: "text-(--text-color-success)",
+  danger: "text-(--text-color-danger)",
+  warning: "text-(--text-color-warning)",
+  info: "text-(--text-color-info)",
+}

package/src/components/ui/divider.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+import { componentBuilder } from "./utils";
+import { BaseComponentProps } from "./props";
+
+export const Divider: React.FC<BaseComponentProps> = (props) =>
+  componentBuilder(props, "div", "bg-gray-200 w-full h-px")
+    .build();

package/src/components/ui/layout.tsx

@@ -0,0 +1,102 @@
+import React from 'react';
+import { GridProps, LayoutComponentProps, ColProps, RowProps } from "./props";
+import { componentBuilder } from "./utils";
+
+const centeredClasses = {
+  centered: "items-center justify-center",
+  vCentered: "items-center",
+  hCentered: "justify-center"
+}
+
+export const Section: React.FC<LayoutComponentProps> = (props) =>
+  componentBuilder(props, "section", "w-full flex flex-col items-start")
+    .withCentered(centeredClasses)
+    .withSizes({
+      xs: "py-6  max-lg:py-4  max-md:py-2",
+      sm: "py-8  max-lg:py-6  max-md:py-4",
+      md: "py-10 max-lg:py-8  max-md:py-6",
+      lg: "py-12 max-lg:py-10 max-md:py-8",
+      xl: "py-14 max-lg:py-12 max-md:py-10",
+    })
+    .withSizes({
+      xs: "px-4  max-lg:px-2  max-md:px-0",
+      sm: "px-6  max-lg:px-6  max-md:px-2",
+      md: "px-8  max-lg:px-6  max-md:px-4",
+      lg: "px-10 max-lg:px-8  max-md:px-6",
+      xl: "px-12 max-lg:px-10 max-md:px-8",
+    })
+    .build();
+
+export const Container: React.FC<LayoutComponentProps> = (props) =>
+  componentBuilder(props, "div", "flex flex-col mx-auto w-full")
+    .withCentered(centeredClasses)
+    .withSizes({
+      xs: "max-w-3xl gap-2  max-lg:gap-1",
+      sm: "max-w-4xl gap-4  max-lg:gap-3 max-md:gap-2",
+      md: "max-w-5xl gap-6  max-lg:gap-5 max-md:gap-4",
+      lg: "max-w-6xl gap-8  max-lg:gap-7 max-md:gap-6",
+      xl: "max-w-7xl gap-10 max-lg:gap-9 max-md:gap-8",
+    })
+    .build();
+
+const commonGaps = {
+  xs: "gap-1",
+  sm: "gap-2 max-lg:gap-1",
+  md: "gap-4 max-lg:gap-3 max-md:gap-2",
+  lg: "gap-6 max-lg:gap-5 max-md:gap-4",
+  xl: "gap-8 max-lg:gap-7 max-md:gap-6",
+}
+
+export const Col: React.FC<ColProps> = (props) =>
+  componentBuilder(props, "div", "flex flex-col")
+    .withGaps({ noGap: "gap-0" }, commonGaps)
+    .withReverse({
+      reverse: "flex-col-reverse"
+    })
+    .withCentered(centeredClasses)
+    .build();
+
+export const Row: React.FC<RowProps> = (props) =>
+  componentBuilder(props, "div", "flex flex-row")
+    .withGaps({ noGap: "gap-0" }, commonGaps)
+    .withReverse({
+      reverse: "flex-row-reverse"
+    })
+    .withCentered(centeredClasses)
+    .withBreakpoints({
+      xsCol: "max-xs:flex-col",
+      smCol: "max-sm:flex-col",
+      mdCol: "max-md:flex-col",
+      lgCol: "max-lg:flex-col",
+      xlCol: "max-xl:flex-col"
+    })
+    .withBooleanProps({
+      justifyStart: "justify-start",
+      justifyEnd: "justify-end",
+      justifyCenter: "justify-center",
+      justifyBetween: "justify-between",
+      justifyAround: "justify-around",
+      justifyEvenly: "justify-evenly",
+      justifyStretch: "justify-stretch",
+      justifyBaseline: "justify-baseline",
+    })
+    .build();
+
+const gridGaps = {
+  xs: "gap-2",
+  sm: "gap-4  max-lg:gap-2",
+  md: "gap-6  max-lg:gap-4",
+  lg: "gap-8  max-lg:gap-6 max-md:gap-4",
+  xl: "gap-10 max-lg:gap-8 max-md:gap-6",
+}
+
+export const Grid3: React.FC<GridProps> = (props) =>
+  componentBuilder(props, "div", "w-full grid grid-cols-3 max-lg:grid-cols-2 max-md:grid-cols-1")
+    .withGaps({ noGap: "gap-0" }, gridGaps)
+    .build();
+
+export const Grid4: React.FC<GridProps> = (props) =>
+  componentBuilder(props, "div", "w-full grid grid-cols-4 max-lg:grid-cols-3 max-md:grid-cols-2 max-sm:grid-cols-1")
+    .withGaps({ noGap: "gap-0" }, gridGaps)
+    .build();
+

package/src/components/ui/props.ts

@@ -0,0 +1,128 @@
+export interface SizeProps {
+  xs?: boolean;
+  sm?: boolean;
+  md?: boolean;
+  lg?: boolean;
+  xl?: boolean;
+}
+
+export interface FontFamilyProps {
+  sans?: boolean;
+  serif?: boolean;
+  mono?: boolean;
+}
+
+export interface FontWeightProps {
+  thin?: boolean;
+  extralight?: boolean;
+  light?: boolean;
+  normal?: boolean;
+  medium?: boolean;
+  semibold?: boolean;
+  bold?: boolean;
+  extrabold?: boolean;
+  black?: boolean;
+}
+
+export interface FontStyleProps {
+  italic?: boolean;
+  notItalic?: boolean;
+}
+
+export interface TextDecorationProps {
+  underline?: boolean;
+  lineThrough?: boolean;
+  noUnderline?: boolean;
+  overline?: boolean;
+}
+
+export interface TextTransformProps {
+  uppercase?: boolean;
+  lowercase?: boolean;
+  capitalize?: boolean;
+  normalCase?: boolean;
+}
+
+export interface TextAppearanceProps {
+  muted?: boolean;
+  link?: boolean;
+}
+
+export interface CommonAppearanceProps {
+  default?: boolean;
+  accent?: boolean;
+  primary?: boolean;
+  secondary?: boolean;
+  tertiary?: boolean;
+  success?: boolean;
+  danger?: boolean;
+  warning?: boolean;
+  info?: boolean;
+}
+
+export interface BreakpointProps {
+  xsCol?: boolean;
+  smCol?: boolean;
+  mdCol?: boolean;
+  lgCol?: boolean;
+  xlCol?: boolean;
+}
+
+export interface HideProps {
+  xsHide?: boolean;
+  smHide?: boolean;
+  mdHide?: boolean;
+  lgHide?: boolean;
+  xlHide?: boolean;
+}
+
+export interface PositionProps {
+  relative?: boolean;
+  absolute?: boolean;
+  fixed?: boolean;
+  sticky?: boolean;
+  static?: boolean;
+}
+
+export interface TagProps {
+  tag?: React.ElementType | string;
+}
+
+export interface ReverseProps {
+  reverse?: boolean;
+}
+
+export interface GapProps {
+  noGap?: boolean;
+}
+
+export interface CenteredProps {
+  centered?: boolean;
+  vCentered?: boolean;
+  hCentered?: boolean;
+}
+
+export interface JustifyProps {
+  justifyStart?: boolean;
+  justifyEnd?: boolean;
+  justifyCenter?: boolean;
+  justifyBetween?: boolean;
+  justifyAround?: boolean;
+  justifyEvenly?: boolean;
+  justifyStretch?: boolean;
+  justifyBaseline?: boolean;
+}
+
+export type BaseComponentProps = TagProps & Partial<SizeProps & HideProps & PositionProps> & React.HTMLProps<HTMLElement>;
+
+export type LayoutComponentProps = BaseComponentProps & ReverseProps & CenteredProps;
+
+export type FontProps = FontWeightProps & FontStyleProps & TextDecorationProps & TextTransformProps & FontFamilyProps & TextAppearanceProps & CommonAppearanceProps;
+
+export type TypographyComponentProps = BaseComponentProps & FontProps;
+
+export type GridProps = BaseComponentProps & GapProps;
+
+export type RowProps = BaseComponentProps & GapProps & ReverseProps & CenteredProps & BreakpointProps & JustifyProps;
+
+export type ColProps = BaseComponentProps & GapProps & ReverseProps & CenteredProps;

package/src/components/ui/settings.ts

@@ -0,0 +1,19 @@
+import { CommonAppearanceProps, FontFamilyProps, FontStyleProps, FontWeightProps, TextAppearanceProps, TextDecorationProps, TextTransformProps } from "./props";
+
+export type CommonAppearanceSettings = { [key in keyof CommonAppearanceProps]: boolean; };
+
+export type FontFamilySettings = { [key in keyof FontFamilyProps]: boolean; };
+export type FontWeightSettings = { [key in keyof FontWeightProps]: boolean; };
+export type FontStyleSettings = { [key in keyof FontStyleProps]: boolean; };
+export type TextAppearanceSettings = { [key in keyof TextAppearanceProps & CommonAppearanceProps]: boolean; };
+export type TextDecorationSettings = { [key in keyof TextDecorationProps]: boolean; };
+export type TextTransformSettings = { [key in keyof TextTransformProps]: boolean; };
+
+export type TypographySettings = {
+  fontFamily?: FontFamilySettings;
+  fontWeight?: FontWeightSettings;
+  fontStyle?: FontStyleSettings;
+  textAppearance?: TextAppearanceSettings;
+  textDecoration?: TextDecorationSettings;
+  textTransform?: TextTransformSettings;
+};