Document components with storybook (#23)

* Setting up story book

* start: document some components

* Organize Task component

* Update

* updated dependency tree

* feat: add stories for all components and pages

* Update GithubPagesDeploy.yml

* fix: refactor code

.eslintrc.cjs

@@ -1,65 +1,54 @@
 module.exports = {
-	env: {
-		browser: true,
-		node: true,
-		es2021: true,
-		jest: true,
-	},
-	parser: "@typescript-eslint/parser",
-	parserOptions: {
-		ecmaVersion: "latest",
-		sourceType: "module",
-		ecmaFeatures: {
-			jsx: true
-		},
-	},
-	plugins: [
-		"react",
-		"@typescript-eslint",
-		"eslint-plugin-react",
-		"styled-components-a11y",
-		"jest",
-		"jest-extended",
-	],
-	extends: [
-		"eslint:recommended",
-		"plugin:import/recommended",
-		"plugin:jsx-a11y/recommended",
-		"plugin:@typescript-eslint/recommended",
-		"react-app",
-		"plugin:react/recommended",
-		"plugin:react-hooks/recommended",
-		"plugin:styled-components-a11y/recommended",
-		"plugin:jest/recommended",
-		"plugin:jest-extended/recommended",
-	],
-	rules: {
-		"react/jsx-uses-react": "error",
-		"react/react-in-jsx-scope": "off",
-		"react/jsx-uses-vars": "error",
-		"react/prop-types": "off",
-		"jsx-a11y/label-has-associated-control": "off",
-		"jsx-a11y/label-has-for": "off",
-		"linebreak-style": ["warn", "unix"],
-		"quotes": ["warn", "double"],
-		"semi": ["warn", "always"],
-		"no-unused-vars": ["warn", { "vars": "all", "args": "after-used", "ignoreRestSiblings": false }],
-		"import/no-unresolved": ["error", { "ignore": ["^[^.]"] }],
-		"import/order": [
-			"warn", {
-				groups: ["builtin", "external", "object", "type", "internal", "parent", "sibling", "index",],
-				alphabetize: { "order": "asc", "caseInsensitive": true, },
-			},
-		]
-	},
-	settings: {
-		react: {
-			version: "detect",
-		},
-		"import/resolver": {
-			node: {
-				extensions: [".js", ".jsx", ".ts", ".tsx"]
-			}
-		}
-	}
-};
+  env: {
+    browser: true,
+    node: true,
+    es2021: true,
+    jest: true
+  },
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    ecmaVersion: "latest",
+    sourceType: "module",
+    ecmaFeatures: {
+      jsx: true
+    }
+  },
+  plugins: ["react", "@typescript-eslint", "eslint-plugin-react", "styled-components-a11y", "jest", "jest-extended"],
+  extends: ["eslint:recommended", "plugin:import/recommended", "plugin:jsx-a11y/recommended", "plugin:@typescript-eslint/recommended", "react-app", "plugin:react/recommended", "plugin:react-hooks/recommended", "plugin:styled-components-a11y/recommended", "plugin:jest/recommended", "plugin:jest-extended/recommended", "plugin:storybook/recommended"],
+  rules: {
+    "react/jsx-uses-react": "error",
+    "react/react-in-jsx-scope": "off",
+    "react/jsx-uses-vars": "error",
+    "react/prop-types": "off",
+    "jsx-a11y/label-has-associated-control": "off",
+    "jsx-a11y/label-has-for": "off",
+    "linebreak-style": ["warn", "unix"],
+    "quotes": ["warn", "double"],
+    "semi": ["warn", "always"],
+    "no-unused-vars": ["warn", {
+      "vars": "all",
+      "args": "after-used",
+      "ignoreRestSiblings": false
+    }],
+    "import/no-unresolved": ["error", {
+      "ignore": ["^[^.]"]
+    }],
+    "import/order": ["warn", {
+      groups: ["builtin", "external", "object", "type", "internal", "parent", "sibling", "index"],
+      alphabetize: {
+        "order": "asc",
+        "caseInsensitive": true
+      }
+    }]
+  },
+  settings: {
+    react: {
+      version: "detect"
+    },
+    "import/resolver": {
+      node: {
+        extensions: [".js", ".jsx", ".ts", ".tsx"]
+      }
+    }
+  }
+};

.github/workflows/GithubPagesDeploy.yml

@@ -11,7 +11,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [16.x]
+        node-version: [20.x]
 
     steps:
       - name: Checkout

.gitignore

@@ -1,4 +1,5 @@
 _ignore
+storybook-static
 
 # Logs
 logs
@@ -8,7 +9,6 @@ yarn-debug.log*
 yarn-error.log*
 lerna-debug.log*
 pnpm-debug.log*
-package-lock.json
 
 # Diagnostic reports (https://nodejs.org/api/report.html)
 report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json

.nvmrc

@@ -1 +1 @@
-16.17.1
+20

.storybook/main.ts

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

.storybook/preview.tsx

@@ -0,0 +1,29 @@
+import type { Preview } from "@storybook/react";
+import { HashRouter } from "react-router-dom";
+import { Provider } from "react-redux";
+import React from "react";
+import "../src/index.css";
+import { store } from "../src/app/store";
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <HashRouter>
+        <Provider store={store}>
+          <Story />
+        </Provider>
+      </HashRouter>
+    ),
+  ],
+};
+
+export default preview;

.vscode/settings.json

@@ -1,9 +1,8 @@
 {
   "editor.codeActionsOnSave": {
-    "source.fixAll": true,
-    "source.organizeImports": false,
-    "source.sortMembers": true,
-    "source.fixAll.eslint": true
+    "source.fixAll": "explicit",
+    "source.sortMembers": "explicit",
+    "source.fixAll.eslint": "explicit"
   },
   "eslint.validate": [
     "javascript",
@@ -54,5 +53,5 @@
   "files.insertFinalNewline": true,
   "git.autofetch": true,
   "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
-  "cSpell.words": ["reduxjs"]
+  "cSpell.words": ["reduxjs", "storysource"]
 }

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2023 Flávio Silva
+Copyright (c) 2024 Flávio Silva
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -9,11 +9,11 @@ My goal with this project is to learn how to use multiple FE technologies togeth
 - [x]  Login/sign up/guest mode system;
 - [x]  Create a new task;
 - [x]  Search the list;
-- [ ]  Remove:
+- [x]  Remove:
      - [x] Individually;
-     - [ ] All;
-     - [ ] Completed;
-     - [ ] Repeated;
+     - [X] All;
+     - [x] Completed;
+     - [x] Repeated;
 - [x] Save in local Storage;
 - [x] Favorites;
 - [x] Individual changes:
@@ -69,6 +69,14 @@ To make the app running and open a browser window just run:
 npm start
 ```
 
+### Start the Storybook
+
+Check the components documentation:
+
+```sh
+npm run storybook
+```
+
 ## Available Commands
 
 | Command            | Description                                                                     |