@vaneui/ui 0.0.7 → 0.0.9

package/src/components/ui/props/props.ts

@@ -1,128 +0,0 @@
-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

@@ -1,19 +0,0 @@
-import { CommonAppearanceProps, FontFamilyProps, FontStyleProps, FontWeightProps, TextAppearanceProps, TextDecorationProps, TextTransformProps } from "./props/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;
-};

package/src/components/ui/typography.tsx

@@ -1,97 +0,0 @@
-import React from 'react';
-import { componentBuilder } from "../utils/componentBuilder";
-import { TypographyComponentProps } from "./props/props";
-
-export const PageTitle: React.FC<TypographyComponentProps> = (props) =>
-  componentBuilder(props, "h1")
-    .withSizes({
-      xs: "text-3xl",
-      sm: "text-4xl",
-      md: "text-5xl",
-      lg: "text-6xl",
-      xl: "text-7xl",
-    })
-    .withTypography({
-      fontWeight: { semibold: true }
-    })
-    .build();
-
-export const SectionTitle: React.FC<TypographyComponentProps> = (props) =>
-  componentBuilder(props, "h2")
-    .withSizes({
-      xs: "text-2xl",
-      sm: "text-3xl",
-      md: "text-4xl",
-      lg: "text-5xl",
-      xl: "text-6xl",
-    })
-    .withTypography({
-      fontWeight: { semibold: true }
-    })
-    .build();
-
-export const Title: React.FC<TypographyComponentProps> = (props) =>
-  componentBuilder(props, "h3")
-    .withSizes({
-      xs: "text-lg",
-      sm: "text-xl",
-      md: "text-2xl",
-      lg: "text-3xl",
-      xl: "text-4xl",
-    })
-    .withTypography({
-      fontWeight: { semibold: true }
-    })
-    .build();
-
-export const Text: React.FC<TypographyComponentProps> = (props) =>
-  componentBuilder(props, "p", "p-0 m-0")
-    .withSizes({
-      xs: "text-xs",
-      sm: "text-sm",
-      md: "text-md",
-      lg: "text-lg",
-      xl: "text-xl",
-    })
-    .withTypography({
-      textAppearance: { secondary: true }
-    })
-    .build();
-
-export const Link: React.FC<TypographyComponentProps> = (props) =>
-  componentBuilder(props, "a", "hover:underline")
-    .withSizes({
-      xs: "text-xs",
-      sm: "text-sm",
-      md: "text-md",
-      lg: "text-lg",
-      xl: "text-xl",
-    })
-    .withTypography({
-      textAppearance: { link: true }
-    })
-    .build();
-
-export const ListItem: React.FC<TypographyComponentProps> = (props) =>
-  componentBuilder(props, "li")
-    .withSizes({
-      xs: "text-xs",
-      sm: "text-sm",
-      md: "text-md",
-      lg: "text-lg",
-      xl: "text-xl",
-    })
-    .withTypography({})
-    .build();
-
-export const List: React.FC<TypographyComponentProps> = (props) =>
-  componentBuilder(props, "ul", "list-disc list-inside")
-    .withSizes({
-      xs: "text-xs",
-      sm: "text-sm",
-      md: "text-md",
-      lg: "text-lg",
-      xl: "text-xl",
-    })
-    .withTypography({})
-    .build();

package/src/components/utils/componentBuilder.tsx

