diff --git a/.gitignore b/.gitignore index 3628381..8754aa2 100644 --- a/.gitignore +++ b/.gitignore @@ -41,3 +41,4 @@ stats.html analyticsrc.json +Date \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index d286294..4e77a4d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@armco/armory-react-components", - "version": "0.0.23", + "version": "0.0.24", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@armco/armory-react-components", - "version": "0.0.23", + "version": "0.0.24", "license": "ISC", "dependencies": { "@armco/analytics": "^0.2.5", diff --git a/package.json b/package.json index aa062a6..ee811e0 100644 --- a/package.json +++ b/package.json @@ -1,16 +1,15 @@ { "name": "@armco/armory-react-components", "description": "React Component Library for Armco's stack of products and services", - "version": "0.0.23", + "version": "0.0.24", "type": "module", "author": "Armco (@restruct-corporate-advantage)", "scripts": { "dev": "vite", "start": "NODE_ENV=production vite", "build": "tsc && vite build", - "build:publish": "tsc --p ./tsconfig-build.json && vite build --config vite-publish.config.ts", - "build:clean": "rm -rf ./build", - "build:sh": "./scripts/publish-build.sh", + "build:publish": "./scripts/build.sh", + "build:publish:compile": "tsc --p ./tsconfig-build.json && vite build --config vite-publish.config.ts", "generate": "plop", "atom": "plop atom", "molecule": "plop molecule", @@ -23,8 +22,7 @@ "type-check": "tsc", "publish:dry": "npm publish --dry-run", "publish:local": "./scripts/publish-local.sh", - "publish:public": "npm publish --access public", - "shpublish": "./scripts/publish.sh", + "publish:public": "./scripts/publish.sh", "storybook": "storybook dev -p 6006", "build-storybook": "storybook build" }, diff --git a/scripts/build.sh b/scripts/build.sh new file mode 100755 index 0000000..2210ce1 --- /dev/null +++ b/scripts/build.sh @@ -0,0 +1,120 @@ +#!/bin/sh + +copy_files() { + local source_dir="$1" + local destination_dir="$2" + local files_to_copy=(".tsx" ".component.scss") + + echo "Copying file from $source_dir to $destination_dir" + find "$source_dir" -type d -mindepth 1 -maxdepth 1 | while read -r directory; do + echo "Found directory: $directory" + for file in "${files_to_copy[@]}"; do + source_file="$directory/$(basename "$directory")$file" + destination_file="$destination_dir/$(basename "$directory")$file" + # echo "Copying $source_file to $destination_file" + cp "$source_file" "$destination_file" + # echo "Copied $source_file to $destination_file" + done + done +} + +search_replace_in_files() { + local directory_or_file="$1" + local search_string="$2" + local replace_string="$3" + local -a dir_names=("${@:4}") # Accept array of directory names as arguments + + echo "Initiate search and replace in files $search_string $replace_string" + + # Step 1: Check if the argument is a file + if [ -f "$directory_or_file" ]; then + # Process the single file + perl -pi -e "s|$search_string|$replace_string|g" "$directory_or_file" + else + # Step 2: Get all files recursively matching the condition (only .tsx and .scss) + files=$(find "$directory_or_file" -type f \( -name "*.tsx" -o -name "*.scss" -o -name "*.ts" \)) + # Step 3: Iterate over each file and perform search and replace + for file in $files; do + # Step 4: Iterate over each directory name in the array + for dir_name in "${dir_names[@]}"; do + # Step 5: Check if the file name starts with any of the specified directories + if [[ "$file" == *"/$dir_name/"* ]]; then + echo "Skipping file $file as it starts with '$dir_name/'" + continue 2 # Continue to the next iteration of the outer loop + fi + done + # Step 6: Perform search and replace in each file using perl + perl -pi -e "s|$search_string|$replace_string|g" "$file" + done + fi + + echo "Search and replace in TypeScript and SCSS files completed." +} + +# Function to split the string into an array based on a delimiter +split_string() { + local string="$1" + local delimiter="$2" + IFS="$delimiter" read -r -a array <<< "$string" + echo "${array[@]}" +} + +rm -rf ./lib +mkdir -p "./lib" + +file_types=("types" "utils" "config" "static" "store" "hooks") +ignore_dirs=("utils config static" "types" "utils" "utils" "" "") + +copy_files "src/app/components/atoms" "lib" +copy_files "src/app/components/molecules" "lib" +cp src/app/components/atoms/index.tsx lib/atoms.ts +cp src/app/components/molecules/index.tsx lib/molecules.ts +cp src/app/components/components.ts lib/index.ts +cp -r src/app/types lib +cp -r src/app/utils lib +cp -r src/app/config lib +cp -r src/app/static lib +cp src/app/hooks.ts "lib" +cp -r src/app/hooks "lib" +cp src/react-app-env.d.ts lib +cp src/vite-env.d.ts lib +cp package.json lib +cp src/app/components/atoms/Calendar/JustCalendar.tsx "lib" +cp src/app/components/atoms/Calendar/MonthSelector.tsx "lib" +cp src/app/components/atoms/Calendar/MonthSelector.component.scss "lib" +cp src/app/components/atoms/Calendar/JustCalendar.component.scss "lib" +cp src/app/components/atoms/Calendar/EventForm.tsx "lib" +cp src/app/components/atoms/Calendar/MonthNavigator.tsx "lib" +cp src/app/components/atoms/Calendar/MonthNavigator.component.scss "lib" +cp src/app/components/atoms/Calendar/helper.ts "lib" +cp src/app/components/molecules/Carousel/Thumbs.tsx "lib" +cp src/app/components/molecules/Carousel/cssClasses.ts "lib" +cp src/app/components/molecules/Carousel/animations.ts "lib" +cp src/app/store.ts "lib" + +for i in $(seq 0 $((${#file_types[@]} - 1))); do + echo ${file_types[i]} ${ignore_dirs[i]} + ignore_dirs_array=($(split_string "${ignore_dirs[i]}" " ")) + search_replace_in_files "lib" "\.\./\.\./\.\./${file_types[i]}" "./${file_types[i]}" "${ignore_dirs_array[@]}" + search_replace_in_files "lib" "\.\./\.\./${file_types[i]}" "./${file_types[i]}" "${ignore_dirs_array[@]}" + search_replace_in_files "lib" "\.\./${file_types[i]}" "./${file_types[i]}" "${ignore_dirs_array[@]}" +done + +search_replace_in_files "lib" "\.\./components/molecules" ".." +search_replace_in_files "lib" "\.\./components/atoms" ".." +search_replace_in_files "lib/types/types.ts" "Carousel/Carousel" "Carousel" +search_replace_in_files "lib/DatePicker.tsx" "\.\./Calendar/helper" "./helper" "types" +search_replace_in_files "lib/DateRangePicker.tsx" "\.\./Calendar/helper" "./helper" "types" +search_replace_in_files "lib/package.json" "\./build/index" "index" +search_replace_in_files "lib/types/components.interface.ts" "\.\./Calendar/helper" "../helper" +search_replace_in_files "lib" "\"\.\./\.\.\"" "\"..\"" + +sed '/componentsViewerPage/d' lib/store.ts > temp_file && mv temp_file lib/store.ts +sed '/iconsPage/d' lib/store.ts > temp_file && mv temp_file lib/store.ts +sed '/iconPage/d' lib/store.ts > temp_file && mv temp_file lib/store.ts +sed '/tasksPage/d' lib/store.ts > temp_file && mv temp_file lib/store.ts + +search_replace_in_files "lib" "\"\.\.\"" "\"\.\"" + +rm -rf build +npm run build:publish:compile \ No newline at end of file diff --git a/scripts/publish-build.sh b/scripts/publish-build.sh deleted file mode 100755 index 0ab9ff5..0000000 --- a/scripts/publish-build.sh +++ /dev/null @@ -1,67 +0,0 @@ -#!/bin/sh - -cd "$(dirname "$0")" - -copy_files() { - local source_dir="$1" - local destination_dir="$2" - local files_to_copy=(".tsx" ".component.scss") - - find "$source_dir" -type d -mindepth 1 -maxdepth 1 | while read -r directory; do - echo "Found directory: $directory" - for file in "${files_to_copy[@]}"; do - source_file="$directory/$(basename "$directory")$file" - destination_file="$destination_dir/$(basename "$directory")$file" - echo "Copying $source_file to $destination_file" - cp "$source_file" "$destination_file" - echo "Copied $source_file to $destination_file" - done - done -} - -search_replace_in_files() { - local directory="$1" - local search_string="$2" - local replace_string="$3" - - # Use find to locate TypeScript and SCSS files in the directory - find "$directory" -type f \( -name "*.tsx" -o -name "*.scss" \) -exec sh -c ' - for file do - echo "Processed: $file" - perl -pi -e "s|$search_string|$replace_string|g" "$file" - done - ' sh {} + - - echo "Search and replace in TypeScript and SCSS files completed." -} - - -# copy_files "../src/app/components/atoms" "../lib" -# copy_files "../src/app/components/molecules" "../lib" -# cp ../src/app/components/atoms/index.tsx ../lib/atoms.ts -# cp ../src/app/components/molecules/index.tsx ../lib/molecules.ts -# cp ../src/app/components/components.ts ../lib/index.ts -# cp -r ../src/app/types ../lib -# cp -r ../src/app/utils ../lib -# cp -r ../src/app/config ../lib -# cp -r ../src/app/static ../lib -# cp ../src/app/hooks.ts "../lib" -# cp -r ../src/app/pages "../lib" -# cp ../src/react-app-env.d.ts ../lib -# cp ../src/vite-env.d.ts ../lib -# cp ../tsconfig.json ../lib -# cp ../package.json ../lib -# cp ../src/app/components/atoms/Calendar/JustCalendar.tsx "../lib" -# cp ../src/app/components/atoms/Calendar/MonthSelector.tsx "../lib" -# cp ../src/app/components/atoms/Calendar/EventForm.tsx "../lib" -# cp ../src/app/components/atoms/Calendar/MonthNavigator.tsx "../lib" -# cp ../src/app/components/atoms/Calendar/helper.ts "../lib" -# cp ../src/app/store.ts "../lib" -# search_replace_in_files "../lib" "../../../types" "./types" -# search_replace_in_files "../lib" "\.\./\.\." "\." -# search_replace_in_files "../lib" "\.\./utils" "utils" -# search_replace_in_files "../lib" "\.\./config" "config" -# search_replace_in_files "../lib" "\.\./static" "static" -# search_replace_in_files "../lib" "\.\." "\." -# search_replace_in_files "../lib" "\(\.args" "\(\.\.\.args" -npm run build:publish diff --git a/scripts/publish-local.sh b/scripts/publish-local.sh index 263decd..ca33ae5 100755 --- a/scripts/publish-local.sh +++ b/scripts/publish-local.sh @@ -1,7 +1,5 @@ #!/bin/sh -semver=${1:-patch} - set -e -npm run build:sh -npm pack --pack-destination ~/__Projects__/Common \ No newline at end of file +source ./scripts/build.sh +npm pack --pack-destination ~/__Projects__/Common diff --git a/scripts/publish.sh b/scripts/publish.sh index 3326f44..83b4378 100755 --- a/scripts/publish.sh +++ b/scripts/publish.sh @@ -1,5 +1,8 @@ #!/bin/sh -source ./scripts/publish-build.sh -npm --no-git-tag-version version patch -npm publish --access public \ No newline at end of file +semver=${1:-patch} + +set -e +# source ./scripts/build.sh +npm --no-git-tag-version version ${semver} +npm publish --access public diff --git a/src/app/components/atoms/Alert/Alert.tsx b/src/app/components/atoms/Alert/Alert.tsx index 759bdfe..3d0331f 100755 --- a/src/app/components/atoms/Alert/Alert.tsx +++ b/src/app/components/atoms/Alert/Alert.tsx @@ -1,9 +1,7 @@ import { useEffect, useState } from "react" -import Icon from "../Icon" -import { AlertProps } from ".." +import { AlertProps, Icon, LoadableIcon } from ".." import { ICON_ROOT } from "../../../config/constants" import "./Alert.component.scss" -import LoadableIcon from "../LoadableIcon" let timeoutRef: any const Alert = (props: AlertProps): JSX.Element => { diff --git a/src/app/components/atoms/ArViz/ArViz.tsx b/src/app/components/atoms/ArViz/ArViz.tsx index 9f53aeb..a11c7ef 100755 --- a/src/app/components/atoms/ArViz/ArViz.tsx +++ b/src/app/components/atoms/ArViz/ArViz.tsx @@ -1,9 +1,8 @@ import { useEffect, useRef } from "react" import * as d3 from "d3" -import { ArVizProps } from ".." +import { ArVizProps, BubbleChart } from ".." import { ArVisualizationTypes } from "../../../types/enums" import { generateBubbleChart } from "../../../utils/chartGenerators" -import BubbleChart from "../BubbleChart" import { ObjectType } from "../../../types/types" import "./ArViz.component.scss" diff --git a/src/app/components/atoms/Calendar/MonthNavigator.tsx b/src/app/components/atoms/Calendar/MonthNavigator.tsx index afe921c..494e8c7 100644 --- a/src/app/components/atoms/Calendar/MonthNavigator.tsx +++ b/src/app/components/atoms/Calendar/MonthNavigator.tsx @@ -1,5 +1,4 @@ -import LoadableIcon from "../LoadableIcon" -import { MonthNavigatorProps } from ".." +import { LoadableIcon, MonthNavigatorProps } from ".." import { ArCalViews, ArMonthSelectorViews, diff --git a/src/app/components/atoms/ColorSelector/ColorSelector.tsx b/src/app/components/atoms/ColorSelector/ColorSelector.tsx index a50fe61..f728c81 100755 --- a/src/app/components/atoms/ColorSelector/ColorSelector.tsx +++ b/src/app/components/atoms/ColorSelector/ColorSelector.tsx @@ -1,7 +1,6 @@ import { useState } from "react" -import { ColorSelectorProps } from ".." +import { ColorSelectorProps, TextInput } from ".." import "./ColorSelector.component.scss" -import TextInput from "../TextInput" const ColorSelector = (props: ColorSelectorProps): JSX.Element => { const { classes, label, onChange, withSample } = props diff --git a/src/app/components/atoms/CronTab/CronTab.tsx b/src/app/components/atoms/CronTab/CronTab.tsx index 1e99669..34977ce 100755 --- a/src/app/components/atoms/CronTab/CronTab.tsx +++ b/src/app/components/atoms/CronTab/CronTab.tsx @@ -1,7 +1,5 @@ import { ChangeEvent, useEffect, useState } from "react" -import { CronTabProps } from ".." -import TextInput from "../TextInput" -import LoadableIcon from "../LoadableIcon" +import { CronTabProps, LoadableIcon, TextInput } from ".." import "./CronTab.component.scss" const cronFields = ["min", "hour", "day", "week", "month"] diff --git a/src/app/components/atoms/Date/CalTime.tsx b/src/app/components/atoms/Date/CalTime.tsx deleted file mode 100644 index 591f04c..0000000 --- a/src/app/components/atoms/Date/CalTime.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import React from "react" -import Calendar from "./Calendar" // Import your Calendar component -import TimePicker from "./TimePicker" // Import your TimePicker component - -interface CalTimeProps { - month: number - showTimePicker?: boolean - year: number - // Add other props as needed -} - -const CalTime: React.FC = ({ showTimePicker, ...otherProps }) => { - return ( -
- {/* Render the Calendar component */} - - - {/* Render the TimePicker component if showTimePicker is true */} - {showTimePicker && } -
- ) -} - -export default CalTime diff --git a/src/app/components/atoms/Date/Calendar.tsx b/src/app/components/atoms/Date/Calendar.tsx deleted file mode 100644 index ea3472b..0000000 --- a/src/app/components/atoms/Date/Calendar.tsx +++ /dev/null @@ -1,103 +0,0 @@ -import React from "react" -import moment from "moment" - -interface CalendarProps { - year: number - month: number -} - -const Calendar: React.FC = ({ year, month }) => { - const firstDayOfMonth = moment(`${year}-${month}-01`) - const lastDayOfMonth = firstDayOfMonth.clone().endOf("month") - const firstDayOfWeek = firstDayOfMonth.day() - const numberOfDays = lastDayOfMonth.date() - - interface Weekday { - abbr: string - ariaLabel: string - value: string - } - - const getWeekdayNames = (): Weekday[] => { - const weekdays = moment.weekdaysShort() - return weekdays.map((weekday) => ({ - abbr: weekday, - ariaLabel: `Select ${weekday}`, - value: weekday.substr(0, 2), - })) - } - - const renderCalendarGrid = () => { - const daysArray = Array.from( - { length: numberOfDays }, - (_, index) => index + 1, - ) - const weekdays = getWeekdayNames() - - return ( - - - - - {weekdays.map((weekday) => ( - - ))} - - - - {Array.from( - { length: Math.ceil((numberOfDays + firstDayOfWeek) / 7) }, - (_, row) => ( - - {Array.from({ length: 7 }, (_, col) => { - const day = row * 7 + col + 1 - firstDayOfWeek - return day > 0 && day <= numberOfDays ? ( - - ) : ( - - ) - })} - - ), - )} - -
- {firstDayOfMonth.format("MMMM YYYY")} -
- {weekday.value} -
handleDayClick(day)} - > - {day} -
- ) - } - - const handleDayClick = (day: number) => { - // Handle day click event here - console.log(`Selected day: ${day}`) - } - - return renderCalendarGrid() -} - -export default Calendar diff --git a/src/app/components/atoms/Date/Date.component.scss b/src/app/components/atoms/Date/Date.component.scss deleted file mode 100755 index d1be0af..0000000 --- a/src/app/components/atoms/Date/Date.component.scss +++ /dev/null @@ -1,531 +0,0 @@ -$color_1: inherit; -$color_2: #fff; -$color_3: #ccc; -$color_4: #999; -$color_5: #000; -$font-family_1: arial; -$background-color_1: #fff; -$background-color_2: #eee; -$background-color_3: #ebf4f8; -$background-color_4: #357ebd; -$background-color_5: #08c; -$border-color_1: transparent; -$border-bottom-color_1: rgba(0, 0, 0, 0.2); - -/* Larger Screen Styling */ -// .ar-DateRange { -// // position: absolute; -// color: $color_1; -// background-color: $background-color_1; -// border-radius: 4px; -// border: 1px solid #ddd; -// width: 278px; -// max-width: none; -// padding: 0; -// margin-top: 7px; -// top: 100px; -// left: 20px; -// z-index: 3001; -// // display: none; -// font-family: $font-family_1; -// font-size: 15px; -// line-height: 1em; -// &:before { -// position: absolute; -// display: inline-block; -// border-bottom-color: $border-bottom-color_1; -// content: ''; -// top: -7px; -// border-right: 7px solid transparent; -// border-left: 7px solid transparent; -// border-bottom: 7px solid #ccc; -// } -// &:after { -// position: absolute; -// display: inline-block; -// border-bottom-color: $border-bottom-color_1; -// content: ''; -// top: -6px; -// border-right: 6px solid transparent; -// border-bottom: 6px solid #fff; -// border-left: 6px solid transparent; -// } -// .drp-calendar { -// // display: none; -// max-width: 270px; -// } -// .drp-calendar.left { -// padding: 8px 0 8px 8px; -// } -// .drp-calendar.right { -// padding: 8px; -// } -// .drp-calendar.single { -// .calendar-table { -// border: none; -// } -// } -// .calendar-table { -// .next { -// span { -// color: $color_2; -// border: solid black; -// border-width: 0 2px 2px 0; -// border-radius: 0; -// display: inline-block; -// padding: 3px; -// -webkit-transform: rotate(-45deg); -// transform: rotate(-45deg); -// } -// } -// .prev { -// span { -// color: $color_2; -// border: solid black; -// border-width: 0 2px 2px 0; -// border-radius: 0; -// display: inline-block; -// padding: 3px; -// -webkit-transform: rotate(135deg); -// transform: rotate(135deg); -// } -// } -// th { -// white-space: nowrap; -// text-align: center; -// vertical-align: middle; -// min-width: 32px; -// width: 32px; -// height: 24px; -// line-height: 24px; -// font-size: 12px; -// border-radius: 4px; -// border: 1px solid transparent; -// white-space: nowrap; -// cursor: pointer; -// } -// td { -// white-space: nowrap; -// text-align: center; -// vertical-align: middle; -// min-width: 32px; -// width: 32px; -// height: 24px; -// line-height: 24px; -// font-size: 12px; -// border-radius: 4px; -// border: 1px solid transparent; -// white-space: nowrap; -// cursor: pointer; -// } -// border: 1px solid #fff; -// border-radius: 4px; -// background-color: $background-color_1; -// table { -// width: 100%; -// margin: 0; -// border-spacing: 0; -// border-collapse: collapse; -// } -// } -// td.available { -// &:hover { -// background-color: $background-color_2; -// border-color: $border-color_1; -// color: $color_1; -// } -// } -// th.available { -// &:hover { -// background-color: $background-color_2; -// border-color: $border-color_1; -// color: $color_1; -// } -// } -// td.week { -// font-size: 80%; -// color: $color_3; -// } -// th.week { -// font-size: 80%; -// color: $color_3; -// } -// td.off { -// background-color: $background-color_1; -// border-color: $border-color_1; -// color: $color_4; -// } -// td.off.in-range { -// background-color: $background-color_1; -// border-color: $border-color_1; -// color: $color_4; -// } -// td.off.start-date { -// background-color: $background-color_1; -// border-color: $border-color_1; -// color: $color_4; -// } -// td.off.end-date { -// background-color: $background-color_1; -// border-color: $border-color_1; -// color: $color_4; -// } -// td.in-range { -// background-color: $background-color_3; -// border-color: $border-color_1; -// color: $color_5; -// border-radius: 0; -// } -// td.start-date { -// border-radius: 4px 0 0 4px; -// } -// td.end-date { -// border-radius: 0 4px 4px 0; -// } -// td.start-date.end-date { -// border-radius: 4px; -// } -// td.active { -// background-color: $background-color_4; -// border-color: $border-color_1; -// color: $color_2; -// &:hover { -// background-color: $background-color_4; -// border-color: $border-color_1; -// color: $color_2; -// } -// } -// th.month { -// width: auto; -// } -// td.disabled { -// color: $color_4; -// cursor: not-allowed; -// text-decoration: line-through; -// } -// option.disabled { -// color: $color_4; -// cursor: not-allowed; -// text-decoration: line-through; -// } -// select.monthselect { -// font-size: 12px; -// padding: 1px; -// height: auto; -// margin: 0; -// cursor: default; -// margin-right: 2%; -// width: 56%; -// } -// select.yearselect { -// font-size: 12px; -// padding: 1px; -// height: auto; -// margin: 0; -// cursor: default; -// width: 40%; -// } -// select.hourselect { -// width: 50px; -// margin: 0 auto; -// background: #eee; -// border: 1px solid #eee; -// padding: 2px; -// outline: 0; -// font-size: 12px; -// } -// select.minuteselect { -// width: 50px; -// margin: 0 auto; -// background: #eee; -// border: 1px solid #eee; -// padding: 2px; -// outline: 0; -// font-size: 12px; -// } -// select.secondselect { -// width: 50px; -// margin: 0 auto; -// background: #eee; -// border: 1px solid #eee; -// padding: 2px; -// outline: 0; -// font-size: 12px; -// } -// select.ampmselect { -// width: 50px; -// margin: 0 auto; -// background: #eee; -// border: 1px solid #eee; -// padding: 2px; -// outline: 0; -// font-size: 12px; -// } -// .calendar-time { -// text-align: center; -// margin: 4px auto 0 auto; -// line-height: 30px; -// position: relative; -// select.disabled { -// color: $color_3; -// cursor: not-allowed; -// } -// } -// .drp-buttons { -// clear: both; -// text-align: right; -// padding: 8px; -// border-top: 1px solid #ddd; -// // display: none; -// line-height: 12px; -// vertical-align: middle; -// .btn { -// margin-left: 8px; -// font-size: 12px; -// font-weight: bold; -// padding: 4px 8px; -// } -// } -// .drp-selected { -// display: inline-block; -// font-size: 12px; -// padding-right: 8px; -// } -// .ranges { -// float: none; -// text-align: left; -// margin: 0; -// ul { -// list-style: none; -// margin: 0 auto; -// padding: 0; -// width: 100%; -// } -// li { -// font-size: 12px; -// padding: 8px 12px; -// cursor: pointer; -// &:hover { -// background-color: $background-color_2; -// } -// } -// li.active { -// background-color: $background-color_5; -// color: $color_2; -// } -// } -// &.opensleft { -// &:before { -// right: 9px; -// } -// &:after { -// right: 10px; -// } -// } -// &.openscenter { -// &:before { -// left: 0; -// right: 0; -// width: 0; -// margin-left: auto; -// margin-right: auto; -// } -// &:after { -// left: 0; -// right: 0; -// width: 0; -// margin-left: auto; -// margin-right: auto; -// } -// } -// &.opensright { -// &:before { -// left: 9px; -// } -// &:after { -// left: 10px; -// } -// } -// &.drop-up { -// margin-top: -7px; -// &:before { -// top: initial; -// bottom: -7px; -// border-bottom: initial; -// border-top: 7px solid #ccc; -// } -// &:after { -// top: initial; -// bottom: -6px; -// border-bottom: initial; -// border-top: 6px solid #fff; -// } -// } -// &.single { -// .ar-DateRange { -// .ranges { -// float: none; -// } -// } -// .drp-calendar { -// float: none; -// } -// .drp-selected { -// // display: none; -// } -// } -// &.show-calendar { -// .drp-calendar { -// display: block; -// } -// .drp-buttons { -// display: block; -// } -// .ranges { -// margin-top: 8px; -// } -// } -// &.auto-apply { -// .drp-buttons { -// // display: none; -// } -// } -// &.show-ranges.single.rtl { -// .drp-calendar.left { -// border-right: 1px solid #ddd; -// } -// } -// &.show-ranges.single.ltr { -// .drp-calendar.left { -// border-left: 1px solid #ddd; -// } -// } -// &.show-ranges.rtl { -// .drp-calendar.right { -// border-right: 1px solid #ddd; -// } -// } -// &.show-ranges.ltr { -// .drp-calendar.left { -// border-left: 1px solid #ddd; -// } -// } -// } -// @media (min-width: 564px) { -// .ar-DateRange { -// width: auto; -// direction: ltr; -// text-align: left; -// .ranges { -// ul { -// width: 140px; -// } -// float: left; -// } -// .drp-calendar.left { -// clear: left; -// margin-right: 0; -// .calendar-table { -// border-right: none; -// border-top-right-radius: 0; -// border-bottom-right-radius: 0; -// padding-right: 8px; -// } -// } -// .drp-calendar.right { -// margin-left: 0; -// .calendar-table { -// border-left: none; -// border-top-left-radius: 0; -// border-bottom-left-radius: 0; -// } -// } -// .drp-calendar { -// float: left; -// } -// &.single { -// .ranges { -// ul { -// width: 100%; -// } -// float: left; -// } -// .drp-calendar.left { -// clear: none; -// } -// .drp-calendar { -// float: left; -// } -// } -// } -// } -// @media (min-width: 730px) { -// .ar-DateRange { -// .ranges { -// width: auto; -// float: left; -// } -// .drp-calendar.left { -// clear: none !important; -// } -// &.rtl { -// .ranges { -// float: right; -// } -// } -// } -// } - - -.ar-Date { - /* Styles for the Date component */ - background-color: #fff; /* Background color for the Date component */ - padding: 16px; /* Padding for the Date component */ - border: 1px solid #ddd; /* Border for the Date component */ - font-size: 0.75rem; - - &__header { - /* Styles for the header section of the Date component */ - font-size: 1.25rem; /* Font size for the header */ - font-weight: bold; /* Bold font for the header */ - margin-bottom: 16px; /* Margin at the bottom of the header */ - } - - /* Add more styles for child elements of Date component */ -} - -/* RangeSelector component styles */ -.ar-RangeSelector { - /* Styles for the RangeSelector component */ - /* Add RangeSelector-specific styles here */ -} - -.ar-Calendar { - -} - -.ar-TimePicker { - -} - -.ar-Slider { - - .ar-Slider__items-container { - scroll-snap-type: x mandatory; - overflow-x: auto; - white-space: nowrap; - - .ar-Slider__item { - transition: all 0.3s; - } - - .ar-CalTime { - width: 12rem; - height: 10rem; - /* Styles for the CalTime component within CalView */ - /* Add CalTime-specific styles here */ - } - } -} - -/* Add more styles for other classes as needed */ diff --git a/src/app/components/atoms/Date/Date.test.ts b/src/app/components/atoms/Date/Date.test.ts deleted file mode 100755 index 7ffd17c..0000000 --- a/src/app/components/atoms/Date/Date.test.ts +++ /dev/null @@ -1,6 +0,0 @@ -import React from "react" -import Date from "./Date" - -describe("Date", () => { - it("renders without error", () => {}) -}) diff --git a/src/app/components/atoms/Date/Date.tsx b/src/app/components/atoms/Date/Date.tsx deleted file mode 100755 index 39301a3..0000000 --- a/src/app/components/atoms/Date/Date.tsx +++ /dev/null @@ -1,114 +0,0 @@ -import { useState } from "react" -import { DateProps } from ".." -import { ArButtonVariants, ArSizes } from "../../../types/enums" -import RangeSelector from "./RangeSelector" -import Slider from "./Slider" -import Button from "../Button" -import CalTime from "./CalTime" -import "./Date.component.scss" - -const Date: React.FC = (props) => { - const { - minDate, - maxDate, - startDate, - endDate, - isRangeSelector, - showTimePicker, - timePickerSeconds, - is12HourFormat, - showQuickSelectors, - customSelectors, - showTodayInFooter, - showDropdowns, - } = props - // State for current month and year - const [currentMonth, setCurrentMonth] = useState( - (startDate?.getMonth() || 0) + 1, - ) - const [currentYear, setCurrentYear] = useState( - startDate?.getFullYear() as number, - ) - - // Function to handle month change - const handleMonthChange = (newMonth: number) => { - // Update the current month state - setCurrentMonth(newMonth) - } - - // Function to handle year change - const handleYearChange = (newYear: number) => { - // Update the current year state - setCurrentYear(newYear) - } - - const numberOfViews = isRangeSelector ? 4 : 3 - - const items = Array.from({ length: numberOfViews }).map((_, index) => ( -
- -
- )) - - return ( -
- {/* Add responsive classes for mobile */} -
- {showQuickSelectors && ( -
- -
- )} - {/* Second Column */} -
- {/* Use Slider component */} - - {/* Render your calendar instances and time pickers here */} - {/* Example for rendering calendar instances */} - {items} - -
-
- {/* Second Row */} -
-
-
- {showTodayInFooter && ( -
-
-
-
- - ) -} - -export default Date diff --git a/src/app/components/atoms/Date/RangeSelector.tsx b/src/app/components/atoms/Date/RangeSelector.tsx deleted file mode 100644 index 25a2358..0000000 --- a/src/app/components/atoms/Date/RangeSelector.tsx +++ /dev/null @@ -1,43 +0,0 @@ -import React from "react" -import { List } from "../.." // Import your pre-existing List component -import { ListItemProps } from ".." - -interface RangeSelectorProps { - customSelectors?: Array - isSingle?: boolean -} - -const RangeSelector: React.FC = ({ - isSingle, - customSelectors, -}) => { - const defaultSingleDatePickerRanges: Array = [ - { label: "Today", onClick: () => {} }, - { label: "Yesterday", onClick: () => {} }, - { label: "Tomorrow", onClick: () => {} }, - { label: "Minus 7 Days", onClick: () => {} }, - { label: "Minus 30 Days", onClick: () => {} }, - { label: "Minus 365 Days", onClick: () => {} }, - ] - - const defaultDateRangeRanges: Array = [ - { label: "Last 3 Days", onClick: () => {} }, - { label: "Last Week", onClick: () => {} }, - { label: "Last Month", onClick: () => {} }, - { label: "Last 6 Months", onClick: () => {} }, - { label: "Custom", onClick: () => {} }, - ] - - const ranges = customSelectors - ? customSelectors - : isSingle - ? defaultSingleDatePickerRanges - : defaultDateRangeRanges - return ( -
- -
- ) -} - -export default RangeSelector diff --git a/src/app/components/atoms/Date/Slider.component.scss b/src/app/components/atoms/Date/Slider.component.scss deleted file mode 100644 index 1a2b04c..0000000 --- a/src/app/components/atoms/Date/Slider.component.scss +++ /dev/null @@ -1,43 +0,0 @@ -.slider-container { - display: flex; - overflow: hidden; - position: relative; - width: 300px; /* Adjust container width as needed */ - margin: 0 auto; -} - -.slide { - flex: 0 0 100%; - height: 100px; /* Adjust slide height as needed */ - display: flex; - align-items: center; - justify-content: center; - font-size: 24px; - background-color: #e0e0e0; - transition: transform 0.3s ease-in-out; -} - -.slide.active { - background-color: #007bff; - color: white; -} - -.prev-button, -.next-button { - position: absolute; - top: 50%; - transform: translateY(-50%); - padding: 5px 10px; - background-color: #007bff; - color: white; - border: none; - cursor: pointer; -} - -.prev-button { - left: 0; -} - -.next-button { - right: 0; -} diff --git a/src/app/components/atoms/Date/Slider.tsx b/src/app/components/atoms/Date/Slider.tsx deleted file mode 100644 index 39c7178..0000000 --- a/src/app/components/atoms/Date/Slider.tsx +++ /dev/null @@ -1,160 +0,0 @@ -import React, { useState, ReactNode, useRef, MutableRefObject } from "react" -import LoadableIcon from "../LoadableIcon" -import { formatDate } from "./dateRangeFunctions" -import { Helper } from "../../../utils" -import Carousel from "../../molecules/Carousel" - -interface SliderProps { - children: ReactNode[] - swipeThreshold?: number - month: number - year: number -} - -// function scrollToNext( -// currentIndex: number, -// items: Array, -// container: MutableRefObject, -// ) { -// if (currentIndex < items.length - 1) { -// currentIndex++ -// const nextItem = items[currentIndex] -// ;(container.current as unknown as JSX.Element)?.scroll({ -// left: nextItem?.offsetLeft, -// behavior: "smooth", // Use smooth behavior for smooth scrolling -// }) -// } -// } - -function scrollToNext( - currentIndex: number, - container: MutableRefObject, -) { - if ( - container.current?.children && - Array.isArray(container.current?.children) && - currentIndex < container.current?.children.length - 1 - ) { - currentIndex++ - const nextItem = container.current?.children[currentIndex] - nextItem?.scrollIntoView({ - behavior: "smooth", - block: "nearest", - inline: "start", - }) - } -} - -const Slider: React.FC = ({ - children, - month, - year, - swipeThreshold = 25, -}) => { - const sliderRef = useRef(null) - const itemsContainerRef = useRef(null) - const [currentIndex, setCurrentIndex] = useState(0) - const [startX, setStartX] = useState(null) - - const numberOfViews = children.length - - const slideToNext = () => { - const nextIndex = (currentIndex + 1) % children.length - setCurrentIndex(nextIndex) - } - - const slideToPrevious = () => { - const previousIndex = (currentIndex - 1 + children.length) % children.length - setCurrentIndex(previousIndex) - } - - const handleTouchStart = (e: React.TouchEvent) => { - setStartX(e.touches[0].clientX) - } - - const handleTouchMove = (e: React.TouchEvent) => { - if (startX !== null) { - const deltaX = e.touches[0].clientX - startX - if (deltaX > swipeThreshold) { - // Swipe right, move to the previous slide - slideToPrevious() - } else if (deltaX < -swipeThreshold) { - // Swipe left, move to the next slide - slideToNext() - } - } - } - - const handleTouchEnd = () => { - setStartX(null) - } - - // Function to handle changing to the previous calendar view - const handlePrev = () => { - // Update the currentIndex to navigate to the previous view - setCurrentIndex((prevIndex) => Math.max(prevIndex - 1, 0)) - } - - // Function to handle changing to the next calendar view - const handleNext = () => { - scrollToNext( - Math.min(currentIndex + 1, numberOfViews - 1), - itemsContainerRef, - ) - // Update the currentIndex to navigate to the next view - // setCurrentIndex((prevIndex) => Math.min(prevIndex + 1, numberOfViews - 1)) - } - - return ( - // Inside Slider component's return statement -
- {/*
- -
{formatDate(month, year)}
- -
-
- {children.map((child, index) => ( -
- {child} -
- ))} -
*/} - - {children} - -
- ) -} - -export default Slider diff --git a/src/app/components/atoms/Date/TimePicker.tsx b/src/app/components/atoms/Date/TimePicker.tsx deleted file mode 100644 index 8625567..0000000 --- a/src/app/components/atoms/Date/TimePicker.tsx +++ /dev/null @@ -1,70 +0,0 @@ -import React from "react" -import { Dropdown } from "../.." // Import your Dropdown component - -interface TimePickerProps { - is12HourFormat?: boolean - showSeconds?: boolean -} - -const TimePicker: React.FC = ({ - is12HourFormat, - showSeconds, -}) => { - const getOptions = (type: "hour" | "minute" | "second") => { - const options = [] - const max = type === "hour" ? (is12HourFormat ? 12 : 24) : 60 - const format = type === "hour" ? 1 : 2 - - for (let i = 0; i < max; i++) { - const label = String(i).padStart(format, "0") - options.push({ label, value: i }) - } - - return options - } - - const hourOptions = getOptions("hour") - const minuteOptions = getOptions("minute") - const secondOptions = showSeconds ? getOptions("second") : [] - const amPmOptions = is12HourFormat - ? [ - { label: "AM", value: "AM" }, - { label: "PM", value: "PM" }, - ] - : [] - - return ( -
- {}} - /> - : - {}} - /> - {showSeconds && ( - <> - : - {}} - /> - - )} - {is12HourFormat && ( - {}} - /> - )} -
- ) -} - -export default TimePicker diff --git a/src/app/components/atoms/Date/dateRangeFunctions.ts b/src/app/components/atoms/Date/dateRangeFunctions.ts deleted file mode 100644 index ee93d3a..0000000 --- a/src/app/components/atoms/Date/dateRangeFunctions.ts +++ /dev/null @@ -1,1680 +0,0 @@ -// import moment, { Moment } from "moment" -// import { ObjectType } from "../../../types/types" - -import moment, { Moment, MomentInput } from "moment" -import { DEFAULT_LOCALE } from "../../../config/constants" -import { DateRangeProps } from ".." -import { Locale } from "../../../types/entity.interface" -import { ArrayType, ObjectType } from "../../../types/types" - -export function setStartDate( - startDate: string | ObjectType, - options: DateRangeProps, -) { - const returnObj: { [key: string]: Moment } = {} - if (typeof startDate === "string") - returnObj.startDate = moment(startDate, options.locale?.format) - - if (typeof startDate === "object") returnObj.startDate = moment(startDate) - - if (!options.timePicker) - options.startDate = (options.startDate as Moment).startOf("day") - - if (options.timePicker && options.timePickerIncrement) - (options.startDate as Moment).minute( - Math.round( - (options.startDate as Moment).minute() / options.timePickerIncrement, - ) * options.timePickerIncrement, - ) - - if ( - options.minDate && - (options.startDate as Moment).isBefore(options.minDate as Moment) - ) { - options.startDate = (options.minDate as Moment).clone() - if (options.timePicker && options.timePickerIncrement) - options.startDate.minute( - Math.round(options.startDate.minute() / options.timePickerIncrement) * - options.timePickerIncrement, - ) - } - - if ( - options.maxDate && - (options.startDate as Moment).isAfter(options.maxDate as Moment) - ) { - options.startDate = (options.maxDate as Moment).clone() - if (options.timePicker && options.timePickerIncrement) - options.startDate.minute( - Math.floor( - (options.startDate as Moment).minute() / options.timePickerIncrement, - ) * options.timePickerIncrement, - ) - } - - if (!options.isShowing && options.updateElement) options.updateElement() - - options.updateMonthsInView && options.updateMonthsInView() -} - -// export function setEndDate(endDate) { -// if (typeof endDate === "string") -// this.endDate = moment(endDate, this.locale.format) - -// if (typeof endDate === "object") this.endDate = moment(endDate) - -// if (!this.timePicker) this.endDate = this.endDate.endOf("day") - -// if (this.timePicker && this.timePickerIncrement) -// this.endDate.minute( -// Math.round(this.endDate.minute() / this.timePickerIncrement) * -// this.timePickerIncrement, -// ) - -// if (this.endDate.isBefore(this.startDate)) -// this.endDate = this.startDate.clone() - -// if (this.maxDate && this.endDate.isAfter(this.maxDate)) -// this.endDate = this.maxDate.clone() - -// if ( -// this.maxSpan && -// this.startDate.clone().add(this.maxSpan).isBefore(this.endDate) -// ) -// this.endDate = this.startDate.clone().add(this.maxSpan) - -// this.previousRightTime = this.endDate.clone() - -// this.container -// .find(".drp-selected") -// .html( -// this.startDate.format(this.locale.format) + -// this.locale.separator + -// this.endDate.format(this.locale.format), -// ) - -// if (!this.isShowing) this.updateElement() - -// this.updateMonthsInView() -// } - -// export function isInvalidDate() { -// return false -// } - -// export function isCustomDate() { -// return false -// } - -// export function updateView() { -// if (this.timePicker) { -// this.renderTimePicker("left") -// this.renderTimePicker("right") -// if (!this.endDate) { -// this.container -// .find(".right .calendar-time select") -// .prop("disabled", true) -// .addClass("disabled") -// } else { -// this.container -// .find(".right .calendar-time select") -// .prop("disabled", false) -// .removeClass("disabled") -// } -// } -// if (this.endDate) -// this.container -// .find(".drp-selected") -// .html( -// this.startDate.format(this.locale.format) + -// this.locale.separator + -// this.endDate.format(this.locale.format), -// ) -// this.updateMonthsInView() -// this.updateCalendars() -// this.updateFormInputs() -// } - -// export function updateMonthsInView() { -// if (this.endDate) { -// //if both dates are visible already, do nothing -// if ( -// !this.singleDatePicker && -// this.leftCalendar.month && -// this.rightCalendar.month && -// (this.startDate.format("YYYY-MM") == -// this.leftCalendar.month.format("YYYY-MM") || -// this.startDate.format("YYYY-MM") == -// this.rightCalendar.month.format("YYYY-MM")) && -// (this.endDate.format("YYYY-MM") == -// this.leftCalendar.month.format("YYYY-MM") || -// this.endDate.format("YYYY-MM") == -// this.rightCalendar.month.format("YYYY-MM")) -// ) { -// return -// } - -// this.leftCalendar.month = this.startDate.clone().date(2) -// if ( -// !this.linkedCalendars && -// (this.endDate.month() != this.startDate.month() || -// this.endDate.year() != this.startDate.year()) -// ) { -// this.rightCalendar.month = this.endDate.clone().date(2) -// } else { -// this.rightCalendar.month = this.startDate.clone().date(2).add(1, "month") -// } -// } else { -// if ( -// this.leftCalendar.month.format("YYYY-MM") != -// this.startDate.format("YYYY-MM") && -// this.rightCalendar.month.format("YYYY-MM") != -// this.startDate.format("YYYY-MM") -// ) { -// this.leftCalendar.month = this.startDate.clone().date(2) -// this.rightCalendar.month = this.startDate.clone().date(2).add(1, "month") -// } -// } -// if ( -// this.maxDate && -// this.linkedCalendars && -// !this.singleDatePicker && -// this.rightCalendar.month > this.maxDate -// ) { -// this.rightCalendar.month = this.maxDate.clone().date(2) -// this.leftCalendar.month = this.maxDate.clone().date(2).subtract(1, "month") -// } -// } - -// export function updateCalendars() { -// if (this.timePicker) { -// let hour, minute, second -// if (this.endDate) { -// hour = parseInt(this.container.find(".left .hourselect").val(), 10) -// minute = parseInt(this.container.find(".left .minuteselect").val(), 10) -// if (isNaN(minute)) { -// minute = parseInt( -// this.container.find(".left .minuteselect option:last").val(), -// 10, -// ) -// } -// second = this.timePickerSeconds -// ? parseInt(this.container.find(".left .secondselect").val(), 10) -// : 0 -// if (!this.timePicker24Hour) { -// const ampm = this.container.find(".left .ampmselect").val() -// if (ampm === "PM" && hour < 12) hour += 12 -// if (ampm === "AM" && hour === 12) hour = 0 -// } -// } else { -// hour = parseInt(this.container.find(".right .hourselect").val(), 10) -// minute = parseInt(this.container.find(".right .minuteselect").val(), 10) -// if (isNaN(minute)) { -// minute = parseInt( -// this.container.find(".right .minuteselect option:last").val(), -// 10, -// ) -// } -// second = this.timePickerSeconds -// ? parseInt(this.container.find(".right .secondselect").val(), 10) -// : 0 -// if (!this.timePicker24Hour) { -// const ampm = this.container.find(".right .ampmselect").val() -// if (ampm === "PM" && hour < 12) hour += 12 -// if (ampm === "AM" && hour === 12) hour = 0 -// } -// } -// this.leftCalendar.month.hour(hour).minute(minute).second(second) -// this.rightCalendar.month.hour(hour).minute(minute).second(second) -// } - -// this.renderCalendar("left") -// this.renderCalendar("right") - -// //highlight any predefined range matching the current start and end dates -// this.container.find(".ranges li").removeClass("active") -// if (this.endDate == null) return - -// this.calculateChosenLabel() -// } - -// export function renderCalendar(side) { -// // -// // Build the matrix of dates that will populate the calendar -// // - -// let calendar = side == "left" ? this.leftCalendar : this.rightCalendar -// const month = calendar.month.month() -// const year = calendar.month.year() -// const hour = calendar.month.hour() -// const minute = calendar.month.minute() -// const second = calendar.month.second() -// const daysInMonth = moment([year, month]).daysInMonth() -// const firstDay = moment([year, month, 1]) -// const lastDay = moment([year, month, daysInMonth]) -// const lastMonth = moment(firstDay).subtract(1, "month").month() -// const lastYear = moment(firstDay).subtract(1, "month").year() -// const daysInLastMonth = moment([lastYear, lastMonth]).daysInMonth() -// const dayOfWeek = firstDay.day() - -// //initialize a 6 rows x 7 columns array for the calendar -// calendar = [] -// calendar.firstDay = firstDay -// calendar.lastDay = lastDay - -// for (const i = 0; i < 6; i++) { -// calendar[i] = [] -// } - -// //populate the calendar with date objects -// const startDay = daysInLastMonth - dayOfWeek + this.locale.firstDay + 1 -// if (startDay > daysInLastMonth) startDay -= 7 - -// if (dayOfWeek == this.locale.firstDay) startDay = daysInLastMonth - 6 - -// const curDate = moment([lastYear, lastMonth, startDay, 12, minute, second]) - -// const col, row -// for ( -// const i = 0, col = 0, row = 0; -// i < 42; -// i++, col++, curDate = moment(curDate).add(24, "hour") -// ) { -// if (i > 0 && col % 7 === 0) { -// col = 0 -// row++ -// } -// calendar[row][col] = curDate -// .clone() -// .hour(hour) -// .minute(minute) -// .second(second) -// curDate.hour(12) - -// if ( -// this.minDate && -// calendar[row][col].format("YYYY-MM-DD") == -// this.minDate.format("YYYY-MM-DD") && -// calendar[row][col].isBefore(this.minDate) && -// side == "left" -// ) { -// calendar[row][col] = this.minDate.clone() -// } - -// if ( -// this.maxDate && -// calendar[row][col].format("YYYY-MM-DD") == -// this.maxDate.format("YYYY-MM-DD") && -// calendar[row][col].isAfter(this.maxDate) && -// side == "right" -// ) { -// calendar[row][col] = this.maxDate.clone() -// } -// } - -// //make the calendar object available to hoverDate/clickDate -// if (side == "left") { -// this.leftCalendar.calendar = calendar -// } else { -// this.rightCalendar.calendar = calendar -// } - -// // -// // Display the calendar -// // - -// const minDate = side == "left" ? this.minDate : this.startDate -// const maxDate = this.maxDate -// const selected = side == "left" ? this.startDate : this.endDate -// const arrow = -// this.locale.direction == "ltr" -// ? { left: "chevron-left", right: "chevron-right" } -// : { left: "chevron-right", right: "chevron-left" } - -// const html = '' -// html += "" -// html += "" - -// // add empty cell for week number -// if (this.showWeekNumbers || this.showISOWeekNumbers) html += "" - -// if ( -// (!minDate || minDate.isBefore(calendar.firstDay)) && -// (!this.linkedCalendars || side == "left") -// ) { -// html += '' -// } else { -// html += "" -// } - -// const dateHtml = -// this.locale.monthNames[calendar[1][1].month()] + -// calendar[1][1].format(" YYYY") - -// if (this.showDropdowns) { -// const currentMonth = calendar[1][1].month() -// const currentYear = calendar[1][1].year() -// const maxYear = (maxDate && maxDate.year()) || this.maxYear -// const minYear = (minDate && minDate.year()) || this.minYear -// const inMinYear = currentYear == minYear -// const inMaxYear = currentYear == maxYear - -// const monthHtml = '" - -// const yearHtml = '" - -// dateHtml = monthHtml + yearHtml -// } - -// html += '" -// if ( -// (!maxDate || maxDate.isAfter(calendar.lastDay)) && -// (!this.linkedCalendars || side == "right" || this.singleDatePicker) -// ) { -// html += '' -// } else { -// html += "" -// } - -// html += "" -// html += "" - -// // add week number label -// if (this.showWeekNumbers || this.showISOWeekNumbers) -// html += '" - -// $.each(this.locale.daysOfWeek, function (index, dayOfWeek) { -// html += "" -// }) - -// html += "" -// html += "" -// html += "" - -// //adjust maxDate to reflect the maxSpan setting in order to -// //grey out end dates beyond the maxSpan -// if (this.endDate == null && this.maxSpan) { -// const maxLimit = this.startDate.clone().add(this.maxSpan).endOf("day") -// if (!maxDate || maxLimit.isBefore(maxDate)) { -// maxDate = maxLimit -// } -// } - -// for (const row = 0; row < 6; row++) { -// html += "" - -// // add week number -// if (this.showWeekNumbers) -// html += '" -// else if (this.showISOWeekNumbers) -// html += '" - -// for (const col = 0; col < 7; col++) { -// const classes = [] - -// //highlight today's date -// if (calendar[row][col].isSame(new Date(), "day")) classes.push("today") - -// //highlight weekends -// if (calendar[row][col].isoWeekday() > 5) classes.push("weekend") - -// //grey out the dates in other months displayed at beginning and end of this calendar -// if (calendar[row][col].month() != calendar[1][1].month()) -// classes.push("off", "ends") - -// //don't allow selection of dates before the minimum date -// if (this.minDate && calendar[row][col].isBefore(this.minDate, "day")) -// classes.push("off", "disabled") - -// //don't allow selection of dates after the maximum date -// if (maxDate && calendar[row][col].isAfter(maxDate, "day")) -// classes.push("off", "disabled") - -// //don't allow selection of date if a custom function decides it's invalid -// if (this.isInvalidDate(calendar[row][col])) -// classes.push("off", "disabled") - -// //highlight the currently selected start date -// if ( -// calendar[row][col].format("YYYY-MM-DD") == -// this.startDate.format("YYYY-MM-DD") -// ) -// classes.push("active", "start-date") - -// //highlight the currently selected end date -// if ( -// this.endDate != null && -// calendar[row][col].format("YYYY-MM-DD") == -// this.endDate.format("YYYY-MM-DD") -// ) -// classes.push("active", "end-date") - -// //highlight dates in-between the selected dates -// if ( -// this.endDate != null && -// calendar[row][col] > this.startDate && -// calendar[row][col] < this.endDate -// ) -// classes.push("in-range") - -// //apply custom classes for this date -// const isCustom = this.isCustomDate(calendar[row][col]) -// if (isCustom !== false) { -// if (typeof isCustom === "string") classes.push(isCustom) -// else Array.prototype.push.apply(classes, isCustom) -// } - -// const cname = "", -// disabled = false -// for (const i = 0; i < classes.length; i++) { -// cname += classes[i] + " " -// if (classes[i] == "disabled") disabled = true -// } -// if (!disabled) cname += "available" - -// html += -// '" -// } -// html += "" -// } - -// html += "" -// html += "
' + dateHtml + "
' + this.locale.weekLabel + "" + dayOfWeek + "
' + calendar[row][0].week() + "' + calendar[row][0].isoWeek() + "' + -// calendar[row][col].date() + -// "
" - -// this.container.find(".drp-calendar." + side + " .calendar-table").html(html) -// } - -// export function renderTimePicker(side) { -// // Don't bother updating the time picker if it's currently disabled -// // because an end date hasn't been clicked yet -// if (side == "right" && !this.endDate) return - -// let html, selected, minDate -// const maxDate = this.maxDate - -// if ( -// this.maxSpan && -// (!this.maxDate || -// this.startDate.clone().add(this.maxSpan).isBefore(this.maxDate)) -// ) -// maxDate = this.startDate.clone().add(this.maxSpan) - -// if (side == "left") { -// selected = this.startDate.clone() -// minDate = this.minDate -// } else if (side == "right") { -// selected = this.endDate.clone() -// minDate = this.startDate - -// //Preserve the time already selected -// const timeSelector = this.container.find( -// ".drp-calendar.right .calendar-time", -// ) -// if (timeSelector.html() != "") { -// selected.hour( -// !isNaN(selected.hour()) -// ? selected.hour() -// : timeSelector.find(".hourselect option:selected").val(), -// ) -// selected.minute( -// !isNaN(selected.minute()) -// ? selected.minute() -// : timeSelector.find(".minuteselect option:selected").val(), -// ) -// selected.second( -// !isNaN(selected.second()) -// ? selected.second() -// : timeSelector.find(".secondselect option:selected").val(), -// ) - -// if (!this.timePicker24Hour) { -// const ampm = timeSelector.find(".ampmselect option:selected").val() -// if (ampm === "PM" && selected.hour() < 12) -// selected.hour(selected.hour() + 12) -// if (ampm === "AM" && selected.hour() === 12) selected.hour(0) -// } -// } - -// if (selected.isBefore(this.startDate)) selected = this.startDate.clone() - -// if (maxDate && selected.isAfter(maxDate)) selected = maxDate.clone() -// } - -// // -// // hours -// // - -// html = ' " - -// // -// // minutes -// // - -// html += ': " - -// // -// // seconds -// // - -// if (this.timePickerSeconds) { -// html += ': " -// } - -// // -// // AM/PM -// // - -// if (!this.timePicker24Hour) { -// html += '" -// } - -// this.container.find(".drp-calendar." + side + " .calendar-time").html(html) -// } - -// export function updateFormInputs() { -// if ( -// this.singleDatePicker || -// (this.endDate && -// (this.startDate.isBefore(this.endDate) || -// this.startDate.isSame(this.endDate))) -// ) { -// this.container.find("button.applyBtn").prop("disabled", false) -// } else { -// this.container.find("button.applyBtn").prop("disabled", true) -// } -// } - -// export function move() { -// const parentOffset = { top: 0, left: 0 }, -// drops = this.drops -// let containerTop - -// const parentRightEdge = $(window).width() -// if (!this.parentEl.is("body")) { -// parentOffset = { -// top: this.parentEl.offset().top - this.parentEl.scrollTop(), -// left: this.parentEl.offset().left - this.parentEl.scrollLeft(), -// } -// parentRightEdge = this.parentEl[0].clientWidth + this.parentEl.offset().left -// } - -// switch (drops) { -// case "auto": -// containerTop = -// this.element.offset().top + -// this.element.outerHeight() - -// parentOffset.top -// if ( -// containerTop + this.container.outerHeight() >= -// this.parentEl[0].scrollHeight -// ) { -// containerTop = -// this.element.offset().top - -// this.container.outerHeight() - -// parentOffset.top -// drops = "up" -// } -// break -// case "up": -// containerTop = -// this.element.offset().top - -// this.container.outerHeight() - -// parentOffset.top -// break -// default: -// containerTop = -// this.element.offset().top + -// this.element.outerHeight() - -// parentOffset.top -// break -// } - -// // Force the container to it's actual width -// this.container.css({ -// top: 0, -// left: 0, -// right: "auto", -// }) -// const containerWidth = this.container.outerWidth() - -// this.container.toggleClass("drop-up", drops == "up") - -// if (this.opens == "left") { -// const containerRight = -// parentRightEdge - this.element.offset().left - this.element.outerWidth() -// if (containerWidth + containerRight > $(window).width()) { -// this.container.css({ -// top: containerTop, -// right: "auto", -// left: 9, -// }) -// } else { -// this.container.css({ -// top: containerTop, -// right: containerRight, -// left: "auto", -// }) -// } -// } else if (this.opens == "center") { -// const containerLeft = -// this.element.offset().left - -// parentOffset.left + -// this.element.outerWidth() / 2 - -// containerWidth / 2 -// if (containerLeft < 0) { -// this.container.css({ -// top: containerTop, -// right: "auto", -// left: 9, -// }) -// } else if (containerLeft + containerWidth > $(window).width()) { -// this.container.css({ -// top: containerTop, -// left: "auto", -// right: 0, -// }) -// } else { -// this.container.css({ -// top: containerTop, -// left: containerLeft, -// right: "auto", -// }) -// } -// } else { -// const containerLeft = this.element.offset().left - parentOffset.left -// if (containerLeft + containerWidth > $(window).width()) { -// this.container.css({ -// top: containerTop, -// left: "auto", -// right: 0, -// }) -// } else { -// this.container.css({ -// top: containerTop, -// left: containerLeft, -// right: "auto", -// }) -// } -// } -// } - -// export function show(e) { -// if (this.isShowing) return - -// // Create a click proxy that is private to this instance of datepicker, for unbinding -// this._outsideClickProxy = $.proxy(function (e) { -// this.outsideClick(e) -// }, this) - -// // Bind global datepicker mousedown for hiding and -// $(document) -// .on("mousedown.daterangepicker", this._outsideClickProxy) -// // also support mobile devices -// .on("touchend.daterangepicker", this._outsideClickProxy) -// // also explicitly play nice with Bootstrap dropdowns, which stopPropagation when clicking them -// .on( -// "click.daterangepicker", -// "[data-toggle=dropdown]", -// this._outsideClickProxy, -// ) -// // and also close when focus changes to outside the picker (eg. tabbing between controls) -// .on("focusin.daterangepicker", this._outsideClickProxy) - -// // Reposition the picker if the window is resized while it's open -// $(window).on( -// "resize.daterangepicker", -// $.proxy(function (e) { -// this.move(e) -// }, this), -// ) - -// this.oldStartDate = this.startDate.clone() -// this.oldEndDate = this.endDate.clone() -// this.previousRightTime = this.endDate.clone() - -// this.updateView() -// this.container.show() -// this.move() -// this.element.trigger("show.daterangepicker", this) -// this.isShowing = true -// } - -// export function hide(e) { -// if (!this.isShowing) return - -// //incomplete date selection, revert to last values -// if (!this.endDate) { -// this.startDate = this.oldStartDate.clone() -// this.endDate = this.oldEndDate.clone() -// } - -// //if a new date range was selected, invoke the user callback function -// if ( -// !this.startDate.isSame(this.oldStartDate) || -// !this.endDate.isSame(this.oldEndDate) -// ) -// this.callback( -// this.startDate.clone(), -// this.endDate.clone(), -// this.chosenLabel, -// ) - -// //if picker is attached to a text input, update it -// this.updateElement() - -// $(document).off(".daterangepicker") -// $(window).off(".daterangepicker") -// this.container.hide() -// this.element.trigger("hide.daterangepicker", this) -// this.isShowing = false -// } - -// export function toggle(e) { -// if (this.isShowing) { -// this.hide() -// } else { -// this.show() -// } -// } - -// export function outsideClick(e) { -// const target = $(e.target) -// // if the page is clicked anywhere except within the daterangerpicker/button -// // itself then call this.hide() -// if ( -// // ie modal dialog fix -// e.type == "focusin" || -// target.closest(this.element).length || -// target.closest(this.container).length || -// target.closest(".calendar-table").length -// ) -// return -// this.hide() -// this.element.trigger("outsideClick.daterangepicker", this) -// } - -// export function showCalendars() { -// this.container.addClass("show-calendar") -// this.move() -// this.element.trigger("showCalendar.daterangepicker", this) -// } - -// export function hideCalendars() { -// this.container.removeClass("show-calendar") -// this.element.trigger("hideCalendar.daterangepicker", this) -// } - -// export function clickRange(e) { -// const label = e.target.getAttribute("data-range-key") -// this.chosenLabel = label -// if (label == this.locale.customRangeLabel) { -// this.showCalendars() -// } else { -// const dates = this.ranges[label] -// this.startDate = dates[0] -// this.endDate = dates[1] - -// if (!this.timePicker) { -// this.startDate.startOf("day") -// this.endDate.endOf("day") -// } - -// if (!this.alwaysShowCalendars) this.hideCalendars() -// this.clickApply() -// } -// } - -// export function clickPrev(e) { -// const cal = $(e.target).parents(".drp-calendar") -// if (cal.hasClass("left")) { -// this.leftCalendar.month.subtract(1, "month") -// if (this.linkedCalendars) this.rightCalendar.month.subtract(1, "month") -// } else { -// this.rightCalendar.month.subtract(1, "month") -// } -// this.updateCalendars() -// } - -// export function clickNext(e) { -// const cal = $(e.target).parents(".drp-calendar") -// if (cal.hasClass("left")) { -// this.leftCalendar.month.add(1, "month") -// } else { -// this.rightCalendar.month.add(1, "month") -// if (this.linkedCalendars) this.leftCalendar.month.add(1, "month") -// } -// this.updateCalendars() -// } - -// export function hoverDate(e) { -// //ignore dates that can't be selected -// if (!$(e.target).hasClass("available")) return - -// const title = $(e.target).attr("data-title") -// const row = title.substr(1, 1) -// const col = title.substr(3, 1) -// const cal = $(e.target).parents(".drp-calendar") -// const date = cal.hasClass("left") -// ? this.leftCalendar.calendar[row][col] -// : this.rightCalendar.calendar[row][col] - -// //highlight the dates between the start date and the date being hovered as a potential end date -// const leftCalendar = this.leftCalendar -// const rightCalendar = this.rightCalendar -// const startDate = this.startDate -// if (!this.endDate) { -// this.container.find(".drp-calendar tbody td").each(function (index, el) { -// //skip week numbers, only look at dates -// if ($(el).hasClass("week")) return - -// const title = $(el).attr("data-title") -// const row = title.substr(1, 1) -// const col = title.substr(3, 1) -// const cal = $(el).parents(".drp-calendar") -// const dt = cal.hasClass("left") -// ? leftCalendar.calendar[row][col] -// : rightCalendar.calendar[row][col] - -// if ( -// (dt.isAfter(startDate) && dt.isBefore(date)) || -// dt.isSame(date, "day") -// ) { -// $(el).addClass("in-range") -// } else { -// $(el).removeClass("in-range") -// } -// }) -// } -// } - -// export function clickDate(e) { -// if (!$(e.target).hasClass("available")) return - -// const title = $(e.target).attr("data-title") -// const row = title.substr(1, 1) -// const col = title.substr(3, 1) -// const cal = $(e.target).parents(".drp-calendar") -// const date = cal.hasClass("left") -// ? this.leftCalendar.calendar[row][col] -// : this.rightCalendar.calendar[row][col] - -// // -// // this function needs to do a few things: -// // * alternate between selecting a start and end date for the range, -// // * if the time picker is enabled, apply the hour/minute/second from the select boxes to the clicked date -// // * if autoapply is enabled, and an end date was chosen, apply the selection -// // * if single date picker mode, and time picker isn't enabled, apply the selection immediately -// // * if one of the inputs above the calendars was focused, cancel that manual input -// // - -// if (this.endDate || date.isBefore(this.startDate, "day")) { -// //picking start -// if (this.timePicker) { -// const hour = parseInt(this.container.find(".left .hourselect").val(), 10) -// if (!this.timePicker24Hour) { -// const ampm = this.container.find(".left .ampmselect").val() -// if (ampm === "PM" && hour < 12) hour += 12 -// if (ampm === "AM" && hour === 12) hour = 0 -// } -// const minute = parseInt( -// this.container.find(".left .minuteselect").val(), -// 10, -// ) -// if (isNaN(minute)) { -// minute = parseInt( -// this.container.find(".left .minuteselect option:last").val(), -// 10, -// ) -// } -// const second = this.timePickerSeconds -// ? parseInt(this.container.find(".left .secondselect").val(), 10) -// : 0 -// date = date.clone().hour(hour).minute(minute).second(second) -// } -// this.endDate = null -// this.setStartDate(date.clone()) -// } else if (!this.endDate && date.isBefore(this.startDate)) { -// //special case: clicking the same date for start/end, -// //but the time of the end date is before the start date -// this.setEndDate(this.startDate.clone()) -// } else { -// // picking end -// if (this.timePicker) { -// const hour = parseInt(this.container.find(".right .hourselect").val(), 10) -// if (!this.timePicker24Hour) { -// const ampm = this.container.find(".right .ampmselect").val() -// if (ampm === "PM" && hour < 12) hour += 12 -// if (ampm === "AM" && hour === 12) hour = 0 -// } -// const minute = parseInt( -// this.container.find(".right .minuteselect").val(), -// 10, -// ) -// if (isNaN(minute)) { -// minute = parseInt( -// this.container.find(".right .minuteselect option:last").val(), -// 10, -// ) -// } -// const second = this.timePickerSeconds -// ? parseInt(this.container.find(".right .secondselect").val(), 10) -// : 0 -// date = date.clone().hour(hour).minute(minute).second(second) -// } -// this.setEndDate(date.clone()) -// if (this.autoApply) { -// this.calculateChosenLabel() -// this.clickApply() -// } -// } - -// if (this.singleDatePicker) { -// this.setEndDate(this.startDate) -// if (!this.timePicker && this.autoApply) this.clickApply() -// } - -// this.updateView() - -// //This is to cancel the blur event handler if the mouse was in one of the inputs -// e.stopPropagation() -// } - -// export function calculateChosenLabel() { -// const customRange = true -// const i = 0 -// for (const range in this.ranges) { -// if (this.timePicker) { -// const format = this.timePickerSeconds -// ? "YYYY-MM-DD HH:mm:ss" -// : "YYYY-MM-DD HH:mm" -// //ignore times when comparing dates if time picker seconds is not enabled -// if ( -// this.startDate.format(format) == this.ranges[range][0].format(format) && -// this.endDate.format(format) == this.ranges[range][1].format(format) -// ) { -// customRange = false -// this.chosenLabel = this.container -// .find(".ranges li:eq(" + i + ")") -// .addClass("active") -// .attr("data-range-key") -// break -// } -// } else { -// //ignore times when comparing dates if time picker is not enabled -// if ( -// this.startDate.format("YYYY-MM-DD") == -// this.ranges[range][0].format("YYYY-MM-DD") && -// this.endDate.format("YYYY-MM-DD") == -// this.ranges[range][1].format("YYYY-MM-DD") -// ) { -// customRange = false -// this.chosenLabel = this.container -// .find(".ranges li:eq(" + i + ")") -// .addClass("active") -// .attr("data-range-key") -// break -// } -// } -// i++ -// } -// if (customRange) { -// if (this.showCustomRangeLabel) { -// this.chosenLabel = this.container -// .find(".ranges li:last") -// .addClass("active") -// .attr("data-range-key") -// } else { -// this.chosenLabel = null -// } -// this.showCalendars() -// } -// } - -// export function clickApply(e) { -// this.hide() -// this.element.trigger("apply.daterangepicker", this) -// } - -// export function clickCancel(e) { -// this.startDate = this.oldStartDate -// this.endDate = this.oldEndDate -// this.hide() -// this.element.trigger("cancel.daterangepicker", this) -// } - -// export function monthOrYearChanged(e) { -// const isLeft = $(e.target).closest(".drp-calendar").hasClass("left"), -// leftOrRight = isLeft ? "left" : "right", -// cal = this.container.find(".drp-calendar." + leftOrRight) - -// // Month must be Number for new moment versions -// const month = parseInt(cal.find(".monthselect").val(), 10) -// const year = cal.find(".yearselect").val() - -// if (!isLeft) { -// if ( -// year < this.startDate.year() || -// (year == this.startDate.year() && month < this.startDate.month()) -// ) { -// month = this.startDate.month() -// year = this.startDate.year() -// } -// } - -// if (this.minDate) { -// if ( -// year < this.minDate.year() || -// (year == this.minDate.year() && month < this.minDate.month()) -// ) { -// month = this.minDate.month() -// year = this.minDate.year() -// } -// } - -// if (this.maxDate) { -// if ( -// year > this.maxDate.year() || -// (year == this.maxDate.year() && month > this.maxDate.month()) -// ) { -// month = this.maxDate.month() -// year = this.maxDate.year() -// } -// } - -// if (isLeft) { -// this.leftCalendar.month.month(month).year(year) -// if (this.linkedCalendars) -// this.rightCalendar.month = this.leftCalendar.month.clone().add(1, "month") -// } else { -// this.rightCalendar.month.month(month).year(year) -// if (this.linkedCalendars) -// this.leftCalendar.month = this.rightCalendar.month -// .clone() -// .subtract(1, "month") -// } -// this.updateCalendars() -// } - -// export function timeChanged(e) { -// const cal = $(e.target).closest(".drp-calendar"), -// isLeft = cal.hasClass("left") - -// const hour = parseInt(cal.find(".hourselect").val(), 10) -// const minute = parseInt(cal.find(".minuteselect").val(), 10) -// if (isNaN(minute)) { -// minute = parseInt(cal.find(".minuteselect option:last").val(), 10) -// } -// const second = this.timePickerSeconds -// ? parseInt(cal.find(".secondselect").val(), 10) -// : 0 - -// if (!this.timePicker24Hour) { -// const ampm = cal.find(".ampmselect").val() -// if (ampm === "PM" && hour < 12) hour += 12 -// if (ampm === "AM" && hour === 12) hour = 0 -// } - -// if (isLeft) { -// const start = this.startDate.clone() -// start.hour(hour) -// start.minute(minute) -// start.second(second) -// this.setStartDate(start) -// if (this.singleDatePicker) { -// this.endDate = this.startDate.clone() -// } else if ( -// this.endDate && -// this.endDate.format("YYYY-MM-DD") == start.format("YYYY-MM-DD") && -// this.endDate.isBefore(start) -// ) { -// this.setEndDate(start.clone()) -// } -// } else if (this.endDate) { -// const end = this.endDate.clone() -// end.hour(hour) -// end.minute(minute) -// end.second(second) -// this.setEndDate(end) -// } - -// //update the calendars so all clickable dates reflect the new time component -// this.updateCalendars() - -// //update the form inputs above the calendars with the new time -// this.updateFormInputs() - -// //re-render the time pickers because changing one selection can affect what's enabled in another -// this.renderTimePicker("left") -// this.renderTimePicker("right") -// } - -// export function elementChanged() { -// if (!this.element.is("input")) return -// if (!this.element.val().length) return - -// const dateString = this.element.val().split(this.locale.separator), -// start = null, -// end = null - -// if (dateString.length === 2) { -// start = moment(dateString[0], this.locale.format) -// end = moment(dateString[1], this.locale.format) -// } - -// if (this.singleDatePicker || start === null || end === null) { -// start = moment(this.element.val(), this.locale.format) -// end = start -// } - -// if (!start.isValid() || !end.isValid()) return - -// this.setStartDate(start) -// this.setEndDate(end) -// this.updateView() -// } - -// export function keydown(e) { -// //hide on tab or enter -// if (e.keyCode === 9 || e.keyCode === 13) { -// this.hide() -// } - -// //hide on esc and prevent propagation -// if (e.keyCode === 27) { -// e.preventDefault() -// e.stopPropagation() - -// this.hide() -// } -// } - -// export function updateElement() { -// if (this.element.is("input") && this.autoUpdateInput) { -// const newValue = this.startDate.format(this.locale.format) -// if (!this.singleDatePicker) { -// newValue += -// this.locale.separator + this.endDate.format(this.locale.format) -// } -// if (newValue !== this.element.val()) { -// this.element.val(newValue).trigger("change") -// } -// } -// } - -// export function remove() { -// this.container.remove() -// this.element.off(".daterangepicker") -// this.element.removeData() -// } - -// AR Functions -export function mergeOptions(options: DateRangeProps) { - const mergedOptions: DateRangeProps = { locale: DEFAULT_LOCALE } - if (mergedOptions.locale) { - if (typeof options.locale === "object") { - if (typeof options.locale.direction === "string") - mergedOptions.locale.direction = options.locale.direction - - if (typeof options.locale.format === "string") - mergedOptions.locale.format = options.locale.format - - if (typeof options.locale.separator === "string") - mergedOptions.locale.separator = options.locale.separator - - if (typeof options.locale.daysOfWeek === "object") - mergedOptions.locale.daysOfWeek = options.locale.daysOfWeek.slice() - - if (typeof options.locale.monthNames === "object") - mergedOptions.locale.monthNames = options.locale.monthNames.slice() - - if (typeof options.locale.firstDay === "number") - mergedOptions.locale.firstDay = options.locale.firstDay - - if (typeof options.locale.applyLabel === "string") - mergedOptions.locale.applyLabel = options.locale.applyLabel - - if (typeof options.locale.cancelLabel === "string") - mergedOptions.locale.cancelLabel = options.locale.cancelLabel - - if (typeof options.locale.weekLabel === "string") - mergedOptions.locale.weekLabel = options.locale.weekLabel - - if (typeof options.locale.customRangeLabel === "string") { - //Support unicode chars in the custom range name. - const elem = document.createElement("textarea") - elem.innerHTML = options.locale.customRangeLabel - const rangeHtml = elem.value - mergedOptions.locale.customRangeLabel = rangeHtml - } - } - - if (typeof options.startDate === "string") - mergedOptions.startDate = moment( - options.startDate, - mergedOptions.locale.format, - ) - - if (typeof options.endDate === "string") - mergedOptions.endDate = moment( - options.endDate, - mergedOptions.locale.format, - ) - - if (typeof options.minDate === "string") - mergedOptions.minDate = moment( - options.minDate, - mergedOptions.locale.format, - ) - - if (typeof options.maxDate === "string") - mergedOptions.maxDate = moment( - options.maxDate, - mergedOptions.locale.format, - ) - - if (typeof options.startDate === "object") - mergedOptions.startDate = moment(options.startDate) - - if (typeof options.endDate === "object") - mergedOptions.endDate = moment(options.endDate) - - if (typeof options.minDate === "object") - mergedOptions.minDate = moment(options.minDate) - - if (typeof options.maxDate === "object") - mergedOptions.maxDate = moment(options.maxDate) - - // sanity check for bad options - if ( - mergedOptions.minDate && - (mergedOptions.startDate as Moment)?.isBefore( - mergedOptions.minDate as MomentInput, - ) - ) - mergedOptions.startDate = (mergedOptions.minDate as Moment).clone() - - // sanity check for bad options - if ( - mergedOptions.maxDate && - (mergedOptions.endDate as Moment)?.isAfter( - mergedOptions.maxDate as MomentInput, - ) - ) - mergedOptions.endDate = (mergedOptions.maxDate as Moment).clone() - - if (typeof options.applyButtonClasses === "string") - mergedOptions.applyButtonClasses = options.applyButtonClasses - - if (typeof options.applyClass === "string") - //backwards compat - mergedOptions.applyButtonClasses = options.applyClass - - if (typeof options.cancelButtonClasses === "string") - mergedOptions.cancelButtonClasses = options.cancelButtonClasses - - if (typeof options.cancelClass === "string") - //backwards compat - mergedOptions.cancelButtonClasses = options.cancelClass - - if (typeof options.maxSpan === "object") - mergedOptions.maxSpan = options.maxSpan - - if (typeof options.dateLimit === "object") - //backwards compat - mergedOptions.maxSpan = options.dateLimit - - if (typeof options.opens === "string") mergedOptions.opens = options.opens - - if (typeof options.drops === "string") mergedOptions.drops = options.drops - - if (typeof options.showWeekNumbers === "boolean") - mergedOptions.showWeekNumbers = options.showWeekNumbers - - if (typeof options.showISOWeekNumbers === "boolean") - mergedOptions.showISOWeekNumbers = options.showISOWeekNumbers - - if (typeof options.buttonClasses === "string") - mergedOptions.buttonClasses = options.buttonClasses - - if (typeof options.buttonClasses === "object") - mergedOptions.buttonClasses = ( - options.buttonClasses as Array - ).join(" ") - - if (typeof options.showDropdowns === "boolean") - mergedOptions.showDropdowns = options.showDropdowns - - if (typeof options.minYear === "number") - mergedOptions.minYear = options.minYear - - if (typeof options.maxYear === "number") - mergedOptions.maxYear = options.maxYear - - if (typeof options.showCustomRangeLabel === "boolean") - mergedOptions.showCustomRangeLabel = options.showCustomRangeLabel - - if (typeof options.singleDatePicker === "boolean") { - mergedOptions.singleDatePicker = options.singleDatePicker - if (mergedOptions.singleDatePicker) - mergedOptions.endDate = (mergedOptions.startDate as Moment)?.clone() - } - - if (typeof options.timePicker === "boolean") - mergedOptions.timePicker = options.timePicker - - if (typeof options.timePickerSeconds === "boolean") - mergedOptions.timePickerSeconds = options.timePickerSeconds - - if (typeof options.timePickerIncrement === "number") - mergedOptions.timePickerIncrement = options.timePickerIncrement - - if (typeof options.timePicker24Hour === "boolean") - mergedOptions.timePicker24Hour = options.timePicker24Hour - - if (typeof options.autoApply === "boolean") - mergedOptions.autoApply = options.autoApply - - if (typeof options.autoUpdateInput === "boolean") - mergedOptions.autoUpdateInput = options.autoUpdateInput - - if (typeof options.linkedCalendars === "boolean") - mergedOptions.linkedCalendars = options.linkedCalendars - - if (typeof options.isInvalidDate === "function") - mergedOptions.isInvalidDate = options.isInvalidDate - - if (typeof options.isCustomDate === "function") - mergedOptions.isCustomDate = options.isCustomDate - - if (typeof options.alwaysShowCalendars === "boolean") - mergedOptions.alwaysShowCalendars = options.alwaysShowCalendars - } - - return mergedOptions -} - -export function processOptions(options: DateRangeProps) { - if (options.locale?.firstDay && options.locale?.firstDay !== 0) { - let iterator = options.locale?.firstDay - while (iterator > 0) { - options.locale.daysOfWeek.push( - options.locale.daysOfWeek.shift() as string, - ) - iterator-- - } - } - - let start, end, range - - //if no start/end dates set, check if an input element contains initial values - if ( - typeof options.startDate === "undefined" && - typeof options.endDate === "undefined" && - options.locale - ) { - // TODO: Have this commented code back to enable pre-fill values - // if ($(options.element).is(":text")) { - // const val = options.element.value, - // split = val.split(options.locale?.separator) - // start = end = null - // if (split.length === 2) { - // start = moment(split[0], options.locale.format) - // end = moment(split[1], options.locale.format) - // } else if (options.singleDatePicker && val !== "") { - // start = moment(val, options.locale.format) - // end = moment(val, options.locale.format) - // } - // if (start !== null && end !== null) { - // options.setStartDate(start) - // options.setEndDate(end) - // } - // } - } - - if (typeof options.ranges === "object") { - for (range in options.ranges) { - if (typeof (options.ranges[range] as ArrayType)[0] === "string") - start = moment( - (options.ranges[range] as ArrayType)[0] as MomentInput, - options.locale?.format, - ) - else - start = moment((options.ranges[range] as ArrayType)[0] as MomentInput) - - if (typeof (options.ranges[range] as ArrayType)[1] === "string") - end = moment( - (options.ranges[range] as ArrayType)[1] as MomentInput, - options.locale?.format, - ) - else end = moment((options.ranges[range] as ArrayType)[1] as MomentInput) - - // If the start or end date exceed those allowed by the minDate or maxSpan - // options, shorten the range to the allowable period. - if (options.minDate && start.isBefore(options.minDate as Moment)) - start = (options.minDate as Moment).clone() - - let maxDate = options.maxDate - if ( - options.maxSpan && - maxDate && - start - .clone() - .add(options.maxSpan) - .isAfter(maxDate as Moment) - ) - maxDate = start.clone().add(options.maxSpan) - if (maxDate && end.isAfter(maxDate as Moment)) - end = (maxDate as Moment).clone() - - // If the end of the range is before the minimum or the start of the range is - // after the maximum, don't display options range option at all. - if ( - (options.minDate && - end.isBefore( - options.minDate as Moment, - options.timePicker ? "minute" : "day", - )) || - (maxDate && - start.isAfter( - maxDate as Moment, - options.timePicker ? "minute" : "day", - )) - ) - continue - - //Support unicode chars in the range names. - const elem = document.createElement("textarea") - elem.innerHTML = range - const rangeHtml = elem.value - - options.ranges[rangeHtml] = [start, end] - } - - let list = "
    " - for (range in options.ranges) { - list += '
  • ' + range + "
    • " - } - if (options.showCustomRangeLabel) { - list += - '
  • ' + - options.locale?.customRangeLabel + - "
    • " - } - list += "
