Merge branch 'release/1.4.0'

.eslintrc.json

@@ -7,7 +7,8 @@
         "eslint:recommended",
         "plugin:react/recommended",
         "plugin:@typescript-eslint/recommended",
-        "prettier"
+        "prettier",
+        "plugin:storybook/recommended"
     ],
     "overrides": [],
     "parser": "@typescript-eslint/parser",

.storybook/main.ts

@@ -0,0 +1,19 @@
+import type { StorybookConfig } from '@storybook/react-vite'
+
+const config: StorybookConfig = {
+    stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+    addons: [
+        '@storybook/addon-links',
+        '@storybook/addon-essentials',
+        '@storybook/addon-onboarding',
+        '@storybook/addon-interactions',
+    ],
+    framework: {
+        name: '@storybook/react-vite',
+        options: {},
+    },
+    docs: {
+        autodocs: true,
+    },
+}
+export default config

.storybook/manager.js → .storybook/manager.ts

@@ -1,6 +1,4 @@
-// .storybook/manager.js
-
-import { addons } from '@storybook/addons'
+import { addons } from '@storybook/manager-api'
 import brincaTheme from './BrincaTheme'
 
 addons.setConfig({

.storybook/preview.ts

@@ -0,0 +1,25 @@
+import type { Preview } from '@storybook/react'
+import brincaTheme from './BrincaTheme'
+import '../src/styles/index.css'
+
+const preview: Preview = {
+    parameters: {
+        options: {
+            storySort: {
+                order: ['Pages', ['Home', 'Single'], 'Components'],
+            },
+        },
+        docs: {
+            theme: brincaTheme,
+        },
+        actions: { argTypesRegex: '^on[A-Z].*' },
+        controls: {
+            matchers: {
+                color: /(background|color)$/i,
+                date: /Date$/,
+            },
+        },
+    },
+}
+
+export default preview

README.md

@@ -17,24 +17,28 @@ The library is built with:
 -   [Cypress](https://www.cypress.io)
 -   [Esbuild](https://esbuild.github.io)
 
+## Pre-requisite
+
+Install [pnpm](https://pnpm.io/)
+
 ## Get Started
 
 Install all the dependencies
 
 ```shell
-yarn install
+pnpm install
 ```
 
 Start the project
 
 ```shell
-yarn dev
+pnpm dev
 ```
 
 Build
 
 ```shell
-yarn build
+pnpm build
 ```
 
 ## Deployment
@@ -46,7 +50,7 @@ This project uses Github Actions to deploy the [NPM Package](https://www.npmjs.c
 1. Install the package using the following command:
 
     ```shell
-    yarn add @marceloglacial/brinca-ui
+    pnpm add @marceloglacial/brinca-ui
     ```
 
 1. Import the css file using:

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@marceloglacial/brinca-ui",
-    "version": "1.3.0",
+    "version": "1.4.0",
     "author": "Marcelo Glacial",
     "main": "dist/cjs/index.js",
     "module": "dist/esm/index.js",
@@ -14,8 +14,8 @@
         "build:esm": "tsc",
         "build:cjs": "tsc --module commonjs --outDir dist/cjs",
         "build:esbuild": "node esbuild.js && tsc --emitDeclarationOnly --outDir dist/esm && tsc --emitDeclarationOnly --outDir dist/cjs",
-        "storybook": "start-storybook -p 6006",
-        "build-storybook": "build-storybook",
+        "storybook": "storybook dev -p 6006",
+        "build-storybook": "storybook build",
         "format": "prettier -w src",
         "lint": "eslint --fix src/**/*.ts*",
         "husky-actions": "npm run format && npm run lint",
@@ -40,7 +40,6 @@
         "@types/react-dom": "^18.0.10",
         "autoprefixer": "^10.4.13",
         "eslint-config-prettier": "^8.6.0",
-        "eslint-plugin-prettier": "^4.2.1",
         "eslint-plugin-react": "^7.31.11",
         "postcss": "^8.4.20",
         "react": "^18.2.0",
@@ -54,19 +53,19 @@
     },
     "devDependencies": {
         "@babel/core": "^7.20.7",
-        "@storybook/addon-actions": "^6.5.15",
-        "@storybook/addon-essentials": "^6.5.15",
-        "@storybook/addon-interactions": "^6.5.15",
-        "@storybook/addon-links": "^6.5.15",
-        "@storybook/addon-postcss": "^2.0.0",
-        "@storybook/addons": "^6.5.15",
-        "@storybook/builder-webpack4": "^6.5.15",
-        "@storybook/manager-webpack4": "^6.5.15",
-        "@storybook/react": "^6.5.15",
-        "@storybook/testing-library": "^0.0.13",
-        "@storybook/theming": "^6.5.15",
+        "@storybook/addon-essentials": "^7.4.6",
+        "@storybook/addon-interactions": "^7.4.6",
+        "@storybook/addon-links": "^7.4.6",
+        "@storybook/addon-onboarding": "^1.0.8",
+        "@storybook/blocks": "^7.4.6",
+        "@storybook/manager-api": "^7.4.6",
+        "@storybook/react": "^7.4.6",
+        "@storybook/react-vite": "^7.4.6",
+        "@storybook/testing-library": "^0.2.2",
+        "@storybook/theming": "^7.4.6",
         "@typescript-eslint/eslint-plugin": "^5.48.0",
         "@typescript-eslint/parser": "^5.48.0",
+        "add": "^2.0.6",
         "babel-loader": "^9.1.0",
         "concurrently": "^7.6.0",
         "cypress": "^12.3.0",
@@ -75,7 +74,10 @@
         "eslint-config-standard-with-typescript": "^26.0.0",
         "eslint-plugin-import": "^2.25.2",
         "eslint-plugin-n": "^15.6.0",
+        "eslint-plugin-prettier": "^5.0.0",
         "eslint-plugin-promise": "^6.0.0",
-        "husky": "^8.0.3"
+        "eslint-plugin-storybook": "^0.6.14",
+        "husky": "^8.0.3",
+        "storybook": "^7.4.6"
     }
 }