ar/2024/2nd (#4)

* ar(feat) 2024 2nd semester rebase.

* ar(feat) 2024 2nd semester rebase.

* ar(feat) 2024 2nd semester rebase.

* ar(feat) 2024 2nd semester rebase.

* ar(feat) 2024 2nd semester rebase.

* ar(feat) 2024 2nd semester rebase.

* ar(feat) 2024 2nd semester rebase.

* ar(feat) 2024 2nd semester rebase.

* ar(feat) 2024 2nd semester rebase.

* ar(feat) 2024 2nd semester rebase.

* ar(feat) 2024 2nd semester rebase.

* ar(feat) 2024 2nd semester rebase.

* ar(feat) 2024 2nd semester rebase.

* ar(feat) 2024 2nd semester rebase.

* ar(feat) 2024 2nd semester rebase.

* ar(feat) 2024 2nd semester rebase.

.eslintrc

@@ -22,6 +22,7 @@
       "jsx": true
     }
   },
+  "ignorePatterns": ["*.config.ts"],
   "extends": [
     "eslint:recommended",
     "plugin:react/recommended",
@@ -41,6 +42,11 @@
     "import/no-extraneous-dependencies": "off",
     "import/no-unresolved": "off",
     "import/extensions": "off",
+    "indent": "off",
+    "implicit-arrow-linebreak": "off",
+    "operator-linebreak": "off",
+    "react/jsx-props-no-spreading": "off",
+    "func-names": off,
     "react/jsx-filename-extension": [1,
         {
           "extensions": [

.gitignore

@@ -128,3 +128,10 @@ dist
 .yarn/build-state.yml
 .yarn/install-state.gz
 .pnp.*
+
+#storybook build directory
+storybook-static
+
+*storybook.log
+
+.DS_Store

.ignoreicons

@@ -0,0 +1,141 @@
+// .ignoreicons
+src/atoms/05_SystemIcon/assets/components/
+
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+.pnpm-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional stylelint cache
+.stylelintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variable files
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# vuepress v2.x temp and cache directory
+.temp
+.cache
+
+# Docusaurus cache and generated files
+.docusaurus
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*
+
+#storybook build directory
+storybook-static
+
+*storybook.log
+
+.DS_Store

.storybook/preview.tsx

@@ -4,8 +4,10 @@ import { Global } from '@emotion/react';
 import { CssBaseline, ThemeProvider } from '@mui/material';
 import { withThemeByClassName } from '@storybook/addon-themes';
 import { lightTheme, darkTheme } from '../src/styles/themes';
-import 'tailwindcss/tailwind.css';
 import { StyledEngineProvider } from '@mui/material/styles';
+import { Globals } from '../src/atoms/00_Globals';
+import { Grid } from '../src/atoms/10_Grid';
+import '../src/input.css';
 
 export const decorators = [
   withThemeByClassName({
@@ -17,18 +19,32 @@ export const decorators = [
   }),
   (Story) => (
     <body
-      className="bg-inverse-light dark:bg-inverse-dark"
+      className="bg-inverse-light dark:bg-inverse-dark overflow-scroll"
       style={{
         display: 'flex',
         justifyContent: 'center',
         alignItems: 'center',
-        height: 'calc(100vh - 32px)',
-        margin: '0',
+        minHeight: 'calc(100vh - 32px)',
         padding: '0',
+        overflow: 'scroll',
+        position: 'relative',
       }}
     >
-      {/* 👇 Decorators in Storybook also accept a function. Replace <Story/> with Story() to enable it  */}
-      <Story />
+      <div
+        style={{
+          minWidth: '180px',
+          width: '100%',
+        }}
+      >
+        <Globals>
+          {/* 👇 Decorators in Storybook also accept a function. Replace <Story/> with Story() to enable it  */}
+          <Grid full>
+            <div className="col-span-full col-start-0 md:col-span-full md:col-start-0">
+              <Story />
+            </div>
+          </Grid>
+        </Globals>
+      </div>
     </body>
   ),
 ];

_eslint.config.js.next

@@ -0,0 +1,68 @@
+// not ready: updating to new ESLint syntax, depending on AirBnb and Ally supporting flat config.
+import globals from "globals";
+import js from "@eslint/js";
+import esLintParser from "@typescript-eslint/parser";
+import tsEsLintPlugin from "@typescript-eslint/eslint-plugin";
+import allyPlugin from "eslint-plugin-jsx-a11y";
+import reactPlugin from "eslint-plugin-react";
+import prettierConfig from "eslint-config-prettier";
+import airBnbConfig from "eslint-config-airbnb";
+
+export default [
+  js.configs.recommended,
+  prettierConfig,
+  airBnbConfig,
+  {
+      "languageOptions": {
+        "ecmaVersion": 2022,
+        "sourceType": "module",
+        "globals": {
+          ...globals.browser
+        },
+         "parser": esLintParser,
+         parserOptions: {
+            ecmaFeatures: {
+                jsx: true
+            }
+        }
+      },
+      "plugins": {
+        "@typescript-eslint": tsEsLintPlugin, 
+        "react": reactPlugin,
+        "ally": allyPlugin,
+      },
+      "settings": {
+        "react": {
+          "version": "detect"
+        },
+        "import/resolver": {
+          "node": {
+            "extensions": [".js", ".jsx", ".ts", ".tsx"],
+            "moduleDirectory": ["node_modules", "src/"]
+          }
+      },
+      "rules": {
+        "react/jsx-uses-react": "error",
+        "react/jsx-uses-vars": "error",
+        "react/require-default-props": "off",
+        "react/react-in-jsx-scope": "off",
+        "import/no-extraneous-dependencies": "off",
+        "import/no-unresolved": "off",
+        "import/extensions": "off",
+        "indent": "off",
+        "implicit-arrow-linebreak": "off",
+        "operator-linebreak": "off",
+        "react/jsx-props-no-spreading": "off",
+        "func-names": "off",
+        "react/jsx-filename-extension": [1,
+            {
+              "extensions": [
+                ".tsx"
+              ]
+            }
+        ],
+        "react/function-component-definition": [2, { "namedComponents": "function-expression" }]
+      },
+    }
+  }
+]