@cloudwick/astral-ui-cli 0.1.0

package/dist/templates/constants/index.ts

@@ -0,0 +1,3 @@
+export { keyboardKeys } from "./keyboardKey";
+
+export const mobileBreakPoint = 767;

package/dist/templates/constants/keyboardKey.ts

@@ -0,0 +1,16 @@
+export const keyboardKeys = {
+  arrowUp: "ArrowUp",
+  arrowDown: "ArrowDown",
+  arrowLeft: "ArrowLeft",
+  arrowRight: "ArrowRight",
+  enter: "Enter",
+  escape: "Escape",
+  end: "End",
+  home: "Home",
+  backspace: "Backspace",
+  tab: "Tab",
+  v: "v",
+  delete: "Delete",
+  pageUp: "PageUp",
+  pageDown: "PageDown"
+};

package/dist/templates/css/variables.css

@@ -0,0 +1,82 @@
+/* This file is auto-generated. Do not edit directly. */
+/* It is updated whenever the component library is built. */
+
+@layer base {
+  :root {
+    /* Color: rgb(x y z) */
+    --iridium: 24 24 24;
+    --frost-blue: 244 247 250;
+    
+    /* Primary colors (Shades of Blue) */
+    --primary-50: 233 247 254;
+    --primary-100: 205 235 254;
+    --primary-200: 166 221 253;
+    --primary-300: 106 200 251;
+    --primary-400: 36 167 249;
+    --primary-500: 6 118 215;
+    --primary-600: 6 92 197;
+    --primary-700: 5 74 189;
+    --primary-800: 9 64 164;
+    --primary-900: 13 52 118;
+    
+    /* Secondary colors (Shades of Gray) */
+    --secondary-50: 242 243 246;
+    --secondary-100: 229 230 235;
+    --secondary-200: 195 200 211;
+    --secondary-300: 143 154 173;
+    --secondary-400: 89 100 121;
+    --secondary-500: 57 64 77;
+    --secondary-600: 46 52 63;
+    --secondary-700: 37 42 52;
+    --secondary-800: 31 35 42;
+    --secondary-900: 29 31 37;
+    
+    /* Warning colors (Shades of Yellow) */
+    --warning-50: 254 250 238;
+    --warning-100: 254 241 204;
+    --warning-200: 253 226 147;
+    --warning-300: 251 207 93;
+    --warning-400: 250 182 46;
+    --warning-500: 245 154 32;
+    --warning-600: 234 117 7;
+    --warning-700: 194 81 10;
+    --warning-800: 158 62 15;
+    --warning-900: 129 51 17;
+    
+    /* Success Colors (Shades of Green) */
+    --success-50: 242 251 245;
+    --success-100: 225 244 230;
+    --success-200: 198 232 209;
+    --success-300: 160 215 181;
+    --success-400: 101 180 134;
+    --success-500: 61 180 115;
+    --success-600: 40 145 90;
+    --success-700: 33 116 74;
+    --success-800: 28 93 60;
+    --success-900: 24 77 52;
+    
+    /* Error colors (Shades of Red) */
+    --error-50: 254 243 242;
+    --error-100: 253 229 227;
+    --error-200: 252 208 204;
+    --error-300: 249 175 168;
+    --error-400: 243 129 118;
+    --error-500: 231 73 58;
+    --error-600: 214 59 44;
+    --error-700: 179 47 34;
+    --error-800: 149 41 31;
+    --error-900: 124 40 32;
+    
+    /* Gray colors (Shades of Ligh Gray) */
+    --gray-50: 245 246 247;
+    --gray-100: 234 236 240;
+    --gray-200: 214 218 225;
+    --gray-300: 193 199 209;
+    --gray-400: 173 181 194;
+    --gray-500: 152 162 179;
+    --gray-600: 142 153 170;
+    --gray-700: 128 139 156;
+    --gray-800: 117 129 149;
+    --gray-900: 95 105 120;
+  }
+}

package/dist/templates/schema/components-config.schema.json

@@ -0,0 +1,56 @@
+{
+    "$schema": "http://json-schema.org/draft-07/schema#",
+    "title": "Astral-UI ComponentsConfig",
+    "type": "object",
+    "properties": {
+        "$schema": {
+            "type": "string"
+        },
+        "tailwind": {
+            "type": "object",
+            "properties": {
+                "config": {
+                    "type": "string"
+                },
+                "css": {
+                    "type": "string"
+                }
+            },
+            "required": [
+                "config",
+                "css"
+            ]
+        },
+        "aliases": {
+            "type": "object",
+            "properties": {
+                "components": {
+                    "type": "string"
+                },
+                "utils": {
+                    "type": "string"
+                },
+                "constants": {
+                    "type": "string"
+                }
+            },
+            "required": [
+                "components",
+                "utils",
+                "constants"
+            ]
+        },
+        "extensions": {
+            "type": "array",
+            "items": {
+                "type": "string"
+            }
+        }
+    },
+    "required": [
+        "$schema",
+        "tailwind",
+        "aliases",
+        "extensions"
+    ]
+}

