(BA-1077) baseapp modularization

Author: anicioalexandre

.changeset/config.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://unpkg.com/@changesets/config@2.0.0/schema.json",
   "changelog": "@changesets/cli/changelog",
-  "commit": true,
+  "commit": false,
   "fixed": [],
   "linked": [],
   "access": "restricted",

README.md

@@ -40,10 +40,15 @@ export default function Docs() {
 
 ## Apps and Packages
 
-- `docs`: a app to document some packages's features
-- `core`: core of utilities like `auth hooks`, `permisisons system` and `util functions`
-- `config`: reusable configurations for `eslint`, `prettier` and `jest`
-- `tsconfig`: reusable typescript configs
+- `docs`: an app to document some packages's features
+- `authentication`: includes authentication modules such as `login`, `signup`, `reset password`, `multifactor authentication` and more.
+- `core`: core of utilities like `auth hooks`, `permisisons system` and `util functions`.
+- `config`: includes reusable configurations for `eslint`, `prettier` and `jest`.
+- `design-system-mui`: defines our `design system configuration `(e.g. color pallete, typography, spacings, etc). It also shares reusable `components` that make up the design system as a whole.
+- `provider`: includes provider of different kinds that have "use client" directive on top.
+- `test`: extends `React Testing Library` features and export some util functions, mocks and test configurations.
+- `tsconfig`: reusable `typescript configs`.
+- `utils`: includes `constants`, `functions`, `hooks` and `types` that are generic enough to be reused between apps and packages.
 
 ## NVM
 

apps/docs/package.json

@@ -14,11 +14,11 @@
     "@emotion/react": "^11.10.0",
     "@emotion/styled": "^11.10.0",
     "@mui/material": "^5.10.0",
+    "@tanstack/react-query": "^4.29.12",
     "axios-mock-adapter": "^1.20.0",
     "next": "^12.2.4",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-query": "^3.34.8"
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
     "@baseapp-frontend/config": "*",

apps/docs/pages/_app.tsx

@@ -1,4 +1,4 @@
-import { QueryClient, QueryClientProvider } from 'react-query'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 
 export default function MyApp({ Component, pageProps }: { Component: any; pageProps: object }) {
   const client = new QueryClient()

apps/docs/pages/components/index.tsx

@@ -1,11 +1,13 @@
+import { useState } from 'react'
+
 import {
   ButtonWithLoading,
-  PasswordField,
-  ImageUploader,
   CheckboxField,
+  ImageUploader,
+  PasswordField,
 } from '@baseapp-frontend/design-system-mui'
+
 import { Divider, useTheme } from '@mui/material'
-import { useState } from 'react'
 
 export default function Docs() {
   const [images, setImages] = useState([])
@@ -21,7 +23,7 @@ export default function Docs() {
           button
         </ButtonWithLoading>
 
-        <ButtonWithLoading variant="contained" loading>
+        <ButtonWithLoading variant="contained" isLoading>
           button
         </ButtonWithLoading>
       </div>

apps/storybook-app/components/Button/stories.tsx

@@ -1,9 +1,7 @@
 import type { StorybookConfig } from '@storybook/nextjs'
 
 const config: StorybookConfig = {
-  stories: [
-    '../components/**/stories.@(js|jsx|ts|tsx)',
-  ],
+  stories: ['../components/**/stories.@(js|jsx|ts|tsx)'],
   addons: [
     '@storybook/addon-links',
     '@storybook/addon-essentials',

apps/storybook-app/components/Checkbox/index.tsx

@@ -0,0 +1,50 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Button } from '.'
+
+const meta: Meta<typeof Button> = {
+  title: 'Button',
+  component: Button,
+}
+export default meta
+
+type Story = StoryObj<typeof Button>
+
+export const ButtonPrimary: Story = {
+  args: {
+    children: 'My button',
+    variant: 'contained',
+  },
+}
+
+export const ButtonSecondary: Story = {
+  args: {
+    children: 'My button',
+    variant: 'contained',
+    color: 'secondary',
+  },
+}
+
+export const ButtonFullwidth: Story = {
+  args: {
+    children: 'My button',
+    fullWidth: true,
+    variant: 'outlined',
+  },
+}
+
+export const ButtonDisabled: Story = {
+  args: {
+    children: 'My button',
+    variant: 'contained',
+    disabled: true,
+  },
+}
+
+export const ButtonLoading: Story = {
+  args: {
+    children: 'My button',
+    loading: true,
+    variant: 'outlined',
+  },
+}

apps/storybook-app/.eslintrc.js apps/storybook/.eslintrc.js

@@ -0,0 +1,3 @@
+import { CheckboxField, ICheckboxFieldProps } from '@baseapp-frontend/design-system-mui'
+
+export const Checkbox = ({ ...props }: ICheckboxFieldProps) => <CheckboxField {...props} />

apps/storybook-app/.prettierrc.js apps/storybook/.prettierrc.js

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react'
-import { Password } from '.'
 
+import { Password } from '.'
 
 const meta: Meta<typeof Password> = {
   title: 'Password',

apps/storybook-app/.storybook/main.ts apps/storybook/.storybook/main.ts

@@ -1,5 +1,5 @@
 {
-  "name": "storybook-app",
+  "name": "storybook",
   "version": "1.0.0",
   "main": "index.js",
   "license": "MIT",

apps/storybook-app/.storybook/preview.ts apps/storybook/.storybook/preview.ts

@@ -1,5 +1,6 @@
 {
   "name": "baseapp-frontend",
+  "description": "A modularized package system for TSL's frontend baseapp.",
   "version": "0.0.0",
   "private": true,
   "workspaces": [
@@ -21,11 +22,10 @@
   "dependencies": {},
   "devDependencies": {
     "@changesets/cli": "^2.23.0",
-    "@trivago/prettier-plugin-sort-imports": "^4.0.0",
-    "eslint": "^8.29.0",
+    "eslint": "^8.42.0",
     "husky": "^8.0.0",
     "lint-staged": "^13.0.2",
-    "prettier": "latest",
+    "prettier": "^2.8.8",
     "turbo": "latest"
   },
   "engines": {