@js-empire/emperor-ui 0.1.0

package/src/components/header/header.tsx

@@ -0,0 +1,49 @@
+import type { HeaderProps } from "@types";
+import { cn } from "@utils";
+import { cva, VariantProps } from "class-variance-authority";
+import { ComponentProps, forwardRef } from "react";
+
+const headerStyles = cva(["flex justify-center items-center min-h-16"], {
+  variants: {
+    variant: {
+      primary: "bg-blue-500 text-white",
+      secondary: "bg-gray-500 text-black",
+    },
+    padding: {
+      sm: "p-2",
+      md: "p-4",
+      lg: "p-6",
+    },
+  },
+  defaultVariants: {
+    variant: "primary",
+    padding: "md",
+  },
+  compoundVariants: [
+    {
+      variant: "primary",
+      padding: "lg",
+      class: "shadow-lg",
+    },
+    {
+      variant: "secondary",
+      padding: "sm",
+      class: "border-2 border-black",
+    },
+  ],
+});
+
+export const Header = forwardRef<
+  HTMLElement,
+  ComponentProps<"header"> & VariantProps<typeof headerStyles> & HeaderProps
+>(({ className, variant, padding, ...props }, ref) => {
+  return (
+    <header
+      ref={ref}
+      className={cn(headerStyles({ variant, padding, className }))}
+      {...props}
+    >
+      this is a header
+    </header>
+  );
+});

package/src/components/header/index.ts

@@ -0,0 +1 @@
+export * from "./header";

package/src/components/index.ts

@@ -0,0 +1,8 @@
+export * from "./filter";
+export * from "./footer";
+export * from "./header";
+export * from "./item-card";
+export * from "./item-details";
+export * from "./listings";
+export * from "./nav-bar";
+export * from "./scaffold";

package/src/components/item-card/index.ts

@@ -0,0 +1 @@
+export * from "./item-card";

package/src/components/item-card/item-card.tsx

@@ -0,0 +1,6 @@
+import type { FooterProps } from "@types";
+import { cn } from "@utils";
+
+export function Footer({ className }: FooterProps) {
+  return <div className={cn("", className)}>Footer Component</div>;
+}

package/src/components/item-details/index.ts

@@ -0,0 +1 @@
+export * from "./item-details";

package/src/components/item-details/item-details.tsx

@@ -0,0 +1,6 @@
+import type { ItemDetailsProps } from "src";
+import { cn } from "@utils";
+
+export function ItemDetails({ className }: ItemDetailsProps) {
+  return <div className={cn("", className)}>ItemDetails Component</div>;
+}

package/src/components/listings/index.ts

@@ -0,0 +1 @@
+export * from "./listings";

package/src/components/listings/listings.tsx

@@ -0,0 +1,6 @@
+import type { ListingsProps } from "src";
+import { cn } from "@utils";
+
+export function Listings({ className }: ListingsProps) {
+  return <div className={cn("", className)}>Listings Component</div>;
+}

package/src/components/nav-bar/index.ts

@@ -0,0 +1 @@
+export * from "./nav-bar";

package/src/components/nav-bar/nav-bar.tsx

@@ -0,0 +1,6 @@
+import type { NavBarProps } from "src";
+import { cn } from "@utils";
+
+export function NavBar({ className }: NavBarProps) {
+  return <div className={cn("", className)}>NavBar Component</div>;
+}

package/src/components/scaffold/index.ts

@@ -0,0 +1 @@
+export * from "./scaffold";

package/src/components/scaffold/scaffold.tsx

@@ -0,0 +1,15 @@
+import { useEmperorUI } from "@hooks";
+import type { ScaffoldProps } from "@types";
+import { cn } from "@utils";
+
+export function Scaffold({ className, children }: ScaffoldProps) {
+  const { config } = useEmperorUI();
+
+  const backgroundColor = config?.theme?.colors?.background;
+
+  return (
+    <div className={cn("flex flex-col", className)} style={{ backgroundColor }}>
+      {children}
+    </div>
+  );
+}