package/dist/templates/utils/cn.ts

@@ -0,0 +1,13 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+/**
+ * Merges multiple class values into a single className string
+ * Uses clsx for conditional classes and twMerge to handle Tailwind conflicts
+ * @param inputs - Class values to merge
+ * @returns Merged className string
+ * @example cn("text-red-500", "bg-blue-500", isActive && "font-bold")
+ */
+export function cn( ...inputs: ClassValue[]) {
+  return twMerge( clsx( inputs ));
+}

package/dist/templates/utils/debounce.tsx

@@ -0,0 +1,33 @@
+// eslint disabled on entire file because we don't want to enforce prop types
+// this is a utility function that should be used in a component that already has prop types
+// and we don't want to force prop types on this utility function
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+/**
+ * Debounce a function, making it only callable after a certain amount of time has passed.
+ * @param func The function to debounce.
+ * @param timeout The amount of time to wait before calling the function.
+ * @returns A debounced version of the function.
+ * @template Params The parameters of the function.
+ * @example
+ * ```tsx
+ * const debouncedFunction = debounce((...args) => {
+ *  console.log(args);
+ * }, 1000);
+ * debouncedFunction(1);
+ * ```
+ */
+export function debounce<Params extends any[]>(
+  func: ( ...args: Params ) => any,
+  timeout: number
+): ( ...args: Params ) => void {
+  let timer: NodeJS.Timeout;
+  return ( ...args: Params ) => {
+    if ( timer ) {
+      clearTimeout( timer );
+    }
+    timer = setTimeout(() => {
+      func( ...args );
+    }, timeout );
+  };
+}

package/dist/templates/utils/findParentAttribute.tsx

@@ -0,0 +1,23 @@
+/**
+ * Finds the closest parent element of the given element that has the specified attribute set,
+ * and returns the value of that attribute.
+ *
+ * @param {HTMLElement} element - The starting element to search from.
+ * @param {string} attribute - The attribute to search for.
+ * @returns {string | null} The value of the specified attribute on the closest parent element that has it set, or null if no such parent element is found.
+ */
+export const findParentAttribute = ( element: HTMLElement, attribute:string ): string | null => {
+  if ( !element ) {
+    return null;
+  }
+  let { parentElement } = element;
+  while ( parentElement ) {
+    const dir = parentElement.getAttribute( attribute );
+    if ( dir ) {
+      return dir;
+    }
+    parentElement = parentElement?.parentElement;
+  }
+
+  return null;
+};

package/dist/templates/utils/getElementType.ts

@@ -0,0 +1,38 @@
+// disable eslint on entire file because we don't want to enforce prop types,
+// this is a utility function that should be used in a component that already has prop types
+// and we don't want to force prop types on this utility function
+/* eslint-disable */
+
+/**
+ * Returns a createElement() type based on the props of the Component.
+ * Useful for calculating what type a component should render as.
+ *
+ * @param {function} Component A function or ReactClass.
+ * @param {object} props A ReactElement props object
+ * @param {function} [getDefault] A function that returns a default element type.
+ * @returns {string|function} A ReactElement type
+ */
+function getElementType(
+  Component: React.ComponentType<any>, componentProps: { [key: string]: any },
+  getDefault?: () => any ): string | React.ComponentType<any> {
+  const { defaultProps = {} } = Component;
+
+  // user defined "as" element type
+  if ( componentProps.as && componentProps.as !== defaultProps.as ) {
+    return componentProps.as;
+  }
+
+  // get computed default element type
+  if ( getDefault ) {
+    const defaultAs = getDefault();
+    if ( defaultAs ) {
+      return defaultAs;
+    }
+  }
+
+  // use defaultProps.as or 'div'
+  return defaultProps.as || "div";
+}
+/* eslint-enable */
+
+export default getElementType;

package/dist/templates/utils/index.tsx

@@ -0,0 +1,7 @@
+export * from "./numberUtils";
+export * from "./stringUtils";
+export { useOnScreen } from "./useOnScreen";
+export { debounce } from "./debounce";
+export { useWindowSize } from "./useWindowSize";
+export * from "./findParentAttribute";
+export { cn } from "./cn";

