refactor: isolate all components into separate packages

packages/components/banner/README.md

@@ -0,0 +1 @@
+# Banner

packages/components/banner/babel.config.js

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

packages/components/banner/jest.config.ts

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

packages/components/banner/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@rck/banner",
+  "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/banner#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.*\"",
+    "test:snapshot:update": "jest --testPathPattern=\".snapshot.*\" -u"
+  },
+  "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": {
+    "@rck/container": "^1.0.0",
+    "@rck/overlay": "^1.0.0",
+    "@rck/theme": "^1.0.0",
+    "classnames": "^2.3.2"
+  }
+}

packages/components/banner/specs/__snapshots__/index.snapshot.test.tsx.snap

@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Snapshot Banner renders correctly 1`] = `
+<div
+  className="root"
+>
+  <div
+    className="root horizontal vertical big container"
+  >
+    Banner
+  </div>
+  <img
+    className="image"
+  />
+  <div
+    className="root dark"
+  />
+</div>
+`;

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

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

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

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

packages/components/all/src/banner/index.tsx → packages/components/banner/src/index.tsx

@@ -1,9 +1,9 @@
 import React from "react";
 import styles from "./styles/index.module.scss";
 import classNames from "classnames";
-import { Container } from "../container";
+import { Container } from "@rck/container";
 import { ThemeContextProvider } from "@rck/theme";
-import { Overlay } from "../overlay";
+import { Overlay } from "@rck/overlay";
 
 export interface BannerProps extends React.HTMLAttributes<HTMLDivElement> {
   src: string;

packages/components/button/package.json

@@ -16,7 +16,8 @@
     "build": "NODE_ENV=production webpack",
     "test": "npx -y npm-run-all -s test:*",
     "test:unit": "jest --testPathPattern=\".unit.*\"",
-    "test:snapshot": "jest --testPathPattern=\".snapshot.*\""
+    "test:snapshot": "jest --testPathPattern=\".snapshot.*\"",
+    "test:snapshot:update": "jest --testPathPattern=\".snapshot.*\" -u"
   },
   "devDependencies": {
     "@rck/babel-config": "^1.0.0",
@@ -29,6 +30,7 @@
     "react": "^18.2.0"
   },
   "dependencies": {
+    "@rck/scss-utils": "^1.0.0",
     "classnames": "^2.3.2"
   }
 }

packages/components/button/specs/__snapshots__/index.snapshot.test.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Button renders correctly 1`] = `
+exports[`Snapshot Button renders correctly 1`] = `
 <button
   className="root primary"
 >

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

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

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

@@ -3,7 +3,7 @@ import { Button } from "../src/index";
 import { render, screen } from "@testing-library/react";
 import "@testing-library/jest-dom";
 
-describe("Button", () => {
+describe("Unit Button", () => {
   test("renders correctly", async () => {
     const content = "Button";
     render(<Button>{content}</Button>);

packages/components/card/README.md

@@ -0,0 +1 @@
+# Card

packages/components/card/babel.config.js

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

packages/components/card/declarations.d.ts

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

packages/components/card/index.ts

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

packages/components/card/jest.config.ts

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

packages/components/card/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@rck/card",
+  "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/card#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.*\"",
+    "test:snapshot:update": "jest --testPathPattern=\".snapshot.*\" -u"
+  },
+  "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": {
+    "@rck/theme": "^1.0.0",
+    "classnames": "^2.3.2"
+  }
+}

packages/components/card/specs/__snapshots__/index.snapshot.test.tsx.snap

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Snapshot Card renders correctly 1`] = `
+<div
+  className="root"
+>
+  Card
+</div>
+`;

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

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

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

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

packages/components/all/src/card/index.tsx → packages/components/card/src/index.tsx

@@ -1,5 +1,5 @@
 import classNames from "classnames";
-import styles from "./index.module.scss";
+import styles from "./styles/index.module.scss";
 import React from "react";
 
 export const Card = ({

packages/components/card/tsconfig.build.json

@@ -0,0 +1,7 @@
+{
+  "extends": "@rck/typescript-config/tsconfig.build.json",
+  "compilerOptions": {
+    "outDir": "./dist"
+  },
+  "include": ["./*.d.ts", "./src/**/*", "./src/index.ts*"]
+}

packages/components/card/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "extends": "@rck/typescript-config/tsconfig.json",
+  "include": ["./**/*"]
+}

packages/components/card/webpack.config.ts

@@ -0,0 +1,6 @@
+import { getWebpackConfig } from "@rck/webpack-config";
+import packageJson from "./package.json";
+
+export default getWebpackConfig({
+  cssHashSalt: packageJson.name,
+});

packages/components/chip/README.md

@@ -0,0 +1 @@
+# Chip

packages/components/chip/babel.config.js

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

packages/components/chip/declarations.d.ts

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

packages/components/chip/index.ts

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

packages/components/chip/jest.config.ts

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

packages/components/chip/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@rck/chip",
+  "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/chip#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.*\"",
+    "test:snapshot:update": "jest --testPathPattern=\".snapshot.*\" -u"
+  },
+  "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": {
+    "@rck/theme": "^1.0.0",
+    "classnames": "^2.3.2"
+  }
+}

packages/components/chip/specs/__snapshots__/index.snapshot.test.tsx.snap

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Snapshot Chip renders correctly 1`] = `
+<div
+  className="root"
+>
+  Chip
+</div>
+`;

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

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

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

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

packages/components/all/src/chip/index.tsx → packages/components/chip/src/index.tsx

@@ -1,5 +1,5 @@
 import classNames from "classnames";
-import styles from "./index.module.scss";
+import styles from "./styles/index.module.scss";
 import React from "react";
 
 export interface ChipProps extends React.HTMLAttributes<HTMLDivElement> {

packages/components/chip/tsconfig.build.json

@@ -0,0 +1,7 @@
+{
+  "extends": "@rck/typescript-config/tsconfig.build.json",
+  "compilerOptions": {
+    "outDir": "./dist"
+  },
+  "include": ["./*.d.ts", "./src/**/*", "./src/index.ts*"]
+}

packages/components/chip/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "extends": "@rck/typescript-config/tsconfig.json",
+  "include": ["./**/*"]
+}