package/src/constants/defaults.ts

@@ -0,0 +1,22 @@
+import type { ColorsPalette, EmperorUIConfig } from "@types";
+
+export const defaultColorsPalette: ColorsPalette = {
+  primary: "#1E40AF",
+  secondary: "#F59E0B",
+  background: "#FFFFFF",
+  text: "#111827",
+  danger: "#DC2626",
+  warning: "#D97706",
+  info: "#3B82F6",
+  success: "#16A34A",
+};
+
+export const defaultEmperorUIConfig: EmperorUIConfig = {
+  theme: {
+    mode: "dark",
+    colors: defaultColorsPalette,
+  },
+  layout: {
+    withScaffold: true,
+  },
+};

package/src/constants/index.ts

@@ -0,0 +1 @@
+export * from "./defaults";

package/src/context/emperor-ui-context.ts

@@ -0,0 +1,6 @@
+import type { EmperorUIContextState } from "@types";
+import { createContext } from "react";
+
+export const EmperorUIContext = createContext<
+  EmperorUIContextState | undefined
+>(undefined);

package/src/context/index.ts

@@ -0,0 +1 @@
+export * from "./emperor-ui-context";

package/src/examples/index.ts

@@ -0,0 +1 @@
+export * from "./";

package/src/hooks/index.ts

@@ -0,0 +1 @@
+export * from "./use-emperor-ui";

package/src/hooks/use-emperor-ui.ts

@@ -0,0 +1,12 @@
+import { EmperorUIContext } from "@context";
+import { useContext } from "react";
+
+export function useEmperorUI() {
+  const context = useContext(EmperorUIContext);
+
+  if (!context) {
+    throw new Error("useEmperorUI must be used within a EmperorUIProvider");
+  }
+
+  return context;
+}

package/src/index.css

@@ -0,0 +1 @@
+@import "tailwindcss";

package/src/index.ts

@@ -0,0 +1,8 @@
+export * from "./components";
+export type * from "./types";
+export * from "./utils";
+export * from "./providers";
+export * from "./context";
+export * from "./hooks";
+export * from "./constants";
+export * from "./examples";

package/src/providers/emperor-ui-provider.tsx

@@ -0,0 +1,31 @@
+import type { EmperorUIContextState, EmperorUIProviderProps } from "@types";
+import { useMemo } from "react";
+import { EmperorUIContext } from "@context";
+import { defaultEmperorUIConfig } from "@constants";
+import { Scaffold } from "@components";
+
+export function EmperorUIProvider({
+  children,
+  config = defaultEmperorUIConfig,
+}: EmperorUIProviderProps) {
+  const emperorUIProviderValue: EmperorUIContextState = useMemo(() => {
+    return {
+      config,
+    };
+  }, [config]);
+
+  const withScaffold = config.layout?.withScaffold ?? true;
+
+  if (withScaffold)
+    return (
+      <EmperorUIContext.Provider value={emperorUIProviderValue}>
+        <Scaffold>{children}</Scaffold>
+      </EmperorUIContext.Provider>
+    );
+
+  return (
+    <EmperorUIContext.Provider value={emperorUIProviderValue}>
+      {children}
+    </EmperorUIContext.Provider>
+  );
+}

package/src/providers/index.ts

@@ -0,0 +1 @@
+export * from "./emperor-ui-provider";

package/src/types/components/filter/filter.ts

@@ -0,0 +1,9 @@
+import type { SharedComponentProps } from "@types";
+
+export type FilterClassnames = {
+  base?: string;
+};
+
+export type FilterProps = SharedComponentProps & {
+  classNames?: FilterClassnames;
+};

package/src/types/components/filter/index.ts

@@ -0,0 +1 @@
+export type * from "./filter";

package/src/types/components/footer/footer.ts

@@ -0,0 +1,9 @@
+import type { SharedComponentProps } from "@types";
+
+export type FooterClassnames = {
+  base?: string;
+};
+
+export type FooterProps = SharedComponentProps & {
+  classNames?: FooterClassnames;
+};