package/dist/templates/utils/numberUtils/index.tsx

@@ -0,0 +1,40 @@
+/**
+ * This method accepts a number and returns a string representation
+ * of the number formatted/abbreviated to the closest higher precision value.
+ * @param {number} value - The value to be formatted
+ * @param {number} precision - The default precision to be used for output
+ * @param {boolean} prefixZero - Flag to prepend zero to the output if result is a single digit number
+ * @returns {string} - The formatted/abbreviated string
+ * @example <caption>Example usage of abbreviateNumber method.</caption>
+ * // returns 12.1M
+ * abbreviateNumber(12093093, 3);
+ */
+export const abbreviateNumber = ( value = 0, precision = 1, prefixZero = true ): string => {
+  const adjustedPrecision = isNaN( precision ) ? 1 : precision;
+  const adjustedValue = isNaN( value ) ? 0 : parseFloat( `${value}` );
+  const isNegativeValue = adjustedValue < 0;
+  const absoluteValue = isNegativeValue ? Math.abs( adjustedValue ) : value;
+  let returnValue = absoluteValue.toFixed( adjustedPrecision );
+  if ( absoluteValue >= 1000 ) {
+    const suffixes = [ "", "K", "M", "B", "T", "P", "E", "Z", "Y" ];
+    const suffixNum = Math.floor(( `${absoluteValue}` ).length / 3 );
+    let shortValue: number = absoluteValue;
+    for ( let precisionCounter = adjustedPrecision; precisionCounter >= 1; precisionCounter-- ) {
+      shortValue = parseFloat(( suffixNum !== 0
+        ? ( absoluteValue / Math.pow( 1000, suffixNum ))
+        : absoluteValue ).toPrecision( precisionCounter )
+      );
+      const dotLessShortValue = ( `${shortValue}` ).replace( /[^a-zA-Z 0-9]+/g, "" );
+      if ( dotLessShortValue.length <= adjustedPrecision ) {
+        break;
+      }
+    }
+    if ( shortValue % 1 !== 0 ) {
+      shortValue = parseFloat( shortValue.toFixed( adjustedPrecision ));
+    }
+    returnValue = shortValue + suffixes[suffixNum];
+  } else {
+    returnValue = `${( prefixZero && absoluteValue < 10 ) ? "0" : ""}${ parseFloat( returnValue )}`;
+  }
+  return `${isNegativeValue ? "-" : ""}${returnValue}`;
+};

package/dist/templates/utils/stringUtils/fileSize.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+/**
+ * Function to convert file size in bytes to human readable format
+ * @param size - size of the file in bytes
+ * @returns {string} - human readable file size
+ * @example <caption>Example usage of readableFileSize</caption>
+ * readableFileSize(1024) // returns '1 kB'
+ * readableFileSize(1024 * 1024 * 1024) // returns '1 GB'
+ */
+export function readableFileSize( size: number ): string {
+  const i = size !== 0 ? Math.floor( Math.log( size ) / Math.log( 1024 )) : 0;
+  return `${Number(( size / Math.pow( 1024, i )).toFixed( 2 )) } ${ [ "B", "kB", "MB", "GB", "TB" ][i]}`;
+}

package/dist/templates/utils/stringUtils/getInitials.tsx

@@ -0,0 +1,22 @@
+import React, { ReactElement } from "react";
+/**
+ * This method accepts a string and returns a string representation
+ * of the value shrunk to 2 characters representing the Initials.
+ * @param {string} value - The value to be converted to Initials
+ * @returns {string} - The 2character string of the initials extracted from the given value string.
+ * @example <caption>Example usage of getInitials method.</caption>
+ * // returns SP
+ * getInitials('Susheel Pogaku');
+ */
+export const getInitials = ( value:string ): string => {
+  return value
+    ?.match( /(^\S\S?|\b\S)?/g )?.join( "" )
+    ?.match( /(^\S|\S$)?/g )?.join( "" )
+    ?.toUpperCase() ?? "AU";
+};
+
+export const GetInitials = ( value:string ): ReactElement => {
+  return <React.Fragment>
+    {getInitials( value )}
+  </React.Fragment>;
+};

package/dist/templates/utils/stringUtils/index.tsx

@@ -0,0 +1,4 @@
+export * from "./getInitials";
+export { PlaceholderText } from "./placeholderText";
+export { regexSearch } from "./regexSearch";
+export { readableFileSize } from "./fileSize";

package/dist/templates/utils/stringUtils/placeholderText.tsx

