@gyramais/gyra-design 0.1.0

package/src/shadcn/tooltip.tsx

@@ -0,0 +1,30 @@
+"use client"
+
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+import { cn } from "./lib/utils"
+
+const TooltipProvider = TooltipPrimitive.Provider
+
+const Tooltip = TooltipPrimitive.Root
+
+const TooltipTrigger = TooltipPrimitive.Trigger
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Content
+    ref={ref}
+    sideOffset={sideOffset}
+    className={cn(
+      "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props}
+  />
+))
+TooltipContent.displayName = TooltipPrimitive.Content.displayName
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

package/src/theme.ts

@@ -0,0 +1,123 @@
+interface Colors {
+  backgroundColor: string;
+  primaryButton: string;
+  secondaryButton: string;
+  linkButton: string;
+}
+
+interface Images {
+  whiteLogoUrl: string;
+  darkLogoUrl: string;
+  iconUrl: string;
+}
+
+const isColorDark = (hexColor: string) => {
+  const color = hexColor.replace('#', '');
+
+  const r = parseInt(color.substr(0, 2), 16);
+  const g = parseInt(color.substr(2, 2), 16);
+  const b = parseInt(color.substr(4, 2), 16);
+  
+  const yiq = ((r * 299) + (g * 587) + (b * 114)) / 1000;
+  return (yiq <= 128);
+};
+
+const getContrastYIQ = (hexColor: string) => (isColorDark(hexColor) ? '#ffffff' : '#2b2b2b');
+
+const getTintedColor: (hexColor: string, v: number) => string = (hexColor, v) => {
+  if (hexColor.length > 6) {
+    hexColor= hexColor.substring(1, hexColor.length)
+  }
+
+  const rgb = parseInt(hexColor, 16); 
+  
+  let r = Math.abs(((rgb >> 16) & 0xFF) + v);
+  if (r > 255) {
+    r = r - (r - 255);
+  }
+  
+  let g = Math.abs(((rgb >> 8) & 0xFF) + v);
+  if (g > 255) {
+    g = g - (g - 255);
+  }
+  
+  let b = Math.abs((rgb & 0xFF) + v);
+  if (b > 255) {
+    b = b - (b - 255);
+  }
+
+  const rString = (`${Number(r < 0 || isNaN(r)) ? 0 : ((r > 255) ? 255 : r).toString(16)}`).padStart(2, '0');
+  const gString = (`${Number(g < 0 || isNaN(g)) ? 0 : ((g > 255) ? 255 : g).toString(16)}`).padStart(2, '0'); 
+  const bString = (`${Number(b < 0 || isNaN(b)) ? 0 : ((b > 255) ? 255 : b).toString(16)}`).padStart(2 ,'0'); 
+  
+  return "#" + rString + gString + bString;
+} 
+
+const setTheme = ({ colors, images }: {
+  colors: Colors;
+  images: Images;
+}) => {
+  const {
+    backgroundColor,
+    primaryButton,
+    secondaryButton,
+    linkButton,
+  } = colors;
+
+  if (backgroundColor) {
+    document.documentElement.style.setProperty('--background-color', backgroundColor);
+    document.documentElement.style.setProperty('--background-text-color', getContrastYIQ(backgroundColor));
+  }
+
+  if (primaryButton) {
+    document.documentElement.style.setProperty('--primary-button-color', primaryButton);
+    document.documentElement.style.setProperty('--primary-button-text-color', getContrastYIQ(primaryButton));
+
+    document.documentElement.style.setProperty('--dark-button-color', `${primaryButton}66`);
+    document.documentElement.style.setProperty('--dark-button-text-color', getContrastYIQ(primaryButton));
+
+    const primaryButtonIsDark = isColorDark(primaryButton);
+    for (let x = 0; x < 5; x += 1) {
+      const variant = getTintedColor(primaryButton, ((x * 35) * (primaryButtonIsDark ? 1 : -1)));
+      
+      document.documentElement.style.setProperty(`--primary-button-color-${x}00`, variant);
+    }
+  }
+
+  if (secondaryButton) {
+    document.documentElement.style.setProperty('--secondary-button-color', secondaryButton);
+    document.documentElement.style.setProperty('--secondary-button-text-color', getContrastYIQ(secondaryButton));
+  }
+
+  if (linkButton) {
+    document.documentElement.style.setProperty('--link-button-color', linkButton);
+  }
+
+  const {
+    darkLogoUrl,
+    whiteLogoUrl,
+    iconUrl,
+  } = images;
+
+  if (darkLogoUrl) {
+    document.documentElement.style.setProperty('--dark-logo-url', `url(${darkLogoUrl})`);
+  }
+
+  if (whiteLogoUrl) {
+    document.documentElement.style.setProperty('--white-logo-url', `url(${whiteLogoUrl})`);
+  }
+
+  if (iconUrl) {
+    document.documentElement.style.setProperty('--icon-url', `url(${iconUrl})`);
+  }
+
+  if (backgroundColor && darkLogoUrl && whiteLogoUrl) {
+    const backgroundColorIsDark = isColorDark(backgroundColor);
+
+    document.documentElement.style.setProperty('--background-logo-url', `${backgroundColorIsDark ? `url(${whiteLogoUrl})` : `url(${darkLogoUrl})`}`)
+  }
+};
+
+export default {
+  setTheme,
+};

package/tailwind.config.js

@@ -0,0 +1,9 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ["./src/**/*.{ts,tsx}"],
+  theme: {
+    extend: {},
+  },
+  plugins: [require("tailwindcss-animate")],
+}
+

package/tsconfig.json

@@ -0,0 +1,32 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "outDir": "lib",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "declaration": true,
+    "declarationDir": "dist",
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react",
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": ["src"],
+  "exclude": [
+    "node_modules",
+    "dist",
+    "src/**/*.stories.tsx",
+    "src/**/*.test.tsx",
+  ]
+}