hisd3-ui-kit 1.0.0

package/src/types/theme.ts

@@ -0,0 +1,129 @@
+import { LayoutDirection, ThemeMode } from "../enum/theme";
+
+interface FontSize {
+  xs: string;
+  sm: string;
+  md: string;
+  lg: string;
+  xl: string;
+  xxl: string;
+}
+
+interface FontWeight {
+  light: string;
+  regular: string;
+  medium: string;
+  bold: string;
+  lg: string; // Assuming 'lg' is for large font weight
+}
+
+interface Font {
+  size: FontSize;
+  weight: FontWeight;
+}
+
+interface Palette {
+  mode: ThemeMode;
+  borderColor: string;
+  dividerColor: string;
+  tooltipBg: string;
+  background: string;
+  primary: {
+    main: string;
+    contrastText: string;
+  };
+  secondary: {
+    main: string;
+  };
+  success: {
+    main: string;
+    light: string;
+  };
+  warning: {
+    main: string;
+    light: string;
+  };
+  gray: {
+    50: string;
+    100: string;
+    200: string;
+    300: string;
+    400: string;
+    500: string;
+    600: string;
+    700: string;
+    800: string;
+    900: string;
+    A100: string;
+    A200: string;
+    A400: string;
+    A700: string;
+  };
+  black: string;
+  white: string;
+  orange: {
+    5: string;
+    6: string;
+  };
+  cyan: {
+    7: string;
+  };
+  red: {
+    6: string;
+  };
+  green: {
+    3: string;
+    5: string;
+    6: string;
+    7: string;
+  };
+  blue: {
+    5: string;
+    7: string;
+  };
+  text: string;
+}
+
+interface Sidebar {
+  light: string;
+  dark: string;
+}
+
+interface Breakpoints {
+  xs: number;
+  sm: number;
+  md: number;
+  lg: number;
+  xl: number;
+  xxl: number;
+}
+
+interface Sizes {
+  line: {
+    base: number;
+  };
+  borderRadius: {
+    base: string;
+    circle: string;
+  };
+  framed: {
+    base: string;
+  };
+}
+
+export interface StyledTheme {
+  spacing: number;
+  cardRadius: string;
+  cardRadius30: string;
+  cardShadow: string;
+  direction: LayoutDirection;
+  palette: Palette;
+  status: {
+    danger: string;
+  };
+  divider: string;
+  font: Font;
+  sidebar: Sidebar;
+  breakpoints: Breakpoints;
+  sizes: Sizes;
+}

package/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "ESNext", // Utilize modern JavaScript features
+    "module": "ESNext", // Enable ES Modules
+    "moduleResolution": "node", // Use Node.js module resolution
+    "jsx": "react-jsx", // JSX Transform for React 18
+    "outDir": "./dist", // Output compiled files to 'dist' directory
+    "esModuleInterop": true, // Ensure compatibility with CommonJS and ES Modules
+    "skipLibCheck": true, // Skip type checking of library files (improves performance)
+    "strict": true, // Enable all strict type-checking options
+    "declaration": true, // Generate .d.ts declaration files
+    "forceConsistentCasingInFileNames": true, // Ensure consistent casing in file names
+    "allowJs": true, // Allow JavaScript files to be imported into the TypeScript project
+    "resolveJsonModule": true // Allow importing JSON files as modules
+  },
+  "include": ["src"], // Include all TypeScript files in 'src' folder
+  "exclude": ["node_modules"] // Exclude 'node_modules' folder
+}

package/webpack.config.js

@@ -0,0 +1,45 @@
+const path = require("path");
+const TerserPlugin = require("terser-webpack-plugin");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+
+module.exports = {
+  entry: "./src/index.ts", // Entry file for your component library
+  output: {
+    path: path.resolve(__dirname, "dist"),
+    filename: "index.js",
+    library: "HISD3UIKIT", // Expose your component under a global name
+    libraryTarget: "umd", // UMD allows for various module systems (CommonJS, AMD, or as a global)
+    umdNamedDefine: true, // Ensures proper module naming when using UMD
+  },
+  resolve: {
+    extensions: [".ts", ".tsx", ".js", ".jsx"], // Resolve TypeScript and JavaScript files
+  },
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        use: "ts-loader",
+        exclude: /node_modules/,
+      },
+      {
+        test: /\.jsx?$/,
+        use: "babel-loader",
+        exclude: /node_modules/,
+      },
+      {
+        test: /\.css$/,
+        use: [MiniCssExtractPlugin.loader, "css-loader"],
+      },
+    ],
+  },
+  optimization: {
+    minimize: true,
+    minimizer: [new TerserPlugin()], // Minify the output for smaller bundle size
+  },
+  externals: {
+    // Externalize React and ReactDOM (you don't want to bundle these)
+    react: "React",
+    "react-dom": "ReactDOM",
+    "styled-components": "styled-components",
+  },
+};