Publishable Icon

package.json

@@ -1,17 +1,16 @@
 {
-  "name": "@armco/loadable-icon",
+  "name": "@armco/icon",
   "private": true,
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "build": "tsc && vite build",
-    "test": "vitest",
+    "build": "rm -rf build && tsc && vite build",
     "format": "prettier --write .",
     "lint": "eslint ."
   },
   "dependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react": ">16.8.0",
+    "react-dom": ">16.8.0"
   },
   "devDependencies": {
     "@testing-library/dom": "^9.2.0",
@@ -31,6 +30,8 @@
     "sass": "^1.63.4",
     "typescript": "^5.0.2",
     "vite": "^4.0.0",
+    "vite-plugin-css-injected-by-js": "^3.5.1",
+    "vite-plugin-dts": "^4.2.1",
     "vitest": "^0.30.1"
   },
   "eslintConfig": {
@@ -51,10 +52,12 @@
     "react-dom": ">16.8.0"
   },
   "prettier": "prettier-config-nick",
-  "main": "index.tsx",
+  "main": "build/index.cjs.js",
+  "module": "build/index.es.js",
+  "types": "build/types/index.d.ts",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/ReStruct-Corporate-Advantage/loadable-icon.git"
+    "url": "git+https://github.com/ReStruct-Corporate-Advantage/icon.git"
   },
   "keywords": [
     "components",
@@ -64,7 +67,7 @@
   ],
   "license": "ISC",
   "bugs": {
-    "url": "https://github.com/ReStruct-Corporate-Advantage/loadable-icon/issues"
+    "url": "https://github.com/ReStruct-Corporate-Advantage/icon/issues"
   },
-  "homepage": "https://github.com/ReStruct-Corporate-Advantage/loadable-icon#readme"
+  "homepage": "https://github.com/ReStruct-Corporate-Advantage/icon#readme"
 }

src/Icon.component.scss

