[♻️]: Refactor to prepare for v2 (#2)

* Add workflows

* Update PR template

* Add test config

* Update COC and Contribution docs

* Update code linter and formatter

* Update tsconfigs

* Update dependencies and scripts

* Fix linter warnings

* Fix es module

* Add `--passWithNoTests` to test cmd

.eslintignore

@@ -0,0 +1,5 @@
+node_modules
+dist
+.swc
+.github
+.next

.eslintrc

@@ -32,6 +32,46 @@
     "no-console": "warn",
     "prefer-const": "error",
     "default-case": "warn",
+    "eol-last": "error",
+    "object-shorthand": "error",
+    "require-atomic-updates": "error",
+    "no-unused-private-class-members": "warn",
+    "no-promise-executor-return": "error",
+    "no-unmodified-loop-condition": "warn",
+    "eqeqeq": ["error", "smart"],
+    "no-duplicate-imports": ["error", { "includeExports": true }],
+    "@typescript-eslint/consistent-type-imports": [
+      "error",
+      { "fixStyle": "inline-type-imports" }
+    ],
+    "padding-line-between-statements": [
+      "error",
+      {
+        "blankLine": "always",
+        "prev": [
+          "const",
+          "let",
+          "var",
+          "directive",
+          "function",
+          "class",
+          "block",
+          "block-like",
+          "multiline-block-like"
+        ],
+        "next": "*"
+      },
+      {
+        "blankLine": "any",
+        "prev": ["const", "let", "var", "directive"],
+        "next": ["const", "let", "var", "directive"]
+      },
+      {
+        "blankLine": "always",
+        "prev": ["multiline-const", "multiline-let"],
+        "next": "*"
+      }
+    ],
     "react/prop-types": "off",
     "react/react-in-jsx-scope": "off",
     "@typescript-eslint/no-unused-vars": [
@@ -49,8 +89,19 @@
       ],
       "parserOptions": {
         "sourceType": "module",
-        "project": ["./tsconfig.json"]
+        "project": ["tsconfig.json"]
       }
+    },
+    {
+      "files": [
+        "**/__tests__/**/*.[jt]s?(x)",
+        "**/?(*.)+(spec|test).[jt]s?(x)"
+      ],
+      "extends": [
+        "plugin:testing-library/react",
+        "plugin:jest-dom/recommended",
+        "plugin:jest/recommended"
+      ]
     }
   ],
   "settings": { "react": { "version": "detect" } }

.github/pull_request_template.md

@@ -7,10 +7,11 @@ Choose the right checklist for the change that you're making:
 ## Bug
 
 - [ ] Related issues linked using `fixes #number`
+- [ ] Tests added/updated
 
 ## Feature
 
 - [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
 - [ ] Related issues linked using `fixes #number`
 - [ ] Documentation added
-- [ ] Make sure the linting passes by running `pnpm lint`
+- [ ] Tests added

.github/workflows/codeql-analysis.yml

@@ -0,0 +1,34 @@
+name: CodeQL
+
+on:
+  push:
+    branches:
+      - "next"
+  pull_request:
+  schedule:
+    # on sunday of each month at 5:55
+    - cron: "55 5 * * 0"
+  workflow_call:
+
+jobs:
+  analyze:
+    name: "Analyze"
+    runs-on: ubuntu-latest
+    strategy:
+      fail-fast: false
+      matrix:
+        language:
+          - javascript
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: "🎬 Initialize CodeQL"
+        uses: github/codeql-action/init@v3
+        with:
+          languages: ${{ matrix.language }}
+
+      - name: "🏗️ Autobuild"
+        uses: github/codeql-action/autobuild@v3
+
+      - name: "🧐 Perform CodeQL Analysis"
+        uses: github/codeql-action/analyze@v3

.github/workflows/development.yml

@@ -0,0 +1,58 @@
+name: Development
+
+on:
+  pull_request:
+    types:
+      - opened
+      - edited
+      - synchronize
+      - reopened
+  workflow_call:
+
+jobs:
+  test:
+    name: Test components
+    runs-on: ubuntu-latest
+    timeout-minutes: 10
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: pnpm/action-setup@v3
+        with:
+          version: 8
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: "pnpm"
+
+      - name: "📦 install dependencies"
+        run: pnpm install
+
+      - name: "🔍 run tests"
+        run: pnpm test
+
+  lint:
+    name: Code standards
+    runs-on: ubuntu-latest
+    timeout-minutes: 10
+    steps:
+      - name: "☁️ checkout repository"
+        uses: actions/checkout@v4
+
+      - name: "🔧 setup pnpm"
+        uses: pnpm/action-setup@v3
+        with:
+          version: 8
+
+      - name: "🔧 setup node"
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: "pnpm"
+
+      - name: "📦 install dependencies"
+        run: pnpm install
+
+      - name: "🔍 lint code"
+        run: pnpm lint

.github/workflows/npm-publish.yml

@@ -0,0 +1,42 @@
+name: Publish
+
+on:
+  release:
+    types: [created]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: pnpm/action-setup@v3
+        with:
+          version: 8
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: "pnpm"
+
+      - name: "📦 install dependencies"
+        run: pnpm install
+
+      - name: "🧱 build package"
+        run: pnpm build
+
+  publish-npm:
+    needs: build
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          registry-url: https://registry.npmjs.org/
+
+      - name: "🚀 publish package"
+        run: npx tsx ./scripts/ci/publish-package.ts
+        env:
+          NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}

