Removed all errors, added dependencies, test pending
This commit is contained in:
2
.gitignore
vendored
Normal file
2
.gitignore
vendored
Normal file
@@ -0,0 +1,2 @@
|
||||
build
|
||||
node_modules
|
||||
8
.hintrc
Normal file
8
.hintrc
Normal file
@@ -0,0 +1,8 @@
|
||||
{
|
||||
"extends": [
|
||||
"development"
|
||||
],
|
||||
"hints": {
|
||||
"no-inline-styles": "off"
|
||||
}
|
||||
}
|
||||
7182
package-lock.json
generated
Normal file
7182
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
75
package.json
Normal file
75
package.json
Normal file
@@ -0,0 +1,75 @@
|
||||
{
|
||||
"name": "@armco/avatar",
|
||||
"version": "0.0.4",
|
||||
"type": "module",
|
||||
"main": "build/cjs/Avatar.js",
|
||||
"module": "build/es/Avatar.js",
|
||||
"types": "build/types/Avatar.d.ts",
|
||||
"scripts": {
|
||||
"build": "rm -rf build && tsc && vite build",
|
||||
"format": "prettier --write .",
|
||||
"lint": "eslint .",
|
||||
"publish:sh": "./publish.sh",
|
||||
"publish:local": "./publish-local.sh"
|
||||
},
|
||||
"dependencies": {
|
||||
"@armco/icon": "^0.0.5",
|
||||
"@armco/imageeditor": "^0.0.5",
|
||||
"@armco/shared-components": "^0.0.53",
|
||||
"@armco/types": "^0.0.11",
|
||||
"@armco/utils": "^0.0.18",
|
||||
"react": ">16.8.0",
|
||||
"react-dom": ">16.8.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^22.5.5",
|
||||
"@types/react": "^18.0.15",
|
||||
"@types/react-dom": "^18.0.6",
|
||||
"@vitejs/plugin-react": "^4.3.1",
|
||||
"jsdom": "^21.1.0",
|
||||
"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",
|
||||
"vite-plugin-externalize-deps": "^0.8.0",
|
||||
"vite-plugin-svgr": "^4.2.0",
|
||||
"vitest": "^0.30.1"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"extends": [
|
||||
"react-app",
|
||||
"react-app/jest"
|
||||
],
|
||||
"plugins": [
|
||||
"prettier"
|
||||
],
|
||||
"rules": {
|
||||
"prettier/prettier": "error",
|
||||
"react/jsx-no-target-blank": "off"
|
||||
}
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">16.8.0",
|
||||
"react-dom": ">16.8.0"
|
||||
},
|
||||
"prettier": "prettier-config-nick",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/ReStruct-Corporate-Advantage/icon.git"
|
||||
},
|
||||
"keywords": [
|
||||
"components",
|
||||
"atomic",
|
||||
"building-blocks",
|
||||
"foundation"
|
||||
],
|
||||
"files": [
|
||||
"build"
|
||||
],
|
||||
"license": "ISC",
|
||||
"bugs": {
|
||||
"url": "https://github.com/ReStruct-Corporate-Advantage/icon/issues"
|
||||
},
|
||||
"homepage": "https://github.com/ReStruct-Corporate-Advantage/icon#readme"
|
||||
}
|
||||
16
publish-local.sh
Executable file
16
publish-local.sh
Executable file
@@ -0,0 +1,16 @@
|
||||
#!/bin/sh
|
||||
|
||||
semver=${1:-patch}
|
||||
|
||||
set -e
|
||||
|
||||
npm run build
|
||||
cp package.json build/
|
||||
sed -i '' -E 's/"build"/"*"/' build/package.json
|
||||
|
||||
sed -i '' 's#"build/cjs/Avatar.js"#"cjs/Avatar.js"#' build/package.json
|
||||
sed -i '' 's#"build/es/Avatar.js"#"es/Avatar.js"#' build/package.json
|
||||
sed -i '' 's#"build/types/Avatar.d.ts"#"types/Avatar.d.ts"#' build/package.json
|
||||
|
||||
cd build
|
||||
npm pack --pack-destination ~/__Projects__/Common
|
||||
16
publish.sh
Executable file
16
publish.sh
Executable file
@@ -0,0 +1,16 @@
|
||||
#!/bin/sh
|
||||
|
||||
semver=${1:-patch}
|
||||
|
||||
set -e
|
||||
npm --no-git-tag-version version ${semver}
|
||||
npm run build
|
||||
cp package.json build/
|
||||
sed -i '' -E 's/"build"/"*"/' build/package.json
|
||||
|
||||
sed -i '' 's#"build/cjs/Avatar.js"#"cjs/Avatar.js"#' build/package.json
|
||||
sed -i '' 's#"build/es/Avatar.js"#"es/Avatar.js"#' build/package.json
|
||||
sed -i '' 's#"build/types/Avatar.d.ts"#"types/Avatar.d.ts"#' build/package.json
|
||||
|
||||
cd build
|
||||
npm publish --access public --loglevel verbose
|
||||
114
src/Avatar.tsx
114
src/Avatar.tsx
@@ -6,8 +6,9 @@ import {
|
||||
ImageProps,
|
||||
UploadResult,
|
||||
} from "@armco/types"
|
||||
import { Icon } from "@armco/icon"
|
||||
import { ImageEditor } from "@armco/imageeditor"
|
||||
import Icon from "@armco/icon"
|
||||
import { useModalState } from "@armco/utils/hooks"
|
||||
import ImageEditor from "@armco/imageeditor"
|
||||
import { Image, ProgressIndicator, Text } from "@armco/shared-components"
|
||||
import "./Avatar.component.scss"
|
||||
|
||||
@@ -27,6 +28,12 @@ const ACTION_ICON_SIZES = {
|
||||
xlarge: "3.2rem",
|
||||
}
|
||||
|
||||
/**
|
||||
* Simple Avatar component that can be used as profile pic or as a part of "users" component
|
||||
* It can also be used to view and edit image in a modal, for accessing this functionality, a listening Modal component should exist
|
||||
* at the root of consumer project
|
||||
*/
|
||||
|
||||
const Avatar = memo(
|
||||
(props: AvatarProps) => {
|
||||
const {
|
||||
@@ -45,6 +52,7 @@ const Avatar = memo(
|
||||
const [hovered, setHovered] = useState<boolean>()
|
||||
const [displayed, show] = useState<boolean>()
|
||||
const [localItem, setLocalItem] = useState<UploadResult>()
|
||||
const { setModalState } = useModalState()
|
||||
|
||||
useEffect(() => {
|
||||
setTimeout(() => show(hovered), 10)
|
||||
@@ -124,7 +132,7 @@ const Avatar = memo(
|
||||
<>
|
||||
<Icon
|
||||
attributes={{
|
||||
colors: { fillColor: #ff4d4f },
|
||||
colors: { fillColor: "#ff4d4f" },
|
||||
classes: isSmall ? "" : "mb-2",
|
||||
size: AVATAR_SIZES[size],
|
||||
}}
|
||||
@@ -173,63 +181,61 @@ const Avatar = memo(
|
||||
}}
|
||||
events={{
|
||||
onClick: (e) => {
|
||||
e.stopPropagation()
|
||||
e?.stopPropagation()
|
||||
localItem.url &&
|
||||
dispatch(
|
||||
setModalState({
|
||||
modalClasses: "full-dimensions",
|
||||
content: (
|
||||
<ImageEditor
|
||||
image={localItem.url}
|
||||
onChange={(imageProps: Partial<ImageProps>) => {
|
||||
if (item) {
|
||||
const itemClone = { ...item }
|
||||
itemClone.imageProps = imageProps
|
||||
setLocalItem(itemClone)
|
||||
onChange && onChange(imageProps)
|
||||
}
|
||||
}}
|
||||
onCommit={onCommit}
|
||||
viewOnly={viewOnly}
|
||||
/>
|
||||
),
|
||||
show: true,
|
||||
hideClose: true,
|
||||
shouldScale: true,
|
||||
shouldFadeIn: true,
|
||||
closeHandler: () => {
|
||||
dispatch(
|
||||
setModalState({
|
||||
content: null,
|
||||
show: false,
|
||||
}),
|
||||
)
|
||||
},
|
||||
}),
|
||||
)
|
||||
},
|
||||
setModalState({
|
||||
modalClasses: "full-dimensions",
|
||||
content: (
|
||||
<ImageEditor
|
||||
image={localItem.url}
|
||||
onChange={(imageProps: Partial<ImageProps>) => {
|
||||
if (item) {
|
||||
const itemClone = { ...item }
|
||||
itemClone.imageProps = imageProps
|
||||
setLocalItem(itemClone)
|
||||
onChange && onChange(imageProps)
|
||||
}
|
||||
}}
|
||||
onCommit={onCommit}
|
||||
viewOnly={viewOnly}
|
||||
/>
|
||||
),
|
||||
show: true,
|
||||
hideClose: true,
|
||||
shouldScale: true,
|
||||
shouldFadeIn: true,
|
||||
closeHandler: () => {
|
||||
setModalState({
|
||||
content: null,
|
||||
show: false,
|
||||
})
|
||||
},
|
||||
})
|
||||
}
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{!viewOnly && (
|
||||
<LoadableIcon
|
||||
classes={
|
||||
hasPassed
|
||||
? isSmall
|
||||
? size === ArSizes.XSMALL
|
||||
? ""
|
||||
: "ms-1"
|
||||
: "ms-2"
|
||||
: ""
|
||||
}
|
||||
icon="ri.RiDeleteBin6Fill"
|
||||
color="white"
|
||||
size={ACTION_ICON_SIZES[size]}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
setLocalItem(undefined)
|
||||
clearImage && clearImage()
|
||||
<Icon
|
||||
attributes={{
|
||||
colors: {fillColor: "white"},
|
||||
classes: hasPassed
|
||||
? isSmall
|
||||
? size === ArSizes.XSMALL
|
||||
? ""
|
||||
: "ms-1"
|
||||
: "ms-2"
|
||||
: "",
|
||||
size: ACTION_ICON_SIZES[size],
|
||||
}}
|
||||
events={{
|
||||
onClick: (e) => {
|
||||
e?.stopPropagation()
|
||||
setLocalItem(undefined)
|
||||
clearImage && clearImage()
|
||||
}
|
||||
}}
|
||||
icon="ri.RiDeleteBin6Fill"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
27
tsconfig.json
Normal file
27
tsconfig.json
Normal file
@@ -0,0 +1,27 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "es5",
|
||||
"lib": [
|
||||
"dom",
|
||||
"dom.iterable",
|
||||
"esnext"
|
||||
],
|
||||
"outDir": "build",
|
||||
"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"
|
||||
]
|
||||
}
|
||||
41
vite.config.ts
Normal file
41
vite.config.ts
Normal file
@@ -0,0 +1,41 @@
|
||||
import { resolve } from "path"
|
||||
import { defineConfig } from "vitest/config"
|
||||
import react from "@vitejs/plugin-react"
|
||||
import dts from "vite-plugin-dts"
|
||||
import cssInjectedByJsPlugin from "vite-plugin-css-injected-by-js"
|
||||
import { externalizeDeps } from "vite-plugin-externalize-deps"
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [
|
||||
react(),
|
||||
dts({ outDir: "build/types" }),
|
||||
cssInjectedByJsPlugin(),
|
||||
externalizeDeps()
|
||||
],
|
||||
build: {
|
||||
outDir: "build",
|
||||
lib: {
|
||||
entry: [
|
||||
resolve(__dirname, "src/Avatar.tsx"),
|
||||
],
|
||||
},
|
||||
rollupOptions: {
|
||||
treeshake: true,
|
||||
output: [
|
||||
{
|
||||
format: "es",
|
||||
dir: "build/es",
|
||||
entryFileNames: "[name].js",
|
||||
chunkFileNames: "[name]-chunk.js",
|
||||
},
|
||||
{
|
||||
format: "cjs",
|
||||
dir: "build/cjs",
|
||||
entryFileNames: "[name].js",
|
||||
chunkFileNames: "[name]-chunk.js",
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
})
|
||||
Reference in New Issue
Block a user