am-shared-assets 0.0.2

package/.gitlab-ci.yml

@@ -0,0 +1,31 @@
+stages:
+  - build
+  - deploy
+
+
+before_script:
+  - docker login -u $CI_REGISTRY_USER -p $CI_REGISTRY_PASSWORD $CI_REGISTRY
+
+build:
+  stage: build
+  environment: production
+  script:
+    - docker compose build
+    - docker compose push
+  only:
+    - main
+  tags:
+    - build
+
+
+deploy:
+  stage: deploy
+  environment: production
+  script:
+    - docker compose pull
+    - docker compose up -d --force-recreate
+  only:
+    - main
+  when: manual
+  tags:
+    - prod

package/.storybook/main.ts

@@ -0,0 +1,17 @@
+import type { StorybookConfig } from '@storybook/react-vite';
+
+const config: StorybookConfig = {
+  "stories": [
+    "../src/**/*.mdx",
+    "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"
+  ],
+  "addons": [
+    "@chromatic-com/storybook",
+    "@storybook/addon-vitest",
+    "@storybook/addon-a11y",
+    "@storybook/addon-docs",
+    "@storybook/addon-onboarding"
+  ],
+  "framework": "@storybook/react-vite"
+};
+export default config;

package/.storybook/preview.ts

@@ -0,0 +1,22 @@
+import type { Preview } from '@storybook/react-vite'
+import "./../src/index.css"
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+       color: /(background|color)$/i,
+       date: /Date$/i,
+      },
+    },
+
+    a11y: {
+      // 'todo' - show a11y violations in the test UI only
+      // 'error' - fail CI on a11y violations
+      // 'off' - skip a11y checks entirely
+      test: 'todo'
+    }
+  },
+};
+
+export default preview;

package/.storybook/vitest.setup.ts

@@ -0,0 +1,7 @@
+import * as a11yAddonAnnotations from "@storybook/addon-a11y/preview";
+import { setProjectAnnotations } from '@storybook/react-vite';
+import * as projectAnnotations from './preview';
+
+// This is an important step to apply the right configuration when testing your stories.
+// More info at: https://storybook.js.org/docs/api/portable-stories/portable-stories-vitest#setprojectannotations
+setProjectAnnotations([a11yAddonAnnotations, projectAnnotations]);

package/Dockerfile

@@ -0,0 +1,36 @@
+FROM node:24-alpine AS base
+
+ENV NEXT_TELEMETRY_DISABLED=1
+ENV PNPM_HOME="/pnpm"
+ENV PATH="$PNPM_HOME:$PATH"
+
+#RUN npm config set registry https://repository.aghsatmarket.com/repository/npm-proxy/
+RUN npm install -g corepack@latest serve
+RUN corepack enable
+
+WORKDIR /app
+
+# Dependencies
+FROM base AS dependencies
+
+
+COPY package.json package-lock.json ./
+RUN npm install
+# install lightweight static file server
+
+# Build Storybook
+FROM base AS build
+
+COPY --from=dependencies /app/node_modules ./node_modules
+COPY . .
+
+RUN npm run build-storybook
+
+# Production runtime
+FROM nginx:latest AS run
+
+COPY --from=build /app/storybook-static /usr/share/nginx/html
+
+EXPOSE 80
+
+CMD ["nginx", "-g", "daemon off;"]

package/README.md

@@ -0,0 +1,73 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## React Compiler
+
+The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+
+```js
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+
+      // Remove tseslint.configs.recommended and replace with this
+      tseslint.configs.recommendedTypeChecked,
+      // Alternatively, use this for stricter rules
+      tseslint.configs.strictTypeChecked,
+      // Optionally, add this for stylistic rules
+      tseslint.configs.stylisticTypeChecked,
+
+      // Other configs...
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```
+
+You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+
+```js
+// eslint.config.js
+import reactX from 'eslint-plugin-react-x'
+import reactDom from 'eslint-plugin-react-dom'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+      // Enable lint rules for React
+      reactX.configs['recommended-typescript'],
+      // Enable lint rules for React DOM
+      reactDom.configs.recommended,
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```

package/docker-compose.yml

@@ -0,0 +1,12 @@
+services:
+  storybook:
+    image: ${CI_REGISTRY_IMAGE}:latest
+    build:
+      context: .
+      dockerfile: Dockerfile
+    restart: unless-stopped
+    ports:
+      - "127.0.0.1:6006:80"
+
+    environment:
+      NODE_ENV: production

package/eslint.config.js