@@ -0,0 +1,93 @@
+import React, { ReactElement } from "react";
+
+type Variant = "lorem" | "space" | "startrek";
+
+export interface PlaceholderTextProps {
+  paragraphs?: number;
+  sentences?: number;
+  variant?: Variant;
+}
+
+const getRandomSentences = (
+  source: string[],
+  sentences: number
+): string => {
+  const result = new Array( sentences );
+  let sourceLength = source.length;
+  const taken = new Array( sourceLength );
+  if ( sentences <= sourceLength ) {
+    while ( sentences-- ) {
+      const x = Math.floor( Math.random() * sourceLength );
+      result[sentences] = source[x in taken ? taken[x] : x];
+      taken[x] = --sourceLength in taken ? taken[sourceLength] : sourceLength;
+    }
+  }
+  return result.join( " " ).replace( /\s+/g, " " ).trim();
+};
+
+export const placeholderText = ( sentences:number, variant: Variant = "lorem" as Variant ): string => {
+  const wordCollection = variants?.[variant] ?? variants.lorem;
+  const paragraph = getRandomSentences( wordCollection, sentences );
+  return paragraph;
+};
+
+export const PlaceholderText = ({
+  paragraphs = 2,
+  sentences = 4,
+  variant = "lorem"
+}: PlaceholderTextProps ): ReactElement => {
+  let text = "";
+  for ( let i = 0; i < paragraphs; i++ ){
+    const paragraph = `<p>${placeholderText( sentences, variant )}</p>`;
+    text += paragraph;
+  }
+  return <div className="space-y-2 text-start dark:text-secondary-200" dangerouslySetInnerHTML={{ __html: text }}></div>;
+};
+
+export default PlaceholderText;
+
+const variants = {
+  "lorem": [
+    "Lorem ipsum dolor sit amet , consectetur adipiscing",
+    "elit sed do eiusmod tempor incididunt ut labore",
+    "et dolore magna aliqua. Ut enim ad minim veniam, ",
+    "quis nostrud exercitation ullamco laboris nisi ut",
+    "aliquip ex ea commodo consequat Duis aute irure",
+    "dolor in reprehenderit in voluptate velit esse cillum",
+    "dolore eu fugiat nulla pariatur Excepteur sint,",
+    "occaecat cupidatat non proident sunt in culpa qui",
+    "aliquip ex ea commodo consequat Duis aute irure",
+    "Neque porro quisquam est qui dolorem ipsum quia dolor sit amet",
+    "elit sed do eiusmod tempor incididunt ut labore",
+    "officia deserunt mollit anim id est laborum"
+  ],
+  "space": [
+    "There is no atmosphere in space and sound cannot travel without a medium.",
+    "Mercury is closest planet to sun, but venus is the hottest planet in solar system.",
+    "There are between 100-400 billion stars, approximately, in the galaxy.",
+    "There is a planet made of diamonds twice the size of earth.",
+    "One teaspoonful of neutron star would weigh the same as the entire human population.",
+    "In fact, cosmic expansion is actually accelerating.",
+    "Black holes are known for their voracious appetites;",
+    "Neptune only recently finished its first full post-discovery orbit in 2011.",
+    "Not all planets form and stay around stars.",
+    "We are all made of stardust. It sounds like a line from a poem.",
+    "It takes 230 million years for our solar system to complete one single orbit around the Milky Way.",
+    "Polaris, our North Star, is not leaving us anytime soon."
+  ],
+  "startrek": [
+    "There are four lights!",
+    "Things are only impossible until they are not!",
+    "Sokath, his eyes uncovered! Captain Picard is stuck on planet.",
+    "Logic is the beginning of wisdom, not the end.",
+    "Live long, and prosper.",
+    "Resistance is futile.",
+    "It is possible to commit no errors and still lose, that is not a weakness, that is life.",
+    "Without freedom of choice there is no creativity.",
+    "You can use logic to justify almost anything. That's its power. And its flaw.",
+    "Mr. Data, set heading to Alpha Quadrant, maximum warp, Engage !",
+    "Change is the essential process of all existence.",
+    "Insufficient facts always invite danger.",
+    "What does God need with a starship."
+  ]
+};

package/dist/templates/utils/stringUtils/regexSearch.tsx

