From 5d00fbcae75729f78a5b07dc797ce9a18329be51 Mon Sep 17 00:00:00 2001 From: soup-bowl Date: Tue, 26 Sep 2023 18:08:22 +0000 Subject: [PATCH 01/14] Colour and cron using wtlib. --- src/interfaces.ts | 35 - src/pages/colour.tsx | 3 +- src/pages/cron.tsx | 2 +- src/utils/colourCodes/htmlColours.json | 143 ---- src/utils/colourCodes/xkcdColours.json | 951 ------------------------- src/utils/colourUtils.ts | 164 ----- src/utils/cronUtils.ts | 49 -- 7 files changed, 2 insertions(+), 1345 deletions(-) delete mode 100644 src/utils/colourCodes/htmlColours.json delete mode 100644 src/utils/colourCodes/xkcdColours.json delete mode 100644 src/utils/colourUtils.ts delete mode 100644 src/utils/cronUtils.ts diff --git a/src/interfaces.ts b/src/interfaces.ts index f16072f..3b4fd4d 100644 --- a/src/interfaces.ts +++ b/src/interfaces.ts @@ -149,38 +149,3 @@ export interface IDomainSelection { protocol: string; url: string; } - -export interface RGB { - r: number; - g: number; - b: number; -} - -export interface HSL { - h: number; - s: number; - l: number; -} - -export interface CMYK { - c: number; - m: number; - y: number; - k: number; -} - -export interface Hue { - p: number; - q: number; - t: number; -} - -export interface IColourValues { - hex: string; - rgb: RGB; - hsl: HSL; - cmyk: CMYK; - htmlCode: string; - xkcdCode: string; - oxVar: string; -} diff --git a/src/pages/colour.tsx b/src/pages/colour.tsx index f35eff1..ba0e896 100644 --- a/src/pages/colour.tsx +++ b/src/pages/colour.tsx @@ -1,7 +1,6 @@ import { Button, Card, Grid, InputAdornment, TextField, Typography } from "@mui/material"; import { useEffect, useState } from "react"; -import { CMYK, HSL, IColourValues, RGB } from "../interfaces"; -import { cmykToAll, hexToAll, hslToAll, isValidColorString, rgbToAll } from "../utils/colourUtils"; +import { CMYK, HSL, IColourValues, RGB, cmykToAll, hexToAll, hslToAll, isValidColorString, rgbToAll } from "libwhatsthis"; const siteTitle = "Colour Picker"; diff --git a/src/pages/cron.tsx b/src/pages/cron.tsx index 2edd01e..c6d6f58 100644 --- a/src/pages/cron.tsx +++ b/src/pages/cron.tsx @@ -1,6 +1,6 @@ import { TextField, Typography } from "@mui/material"; import { ChangeEvent, useEffect, useState } from "react"; -import { calculateCronString, checkForValidCronCode, decodeCronCode, encodeCronCode } from "../utils/cronUtils"; +import { calculateCronString, checkForValidCronCode, decodeCronCode, encodeCronCode } from "libwhatsthis"; const CronConversionPage = () => { const inputGet = window.location.hash.split('/').slice(-1)[0]; diff --git a/src/utils/colourCodes/htmlColours.json b/src/utils/colourCodes/htmlColours.json deleted file mode 100644 index 384de5d..0000000 --- a/src/utils/colourCodes/htmlColours.json +++ /dev/null @@ -1,143 +0,0 @@ -{ - "AliceBlue": "#F0F8FF", - "AntiqueWhite": "#FAEBD7", - "Aqua": "#00FFFF", - "Aquamarine": "#7FFFD4", - "Azure": "#F0FFFF", - "Beige": "#F5F5DC", - "Bisque": "#FFE4C4", - "Black": "#000000", - "BlanchedAlmond": "#FFEBCD", - "Blue": "#0000FF", - "BlueViolet": "#8A2BE2", - "Brown": "#A52A2A", - "Burlywood": "#DEB887", - "CadetBlue": "#5F9EA0", - "Chartreuse": "#7FFF00", - "Chocolate": "#D2691E", - "Coral": "#FF7F50", - "CornflowerBlue": "#6495ED", - "Cornsilk": "#FFF8DC", - "Crimson": "#DC143C", - "Cyan": "#00FFFF", - "DarkBlue": "#00008B", - "DarkCyan": "#008B8B", - "DarkGoldenrod": "#B8860B", - "DarkGray": "#A9A9A9", - "DarkGreen": "#006400", - "DarkKhaki": "#BDB76B", - "DarkMagenta": "#8B008B", - "DarkOliveGreen": "#556B2F", - "DarkOrange": "#FF8C00", - "DarkOrchid": "#9932CC", - "DarkRed": "#8B0000", - "DarkSalmon": "#E9967A", - "DarkSeaGreen": "#8FBC8F", - "DarkSlateBlue": "#483D8B", - "DarkSlateGray": "#2F4F4F", - "DarkTurquoise": "#00CED1", - "DarkViolet": "#9400D3", - "DeepPink": "#FF1493", - "DeepSkyBlue": "#00BFFF", - "DimGray": "#696969", - "DodgerBlue": "#1E90FF", - "Firebrick": "#B22222", - "FloralWhite": "#FFFAF0", - "ForestGreen": "#228B22", - "Fuchsia": "#FF00FF", - "Gainsboro": "#DCDCDC", - "GhostWhite": "#F8F8FF", - "Gold": "#FFD700", - "Goldenrod": "#DAA520", - "Gray": "#808080", - "Green": "#008000", - "GreenYellow": "#ADFF2F", - "Honeydew": "#F0FFF0", - "HotPink": "#FF69B4", - "IndianRed": "#CD5C5C", - "Indigo": "#4B0082", - "Ivory": "#FFFFF0", - "Khaki": "#F0E68C", - "Lavender": "#E6E6FA", - "LavenderBlush": "#FFF0F5", - "LawnGreen": "#7CFC00", - "LemonChiffon": "#FFFACD", - "LightBlue": "#ADD8E6", - "LightCoral": "#F08080", - "LightCyan": "#E0FFFF", - "LightGoldenrodYellow": "#FAFAD2", - "LightGray": "#D3D3D3", - "LightGreen": "#90EE90", - "LightPink": "#FFB6C1", - "LightSalmon": "#FFA07A", - "LightSeaGreen": "#20B2AA", - "LightSkyBlue": "#87CEFA", - "LightSlateGray": "#778899", - "LightSteelBlue": "#B0C4DE", - "LightYellow": "#FFFFE0", - "Lime": "#00FF00", - "LimeGreen": "#32CD32", - "Linen": "#FAF0E6", - "Magenta": "#FF00FF", - "Maroon": "#800000", - "MediumAquamarine": "#66CDAA", - "MediumBlue": "#0000CD", - "MediumOrchid": "#BA55D3", - "MediumPurple": "#9370DB", - "MediumSeaGreen": "#3CB371", - "MediumSlateBlue": "#7B68EE", - "MediumSpringGreen": "#00FA9A", - "MediumTurquoise": "#48D1CC", - "MediumVioletRed": "#C71585", - "MidnightBlue": "#191970", - "MintCream": "#F5FFFA", - "MistyRose": "#FFE4E1", - "Moccasin": "#FFE4B5", - "NavajoWhite": "#FFDEAD", - "Navy": "#000080", - "OldLace": "#FDF5E6", - "Olive": "#808000", - "OliveDrab": "#6B8E23", - "Orange": "#FFA500", - "OrangeRed": "#FF4500", - "Orchid": "#DA70D6", - "PaleGoldenrod": "#EEE8AA", - "PaleGreen": "#98FB98", - "PaleTurquoise": "#AFEEEE", - "PaleVioletRed": "#DB7093", - "PapayaWhip": "#FFEFD5", - "PeachPuff": "#FFDAB9", - "Peru": "#CD853F", - "Pink": "#FFC0CB", - "Plum": "#DDA0DD", - "PowderBlue": "#B0E0E6", - "Purple": "#800080", - "RebeccaPurple": "#663399", - "Red": "#FF0000", - "RosyBrown": "#BC8F8F", - "RoyalBlue": "#4169E1", - "SaddleBrown": "#8B4513", - "Salmon": "#FA8072", - "SandyBrown": "#F4A460", - "SeaGreen": "#2E8B57", - "SeaShell": "#FFF5EE", - "Sienna": "#A0522D", - "Silver": "#C0C0C0", - "SkyBlue": "#87CEEB", - "SlateBlue": "#6A5ACD", - "SlateGray": "#708090", - "Snow": "#FFFAFA", - "SpringGreen": "#00FF7F", - "SteelBlue": "#4682B4", - "Tan": "#D2B48C", - "Teal": "#008080", - "Thistle": "#D8BFD8", - "Tomato": "#FF6347", - "Turquoise": "#40E0D0", - "Violet": "#EE82EE", - "Wheat": "#F5DEB3", - "White": "#FFFFFF", - "WhiteSmoke": "#F5F5F5", - "Yellow": "#FFFF00", - "YellowGreen": "#9ACD32" -} diff --git a/src/utils/colourCodes/xkcdColours.json b/src/utils/colourCodes/xkcdColours.json deleted file mode 100644 index 8b39c6d..0000000 --- a/src/utils/colourCodes/xkcdColours.json +++ /dev/null @@ -1,951 +0,0 @@ -{ - "Cloudy Blue": "#ACC2D9", - "Dark Pastel Green": "#56AE57", - "Dust": "#B2996E", - "Electric Lime": "#A8FF04", - "Fresh Green": "#69D84F", - "Light Eggplant": "#894585", - "Nasty Green": "#70B23F", - "Really Light Blue": "#D4FFFF", - "Tea": "#65AB7C", - "Warm Purple": "#952E8F", - "Yellowish Tan": "#FCFC81", - "Cement": "#A5A391", - "Dark Grass Green": "#388004", - "Dusty Teal": "#4C9085", - "Grey Teal": "#5E9B8A", - "Macaroni And Cheese": "#EFB435", - "Pinkish Tan": "#D99B82", - "Spruce": "#0A5F38", - "Strong Blue": "#0C06F7", - "Toxic Green": "#61DE2A", - "Windows Blue": "#3778BF", - "Blue Blue": "#2242C7", - "Blue With A Hint Of Purple": "#533CC6", - "Booger": "#9BB53C", - "Bright Sea Green": "#05FFA6", - "Dark Green Blue": "#1F6357", - "Deep Turquoise": "#017374", - "Green Teal": "#0CB577", - "Strong Pink": "#FF0789", - "Bland": "#AFA88B", - "Deep Aqua": "#08787F", - "Lavender Pink": "#DD85D7", - "Light Moss Green": "#A6C875", - "Light Seafoam Green": "#A7FFB5", - "Olive Yellow": "#C2B709", - "Pig Pink": "#E78EA5", - "Deep Lilac": "#966EBD", - "Desert": "#CCAD60", - "Dusty Lavender": "#AC86A8", - "Purpley Grey": "#947E94", - "Purply": "#983FB2", - "Candy Pink": "#FF63E9", - "Light Pastel Green": "#B2FBA5", - "Boring Green": "#63B365", - "Kiwi Green": "#8EE53F", - "Light Grey Green": "#B7E1A1", - "Orange Pink": "#FF6F52", - "Tea Green": "#BDF8A3", - "Very Light Brown": "#D3B683", - "Egg Shell": "#FFFCC4", - "Eggplant Purple": "#430541", - "Powder Pink": "#FFB2D0", - "Reddish Grey": "#997570", - "Baby Shit Brown": "#AD900D", - "Liliac": "#C48EFD", - "Stormy Blue": "#507B9C", - "Ugly Brown": "#7D7103", - "Custard": "#FFFD78", - "Darkish Pink": "#DA467D", - "Deep Brown": "#410200", - "Greenish Beige": "#C9D179", - "Manilla": "#FFFA86", - "Off Blue": "#5684AE", - "Battleship Grey": "#6B7C85", - "Browny Green": "#6F6C0A", - "Bruise": "#7E4071", - "Kelley Green": "#009337", - "Sickly Yellow": "#D0E429", - "Sunny Yellow": "#FFF917", - "Azul": "#1D5DEC", - "Darkgreen": "#054907", - "Green/Yellow": "#B5CE08", - "Lichen": "#8FB67B", - "Light Light Green": "#C8FFB0", - "Pale Gold": "#FDDE6C", - "Sun Yellow": "#FFDF22", - "Tan Green": "#A9BE70", - "Burple": "#6832E3", - "Butterscotch": "#FDB147", - "Toupe": "#C7AC7D", - "Dark Cream": "#FFF39A", - "Indian Red": "#850E04", - "Light Lavendar": "#EFC0FE", - "Poison Green": "#40FD14", - "Baby Puke Green": "#B6C406", - "Bright Yellow Green": "#9DFF00", - "Charcoal Grey": "#3C4142", - "Squash": "#F2AB15", - "Cinnamon": "#AC4F06", - "Light Pea Green": "#C4FE82", - "Radioactive Green": "#2CFA1F", - "Raw Sienna": "#9A6200", - "Baby Purple": "#CA9BF7", - "Cocoa": "#875F42", - "Light Royal Blue": "#3A2EFE", - "Orangeish": "#FD8D49", - "Rust Brown": "#8B3103", - "Sand Brown": "#CBA560", - "Swamp": "#698339", - "Tealish Green": "#0CDC73", - "Burnt Siena": "#B75203", - "Camo": "#7F8F4E", - "Dusk Blue": "#26538D", - "Fern": "#63A950", - "Old Rose": "#C87F89", - "Pale Light Green": "#B1FC99", - "Peachy Pink": "#FF9A8A", - "Rosy Pink": "#F6688E", - "Light Bluish Green": "#76FDA8", - "Light Bright Green": "#53FE5C", - "Light Neon Green": "#4EFD54", - "Light Seafoam": "#A0FEBF", - "Tiffany Blue": "#7BF2DA", - "Washed Out Green": "#BCF5A6", - "Browny Orange": "#CA6B02", - "Nice Blue": "#107AB0", - "Sapphire": "#2138AB", - "Greyish Teal": "#719F91", - "Orangey Yellow": "#FDB915", - "Parchment": "#FEFCAF", - "Straw": "#FCF679", - "Very Dark Brown": "#1D0200", - "Terracota": "#CB6843", - "Ugly Blue": "#31668A", - "Clear Blue": "#247AFD", - "Creme": "#FFFFB6", - "Foam Green": "#90FDA9", - "Grey/Green": "#86A17D", - "Light Gold": "#FDDC5C", - "Seafoam Blue": "#78D1B6", - "Topaz": "#13BBAF", - "Violet Pink": "#FB5FFC", - "Wintergreen": "#20F986", - "Yellow Tan": "#FFE36E", - "Dark Fuchsia": "#9D0759", - "Indigo Blue": "#3A18B1", - "Light Yellowish Green": "#C2FF89", - "Pale Magenta": "#D767AD", - "Rich Purple": "#720058", - "Sunflower Yellow": "#FFDA03", - "Green/Blue": "#01C08D", - "Leather": "#AC7434", - "Racing Green": "#014600", - "Vivid Purple": "#9900FA", - "Dark Royal Blue": "#02066F", - "Hazel": "#8E7618", - "Muted Pink": "#D1768F", - "Booger Green": "#96B403", - "Canary": "#FDFF63", - "Cool Grey": "#95A3A6", - "Dark Taupe": "#7F684E", - "Darkish Purple": "#751973", - "True Green": "#089404", - "Coral Pink": "#FF6163", - "Dark Sage": "#598556", - "Dark Slate Blue": "#214761", - "Flat Blue": "#3C73A8", - "Mushroom": "#BA9E88", - "Rich Blue": "#021BF9", - "Dirty Purple": "#734A65", - "Greenblue": "#23C48B", - "Icky Green": "#8FAE22", - "Light Khaki": "#E6F2A2", - "Warm Blue": "#4B57DB", - "Dark Hot Pink": "#D90166", - "Deep Sea Blue": "#015482", - "Carmine": "#9D0216", - "Dark Yellow Green": "#728F02", - "Pale Peach": "#FFE5AD", - "Plum Purple": "#4E0550", - "Golden Rod": "#F9BC08", - "Neon Red": "#FF073A", - "Old Pink": "#C77986", - "Very Pale Blue": "#D6FFFE", - "Blood Orange": "#FE4B03", - "Grapefruit": "#FD5956", - "Sand Yellow": "#FCE166", - "Clay Brown": "#B2713D", - "Dark Blue Grey": "#1F3B4D", - "Flat Green": "#699D4C", - "Light Green Blue": "#56FCA2", - "Warm Pink": "#FB5581", - "Dodger Blue": "#3E82FC", - "Gross Green": "#A0BF16", - "Ice": "#D6FFFA", - "Metallic Blue": "#4F738E", - "Pale Salmon": "#FFB19A", - "Sap Green": "#5C8B15", - "Algae": "#54AC68", - "Bluey Grey": "#89A0B0", - "Greeny Grey": "#7EA07A", - "Highlighter Green": "#1BFC06", - "Light Light Blue": "#CAFFFB", - "Light Mint": "#B6FFBB", - "Raw Umber": "#A75E09", - "Vivid Blue": "#152EFF", - "Deep Lavender": "#8D5EB7", - "Dull Teal": "#5F9E8F", - "Light Greenish Blue": "#63F7B4", - "Mud Green": "#606602", - "Pinky": "#FC86AA", - "Red Wine": "#8C0034", - "Shit Green": "#758000", - "Tan Brown": "#AB7E4C", - "Darkblue": "#030764", - "Rosa": "#FE86A4", - "Lipstick": "#D5174E", - "Pale Mauve": "#FED0FC", - "Claret": "#680018", - "Dandelion": "#FEDF08", - "Orangered": "#FE420F", - "Poop Green": "#6F7C00", - "Ruby": "#CA0147", - "Dark": "#1B2431", - "Greenish Turquoise": "#00FBB0", - "Pastel Red": "#DB5856", - "Piss Yellow": "#DDD618", - "Bright Cyan": "#41FDFE", - "Dark Coral": "#CF524E", - "Algae Green": "#21C36F", - "Darkish Red": "#A90308", - "Reddy Brown": "#6E1005", - "Blush Pink": "#FE828C", - "Camouflage Green": "#4B6113", - "Lawn Green": "#4DA409", - "Putty": "#BEAE8A", - "Vibrant Blue": "#0339F8", - "Dark Sand": "#A88F59", - "Purple/Blue": "#5D21D0", - "Saffron": "#FEB209", - "Twilight": "#4E518B", - "Warm Brown": "#964E02", - "Bluegrey": "#85A3B2", - "Bubble Gum Pink": "#FF69AF", - "Duck Egg Blue": "#C3FBF4", - "Greenish Cyan": "#2AFEB7", - "Petrol": "#005F6A", - "Royal": "#0C1793", - "Butter": "#FFFF81", - "Dusty Orange": "#F0833A", - "Off Yellow": "#F1F33F", - "Pale Olive Green": "#B1D27B", - "Orangish": "#FC824A", - "Leaf": "#71AA34", - "Light Blue Grey": "#B7C9E2", - "Dried Blood": "#4B0101", - "Lightish Purple": "#A552E6", - "Rusty Red": "#AF2F0D", - "Lavender Blue": "#8B88F8", - "Light Grass Green": "#9AF764", - "Light Mint Green": "#A6FBB2", - "Sunflower": "#FFC512", - "Velvet": "#750851", - "Brick Orange": "#C14A09", - "Lightish Red": "#FE2F4A", - "Pure Blue": "#0203E2", - "Twilight Blue": "#0A437A", - "Violet Red": "#A50055", - "Yellowy Brown": "#AE8B0C", - "Carnation": "#FD798F", - "Muddy Yellow": "#BFAC05", - "Dark Seafoam Green": "#3EAF76", - "Deep Rose": "#C74767", - "Dusty Red": "#B9484E", - "Grey/Blue": "#647D8E", - "Lemon Lime": "#BFFE28", - "Purple/Pink": "#D725DE", - "Brown Yellow": "#B29705", - "Purple Brown": "#673A3F", - "Wisteria": "#A87DC2", - "Banana Yellow": "#FAFE4B", - "Lipstick Red": "#C0022F", - "Water Blue": "#0E87CC", - "Brown Grey": "#8D8468", - "Vibrant Purple": "#AD03DE", - "Baby Green": "#8CFF9E", - "Barf Green": "#94AC02", - "Eggshell Blue": "#C4FFF7", - "Sandy Yellow": "#FDEE73", - "Cool Green": "#33B864", - "Pale": "#FFF9D0", - "Blue/Grey": "#758DA3", - "Hot Magenta": "#F504C9", - "Greyblue": "#77A1B5", - "Purpley": "#8756E4", - "Baby Shit Green": "#889717", - "Brownish Pink": "#C27E79", - "Dark Aquamarine": "#017371", - "Diarrhea": "#9F8303", - "Light Mustard": "#F7D560", - "Pale Sky Blue": "#BDF6FE", - "Turtle Green": "#75B84F", - "Bright Olive": "#9CBB04", - "Dark Grey Blue": "#29465B", - "Greeny Brown": "#696006", - "Lemon Green": "#ADF802", - "Light Periwinkle": "#C1C6FC", - "Seaweed Green": "#35AD6B", - "Sunshine Yellow": "#FFFD37", - "Ugly Purple": "#A442A0", - "Medium Pink": "#F36196", - "Puke Brown": "#947706", - "Very Light Pink": "#FFF4F2", - "Viridian": "#1E9167", - "Bile": "#B5C306", - "Faded Yellow": "#FEFF7F", - "Very Pale Green": "#CFFDBC", - "Vibrant Green": "#0ADD08", - "Bright Lime": "#87FD05", - "Spearmint": "#1EF876", - "Light Aquamarine": "#7BFDC7", - "Light Sage": "#BCECAC", - "Yellowgreen": "#BBF90F", - "Baby Poo": "#AB9004", - "Dark Seafoam": "#1FB57A", - "Deep Teal": "#00555A", - "Heather": "#A484AC", - "Rust Orange": "#C45508", - "Dirty Blue": "#3F829D", - "Fern Green": "#548D44", - "Bright Lilac": "#C95EFB", - "Weird Green": "#3AE57F", - "Peacock Blue": "#016795", - "Avocado Green": "#87A922", - "Faded Orange": "#F0944D", - "Grape Purple": "#5D1451", - "Hot Green": "#25FF29", - "Lime Yellow": "#D0FE1D", - "Mango": "#FFA62B", - "Shamrock": "#01B44C", - "Bubblegum": "#FF6CB5", - "Purplish Brown": "#6B4247", - "Vomit Yellow": "#C7C10C", - "Pale Cyan": "#B7FFFA", - "Key Lime": "#AEFF6E", - "Tomato Red": "#EC2D01", - "Lightgreen": "#76FF7B", - "Merlot": "#730039", - "Night Blue": "#040348", - "Purpleish Pink": "#DF4EC8", - "Apple": "#6ECB3C", - "Baby Poop Green": "#8F9805", - "Green Apple": "#5EDC1F", - "Heliotrope": "#D94FF5", - "Yellow/Green": "#C8FD3D", - "Almost Black": "#070D0D", - "Cool Blue": "#4984B8", - "Leafy Green": "#51B73B", - "Mustard Brown": "#AC7E04", - "Dusk": "#4E5481", - "Dull Brown": "#876E4B", - "Frog Green": "#58BC08", - "Vivid Green": "#2FEF10", - "Bright Light Green": "#2DFE54", - "Fluro Green": "#0AFF02", - "Kiwi": "#9CEF43", - "Seaweed": "#18D17B", - "Navy Green": "#35530A", - "Ultramarine Blue": "#1805DB", - "Iris": "#6258C4", - "Pastel Orange": "#FF964F", - "Yellowish Orange": "#FFAB0F", - "Perrywinkle": "#8F8CE7", - "Tealish": "#24BCA8", - "Dark Plum": "#3F012C", - "Pear": "#CBF85F", - "Pinkish Orange": "#FF724C", - "Midnight Purple": "#280137", - "Light Urple": "#B36FF6", - "Dark Mint": "#48C072", - "Greenish Tan": "#BCCB7A", - "Light Burgundy": "#A8415B", - "Turquoise Blue": "#06B1C4", - "Ugly Pink": "#CD7584", - "Sandy": "#F1DA7A", - "Electric Pink": "#FF0490", - "Muted Purple": "#805B87", - "Mid Green": "#50A747", - "Greyish": "#A8A495", - "Neon Yellow": "#CFFF04", - "Banana": "#FFFF7E", - "Carnation Pink": "#FF7FA7", - "Tomato": "#EF4026", - "Sea": "#3C9992", - "Muddy Brown": "#886806", - "Turquoise Green": "#04F489", - "Buff": "#FEF69E", - "Fawn": "#CFAF7B", - "Muted Blue": "#3B719F", - "Pale Rose": "#FDC1C5", - "Dark Mint Green": "#20C073", - "Amethyst": "#9B5FC0", - "Blue/Green": "#0F9B8E", - "Chestnut": "#742802", - "Sick Green": "#9DB92C", - "Pea": "#A4BF20", - "Rusty Orange": "#CD5909", - "Stone": "#ADA587", - "Rose Red": "#BE013C", - "Pale Aqua": "#B8FFEB", - "Deep Orange": "#DC4D01", - "Earth": "#A2653E", - "Mossy Green": "#638B27", - "Grassy Green": "#419C03", - "Pale Lime Green": "#B1FF65", - "Light Grey Blue": "#9DBCD4", - "Pale Grey": "#FDFDFE", - "Asparagus": "#77AB56", - "Blueberry": "#464196", - "Purple Red": "#990147", - "Pale Lime": "#BEFD73", - "Greenish Teal": "#32BF84", - "Caramel": "#AF6F09", - "Deep Magenta": "#A0025C", - "Light Peach": "#FFD8B1", - "Milk Chocolate": "#7F4E1E", - "Ocher": "#BF9B0C", - "Off Green": "#6BA353", - "Purply Pink": "#F075E6", - "Lightblue": "#7BC8F6", - "Dusky Blue": "#475F94", - "Golden": "#F5BF03", - "Light Beige": "#FFFEB6", - "Butter Yellow": "#FFFD74", - "Dusky Purple": "#895B7B", - "French Blue": "#436BAD", - "Ugly Yellow": "#D0C101", - "Greeny Yellow": "#C6F808", - "Orangish Red": "#F43605", - "Shamrock Green": "#02C14D", - "Orangish Brown": "#B25F03", - "Tree Green": "#2A7E19", - "Deep Violet": "#490648", - "Gunmetal": "#536267", - "Blue/Purple": "#5A06EF", - "Cherry": "#CF0234", - "Sandy Brown": "#C4A661", - "Warm Grey": "#978A84", - "Dark Indigo": "#1F0954", - "Midnight": "#03012D", - "Bluey Green": "#2BB179", - "Grey Pink": "#C3909B", - "Soft Purple": "#A66FB5", - "Blood": "#770001", - "Brown Red": "#922B05", - "Medium Grey": "#7D7F7C", - "Berry": "#990F4B", - "Poo": "#8F7303", - "Purpley Pink": "#C83CB9", - "Light Salmon": "#FEA993", - "Snot": "#ACBB0D", - "Easter Purple": "#C071FE", - "Light Yellow Green": "#CCFD7F", - "Dark Navy Blue": "#00022E", - "Drab": "#828344", - "Light Rose": "#FFC5CB", - "Rouge": "#AB1239", - "Purplish Red": "#B0054B", - "Slime Green": "#99CC04", - "Baby Poop": "#937C00", - "Irish Green": "#019529", - "Pink/Purple": "#EF1DE7", - "Dark Navy": "#000435", - "Greeny Blue": "#42B395", - "Light Plum": "#9D5783", - "Pinkish Grey": "#C8ACA9", - "Dirty Orange": "#C87606", - "Rust Red": "#AA2704", - "Pale Lilac": "#E4CBFF", - "Orangey Red": "#FA4224", - "Primary Blue": "#0804F9", - "Kermit Green": "#5CB200", - "Brownish Purple": "#76424E", - "Murky Green": "#6C7A0E", - "Wheat": "#FBDD7E", - "Very Dark Purple": "#2A0134", - "Bottle Green": "#044A05", - "Watermelon": "#FD4659", - "Deep Sky Blue": "#0D75F8", - "Fire Engine Red": "#FE0002", - "Yellow Ochre": "#CB9D06", - "Pumpkin Orange": "#FB7D07", - "Pale Olive": "#B9CC81", - "Light Lilac": "#EDC8FF", - "Lightish Green": "#61E160", - "Carolina Blue": "#8AB8FE", - "Mulberry": "#920A4E", - "Shocking Pink": "#FE02A2", - "Auburn": "#9A3001", - "Bright Lime Green": "#65FE08", - "Celadon": "#BEFDB7", - "Pinkish Brown": "#B17261", - "Poo Brown": "#885F01", - "Bright Sky Blue": "#02CCFE", - "Celery": "#C1FD95", - "Dirt Brown": "#836539", - "Strawberry": "#FB2943", - "Dark Lime": "#84B701", - "Copper": "#B66325", - "Medium Brown": "#7F5112", - "Muted Green": "#5FA052", - "Robin'S Egg": "#6DEDFD", - "Bright Aqua": "#0BF9EA", - "Bright Lavender": "#C760FF", - "Ivory": "#FFFFCB", - "Very Light Purple": "#F6CEFC", - "Light Navy": "#155084", - "Pink Red": "#F5054F", - "Olive Brown": "#645403", - "Poop Brown": "#7A5901", - "Mustard Green": "#A8B504", - "Ocean Green": "#3D9973", - "Very Dark Blue": "#000133", - "Dusty Green": "#76A973", - "Light Navy Blue": "#2E5A88", - "Minty Green": "#0BF77D", - "Adobe": "#BD6C48", - "Barney": "#AC1DB8", - "Jade Green": "#2BAF6A", - "Bright Light Blue": "#26F7FD", - "Light Lime": "#AEFD6C", - "Dark Khaki": "#9B8F55", - "Orange Yellow": "#FFAD01", - "Ocre": "#C69C04", - "Maize": "#F4D054", - "Faded Pink": "#DE9DAC", - "British Racing Green": "#05480D", - "Sandstone": "#C9AE74", - "Mud Brown": "#60460F", - "Light Sea Green": "#98F6B0", - "Robin Egg Blue": "#8AF1FE", - "Aqua Marine": "#2EE8BB", - "Dark Sea Green": "#11875D", - "Soft Pink": "#FDB0C0", - "Orangey Brown": "#B16002", - "Cherry Red": "#F7022A", - "Burnt Yellow": "#D5AB09", - "Brownish Grey": "#86775F", - "Camel": "#C69F59", - "Purplish Grey": "#7A687F", - "Marine": "#042E60", - "Greyish Pink": "#C88D94", - "Pale Turquoise": "#A5FBD5", - "Pastel Yellow": "#FFFE71", - "Bluey Purple": "#6241C7", - "Canary Yellow": "#FFFE40", - "Faded Red": "#D3494E", - "Sepia": "#985E2B", - "Coffee": "#A6814C", - "Bright Magenta": "#FF08E8", - "Mocha": "#9D7651", - "Ecru": "#FEFFCA", - "Purpleish": "#98568D", - "Cranberry": "#9E003A", - "Darkish Green": "#287C37", - "Brown Orange": "#B96902", - "Dusky Rose": "#BA6873", - "Melon": "#FF7855", - "Sickly Green": "#94B21C", - "Silver": "#C5C9C7", - "Purply Blue": "#661AEE", - "Purpleish Blue": "#6140EF", - "Hospital Green": "#9BE5AA", - "Shit Brown": "#7B5804", - "Mid Blue": "#276AB3", - "Amber": "#FEB308", - "Easter Green": "#8CFD7E", - "Soft Blue": "#6488EA", - "Cerulean Blue": "#056EEE", - "Golden Brown": "#B27A01", - "Bright Turquoise": "#0FFEF9", - "Red Pink": "#FA2A55", - "Red Purple": "#820747", - "Greyish Brown": "#7A6A4F", - "Vermillion": "#F4320C", - "Russet": "#A13905", - "Steel Grey": "#6F828A", - "Lighter Purple": "#A55AF4", - "Bright Violet": "#AD0AFD", - "Prussian Blue": "#004577", - "Slate Green": "#658D6D", - "Dirty Pink": "#CA7B80", - "Dark Blue Green": "#005249", - "Pine": "#2B5D34", - "Yellowy Green": "#BFF128", - "Dark Gold": "#B59410", - "Bluish": "#2976BB", - "Darkish Blue": "#014182", - "Dull Red": "#BB3F3F", - "Pinky Red": "#FC2647", - "Bronze": "#A87900", - "Pale Teal": "#82CBB2", - "Military Green": "#667C3E", - "Barbie Pink": "#FE46A5", - "Bubblegum Pink": "#FE83CC", - "Pea Soup Green": "#94A617", - "Dark Mustard": "#A88905", - "Shit": "#7F5F00", - "Medium Purple": "#9E43A2", - "Very Dark Green": "#062E03", - "Dirt": "#8A6E45", - "Dusky Pink": "#CC7A8B", - "Red Violet": "#9E0168", - "Lemon Yellow": "#FDFF38", - "Pistachio": "#C0FA8B", - "Dull Yellow": "#EEDC5B", - "Dark Lime Green": "#7EBD01", - "Denim Blue": "#3B5B92", - "Teal Blue": "#01889F", - "Lightish Blue": "#3D7AFD", - "Purpley Blue": "#5F34E7", - "Light Indigo": "#6D5ACF", - "Swamp Green": "#748500", - "Brown Green": "#706C11", - "Dark Maroon": "#3C0008", - "Hot Purple": "#CB00F5", - "Dark Forest Green": "#002D04", - "Faded Blue": "#658CBB", - "Drab Green": "#749551", - "Light Lime Green": "#B9FF66", - "Snot Green": "#9DC100", - "Yellowish": "#FAEE66", - "Light Blue Green": "#7EFBB3", - "Bordeaux": "#7B002C", - "Light Mauve": "#C292A1", - "Ocean": "#017B92", - "Marigold": "#FCC006", - "Muddy Green": "#657432", - "Dull Orange": "#D8863B", - "Steel": "#738595", - "Electric Purple": "#AA23FF", - "Fluorescent Green": "#08FF08", - "Yellowish Brown": "#9B7A01", - "Blush": "#F29E8E", - "Soft Green": "#6FC276", - "Bright Orange": "#FF5B00", - "Lemon": "#FDFF52", - "Purple Grey": "#866F85", - "Acid Green": "#8FFE09", - "Pale Lavender": "#EECFFE", - "Violet Blue": "#510AC9", - "Light Forest Green": "#4F9153", - "Burnt Red": "#9F2305", - "Khaki Green": "#728639", - "Cerise": "#DE0C62", - "Faded Purple": "#916E99", - "Apricot": "#FFB16D", - "Dark Olive Green": "#3C4D03", - "Grey Brown": "#7F7053", - "Green Grey": "#77926F", - "True Blue": "#010FCC", - "Pale Violet": "#CEAEFA", - "Periwinkle Blue": "#8F99FB", - "Light Sky Blue": "#C6FCFF", - "Blurple": "#5539CC", - "Green Brown": "#544E03", - "Bluegreen": "#017A79", - "Bright Teal": "#01F9C6", - "Brownish Yellow": "#C9B003", - "Pea Soup": "#929901", - "Forest": "#0B5509", - "Barney Purple": "#A00498", - "Ultramarine": "#2000B1", - "Purplish": "#94568C", - "Puke Yellow": "#C2BE0E", - "Bluish Grey": "#748B97", - "Dark Periwinkle": "#665FD1", - "Dark Lilac": "#9C6DA5", - "Reddish": "#C44240", - "Light Maroon": "#A24857", - "Dusty Purple": "#825F87", - "Terra Cotta": "#C9643B", - "Avocado": "#90B134", - "Marine Blue": "#01386A", - "Teal Green": "#25A36F", - "Slate Grey": "#59656D", - "Lighter Green": "#75FD63", - "Electric Green": "#21FC0D", - "Dusty Blue": "#5A86AD", - "Golden Yellow": "#FEC615", - "Bright Yellow": "#FFFD01", - "Light Lavender": "#DFC5FE", - "Umber": "#B26400", - "Poop": "#7F5E00", - "Dark Peach": "#DE7E5D", - "Jungle Green": "#048243", - "Eggshell": "#FFFFD4", - "Denim": "#3B638C", - "Yellow Brown": "#B79400", - "Dull Purple": "#84597E", - "Chocolate Brown": "#411900", - "Wine Red": "#7B0323", - "Neon Blue": "#04D9FF", - "Dirty Green": "#667E2C", - "Light Tan": "#FBEEAC", - "Ice Blue": "#D7FFFE", - "Cadet Blue": "#4E7496", - "Dark Mauve": "#874C62", - "Very Light Blue": "#D5FFFF", - "Grey Purple": "#826D8C", - "Pastel Pink": "#FFBACD", - "Very Light Green": "#D1FFBD", - "Dark Sky Blue": "#448EE4", - "Evergreen": "#05472A", - "Dull Pink": "#D5869D", - "Aubergine": "#3D0734", - "Mahogany": "#4A0100", - "Reddish Orange": "#F8481C", - "Deep Green": "#02590F", - "Vomit Green": "#89A203", - "Purple Pink": "#E03FD8", - "Dusty Pink": "#D58A94", - "Faded Green": "#7BB274", - "Camo Green": "#526525", - "Pinky Purple": "#C94CBE", - "Pink Purple": "#DB4BDA", - "Brownish Red": "#9E3623", - "Dark Rose": "#B5485D", - "Mud": "#735C12", - "Brownish": "#9C6D57", - "Emerald Green": "#028F1E", - "Pale Brown": "#B1916E", - "Dull Blue": "#49759C", - "Burnt Umber": "#A0450E", - "Medium Green": "#39AD48", - "Clay": "#B66A50", - "Light Aqua": "#8CFFDB", - "Light Olive Green": "#A4BE5C", - "Brownish Orange": "#CB7723", - "Dark Aqua": "#05696B", - "Purplish Pink": "#CE5DAE", - "Dark Salmon": "#C85A53", - "Greenish Grey": "#96AE8D", - "Jade": "#1FA774", - "Ugly Green": "#7A9703", - "Dark Beige": "#AC9362", - "Emerald": "#01A049", - "Pale Red": "#D9544D", - "Light Magenta": "#FA5FF7", - "Sky": "#82CAFC", - "Light Cyan": "#ACFFFC", - "Yellow Orange": "#FCB001", - "Reddish Purple": "#910951", - "Reddish Pink": "#FE2C54", - "Orchid": "#C875C4", - "Dirty Yellow": "#CDC50A", - "Orange Red": "#FD411E", - "Deep Red": "#9A0200", - "Orange Brown": "#BE6400", - "Cobalt Blue": "#030AA7", - "Neon Pink": "#FE019A", - "Rose Pink": "#F7879A", - "Greyish Purple": "#887191", - "Raspberry": "#B00149", - "Aqua Green": "#12E193", - "Salmon Pink": "#FE7B7C", - "Tangerine": "#FF9408", - "Brownish Green": "#6A6E09", - "Red Brown": "#8B2E16", - "Greenish Brown": "#696112", - "Pumpkin": "#E17701", - "Pine Green": "#0A481E", - "Charcoal": "#343837", - "Baby Pink": "#FFB7CE", - "Cornflower": "#6A79F7", - "Blue Violet": "#5D06E9", - "Chocolate": "#3D1C02", - "Greyish Green": "#82A67D", - "Scarlet": "#BE0119", - "Green Yellow": "#C9FF27", - "Dark Olive": "#373E02", - "Sienna": "#A9561E", - "Pastel Purple": "#CAA0FF", - "Terracotta": "#CA6641", - "Aqua Blue": "#02D8E9", - "Sage Green": "#88B378", - "Blood Red": "#980002", - "Deep Pink": "#CB0162", - "Grass": "#5CAC2D", - "Moss": "#769958", - "Pastel Blue": "#A2BFFE", - "Bluish Green": "#10A674", - "Green Blue": "#06B48B", - "Dark Tan": "#AF884A", - "Greenish Blue": "#0B8B87", - "Pale Orange": "#FFA756", - "Vomit": "#A2A415", - "Forrest Green": "#154406", - "Dark Lavender": "#856798", - "Dark Violet": "#34013F", - "Purple Blue": "#632DE9", - "Dark Cyan": "#0A888A", - "Olive Drab": "#6F7632", - "Pinkish": "#D46A7E", - "Cobalt": "#1E488F", - "Neon Purple": "#BC13FE", - "Light Turquoise": "#7EF4CC", - "Apple Green": "#76CD26", - "Dull Green": "#74A662", - "Wine": "#80013F", - "Powder Blue": "#B1D1FC", - "Off White": "#FFFFE4", - "Electric Blue": "#0652FF", - "Dark Turquoise": "#045C5A", - "Blue Purple": "#5729CE", - "Azure": "#069AF3", - "Bright Red": "#FF000D", - "Pinkish Red": "#F10C45", - "Cornflower Blue": "#5170D7", - "Light Olive": "#ACBF69", - "Grape": "#6C3461", - "Greyish Blue": "#5E819D", - "Purplish Blue": "#601EF9", - "Yellowish Green": "#B0DD16", - "Greenish Yellow": "#CDFD02", - "Medium Blue": "#2C6FBB", - "Dusty Rose": "#C0737A", - "Light Violet": "#D6B4FC", - "Midnight Blue": "#020035", - "Bluish Purple": "#703BE7", - "Red Orange": "#FD3C06", - "Dark Magenta": "#960056", - "Greenish": "#40A368", - "Ocean Blue": "#03719C", - "Coral": "#FC5A50", - "Cream": "#FFFFC2", - "Reddish Brown": "#7F2B0A", - "Burnt Sienna": "#B04E0F", - "Brick": "#A03623", - "Sage": "#87AE73", - "Grey Green": "#789B73", - "White": "#FFFFFF", - "Robin'S Egg Blue": "#98EFF9", - "Moss Green": "#658B38", - "Steel Blue": "#5A7D9A", - "Eggplant": "#380835", - "Light Yellow": "#FFFE7A", - "Leaf Green": "#5CA904", - "Light Grey": "#D8DCD6", - "Puke": "#A5A502", - "Pinkish Purple": "#D648D7", - "Sea Blue": "#047495", - "Pale Purple": "#B790D4", - "Slate Blue": "#5B7C99", - "Blue Grey": "#607C8E", - "Hunter Green": "#0B4008", - "Fuchsia": "#ED0DD9", - "Crimson": "#8C000F", - "Pale Yellow": "#FFFF84", - "Ochre": "#BF9005", - "Mustard Yellow": "#D2BD0A", - "Light Red": "#FF474C", - "Cerulean": "#0485D1", - "Pale Pink": "#FFCFDC", - "Deep Blue": "#040273", - "Rust": "#A83C09", - "Light Teal": "#90E4C1", - "Slate": "#516572", - "Goldenrod": "#FAC205", - "Dark Yellow": "#D5B60A", - "Dark Grey": "#363737", - "Army Green": "#4B5D16", - "Grey Blue": "#6B8BA4", - "Seafoam": "#80F9AD", - "Puce": "#A57E52", - "Spring Green": "#A9F971", - "Dark Orange": "#C65102", - "Sand": "#E2CA76", - "Pastel Green": "#B0FF9D", - "Mint": "#9FFEB0", - "Light Orange": "#FDAA48", - "Bright Pink": "#FE01B1", - "Chartreuse": "#C1F80A", - "Deep Purple": "#36013F", - "Dark Brown": "#341C02", - "Taupe": "#B9A281", - "Pea Green": "#8EAB12", - "Puke Green": "#9AAE07", - "Kelly Green": "#02AB2E", - "Seafoam Green": "#7AF9AB", - "Blue Green": "#137E6D", - "Khaki": "#AAA662", - "Burgundy": "#610023", - "Dark Teal": "#014D4E", - "Brick Red": "#8F1402", - "Royal Purple": "#4B006E", - "Plum": "#580F41", - "Mint Green": "#8FFF9F", - "Gold": "#DBB40C", - "Baby Blue": "#A2CFFE", - "Yellow Green": "#C0FB2D", - "Bright Purple": "#BE03FD", - "Dark Red": "#840000", - "Pale Blue": "#D0FEFE", - "Grass Green": "#3F9B0B", - "Navy": "#01153E", - "Aquamarine": "#04D8B2", - "Burnt Orange": "#C04E01", - "Neon Green": "#0CFF0C", - "Bright Blue": "#0165FC", - "Rose": "#CF6275", - "Light Pink": "#FFD1DF", - "Mustard": "#CEB301", - "Indigo": "#380282", - "Lime": "#AAFF32", - "Sea Green": "#53FCA1", - "Periwinkle": "#8E82FE", - "Dark Pink": "#CB416B", - "Olive Green": "#677A04", - "Peach": "#FFB07C", - "Pale Green": "#C7FDB5", - "Light Brown": "#AD8150", - "Hot Pink": "#FF028D", - "Black": "#000000", - "Lilac": "#CEA2FD", - "Navy Blue": "#001146", - "Royal Blue": "#0504AA", - "Beige": "#E6DAA6", - "Salmon": "#FF796C", - "Olive": "#6E750E", - "Maroon": "#650021", - "Bright Green": "#01FF07", - "Dark Purple": "#35063E", - "Mauve": "#AE7181", - "Forest Green": "#06470C", - "Aqua": "#13EAC9", - "Cyan": "#00FFFF", - "Tan": "#D1B26F", - "Dark Blue": "#00035B", - "Lavender": "#C79FEF", - "Turquoise": "#06C2AC", - "Dark Green": "#033500", - "Violet": "#9A0EEA", - "Light Purple": "#BF77F6", - "Lime Green": "#89FE05", - "Grey": "#929591", - "Sky Blue": "#75BBFD", - "Yellow": "#FFFF14", - "Magenta": "#C20078", - "Light Green": "#96F97B", - "Orange": "#F97306", - "Teal": "#029386", - "Light Blue": "#95D0FC", - "Red": "#E50000", - "Brown": "#653700", - "Pink": "#FF81C0", - "Blue": "#0343DF", - "Green": "#15B01A", - "Purple": "#7E1E9C" -} diff --git a/src/utils/colourUtils.ts b/src/utils/colourUtils.ts deleted file mode 100644 index caa2d38..0000000 --- a/src/utils/colourUtils.ts +++ /dev/null @@ -1,164 +0,0 @@ -import { CMYK, HSL, IColourValues, RGB } from "../interfaces"; -import htmlCodes from "./colourCodes/htmlColours.json"; -import xkcdCodes from "./colourCodes/xkcdColours.json"; - -const hexToRgb = (hex: string): RGB => { - hex = hex.replace("#", ""); - - return { - r: parseInt(hex.substring(0, 2), 16), - g: parseInt(hex.substring(2, 4), 16), - b: parseInt(hex.substring(4, 6), 16) - }; -} - -const rgbToHex = (rgb: RGB): string => { - rgb.r = Math.min(255, Math.max(0, rgb.r)); - rgb.g = Math.min(255, Math.max(0, rgb.g)); - rgb.b = Math.min(255, Math.max(0, rgb.b)); - - const hexR = rgb.r.toString(16).padStart(2, "0"); - const hexG = rgb.g.toString(16).padStart(2, "0"); - const hexB = rgb.b.toString(16).padStart(2, "0"); - - return `#${hexR}${hexG}${hexB}`; -} - -const rgbToHSL = (rgb: RGB): HSL => { - const rNormalized = rgb.r / 255; - const gNormalized = rgb.g / 255; - const bNormalized = rgb.b / 255; - - const max = Math.max(rNormalized, gNormalized, bNormalized); - const min = Math.min(rNormalized, gNormalized, bNormalized); - let h = 0, s; const l = (max + min) / 2; - - if (max === min) { - h = s = 0; // achromatic - } else { - const d = max - min; - s = l > 0.5 ? d / (2 - max - min) : d / (max + min); - - switch (max) { - case rNormalized: - h = (gNormalized - bNormalized) / d + (gNormalized < bNormalized ? 6 : 0); - break; - case gNormalized: - h = (bNormalized - rNormalized) / d + 2; - break; - case bNormalized: - h = (rNormalized - gNormalized) / d + 4; - break; - } - - h /= 6; - } - - return { - h: Math.round(h * 360), - s: Math.round(s * 100), - l: Math.round(l * 100) - }; -} - -const rgbToCMYK = (rgb: RGB): CMYK => { - const rNormalized = rgb.r / 255; - const gNormalized = rgb.g / 255; - const bNormalized = rgb.b / 255; - - const k = 1 - Math.max(rNormalized, gNormalized, bNormalized); - const c = (1 - rNormalized - k) / (1 - k); - const m = (1 - gNormalized - k) / (1 - k); - const y = (1 - bNormalized - k) / (1 - k); - - return { - c: Math.round(c * 100), - m: Math.round(m * 100), - y: Math.round(y * 100), - k: Math.round(k * 100) - }; -} - -const hslToRGB = (hsl: HSL): RGB => { - const hueToRGB = (p: number, q: number, t: number): number => { - if (t < 0) t += 1; - if (t > 1) t -= 1; - if (t < 1 / 6) return p + (q - p) * 6 * t; - if (t < 1 / 2) return q; - if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6; - return p; - } - - const { h, s, l } = hsl; - const hNormalized = h / 360; - const sNormalized = s / 100; - const lNormalized = l / 100; - - if (sNormalized === 0) { - // Achromatic color (gray) - const grayValue = Math.round(lNormalized * 255); - return { r: grayValue, g: grayValue, b: grayValue }; - } - - const q = lNormalized < 0.5 ? lNormalized * (1 + sNormalized) : lNormalized + sNormalized - lNormalized * sNormalized; - const p = 2 * lNormalized - q; - - const r = Math.round(hueToRGB(p, q, hNormalized + 1 / 3) * 255); - const g = Math.round(hueToRGB(p, q, hNormalized) * 255); - const b = Math.round(hueToRGB(p, q, hNormalized - 1 / 3) * 255); - - return { r, g, b }; -} - -const cmykToRGB = (cmyk: CMYK): RGB => { - const { c, m, y, k } = cmyk; - const cNormalized = c / 100; - const mNormalized = m / 100; - const yNormalized = y / 100; - const kNormalized = k / 100; - - const r = Math.round(255 * (1 - cNormalized) * (1 - kNormalized)); - const g = Math.round(255 * (1 - mNormalized) * (1 - kNormalized)); - const b = Math.round(255 * (1 - yNormalized) * (1 - kNormalized)); - - return { r, g, b }; -} - -const getHTMLColorName = (hexColor: string): string => getColorName(hexColor, htmlCodes); -const getXKCDColorName = (hexColor: string): string => getColorName(hexColor, xkcdCodes); - -const getColorName = (hexColor: string, collective: { [key: string]: string }): string => { - hexColor = hexColor.toUpperCase(); - - for (const colorName in collective) { - if (collective[colorName] === hexColor) { - return colorName; - } - } - - return "Not Defined"; -} - -export const isValidColorString = (str: string) => { - const colorPattern = /^(#)?([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/; - return colorPattern.test(str); -} - -export const rgbToAll = (rgb: RGB): IColourValues => { - const hex = rgbToHex(rgb); - return ({ - hex: hex, - rgb: rgb, - cmyk: rgbToCMYK(rgb), - hsl: rgbToHSL(rgb), - htmlCode: getHTMLColorName(hex), - xkcdCode: getXKCDColorName(hex), - oxVar: hex.toUpperCase().replace('#', '0x') - }); -} - -export const hexToAll = (hex: string): IColourValues => rgbToAll(hexToRgb(hex)); - -export const hslToAll = (hsl: HSL): IColourValues => rgbToAll(hslToRGB(hsl)); - -export const cmykToAll = (cmyk: CMYK): IColourValues => rgbToAll(cmykToRGB(cmyk)); diff --git a/src/utils/cronUtils.ts b/src/utils/cronUtils.ts deleted file mode 100644 index 13e4a64..0000000 --- a/src/utils/cronUtils.ts +++ /dev/null @@ -1,49 +0,0 @@ -import cronstrue from "cronstrue"; - -// JSDocs generated by ChatGPT. - -/** - * Calculates a human-readable description of a cron expression string. - * - * @param {string} input - The cron expression string to parse. - * @returns {string} A human-readable description of the cron expression, or an error message if the string is invalid. - */ -export const calculateCronString = (input: string) => { - let output: string = ''; - try { - output = cronstrue.toString(decodeCronCode(input)); - } catch { - output = 'Unable to calculate - check string is valid'; - } - - return output; -} - -/** - * Checks if a string is a valid cron expression code. - * - * @param {string} input - The string to check. - * @returns {boolean} True if the string is a valid cron expression code, false otherwise. - */ -export const checkForValidCronCode = (input: string) => { - if (~[5, 6].indexOf(decodeCronCode(input).split(' ').length)) { - return true; - } - return false; -} - -/** - * Encodes a cron expression code string by replacing spaces with underscores. - * - * @param {string} input - The cron expression code string to encode. - * @returns {string} The encoded cron expression code string. - */ -export const encodeCronCode = (input: string): string => input.split(' ').join('_'); - -/** - * Decodes a cron expression code string by replacing underscores with spaces. - * - * @param {string} input - The cron expression code string to decode. - * @returns {string} The decoded cron expression code string. - */ -export const decodeCronCode = (input: string): string => input.split('_').join(' '); From ea3a9857e1810f796e1fb1ad2b68e84cc87d905f Mon Sep 17 00:00:00 2001 From: soup-bowl Date: Tue, 26 Sep 2023 18:15:24 +0000 Subject: [PATCH 02/14] string miscs now ytlb --- src/components/modals.tsx | 2 +- src/pages/domain.tsx | 2 +- src/pages/help.tsx | 2 +- src/utils/stringUtils.ts | 73 --------------------------------------- 4 files changed, 3 insertions(+), 76 deletions(-) diff --git a/src/components/modals.tsx b/src/components/modals.tsx index cc869d1..ed0d4f3 100644 --- a/src/components/modals.tsx +++ b/src/components/modals.tsx @@ -7,7 +7,7 @@ import { useContext, useEffect, useState } from "react"; import UAParser from "ua-parser-js"; import { DialogTitleProps, IIPCollection, IIPGeolocation } from "../interfaces"; import { ConnectionContext } from "../context"; -import { getCountryFlag } from "../utils/stringUtils"; +import { getCountryFlag } from "libwhatsthis"; const BootstrapDialog = styled(Dialog)(({ theme }) => ({ '& .MuiDialogContent-root': { diff --git a/src/pages/domain.tsx b/src/pages/domain.tsx index 93e203a..1b7d1e1 100644 --- a/src/pages/domain.tsx +++ b/src/pages/domain.tsx @@ -9,7 +9,7 @@ import { ILookupTable, ILookupTableLayout, IDNSRecordDetails, IDomainSelection, import { IPAddressGeo, MyIpAddressModal, ReportDNSError } from "../components"; import '../theme/grid.css'; import { ConnectionContext } from "../context"; -import { isValidIP } from "../utils/stringUtils"; +import { isValidIP } from "libwhatsthis"; const DomainToolsHome = () => { const siteTitle = "Domain Tools"; diff --git a/src/pages/help.tsx b/src/pages/help.tsx index 1f4b6ac..221a7b5 100644 --- a/src/pages/help.tsx +++ b/src/pages/help.tsx @@ -9,7 +9,7 @@ import CloudOffIcon from '@mui/icons-material/CloudOff'; import { WhatsThisLogo } from "../components"; import { IStorage } from "../interfaces"; import { ConnectionContext } from "../context"; -import { formatBytes } from "../utils/stringUtils"; +import { formatBytes } from "libwhatsthis"; import { DataGrid } from "@mui/x-data-grid"; const WalletDisplay = styled(Typography)({ diff --git a/src/utils/stringUtils.ts b/src/utils/stringUtils.ts index f293cc3..3454060 100644 --- a/src/utils/stringUtils.ts +++ b/src/utils/stringUtils.ts @@ -41,76 +41,3 @@ export const StringConversion = (toConvert: 'to' | 'from', type: ConversionType, return thing; } }; - -/** - * Formats a number of bytes as a human-readable string, with the size unit automatically selected based on the size of the number. - * - * Based on this StackOverflow answer: https://stackoverflow.com/a/35696506 - * - * @param {number} bytes - The number of bytes to format. - * @param {number} [decimals=2] - The number of decimal places to include in the formatted string. Defaults to 2. - * @returns {string} A human-readable string representing the given number of bytes. - * - * @example - * const fileSize = formatBytes(1024); - * console.log(fileSize); // '1.00 KB' - */ -export const formatBytes = (bytes: number, decimals: number = 2) => { - if (bytes === 0) return '0 Bytes'; - - const k = 1024; - const dm = decimals < 0 ? 0 : decimals; - const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']; - - const i = Math.floor(Math.log(bytes) / Math.log(k)); - - return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i]; -}; - -/** - * Determines whether a given string represents a valid IPv4 or IPv6 address. - * - * Amazing code from this SO: https://stackoverflow.com/a/34529037 - * - * @param {string} ip - The string to test. - * @returns {boolean} True if the string represents a valid IP address, false otherwise. - * - * @example - * const valid = isValidIP('192.0.2.1'); - * console.log(valid); // true - */ -export const isValidIP = (ip: string) => { - const expression = /((^\s*((([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5]))\s*$)|(^\s*((([0-9A-Fa-f]{1,4}:){7}([0-9A-Fa-f]{1,4}|:))|(([0-9A-Fa-f]{1,4}:){6}(:[0-9A-Fa-f]{1,4}|((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){5}(((:[0-9A-Fa-f]{1,4}){1,2})|:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){4}(((:[0-9A-Fa-f]{1,4}){1,3})|((:[0-9A-Fa-f]{1,4})?:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){3}(((:[0-9A-Fa-f]{1,4}){1,4})|((:[0-9A-Fa-f]{1,4}){0,2}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){2}(((:[0-9A-Fa-f]{1,4}){1,5})|((:[0-9A-Fa-f]{1,4}){0,3}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){1}(((:[0-9A-Fa-f]{1,4}){1,6})|((:[0-9A-Fa-f]{1,4}){0,4}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(:(((:[0-9A-Fa-f]{1,4}){1,7})|((:[0-9A-Fa-f]{1,4}){0,5}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:)))(%.+)?\s*$))/; - - if (expression.test(ip)) { - return true; - } - return false; -} - -/** - * Get a country flag emoji based on the provided country code. - * Uses Unicode regional indicator symbols to represent country flags. - * Credit: OpenAI - * @param {string} countryCode - The two-letter ISO country code (e.g., 'US', 'GB'). - * @returns {string | null} The country flag emoji if a valid countryCode is provided, - * otherwise returns null for an invalid countryCode. - */ -export const getCountryFlag = (countryCode: string): string | null => { - const base = 0x1F1A5; - const alphaOffset = 0x41; - const countryCodeUppercase = countryCode.toUpperCase(); - - // Check if the input countryCode is exactly 2 characters long and contains only letters - if (/^[A-Z]{2}$/.test(countryCodeUppercase)) { - const firstChar = countryCodeUppercase.charCodeAt(0); - const secondChar = countryCodeUppercase.charCodeAt(1); - - // Combine the two characters to form the flag emoji - const flagEmoji = String.fromCodePoint(base + (firstChar - alphaOffset), base + (secondChar - alphaOffset)); - return flagEmoji; - } - - // Return null if the countryCode is invalid - return null; -}; From 514c15cb08144e8301a6e3399464176df54590da Mon Sep 17 00:00:00 2001 From: soup-bowl Date: Tue, 26 Sep 2023 18:44:32 +0000 Subject: [PATCH 03/14] Added last string util to lib. --- package-lock.json | 21 -------------------- package.json | 3 --- src/pages/converter.tsx | 2 +- src/utils/stringUtils.ts | 43 ---------------------------------------- 4 files changed, 1 insertion(+), 68 deletions(-) delete mode 100644 src/utils/stringUtils.ts diff --git a/package-lock.json b/package-lock.json index ccd218a..c4be5b6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,7 +16,6 @@ "@mui/icons-material": "^5.11.16", "@mui/material": "^5.14.7", "@mui/x-data-grid": "^6.10.0", - "@types/crypto-js": "^4.1.1", "@types/node": "^20.5.7", "@types/react": "^18.0.7", "@types/react-dom": "^18.2.7", @@ -24,8 +23,6 @@ "@typescript-eslint/eslint-plugin": "^6.0.0", "@typescript-eslint/parser": "^6.0.0", "@vitejs/plugin-react-swc": "^3.3.2", - "cronstrue": "^2.27.0", - "crypto-js": "^4.1.1", "eslint": "^8.45.0", "eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-react-refresh": "^0.4.3", @@ -3070,11 +3067,6 @@ "node": ">=10" } }, - "node_modules/@types/crypto-js": { - "version": "4.1.1", - "resolved": "https://registry.npmjs.org/@types/crypto-js/-/crypto-js-4.1.1.tgz", - "integrity": "sha512-BG7fQKZ689HIoc5h+6D2Dgq1fABRa0RbBWKBd9SP/MVRVXROflpm5fhwyATX5duFmbStzyzyycPB8qUYKDH3NA==" - }, "node_modules/@types/estree": { "version": "0.0.39", "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.39.tgz", @@ -3757,14 +3749,6 @@ "node": ">=10" } }, - "node_modules/cronstrue": { - "version": "2.28.0", - "resolved": "https://registry.npmjs.org/cronstrue/-/cronstrue-2.28.0.tgz", - "integrity": "sha512-yByAR5on9i/p26djiSve4l29/AJkjCFDgopq+3gUVrQh2xgb3KKScofwkpf5XcRhuWAX0u0EuEK2nltB5hV1jQ==", - "bin": { - "cronstrue": "bin/cli.js" - } - }, "node_modules/cross-spawn": { "version": "7.0.3", "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz", @@ -3778,11 +3762,6 @@ "node": ">= 8" } }, - "node_modules/crypto-js": { - "version": "4.1.1", - "resolved": "https://registry.npmjs.org/crypto-js/-/crypto-js-4.1.1.tgz", - "integrity": "sha512-o2JlM7ydqd3Qk9CA0L4NL6mTzU2sdx96a+oOfPu8Mkl/PK51vSyoi8/rQ8NknZtk44vq15lmhAj9CIAGwgeWKw==" - }, "node_modules/crypto-random-string": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/crypto-random-string/-/crypto-random-string-2.0.0.tgz", diff --git a/package.json b/package.json index 4dd936b..c53090f 100644 --- a/package.json +++ b/package.json @@ -11,7 +11,6 @@ "@mui/icons-material": "^5.11.16", "@mui/material": "^5.14.7", "@mui/x-data-grid": "^6.10.0", - "@types/crypto-js": "^4.1.1", "@types/node": "^20.5.7", "@types/react": "^18.0.7", "@types/react-dom": "^18.2.7", @@ -19,8 +18,6 @@ "@typescript-eslint/eslint-plugin": "^6.0.0", "@typescript-eslint/parser": "^6.0.0", "@vitejs/plugin-react-swc": "^3.3.2", - "cronstrue": "^2.27.0", - "crypto-js": "^4.1.1", "eslint": "^8.45.0", "eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-react-refresh": "^0.4.3", diff --git a/src/pages/converter.tsx b/src/pages/converter.tsx index 397e047..002af7c 100644 --- a/src/pages/converter.tsx +++ b/src/pages/converter.tsx @@ -5,7 +5,7 @@ import { import { ChangeEvent, useEffect, useState } from "react"; import { ConversionType } from "../enums"; import { IStringMorph } from "../interfaces"; -import { StringConversion } from "../utils/stringUtils"; +import { StringConversion } from "libwhatsthis"; const siteTitle = "String Conversions"; diff --git a/src/utils/stringUtils.ts b/src/utils/stringUtils.ts deleted file mode 100644 index 3454060..0000000 --- a/src/utils/stringUtils.ts +++ /dev/null @@ -1,43 +0,0 @@ -import { AES, TripleDES, enc } from 'crypto-js'; -import { ConversionType } from "../enums"; - -// JSDocs generated by ChatGPT. - -/** - * Converts a string to or from a specified encoding type. - * - * @param {'to' | 'from'} toConvert - Whether to convert the string to or from the specified encoding type. - * @param {ConversionType} type - The encoding type to convert to or from. - * @param {string} thing - The string to be converted. - * @param {string} [phrase=''] - The encryption phrase to use (if the specified encoding type is AES or TDES). - * @returns {string} The converted string. - * - * @throws {Error} If the specified encoding type is invalid. - * - * @example - * const encoded = StringConversion('to', ConversionType.Base64, 'Hello, world!'); - * const decoded = StringConversion('from', ConversionType.Base64, encoded); - */ -export const StringConversion = (toConvert: 'to' | 'from', type: ConversionType, thing: string, phrase: string = '') => { - switch (type) { - case ConversionType.Base64: - return toConvert === 'to' ? window.btoa(thing) : window.atob(thing); - case ConversionType.Hex: - // https://stackoverflow.com/a/60435654 - return toConvert === 'to' - ? thing.split('').map(c => c.charCodeAt(0).toString(16).padStart(2, '0')).join('') - : thing.split(/(\w\w)/g).filter(p => !!p).map(c => String.fromCharCode(parseInt(c, 16))).join(''); - case ConversionType.URI: - return toConvert === 'to' ? encodeURIComponent(thing) : decodeURIComponent(thing); - case ConversionType.AES: - return toConvert === 'to' - ? AES.encrypt(thing, phrase).toString() - : AES.decrypt(thing, phrase).toString(enc.Utf8); - case ConversionType.TDES: - return toConvert === 'to' - ? TripleDES.encrypt(thing, phrase).toString() - : TripleDES.decrypt(thing, phrase).toString(enc.Utf8); - default: - return thing; - } -}; From ac563470e3ca0f2b1190e1917e210665f9d5f3de Mon Sep 17 00:00:00 2001 From: soup-bowl Date: Tue, 26 Sep 2023 19:14:07 +0000 Subject: [PATCH 04/14] UA parser removed for lib --- package-lock.json | 25 ------------------------- package.json | 2 -- src/components/modals.tsx | 16 +++++++--------- 3 files changed, 7 insertions(+), 36 deletions(-) diff --git a/package-lock.json b/package-lock.json index c4be5b6..f04172f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -19,7 +19,6 @@ "@types/node": "^20.5.7", "@types/react": "^18.0.7", "@types/react-dom": "^18.2.7", - "@types/ua-parser-js": "^0.7.37", "@typescript-eslint/eslint-plugin": "^6.0.0", "@typescript-eslint/parser": "^6.0.0", "@vitejs/plugin-react-swc": "^3.3.2", @@ -30,7 +29,6 @@ "react-dom": "^18.0.0", "react-router-dom": "^6.11.0", "typescript": "^5.2.2", - "ua-parser-js": "^1.0.34", "vite": "^4.4.5" }, "devDependencies": { @@ -3152,11 +3150,6 @@ "integrity": "sha512-NfQ4gyz38SL8sDNrSixxU2Os1a5xcdFxipAFxYEuLUlvU2uDwS4NUpsImcf1//SlWItCVMMLiylsxbmNMToV/g==", "dev": true }, - "node_modules/@types/ua-parser-js": { - "version": "0.7.37", - "resolved": "https://registry.npmjs.org/@types/ua-parser-js/-/ua-parser-js-0.7.37.tgz", - "integrity": "sha512-4sOxS3ZWXC0uHJLYcWAaLMxTvjRX3hT96eF4YWUh1ovTaenvibaZOE5uXtIp4mksKMLRwo7YDiCBCw6vBiUPVg==" - }, "node_modules/@typescript-eslint/eslint-plugin": { "version": "6.2.1", "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-6.2.1.tgz", @@ -6293,24 +6286,6 @@ "node": ">=14.17" } }, - "node_modules/ua-parser-js": { - "version": "1.0.35", - "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-1.0.35.tgz", - "integrity": "sha512-fKnGuqmTBnIE+/KXSzCn4db8RTigUzw1AN0DmdU6hJovUTbYJKyqj+8Mt1c4VfRDnOVJnENmfYkIPZ946UrSAA==", - "funding": [ - { - "type": "opencollective", - "url": "https://opencollective.com/ua-parser-js" - }, - { - "type": "paypal", - "url": "https://paypal.me/faisalman" - } - ], - "engines": { - "node": "*" - } - }, "node_modules/unbox-primitive": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz", diff --git a/package.json b/package.json index c53090f..edf447f 100644 --- a/package.json +++ b/package.json @@ -14,7 +14,6 @@ "@types/node": "^20.5.7", "@types/react": "^18.0.7", "@types/react-dom": "^18.2.7", - "@types/ua-parser-js": "^0.7.37", "@typescript-eslint/eslint-plugin": "^6.0.0", "@typescript-eslint/parser": "^6.0.0", "@vitejs/plugin-react-swc": "^3.3.2", @@ -25,7 +24,6 @@ "react-dom": "^18.0.0", "react-router-dom": "^6.11.0", "typescript": "^5.2.2", - "ua-parser-js": "^1.0.34", "vite": "^4.4.5" }, "scripts": { diff --git a/src/components/modals.tsx b/src/components/modals.tsx index ed0d4f3..69443f3 100644 --- a/src/components/modals.tsx +++ b/src/components/modals.tsx @@ -4,10 +4,9 @@ import { } from "@mui/material"; import CloseIcon from '@mui/icons-material/Close'; import { useContext, useEffect, useState } from "react"; -import UAParser from "ua-parser-js"; import { DialogTitleProps, IIPCollection, IIPGeolocation } from "../interfaces"; import { ConnectionContext } from "../context"; -import { getCountryFlag } from "libwhatsthis"; +import { getCountryFlag, getUserAgent } from "libwhatsthis"; const BootstrapDialog = styled(Dialog)(({ theme }) => ({ '& .MuiDialogContent-root': { @@ -47,8 +46,7 @@ export const UserAgentModel = () => { const handleOpen = () => setOpen(true); const handleClose = () => setOpen(false); - const uaParser = new UAParser(); - uaParser.setUA(window.navigator.userAgent); + const userAgent = getUserAgent(window.navigator.userAgent); return (
@@ -79,31 +77,31 @@ export const UserAgentModel = () => { Browser - {uaParser.getBrowser().name} {uaParser.getBrowser().version} + {userAgent.browser.name} {userAgent.browser.version} Engine - {uaParser.getEngine().name} {uaParser.getEngine().version} + {userAgent.engine.name} {userAgent.engine.version} Operating System - {uaParser.getOS().name} {uaParser.getOS().version} + {userAgent.system.name} {userAgent.system.version} Device - {uaParser.getDevice().model ?? Unspecified} + {userAgent.device ?? Unspecified} CPU - {uaParser.getCPU().architecture ?? Unspecified} + {userAgent.cpu ?? Unspecified} From 9e7e7aaa3872cbe54b032aba99387f5518ce9dfb Mon Sep 17 00:00:00 2001 From: soup-bowl Date: Tue, 26 Sep 2023 20:09:56 +0000 Subject: [PATCH 05/14] Removed IP abilities. --- src/components/modals.tsx | 26 ++++++-------------------- src/interfaces.ts | 18 ------------------ 2 files changed, 6 insertions(+), 38 deletions(-) diff --git a/src/components/modals.tsx b/src/components/modals.tsx index 69443f3..3215658 100644 --- a/src/components/modals.tsx +++ b/src/components/modals.tsx @@ -4,9 +4,9 @@ import { } from "@mui/material"; import CloseIcon from '@mui/icons-material/Close'; import { useContext, useEffect, useState } from "react"; -import { DialogTitleProps, IIPCollection, IIPGeolocation } from "../interfaces"; +import { DialogTitleProps } from "../interfaces"; import { ConnectionContext } from "../context"; -import { getCountryFlag, getUserAgent } from "libwhatsthis"; +import { IPAddresses, IPGeolocation, getBothIPAddresses, getIPGeolocation, getUserAgent } from "libwhatsthis"; const BootstrapDialog = styled(Dialog)(({ theme }) => ({ '& .MuiDialogContent-root': { @@ -112,7 +112,7 @@ export const UserAgentModel = () => { export const MyIpAddressModal = () => { const { connectionState } = useContext(ConnectionContext); - const [ips, setIPs] = useState({ ipv4: 'N/A', ipv6: 'N/A' }); + const [ips, setIPs] = useState({ ipv4: 'N/A', ipv6: 'N/A' }); const [open, setOpen] = useState(false); const handleOpen = () => setOpen(true); const handleClose = () => setOpen(false); @@ -120,13 +120,7 @@ export const MyIpAddressModal = () => { useEffect(() => { const fetchIPs = async () => { try { - const ipv4Response = await fetch('https://4.ident.me/'); - const ipv4Data = await ipv4Response.text(); - - const ipv6Response = await fetch('https://6.ident.me/'); - const ipv6Data = await ipv6Response.text(); - - setIPs({ ipv4: ipv4Data, ipv6: ipv6Data }); + setIPs(await getBothIPAddresses()); } catch (error) { console.error('Error fetching IP data:', error); } @@ -179,7 +173,7 @@ interface GeoProps { } export const IPAddressGeo = ({ ip }: GeoProps) => { - const [geo, setGeo] = useState(); + const [geo, setGeo] = useState(); const [open, setOpen] = useState(false); const handleOpen = () => setOpen(true); const handleClose = () => setOpen(false); @@ -187,15 +181,7 @@ export const IPAddressGeo = ({ ip }: GeoProps) => { useEffect(() => { const fetchIPInfo = async () => { try { - const response = await fetch(`https://ipinfo.io/${ip}/json`); - if (response.ok) { - const data = await response.json(); - const reply: IIPGeolocation = data; - reply.icon = getCountryFlag(reply.country) ?? undefined; - setGeo(reply); - } else { - setGeo(undefined); - } + setGeo(await getIPGeolocation(ip)); } catch (error) { console.error('Error fetching IP info:', error); setGeo(undefined); diff --git a/src/interfaces.ts b/src/interfaces.ts index 3b4fd4d..5646dd6 100644 --- a/src/interfaces.ts +++ b/src/interfaces.ts @@ -115,11 +115,6 @@ export interface IMenuCategory { description?: string; } -export interface IIPCollection { - ipv4: string; - ipv6: string; -} - export interface ITime { string: Date; unix: number; @@ -132,19 +127,6 @@ export interface IStorage { usage: number; } -export interface IIPGeolocation { - ip: string; - loc: string; - org: string; - region: string; - timezone: string; - country: string; - city: string; - hostname: string; - postal: string; - icon?: string; -} - export interface IDomainSelection { protocol: string; url: string; From 9b4c8a0b489695f3094e09e5659a96c4c1b91b37 Mon Sep 17 00:00:00 2001 From: soup-bowl Date: Tue, 26 Sep 2023 21:32:36 +0000 Subject: [PATCH 06/14] Use the API handler from libwhatsthis. --- src/App.tsx | 61 ++++++++++++++++++++++------------------ src/api/agent.ts | 37 ------------------------ src/context.ts | 16 ++++++++++- src/pages/domain.tsx | 14 ++++----- src/pages/help.tsx | 14 ++++----- src/pages/inspection.tsx | 8 +++--- 6 files changed, 66 insertions(+), 84 deletions(-) delete mode 100644 src/api/agent.ts diff --git a/src/App.tsx b/src/App.tsx index cae63be..81a97ac 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -7,10 +7,13 @@ import { Home, AboutPage, CronConversionPage, DomainToolsHome, HelpPage, InspectionHome, InspectonResultDisplay, StringConversionPage, UnixEpochPage, ColourPickerPage } from './pages'; -import { ConnectionContext } from './context'; +import { APIContext, ConnectionContext } from './context'; +import { APIAgentType, Agent } from 'libwhatsthis'; const App = () => { const [connectionState, setConnectionState] = useState(navigator.onLine); + + const apiAgent: APIAgentType = new Agent(import.meta.env.VITE_API_URL); useEffect(() => { const handleOnline = () => setConnectionState(true); @@ -27,33 +30,35 @@ const App = () => { return ( - - - - }> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - - - - + + + + + }> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + + + + + ); } diff --git a/src/api/agent.ts b/src/api/agent.ts deleted file mode 100644 index 1ac6254..0000000 --- a/src/api/agent.ts +++ /dev/null @@ -1,37 +0,0 @@ -import { IDNSResult, IInspectionResult, IOpenAPI, IWHOISResult } from '../interfaces'; - -const baseUrl = import.meta.env.VITE_API_URL; - -const responseBody = async (response: Response): Promise => { - const data = await response.json(); - return data; -}; - -const get = async (url: string): Promise => { - const response = await fetch(baseUrl + url); - if (!response.ok) { - throw new Error('Network response was not ok.'); - } - return responseBody(response); -}; - -const Details = { - openapi: () => get('/swagger/v1/swagger.json'), -}; - -const Inspection = { - inspect: (url: string) => get('/inspect/' + encodeURIComponent(url)), -}; - -const DNS = { - dns: (url: string) => get(`/dns/${encodeURIComponent(url)}`), - whois: (url: string) => get(`/whois/${encodeURIComponent(url)}`), -}; - -const agent = { - Details, - Inspection, - DNS, -}; - -export default agent; diff --git a/src/context.ts b/src/context.ts index 7208537..2178b78 100644 --- a/src/context.ts +++ b/src/context.ts @@ -1,4 +1,5 @@ -import { createContext } from "react"; +import { APIAgentType } from "libwhatsthis"; +import { createContext, useContext } from "react"; type ConnectionContextType = { connectionState: boolean; @@ -7,3 +8,16 @@ type ConnectionContextType = { export const ConnectionContext = createContext({ connectionState: false, }); + +interface APIContextType { + apiAgent: APIAgentType; +} + +export const APIContext = createContext(undefined); +export function useAPIContext() { + const context = useContext(APIContext); + if (context === undefined) { + throw new Error('useAPIContext must be used within an APIContextProvider'); + } + return context; +} \ No newline at end of file diff --git a/src/pages/domain.tsx b/src/pages/domain.tsx index 1b7d1e1..97aedc3 100644 --- a/src/pages/domain.tsx +++ b/src/pages/domain.tsx @@ -4,17 +4,17 @@ import { } from "@mui/material" import { DataGrid, GridColDef } from "@mui/x-data-grid"; import { ChangeEvent, FormEvent, MouseEvent, useContext, useEffect, useState } from "react"; -import agent from '../api/agent'; -import { ILookupTable, ILookupTableLayout, IDNSRecordDetails, IDomainSelection, IDNSResult } from "../interfaces"; +import { IDomainSelection, ILookupTable, ILookupTableLayout } from "../interfaces"; import { IPAddressGeo, MyIpAddressModal, ReportDNSError } from "../components"; import '../theme/grid.css'; -import { ConnectionContext } from "../context"; -import { isValidIP } from "libwhatsthis"; +import { ConnectionContext, useAPIContext } from "../context"; +import { APIAgentType, IDNSResult, isValidIP } from "libwhatsthis"; const DomainToolsHome = () => { const siteTitle = "Domain Tools"; const { connectionState } = useContext(ConnectionContext); + const { apiAgent }: { apiAgent: APIAgentType } = useAPIContext(); const [selectionInput, setSelectionInput] = useState({} as IDomainSelection); const [currentInput, setCurrentInput] = useState({} as IDomainSelection); @@ -81,7 +81,7 @@ const DomainToolsHome = () => { ]; if (currentInput.protocol !== "WHOIS") { - agent.DNS.dns(currentInput.url) + apiAgent.DNS.dns(currentInput.url) .then((response) => { const records: ILookupTableLayout[] = []; const types: (keyof IDNSResult)[] = ['a', 'aaaa', 'cname', 'mx', 'txt', 'ns']; @@ -90,7 +90,7 @@ const DomainToolsHome = () => { if (response[type].length > 0) { const collection: string[] = []; if (type === 'mx') { - response[type].forEach((entry: IDNSRecordDetails) => { + response[type].forEach(entry => { collection.push(`${entry.address} (Priority ${entry.priority})`); }); } @@ -110,7 +110,7 @@ const DomainToolsHome = () => { }) .catch(() => setLoading(false)); } else { - agent.DNS.whois(currentInput.url) + apiAgent.DNS.whois(currentInput.url) .then(response => { const records: ILookupTableLayout[] = [ { id: 0, key: 'Domain', value: response.domain }, diff --git a/src/pages/help.tsx b/src/pages/help.tsx index 221a7b5..c8df296 100644 --- a/src/pages/help.tsx +++ b/src/pages/help.tsx @@ -1,16 +1,15 @@ import { Typography, Link, Box, Button, Stack, Chip, Tooltip, IconButton, styled } from "@mui/material"; import { useState, useEffect, useContext } from "react"; -import agent from "../api/agent"; +import { WhatsThisLogo } from "../components"; +import { IStorage } from "../interfaces"; +import { ConnectionContext, useAPIContext } from "../context"; +import { APIAgentType, formatBytes } from "libwhatsthis"; +import { DataGrid } from "@mui/x-data-grid"; import FileCopyIcon from '@mui/icons-material/FileCopy'; import GitHubIcon from '@mui/icons-material/GitHub'; import CachedIcon from '@mui/icons-material/Cached'; import CloudOffIcon from '@mui/icons-material/CloudOff'; -import { WhatsThisLogo } from "../components"; -import { IStorage } from "../interfaces"; -import { ConnectionContext } from "../context"; -import { formatBytes } from "libwhatsthis"; -import { DataGrid } from "@mui/x-data-grid"; const WalletDisplay = styled(Typography)({ fontFamily: 'monospace', @@ -89,6 +88,7 @@ interface ErrorCatch { export const AboutPage = () => { const siteTitle = "About"; const { connectionState } = useContext(ConnectionContext); + const { apiAgent }: { apiAgent: APIAgentType } = useAPIContext(); const [apiVersion, setApiVersion] = useState(''); const [storageInfo, setStorageInfo] = useState({} as IStorage); @@ -102,7 +102,7 @@ export const AboutPage = () => { useEffect(() => { if (connectionState) { - agent.Details.openapi().then(response => { + apiAgent.Details.openapi().then(response => { setApiVersion(response.info.version); }) .catch((err: ErrorCatch) => { diff --git a/src/pages/inspection.tsx b/src/pages/inspection.tsx index 421fee5..84226d0 100644 --- a/src/pages/inspection.tsx +++ b/src/pages/inspection.tsx @@ -1,10 +1,9 @@ import { ChangeEvent, FormEvent, useContext, useEffect, useState } from 'react'; import { Button, TextField, Grid, Typography, CircularProgress, Box, Alert, AlertTitle, Stack, Link } from '@mui/material'; import { useNavigate } from 'react-router-dom'; -import agent from '../api/agent'; -import { IInspectionDetails } from '../interfaces'; import { DetailCard, ReportInspectionError, UserAgentModel } from '../components'; -import { ConnectionContext } from "../context"; +import { ConnectionContext, useAPIContext } from "../context"; +import { APIAgentType, IInspectionDetails } from 'libwhatsthis'; const siteTitle = "Site Inspector"; @@ -67,6 +66,7 @@ interface Props { } export const InspectonResult = ({ url }: Props) => { + const { apiAgent }: { apiAgent: APIAgentType } = useAPIContext(); const navigate = useNavigate(); const [siteDetails, setSiteDetails] = useState([]); const [loading, setLoading] = useState(true); @@ -81,7 +81,7 @@ export const InspectonResult = ({ url }: Props) => { setSiteDetails(list); } - agent.Inspection.inspect(url) + apiAgent.Inspection.inspect(url) .then(response => { response.technology.cms.forEach((res) => addSoftwareToList(res, 'CMS')); response.technology.frontend.forEach((res) => addSoftwareToList(res, 'Frontend')); From bc06cefe8dc86e9e65df271ac94e40585f1fdfb7 Mon Sep 17 00:00:00 2001 From: soup-bowl Date: Tue, 26 Sep 2023 21:38:11 +0000 Subject: [PATCH 07/14] Removed redundant interfaces. --- src/interfaces.ts | 76 ----------------------------------------------- 1 file changed, 76 deletions(-) diff --git a/src/interfaces.ts b/src/interfaces.ts index 5646dd6..8f70e9e 100644 --- a/src/interfaces.ts +++ b/src/interfaces.ts @@ -7,58 +7,6 @@ export interface DialogTitleProps { onClose: () => void; } -export interface IOpenAPI { - info: IOpenAPIInfo; -} - -export interface IOpenAPIInfo { - title: string; - description: string; - version: string; -} - -export interface IInspectionResult { - technology: IInspectionTechnology; - url: string; -} - -export interface IInspectionTechnology { - cms: IInspectionDetails[]; - frontend: IInspectionDetails[]; - javascript: IInspectionDetails[]; - cdn: IInspectionDetails[]; - seo: IInspectionDetails[]; - language: IInspectionDetails[]; - server: IInspectionDetails[]; -} - -export interface IInspectionDetails { - name: string; - description: string; - type?: string; - url: string; - matchAvailable: number; - matchedOn: string[]; -} - -export interface IInspectionWordPress { - success: boolean; - name: string; - tagline: string; - timezone: string; - post_count: number; - page_count: number; - cat_count: number; - latest_post?: IInspectionWordPressPost; - latest_page?: IInspectionWordPressPost; -} - -export interface IInspectionWordPressPost { - title: string; - date: string; - url: string; -} - export interface ILookupTable { columns: GridColDef[]; rows: ILookupTableLayout[]; @@ -70,30 +18,6 @@ export interface ILookupTableLayout { value: string; } -export interface IDNSResult { - a: string[]; - aaaa: string[]; - cname: string[]; - mx: IDNSRecordDetails[]; - txt: string[]; - ns: string[]; -} - -export interface IDNSRecordDetails { - address: string; - priority: number; -} - -export interface IWHOISResult { - domain: string; - registrar: string; - whois: string; - nameServers: string[]; - created: string; - updated: string; - expires: string; -} - export interface IStringMorph { decoded: string; encoded: string; From 31273bf103960203c092a81eca34f7ddff434e38 Mon Sep 17 00:00:00 2001 From: soup-bowl Date: Tue, 26 Sep 2023 21:44:41 +0000 Subject: [PATCH 08/14] Linting improvements. --- src/context.ts | 2 +- src/pages/domain.tsx | 2 +- src/pages/help.tsx | 4 ++-- src/pages/inspection.tsx | 2 +- 4 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/context.ts b/src/context.ts index 2178b78..621e0b4 100644 --- a/src/context.ts +++ b/src/context.ts @@ -14,7 +14,7 @@ interface APIContextType { } export const APIContext = createContext(undefined); -export function useAPIContext() { +export const useAPIContext = () => { const context = useContext(APIContext); if (context === undefined) { throw new Error('useAPIContext must be used within an APIContextProvider'); diff --git a/src/pages/domain.tsx b/src/pages/domain.tsx index 97aedc3..6275170 100644 --- a/src/pages/domain.tsx +++ b/src/pages/domain.tsx @@ -130,7 +130,7 @@ const DomainToolsHome = () => { .catch(() => setLoading(false)); } } - }, [currentInput]); + }, [currentInput, apiAgent]); const submitForm = (e: FormEvent) => { e.preventDefault(); diff --git a/src/pages/help.tsx b/src/pages/help.tsx index c8df296..9b061fe 100644 --- a/src/pages/help.tsx +++ b/src/pages/help.tsx @@ -113,7 +113,7 @@ export const AboutPage = () => { } else { setApiVersion(<> Offline); } - }, [connectionState]); + }, [connectionState, apiAgent]); useEffect(() => { if ('storage' in navigator && 'estimate' in navigator.storage) { @@ -156,7 +156,7 @@ export const AboutPage = () => { {wallets.map((wallet, i) => ( - + {wallet.key.toUpperCase()} Address {wallet.wallet} diff --git a/src/pages/inspection.tsx b/src/pages/inspection.tsx index 84226d0..8c182ec 100644 --- a/src/pages/inspection.tsx +++ b/src/pages/inspection.tsx @@ -93,7 +93,7 @@ export const InspectonResult = ({ url }: Props) => { }) .catch(() => setRError(true)) .finally(() => setLoading(false)); - }, [url, siteDetails]); + }, [url, siteDetails, apiAgent]); if (loading) { return ( From 71072a4a514dadf351d42376d474ebeba643df26 Mon Sep 17 00:00:00 2001 From: soup-bowl Date: Tue, 26 Sep 2023 21:46:27 +0000 Subject: [PATCH 09/14] Remove needless type def. --- src/pages/domain.tsx | 4 ++-- src/pages/help.tsx | 4 ++-- src/pages/inspection.tsx | 4 ++-- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/pages/domain.tsx b/src/pages/domain.tsx index 6275170..01e3c43 100644 --- a/src/pages/domain.tsx +++ b/src/pages/domain.tsx @@ -8,13 +8,13 @@ import { IDomainSelection, ILookupTable, ILookupTableLayout } from "../interface import { IPAddressGeo, MyIpAddressModal, ReportDNSError } from "../components"; import '../theme/grid.css'; import { ConnectionContext, useAPIContext } from "../context"; -import { APIAgentType, IDNSResult, isValidIP } from "libwhatsthis"; +import { IDNSResult, isValidIP } from "libwhatsthis"; const DomainToolsHome = () => { const siteTitle = "Domain Tools"; const { connectionState } = useContext(ConnectionContext); - const { apiAgent }: { apiAgent: APIAgentType } = useAPIContext(); + const { apiAgent } = useAPIContext(); const [selectionInput, setSelectionInput] = useState({} as IDomainSelection); const [currentInput, setCurrentInput] = useState({} as IDomainSelection); diff --git a/src/pages/help.tsx b/src/pages/help.tsx index 9b061fe..7f1f5a2 100644 --- a/src/pages/help.tsx +++ b/src/pages/help.tsx @@ -3,7 +3,7 @@ import { useState, useEffect, useContext } from "react"; import { WhatsThisLogo } from "../components"; import { IStorage } from "../interfaces"; import { ConnectionContext, useAPIContext } from "../context"; -import { APIAgentType, formatBytes } from "libwhatsthis"; +import { formatBytes } from "libwhatsthis"; import { DataGrid } from "@mui/x-data-grid"; import FileCopyIcon from '@mui/icons-material/FileCopy'; @@ -88,7 +88,7 @@ interface ErrorCatch { export const AboutPage = () => { const siteTitle = "About"; const { connectionState } = useContext(ConnectionContext); - const { apiAgent }: { apiAgent: APIAgentType } = useAPIContext(); + const { apiAgent } = useAPIContext(); const [apiVersion, setApiVersion] = useState(''); const [storageInfo, setStorageInfo] = useState({} as IStorage); diff --git a/src/pages/inspection.tsx b/src/pages/inspection.tsx index 8c182ec..10d3783 100644 --- a/src/pages/inspection.tsx +++ b/src/pages/inspection.tsx @@ -3,7 +3,7 @@ import { Button, TextField, Grid, Typography, CircularProgress, Box, Alert, Aler import { useNavigate } from 'react-router-dom'; import { DetailCard, ReportInspectionError, UserAgentModel } from '../components'; import { ConnectionContext, useAPIContext } from "../context"; -import { APIAgentType, IInspectionDetails } from 'libwhatsthis'; +import { IInspectionDetails } from 'libwhatsthis'; const siteTitle = "Site Inspector"; @@ -66,7 +66,7 @@ interface Props { } export const InspectonResult = ({ url }: Props) => { - const { apiAgent }: { apiAgent: APIAgentType } = useAPIContext(); + const { apiAgent } = useAPIContext(); const navigate = useNavigate(); const [siteDetails, setSiteDetails] = useState([]); const [loading, setLoading] = useState(true); From fa25d1f530513c26ae7a3c8564fb1dd0322c42bd Mon Sep 17 00:00:00 2001 From: soup-bowl Date: Wed, 27 Sep 2023 19:05:40 +0100 Subject: [PATCH 10/14] Calc passover. --- src/enums.ts | 6 ------ src/interfaces.ts | 8 -------- src/pages/time.tsx | 26 +++----------------------- 3 files changed, 3 insertions(+), 37 deletions(-) diff --git a/src/enums.ts b/src/enums.ts index c8bad79..c1af8c4 100644 --- a/src/enums.ts +++ b/src/enums.ts @@ -5,9 +5,3 @@ export enum ConversionType { AES = 10, TDES = 11, } - -export enum SecondType { - s = 1, - ms = 2, - us = 3, -} diff --git a/src/interfaces.ts b/src/interfaces.ts index 8f70e9e..0084d24 100644 --- a/src/interfaces.ts +++ b/src/interfaces.ts @@ -1,5 +1,4 @@ import { GridColDef } from "@mui/x-data-grid"; -import { SecondType } from "./enums"; export interface DialogTitleProps { id: string; @@ -39,13 +38,6 @@ export interface IMenuCategory { description?: string; } -export interface ITime { - string: Date; - unix: number; - overflow: boolean; - type: SecondType; -} - export interface IStorage { quota: number; usage: number; diff --git a/src/pages/time.tsx b/src/pages/time.tsx index d31ebac..d7196dc 100644 --- a/src/pages/time.tsx +++ b/src/pages/time.tsx @@ -1,34 +1,14 @@ import { Box, InputAdornment, Link, TextField, Typography } from "@mui/material"; import { ChangeEvent, useEffect, useState } from "react"; +import { ConversionTime, timeOutput, SecondType } from "libwhatsthis"; + import WarningIcon from '@mui/icons-material/Warning'; -import { ITime } from "../interfaces"; -import { SecondType } from "../enums"; const siteTitle = "Unix Timestamp Conversion"; -const maxInt32 = 2147483647; const MaxAcceptUnix = 253402300799999; const UnixEpochPage = () => { - const timeOutput = (time: number): ITime => { - if (time > MaxAcceptUnix) { - try { - return timeStore; - } catch { - return timeOutput(MaxAcceptUnix); - } - } - - const conversionDate: Date = (time >= 1e11) ? new Date(time) : new Date(time * 1e3); - - return { - string: conversionDate, - unix: time, - overflow: (time > maxInt32) ? true : false, - type: (time >= 1e11) ? SecondType.ms : SecondType.s, - } - } - - const [timeStore, setTimeStore] = useState((): ITime => { + const [timeStore, setTimeStore] = useState((): ConversionTime => { const inputGet: string = window.location.hash.split('/').slice(-1)[0]; const inputIsNumber: boolean = /^\d+$/.test(inputGet); From bcd5559b78f8c40316dfa95133462fe85d89d4db Mon Sep 17 00:00:00 2001 From: soup-bowl Date: Wed, 27 Sep 2023 19:18:28 +0100 Subject: [PATCH 11/14] Missed ref. --- src/components/inspectModules.tsx | 2 +- src/components/modals.tsx | 3 ++- src/components/reportButton.tsx | 3 ++- 3 files changed, 5 insertions(+), 3 deletions(-) diff --git a/src/components/inspectModules.tsx b/src/components/inspectModules.tsx index 419e202..3321858 100644 --- a/src/components/inspectModules.tsx +++ b/src/components/inspectModules.tsx @@ -1,6 +1,6 @@ import { Button, Card, CardActions, CardContent, Chip, Typography } from "@mui/material"; -import { IInspectionDetails } from "../interfaces"; +import { IInspectionDetails } from "libwhatsthis"; import { ServiceIcon } from "."; interface Props { diff --git a/src/components/modals.tsx b/src/components/modals.tsx index 3215658..da458ba 100644 --- a/src/components/modals.tsx +++ b/src/components/modals.tsx @@ -2,12 +2,13 @@ import { Typography, Button, Grid, Link, IconButton, Stack, styled, Dialog, DialogTitle, DialogContent } from "@mui/material"; -import CloseIcon from '@mui/icons-material/Close'; import { useContext, useEffect, useState } from "react"; import { DialogTitleProps } from "../interfaces"; import { ConnectionContext } from "../context"; import { IPAddresses, IPGeolocation, getBothIPAddresses, getIPGeolocation, getUserAgent } from "libwhatsthis"; +import CloseIcon from '@mui/icons-material/Close'; + const BootstrapDialog = styled(Dialog)(({ theme }) => ({ '& .MuiDialogContent-root': { padding: theme.spacing(2), diff --git a/src/components/reportButton.tsx b/src/components/reportButton.tsx index beb787f..35f478f 100644 --- a/src/components/reportButton.tsx +++ b/src/components/reportButton.tsx @@ -1,5 +1,6 @@ import { Button } from "@mui/material"; -import { IInspectionDetails, ILookupTableLayout } from "../interfaces"; +import { ILookupTableLayout } from "../interfaces"; +import { IInspectionDetails } from "libwhatsthis"; const BrowserDetails = () => { return (window.navigator.userAgent); From 35dd2993b47a09032db763b9c1e91ef149f7fe23 Mon Sep 17 00:00:00 2001 From: soup-bowl Date: Wed, 27 Sep 2023 19:42:33 +0100 Subject: [PATCH 12/14] Display libwhatsthis version. --- src/pages/help.tsx | 4 ++-- vite.config.ts | 3 ++- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/pages/help.tsx b/src/pages/help.tsx index 7f1f5a2..1fd3ec9 100644 --- a/src/pages/help.tsx +++ b/src/pages/help.tsx @@ -132,8 +132,8 @@ export const AboutPage = () => { on GitHub Pages. - App Version: {process.env.REACT_APP_VERSION?.replace(/"/g, "")} - + App Version: {process.env.REACT_APP_VERSION?.replace(/"/g, "") ?? "Error"} + Library Version: {process.env.REACT_LIB_VERSION?.replace("^", "") ?? "Error"} API Version: {apiVersion} {storageInfo.quota !== undefined && storageInfo.quota !== 0 ? diff --git a/vite.config.ts b/vite.config.ts index fc77412..bd1489f 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -1,7 +1,7 @@ import { defineConfig } from 'vite'; import { VitePWA } from 'vite-plugin-pwa'; import react from '@vitejs/plugin-react-swc'; -import { version } from './package.json'; +import { version, dependencies } from './package.json'; // https://vitejs.dev/config/ export default defineConfig({ @@ -44,6 +44,7 @@ export default defineConfig({ define: { 'process.env': { REACT_APP_VERSION: JSON.stringify(version), + REACT_LIB_VERSION: dependencies["libwhatsthis"] }, }, }) From 1c17c352a4b034e943135882803ac696f469a315 Mon Sep 17 00:00:00 2001 From: soup-bowl Date: Wed, 27 Sep 2023 19:51:48 +0100 Subject: [PATCH 13/14] Added libwhatsthis package --- package-lock.json | 46 ++++++++++++++++++++++++++++++++++++++++++++++ package.json | 1 + 2 files changed, 47 insertions(+) diff --git a/package-lock.json b/package-lock.json index f04172f..b82be91 100644 --- a/package-lock.json +++ b/package-lock.json @@ -25,6 +25,7 @@ "eslint": "^8.45.0", "eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-react-refresh": "^0.4.3", + "libwhatsthis": "^0.1.1", "react": "^18.0.0", "react-dom": "^18.0.0", "react-router-dom": "^6.11.0", @@ -3742,6 +3743,14 @@ "node": ">=10" } }, + "node_modules/cronstrue": { + "version": "2.32.0", + "resolved": "https://registry.npmjs.org/cronstrue/-/cronstrue-2.32.0.tgz", + "integrity": "sha512-dmNflOCNJL6lZEj0dp2YhGIPY83VTjFue6d9feFhnNtrER6mAjBrUvSgK95j3IB/xNGpLjaZDIDG6ACKTZr9Yw==", + "bin": { + "cronstrue": "bin/cli.js" + } + }, "node_modules/cross-spawn": { "version": "7.0.3", "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz", @@ -3755,6 +3764,11 @@ "node": ">= 8" } }, + "node_modules/crypto-es": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/crypto-es/-/crypto-es-2.0.4.tgz", + "integrity": "sha512-GJxgJJ7HjGzwT7iQF0K9RertKkzgSKUXd8X2aQ7RGDS8yMVDzIBFMNHID9hnj48Ep8NAICHWV1CFIETlVNZ/Lg==" + }, "node_modules/crypto-random-string": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/crypto-random-string/-/crypto-random-string-2.0.0.tgz", @@ -5103,6 +5117,16 @@ "node": ">= 0.8.0" } }, + "node_modules/libwhatsthis": { + "version": "0.1.1", + "resolved": "https://registry.npmjs.org/libwhatsthis/-/libwhatsthis-0.1.1.tgz", + "integrity": "sha512-jKVZzmuHei6BpX+t7ytSY7BnFMmmUhARt4DtY1SUm7IEoEndw0uUcjoNy43SrXbFh6842mGBhUG+wJnrW+j+qA==", + "dependencies": { + "cronstrue": "^2.32.0", + "crypto-es": "^2.0.4", + "ua-parser-js": "^1.0.36" + } + }, "node_modules/lines-and-columns": { "version": "1.2.4", "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz", @@ -6286,6 +6310,28 @@ "node": ">=14.17" } }, + "node_modules/ua-parser-js": { + "version": "1.0.36", + "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-1.0.36.tgz", + "integrity": "sha512-znuyCIXzl8ciS3+y3fHJI/2OhQIXbXw9MWC/o3qwyR+RGppjZHrM27CGFSKCJXi2Kctiz537iOu2KnXs1lMQhw==", + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/ua-parser-js" + }, + { + "type": "paypal", + "url": "https://paypal.me/faisalman" + }, + { + "type": "github", + "url": "https://github.com/sponsors/faisalman" + } + ], + "engines": { + "node": "*" + } + }, "node_modules/unbox-primitive": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz", diff --git a/package.json b/package.json index edf447f..bc7add9 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,7 @@ "eslint": "^8.45.0", "eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-react-refresh": "^0.4.3", + "libwhatsthis": "^0.1.1", "react": "^18.0.0", "react-dom": "^18.0.0", "react-router-dom": "^6.11.0", From c82cf5295e3e3251873239e5ecc41d53a30f294b Mon Sep 17 00:00:00 2001 From: soup-bowl Date: Wed, 27 Sep 2023 20:00:51 +0100 Subject: [PATCH 14/14] Update readme --- README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index a551ebe..d670e8f 100644 --- a/README.md +++ b/README.md @@ -16,7 +16,7 @@ React-based [progressive web app][pwa] proof-of-concept designed to provide a to * [Cron Conversion](https://whatsth.is/#/cron). * [UNIX Timestamp Converter](https://whatsth.is/#/time). -This app comprises of two components - A React frontend (this repository), and a [C# .NET inspection API][api]. +This app comprises of three components - A React frontend (this repository), an [engine library][lib], and a [C# .NET inspection API][api]. ## Getting Started @@ -62,4 +62,5 @@ devOptions: { [site]: https://whatsth.is [pwa]: https://web.dev/learn/pwa/progressive-web-apps/ [api]: https://github.com/soup-bowl/api.whatsth.is +[lib]: https://github.com/soup-bowl/libwhatsthis [ext]: https://github.com/soup-bowl/whatsth.is-browser