jp-composter 0.1.0

package/src/SliceUI/table/helper.ts

@@ -0,0 +1,376 @@
+import type {ExtendedTheme} from '../colors/Type';
+import type {
+  TableColumn,
+  TableRowData,
+  SortDirection,
+  TableSortState,
+  TablePagination,
+  ColumnAlign,
+} from './Type';
+import {TABLE_COLOR_TOKENS} from './Token';
+
+/**
+ * Get the row key for a given record
+ */
+export const getRowKey = <T extends TableRowData>(
+  record: T,
+  index: number,
+  rowKey?: string | ((record: T) => string | number),
+): string | number => {
+  if (typeof rowKey === 'function') {
+    return rowKey(record);
+  }
+  if (typeof rowKey === 'string') {
+    return record[rowKey] as string | number;
+  }
+  return record.key ?? index;
+};
+
+/**
+ * Sort data based on column configuration
+ */
+export const sortData = <T extends TableRowData>(
+  data: T[],
+  sortState: TableSortState,
+  columns: TableColumn<T>[],
+): T[] => {
+  if (!sortState.columnKey || !sortState.order) {
+    return data;
+  }
+
+  const column = columns.find(col => col.key === sortState.columnKey);
+  if (!column || !column.sortable) {
+    return data;
+  }
+
+  const sorted = [...data].sort((a, b) => {
+    let aValue = column.dataIndex ? a[column.dataIndex] : a[column.key];
+    let bValue = column.dataIndex ? b[column.dataIndex] : b[column.key];
+
+    // Handle custom sorter function
+    if (typeof column.sorter === 'function') {
+      return column.sorter(a, b);
+    }
+
+    // Handle null/undefined values
+    if (aValue == null && bValue == null) return 0;
+    if (aValue == null) return 1;
+    if (bValue == null) return -1;
+
+    // Convert to comparable values
+    if (typeof aValue === 'string' && typeof bValue === 'string') {
+      aValue = aValue.toLowerCase();
+      bValue = bValue.toLowerCase();
+    }
+
+    if (aValue < bValue) return -1;
+    if (aValue > bValue) return 1;
+    return 0;
+  });
+
+  return sortState.order === 'desc' ? sorted.reverse() : sorted;
+};
+
+/**
+ * Filter data based on search/filter criteria
+ */
+export const filterData = <T extends TableRowData>(
+  data: T[],
+  searchText?: string,
+  columns?: TableColumn<T>[],
+): T[] => {
+  if (!searchText || !columns) {
+    return data;
+  }
+
+  const searchLower = searchText.toLowerCase();
+  
+  return data.filter(record => {
+    return columns.some(column => {
+      const value = column.dataIndex ? record[column.dataIndex] : record[column.key];
+      if (value == null) return false;
+      
+      return String(value).toLowerCase().includes(searchLower);
+    });
+  });
+};
+
+/**
+ * Paginate data based on pagination settings
+ */
+export const paginateData = <T extends TableRowData>(
+  data: T[],
+  pagination?: TablePagination | false,
+): {
+  paginatedData: T[];
+  totalPages: number;
+  startIndex: number;
+  endIndex: number;
+} => {
+  if (!pagination) {
+    return {
+      paginatedData: data,
+      totalPages: 1,
+      startIndex: 0,
+      endIndex: data.length,
+    };
+  }
+
+  const {current = 1, pageSize = 10} = pagination;
+  const startIndex = (current - 1) * pageSize;
+  const endIndex = Math.min(startIndex + pageSize, data.length);
+  const paginatedData = data.slice(startIndex, endIndex);
+  const totalPages = Math.ceil(data.length / pageSize);
+
+  return {
+    paginatedData,
+    totalPages,
+    startIndex,
+    endIndex,
+  };
+};
+
+/**
+ * Generate page numbers for pagination
+ */
+export const generatePageNumbers = (
+  current: number,
+  total: number,
+  showPages: number = 5,
+): (number | string)[] => {
+  if (total <= showPages) {
+    return Array.from({length: total}, (_, i) => i + 1);
+  }
+
+  const pages: (number | string)[] = [];
+  const half = Math.floor(showPages / 2);
+
+  let start = Math.max(1, current - half);
+  let end = Math.min(total, start + showPages - 1);
+
+  if (end - start < showPages - 1) {
+    start = Math.max(1, end - showPages + 1);
+  }
+
+  if (start > 1) {
+    pages.push(1);
+    if (start > 2) {
+      pages.push('...');
+    }
+  }
+
+  for (let i = start; i <= end; i++) {
+    pages.push(i);
+  }
+
+  if (end < total) {
+    if (end < total - 1) {
+      pages.push('...');
+    }
+    pages.push(total);
+  }
+
+  return pages;
+};
+
+/**
+ * Get text alignment style based on column alignment
+ */
+export const getTextAlign = (align?: ColumnAlign): 'left' | 'center' | 'right' => {
+  return align || 'left';
+};
+
+/**
+ * Get flex justification based on column alignment
+ */
+export const getJustifyContent = (
+  align?: ColumnAlign,
+): 'flex-start' | 'center' | 'flex-end' => {
+  switch (align) {
+    case 'center':
+      return 'center';
+    case 'right':
+      return 'flex-end';
+    default:
+      return 'flex-start';
+  }
+};
+
+/**
+ * Get background color for table elements
+ */
+export const getTableBackgroundColor = (
+  variant: keyof typeof TABLE_COLOR_TOKENS,
+  state: 'default' | 'hover' | 'selected' | 'striped',
+  theme: ExtendedTheme,
+): string => {
+  const colorTokens = TABLE_COLOR_TOKENS[variant];
+  
+  switch (state) {
+    case 'hover':
+      return theme.colors[colorTokens.hoverBackground as keyof typeof theme.colors];
+    case 'selected':
+      return theme.colors[colorTokens.selectedBackground as keyof typeof theme.colors];
+    case 'striped':
+      return theme.colors[colorTokens.stripedBackground as keyof typeof theme.colors];
+    default:
+      return theme.colors[colorTokens.background as keyof typeof theme.colors];
+  }
+};
+
+/**
+ * Get border color for table elements
+ */
+export const getTableBorderColor = (
+  variant: keyof typeof TABLE_COLOR_TOKENS,
+  theme: ExtendedTheme,
+): string => {
+  const colorTokens = TABLE_COLOR_TOKENS[variant];
+  return theme.colors[colorTokens.border as keyof typeof theme.colors];
+};
+
+/**
+ * Get text color for table elements
+ */
+export const getTableTextColor = (
+  variant: keyof typeof TABLE_COLOR_TOKENS,
+  isHeader: boolean,
+  theme: ExtendedTheme,
+): string => {
+  const colorTokens = TABLE_COLOR_TOKENS[variant];
+  const colorKey = isHeader ? colorTokens.headerText : colorTokens.text;
+  return theme.colors[colorKey as keyof typeof theme.colors];
+};
+
+/**
+ * Calculate column widths based on content and constraints
+ */
+export const calculateColumnWidths = <T extends TableRowData>(
+  columns: TableColumn<T>[],
+  containerWidth: number,
+  data: T[],
+): {[key: string]: number} => {
+  const widths: {[key: string]: number} = {};
+  let totalFixedWidth = 0;
+  let flexColumns: TableColumn<T>[] = [];
+
+  // Calculate fixed widths first
+  columns.forEach(column => {
+    if (typeof column.width === 'number') {
+      widths[column.key] = column.width;
+      totalFixedWidth += column.width;
+    } else if (typeof column.width === 'string' && column.width.endsWith('%')) {
+      const percentage = parseFloat(column.width) / 100;
+      widths[column.key] = containerWidth * percentage;
+      totalFixedWidth += widths[column.key];
+    } else {
+      flexColumns.push(column);
+    }
+  });
+
+  // Distribute remaining width among flex columns
+  const remainingWidth = Math.max(0, containerWidth - totalFixedWidth);
+  const flexWidth = remainingWidth / flexColumns.length;
+
+  flexColumns.forEach(column => {
+    let calculatedWidth = flexWidth;
+    
+    if (column.minWidth && calculatedWidth < column.minWidth) {
+      calculatedWidth = column.minWidth;
+    }
+    if (column.maxWidth && calculatedWidth > column.maxWidth) {
+      calculatedWidth = column.maxWidth;
+    }
+    
+    widths[column.key] = calculatedWidth;
+  });
+
+  return widths;
+};
+
+/**
+ * Check if all rows are selected
+ */
+export const isAllRowsSelected = <T extends TableRowData>(
+  data: T[],
+  selectedRowKeys: (string | number)[],
+  rowKey?: string | ((record: T) => string | number),
+): boolean => {
+  if (data.length === 0) return false;
+  
+  return data.every((record, index) => {
+    const key = getRowKey(record, index, rowKey);
+    return selectedRowKeys.includes(key);
+  });
+};
+
+/**
+ * Check if some rows are selected (indeterminate state)
+ */
+export const isSomeRowsSelected = <T extends TableRowData>(
+  data: T[],
+  selectedRowKeys: (string | number)[],
+  rowKey?: string | ((record: T) => string | number),
+): boolean => {
+  if (data.length === 0 || selectedRowKeys.length === 0) return false;
+  
+  const someSelected = data.some((record, index) => {
+    const key = getRowKey(record, index, rowKey);
+    return selectedRowKeys.includes(key);
+  });
+  
+  const allSelected = isAllRowsSelected(data, selectedRowKeys, rowKey);
+  
+  return someSelected && !allSelected;
+};
+
+/**
+ * Toggle all rows selection
+ */
+export const toggleAllRowsSelection = <T extends TableRowData>(
+  data: T[],
+  currentSelectedKeys: (string | number)[],
+  rowKey?: string | ((record: T) => string | number),
+): {
+  selectedRowKeys: (string | number)[];
+  selectedRows: T[];
+} => {
+  const allSelected = isAllRowsSelected(data, currentSelectedKeys, rowKey);
+  
+  if (allSelected) {
+    // Deselect all
+    return {
+      selectedRowKeys: [],
+      selectedRows: [],
+    };
+  } else {
+    // Select all
+    const selectedRowKeys = data.map((record, index) => 
+      getRowKey(record, index, rowKey)
+    );
+    return {
+      selectedRowKeys,
+      selectedRows: [...data],
+    };
+  }
+};
+
+/**
+ * Format display text for pagination
+ */
+export const formatPaginationText = (
+  current: number,
+  pageSize: number,
+  total: number,
+): {
+  range: [number, number];
+  text: string;
+} => {
+  const start = Math.min((current - 1) * pageSize + 1, total);
+  const end = Math.min(current * pageSize, total);
+  
+  return {
+    range: [start, end],
+    text: `Showing ${start}-${end} of ${total} items`,
+  };
+};

