Test for rel

.env

@@ -0,0 +1,2 @@
+NODE_VERSION=20.15
+UBUNTU_VERSION=20.04

.eslintignore

@@ -1,2 +1,4 @@
 jest.config.ts
-jest.setup.ts
+jest.setup.ts
+vite.config.mts
+tests/react-testing-library.tsx

.github/workflows/check-version.yml

@@ -0,0 +1,24 @@
+name: Version Check
+
+on:
+  pull_request:
+    branches:
+      - production
+
+jobs:
+  version-check:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Fetch all branches
+        run: git fetch --all
+
+      - name: Run version check script
+        run: |
+          chmod +x ./ci/check_version.sh
+          ./ci/check_version.sh

.github/workflows/ci-pipeline.yml

@@ -0,0 +1,34 @@
+name: Continuous Integration Pipeline
+
+on:
+  pull_request:
+    branches:
+      - development
+
+jobs:
+  checks-lint-type-test-build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Load node version
+        run: echo "NODE_VERSION=$(cat .env | grep NODE_VERSION | cut -d '=' -f2)" >> $GITHUB_ENV
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+          cache: "npm"
+
+      - run: npm ci
+
+      - name: Lint
+        run: make ci-lint
+
+      - name: Type Check
+        run: make ci-tsc
+
+      - name: Tests
+        run: make ci-test
+
+      - name: Build
+        run: make ci-build

.github/workflows/deploy-storybook.yml

@@ -0,0 +1,52 @@
+name: Storybook to GitHub Pages Pipeline
+
+on:
+  push:
+    branches:
+      - production
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: "pages"
+  cancel-in-progress: true
+
+jobs:
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Load node version
+        run: echo "NODE_VERSION=$(cat .env | grep NODE_VERSION | cut -d '=' -f2)" >> $GITHUB_ENV
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+          cache: "npm"
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build Storybook
+        run: make storybook-build
+
+      - name: Setup Pages
+        uses: actions/configure-pages@v4
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: dist/storybook
+
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

.github/workflows/publish-package.yml

@@ -0,0 +1,37 @@
+name: Publish Package to NPM Pipeline
+
+on:
+  push:
+    branches:
+      - production
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20.15"
+          registry-url: "https://registry.npmjs.org"
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Get version
+        id: package-version
+        run: echo "version=$(node -p "require('./package.json').version")" >> $GITHUB_OUTPUT
+
+      - name: Create and push tag
+        run: |
+          git tag v${{ steps.package-version.outputs.version }}
+          git push origin v${{ steps.package-version.outputs.version }}
+
+      - name: Publish to NPM
+        run: npm publish
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

.gitignore

@@ -1 +1,3 @@
-/node_modules
+/node_modules
+/dist
+/coverage

.storybook/caller.mk

@@ -0,0 +1,19 @@
+p=storybook-
+
+npx_s=npx storybook
+
+dev_port=39047
+preview_port=8080
+dist=dist/storybook
+
+$(p)dev:
+	@$(call echo_yellow, "--> Running Storybook in development mode...")
+	$(run) $(npx_s) dev --no-open -p $(dev_port)
+
+$(p)build:
+	@$(call echo_yellow, "--> Building Storybook...")
+	$(run) $(npx_s) build --docs -o $(dist)
+
+$(p)preview-build-locally:
+	@$(call echo_yellow, "--> Starting server to preview storybook locally...")
+	npx http-server $(dist) -p $(preview_port)

.storybook/main.ts

@@ -0,0 +1,9 @@
+import { StorybookConfig } from "@storybook/react-vite";
+
+const config: StorybookConfig = {
+  stories: ["../**/stories.@(ts|tsx)"],
+  addons: ["@storybook/addon-essentials"],
+  framework: "@storybook/react-vite",
+};
+
+export default config;

.storybook/preview.tsx

