Merge pull request #11 from code4rena-dev/develop

leo95oliveira · web-flow · commit 0caeaca2e103 · 2023-10-19T18:30:47.000-04:00
Minor version - Bundling Changes
diff --git a/.DS_Store b/.DS_Store
diff --git a/.github/README.md b/.github/README.md
@@ -1,20 +1,30 @@
 [![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"
+```
+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/dist/style.css";
+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)
 
 ```
@@ -23,6 +33,19 @@ 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)
 
diff --git a/README.md b/README.md
@@ -1,24 +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"
+```
+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/dist/style.css";
+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}
+/>
+```
diff --git a/package.json b/package.json
@@ -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",
@@ -74,4 +84,4 @@
       "@babel/preset-react"
     ]
   }
-}
+}
diff --git a/src/lib.ts b/src/lib.ts
@@ -1,3 +1,3 @@
 import "./styles/base/typography.scss";
 
-export * from "./lib";
+export * from "./lib/index";
diff --git a/src/lib/Card/Card.scss b/src/lib/Card/Card.scss
@@ -104,6 +104,7 @@
     display: flex;
     flex-direction: column;
     margin: 0 $spacing__m;
+    flex-grow: 1;
     order: 2;
   }
 
diff --git a/src/lib/types.ts b/src/lib/types.ts
@@ -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";
diff --git a/src/types.ts b/src/types.ts
@@ -0,0 +1 @@
+export * from "./lib/types";
diff --git a/vite.config.js b/vite.config.js
@@ -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: {

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,3 @@`
`1`	`1`	`import "./styles/base/typography.scss";`
`2`	`2`
`3`		`-export * from "./lib";`
	`3`	`+export * from "./lib/index";`
Original file line number	Diff line number	Diff line change
`@@ -104,6 +104,7 @@`
`104`	`104`	`display: flex;`
`105`	`105`	`flex-direction: column;`
`106`	`106`	`margin: 0 $spacing__m;`
	`107`	`+ flex-grow: 1;`
`107`	`108`	`order: 2;`
`108`	`109`	`}`
`109`	`110`