" - // options.container?.find(".ranges").prepend(list) - } -} - -export function formatDate(month: number, year: number) { - // Create a Moment.js object from the provided month and year - const date = moment({ month: month - 1, year }) - - // Format the date as "MMM, YY" - const formattedDate = date.format("MMM, YY") - - return formattedDate -} diff --git a/src/app/components/atoms/Date/index.ts b/src/app/components/atoms/Date/index.ts deleted file mode 100755 index 5496a27..0000000 --- a/src/app/components/atoms/Date/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -import Date from "./Date" - -export default Date diff --git a/src/app/components/atoms/LoadableIcon/LoadableIcon.tsx b/src/app/components/atoms/LoadableIcon/LoadableIcon.tsx index 529fd8a..9bb83eb 100755 --- a/src/app/components/atoms/LoadableIcon/LoadableIcon.tsx +++ b/src/app/components/atoms/LoadableIcon/LoadableIcon.tsx @@ -1,6 +1,6 @@ import { useEffect, useState } from "react" -// import { getIconByKey, saveIconToFactory } from "../../../store" -// import { useAppDispatch, useAppSelector } from "../../../hooks" +import { getIconByKey, saveIconToFactory } from "../../../store" +import { useAppDispatch, useAppSelector } from "../../../hooks" import { Network, DomHelper } from "../../../utils" import { LoadableIconProps } from ".." import { GenericObject, ObjectType } from "../../../types/types" @@ -21,6 +21,20 @@ const placeholder = parser ) .querySelector("svg") +/** + * Component fetches icons from three types of sources: + * + * 1. Absolute URL: It is for fetching from static paths of icons available in armco's static server + * 2. http or https: As obvious, it is to fetch svg from any publicly available URL that doesn't directly return + * renderable content but needs to be processed (else we could directly pass such urls to img src) + * 3. Primary usage is for fetching react icons that have a category and name in the format gr.GrStatusPlaceholder + * + * This component takes care of duplicate API calls by caching icons even if multiple instances of same icon are rendered + * Futher changes to icon like size and color also don't need API calls and changes are handled by this component + * + * @param props + * @returns JSX: img containing processed svg + */ const LoadableIcon = (props: LoadableIconProps) => { const { classes, @@ -45,19 +59,26 @@ const LoadableIcon = (props: LoadableIconProps) => { width, } = props let { icon } = props - const [juice, setJuice] = useState() + const [hovered, setHovered] = useState() const [innerToggled, setToggled] = useState() + // Raw svg content with no styling const [iconContent, setIconContent] = useState( placeholder, ) - // const dispatch = useAppDispatch() + // Processed SVG content with size, color, classes, etc. + const [juice, setJuice] = useState() + const dispatch = useAppDispatch() + // 1. Absolute URL is for fetching from static paths in the static server + // 2. http or https as obvious is to fetch svg from any URL + // 3. Primary usage is for fetching react icons that have a category and name in the format gr.GrStatusPlaceholder const isAbsoluteOrSlashStart = icon && (icon.startsWith("http://") || icon.startsWith("https://") || icon.startsWith("/")) + icon = icon && !isAbsoluteOrSlashStart && icon.indexOf("/") > -1 ? icon.replace(/\//g, ".") @@ -75,9 +96,7 @@ const LoadableIcon = (props: LoadableIconProps) => { const iconKey = icon && (iconCategory && iconName ? `${iconCategory}_${iconName}` : icon) - // const iData = useAppSelector(getIconByKey(iconKey || "")) - - const iData = iconKey && iconsFactory[iconKey] + const iData = useAppSelector(getIconByKey(iconKey || "")) const getIcon = () => { if (icon && iconKey && !ongoingApiCalls[iconKey]) { @@ -91,7 +110,7 @@ const LoadableIcon = (props: LoadableIconProps) => { .parseFromString(res.body, "image/svg+xml") .querySelector("svg") if (parsedSvg) { - // dispatch(saveIconToFactory({ [iconKey]: res.body })) + dispatch(saveIconToFactory({ [iconKey]: res.body })) iconsFactory[iconKey] = res.body setIconContent(parsedSvg) } @@ -121,6 +140,8 @@ const LoadableIcon = (props: LoadableIconProps) => { } }, [icon]) + // This effect is most likely to be called only once (unless the icon source itself changes outside conditionally) + // Purpose is to apply SVG properties as sent in props to the icon like size, color etc. useEffect(() => { iconContent && !isLocal && diff --git a/src/app/components/atoms/Modal/Modal.tsx b/src/app/components/atoms/Modal/Modal.tsx index 50c5e47..f98ca5f 100755 --- a/src/app/components/atoms/Modal/Modal.tsx +++ b/src/app/components/atoms/Modal/Modal.tsx @@ -1,8 +1,6 @@ import { useEffect, useRef, useState } from "react" -import { ModalProps } from ".." -import LoadableIcon from "../LoadableIcon" +import { Button, LoadableIcon, ModalProps } from ".." import { ObjectType } from "../../../types/types" -import Button from "../Button" import { ArButtonVariants, ArSizes } from "../../../types/enums" import "./Modal.component.scss" diff --git a/src/app/components/atoms/Pill/Pill.tsx b/src/app/components/atoms/Pill/Pill.tsx index 8010cdb..77a0764 100755 --- a/src/app/components/atoms/Pill/Pill.tsx +++ b/src/app/components/atoms/Pill/Pill.tsx @@ -1,5 +1,4 @@ -import Icon from "../Icon" -import { PillProps } from ".." +import { Icon, PillProps } from ".." import "./Pill.component.scss" const Pill = (props: PillProps): JSX.Element => { diff --git a/src/app/components/atoms/SegmentedControl/SegmentedControl.tsx b/src/app/components/atoms/SegmentedControl/SegmentedControl.tsx index dee8fdb..ff23305 100755 --- a/src/app/components/atoms/SegmentedControl/SegmentedControl.tsx +++ b/src/app/components/atoms/SegmentedControl/SegmentedControl.tsx @@ -1,8 +1,6 @@ import { useState } from "react" -import LoadableIcon from "../LoadableIcon" -import Popover from "../Popover" +import { LoadableIcon, Popover, SegmentedControlProps } from ".." import { ArPopoverSlots, ArPopoverTriggers } from "../../../types/enums" -import { SegmentedControlProps } from ".." import { FunctionType, SegmentType } from "../../../types/types" import "./SegmentedControl.component.scss" diff --git a/src/app/components/atoms/Tags/Tags.tsx b/src/app/components/atoms/Tags/Tags.tsx index fb0851f..b0ab569 100755 --- a/src/app/components/atoms/Tags/Tags.tsx +++ b/src/app/components/atoms/Tags/Tags.tsx @@ -5,9 +5,7 @@ import { ArVisualizationTypes, } from "../../../types/enums" import { ObjectType } from "../../../types/types" -import ArViz from "../ArViz" -import LoadableIcon from "../LoadableIcon" -import Popover from "../Popover" +import { ArViz, LoadableIcon, Popover } from ".." import "./Tags.component.scss" const Tags = (props: TagsProps): JSX.Element => { diff --git a/src/app/components/atoms/TextInput/TextInput.tsx b/src/app/components/atoms/TextInput/TextInput.tsx index 5906c3c..d8cdb97 100755 --- a/src/app/components/atoms/TextInput/TextInput.tsx +++ b/src/app/components/atoms/TextInput/TextInput.tsx @@ -1,10 +1,7 @@ import { ChangeEvent, FocusEvent, useEffect, useState } from "react" -import Slider from "../Slider" -import Button from "../Button" -import { TextInputProps } from ".." +import { Button, Slider, TextInputProps, Icon } from ".." import { ArButtonVariants, ArPlacement } from "../../../types/enums" import { FunctionType } from "../../../types/types" -import Icon from "../Icon" import "./TextInput.component.scss" const TextInput = (props: TextInputProps): JSX.Element => { diff --git a/src/app/components/atoms/index.tsx b/src/app/components/atoms/index.tsx index 241499c..b923611 100644 --- a/src/app/components/atoms/index.tsx +++ b/src/app/components/atoms/index.tsx @@ -14,7 +14,6 @@ import ColorPicker from "./ColorPicker" import ColorSelector from "./ColorSelector" import ContextMenu from "./ContextMenu" import CronTab from "./CronTab" -import Date from "./Date" import DateInput from "./DateInput" import DatePicker from "./DatePicker" import DateRangePicker from "./DateRangePicker" @@ -88,7 +87,6 @@ import { ColorSelectorProps, ContextMenuProps, CronTabProps, - DateProps, DateInputProps, DatePickerProps, DateRangePickerProps, @@ -170,7 +168,6 @@ export { ColorSelector, ContextMenu, CronTab, - Date, DateInput, DatePicker, DateRangePicker, @@ -245,7 +242,6 @@ export { type ColorSelectorProps, type ContextMenuProps, type CronTabProps, - type DateProps, type DateInputProps, type DatePickerProps, type DateRangePickerProps, diff --git a/src/app/components/molecules/ErrorBoundary/ErrorBoundary.tsx b/src/app/components/molecules/ErrorBoundary/ErrorBoundary.tsx index 633d043..bdfb224 100755 --- a/src/app/components/molecules/ErrorBoundary/ErrorBoundary.tsx +++ b/src/app/components/molecules/ErrorBoundary/ErrorBoundary.tsx @@ -1,6 +1,5 @@ import { Component, ErrorInfo, ReactNode } from "react" -import { Link } from "react-router-dom" -import Icon from "../../atoms/Icon" +import { Icon } from "../.." import "./ErrorBoundary.component.scss" interface ErrorBoundaryProps { diff --git a/src/app/components/molecules/Filters/Filters.tsx b/src/app/components/molecules/Filters/Filters.tsx index 15331ef..aa1df8d 100755 --- a/src/app/components/molecules/Filters/Filters.tsx +++ b/src/app/components/molecules/Filters/Filters.tsx @@ -1,6 +1,4 @@ import { useState } from "react" -import { selectTag } from "../../../pages/IconsPage/IconsPage.slice" -import { useAppDispatch } from "../../../hooks" import { AlphabetFilter, CategoryFilter, Dropdown, Pillbox, Tags } from "../.." import { PillProps } from "../.." import { @@ -13,11 +11,17 @@ import Helper from "../../../utils/helper" import "./Filters.component.scss" const Filters = (props: FiltersProps): JSX.Element => { - const { config, data, filteredData, initialFilters, onFilterChange } = props + const { + config, + clickHandler, + data, + filteredData, + initialFilters, + onFilterChange, + } = props const [filters, setFilters] = useState( initialFilters, ) - const dispatch = useAppDispatch() const useData = filteredData || data const total = useData && useData.length @@ -128,10 +132,6 @@ const Filters = (props: FiltersProps): JSX.Element => { } }) - const clickHandler = (e: any) => { - dispatch(selectTag(e.point.name)) - } - return (
Filters
diff --git a/src/app/components/molecules/Suggestions/Suggestions.tsx b/src/app/components/molecules/Suggestions/Suggestions.tsx index caab90c..128a1a6 100755 --- a/src/app/components/molecules/Suggestions/Suggestions.tsx +++ b/src/app/components/molecules/Suggestions/Suggestions.tsx @@ -1,7 +1,10 @@ import { useRef, useState } from "react" -import { SuggestionsProps, SuggestionProps } from ".." -import { LoadableIconProps } from "../.." -import LoadableIcon from "../../atoms/LoadableIcon" +import { + SuggestionsProps, + SuggestionProps, + LoadableIcon, + LoadableIconProps, +} from "../.." import "./Suggestions.component.scss" const Suggestion = (props: SuggestionProps) => { diff --git a/src/app/components/molecules/Tiles/Tiles.tsx b/src/app/components/molecules/Tiles/Tiles.tsx index d454c5f..631ea95 100755 --- a/src/app/components/molecules/Tiles/Tiles.tsx +++ b/src/app/components/molecules/Tiles/Tiles.tsx @@ -1,5 +1,4 @@ -import { TilesProps } from ".." -import ProductDescriptionTile from "../ProductDescriptionTile" +import { ProductDescriptionTile, TilesProps } from ".." import "./Tiles.component.scss" const Tiles = (props: TilesProps): JSX.Element => { diff --git a/src/app/components/molecules/UserOptions/UserOptions.tsx b/src/app/components/molecules/UserOptions/UserOptions.tsx index 7fcc3f8..a14ac55 100755 --- a/src/app/components/molecules/UserOptions/UserOptions.tsx +++ b/src/app/components/molecules/UserOptions/UserOptions.tsx @@ -1,7 +1,6 @@ import { v4 as uuid } from "uuid" -import { getLoggedIn, getUser, notify, setLoggedIn } from "../../../store" +import { getLoggedIn, getUser, notify, setLoggedIn, setRightPanelContent } from "../../../store" import { useAppDispatch, useAppSelector } from "../../../hooks" -import { setRightPanelContent } from "../../../store" import { Button, List, LoadableIcon, Popover } from "../.." import { UserOptionsProps } from ".." import { @@ -15,8 +14,8 @@ import { User } from "../../../types/entity.interface" import { Helper, Network } from "../../../utils" import { ENDPOINTS } from "../../../config/constants" import API_CONFIG from "../../../config/api-config" -import "./UserOptions.component.scss" import WEB_CONFIG from "../../../config/web-config" +import "./UserOptions.component.scss" const isMobile = Helper.isMobile() diff --git a/src/app/pages/IconsPage/IconsPage.tsx b/src/app/pages/IconsPage/IconsPage.tsx index 74f1cb1..ce7afea 100755 --- a/src/app/pages/IconsPage/IconsPage.tsx +++ b/src/app/pages/IconsPage/IconsPage.tsx @@ -1,12 +1,14 @@ import { useEffect, useState } from "react" -import { useAppSelector } from "../../hooks" +import { useAppDispatch, useAppSelector } from "../../hooks" import { getRightPanelContent } from "../../store" +import { selectTag } from "./IconsPage.slice" import { Filters } from "../../components" import Footer from "../../components/Footer" import Main from "../../components/Main" import IconsList from "../../components/IconsList" import { ObjectType } from "../../types/types" import { FilterState } from "../../types/filterconfig.interface" +import { IconResponse } from "../../types/iconresponse.interface" import Network from "../../utils/network" import "./IconsPage.page.scss" @@ -32,6 +34,7 @@ const IconsPage = (props: IconsPageProps): JSX.Element => { const rightPanelContent = useAppSelector< { name: string; props?: ObjectType } | undefined >(getRightPanelContent) + const dispatch = useAppDispatch() // useEffect(() => { // !icons && fetchData("/icon/all", setIcons) @@ -98,6 +101,10 @@ const IconsPage = (props: IconsPageProps): JSX.Element => { // } // }, [filters, icons, searchText]) + const clickHandler = (e: any) => { + dispatch(selectTag(e.point.name)) + } + return (
{ }} // config={{ tags }} // data={icons} + clickHandler={clickHandler} filteredData={filteredIcons} initialFilters={filters} onFilterChange={setFilters} diff --git a/src/app/static/images/Stubble Component Lib Snap Orig.png b/src/app/static/images/Stubble Component Lib Snap Orig.png new file mode 100644 index 0000000..7bf576d Binary files /dev/null and b/src/app/static/images/Stubble Component Lib Snap Orig.png differ diff --git a/src/app/static/images/Stubble Component Lib Snap.png b/src/app/static/images/Stubble Component Lib Snap.png index 7bf576d..72f7612 100644 Binary files a/src/app/static/images/Stubble Component Lib Snap.png and b/src/app/static/images/Stubble Component Lib Snap.png differ diff --git a/src/app/types/components.interface.ts b/src/app/types/components.interface.ts index c00f5e4..2ad00bc 100644 --- a/src/app/types/components.interface.ts +++ b/src/app/types/components.interface.ts @@ -47,6 +47,7 @@ import { TreeListData, } from "./entity.interface" import { User } from "./entity.interface" +import { IconResponse, PageItem } from "./iconresponse.interface" import { AnimationHandler, ArrayType, diff --git a/src/app/types/filterconfig.interface.ts b/src/app/types/filterconfig.interface.ts index a9a118a..57cdd6a 100644 --- a/src/app/types/filterconfig.interface.ts +++ b/src/app/types/filterconfig.interface.ts @@ -1,4 +1,4 @@ -import { ObjectType } from "./types" +import { FunctionType, ObjectType } from "./types" export interface BasicFilterConfig { value: string @@ -13,6 +13,7 @@ export interface FilterConfig { } export interface FiltersProps { + clickHandler: FunctionType data?: Array filteredData?: Array config: FilterConfig diff --git a/src/app/types/iconresponse.interface.ts b/src/app/types/iconresponse.interface.ts index 43108ad..ed99787 100644 --- a/src/app/types/iconresponse.interface.ts +++ b/src/app/types/iconresponse.interface.ts @@ -1,6 +1,6 @@ -interface PageItem {} +export interface PageItem {} -interface IconResponse extends PageItem { +export interface IconResponse extends PageItem { name: string group: string svg: string diff --git a/src/app/types/route.interface.ts b/src/app/types/route.interface.ts index 0bb3aef..7ca104a 100644 --- a/src/app/types/route.interface.ts +++ b/src/app/types/route.interface.ts @@ -1,4 +1,4 @@ -interface RouteConfig { +export interface RouteConfig { path: string class: string element: string | JSX.Element | any diff --git a/src/app/utils/helper.tsx b/src/app/utils/helper.tsx index 5d87c64..bf4c477 100644 --- a/src/app/utils/helper.tsx +++ b/src/app/utils/helper.tsx @@ -5,6 +5,7 @@ import { ComponentDescription, ComponentList, } from "../types/componentlist.interface" +import { RouteConfig } from "../types/route.interface" // import * as COMPONENTS from "@armco/armory-react-components" class Helper { diff --git a/src/app/utils/lottieHelper.ts b/src/app/utils/lottieHelper.ts index 414df60..a3ce725 100644 --- a/src/app/utils/lottieHelper.ts +++ b/src/app/utils/lottieHelper.ts @@ -3,6 +3,7 @@ import base_lottie from "../static/LottieConfigs/base-lottie.json" import { LoadableIconProps } from "../types/components.interface" import { AnimationInjectConfig } from "../types/entity.interface" import { ArAnimationInjectionTypes, ArAnimationProperty } from "../types/enums" +import { IconResponse } from "../types/iconresponse.interface" import { Animation, ImageAsset, OffsetKeyframe } from "../types/lottie" class LottieHelper { diff --git a/tsconfig-publish.json b/tsconfig-publish.json deleted file mode 100644 index d302cbf..0000000 --- a/tsconfig-publish.json +++ /dev/null @@ -1,38 +0,0 @@ -{ - "compilerOptions": { - "allowJs": true, - "allowSyntheticDefaultImports": true, - "declaration": true, - "emitDeclarationOnly": true, - "declarationDir": "./build/es/types", - "downlevelIteration": true, - "esModuleInterop": true, - "forceConsistentCasingInFileNames": true, - "importHelpers": true, - "isolatedModules": true, - "jsx": "react-jsx", - "lib": [ - "dom", - "dom.iterable", - "esnext" - ], - "module": "esnext", - "moduleResolution": "node", - "noFallthroughCasesInSwitch": true, - "noImplicitReturns": true, - "outDir": "./build", - "resolveJsonModule": true, - "skipLibCheck": true, - "strict": true, - "target": "esnext", - }, - "include": ["src"], - "exclude": [ - "build", - "plop-templates", - "node_modules", - "src/**/*.test.*", - "src/**/*.spec.*", - "**/*.scss" - ], -} diff --git a/tsconfig.json b/tsconfig.json index 44cd87d..4f7bbb8 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -22,6 +22,6 @@ ], "target": "es5", }, - "include": ["src"], + "include": ["src", "Date"], "exclude": ["build", "plop-templates", "node_modules", "src/**/*.test.*", "src/**/*.spec.*", "src/stories", "scripts"] }