Merge pull request #10 from code4rena-dev/leo95oliveira/bundle-fix

Library Bundling Fix

Author: leo95oliveira

.DS_Store

@@ -0,0 +1,85 @@
+[![Jest](https://github.com/code4rena-dev/components-library/actions/workflows/test-runner.yml/badge.svg)](https://github.com/code4rena-dev/components-library/actions/workflows/test-runner.yml)
+
+# Code4rena Components Library
+---
+
+## Using Components in your project
+
+### 1. Installing the library
+Start by installing the components library in your project:
+
+```
+npm install @code4rena/components-library
+```
+
+### 2. Component Styling
+Next, to ensure that all the components have the appropriate styling, **import the library's styles** into your application. This can be done in one of two ways:
+
+1. If you have a global CSS/SCSS file, you can import the custom styles using the CSS import rule into that global file.
+```
+@import "@code4rena/components-library/styles"
+```
+2. Another option is to import it in any layout/page/component which wraps your entire web application; in doing so, you make sure the styling bubbles down to all pages of the application using the library's components.
+```
+import "@code4rena/components-library/styles";
+```
+
+### 3. Importing Components
+All the components in this package can be accessed through named imports. For a full list of available components, take a look at our [Storybook](https://components-library-wine.vercel.app)
+
+```
+import { Alert } from "@code4rena/components-library";
+
+<Alert {...args} />
+```
+
+### 4. Typescript Support
+All components in this library have TypeScript support. Types for all complex component props are also named exports available through the `/types` subdirectory (see example below):
+```
+import { ButtonSize, ButtonType, ButtonVariant } from "@code4rena/componenets-library/types";
+
+<Button
+    label="Sample Button"
+    type={ButtonType.BUTTON}
+    variant={ButtonVariant.SECONDARY}
+    size={ButtonSize.NARROW}
+/>
+```
+
+## Run Storybook
+Storybook will run on [http://localhost:6006](http://localhost:6006)
+
+```
+npm run storybook
+```
+OR
+```
+yarn storybook
+```
+
+### Storybook Actions
+If you want to make use of [Storybook actions](https://storybook.js.org/docs/angular/essentials/actions) for a specific component, please refer to the `Input.stories.tsx` file. The recommendation is to pass the event handler function directly to the Story component as opposed to passing it through _ComponentName.args_. Passing the event handler function through the **args** parameter may not log the event in the `Actions` tab of the Story's dashboard.
+
+## Testing
+For testing, we are using [Jest](https://jestjs.io/docs/getting-started) and [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/).
+
+To maintain the standards, test files should be named `componentName.test.tsx` and be placed inside the component folder for which the test relates to.
+
+To run tests you can use the command below (please ensure all tests are passing before creating your PRs)
+```
+npm test
+```
+OR
+```
+yarn test
+```
+
+## Publishing to NPM
+
+A GitHub Action has been developed to help automate package releases. All that you will need to do is:
+
+1. Make sure to increase the `version` field in the **package.json**
+2. On the GitHub repo's home page, navigate to the righthand side and click on **Create a new release**
+3. Give the release a `title` and `description` outlining the changes made in the release
+4. Choose/Create a **tag** corresponding to the new version that was added in the package.json in **step 1**
+5. Once the details are filled out, submit the release. You will get taken to a confirmation page. This process will automatically trigger the GitHub action that will publish the package to npm. 

.github/README.md

@@ -24,7 +24,9 @@ jobs:
       - uses: actions/setup-node@v3
         with:
           node-version: "18"
-          registry-url: https://npm.pkg.github.com/
+          registry-url: "https://registry.npmjs.org"
       - run: npm ci
       - run: npm run build
       - run: npm publish --access public
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

.github/workflows/release-package.yml

@@ -1,53 +1,47 @@
 [![Jest](https://github.com/code4rena-dev/components-library/actions/workflows/test-runner.yml/badge.svg)](https://github.com/code4rena-dev/components-library/actions/workflows/test-runner.yml)
 
 # Code4rena Components Library
+---
 
 ## Using Components in your project
 
+### 1. Installing the library
 Start by installing the components library in your project:
 
 ```
 npm install @code4rena/components-library
 ```
 
-Next, to ensure that all the components have the appropriate styling, import the library's css file in your application's wrapping Layout or in any page/component wrapping your application where you would normally import global styling.
+### 2. Component Styling
+Next, to ensure that all the components have the appropriate styling, **import the library's styles** into your application. This can be done in one of two ways:
+
+1. If you have a global CSS/SCSS file, you can import the custom styles using the CSS import rule into that global file.
+```
+@import "@code4rena/components-library/styles"
 ```
-import "@code4rena/components-library/dist/style.css";
+2. Another option is to import it in any layout/page/component which wraps your entire web application; in doing so, you make sure the styling bubbles down to all pages of the application using the library's components.
+```
+import "@code4rena/components-library/styles";
 ```
 
-All the components in this package can be accessed through named imports. For a full list of available components, take a look at our [Storybook](components-library-wine.vercel.app)
+### 3. Importing Components
+All the components in this package can be accessed through named imports. For a full list of available components, take a look at our [Storybook](https://components-library-wine.vercel.app)
 
 ```
 import { Alert } from "@code4rena/components-library";
 
 <Alert {...args} />
 ```
 
-## Run Storybook
-Storybook will run on [http://localhost:6006](http://localhost:6006)
-
-```
-npm run storybook
-```
-OR
-```
-yarn storybook
+### 4. Typescript Support
+All components in this library have TypeScript support. Types for all complex component props are also named exports available through the `/types` subdirectory (see example below):
 ```
+import { ButtonSize, ButtonType, ButtonVariant } from "@code4rena/componenets-library/types";
 
-### Storybook Actions
-If you want to make use of [Storybook actions](https://storybook.js.org/docs/angular/essentials/actions) for a specific component, please refer to the `Button.stories.tsx` file. The recommendation is to pass the event handler function directly to the Story component as opposed to passing it through _ComponentName.args_. Passing the event handler function through the **args** parameter may not log the event in the `Actions` tab of the Story's dashboard.
-
-## Testing
-For testing, we are using [Jest](https://jestjs.io/docs/getting-started) and [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/).
-
-To maintain the standards, test files should be named `componentName.test.tsx` and be placed inside the component folder for which the test relates to.
-
-## Publishing to NPM
-
-A GitHub Action has been developed to help automate package releases. All that you will need to do is:
-
-1. Make sure to increase the `version` field in the **package.json**
-2. On the GitHub repo's home page, navigate to the righthand side and click on **Create a new release**
-3. Give the release a `title` and `description` outlining the changes made in the release
-4. Choose/Create a **tag** corresponding to the new version that was added in the package.json in **step 1**
-5. Once the details are filled out, submit the release. You will get taken to a confirmation page. This process will automatically trigger the GitHub action that will publish the package to npm. 
+<Button
+    label="Sample Button"
+    type={ButtonType.BUTTON}
+    variant={ButtonVariant.SECONDARY}
+    size={ButtonSize.NARROW}
+/>
+```

.npmrc

@@ -1,12 +1,22 @@
 {
   "name": "@code4rena/components-library",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Code4rena's official components library ",
-  "main": "dist/components-library.umd.js",
-  "module": "dist/components-library.mjs",
-  "types": "dist/index.d.ts",
+  "types": "./dist/lib.d.ts",
+  "exports": {
+    ".": "./dist/lib.mjs",
+    "./types": "./dist/types.mjs",
+    "./styles": "./dist/style.css"
+  },
+  "typesVersions": {
+    "*": {
+      "types": [
+        "./dist/types.d.ts"
+      ]
+    }
+  },
   "files": [
-    "dist"
+    "/dist"
   ],
   "scripts": {
     "build": "vite build && tsc",
@@ -67,14 +77,11 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
-  "publishConfig": {
-    "@code4rena:registry": "https://npm.pkg.github.com"
-  },
   "babel": {
     "presets": [
       "@babel/preset-env",
       "@babel/preset-typescript",
       "@babel/preset-react"
     ]
   }
-}
+}

README.md

@@ -1,3 +1,3 @@
 import "./styles/base/typography.scss";
 
-export * from "./lib";
+export * from "./lib/index";

package.json

@@ -0,0 +1,10 @@
+export * from "./Alert/Alert.types";
+export * from "./Button/Button.types";
+export * from "./Card/Card.types";
+export * from "./ContestStatus/ContestStatus.types";
+export * from "./ContestTile/ContestTile.types";
+export * from "./Dropdown/Dropdown.types";
+export * from "./EyebrowBar/EyebrowBar.types";
+export * from "./Input/Input.types";
+export * from "./NavBar/NavBar.types";
+export * from "./Tag/Tag.types";

src/index.ts renamed to src/lib.ts

@@ -0,0 +1 @@
+export * from "./lib/types";

src/lib/types.ts

@@ -6,12 +6,13 @@ export default defineConfig ({
     build: {
         // Tells Vite we're building library code as opposed to application code
         lib: {
-            entry: resolve(__dirname, "src/index.ts"),
+            entry: {
+                lib: resolve(__dirname, "src/lib.ts"),
+                types: resolve(__dirname, "src/types.ts")
+            },
             // Component library name
             name: "components-library",
             formats: ["es"],
-            // Output file name
-            filename: "index",
         },
         plugins: [dts({ rollupTypes: true })],
         rollupOptions: {