From 9d25fee43e490dc6b4cb57a5bd68586a498c8571 Mon Sep 17 00:00:00 2001 From: mohiit1502 Date: Wed, 18 Sep 2024 17:52:33 +0530 Subject: [PATCH] Publishable Icon --- package.json | 21 ++++++----- src/Icon.component.scss | 2 +- src/Icon.tsx | 18 ++++++---- src/helper.ts | 7 ++-- src/{index.tsx => index.ts} | 1 + src/react-app-env.d.ts | 71 ------------------------------------- src/setupTests.ts | 5 --- src/types.ts | 60 ------------------------------- tsconfig.json | 26 ++------------ vite.config.ts | 35 ++++++++++++------ 10 files changed, 56 insertions(+), 190 deletions(-) rename src/{index.tsx => index.ts} (62%) delete mode 100644 src/react-app-env.d.ts delete mode 100644 src/setupTests.ts delete mode 100644 src/types.ts diff --git a/package.json b/package.json index 637ff10..fef81b5 100644 --- a/package.json +++ b/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" } diff --git a/src/Icon.component.scss b/src/Icon.component.scss index 56270bb..ff5777d 100755 --- a/src/Icon.component.scss +++ b/src/Icon.component.scss @@ -1,4 +1,4 @@ -.ar-LoadableIcon { +.ar-Icon { transition: all 0.3s; &:hover.hover-shadow { diff --git a/src/Icon.tsx b/src/Icon.tsx index 135ecaf..193ebe7 100644 --- a/src/Icon.tsx +++ b/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 { ar-icon { ar-icon { } } -export default Icon +export default withTheme(Icon) diff --git a/src/helper.ts b/src/helper.ts index b1d96ed..a680af8 100644 --- a/src/helper.ts +++ b/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) } diff --git a/src/index.tsx b/src/index.ts similarity index 62% rename from src/index.tsx rename to src/index.ts index ff56e4a..f941437 100644 --- a/src/index.tsx +++ b/src/index.ts @@ -1 +1,2 @@ export { default as Icon } from "./Icon" +export * from "./helper" diff --git a/src/react-app-env.d.ts b/src/react-app-env.d.ts deleted file mode 100644 index 461cd0b..0000000 --- a/src/react-app-env.d.ts +++ /dev/null @@ -1,71 +0,0 @@ -/// -/// -/// - -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 & { 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 -} diff --git a/src/setupTests.ts b/src/setupTests.ts deleted file mode 100644 index 6a0fd12..0000000 --- a/src/setupTests.ts +++ /dev/null @@ -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" diff --git a/src/types.ts b/src/types.ts deleted file mode 100644 index c8dd872..0000000 --- a/src/types.ts +++ /dev/null @@ -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 - icon?: SVGSVGElement | ReactElement - } -} diff --git a/tsconfig.json b/tsconfig.json index bdea817..596e2cf 100644 --- a/tsconfig.json +++ b/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"] } diff --git a/vite.config.ts b/vite.config.ts index ae3d7cd..ff799fd 100644 --- a/vite.config.ts +++ b/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"], + }, }, })