@plusscommunities/pluss-icons 1.0.0-beta.0

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/README.md ADDED
@@ -0,0 +1,185 @@
1
+ # @plusscommunities/pluss-icons
2
+
3
+ Universal icon component for the Pluss Communities platform using FontAwesome 7.
4
+
5
+ ## Installation
6
+
7
+ ```bash
8
+ npm install @plusscommunities/pluss-icons
9
+ ```
10
+
11
+ ## Features
12
+
13
+ - ✅ FontAwesome 7 integration with kit
14
+ - ✅ Efficient icon loading using `byPrefixAndName` method
15
+ - ✅ Default to solid icons unless specified otherwise
16
+ - ✅ Support for all FontAwesome icon types (solid, regular, light, duotone, thin, brands)
17
+ - ✅ Full JSDoc documentation and type definitions
18
+ - ✅ Tree-shakeable exports
19
+ - ✅ React 16, 17, and 18 support
20
+
21
+ ## Usage
22
+
23
+ ### Basic Usage
24
+
25
+ ```jsx
26
+ import { Icon } from '@plusscommunities/pluss-icons';
27
+
28
+ // Basic usage with solid icon (default)
29
+ <Icon icon="house" />
30
+
31
+ // With custom styling
32
+ <Icon icon="user" style={{ color: 'red', fontSize: '24px' }} />
33
+
34
+ // With CSS classes
35
+ <Icon icon="star" className="large-icon" />
36
+ ```
37
+
38
+ ### Icon Types
39
+
40
+ The `Icon` component supports all FontAwesome icon types:
41
+
42
+ ```jsx
43
+ // Solid (default)
44
+ <Icon icon="house" type="solid" />
45
+ <Icon icon="house" /> // Same as above
46
+
47
+ // Regular
48
+ <Icon icon="user" type="regular" />
49
+
50
+ // Light
51
+ <Icon icon="heart" type="light" />
52
+
53
+ // Duotone
54
+ <Icon icon="star" type="duotone" />
55
+
56
+ // Thin
57
+ <Icon icon="check" type="thin" />
58
+
59
+ // Brands
60
+ <Icon icon="facebook" type="brands" />
61
+ ```
62
+
63
+ ### Animations
64
+
65
+ ```jsx
66
+ // Spinning icon
67
+ <Icon icon="spinner" spin />
68
+
69
+ // Pulsing icon
70
+ <Icon icon="heart" pulse />
71
+
72
+ // Fixed width (useful for alignment)
73
+ <Icon icon="check" fixedWidth />
74
+ ```
75
+
76
+ ### Advanced Usage
77
+
78
+ ```jsx
79
+ // Combining multiple props
80
+ <Icon
81
+ icon="user"
82
+ type="regular"
83
+ spin
84
+ fixedWidth
85
+ iconStyle={{ color: 'blue' }}
86
+ className="user-icon"
87
+ />
88
+
89
+ // Passing additional props to FontAwesomeIcon
90
+ <Icon
91
+ icon="star"
92
+ onClick={() => console.log('clicked')}
93
+ aria-label="Star icon"
94
+ />
95
+ ```
96
+
97
+ ## API Reference
98
+
99
+ ### Icon Props
100
+
101
+ | Prop | Type | Default | Description |
102
+ |------|------|---------|-------------|
103
+ | `icon` | `string` | *required* | The icon name (e.g., "house", "spinner", "user") |
104
+ | `type` | `IconType` | `'solid'` | The icon type: "solid", "regular", "light", "duotone", "thin", or "brands" |
105
+ | `pulse` | `boolean` | `false` | Whether the icon should pulse (animate) |
106
+ | `fixedWidth` | `boolean` | `false` | Whether the icon should have fixed width |
107
+ | `spin` | `boolean` | `false` | Whether the icon should spin |
108
+ | `iconStyle` | `Object` | `undefined` | Custom style for the icon (use iconStyle instead of style) |
109
+ | `className` | `string` | `undefined` | Additional CSS classes |
110
+ | `...rest` | `Object` | - | Additional props passed to FontAwesomeIcon |
111
+
112
+ ### IconType
113
+
114
+ ```typescript
115
+ type IconType = 'solid' | 'regular' | 'light' | 'duotone' | 'thin' | 'brands';
116
+ ```
117
+
118
+ ## Development
119
+
120
+ ### Building
121
+
122
+ ```bash
123
+ npm run build
124
+ ```
125
+
126
+ ### Publishing
127
+
128
+ ```bash
129
+ # Beta release
130
+ npm run betaupload:p
131
+
132
+ # Production release
133
+ npm run upload:p
134
+ ```
135
+
136
+ ## Dependencies
137
+
138
+ This package has the following dependencies:
139
+
140
+ - `@awesome.me/kit-c7f03efa74`: FontAwesome 7 kit
141
+ - `@fortawesome/fontawesome-svg-core`: FontAwesome core
142
+ - `@fortawesome/react-fontawesome`: FontAwesome React component
143
+
144
+ ## Peer Dependencies
145
+
146
+ - `react`: ^16.0.0 || ^17.0.0 || ^18.0.0
147
+ - `react-dom`: ^16.0.0 || ^17.0.0 || ^18.0.0
148
+
149
+ ## Migration Guide
150
+
151
+ ### From pluss-core-web Icon
152
+
153
+ If you were previously importing Icon from `@plusscommunities/pluss-core-web`, the API is identical:
154
+
155
+ ```jsx
156
+ // Before
157
+ import { Icon } from '@plusscommunities/pluss-core-web';
158
+
159
+ // After
160
+ import { Icon } from '@plusscommunities/pluss-icons';
161
+
162
+ // No other changes needed!
163
+ ```
164
+
165
+ Note: `@plusscommunities/pluss-core-web` continues to re-export Icon from this package for backward compatibility.
166
+
167
+ ## Troubleshooting
168
+
169
+ ### Icon Not Found
170
+
171
+ If you see a warning like `Icon "xyz" with type "solid" (prefix: fas) not found in FontAwesome kit`, it means:
172
+
173
+ 1. The icon name is incorrect
174
+ 2. The icon type is not available in your FontAwesome kit
175
+ 3. The icon doesn't exist in FontAwesome
176
+
177
+ Check the [FontAwesome icon library](https://fontawesome.com/icons) for correct icon names.
178
+
179
+ ## License
180
+
181
+ Proprietary - Pluss Communities
182
+
183
+ ## Author
184
+
185
+ Phillip Suh
package/dist/index.js ADDED
@@ -0,0 +1,138 @@
1
+ import _defineProperty from '@babel/runtime/helpers/defineProperty';
2
+ import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
3
+ import 'react';
4
+ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
5
+ import { config, library } from '@fortawesome/fontawesome-svg-core';
6
+ import * as solidIcons from '@fortawesome/pro-solid-svg-icons';
7
+ import { jsx } from 'react/jsx-runtime';
8
+
9
+ var _excluded = ["icon", "type", "pulse", "fixedWidth", "spin", "className"];
10
+ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
11
+ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
12
+
13
+ // Disable auto-adding CSS - it should be imported in the main app
14
+ config.autoAddCss = false;
15
+ var solidIconList = Object.keys(solidIcons).filter(key => key.startsWith("fa") && typeof solidIcons[key] === "object").map(key => solidIcons[key]);
16
+ library.add(...solidIconList);
17
+
18
+ /**
19
+ * @typedef {'solid' | 'regular' | 'light' | 'duotone' | 'thin' | 'brands'} IconType
20
+ * @description FontAwesome icon type/style
21
+ */
22
+
23
+ /**
24
+ * @typedef {Object} IconProps
25
+ * @property {string} icon - The icon name (e.g., "house", "spinner", "user")
26
+ * @property {IconType} [type='solid'] - The icon type: "solid", "regular", "light", "duotone", "thin", or "brands"
27
+ * @property {boolean} [pulse] - Whether the icon should pulse (animate)
28
+ * @property {boolean} [fixedWidth] - Whether the icon should have fixed width
29
+ * @property {boolean} [spin] - Whether the icon should spin
30
+ * @property {string} [className] - Additional CSS classes
31
+ * @property {Object} [rest] - Additional props passed to FontAwesomeIcon
32
+ */
33
+
34
+ /**
35
+ * Type to prefix mapping for FontAwesome
36
+ * @type {Object.<string, string>}
37
+ */
38
+ var TYPE_TO_PREFIX = {
39
+ solid: "fas",
40
+ regular: "far",
41
+ light: "fal",
42
+ duotone: "fad",
43
+ thin: "fat",
44
+ brands: "fab"
45
+ };
46
+
47
+ /**
48
+ * Mapping of custom Pluss icon names to FontAwesome icon names
49
+ * @type {Object.<string, string>}
50
+ */
51
+ var PLUSS_ICON_MAP = {
52
+ // Navigation & UI
53
+ dashboard: "house",
54
+ settings: "gear",
55
+ "triangle-exclamation": "triangle-exclamation",
56
+ "folder-image": "folder-open",
57
+ lock: "lock",
58
+ people: "users",
59
+ bolt: "bolt",
60
+ "pie-chart": "chart-pie",
61
+ stethoscope: "stethoscope",
62
+ // Features
63
+ news: "newspaper",
64
+ event: "calendar-days",
65
+ facility: "building",
66
+ maintenance: "screwdriver-wrench",
67
+ form: "file-lines",
68
+ tool: "screwdriver-wrench",
69
+ signin: "right-to-bracket",
70
+ // Common aliases
71
+ cog: "gear",
72
+ calendar: "calendar-days"
73
+ };
74
+
75
+ /**
76
+ * Universal icon component for the Pluss Communities platform.
77
+ * Uses FontAwesome Pro icons.
78
+ *
79
+ * @param {IconProps} props - The properties passed to the Icon component
80
+ * @returns {JSX.Element} The rendered icon
81
+ *
82
+ * @example
83
+ * // Basic usage with solid icon (default)
84
+ * <Icon icon="house" />
85
+ *
86
+ * @example
87
+ * // Different icon types
88
+ * <Icon icon="user" type="regular" />
89
+ * <Icon icon="facebook" type="brands" />
90
+ *
91
+ * @example
92
+ * // With animations
93
+ * <Icon icon="spinner" spin />
94
+ * <Icon icon="heart" pulse />
95
+ *
96
+ * @example
97
+ * // With custom styling
98
+ * <Icon icon="star" style={{ color: 'gold' }} className="large-icon" />
99
+ */
100
+ function Icon(_ref) {
101
+ var {
102
+ icon,
103
+ type = "solid",
104
+ pulse,
105
+ fixedWidth,
106
+ spin,
107
+ className
108
+ } = _ref,
109
+ rest = _objectWithoutProperties(_ref, _excluded);
110
+ // Return null if icon is undefined or null
111
+ if (!icon) {
112
+ return null;
113
+ }
114
+
115
+ // Convert type to prefix
116
+ var prefix = TYPE_TO_PREFIX[type] || TYPE_TO_PREFIX.solid;
117
+
118
+ // Map custom Pluss icon names to FontAwesome names
119
+ var mappedIcon = PLUSS_ICON_MAP[icon] || icon;
120
+
121
+ // Build the icon definition for FontAwesome
122
+ var iconDef = [prefix, mappedIcon];
123
+ return /*#__PURE__*/jsx(FontAwesomeIcon, _objectSpread({
124
+ icon: iconDef,
125
+ pulse: pulse,
126
+ fixedWidth: fixedWidth,
127
+ spin: spin,
128
+ className: className
129
+ }, rest));
130
+ }
131
+
132
+ var index = /*#__PURE__*/Object.freeze({
133
+ __proto__: null,
134
+ Icon: Icon
135
+ });
136
+
137
+ export { index as Components, Icon };
138
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sources":["../src/components/Icon.js"],"sourcesContent":["import React from \"react\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { library, config } from \"@fortawesome/fontawesome-svg-core\";\n\n// Disable auto-adding CSS - it should be imported in the main app\nconfig.autoAddCss = false;\n\nimport * as solidIcons from \"@fortawesome/pro-solid-svg-icons\";\n\n// Add all solid icons to the library\nconst solidIconList = Object.keys(solidIcons)\n\t.filter((key) => key.startsWith(\"fa\") && typeof solidIcons[key] === \"object\")\n\t.map((key) => solidIcons[key]);\n\nlibrary.add(...solidIconList);\n\n/**\n * @typedef {'solid' | 'regular' | 'light' | 'duotone' | 'thin' | 'brands'} IconType\n * @description FontAwesome icon type/style\n */\n\n/**\n * @typedef {Object} IconProps\n * @property {string} icon - The icon name (e.g., \"house\", \"spinner\", \"user\")\n * @property {IconType} [type='solid'] - The icon type: \"solid\", \"regular\", \"light\", \"duotone\", \"thin\", or \"brands\"\n * @property {boolean} [pulse] - Whether the icon should pulse (animate)\n * @property {boolean} [fixedWidth] - Whether the icon should have fixed width\n * @property {boolean} [spin] - Whether the icon should spin\n * @property {string} [className] - Additional CSS classes\n * @property {Object} [rest] - Additional props passed to FontAwesomeIcon\n */\n\n/**\n * Type to prefix mapping for FontAwesome\n * @type {Object.<string, string>}\n */\nconst TYPE_TO_PREFIX = {\n\tsolid: \"fas\",\n\tregular: \"far\",\n\tlight: \"fal\",\n\tduotone: \"fad\",\n\tthin: \"fat\",\n\tbrands: \"fab\",\n};\n\n/**\n * Mapping of custom Pluss icon names to FontAwesome icon names\n * @type {Object.<string, string>}\n */\nconst PLUSS_ICON_MAP = {\n\t// Navigation & UI\n\tdashboard: \"house\",\n\tsettings: \"gear\",\n\t\"triangle-exclamation\": \"triangle-exclamation\",\n\t\"folder-image\": \"folder-open\",\n\tlock: \"lock\",\n\tpeople: \"users\",\n\tbolt: \"bolt\",\n\t\"pie-chart\": \"chart-pie\",\n\tstethoscope: \"stethoscope\",\n\n\t// Features\n\tnews: \"newspaper\",\n\tevent: \"calendar-days\",\n\tfacility: \"building\",\n\tmaintenance: \"screwdriver-wrench\",\n\tform: \"file-lines\",\n\ttool: \"screwdriver-wrench\",\n\tsignin: \"right-to-bracket\",\n\n\t// Common aliases\n\tcog: \"gear\",\n\tcalendar: \"calendar-days\",\n};\n\n/**\n * Universal icon component for the Pluss Communities platform.\n * Uses FontAwesome Pro icons.\n *\n * @param {IconProps} props - The properties passed to the Icon component\n * @returns {JSX.Element} The rendered icon\n *\n * @example\n * // Basic usage with solid icon (default)\n * <Icon icon=\"house\" />\n *\n * @example\n * // Different icon types\n * <Icon icon=\"user\" type=\"regular\" />\n * <Icon icon=\"facebook\" type=\"brands\" />\n *\n * @example\n * // With animations\n * <Icon icon=\"spinner\" spin />\n * <Icon icon=\"heart\" pulse />\n *\n * @example\n * // With custom styling\n * <Icon icon=\"star\" style={{ color: 'gold' }} className=\"large-icon\" />\n */\nfunction Icon({\n\ticon,\n\ttype = \"solid\",\n\tpulse,\n\tfixedWidth,\n\tspin,\n\tclassName,\n\t...rest\n}) {\n\t// Return null if icon is undefined or null\n\tif (!icon) {\n\t\treturn null;\n\t}\n\n\t// Convert type to prefix\n\tconst prefix = TYPE_TO_PREFIX[type] || TYPE_TO_PREFIX.solid;\n\n\t// Map custom Pluss icon names to FontAwesome names\n\tconst mappedIcon = PLUSS_ICON_MAP[icon] || icon;\n\n\t// Build the icon definition for FontAwesome\n\tconst iconDef = [prefix, mappedIcon];\n\n\treturn (\n\t\t<FontAwesomeIcon\n\t\t\ticon={iconDef}\n\t\t\tpulse={pulse}\n\t\t\tfixedWidth={fixedWidth}\n\t\t\tspin={spin}\n\t\t\tclassName={className}\n\t\t\t{...rest}\n\t\t/>\n\t);\n}\n\nexport { Icon };\n"],"names":["config","autoAddCss","solidIconList","Object","keys","solidIcons","filter","key","startsWith","map","library","add","TYPE_TO_PREFIX","solid","regular","light","duotone","thin","brands","PLUSS_ICON_MAP","dashboard","settings","lock","people","bolt","stethoscope","news","event","facility","maintenance","form","tool","signin","cog","calendar","Icon","_ref","icon","type","pulse","fixedWidth","spin","className","rest","_objectWithoutProperties","_excluded","prefix","mappedIcon","iconDef","_jsx","FontAwesomeIcon","_objectSpread"],"mappings":"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"}
package/package.json ADDED
@@ -0,0 +1,42 @@
1
+ {
2
+ "name": "@plusscommunities/pluss-icons",
3
+ "version": "1.0.0-beta.0",
4
+ "description": "Universal icon component for Pluss Communities platform using FontAwesome Pro",
5
+ "main": "./dist/index.js",
6
+ "exports": {
7
+ ".": "./dist/index.js"
8
+ },
9
+ "files": [
10
+ "dist/"
11
+ ],
12
+ "scripts": {
13
+ "build": "rollup -c",
14
+ "prepublishOnly": "(cd .. && npm install) && npm run build",
15
+ "betapatch": "npm version prepatch --preid=beta",
16
+ "patch": "npm version patch",
17
+ "betaupload": "npm publish --access public --tag beta",
18
+ "betaupload:p": "npm run betapatch && npm run betaupload",
19
+ "upload": "npm publish --access public",
20
+ "upload:p": "npm run patch && npm run upload"
21
+ },
22
+ "author": "Phillip Suh",
23
+ "dependencies": {
24
+ "@babel/runtime": "^7.14.0",
25
+ "@fortawesome/fontawesome-svg-core": "^6.4.0",
26
+ "@fortawesome/pro-solid-svg-icons": "^6.4.0",
27
+ "@fortawesome/pro-regular-svg-icons": "^6.4.0",
28
+ "@fortawesome/pro-light-svg-icons": "^6.4.0",
29
+ "@fortawesome/pro-duotone-svg-icons": "^6.4.0",
30
+ "@fortawesome/react-fontawesome": "^0.2.0"
31
+ },
32
+ "peerDependencies": {
33
+ "react": "^16.0.0 || ^17.0.0 || ^18.0.0",
34
+ "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0"
35
+ },
36
+ "keywords": [
37
+ "icons",
38
+ "fontawesome",
39
+ "pluss",
40
+ "react"
41
+ ]
42
+ }