@vaneui/ui 0.0.6 → 0.0.8

package/package.json

@@ -1,11 +1,14 @@
 {
   "name": "@vaneui/ui",
-  "version": "0.0.6",
+  "version": "0.0.8",
   "description": "",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
   "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
   "exports": {
     ".": {
       "import": "./dist/index.esm.js",
@@ -16,11 +19,20 @@
       "import": "./dist/components/complex/index.js",
       "require": "./dist/components/complex/index.js",
       "types": "./dist/components/complex/index.d.ts"
+    },
+    "./css/ui": {
+      "import": "./dist/ui.css"
+    },
+    "./css/complex": {
+      "import": "./dist/complex.css"
     }
   },
   "scripts": {
     "clean": "rimraf dist",
-    "build": "npm run clean && rollup -c --bundleConfigAsCjs",
+    "build:js": "npm run clean && rollup -c --bundleConfigAsCjs",
+    "build:css:ui": "npx @tailwindcss/cli --input index.css --output ./../../../dist/ui.css --cwd ./src/components/ui/",
+    "build:css:complex": "npx @tailwindcss/cli --input index.css --output ./../../../dist/complex.css --cwd ./src/components/complex/",
+    "build": "npm run clean && npm run build:js && npm run build:css:ui && npm run build:css:complex",
     "prepublishOnly": "npm run build"
   },
   "keywords": [],
@@ -39,10 +51,9 @@
     "rollup": "^4.34.9",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-typescript2": "^0.36.0",
-    "typescript": "^5.8.2",
     "tailwind-merge": "^3.0.2",
-    "tslib": "^2.8.1"
-  },
-  "dependencies": {
+    "tailwindcss": "^4.0.9",
+    "tslib": "^2.8.1",
+    "typescript": "^5.8.2"
   }
 }

package/.github/workflows/npm-publish.yml

@@ -1,65 +0,0 @@
-# This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
-# For more information see: https://docs.github.com/en/actions/publishing-packages/publishing-nodejs-packages
-
-name: Npm publish on push
-
-on: [push]
-
-jobs:
-  build:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout Code
-        uses: actions/checkout@v4
-
-      - name: Setup Node.js
-        uses: actions/setup-node@v3
-        with:
-          node-version: '20'
-          registry-url: 'https://registry.npmjs.org'
-          cache: 'npm'
-
-      - name: Install Dependencies
-        run: npm ci
-
-      - name: Build Package
-        run: npm run build
-
-  publish-npm:
-    needs: build
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout Code
-        uses: actions/checkout@v4
-
-      - name: Setup Node.js
-        uses: actions/setup-node@v3
-        with:
-          node-version: '20'
-          registry-url: 'https://registry.npmjs.org'
-
-      - name: Install Dependencies
-        run: npm ci
-
-      - name: Check if Version Already Published
-        id: check_version
-        run: |
-          # Get version from package.json
-          VERSION=$(node -p "require('./package.json').version")
-          echo "Local package version: $VERSION"
-          # Get published version for the package (@vaneui/ui) or "none" if not published.
-          PUBLISHED_VERSION=$(npm view @vaneui/ui version || echo "none")
-          echo "Published package version: $PUBLISHED_VERSION"
-          if [ "$VERSION" = "$PUBLISHED_VERSION" ]; then
-            echo "Version already published. Skipping publish step."
-            echo "shouldPublish=false" >> $GITHUB_OUTPUT
-          else
-            echo "Version is new. Proceeding with publish."
-            echo "shouldPublish=true" >> $GITHUB_OUTPUT
-          fi
-
-      - name: Publish Package to npm
-        if: steps.check_version.outputs.shouldPublish == 'true'
-        run: npm publish --access public
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

package/.vscode/settings.json

@@ -1,5 +0,0 @@
-{
-  "cSpell.words": [
-    "vaneui"
-  ]
-}

package/rollup.config.mjs

@@ -1,45 +0,0 @@
-import peerDepsExternal from "rollup-plugin-peer-deps-external";
-import resolve from "@rollup/plugin-node-resolve";
-import commonjs from "@rollup/plugin-commonjs";
-import typescript from "rollup-plugin-typescript2";
-import pkg from "./package.json";
-
-export default [
-  {
-    input: "src/index.ts",
-    output: [
-      {
-        file: pkg.main,
-        format: "cjs",
-        sourcemap: true,
-      },
-      {
-        file: pkg.module,
-        format: "esm",
-        sourcemap: true,
-      },
-    ],
-    plugins: [
-      peerDepsExternal(),
-      resolve(),
-      commonjs(),
-      typescript({ tsconfig: "./tsconfig.json" }),
-    ],
-  },
-  {
-    input: "src/components/complex/index.ts",
-    output: [
-      {
-        file: "dist/components/complex/index.js",
-        format: "esm",
-        sourcemap: true,
-      },
-    ],
-    plugins: [
-      peerDepsExternal(),
-      resolve(),
-      commonjs(),
-      typescript({ tsconfig: "./tsconfig.complex.json" }),
-    ],
-  },
-];

package/src/components/complex/index.ts

@@ -1 +0,0 @@
-export { SocialShare } from "./sharer";

package/src/components/complex/sharer.tsx

@@ -1,216 +0,0 @@
-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('&')
-    : '';
-};
-
-export 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>
-  );
-};

package/src/components/ui/badge.tsx

@@ -1,32 +0,0 @@
-import React from 'react';
-import { componentBuilder } from "../utils/componentBuilder";
-import { TypographyComponentProps } from "./props/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

@@ -1,24 +0,0 @@
-import React from 'react';
-import { componentBuilder } from "../utils/componentBuilder";
-import { TypographyComponentProps } from "./props/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

@@ -1,29 +0,0 @@
-import React from 'react';
-import { componentBuilder } from "./../utils/componentBuilder";
-import { TypographyComponentProps } from "./props/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/divider.tsx

@@ -1,7 +0,0 @@
-import React from 'react';
-import { componentBuilder } from "./../utils/componentBuilder";
-import { BaseComponentProps } from "./props/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

@@ -1,102 +0,0 @@
-import React from 'react';
-import { GridProps, LayoutComponentProps, ColProps, RowProps } from "./props/props";
-import { componentBuilder } from "../utils/componentBuilder";
-
-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/commonValues.ts

@@ -1,51 +0,0 @@
-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)",
-}