@@ -1,124 +0,0 @@
-import { twMerge } from "tailwind-merge";
-import { BaseComponentProps, BreakpointProps, CenteredProps, CommonAppearanceProps, FontFamilyProps, FontStyleProps, FontWeightProps, GapProps, HideProps, PositionProps, ReverseProps, ColProps, RowProps, TextAppearanceProps, TextDecorationProps, TextTransformProps, SizeProps } from "../ui/props/props";
-import { fontFamilyClasses, fontStyleClasses, fontWeightClasses, textAppearanceClasses, textDecorationClasses, textTransformClasses } from "../ui/props/commonValues";
-import { CommonAppearanceSettings, FontFamilySettings, FontStyleSettings, FontWeightSettings, TextAppearanceSettings, TextDecorationSettings, TextTransformSettings, TypographySettings } from "../ui/settings";
-
-function getBooleanClass<T extends Record<string, boolean | undefined>>(
-  props: T,
-  classes?: Record<keyof T, string>,
-  fallbackKey?: keyof T
-): string {
-  if (!classes) return "";
-  for (const key in props) {
-    if (Object.prototype.hasOwnProperty.call(props, key) && props[key]) {
-      return classes[key] ?? "";
-    }
-  }
-  return fallbackKey ? classes[fallbackKey] ?? "" : "";
-}
-
-export function componentBuilder(
-  baseProps: BaseComponentProps,
-  defaultTag: string,
-  baseClasses?: string
-) {
-  const extraClasses: string[] = [];
-  const { className, children, tag, ...other } = baseProps;
-  const otherProps: (typeof other) & Partial<ReverseProps & CenteredProps & GapProps & RowProps & ColProps> = { ...other };
-  const propsToRemove: string[] = []
-
-  const registerKeys = (keys: string[]) => {
-    keys.forEach((key) => propsToRemove.push(key));
-  };
-
-  const withBooleanProps = <T extends Record<string, string>>(
-    propMap: Record<keyof T, string>,
-    fallbackKey?: keyof T,
-    settings?: { [key: string]: boolean }
-  ) => {
-    // Build a subset of props from otherProps for the keys in the map.
-    const propsSubset: Partial<Record<keyof T, boolean>> = {} as Partial<Record<keyof T, boolean>>;
-    const keys = Object.keys(propMap) as (keyof T)[];
-    keys.forEach((key) => {
-      if (key in otherProps) {
-        propsSubset[key] = otherProps[key as keyof typeof otherProps];
-      }
-    });
-
-    if (settings) {
-      const settingsClass = getBooleanClass(settings || {}, propMap);
-      extraClasses.push(settingsClass);
-    }
-
-    // Compute the class.
-    const newClass = getBooleanClass(propsSubset, propMap, fallbackKey);
-    extraClasses.push(newClass);
-
-    // Register all keys found in the map.
-    registerKeys(keys as string[]);
-    return builder;
-  };
-
-  function finalize(): React.ReactElement {
-    const Tag = tag || defaultTag;
-    const merged = twMerge(baseClasses, ...extraClasses, className);
-
-    propsToRemove.forEach(key => delete otherProps[key as keyof typeof otherProps])
-
-    return (
-      <Tag className={merged} {...otherProps}>
-        {children}
-      </Tag>
-    );
-  }
-
-  const builder = {
-    withBooleanProps,
-
-    withSizes: (sizeMap: Record<keyof SizeProps, string>) => withBooleanProps(sizeMap, "md"),
-    withBreakpoints: (breakpointMap: Record<keyof BreakpointProps, string>) => withBooleanProps(breakpointMap),
-    withReverse: (reverseMap: Record<keyof ReverseProps, string>) => withBooleanProps(reverseMap),
-    withCentered: (centeredMap: Record<keyof CenteredProps, string>) => withBooleanProps(centeredMap),
-    withHide: (hideMap: Record<keyof HideProps, string>) => withBooleanProps(hideMap),
-    withPosition: (positionMap: Record<keyof PositionProps, string>) => withBooleanProps(positionMap),
-    withFontWeight: (fontWeight: Record<keyof FontWeightProps, string>, settings: FontWeightSettings) => withBooleanProps(fontWeight, undefined, settings),
-    withFontStyle: (fontStyle: Record<keyof FontStyleProps, string>, settings: FontStyleSettings) => withBooleanProps(fontStyle, undefined, settings),
-    withFontFamily: (fontFamily: Record<keyof FontFamilyProps, string>, settings: FontFamilySettings) => withBooleanProps(fontFamily, undefined, settings),
-    withTextDecoration: (textDecoration: Record<keyof TextDecorationProps, string>, settings: TextDecorationSettings) => withBooleanProps(textDecoration, undefined, settings),
-    withTextTransform: (textTransform: Record<keyof TextTransformProps, string>, settings: TextTransformSettings) => withBooleanProps(textTransform, undefined, settings),
-    withTextAppearance: (appearance: Record<keyof TextAppearanceProps & CommonAppearanceProps, string>, settings: TextAppearanceSettings) => withBooleanProps(appearance, "default", settings),
-
-    withGaps: (gapMap: Record<keyof GapProps, string>, sizeMap: Record<keyof SizeProps, string>) =>
-      otherProps.noGap !== undefined && otherProps.noGap ? withBooleanProps(gapMap) : builder.withSizes(sizeMap),
-
-    withTypography: (settings: TypographySettings) => builder
-      .withFontFamily(fontFamilyClasses, settings?.fontFamily ?? {})
-      .withFontStyle(fontStyleClasses, settings?.fontStyle ?? {})
-      .withFontWeight(fontWeightClasses, settings?.fontWeight ?? {})
-      .withTextDecoration(textDecorationClasses, settings?.textDecoration ?? {})
-      .withTextTransform(textTransformClasses, settings?.textTransform ?? {})
-      .withTextAppearance(textAppearanceClasses, settings?.textAppearance ?? {}),
-
-    withAppearance: (appearance: Record<keyof CommonAppearanceProps, string>, settings: CommonAppearanceSettings) => withBooleanProps(appearance, "default", settings),
-
-    build() {
-      builder.withHide({
-        xsHide: "max-xs:hidden",
-        smHide: "max-sm:hidden",
-        mdHide: "max-md:hidden",
-        lgHide: "max-lg:hidden",
-        xlHide: "max-xl:hidden"
-      })
-      builder.withPosition({
-        relative: "relative",
-        absolute: "absolute",
-        fixed: "fixed",
-        sticky: "sticky",
-        static: "static"
-      })
-      return finalize();
-    },
-  };
-
-  return builder;
-}

package/src/index.ts

@@ -1,6 +0,0 @@
-export { Button } from "./components/ui/button";
-export { Badge } from "./components/ui/badge";
-export { Divider } from "./components/ui/divider";
-export { Chip } from "./components/ui/chip";
-export { Section, Container, Col, Row, Grid3, Grid4 } from "./components/ui/layout";
-export { Text, Title, Link, List, ListItem, SectionTitle, PageTitle } from "./components/ui/typography";

package/tsconfig.complex.json

@@ -1,11 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "rootDir": "src/components/complex",
-    "outDir": "dist/components/complex",
-    "declarationDir": "dist/components/complex"
-  },
-  "include": [
-    "src/components/complex/**/*"
-  ]
-}

package/tsconfig.json

@@ -1,15 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES2019",
-    "module": "ESNext",
-    "lib": ["DOM", "ESNext"],
-    "jsx": "react-jsx",
-    "declaration": true,
-    "outDir": "dist",
-    "moduleResolution": "node",
-    "esModuleInterop": true,
-    "skipLibCheck": true,
-    "strict": true
-  },
-  "include": ["src"]
-}