Merge pull request #5 from code4rena-dev/develop

Preparing library for npm

Author: leo95oliveira

._.DS_Store

@@ -0,0 +1,30 @@
+
+name: NPM Package Release
+on:
+  release:
+    types: [created]
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: "18"
+      - run: npm ci
+      - run: npm test
+  publish-pkg:
+    needs: build
+    runs-on: ubuntu-latest
+    permissions:
+      packages: write
+      contents: read
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: "18"
+          registry-url: https://npm.pkg.github.com/
+      - run: npm ci
+      - run: npm run build
+      - run: npm publish --access public

.babelrc.json

@@ -1,10 +1,11 @@
 dist
 node_modules
+*DS_Store
 
 # Jest test results directory
 coverage
 # Storybook build directory
 storybook-static
 # Prefer npm to yarn
 yarn.lock
-yarn-error.log
+yarn-error.log

.github/workflows/release-package.yml

@@ -0,0 +1,8 @@
+src
+.babelrc.json
+.gitignore
+vercel.jsontsconfig.json
+jest.config.ts
+.storybook
+.github
+*DS_Store

.gitignore

@@ -0,0 +1 @@
+@code4rena:registry=https://npm.pkg.github.com

.npmignore

@@ -0,0 +1,2 @@
+<link rel="shortcut icon" href="/favicon.ico">
+<link rel="icon" type="image/png" href="/logos/apple-touch-icon.png" sizes="192x192">

.npmrc

@@ -1,6 +1,6 @@
 import React from "react";
 import type { Preview } from "@storybook/react";
-import "../src/styles/_global.scss";
+import "../src/styles/base/typography.scss";
 
 const wrapperStyle = {
   display: "flex",

.storybook/manager-header.html

@@ -2,6 +2,27 @@
 
 # Code4rena Components Library
 
+## Using Components in your project
+
+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.
+```
+import "@code4rena/components-library/dist/style.css";
+```
+
+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)
+
+```
+import { Alert } from "@code4rena/components-library";
+
+<Alert {...args} />
+```
+
 ## Run Storybook
 Storybook will run on [http://localhost:6006](http://localhost:6006)
 
@@ -21,5 +42,12 @@ For testing, we are using [Jest](https://jestjs.io/docs/getting-started) and [Re
 
 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. 

.storybook/preview.tsx

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