@@ -0,0 +1,57 @@
+import React from "react";
+
+import { Preview } from "@storybook/react";
+
+import { ThemeProvider } from "../src/theme";
+
+const preview: Preview = {
+  // parameters: {},
+  globalTypes: {
+    theme: {
+      toolbar: {
+        title: "Theme",
+        items: ["light", "dark", "side-by-side"],
+        dynamicTitle: true,
+      },
+    },
+  },
+  initialGlobals: {
+    theme: "light",
+  },
+  tags: ["autodocs"],
+  decorators: [
+    (Story, context) => {
+      const isSideBySide = context.globals.theme === "side-by-side";
+
+      return isSideBySide ? (
+        <div
+          style={{
+            display: "flex",
+            flexDirection: "row",
+            gap: "2rem",
+            padding: "2rem",
+          }}
+        >
+          <ThemeProvider theme={"light"}>
+            <Story />
+          </ThemeProvider>
+          <ThemeProvider theme={"dark"}>
+            <Story />
+          </ThemeProvider>
+        </div>
+      ) : (
+        <ThemeProvider theme={context.globals.theme}>
+          <div
+            style={{
+              padding: "2rem",
+            }}
+          >
+            <Story />
+          </div>
+        </ThemeProvider>
+      );
+    },
+  ],
+};
+
+export default preview;

.vscode/react.code-snippets

@@ -0,0 +1,69 @@
+{
+  "Component Styles": {
+    "prefix": "resty",
+    "description": "Creates a styles file with makeStyles hook",
+    "body": [
+      "import { makeStyles } from \"@theme\";",
+      "",
+      "const use${TM_DIRECTORY/.*\\/(.*?)$/$1/}Classes = makeStyles({",
+      "  root: {",
+      "  },",
+      "});",
+      "",
+      "export default use${TM_DIRECTORY/.*\\/(.*?)$/$1/}Classes;",
+    ],
+  },
+  "React Functional Component": {
+    "prefix": "reco",
+    "description": "Creates a React functional component with styles",
+    "body": [
+      "import type { JSX } from \"react\";",
+      "",
+      "import use${TM_DIRECTORY/.*\\/(.*?)$/$1/}Classes from \"./styles\";",
+      "",
+      "type TProps = {",
+      "  $1",
+      "};",
+      "",
+      "export default function ${TM_DIRECTORY/.*\\/(.*?)$/$1/}({}: TProps): JSX.Element {",
+      "  const classes = use${TM_DIRECTORY/.*\\/(.*?)$/$1/}Classes();",
+      "  return <div className={classes.root}>${TM_DIRECTORY/.*\\/(.*?)$/$1/}</div>;",
+      "}",
+    ],
+  },
+  "React Component Test": {
+    "prefix": "retes",
+    "body": [
+      "// import { render, screen } from '@test-utils';",
+      "import '@testing-library/jest-dom';",
+      "",
+      "describe('${TM_DIRECTORY/.*\\/(.*)$/$1/}', () => {",
+      "  it('should render', () => {",
+      "     expect(true).toBe(true);",
+      "  });",
+      "});",
+    ],
+    "description": "Creates a test file for a React component",
+  },
+
+  "React Storybook": {
+    "prefix": "rebook",
+    "body": [
+      "import type { Meta, StoryObj } from \"@storybook/react\";",
+      "",
+      "const meta: Meta = {",
+      "  title: \"\",",
+      "  component: \"\",",
+      "  args: {},",
+      "};",
+      "",
+      "export default meta;",
+      "",
+      "type Story = StoryObj<{}>;",
+      "",
+      "export const Index: Story = {};",
+      "",
+    ],
+    "description": "Snippet for Storybook Meta and Story",
+  },
+}

ci/caller.mk

@@ -0,0 +1,34 @@
+p=ci-
+
+$(p)test:
+	@$(call echo_yellow, "--> Jest Testing...")
+	@npx jest
+
+$(p)lint:
+	@$(call echo_yellow, "--> Linting...")
+	@npx eslint src/
+
+$(p)lint-fix:
+	@$(call echo_yellow, "--> Linting and fixing...")
+	@npx eslint src/ --fix
+
+$(p)build:
+	@make storybook-build
+	@$(call echo_red, "--> removing dist folder...")
+	rm -rf dist
+
+$(p)tsc:
+	@$(call echo_yellow, "--> Compiling...")
+	@npx tsc
+
+$(p)local-all:
+	@$(call echo_blue, "--> Running all local CI tasks...") 
+	@make -s $(p)lint 
+	@$(call echo_green, "--> Linting done.")
+	@make -s $(p)tsc 
+	@$(call echo_green, "--> Compiling done.")
+	@make -s $(p)test 
+	@$(call echo_green, "--> Testing done.")
+	@make -s $(p)build
+	@$(call echo_green, "--> Building done.")
+	@$(call echo_blue, "--> All local CI tasks done.")