@@ -1,4 +1,4 @@
-.ar-LoadableIcon {
+.ar-Icon {
     transition: all 0.3s;
 
     &:hover.hover-shadow {

src/Icon.tsx

@@ -1,7 +1,13 @@
 import React, { Component, ReactElement } from "react"
-import { ArIconSourceTypes, ArValidImageMimeTypes } from "@armco/types"
-import { Network } from "@armco/utils"
-import { IconRegistry, IconSource, IconProps, IconState } from "./types"
+import {
+  ArIconSourceTypes,
+  ArValidImageMimeTypes,
+  IconRegistry,
+  IconSource,
+  IconProps,
+  IconState,
+} from "@armco/types"
+import { Network, withTheme } from "@armco/utils"
 import {
   applyStyles,
   createElementFromSvg,
@@ -61,7 +67,7 @@ class Icon extends Component<IconProps, IconState> {
         <img
           src={source as any}
           alt="ar-icon"
-          className={`${this.props.attributes?.classes}${
+          className={`ar-Icon ${this.props.attributes?.classes}${
             this.props.hoverShadow ? " hover-shadow p-1" : ""
           }`}
           style={this.props.attributes?.styles}
@@ -120,7 +126,7 @@ class Icon extends Component<IconProps, IconState> {
             <img
               src={source as any}
               alt="ar-icon"
-              className={`${this.props.attributes?.classes}${
+              className={`ar-Icon ${this.props.attributes?.classes}${
                 this.props.hoverShadow ? " hover-shadow p-1" : ""
               }`}
               style={this.props.attributes?.styles}
@@ -171,4 +177,4 @@ class Icon extends Component<IconProps, IconState> {
   }
 }
 
-export default Icon
+export default withTheme<IconProps>(Icon)

src/helper.ts

@@ -2,8 +2,9 @@ import {
   ArIconSourceTypes,
   ArThemes,
   ArValidImageMimeTypes,
+  IconProps,
+  IconState,
 } from "@armco/types"
-import { IconProps, IconState } from "./types"
 import React, { ReactElement } from "react"
 
 const parser = new DOMParser()
@@ -174,9 +175,7 @@ export const applyStyles = (
   juice.setAttribute("width", width)
   juice.setAttribute("height", height)
 
-  if (classes) {
-    juice.setAttribute("class", classes)
-  }
+  juice.setAttribute("class", `ar-Icon${classes ? " " + classes : ""}`)
   if (styles) {
     Object.assign(juice.style, styles)
   }

src/index.ts

@@ -1 +1,2 @@
 export { default as Icon } from "./Icon"
+export * from "./helper"

src/react-app-env.d.ts

@@ -1,71 +0,0 @@
-/// <reference types="node" />
-/// <reference types="react" />
-/// <reference types="react-dom" />
-
-declare namespace NodeJS {
-  interface ProcessEnv {
-    readonly NODE_ENV: "development" | "production" | "test"
-    readonly PUBLIC_URL: string
-  }
-}
-
-declare module "*.avif" {
-  const src: string
-  export default src
-}
-
-declare module "*.bmp" {
-  const src: string
-  export default src
-}
-
-declare module "*.gif" {
-  const src: string
-  export default src
-}
-
-declare module "*.jpg" {
-  const src: string
-  export default src
-}
-
-declare module "*.jpeg" {
-  const src: string
-  export default src
-}
-
-declare module "*.png" {
-  const src: string
-  export default src
-}
-
-declare module "*.webp" {
-    const src: string
-    export default src
-}
-
-declare module "*.svg" {
-  import * as React from "react"
-
-  export const ReactComponent: React.FunctionComponent<React.SVGProps<
-    SVGSVGElement
-  > & { title?: string }>
-
-  const src: string
-  export default src
-}
-
-declare module "*.module.css" {
-  const classes: { readonly [key: string]: string }
-  export default classes
-}
-
-declare module "*.module.scss" {
-  const classes: { readonly [key: string]: string }
-  export default classes
-}
-
-declare module "*.module.sass" {
-  const classes: { readonly [key: string]: string }
-  export default classes
-}

src/setupTests.ts

@@ -1,5 +0,0 @@
-// jest-dom adds custom jest matchers for asserting on DOM nodes.
-// allows you to do things like:
-// expect(element).toHaveTextContent(/react/i)
-// learn more: https://github.com/testing-library/jest-dom
-import "@testing-library/jest-dom"

src/types.ts

@@ -1,60 +0,0 @@
-import { ArIconSourceTypes, ArThemes } from "@armco/types"
-import { CSSProperties, ReactElement } from "react"
-
-export interface IconSource {
-  source: string | object
-  type: ArIconSourceTypes
-}
-
-interface IconAttributes {
-  height?: string
-  width?: string
-  size?: string
-  strokeWidth?: string
-  colors?: {
-    fillColor?: string
-    strokeColor?: string
-    strokeWidth?: string
-    toggleFillColor?: string
-    toggleStrokeColor?: string
-    hoverFillColor?: string
-    hoverStrokeColor?: string
-    darkFillColor?: string
-    darkStrokeColor?: string
-    darkToggleFillColor?: string
-    darkToggleStrokeColor?: string
-    darkHoverFillColor?: string
-    darkHoverStrokeColor?: string
-  }
-  styles?: CSSProperties
-  classes?: string
-}
-
-interface IconEvents {
-  onClick?: () => void
-  onMouseEnter?: () => void
-  onMouseLeave?: () => void
-}
-
-export interface IconProps {
-  icon?: IconSource | string | object
-  attributes?: IconAttributes
-  events?: IconEvents
-  toggled?: boolean
-  hoverShadow?: boolean
-  theme?: ArThemes
-}
-
-export interface IconState {
-  hovered: boolean
-  toggled: boolean
-  juice: SVGSVGElement | ReactElement
-  type: ArIconSourceTypes
-}
-
-export type IconRegistry = {
-  [key: string]: {
-    promise?: Promise<any>
-    icon?: SVGSVGElement | ReactElement
-  }
-}

tsconfig.json

@@ -1,26 +1,4 @@
 {
-  "compilerOptions": {
-    "target": "es5",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
-    "allowJs": true,
-    "skipLibCheck": true,
-    "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
-    "strict": true,
-    "forceConsistentCasingInFileNames": true,
-    "noFallthroughCasesInSwitch": true,
-    "module": "esnext",
-    "moduleResolution": "node",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "jsx": "react-jsx"
-  },
-  "include": [
-    "src"
-, "../../LoadableIcon.tsx"  ]
+  "extends": "../../tsconfig.json",
+  "include": ["src"]
 }

vite.config.ts

@@ -1,20 +1,35 @@
+import { resolve } from "path"
 import { defineConfig } from "vitest/config"
 import react from "@vitejs/plugin-react"
+import path from "path"
+import svgr from "vite-plugin-svgr"
+import dts from "vite-plugin-dts"
+import cssInjectedByJsPlugin from "vite-plugin-css-injected-by-js"
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()],
-  server: {
-    open: true,
+  plugins: [
+    svgr(),
+    react(),
+    dts({ outDir: "build/types" }),
+    cssInjectedByJsPlugin(),
+  ],
+  resolve: {
+    alias: {
+      "~bootstrap": path.resolve(__dirname, "node_modules/bootstrap"),
+    },
   },
   build: {
     outDir: "build",
-    sourcemap: true,
-  },
-  test: {
-    globals: true,
-    environment: "jsdom",
-    setupFiles: "src/setupTests",
-    mockReset: true,
+    lib: {
+      entry: resolve(__dirname, "src/index.ts"),
+      name: "@armco/icon",
+      formats: ["cjs", "es"],
+      fileName: (format, b) => `${b}.${format}.js`,
+    },
+    rollupOptions: {
+      treeshake: true,
+      external: ["react", "react/jsx-runtime", "react-dom"],
+    },
   },
 })