package/src/types/components/footer/index.ts

@@ -0,0 +1 @@
+export type * from "./footer";

package/src/types/components/header/header.ts

@@ -0,0 +1,21 @@
+import type { SharedComponentProps } from "@types";
+
+export type HeaderClassnames = {
+  base?: string;
+  logo?: string;
+  navbar?: string;
+  userDropdown?: string;
+  sideMenu?: string;
+};
+
+export type HeaderActivations = {
+  hideLog?: boolean;
+  hideNavbar?: boolean;
+  hideUserDropdown?: boolean;
+  hideSideMenu?: boolean;
+};
+
+export type HeaderProps = SharedComponentProps & {
+  variant?: "default" | "compact";
+  classNames?: HeaderClassnames;
+};

package/src/types/components/header/index.ts

@@ -0,0 +1 @@
+export type * from "./header";

package/src/types/components/index.ts

@@ -0,0 +1,8 @@
+export type * from "./header";
+export type * from "./listings";
+export type * from "./nav-bar";
+export type * from "./scaffold";
+export type * from "./filter";
+export type * from "./footer";
+export type * from "./item-card";
+export type * from "./item-details";

package/src/types/components/item-card/index.ts

@@ -0,0 +1 @@
+export type * from "./item-card";

package/src/types/components/item-card/item-card.ts

@@ -0,0 +1,9 @@
+import type { SharedComponentProps } from "@types";
+
+export type ItemCardClassnames = {
+  base?: string;
+};
+
+export type ItemCardProps = SharedComponentProps & {
+  classNames?: ItemCardClassnames;
+};

package/src/types/components/item-details/index.ts

@@ -0,0 +1 @@
+export type * from "./item-details";

package/src/types/components/item-details/item-details.ts

@@ -0,0 +1,9 @@
+import type { SharedComponentProps } from "@types";
+
+export type ItemDetailsClassnames = {
+  base?: string;
+};
+
+export type ItemDetailsProps = SharedComponentProps & {
+  classNames?: ItemDetailsClassnames;
+};

package/src/types/components/listings/index.ts

@@ -0,0 +1 @@
+export type * from "./listings";

package/src/types/components/listings/listings.ts

@@ -0,0 +1,9 @@
+import type { SharedComponentProps } from "@types";
+
+export type ListingsClassnames = {
+  base?: string;
+};
+
+export type ListingsProps = SharedComponentProps & {
+  classNames?: ListingsClassnames;
+};

package/src/types/components/nav-bar/index.ts

@@ -0,0 +1 @@
+export type * from "./nav-bar";

package/src/types/components/nav-bar/nav-bar.ts

@@ -0,0 +1,9 @@
+import type { SharedComponentProps } from "@types";
+
+export type NavBarClassnames = {
+  base?: string;
+};
+
+export type NavBarProps = SharedComponentProps & {
+  classNames?: NavBarClassnames;
+};

package/src/types/components/scaffold/index.ts

@@ -0,0 +1 @@
+export type * from "./scaffold";

package/src/types/components/scaffold/scaffold.ts

@@ -0,0 +1,9 @@
+import type { SharedComponentProps } from "@types";
+
+export type ScaffoldClassnames = {
+  base?: string;
+};
+
+export type ScaffoldProps = SharedComponentProps & {
+  classNames?: ScaffoldClassnames;
+};

package/src/types/context/emperor-ui.ts

@@ -0,0 +1,37 @@
+import { type ReactNode } from "react";
+
+export type EmperorUIContextState = {
+  config: EmperorUIConfig;
+};
+
+export type EmperorUIProviderProps = {
+  children: ReactNode;
+  config: EmperorUIConfig;
+};
+
+export type ColorMode = "light" | "dark";
+
+export type ColorsPalette = {
+  primary: string;
+  secondary: string;
+  success: string;
+  danger: string;
+  warning: string;
+  info: string;
+  background: string;
+  text: string;
+};
+
+export type EmperorUITheme = {
+  mode: ColorMode;
+  colors: Partial<ColorsPalette>;
+};
+
+export type EmperorUILayout = {
+  withScaffold: boolean;
+};
+
+export type EmperorUIConfig = {
+  theme?: Partial<EmperorUITheme>;
+  layout?: Partial<EmperorUILayout>;
+};