@@ -0,0 +1,29 @@
+/**
+ * Function to verify if a string exists within another string using regex
+ *
+ * @param {string} stringToSearchFor
+ * @param {string} stringToSearchIn
+ * @param {boolean} caseSensitive (optional) default false
+ * @returns {boolean} True if the stringToSearchFor is found, false otherwise.
+ */
+
+export const regexSearch = (
+  stringToSearchFor: string,
+  stringToSearchIn: string,
+  caseSensitive = false
+): boolean => {
+  if ( !stringToSearchFor ){
+    return true;
+  }
+  if ( !stringToSearchIn ) {
+    return false;
+  }
+
+  try {
+    const regex = new RegExp( stringToSearchFor, caseSensitive ? "g" : "gi" );
+    return regex.test( stringToSearchIn );
+  } catch ( error: unknown ) {
+    console.error( "Invalid regular expression:", ( error as Error )?.message );
+    return false;
+  }
+};

package/dist/templates/utils/useOnScreen.tsx

@@ -0,0 +1,22 @@
+import { useEffect, useState, useMemo } from "react";
+
+export function useOnScreen( ref: React.RefObject<Element> ): boolean {
+
+  const [ isIntersecting, setIntersecting ] = useState<boolean>( false );
+
+  const observer = useMemo(() => new IntersectionObserver(
+    ([entry]) => setIntersecting( entry.isIntersecting )
+  ), []);
+
+  useEffect(() => {
+    if ( ref.current ) {
+      observer.observe( ref.current );
+    }
+    // Remove the observer as soon as the component is unmounted
+    return () => {
+      observer.disconnect();
+    };
+  }, [ ref, observer ]);
+
+  return isIntersecting;
+}

package/dist/templates/utils/useWindowSize.ts

@@ -0,0 +1,33 @@
+import { useEffect, useState } from "react";
+
+type ReturnType = {
+  width: number;
+  height: number;
+};
+
+export function useWindowSize(): ReturnType {
+  const [ windowSize, setWindowSize ] = useState<{
+    width: number | undefined;
+    height: number | undefined;
+  }>({
+    width: undefined,
+    height: undefined
+  });
+  useEffect(() => {
+    // Handler to call on window resize
+    function handleResize() {
+      // Set window width/height to state
+      setWindowSize({
+        width: window.innerWidth,
+        height: window.innerHeight
+      });
+    }
+    // Add event listener
+    window.addEventListener( "resize", handleResize );
+    // Call handler right away so state gets updated with initial window size
+    handleResize();
+    // Remove event listener on cleanup
+    return () => window.removeEventListener( "resize", handleResize );
+  }, []); // Empty array ensures that effect is only run on mount
+  return windowSize as ReturnType;
+}

package/package.json

@@ -0,0 +1,65 @@
+{
+    "name": "@cloudwick/astral-ui-cli",
+    "version": "0.1.0",
+    "description": "CLI for installing Astral UI components in any codebase",
+    "main": "dist/index.js",
+    "bin": {
+        "astral-ui": "./dist/index.js"
+    },
+    "type": "commonjs",
+    "files": [
+        "dist",
+        "README.md"
+    ],
+    "scripts": {
+        "build": "tsup",
+        "dev": "tsup --watch",
+        "test": "vitest run",
+        "lint:js": "eslint \"src/**/*.ts\"",
+        "lint": "yarn lint:js",
+        "lint:fix": "eslint \"src/**/*.ts\" --fix",
+        "prepublishOnly": "yarn build"
+    },
+    "keywords": [
+        "astral",
+        "ui",
+        "components",
+        "cli",
+        "react"
+    ],
+    "author": "Cloudwick Technologies",
+    "license": "MIT",
+    "devDependencies": {
+        "@types/chalk-animation": "^1.6.1",
+        "@types/fs-extra": "^11.0.4",
+        "@types/gradient-string": "^1.1.2",
+        "@types/inquirer": "^9.0.3",
+        "@types/node": "^20.10.6",
+        "@types/prompts": "^2.4.9",
+        "@types/semver": "^7.5.6",
+        "@typescript-eslint/eslint-plugin": "^6.12.0",
+        "@typescript-eslint/parser": "^6.12.0",
+        "eslint": "^8.54.0",
+        "tsup": "^8.0.1",
+        "typescript": "^5.3.3",
+        "vitest": "^1.1.1"
+    },
+    "dependencies": {
+        "@cloudwick/astral-config": "workspace:*",
+        "@cloudwick/astral-ui": "workspace:*",
+        "chalk": "^4.1.2",
+        "chalk-animation": "^2.0.3",
+        "commander": "^11.1.0",
+        "execa": "^5.1.1",
+        "fs-extra": "^11.2.0",
+        "gradient-string": "^1.2.0",
+        "inquirer": "^8.2.5",
+        "ora": "^5.4.1",
+        "prompts": "^2.4.2",
+        "semver": "^7.5.4",
+        "zod": "^3.22.4"
+    },
+    "engines": {
+        "node": ">=18.0.0"
+    }
+}