Merge pull request #836 from WestpacGEL/feature/docs-update

Feature/docs update

.changeset/tricky-coins-collect.md

@@ -0,0 +1,7 @@
+---
+'protoform': minor
+'site': minor
+'@westpac/eslint-config': minor
+---
+
+eslint config separating the turbo config

.eslintrc.js

@@ -1,4 +1,4 @@
 module.exports = {
   root: true,
-  extends: ['@westpac/eslint-config'],
+  extends: ['turbo', '@westpac/eslint-config'],
 };

README.md

@@ -42,6 +42,17 @@ const config = withGEL({
 export default config;
 ```
 
+Also you have to create a `postcss.config.js` on the root of your application as follows.
+
+```js
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
+```
+
 For applications using `brand fonts` add the following options config to the `withGEL` helper.
 
 ```ts

apps/protoform/.eslintrc.js

@@ -1,4 +1,4 @@
 module.exports = {
   root: true,
-  extends: ['@westpac/eslint-config/nextjs'],
+  extends: ['turbo', '@westpac/eslint-config/nextjs'],
 };

apps/protoform/package.json

@@ -26,6 +26,7 @@
     "autoprefixer": "^10.0.1",
     "eslint": "^8.56.0",
     "eslint-config-next": "14.2.4",
+    "eslint-config-turbo": "^0.0.7",
     "postcss": "^8",
     "tailwindcss": "^3.3.0",
     "typescript": "^5"

apps/site/.eslintrc.js

@@ -1,4 +1,4 @@
 module.exports = {
   root: true,
-  extends: ['@westpac/eslint-config/nextjs'],
+  extends: ['turbo', '@westpac/eslint-config/nextjs'],
 };

apps/site/package.json

@@ -42,6 +42,7 @@
     "autoprefixer": "~10.4.14",
     "eslint": "^8.56.0",
     "eslint-config-next": "14.2.4",
+    "eslint-config-turbo": "^0.0.7",
     "postcss": "~8.4.31",
     "tailwind-variants": "~0.1.13",
     "tailwindcss": "~3.3.2",

apps/site/src/components/code/components/demos/employment/employment-usage.demo.tsx

@@ -1,4 +1,4 @@
-import { Alert, ErrorMessage, Field, Form, FormGroup, FormLabel, Input, Select, SelectProps } from '@westpac/ui';
+import { Alert, ErrorMessage, Field, FormGroup, FormLabel, Input, Select, SelectProps } from '@westpac/ui';
 import { Fragment, HTMLAttributes, useState } from 'react';
 
 import { EmploymentSelect, IndustrySelect } from './employment.demo';

apps/site/src/components/component-blocks/foundation-blocks.tsx

@@ -2,7 +2,6 @@ import { Image } from '@/components/document-renderer';
 
 import { Colors } from './colors/colors.component';
 import { colors } from './colors/colors.preview';
-import { AccessibilityDemo } from './components/accessibility-demo';
 import { accessibilityDemo } from './components/accessibility-demo/accessibility-demo.preview';
 import { designSystemBodyImage } from './components/design-system-body-image';
 import { LinkList } from './components/link-list';

apps/site/src/content/design-system/development/get-started/design/installation/content.mdoc

@@ -43,6 +43,19 @@ export default config;
 `} />
 ```
 
+Also you have to create a `postcss.config.js` on the root of your application as follows.
+
+```html
+<StaticCode language="js" code={`
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
+`} />
+```
+
 For applications using `brand fonts` add the following options config to the `withGEL` helper.
 
 ```html

apps/site/src/content/design-system/development/get-started/design/pre-requisites/content.mdoc

@@ -1,5 +1,5 @@
 All GEL components have a couple of peer dependencies so please ensure the following are installed:
 
 ```html
-<StaticCode language="js" code={`npm i react@^18.2.0\nnpm i -D tailwindcss postcss autoprefixer`} />
+<StaticCode language="js" code={`npm i react@^18.2.0\nnpm i -D tailwindcss@~3.3.2 postcss autoprefixer`} />
 ```

helpers/create-package/.template-ts/.eslintrc.cjs

@@ -1,4 +1,4 @@
 module.exports = {
   root: true,
-  extends: ['@westpac/eslint-config'],
+  extends: ['turbo', '@westpac/eslint-config'],
 };

package.json

@@ -30,6 +30,7 @@
     "@changesets/cli": "^2.25.2",
     "@westpac/eslint-config": "workspace:~",
     "@westpac/ts-config": "workspace:~",
+    "eslint-config-turbo": "^0.0.7",
     "husky": "^8.0.3",
     "prettier": "^3.2.5",
     "shx": "^0.3.4",

packages/eslint-config/index.js

@@ -8,7 +8,7 @@ module.exports = {
     jest: true,
   },
   parserOptions: { ecmaVersion: 9, sourceType: 'module' },
-  extends: ['turbo', 'eslint:recommended', 'plugin:prettier/recommended', 'plugin:tailwindcss/recommended'],
+  extends: ['eslint:recommended', 'plugin:prettier/recommended', 'plugin:tailwindcss/recommended'],
   plugins: ['import', 'prettier'],
   ignorePatterns: ['node_modules/*', 'dist/*'],
   rules: {