package/src/types/context/index.ts

@@ -0,0 +1 @@
+export type * from "./emperor-ui";

package/src/types/index.ts

@@ -0,0 +1,3 @@
+export type * from "./components";
+export type * from "./shared";
+export type * from "./context";

package/src/types/shared/components.ts

@@ -0,0 +1,6 @@
+import { type ReactNode } from "react";
+
+export type SharedComponentProps = {
+  className?: string;
+  children?: ReactNode;
+};

package/src/types/shared/index.ts

@@ -0,0 +1 @@
+export type * from "./components";

package/src/utils/cn.ts

@@ -0,0 +1,6 @@
+import clsx, { ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...classes: ClassValue[]) {
+  return twMerge(clsx(classes));
+}

package/src/utils/index.ts

@@ -0,0 +1 @@
+export * from "./cn";

package/tailwind.config.js

@@ -0,0 +1,6 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+    content: ["./src/**/*.{js,ts,jsx,tsx}"],
+    theme: {},
+    plugins: [],
+};

package/tsconfig.app.json

@@ -0,0 +1,45 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "types": ["vite/client"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true,
+
+    "baseUrl": ".",
+    "paths": {
+      "@utils": ["./src/utils"],
+      "@components": ["./src/components"],
+      "@constants": ["./src/constants"],
+      "@hooks": ["./src/hooks"],
+      "@context": ["./src/context"],
+      "@examples": ["./src/examples"],
+      "@providers": ["./src/providers"],
+      "@types": ["./src/types"]
+    }
+  },
+  "include": [
+    "**/*.ts",
+    "src/**/*.(ts|js|tsx|jsx)",
+    "src/**/*.d.(ts|js|tsx|jsx)",
+    "src"
+  ]
+}

package/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

package/tsconfig.node.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/vite.config.ts

@@ -0,0 +1,49 @@
+import tailwindcss from "@tailwindcss/vite";
+import react from "@vitejs/plugin-react";
+import path from "path";
+import { defineConfig } from "vite";
+import dts from "vite-plugin-dts";
+
+export default defineConfig({
+  server: {
+    port: 3000,
+  },
+  plugins: [
+    react(),
+    tailwindcss(),
+    dts({
+      include: ["src/**/*.ts", "src/**/*.tsx"],
+      exclude: ["src/**/*.test.ts", "src/**/*.test.tsx"],
+      rollupTypes: false,
+      tsconfigPath: "./tsconfig.app.json",
+    }),
+  ],
+  resolve: {
+    alias: {
+      "@utils": path.resolve(__dirname, "./src/utils"),
+      "@components": path.resolve(__dirname, "./src/components"),
+      "@types": path.resolve(__dirname, "./src/types"),
+      "@providers": path.resolve(__dirname, "./src/providers"),
+      "@constants": path.resolve(__dirname, "./src/constants"),
+      "@hooks": path.resolve(__dirname, "./src/hooks"),
+      "@context": path.resolve(__dirname, "./src/context"),
+      "@examples": path.resolve(__dirname, "./src/examples"),
+    },
+  },
+  build: {
+    lib: {
+      entry: path.resolve(__dirname, "./src/index.ts"),
+      name: "EmperorUI",
+      fileName: "emperor-ui",
+    },
+    rollupOptions: {
+      external: ["react", "react-dom"],
+      output: {
+        globals: {
+          react: "React",
+          "react-dom": "ReactDOM",
+        },
+      },
+    },
+  },
+});

package/vitest.shims.d.ts

@@ -0,0 +1 @@
+/// <reference types="@vitest/browser-playwright" />