Rebuild from the ground-up. This changes everything!!!

The previous bundler cli `microbundle` had a lot of issues with generating typescript definitions and wasn't flexible for me to modify its behavior.
After loads of inconsistencies and mess I had to rewrite the core library to make use of rollup directly.
This has made bundling the library much more solid and consistent than before. A lot has changed, I had to touch every single file but somehow keep the same APIs for each components.
This lays a much more solid foundation for future version of Camara

.storybook/main.js

@@ -1,10 +1,4 @@
 module.exports = {
-  "stories": [
-    "../src/**/*.stories.mdx",
-    "../src/**/*.stories.@(js|jsx|ts|tsx)"
-  ],
-  "addons": [
-    "@storybook/addon-links",
-    "@storybook/addon-essentials"
-  ]
-}
+  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
+};

CHANGELOG.md

@@ -1,12 +1,18 @@
-# v1.0.0 (Tue Feb 02 2021)
+# Changelog
 
+`Camara` strictly follows [semantic versioning](https://semver.org/)
 
+## v1.0.0-beta.5 (Tue Feb 02, 2021)
 
----
+- 🔼 minor version bump
+- ❌ remove GitHub actions workflow file
+- ❓ still debugging declaration file issue
 
-# Changelog
+### Authors: 1
 
-`Camara` strictly follows [semantic versioning](https://semver.org/)
+- ᑭᖇᗴᔕᕼ ᗝᑎƳᗴᗴ ([@Preshonyee](https://github.com/Preshonyee))
+
+---
 
 ## v1.0.0-beta.4 (Tue Feb 02, 2021)
 

README.md

@@ -10,22 +10,25 @@
 npm install --save camara
 ```
 
+```bash
+yarn add camara
+```
+
 ## Usage
 
 ```tsx
-import React from 'react'
-
-import Button from 'camara'
-import 'camara/dist/index.css'
+import React from 'react';
+import { Button } from 'camara';
 
 const App = () => {
-    return (
-      <div>
-        <Button>Camara</Button>
-      </div>
-    )
-  }
-}
+  return (
+    <div>
+      <Button>Camara</Button>
+    </div>
+  );
+};
+
+export default App;
 ```
 
 ## License

jest.config.js

@@ -0,0 +1,16 @@
+module.exports = {
+  roots: ["src"],
+  setupFilesAfterEnv: ["./jest.setup.ts"],
+  moduleFileExtensions: ["ts", "tsx", "js"],
+  testPathIgnorePatterns: ["node_modules/"],
+  transform: {
+    "^.+\\.tsx?$": "ts-jest"
+  },
+  testMatch: ["**/*.test.(ts|tsx)"],
+  moduleNameMapper: {
+    // Mocks out all these file formats when tests are run.
+    "\\.(jpg|ico|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":
+      "identity-obj-proxy",
+    "\\.(css|less|scss|sass)$": "identity-obj-proxy"
+  }
+};

jest.setup.ts

@@ -0,0 +1 @@
+import "@testing-library/jest-dom";

package.json

@@ -1,66 +1,65 @@
 {
   "name": "camara",
-  "version": "1.0.0-beta.4",
-  "description": "a design system that helps you build your ideas quickly",
+  "version": "1.0.0-beta.5",
+  "main": "build/index.js",
+  "module": "build/index.esm.js",
+  "files": [
+    "build"
+  ],
+  "types": "build/index.d.ts",
+  "description": "A design system that helps you build your ideas quickly",
   "author": {
     "name": "Presh Onyee",
     "email": "[email protected]"
   },
   "license": "MIT",
   "repository": "Camaradotspace/camara-react",
-  "main": "dist/index.js",
-  "module": "dist/index.modern.js",
-  "esmodule": "dist/index.modern.js",
-  "exports": {
-    ".": "./dist/index.modern.js"
-  },
-  "source": "src/index.ts",
-  "types": "dist/index.d.ts",
-  "engines": {
-    "node": ">=10"
+  "keywords": [
+    "React",
+    "Component",
+    "Library",
+    "Typescript",
+    "Storybook"
+  ],
+  "bugs": {
+    "url": "https://github.com/Camaradotspace/camara-react/issues"
   },
+  "homepage": "https://github.com/Camaradotspace/camara-react#readme",
   "scripts": {
-    "build": "microbundle-crl --no-css-modules --no-compress --format modern,cjs",
-    "start": "microbundle-crl --no-css-modules watch --no-compress --format modern,cjs",
-    "prepare": "run-s build",
-    "test": "run-s test:unit test:lint test:build",
-    "test:build": "run-s build",
-    "test:lint": "eslint .",
-    "test:unit": "cross-env CI=1 react-scripts test --env=jsdom",
-    "test:watch": "react-scripts test --env=jsdom",
-    "predeploy": "cd example && yarn install && yarn run build",
-    "deploy": "gh-pages -d example/build",
+    "build": "rollup -c",
+    "test": "jest",
+    "test:watch": "jest --watch",
     "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook",
-    "build-docs": "build-storybook --docs",
-    "generate": "node utils/create-component",
-    "release": "yarn build && auto shipit --base-branch=master"
+    "storybook:export": "build-storybook",
+    "generate": "node ./util/create-component",
+    "prepublishOnly": "npm run build",
+    "gh-release": "npm run build && auto release"
   },
   "peerDependencies": {
-    "react": "^16.13.1"
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0",
+    "styled-components": "^5.1.1"
   },
   "devDependencies": {
     "@babel/core": "^7.11.4",
     "@babel/eslint-parser": "^7.12.1",
     "@babel/eslint-plugin": "^7.12.1",
+    "@rollup/plugin-commonjs": "^17.1.0",
+    "@rollup/plugin-node-resolve": "^11.1.1",
     "@storybook/addon-actions": "^6.0.27",
     "@storybook/addon-essentials": "^6.0.27",
     "@storybook/addon-links": "^6.0.27",
-    "@storybook/react": "^6.0.27",
-    "@testing-library/jest-dom": "^5.10.1",
-    "@testing-library/react": "^11.0.4",
-    "@testing-library/user-event": "^12.1.6",
-    "@types/jest": "^26.0.14",
-    "@types/node": "^14.11.2",
-    "@types/react": "^17.0.0",
+    "@storybook/react": "^6.1.16",
+    "@testing-library/jest-dom": "^5.5.0",
+    "@testing-library/react": "^11.2.5",
+    "@types/jest": "^26.0.20",
+    "@types/react": "^17.0.1",
     "@types/react-dom": "^17.0.0",
-    "@types/styled-components": "^5.1.4",
-    "@typescript-eslint/eslint-plugin": "^4.2.0",
-    "@typescript-eslint/parser": "^4.2.0",
+    "@types/styled-components": "^5.1.0",
     "auto": "^10.13.2",
-    "babel-loader": "8.1.0",
-    "cross-env": "^7.0.2",
-    "eslint": "7.18.0",
+    "babel-loader": "^8.1.0",
+    "babel-preset-react-app": "^10.0.0",
+    "eslint": "7.19.0",
     "eslint-config-airbnb": "^18.2.0",
     "eslint-config-prettier": "^7.2.0",
     "eslint-config-standard": "^16.0.2",
@@ -73,23 +72,22 @@
     "eslint-plugin-react": "^7.21.2",
     "eslint-plugin-react-hooks": "^4.1.2",
     "eslint-plugin-standard": "^5.0.0",
-    "gh-pages": "^3.0.0",
-    "microbundle-crl": "^0.13.10",
-    "npm-run-all": "^4.1.5",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^26.6.3",
+    "node-sass": "^5.0.0",
+    "polished": "^4.1.0",
     "prettier": "^2.1.2",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
-    "react-is": "^17.0.1",
-    "react-scripts": "^4.0.1",
-    "styled-components": "^5.2.1",
-    "typescript": "^4.0.3"
+    "rollup": "^2.38.4",
+    "rollup-plugin-copy": "^3.3.0",
+    "rollup-plugin-peer-deps-external": "^2.2.0",
+    "rollup-plugin-postcss": "^4.0.0",
+    "rollup-plugin-typescript2": "^0.29.0",
+    "sass-loader": "^10.1.1",
+    "styled-components": "^5.1.1",
+    "ts-jest": "^26.5.0",
+    "typescript": "^4.1.3"
   },
-  "files": [
-    "dist"
-  ],
-  "dependencies": {
-    "@types/styled-components": "^5.1.4",
-    "polished": "^4.1.0",
-    "styled-components": "^5.2.1"
-  }
+  "dependencies": {}
 }

rollup.config.js

@@ -0,0 +1,28 @@
+import peerDepsExternal from "rollup-plugin-peer-deps-external";
+import resolve from "@rollup/plugin-node-resolve";
+import commonjs from "@rollup/plugin-commonjs";
+import typescript from "rollup-plugin-typescript2";
+
+const packageJson = require("./package.json");
+
+export default {
+  input: "src/index.ts",
+  output: [
+    {
+      file: packageJson.main,
+      format: "cjs",
+      sourcemap: true
+    },
+    {
+      file: packageJson.module,
+      format: "esm",
+      sourcemap: true
+    }
+  ],
+  plugins: [
+    peerDepsExternal(),
+    resolve(),
+    commonjs(),
+    typescript({ useTsconfigDeclarationDir: true })
+  ]
+};

src/TestComponent/TestComponent.stories.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+import TestComponent from "./TestComponent";
+
+export default {
+  title: "TestComponent"
+};
+
+export const Primary = () => <TestComponent theme="primary" />;
+
+export const Secondary = () => <TestComponent theme="secondary" />;

src/TestComponent/TestComponent.test.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import { render } from "@testing-library/react";
+
+import TestComponent from "./TestComponent";
+import { TestComponentProps } from "./TestComponent.types";
+
+describe("Test Component", () => {
+  let props: TestComponentProps;
+
+  beforeEach(() => {
+    props = {
+      theme: "primary"
+    };
+  });
+
+  const renderComponent = () => render(<TestComponent {...props} />);
+
+  it("should have primary className with default props", () => {
+    const { getByTestId } = renderComponent();
+
+    const testComponent = getByTestId("test-component");
+
+    expect(testComponent).toHaveClass("test-component-primary");
+  });
+
+  it("should have secondary className with theme set as secondary", () => {
+    props.theme = "secondary";
+    const { getByTestId } = renderComponent();
+
+    const testComponent = getByTestId("test-component");
+
+    expect(testComponent).toHaveClass("test-component-secondary");
+  });
+});

src/TestComponent/TestComponent.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { TestComponentProps } from './TestComponent.types';
+
+const StyledDiv = styled.div`
+  background-color: white;
+  border: 1px solid black;
+  padding: 16px;
+  width: 360px;
+  text-align: center;
+
+  ${(props) =>
+    props.theme === 'secondary' &&
+    `background-color: black;
+     color: white;`}
+`;
+
+const StyledHeading = styled.h1`
+  font-size: 32px;
+`;
+
+const StyledDescription = styled.h2``;
+
+const TestComponent: React.FC<TestComponentProps> = ({ theme }) => (
+  <StyledDiv data-testid='test-component' theme={theme}>
+    <StyledHeading className='heading'>I'm the test component</StyledHeading>
+    <StyledDescription>Smile</StyledDescription>
+  </StyledDiv>
+);
+
+export default TestComponent;

src/TestComponent/TestComponent.types.ts

@@ -0,0 +1,3 @@
+export interface TestComponentProps {
+  theme: "primary" | "secondary";
+}