docs: Updated docs for .storybook folder (#172)

.vscode/settings.json

@@ -6,8 +6,8 @@
 
     // Formatters settings
     "editor.codeActionsOnSave": {
-        "source.fixAll": true, // Makes sure ESLint is runned on save
-        "source.sortImports": true // Let VS Code handle import sorting, it's snappier and more reliable than ESLint
+        "source.fixAll": "explicit",
+        "source.sortImports": "explicit"
     },
     "editor.formatOnSave": true,
     "[html]": {

docs/eslint/setup-monorepo.md

@@ -86,6 +86,7 @@ node_modules
 *.md
 *.yml
 *.yaml
+!.storybook
 ```
 
 ### Configure indent style

docs/eslint/setup-polyrepo.md

@@ -102,6 +102,7 @@ node_modules
 *.md
 *.yml
 *.yaml
+!.storybook
 ```
 
 ## Configure the indent style

docs/stylelint/setup-monorepo.md

@@ -108,6 +108,7 @@ Then, open the newly created file and paste the following ignore rules:
 ``` .prettierignore
 *
 !**/*.css
+!.storybook
 ```
 
 ### Configure the indent style

docs/stylelint/setup-polyrepo.md

@@ -93,6 +93,7 @@ Then, open the newly created file and paste the following ignore rules:
 ``` .prettierignore
 *
 !**/*.css
+!.storybook
 ```
 
 ## Configure indent style

docs/typescript/setup-monorepo.md

@@ -59,6 +59,16 @@ Then, open the newly created file and extend the default configuration with the
 }
 ```
 
+If your application is using [Storybook](https://storybook.js.org/), make sure to include the `.storybook` folder:
+
+```json !#3 tsconfig.json
+{
+    "extends": "@workleap/typescript-configs/monorepo-workspace.json",
+    "include": ["**/*", ".storybook/*"],
+    "exclude": ["packages", "node_modules"]
+}
+```
+
 ### Add a CLI script
 
 At times, especially when running the CI build, it's useful to lint the entire solution using a single command. To do so, add the following script to your solution's workspace `package.json` file:

docs/typescript/setup-polyrepo.md

@@ -54,6 +54,16 @@ For an applications developed with React, use the following configuration:
 }
 ```
 
+If your application is using [Storybook](https://storybook.js.org/), make sure to include the `.storybook` folder:
+
+```json !#3 tsconfig.json
+{
+    "extends": ["@workleap/typescript-configs/web-application.json"],
+    "include": ["**/*", ".storybook/*"],
+    "exclude": ["dist", "node_modules"]
+}
+```
+
 ### `library`
 
 For a library project developed with or without React, use the following configuration:
@@ -65,6 +75,16 @@ For a library project developed with or without React, use the following configu
 }
 ```
 
+If your application is using [Storybook](https://storybook.js.org/), make sure to include the `.storybook` folder:
+
+```json !#3 tsconfig.json
+{
+    "extends": ["@workleap/typescript-configs/library.json"],
+    "include": ["**/*", ".storybook/*"],
+    "exclude": ["dist", "node_modules"]
+}
+```
+
 ## Add a CLI script
 
 At times, especially when running the CI build, it's useful to lint the entire solution using a single command. To do so, add the following script to your solution's `package.json` file:

docs/webpack/configure-build.md

@@ -426,7 +426,7 @@ const useContentHashOutputFilename: WebpackConfigTransformer = (config: WebpackC
     config.output.filename = "[name].[contenthash].bundle.js";
 
     return config;
-}:
+};
 
 export default defineBuildConfig(swcConfig, {
     transformers: [useContentHashOutputFilename]

sample/app/src/Home.tsx

@@ -1,11 +1,15 @@
 import { helloFrom } from "@sample/utils";
 import "./Home.css";
+import AddIcon from "./assets/add.svg";
 
 export function Home() {
     return (
         <div>
             <h1 className="title">Home</h1>
-            <div>{helloFrom("the homepage")}</div>
+            <p>{helloFrom("the homepage")}</p>
+            <p>
+                <span>Here's an SVG icon loaded with <code>@svgr/webpack</code>:</span><AddIcon />
+            </p>
         </div>
     );
 }

sample/app/src/types/svgr.d.ts

@@ -0,0 +1,4 @@
+declare module "*.svg" {
+    const content: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
+    export default content;
+}