feat: add icon component

Author: abelflopes

packages/components/icon/README.md

@@ -0,0 +1 @@
+# Icon

packages/components/icon/babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  extends: "@rck/babel-config",
+};

packages/components/icon/declarations.d.ts

@@ -0,0 +1,4 @@
+declare module "*.module.scss" {
+  const content: Record<string, string>;
+  export default content;
+}

packages/components/icon/index.ts

@@ -0,0 +1,2 @@
+// Hack for module resolution of non built packages
+export * from "./src/index";

packages/components/icon/jest.config.ts

@@ -0,0 +1 @@
+export { config as default } from "@rck/jest-config";

packages/components/icon/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@rck/icon",
+  "private": false,
+  "version": "1.0.0",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "/dist"
+  ],
+  "homepage": "https://github.com/abelflopes/rck/tree/master/packages/components/icon#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/abelflopes/rck.git"
+  },
+  "scripts": {
+    "build": "NODE_ENV=production webpack",
+    "test": "npx -y npm-run-all -s test:*",
+    "test:unit": "jest --testPathPattern=\".unit.*\"",
+    "test:snapshot": "jest --testPathPattern=\".snapshot.*\""
+  },
+  "devDependencies": {
+    "@rck/babel-config": "^1.0.0",
+    "@rck/jest-config": "^1.0.0",
+    "@rck/typescript-config": "^1.0.0",
+    "@rck/webpack-config": "^1.0.0",
+    "@types/react": "^18.2.33"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0"
+  },
+  "dependencies": {
+    "classnames": "^2.3.2",
+    "react-icons": "^4.10.1"
+  }
+}

packages/components/icon/specs/index.snapshot.test.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+import { Icon } from "../src/index";
+import renderer from "react-test-renderer";
+
+describe("Icon", () => {
+  test("renders correctly", async () => {
+    const tree = renderer.create(<Icon />).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});

packages/components/icon/specs/index.unit.test.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import { Icon } from "../src/index";
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom";
+
+describe("Icon", () => {
+  test("renders correctly", async () => {
+    render(<Icon data-testid="icon" />);
+    const find = await screen.findByTestId("icon");
+    expect(find).toBeInTheDocument();
+  });
+});

packages/components/icon/src/index.tsx

@@ -0,0 +1,37 @@
+import styles from "./styles/index.module.scss";
+/// React
+import React from "react";
+// Icons - https://react-icons.github.io/react-icons/icons?name=si
+import { type IconType } from "react-icons";
+import { BsBellFill } from "react-icons/bs";
+
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+const icons = {
+  BsBellFill,
+};
+/* eslint-enable @typescript-eslint/no-unsafe-assignment */
+export interface IconProps extends Omit<IconType, "size"> {
+  title?: string;
+  url?: string;
+  name: keyof typeof icons;
+}
+
+export const Icon = ({
+  name,
+  title,
+  url,
+  ...otherProps
+}: Readonly<IconProps>): React.ReactElement => {
+  const Icon: IconType = icons[name] as IconType;
+  const IconElement = <Icon {...otherProps} title={title} size={16} />;
+
+  const Component = url ? (
+    <a href={url} title={title} target="_blank" rel="noreferrer" className={styles.root}>
+      {IconElement}
+    </a>
+  ) : (
+    IconElement
+  );
+
+  return Component;
+};

packages/components/icon/src/styles/index.module.scss

@@ -0,0 +1,10 @@
+@import "@rck/theme";
+
+.root {
+  color: currentColor;
+
+  // Add margin for icons next to each other
+  & + & {
+    margin-left: get-spacing(1);
+  }
+}