package/src/SliceUI/table/index.ts

@@ -0,0 +1,53 @@
+export { default as Table } from './Table';
+export { default as TableCell } from './TableCell';
+export { default as TableHeader } from './TableHeader';
+export { default as TableRow } from './TableRow';
+export { default as TableFooter } from './TableFooter';
+
+export type {
+  TableProps,
+  TableColumn,
+  TableRowData,
+  TableSelection,
+  TablePagination,
+  TableCellProps,
+  TableHeaderProps,
+  TableRowProps,
+  TableFooterProps,
+  TableSize,
+  TableVariant,
+  ColumnAlign,
+  SortDirection,
+  TableSortState,
+  TableFilterState,
+  TableState,
+  TableTheme,
+  TableThemeVariant,
+  TableThemeSize,
+} from './Type';
+
+export {
+  TABLE_STYLES,
+  TABLE_SPACING,
+  TABLE_TYPOGRAPHY,
+  TABLE_COLOR_TOKENS,
+  TABLE_ANIMATIONS,
+} from './Token';
+
+export {
+  getRowKey,
+  sortData,
+  filterData,
+  paginateData,
+  generatePageNumbers,
+  getTextAlign,
+  getJustifyContent,
+  getTableBackgroundColor,
+  getTableBorderColor,
+  getTableTextColor,
+  calculateColumnWidths,
+  isAllRowsSelected,
+  isSomeRowsSelected,
+  toggleAllRowsSelection,
+  formatPaginationText,
+} from './helper';

