@sproutsocial/seeds-react-avatar 1.0.0 → 1.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.eslintrc.js +5 -1
- package/.turbo/turbo-build.log +19 -19
- package/CHANGELOG.md +22 -0
- package/dist/esm/index.js +3 -4
- package/dist/esm/index.js.map +1 -1
- package/dist/index.js +6 -7
- package/dist/index.js.map +1 -1
- package/package.json +11 -9
- package/src/Avatar.tsx +1 -1
- package/tsconfig.eslint.json +5 -0
- package/tsconfig.json +7 -1
package/.eslintrc.js
CHANGED
|
@@ -1,4 +1,8 @@
|
|
|
1
1
|
module.exports = {
|
|
2
2
|
root: true,
|
|
3
|
-
extends: ["eslint-config-seeds/
|
|
3
|
+
extends: ["eslint-config-seeds/react"],
|
|
4
|
+
parserOptions: {
|
|
5
|
+
tsconfigRootDir: __dirname,
|
|
6
|
+
project: "./tsconfig.eslint.json", // Use ESLint-specific config that includes story files
|
|
7
|
+
},
|
|
4
8
|
};
|
package/.turbo/turbo-build.log
CHANGED
|
@@ -1,21 +1,21 @@
|
|
|
1
1
|
yarn run v1.22.22
|
|
2
2
|
$ tsup --dts
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
Done in
|
|
3
|
+
[34mCLI[39m Building entry: src/index.ts
|
|
4
|
+
[34mCLI[39m Using tsconfig: tsconfig.json
|
|
5
|
+
[34mCLI[39m tsup v8.5.0
|
|
6
|
+
[34mCLI[39m Using tsup config: /home/runner/work/seeds/seeds/seeds-react/seeds-react-avatar/tsup.config.ts
|
|
7
|
+
[34mCLI[39m Target: es2022
|
|
8
|
+
[34mCLI[39m Cleaning output folder
|
|
9
|
+
[34mCJS[39m Build start
|
|
10
|
+
[34mESM[39m Build start
|
|
11
|
+
[32mCJS[39m [1mdist/index.js [22m[32m5.62 KB[39m
|
|
12
|
+
[32mCJS[39m [1mdist/index.js.map [22m[32m7.04 KB[39m
|
|
13
|
+
[32mCJS[39m ⚡️ Build success in 184ms
|
|
14
|
+
[32mESM[39m [1mdist/esm/index.js [22m[32m3.51 KB[39m
|
|
15
|
+
[32mESM[39m [1mdist/esm/index.js.map [22m[32m6.94 KB[39m
|
|
16
|
+
[32mESM[39m ⚡️ Build success in 186ms
|
|
17
|
+
[34mDTS[39m Build start
|
|
18
|
+
[32mDTS[39m ⚡️ Build success in 28814ms
|
|
19
|
+
[32mDTS[39m [1mdist/index.d.ts [22m[32m1.53 KB[39m
|
|
20
|
+
[32mDTS[39m [1mdist/index.d.mts [22m[32m1.53 KB[39m
|
|
21
|
+
Done in 35.35s.
|
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,27 @@
|
|
|
1
1
|
# @sproutsocial/seeds-react-avatar
|
|
2
2
|
|
|
3
|
+
## 1.0.2
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Updated dependencies [22e1111]
|
|
8
|
+
- @sproutsocial/seeds-react-text@1.3.2
|
|
9
|
+
- @sproutsocial/seeds-react-theme@3.0.1
|
|
10
|
+
- @sproutsocial/seeds-react-box@1.1.3
|
|
11
|
+
- @sproutsocial/seeds-react-image@1.0.2
|
|
12
|
+
|
|
13
|
+
## 1.0.1
|
|
14
|
+
|
|
15
|
+
### Patch Changes
|
|
16
|
+
|
|
17
|
+
- 9fd8bac: Update dependencies to use semantic package version instead of wildcards
|
|
18
|
+
- Updated dependencies [9fd8bac]
|
|
19
|
+
- @sproutsocial/seeds-react-system-props@3.0.2
|
|
20
|
+
- @sproutsocial/seeds-react-image@1.0.1
|
|
21
|
+
- @sproutsocial/seeds-react-theme@2.2.1
|
|
22
|
+
- @sproutsocial/seeds-react-text@1.3.1
|
|
23
|
+
- @sproutsocial/seeds-react-box@1.1.2
|
|
24
|
+
|
|
3
25
|
## 1.0.0
|
|
4
26
|
|
|
5
27
|
### Major Changes
|
package/dist/esm/index.js
CHANGED
|
@@ -22,8 +22,7 @@ var Container = styled(Box)`
|
|
|
22
22
|
${BORDER}
|
|
23
23
|
`;
|
|
24
24
|
var getInitials = (name, fallback = "?") => {
|
|
25
|
-
if (!name || typeof name !== "string")
|
|
26
|
-
return fallback;
|
|
25
|
+
if (!name || typeof name !== "string") return fallback;
|
|
27
26
|
return name.replace(/\s+/, " ").split(" ").slice(0, 2).map((v) => v && v[0]?.toUpperCase()).join("");
|
|
28
27
|
};
|
|
29
28
|
var getAvatarColor = (name, type) => {
|
|
@@ -123,10 +122,10 @@ var AvatarColorOptions = {
|
|
|
123
122
|
};
|
|
124
123
|
|
|
125
124
|
// src/index.ts
|
|
126
|
-
var
|
|
125
|
+
var index_default = Avatar_default;
|
|
127
126
|
export {
|
|
128
127
|
Avatar_default as Avatar,
|
|
129
128
|
AvatarColorOptions,
|
|
130
|
-
|
|
129
|
+
index_default as default
|
|
131
130
|
};
|
|
132
131
|
//# sourceMappingURL=index.js.map
|
package/dist/esm/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Avatar.tsx","../../src/constants.ts","../../src/index.ts"],"sourcesContent":["import { useState, useCallback, useMemo, memo, useEffect } from \"react\";\nimport styled, { css } from \"styled-components\";\n\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport Image from \"@sproutsocial/seeds-react-image\";\nimport Text from \"@sproutsocial/seeds-react-text\";\nimport type {\n TypeAvatarProps,\n TypeAvatarContainerProps,\n TypeAvatarType,\n} from \"./AvatarTypes\";\n\nimport { BORDER } from \"@sproutsocial/seeds-react-system-props\";\n\nconst defaultType = \"neutral\";\n\
|
|
1
|
+
{"version":3,"sources":["../../src/Avatar.tsx","../../src/constants.ts","../../src/index.ts"],"sourcesContent":["import { useState, useCallback, useMemo, memo, useEffect } from \"react\";\nimport styled, { css } from \"styled-components\";\n\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport Image from \"@sproutsocial/seeds-react-image\";\nimport Text from \"@sproutsocial/seeds-react-text\";\nimport type {\n TypeAvatarProps,\n TypeAvatarContainerProps,\n TypeAvatarType,\n} from \"./AvatarTypes\";\n\nimport { BORDER } from \"@sproutsocial/seeds-react-system-props\";\n\nconst defaultType = \"neutral\";\n\nconst AvatarText = styled(({ fontSize, ...rest }) => <Text {...rest} />)`\n font-size: ${(props) => props.fontSize}px;\n color: ${({ theme, type, color }) =>\n color ? color : theme.colors.text.decorative[type]};\n`;\n\nconst Container = styled(Box)<TypeAvatarContainerProps>`\n ${({ theme, $type, bg, borderColor, $displayFallback }) => css`\n background: ${$displayFallback\n ? bg\n ? bg\n : theme.colors.container.background.decorative[$type]\n : \"none\"};\n border: ${$displayFallback ? `1px solid` : \"none\"};\n border-color: ${borderColor\n ? borderColor\n : theme.colors.container.border.decorative[$type]};\n color: ${theme.colors.text.decorative[$type]};\n `}\n\n ${BORDER}\n`;\n\nconst getInitials = (name: string, fallback = \"?\"): string => {\n if (!name || typeof name !== \"string\") return fallback;\n return name\n .replace(/\\s+/, \" \")\n .split(\" \") // Repeated spaces results in empty strings\n .slice(0, 2)\n .map((v) => v && v[0]?.toUpperCase()) // Watch out for empty strings\n .join(\"\");\n};\n\nexport const getAvatarColor = (\n name: string,\n type: TypeAvatarType\n): TypeAvatarType => {\n if (type !== \"auto\") {\n return type;\n }\n\n const colors: Array<TypeAvatarType> = [\n \"purple\",\n \"green\",\n \"blue\",\n \"yellow\",\n \"red\",\n \"orange\",\n ];\n\n // Condense the avatar name down into a number\n const seed = name.split(\"\").reduce((seed, char) => {\n return seed + char.charCodeAt(0);\n }, 0);\n\n // Use that seed modulo the number of available colors to generate\n // a \"random\" color value which will always be consistent\n // for a given string. As a failsafe, return neutral (this should never happen).\n return colors[seed % colors.length] || \"neutral\";\n};\n\nexport const Avatar = ({\n appearance = \"circle\",\n name = \"\",\n src,\n type = defaultType,\n size = \"40px\",\n bg,\n color,\n initials,\n ...rest\n}: TypeAvatarProps) => {\n const colorType = getAvatarColor(name, type);\n const [imageFailedLoading, setImageFailedLoading] = useState(false);\n\n useEffect(() => {\n // If the src changes, we need to invalidate the image failed to load flag\n setImageFailedLoading(false);\n }, [src]);\n\n const displayInitials = useMemo(\n () => initials || getInitials(name),\n [initials, name]\n );\n const handleError = useCallback(() => {\n setImageFailedLoading(true);\n }, [setImageFailedLoading]);\n\n // Font size for initials is half the size of the avatar, rounded down.\n const fontSize = Math.floor(Number(size.replace(\"px\", \"\")) * 0.4);\n\n return (\n <Container\n size={size}\n overflow=\"hidden\"\n borderRadius={appearance === \"leaf\" ? \"40% 0 40% 0\" : \"50%\"}\n position=\"relative\"\n display=\"flex\"\n flexShrink={0}\n justifyContent=\"center\"\n alignItems=\"center\"\n title={name}\n bg={bg}\n $type={colorType}\n data-qa-user-avatar={name}\n $displayFallback={!src || imageFailedLoading}\n {...rest}\n >\n {!src || imageFailedLoading ? (\n <AvatarText\n lineHeight={size}\n fontWeight=\"semibold\"\n fontSize={fontSize}\n type={colorType}\n color={color}\n >\n {displayInitials}\n </AvatarText>\n ) : (\n <Image\n alt={name}\n width=\"auto\"\n height=\"100%\"\n src={src}\n onError={handleError}\n m={0}\n />\n )}\n </Container>\n );\n};\n\nexport default memo(Avatar);\n","export const AvatarColorOptions = {\n auto: \"auto\",\n neutral: \"neutral\",\n purple: \"purple\",\n green: \"green\",\n blue: \"blue\",\n yellow: \"yellow\",\n red: \"red\",\n orange: \"orange\",\n} as const;\n","import Avatar from \"./Avatar\";\n\nexport default Avatar;\nexport { Avatar };\nexport * from \"./AvatarTypes\";\nexport { AvatarColorOptions } from \"./constants\";\n"],"mappings":"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","names":["seed"]}
|
package/dist/index.js
CHANGED
|
@@ -28,13 +28,13 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
|
|
|
28
28
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
29
|
|
|
30
30
|
// src/index.ts
|
|
31
|
-
var
|
|
32
|
-
__export(
|
|
31
|
+
var index_exports = {};
|
|
32
|
+
__export(index_exports, {
|
|
33
33
|
Avatar: () => Avatar_default,
|
|
34
34
|
AvatarColorOptions: () => AvatarColorOptions,
|
|
35
|
-
default: () =>
|
|
35
|
+
default: () => index_default
|
|
36
36
|
});
|
|
37
|
-
module.exports = __toCommonJS(
|
|
37
|
+
module.exports = __toCommonJS(index_exports);
|
|
38
38
|
|
|
39
39
|
// src/Avatar.tsx
|
|
40
40
|
var import_react = require("react");
|
|
@@ -60,8 +60,7 @@ var Container = (0, import_styled_components.default)(import_seeds_react_box.def
|
|
|
60
60
|
${import_seeds_react_system_props.BORDER}
|
|
61
61
|
`;
|
|
62
62
|
var getInitials = (name, fallback = "?") => {
|
|
63
|
-
if (!name || typeof name !== "string")
|
|
64
|
-
return fallback;
|
|
63
|
+
if (!name || typeof name !== "string") return fallback;
|
|
65
64
|
return name.replace(/\s+/, " ").split(" ").slice(0, 2).map((v) => v && v[0]?.toUpperCase()).join("");
|
|
66
65
|
};
|
|
67
66
|
var getAvatarColor = (name, type) => {
|
|
@@ -161,7 +160,7 @@ var AvatarColorOptions = {
|
|
|
161
160
|
};
|
|
162
161
|
|
|
163
162
|
// src/index.ts
|
|
164
|
-
var
|
|
163
|
+
var index_default = Avatar_default;
|
|
165
164
|
// Annotate the CommonJS export names for ESM import in node:
|
|
166
165
|
0 && (module.exports = {
|
|
167
166
|
Avatar,
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts","../src/Avatar.tsx","../src/constants.ts"],"sourcesContent":["import Avatar from \"./Avatar\";\n\nexport default Avatar;\nexport { Avatar };\nexport * from \"./AvatarTypes\";\nexport { AvatarColorOptions } from \"./constants\";\n","import { useState, useCallback, useMemo, memo, useEffect } from \"react\";\nimport styled, { css } from \"styled-components\";\n\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport Image from \"@sproutsocial/seeds-react-image\";\nimport Text from \"@sproutsocial/seeds-react-text\";\nimport type {\n TypeAvatarProps,\n TypeAvatarContainerProps,\n TypeAvatarType,\n} from \"./AvatarTypes\";\n\nimport { BORDER } from \"@sproutsocial/seeds-react-system-props\";\n\nconst defaultType = \"neutral\";\n\
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/Avatar.tsx","../src/constants.ts"],"sourcesContent":["import Avatar from \"./Avatar\";\n\nexport default Avatar;\nexport { Avatar };\nexport * from \"./AvatarTypes\";\nexport { AvatarColorOptions } from \"./constants\";\n","import { useState, useCallback, useMemo, memo, useEffect } from \"react\";\nimport styled, { css } from \"styled-components\";\n\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport Image from \"@sproutsocial/seeds-react-image\";\nimport Text from \"@sproutsocial/seeds-react-text\";\nimport type {\n TypeAvatarProps,\n TypeAvatarContainerProps,\n TypeAvatarType,\n} from \"./AvatarTypes\";\n\nimport { BORDER } from \"@sproutsocial/seeds-react-system-props\";\n\nconst defaultType = \"neutral\";\n\nconst AvatarText = styled(({ fontSize, ...rest }) => <Text {...rest} />)`\n font-size: ${(props) => props.fontSize}px;\n color: ${({ theme, type, color }) =>\n color ? color : theme.colors.text.decorative[type]};\n`;\n\nconst Container = styled(Box)<TypeAvatarContainerProps>`\n ${({ theme, $type, bg, borderColor, $displayFallback }) => css`\n background: ${$displayFallback\n ? bg\n ? bg\n : theme.colors.container.background.decorative[$type]\n : \"none\"};\n border: ${$displayFallback ? `1px solid` : \"none\"};\n border-color: ${borderColor\n ? borderColor\n : theme.colors.container.border.decorative[$type]};\n color: ${theme.colors.text.decorative[$type]};\n `}\n\n ${BORDER}\n`;\n\nconst getInitials = (name: string, fallback = \"?\"): string => {\n if (!name || typeof name !== \"string\") return fallback;\n return name\n .replace(/\\s+/, \" \")\n .split(\" \") // Repeated spaces results in empty strings\n .slice(0, 2)\n .map((v) => v && v[0]?.toUpperCase()) // Watch out for empty strings\n .join(\"\");\n};\n\nexport const getAvatarColor = (\n name: string,\n type: TypeAvatarType\n): TypeAvatarType => {\n if (type !== \"auto\") {\n return type;\n }\n\n const colors: Array<TypeAvatarType> = [\n \"purple\",\n \"green\",\n \"blue\",\n \"yellow\",\n \"red\",\n \"orange\",\n ];\n\n // Condense the avatar name down into a number\n const seed = name.split(\"\").reduce((seed, char) => {\n return seed + char.charCodeAt(0);\n }, 0);\n\n // Use that seed modulo the number of available colors to generate\n // a \"random\" color value which will always be consistent\n // for a given string. As a failsafe, return neutral (this should never happen).\n return colors[seed % colors.length] || \"neutral\";\n};\n\nexport const Avatar = ({\n appearance = \"circle\",\n name = \"\",\n src,\n type = defaultType,\n size = \"40px\",\n bg,\n color,\n initials,\n ...rest\n}: TypeAvatarProps) => {\n const colorType = getAvatarColor(name, type);\n const [imageFailedLoading, setImageFailedLoading] = useState(false);\n\n useEffect(() => {\n // If the src changes, we need to invalidate the image failed to load flag\n setImageFailedLoading(false);\n }, [src]);\n\n const displayInitials = useMemo(\n () => initials || getInitials(name),\n [initials, name]\n );\n const handleError = useCallback(() => {\n setImageFailedLoading(true);\n }, [setImageFailedLoading]);\n\n // Font size for initials is half the size of the avatar, rounded down.\n const fontSize = Math.floor(Number(size.replace(\"px\", \"\")) * 0.4);\n\n return (\n <Container\n size={size}\n overflow=\"hidden\"\n borderRadius={appearance === \"leaf\" ? \"40% 0 40% 0\" : \"50%\"}\n position=\"relative\"\n display=\"flex\"\n flexShrink={0}\n justifyContent=\"center\"\n alignItems=\"center\"\n title={name}\n bg={bg}\n $type={colorType}\n data-qa-user-avatar={name}\n $displayFallback={!src || imageFailedLoading}\n {...rest}\n >\n {!src || imageFailedLoading ? (\n <AvatarText\n lineHeight={size}\n fontWeight=\"semibold\"\n fontSize={fontSize}\n type={colorType}\n color={color}\n >\n {displayInitials}\n </AvatarText>\n ) : (\n <Image\n alt={name}\n width=\"auto\"\n height=\"100%\"\n src={src}\n onError={handleError}\n m={0}\n />\n )}\n </Container>\n );\n};\n\nexport default memo(Avatar);\n","export const AvatarColorOptions = {\n auto: \"auto\",\n neutral: \"neutral\",\n purple: \"purple\",\n green: \"green\",\n blue: \"blue\",\n yellow: \"yellow\",\n red: \"red\",\n orange: \"orange\",\n} as const;\n"],"mappings":"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","names":["styled","Text","Box","seed","Image"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sproutsocial/seeds-react-avatar",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.2",
|
|
4
4
|
"description": "Seeds React Avatar",
|
|
5
5
|
"author": "Sprout Social, Inc.",
|
|
6
6
|
"license": "MIT",
|
|
@@ -15,22 +15,24 @@
|
|
|
15
15
|
"clean:modules": "rm -rf node_modules",
|
|
16
16
|
"typecheck": "tsc --noEmit",
|
|
17
17
|
"test": "jest",
|
|
18
|
-
"test:watch": "jest --watch --coverage=false"
|
|
18
|
+
"test:watch": "jest --watch --coverage=false",
|
|
19
|
+
"lint": "eslint . --ext .ts,.tsx",
|
|
20
|
+
"lint:fix": "eslint --fix"
|
|
19
21
|
},
|
|
20
22
|
"dependencies": {
|
|
21
|
-
"@sproutsocial/seeds-react-theme": "
|
|
22
|
-
"@sproutsocial/seeds-react-system-props": "
|
|
23
|
-
"@sproutsocial/seeds-react-box": "
|
|
24
|
-
"@sproutsocial/seeds-react-image": "
|
|
25
|
-
"@sproutsocial/seeds-react-text": "
|
|
23
|
+
"@sproutsocial/seeds-react-theme": "^3.0.1",
|
|
24
|
+
"@sproutsocial/seeds-react-system-props": "^3.0.1",
|
|
25
|
+
"@sproutsocial/seeds-react-box": "^1.1.3",
|
|
26
|
+
"@sproutsocial/seeds-react-image": "^1.0.2",
|
|
27
|
+
"@sproutsocial/seeds-react-text": "^1.3.2"
|
|
26
28
|
},
|
|
27
29
|
"devDependencies": {
|
|
28
30
|
"@types/react": "^18.0.0",
|
|
29
31
|
"@types/styled-components": "^5.1.26",
|
|
30
|
-
"
|
|
32
|
+
"eslint-config-seeds": "*",
|
|
31
33
|
"react": "^18.0.0",
|
|
32
34
|
"styled-components": "^5.2.3",
|
|
33
|
-
"tsup": "^8.
|
|
35
|
+
"tsup": "^8.3.4",
|
|
34
36
|
"typescript": "^5.6.2",
|
|
35
37
|
"@sproutsocial/seeds-tsconfig": "*",
|
|
36
38
|
"@sproutsocial/seeds-testing": "*",
|
package/src/Avatar.tsx
CHANGED
|
@@ -14,7 +14,6 @@ import { BORDER } from "@sproutsocial/seeds-react-system-props";
|
|
|
14
14
|
|
|
15
15
|
const defaultType = "neutral";
|
|
16
16
|
|
|
17
|
-
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
18
17
|
const AvatarText = styled(({ fontSize, ...rest }) => <Text {...rest} />)`
|
|
19
18
|
font-size: ${(props) => props.fontSize}px;
|
|
20
19
|
color: ${({ theme, type, color }) =>
|
|
@@ -146,4 +145,5 @@ export const Avatar = ({
|
|
|
146
145
|
</Container>
|
|
147
146
|
);
|
|
148
147
|
};
|
|
148
|
+
|
|
149
149
|
export default memo(Avatar);
|