.prettierignore

@@ -0,0 +1,5 @@
+node_modules
+dist
+.swc
+.github
+.next

.prettierrc

@@ -1,11 +1,15 @@
 {
   "bracketSpacing": true,
-  "packageManager": "yarn",
   "printWidth": 80,
   "semi": true,
   "singleQuote": false,
   "tabWidth": 2,
-  "useEditorConfig": true,
-  "trailingComma": "none",
-  "arrowParens": "avoid"
+  "trailingComma": "all",
+  "arrowParens": "avoid",
+  "bracketSameLine": false,
+  "endOfLine": "lf",
+  "htmlWhitespaceSensitivity": "css",
+  "jsxSingleQuote": false,
+  "singleAttributePerLine": true,
+  "plugins": ["prettier-plugin-organize-imports"]
 }

CODE_OF_CONDUCT.md

@@ -60,7 +60,7 @@ representative at an online or offline event.
 
 Instances of abusive, harassing, or otherwise unacceptable behavior may be
 reported to the community leaders responsible for enforcement at
-hello@mimsh.in.
+`mostafa.sh.coderino@gmail.com`.
 All complaints will be reviewed and investigated promptly and fairly.
 
 All community leaders are obligated to respect the privacy and security of the

CONTRIBUTING.md

@@ -61,7 +61,7 @@ pnpm install
 5. Create a new topic branch:
 
 ```sh
-git checkout -b my-topic-branch
+git switch -c my-topic-branch
 ```
 
 6. Make changes, commit and push to your fork:
@@ -79,7 +79,7 @@ The core team is monitoring for Pull Requests. We will review your Pull Request
 Start developing server and watch for code changes:
 
 ```sh
-pnpm next:dev
+pnpm dev
 ```
 
 The local dev server is a NextJS app.

app/layout.tsx

@@ -6,7 +6,10 @@ import { getVariablesAsStyles, theme, ThemeProvider } from "./theming";
 const ssrCssVariables = getVariablesAsStyles(theme);
 
 const RootLayout = (props: { children: React.ReactNode }) => (
-  <html lang="en" style={ssrCssVariables}>
+  <html
+    lang="en"
+    style={ssrCssVariables}
+  >
     <body>
       <ThemeProvider theme={theme}>{props.children}</ThemeProvider>
     </body>

app/theming.ts

@@ -6,33 +6,33 @@ export const theme = {
       base: "1",
       hover: "2",
       active: "3",
-      disabled: "4"
+      disabled: "4",
     },
     secondary: {
       base: "5",
       hover: "6",
       active: "7",
-      disabled: "8"
+      disabled: "8",
     },
     neutral: {
       text: {
         base: "9",
         secondary: "10",
-        tertiary: "11"
+        tertiary: "11",
       },
       background: {
         base: "12",
         container: "13",
-        elevated: "14"
-      }
-    }
+        elevated: "14",
+      },
+    },
   },
-  dark: 1
+  dark: 1,
 };
 
 const tokenFamilyNameMap: Record<keyof typeof theme, string> = {
   colors: "color",
-  dark: "dark"
+  dark: "dark",
 };
 
 export const { ThemeProvider, useTheme, getVariablesAsStyles } = createTheming(
@@ -43,7 +43,7 @@ export const { ThemeProvider, useTheme, getVariablesAsStyles } = createTheming(
       defaultCssVariableGenerator(
         tokenFamilyNameMap[tokenFamilyKey].toLowerCase(),
         tokenPath,
-        tokenValue
-      )
-  }
+        tokenValue,
+      ),
+  },
 );

jest.config.js

@@ -0,0 +1,17 @@
+import nextJest from "next/jest.js";
+
+const createJestConfig = nextJest({ dir: "./" });
+
+/**
+ * @type {import("jest").Config}
+ */
+const jestConfig = {
+  verbose: true,
+  setupFilesAfterEnv: ["<rootDir>/tests/jest.setup.ts"],
+  testPathIgnorePatterns: ["<rootDir>/.next/", "<rootDir>/node_modules/"],
+  testRegex: ".*\\.test\\.tsx?$",
+  testEnvironment: "jest-environment-jsdom",
+  preset: "ts-jest",
+};
+
+export default createJestConfig(jestConfig);