package/src/SliceUI/theme/dummyColors.tsx

@@ -0,0 +1,7 @@
+import {LightColorTokens} from '../colors/Token';
+
+export const useGetColors = () => {
+  return {
+    colors: LightColorTokens(),
+  };
+};

package/src/SliceUI/theme/theme.ts

@@ -0,0 +1,107 @@
+import type {TypographyVariants} from '../typography/Type';
+import type {IconSize} from '../icon/Type';
+import {TYPOGRAPHY_STYLES} from '../typography/Token';
+import {ICON_SIZES} from '../icon/Token';
+import type {
+  ButtonIconSizeType,
+  ButtonSizeType,
+  ButtonTextSizeType,
+} from '../button/Type';
+import {
+  BUTTON_ICON_STYLE,
+  BUTTON_STYLE,
+  BUTTON_TXT_STYLE,
+  ROUNDED_BORDER_RADIUS,
+} from '../button/Token';
+import type {ViewStyle} from 'react-native';
+import {inputTheme} from '../input/Token';
+import type {InputThemeSize} from '../input/Type';
+import {
+  CHIP_ROUNDED_BORDER_RADIUS,
+  CHIP_STYLE,
+  CHIP_TXT_STYLE,
+} from '../chip/Token';
+import {
+  BADGE_ICON_STYLE,
+  BADGE_ROUNDED_BORDER_RADIUS,
+  BADGE_STYLE,
+  BADGE_TXT_STYLE,
+} from '../badge/Token';
+import {
+  AVATAR_IMAGE_STYLE,
+  AVATAR_ROUNDED_BORDER_RADIUS,
+  AVATAR_STYLE,
+  AVATAR_TXT_STYLE,
+} from '../avatar/Token';
+import {
+  TAB_ITEM_STYLE,
+  TAB_ITEM_TXT_STYLE,
+} from '../tab/Token';
+import {spacing} from '../values/Spacing';
+import {LightColorTokens} from '../colors/Token';
+import {dimensions} from '../values/Dimension';
+
+export class SliceTheme {
+  isDebugBuildType: boolean = true; // Default value
+  automationBaseid: string = 'AK_'; // Default value
+  typographyStyles: TypographyVariants = TYPOGRAPHY_STYLES; // Default value
+  iconSizes: IconSize = ICON_SIZES; // Default value
+  buttonStyles: ButtonSizeType = BUTTON_STYLE; // Default value
+  buttonTextStyles: ButtonTextSizeType = BUTTON_TXT_STYLE; // Default value
+  buttonIconStyles: ButtonIconSizeType = BUTTON_ICON_STYLE; // Default value
+  roundButtonRadius: ViewStyle['borderRadius'] = ROUNDED_BORDER_RADIUS;
+  chipStyles: ButtonSizeType = CHIP_STYLE; // Default value
+  chipTextStyles: ButtonTextSizeType = CHIP_TXT_STYLE; // Default value
+  chipIconStyles: ButtonIconSizeType = BUTTON_ICON_STYLE; // Default value
+  chipButtonRadius: ViewStyle['borderRadius'] = CHIP_ROUNDED_BORDER_RADIUS;
+  badgeStyles: ButtonSizeType = BADGE_STYLE; // Default value
+  badgeTextStyles: ButtonTextSizeType = BADGE_TXT_STYLE; // Default value
+  badgeIconStyles: ButtonIconSizeType = BADGE_ICON_STYLE; // Default value
+  badgeButtonRadius: ViewStyle['borderRadius'] = BADGE_ROUNDED_BORDER_RADIUS;
+  avatarStyles: any = AVATAR_STYLE; // Default value
+  avatarTextStyles: any = AVATAR_TXT_STYLE; // Default value
+  avatarImageStyles: any = AVATAR_IMAGE_STYLE; // Default value
+  avatarButtonRadius: ViewStyle['borderRadius'] = AVATAR_ROUNDED_BORDER_RADIUS;
+  tabItemStyles: any = TAB_ITEM_STYLE; // Default value
+  tabItemTextStyles: any = TAB_ITEM_TXT_STYLE; // Default value
+  inputStyles: InputThemeSize = inputTheme;
+  spacing = spacing; // Add spacing to theme
+  colors = LightColorTokens(); // Add colors to theme
+  dimensions = dimensions; // Add dimensions to theme
+
+  constructor(params?: Partial<SliceTheme>) {
+    if (params) {
+      Object.assign(this, params);
+    }
+  }
+
+  /**
+   * Updates the most deeply nested properties in the theme object.
+   * Uses recursion to merge nested structures.
+   *
+   * @param updates A partial update object to apply changes deeply.
+   */
+  updateNestedStyles(updates: Partial<SliceTheme>) {
+    const mergeDeep = (target: any, source: any) => {
+      if (typeof target !== 'object' || target === null) {
+        return source; // Replace if not an object
+      }
+      if (typeof source !== 'object' || source === null) {
+        return source;
+      }
+
+      for (const key of Object.keys(source)) {
+        if (source[key] instanceof Object) {
+          target[key] = mergeDeep(target[key] || {}, source[key]);
+        } else {
+          target[key] = source[key];
+        }
+      }
+      return target;
+    };
+
+    mergeDeep(this, updates);
+  }
+}
+
+export const theme = new SliceTheme(); // Instantiates with default values

