feat: add alert component

Author: abelflopes

docs/ROADMAP.md

@@ -8,7 +8,7 @@ This roadmap is our plan for building a complete front-end framework. Each item
 
 [ ] **Tabs:** Sections to organize our site, like folders.
 
-[ ] **Alert:** A notice to tell users important things.
+[x] **Alert:** A notice to tell users important things.
 
 [x] **Accordion:** A way to hide or show parts of the page.
 

package-lock.json

@@ -0,0 +1,31 @@
+# RCK | React Alert Component
+
+> :warning: **WARNING**: This component library is being updated frequently and it's currently unstable due to being in it's early stages, we advice you to use only in production environments only after version **2.0.0**.
+
+
+The Alert component is a crucial tool in React applications, offering developers a dynamic and adaptable solution for effectively communicating important messages to users. Crafted with flexibility in mind, this component empowers developers to create visually appealing and user-friendly alerts that seamlessly blend into the overall design of their applications.
+
+### Installation 
+
+To integrate the this component into your React apps, you can install it using npm or yarn: `npm i --save @react-ck/alert` or `yarn add @react-ck/alert`.
+
+You will also need to set up the manager, install it using npm or yarn: `npm i --save @react-ck/manager` or `yarn add @react-ck/manager`.
+
+Wrap your app root with the theme provider and use this component:
+
+```tsx
+import { Manager } from "@react-ck/manager";
+import { Alert } from "@react-ck/alert";
+
+const myApp = () => (
+    <Manager>
+        <Alert ... />
+    </Manager>
+);
+```
+
+<!-- storybook-ignore -->
+
+---
+
+Check the documentation website - [react-ck.js.org](https://react-ck.js.org).

packages/components/alert/README.md

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

packages/components/alert/babel.config.js

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

packages/components/alert/declarations.d.ts

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

packages/components/alert/index.ts

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

packages/components/alert/jest.config.ts

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

packages/components/alert/package.json

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

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

@@ -0,0 +1,13 @@
+import React from "react";
+import { Alert } from "../src/index";
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom";
+
+describe("Unit Alert", () => {
+  test("renders correctly", async () => {
+    const content = "Alert";
+    render(<Alert>{content}</Alert>);
+    const find = await screen.findByText(content);
+    expect(find).toBeInTheDocument();
+  });
+});