am-shared-assets 0.0.3 → 0.0.5

package/package.json

@@ -1,12 +1,11 @@
 {
   "name": "am-shared-assets",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "type": "module",
-  "description": "A demo package for Total TypeScript",
-  "bugs": {
-    "url": "https://github.com/mattpocock/tt-package-demo/issues"
-  },
-  "author": "Matt Pocock <team@totaltypescript.com> (https://totaltypescript.com)",
+  "license": "MIT",
+  "description": "",
+  "module": "./dist/am-shared-assets.js",
+  "files": ["dist"],
   "scripts": {
     "dev": "vite",
     "build": "tsc -b && vite build",

package/.gitlab-ci.yml

@@ -1,31 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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

@@ -1,7 +0,0 @@
-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

@@ -1,36 +0,0 @@
-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/docker-compose.yml

@@ -1,12 +0,0 @@
-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

@@ -1,23 +0,0 @@
-// 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

@@ -1,13 +0,0 @@
-<!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/postcss.config.js

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

package/src/App.tsx

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

package/src/components/Alert.tsx

@@ -1,194 +0,0 @@
-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

@@ -1,48 +0,0 @@
-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;

package/src/components/Button.tsx

@@ -1,137 +0,0 @@
-import clsx from "clsx";
-import type { ReactNode } from "react";
-
-const sizes = {
-  sm: "h-8 text-xs px-3",
-  md: "h-10 text-sm px-4",
-  lg: "h-12 text-base px-6",
-};
-
-const textColors: { [key: string]: string } = {
-  white: "text-white",
-  black: "text-default-900",
-  default: "text-default-900",
-  primary: "text-base-primary",
-  secondary: "text-base-secondary",
-  success: "text-base-success",
-  warning: "text-base-warning",
-  danger: "text-base-danger",
-};
-
-const bgColors: { [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 borderColors: { [key: string]: string } = {
-  default: "border-default-300",
-  primary: "border-base-primary",
-  secondary: "border-base-secondary",
-  success: "border-base-success",
-  warning: "border-base-warning",
-  danger: "border-base-danger",
-};
-
-const bgFlatColors: { [key: string]: string } = {
-  default: "bg-default-100",
-  primary: "bg-primary-100",
-  secondary: "bg-secondary-100",
-  success: "bg-success-100",
-  warning: "bg-warning-100",
-  danger: "bg-danger-100",
-};
-
-const radiuses = {
-  none: "rounded-none",
-  sm: "rounded-sm",
-  md: "rounded-md",
-  lg: "rounded-lg",
-  full: "rounded-full",
-};
-
-const variantFunc = (variant: string, color: string, textColor: string) => {
-  let style = "";
-
-  switch (variant) {
-    case "solid":
-      style = `${bgColors[color]} ${textColors[textColor]}`;
-      break;
-    case "bordered":
-      style = `border-2 ${borderColors[color]} ${textColors[color]}`;
-      break;
-    case "light":
-      style = textColors[color];
-      break;
-    case "flat":
-      style = `${bgFlatColors[color]} ${textColors[color]}`;
-      break;
-    case "faded":
-      style = `border-2 ${borderColors["default"]} ${bgFlatColors["default"]} ${textColors[color]}`;
-      break;
-    case "shadow":
-      style = `shadow-lg ${bgColors[color]} ${textColors[textColor]}`;
-      break;
-    default:
-      break;
-  }
-
-  return style;
-};
-
-export interface ButtonProps {
-  variant?: "solid" | "bordered" | "light" | "flat" | "faded" | "shadow";
-  color?:
-    | "default"
-    | "primary"
-    | "secondary"
-    | "success"
-    | "warning"
-    | "danger";
-  textColor?: "black" | "white";
-  size?: "sm" | "md" | "lg";
-  rounded?: "none" | "sm" | "md" | "lg" | "full";
-  label?: string;
-  icon?: ReactNode;
-  iconPosition?: "right" | "left";
-  width?: "full" | "auto";
-  onClick?: () => void;
-}
-
-export const Button = ({
-  variant = "solid",
-  color = "default",
-  textColor = "black",
-  size = "md",
-  rounded = "none",
-  label,
-  icon,
-  iconPosition = "left",
-  width = "auto",
-  onClick,
-}: ButtonProps) => {
-  const cls = clsx(
-    width === "full" ? "w-full" : "w-auto",
-    iconPosition === "right" ? "flex-row" : "flex-row-reverse",
-    radiuses[rounded],
-    sizes[size],
-    variantFunc(variant, color, textColor),
-  );
-
-  return (
-    <button
-      type="button"
-      className={
-        "flex items-center justify-center gap-2 font-semibold transition-all duration-300 " +
-        cls
-      }
-      onClick={onClick}
-    >
-      {icon}
-      {label && <p>{label}</p>}
-    </button>
-  );
-};