package/src/SliceUI/typography/BaseTypographyToken.ts

@@ -0,0 +1,62 @@
+import { foundationTypography } from './FoundationToken';
+
+export const baseTypographyToken = {
+  display: {
+    display1: {
+      fontSize: foundationTypography.fontSize.fontSizeThirteenHundred,
+      lineHeight: foundationTypography.lineHeight.fontLineHeight1200,
+    },
+    display2: {
+      fontSize: foundationTypography.fontSize.fontSizeTwelveHundred,
+      lineHeight: foundationTypography.lineHeight.fontLineHeight1100,
+    },
+    display3: {
+      fontSize: foundationTypography.fontSize.fontSizeElevenHundred,
+      lineHeight: foundationTypography.lineHeight.fontLineHeight1000,
+    },
+    display4: {
+      fontSize: foundationTypography.fontSize.fontSizeThousand,
+      lineHeight: foundationTypography.lineHeight.fontLineHeight900,
+    },
+  },
+  heading: {
+    heading1: {
+      fontSize: foundationTypography.fontSize.fontSizeNineHundred,
+      lineHeight: foundationTypography.lineHeight.fontLineHeight800,
+    },
+    heading2: {
+      fontSize: foundationTypography.fontSize.fontSizeEightHundred,
+      lineHeight: foundationTypography.lineHeight.fontLineHeight700,
+    },
+    heading3: {
+      fontSize: foundationTypography.fontSize.fontSizeSevenHundred,
+      lineHeight: foundationTypography.lineHeight.fontLineHeight600,
+    },
+    heading4: {
+      fontSize: foundationTypography.fontSize.fontSizeSixHundred,
+      lineHeight: foundationTypography.lineHeight.fontLineHeight500,
+    },
+    heading5: {
+      fontSize: foundationTypography.fontSize.fontSizeFiveHundred,
+      lineHeight: foundationTypography.lineHeight.fontLineHeight400,
+    },
+  },
+  body: {
+    body1: {
+      fontSize: foundationTypography.fontSize.fontSizeFourHundred,
+      lineHeight: foundationTypography.lineHeight.fontLineHeight400,
+    },
+    body2: {
+      fontSize: foundationTypography.fontSize.fontSizeThreeHundred,
+      lineHeight: foundationTypography.lineHeight.fontLineHeight300,
+    },
+    body3: {
+      fontSize: foundationTypography.fontSize.fontSizeTwoHundred,
+      lineHeight: foundationTypography.lineHeight.fontLineHeight200,
+    },
+    body4: {
+      fontSize: foundationTypography.fontSize.fontSizeHundred,
+      lineHeight: foundationTypography.lineHeight.fontLineHeight100,
+    },
+  },
+};