@@ -0,0 +1,23 @@
+// For more info, see https://github.com/storybookjs/eslint-plugin-storybook#configuration-flat-config-format
+import storybook from "eslint-plugin-storybook";
+
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([globalIgnores(['dist']), {
+  files: ['**/*.{ts,tsx}'],
+  extends: [
+    js.configs.recommended,
+    tseslint.configs.recommended,
+    reactHooks.configs.flat.recommended,
+    reactRefresh.configs.vite,
+  ],
+  languageOptions: {
+    ecmaVersion: 2020,
+    globals: globals.browser,
+  },
+}, ...storybook.configs["flat/recommended"]])

package/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>shared-assets</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "am-shared-assets",
+  "version": "0.0.2",
+  "type": "module",
+  "description": "A demo package for Total TypeScript",
+  "keywords": ["demo", "typescript"],
+  "homepage": "https://github.com/mattpocock/tt-package-demo",
+  "bugs": {
+    "url": "https://github.com/mattpocock/tt-package-demo/issues"
+  },
+  "author": "Matt Pocock <team@totaltypescript.com> (https://totaltypescript.com)",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/mattpocock/tt-package-demo.git"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
+    "@mui/material": "^9.0.0",
+    "clsx": "^2.1.1",
+    "postcss": "^8.4.47",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "tailwindcss": "^3.4.14"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^5.0.1",
+    "@eslint/js": "^9.39.1",
+    "@storybook/addon-a11y": "^10.2.17",
+    "@storybook/addon-docs": "^10.2.17",
+    "@storybook/addon-onboarding": "^10.2.17",
+    "@storybook/addon-vitest": "^10.2.17",
+    "@storybook/react-vite": "^10.2.17",
+    "@types/node": "^24.10.1",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.1",
+    "@vitest/browser-playwright": "^4.0.18",
+    "@vitest/coverage-v8": "^4.0.18",
+    "autoprefixer": "^10.4.20",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "eslint-plugin-storybook": "^10.2.17",
+    "globals": "^16.5.0",
+    "playwright": "^1.58.2",
+    "storybook": "^10.2.17",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.48.0",
+    "vite": "^7.3.1",
+    "vitest": "^4.0.18"
+  }
+}

package/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

package/public/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/src/App.tsx

@@ -0,0 +1,8 @@
+function App() {
+  return (
+    <>
+    </>
+  )
+}
+
+export default App

package/src/components/Alert.tsx

@@ -0,0 +1,194 @@
+import type { ReactNode } from "react";
+import {
+  CloseIcon,
+  InfoIcon,
+  CloseCircleIcon,
+  TickCircleIcon,
+  WarningIcon,
+} from "../icons";
+import clsx from "clsx";
+
+const sizes: { [key: string]: string } = {
+  sm: "text-xs",
+  md: "text-sm",
+};
+
+const widths: { [key: string]: string } = {
+  default: "w-[342px] min-w-[342px]",
+  full: "w-full",
+};
+
+const bgColors: { [key: string]: string } = {
+  default: "bg-default-100",
+  primary: "bg-primary-50",
+  secondary: "bg-secondary-50",
+  success: "bg-success-50",
+  warning: "bg-warning-50",
+  danger: "bg-danger-50",
+};
+
+const titleColors: { [key: string]: string } = {
+  default: "text-default-900",
+  primary: "text-base-primary",
+  secondary: "text-base-secondary",
+  success: "text-base-success",
+  warning: "text-default-900",
+  danger: "text-base-danger",
+};
+
+const descriptionColors: { [key: string]: string } = {
+  default: "text-default-600",
+  primary: "text-base-primary",
+  secondary: "text-base-secondary",
+  success: "text-base-success",
+  warning: "text-default-600",
+  danger: "text-base-danger",
+};
+
+const buttonBgColors: { [key: string]: string } = {
+  default: "bg-default-300",
+  primary: "bg-base-primary",
+  secondary: "bg-base-secondary",
+  success: "bg-base-success",
+  warning: "bg-base-warning",
+  danger: "bg-base-danger",
+};
+
+const buttonTextColors: { [key: string]: string } = {
+  white: "text-white",
+  black: "text-default-900",
+};
+
+const closeButtonColors: { [key: string]: string } = {
+  default: "#a1a1aa",
+  primary: "#A9BCE3",
+  secondary: "#E2CDA6",
+  success: "#a2e9c1",
+  warning: "#fbdba7",
+  danger: "#faa0bf",
+};
+
+const infoIconAlignments: { [key: string]: string } = {
+  start: "items-start",
+  center: "items-center",
+};
+
+const infoIconColors: { [key: string]: string } = {
+  default: "#000",
+  primary: "#112E62",
+  secondary: "#C59C4E",
+  success: "#17c964",
+  warning: "#f5a524",
+  danger: "#f31260",
+};
+
+const alertIcons: { [key: string]: ReactNode } = {
+  success: <TickCircleIcon color="#17C964" />,
+  warning: <WarningIcon color="#F5A524" />,
+  danger: <CloseCircleIcon color="#F31260" />,
+};
+
+const radiuses: { [key: string]: string } = {
+  none: "rounded-none",
+  sm: "rounded-md",
+  md: "rounded-xl",
+  lg: "rounded-[22px]",
+  full: "rounded-full",
+};
+
+interface AlertProps {
+  title?: string;
+  description?: string;
+  color?:
+    | "default"
+    | "primary"
+    | "secondary"
+    | "success"
+    | "warning"
+    | "danger";
+  size?: "sm" | "md";
+  width?: "default" | "full";
+  rounded?: "none" | "sm" | "md" | "lg" | "full";
+  infoIconAlignment?: "start" | "center";
+  isInfoIcon?: boolean;
+  hasCloseButton?: boolean;
+  hasButton?: boolean;
+  buttonTitle?: string;
+  buttonTextColor?: "black" | "white";
+  buttonClickHandler?: () => void;
+  closeAlertHandler?: () => void;
+}
+
+export const Alert = ({
+  title,
+  description,
+  color = "default",
+  size = "md",
+  width = "default",
+  rounded = "none",
+  infoIconAlignment,
+  isInfoIcon = true,
+  hasCloseButton = true,
+  hasButton = false,
+  buttonTitle,
+  buttonTextColor = "black",
+  buttonClickHandler,
+  closeAlertHandler,
+}: AlertProps) => {
+  const cls = clsx(
+    widths[width],
+    sizes[size],
+    radiuses[rounded],
+    bgColors[color],
+  );
+
+  return (
+    <div className={`relative flex justify-between p-3 ${cls}`}>
+      <div
+        className={`flex ${infoIconAlignment ? infoIconAlignments[infoIconAlignment] : hasButton ? "items-center" : title && description ? "items-start" : "items-center"} gap-3`}
+      >
+        <div className="mt-[1px]">
+          {isInfoIcon || !alertIcons[color] ? (
+            <InfoIcon color={infoIconColors[color]} />
+          ) : (
+            alertIcons[color]
+          )}
+        </div>
+        <div>
+          {title && (
+            <h2 className={`font-semibold ${titleColors[color]}`}>{title}</h2>
+          )}
+          {description && (
+            <p className={descriptionColors[color]}>{description}</p>
+          )}
+        </div>
+      </div>
+      {hasButton ? (
+        <div className="flex items-center">
+          <button
+            onClick={buttonClickHandler}
+            className={`h-8 px-3 rounded-md ${buttonBgColors[color]} ${buttonTextColors[buttonTextColor]}`}
+          >
+            {buttonTitle}
+          </button>
+          {hasCloseButton && (
+            <button
+              onClick={closeAlertHandler}
+              className="absolute -top-1 -left-1 border border-default-300 bg-default-100 rounded-full"
+            >
+              <CloseIcon color={closeButtonColors["default"]} size={14} />
+            </button>
+          )}
+        </div>
+      ) : (
+        hasCloseButton && (
+          <div>
+            <button onClick={closeAlertHandler}>
+              <CloseIcon color={closeButtonColors[color]} />
+            </button>
+          </div>
+        )
+      )}
+    </div>
+  );
+};

package/src/components/Badge.tsx

@@ -0,0 +1,48 @@
+import clsx from "clsx";
+
+const sizes = {
+  sm: "h-5 text-xs px-2",
+  md: "h-6 text-sm px-2.5",
+  lg: "h-7 text-sm px-3",
+};
+const colors = {
+  neutral: "bg-default-500",
+  default: "bg-default-200",
+  primary: "bg-layout-focus",
+  danger: "bg-base-danger",
+  success: "bg-base-success",
+};
+const textColors = {
+  white: "text-content-1",
+  black: "text-layout-fg",
+};
+const types = {
+  pill: "rounded-full",
+  Rectangle: "rounded-xxs",
+};
+
+interface IBadgeProps {
+  label: string;
+  size?: "sm" | "md" | "lg";
+  color?: "neutral" | "default" | "primary" | "danger" | "success";
+  textColor?: "white" | "black";
+  type?: "pill" | "Rectangle";
+}
+
+const Badge = ({
+  label,
+  color = "default",
+  type = "pill",
+  size = "md",
+  textColor = "black",
+}: IBadgeProps) => {
+  const cls = clsx(
+    colors[color],
+    textColors[textColor],
+    sizes[size],
+    types[type],
+  );
+  return <div className={`flex justify-center items-center ${cls}`}>{label}</div>;
+};
+
+export default Badge;