package/src/SliceUI/typography/FoundationToken.ts

@@ -0,0 +1,48 @@
+import {dimensions} from '../values/Dimension';
+
+export const foundationTypography = {
+  fontFamily: {
+    latoRegular: 'Lato-Regular',
+    latoMedium: 'Lato-Medium',
+    latoBold: 'Lato-Bold',
+    latoHeavy: 'Lato-Heavy',
+    latoBlack: 'Lato-Black',
+  },
+  fontWeight: {
+    fontWeightRegular: 400,
+    fontWeightMedium: 500,
+    fontWeightBold: 700,
+    fontWeightHeavy: 800,
+    fontWeightBlack: 900,
+  },
+
+  fontSize: {
+    fontSizeHundred: dimensions.dimension05,
+    fontSizeTwoHundred: dimensions.dimension06,
+    fontSizeThreeHundred: dimensions.dimension07,
+    fontSizeFourHundred: dimensions.dimension08,
+    fontSizeFiveHundred: dimensions.dimension09,
+    fontSizeSixHundred: dimensions.dimension10,
+    fontSizeSevenHundred: dimensions.dimension12,
+    fontSizeEightHundred: dimensions.dimension16,
+    fontSizeNineHundred: dimensions.dimension17,
+    fontSizeThousand: dimensions.dimension18,
+    fontSizeElevenHundred: dimensions.dimension19,
+    fontSizeTwelveHundred: dimensions.dimension20,
+    fontSizeThirteenHundred: dimensions.dimension21,
+  },
+  lineHeight: {
+    fontLineHeight100: dimensions.dimension07,
+    fontLineHeight200: dimensions.dimension09,
+    fontLineHeight300: dimensions.dimension10,
+    fontLineHeight400: dimensions.dimension12,
+    fontLineHeight500: dimensions.dimension14,
+    fontLineHeight600: dimensions.dimension16,
+    fontLineHeight700: dimensions.dimension17,
+    fontLineHeight800: dimensions.dimension18,
+    fontLineHeight900: dimensions.dimension19,
+    fontLineHeight1000: dimensions.dimension20,
+    fontLineHeight1100: dimensions.dimension21,
+    fontLineHeight1200: dimensions.dimension22,
+  },
+};