view shelter 2 (DEV-1079)

apps/shelter-web/src/assets/styles/global.css

@@ -10,6 +10,9 @@
   --color-neutral-70: #a8aeb8;
   --color-neutral-90: #d3d9e3;
   --color-neutral-98: #e8ecf2;
+  --color-neutral-99: #f4f6fd;
+  --color-success-30: #007934;
+  --color-success-90: #ddf8e8;
 }
 
 * {

apps/shelter-web/tailwind.config.js

@@ -27,6 +27,9 @@ module.exports = {
         'neutral-70': 'var(--color-neutral-70)',
         'neutral-90': 'var(--color-neutral-90)',
         'neutral-98': 'var(--color-neutral-98)',
+        'neutral-99': 'var(--color-neutral-99)',
+        'success-30': 'var(--color-success-30)',
+        'success-90': 'var(--color-success-90)',
       },
     },
   },

libs/react/components/.eslintrc.json

@@ -0,0 +1,18 @@
+{
+  "extends": ["plugin:@nx/react", "../../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    }
+  ]
+}

libs/react/components/README.md

@@ -0,0 +1,7 @@
+# react-components
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test react-components` to execute the unit tests via [Jest](https://jestjs.io).

libs/react/components/jest.config.ts

@@ -0,0 +1,11 @@
+/* eslint-disable */
+export default {
+  displayName: 'react-components',
+  preset: '../../../jest.preset.js',
+  testEnvironment: 'node',
+  transform: {
+    '^.+\\.[tj]s$': ['ts-jest', { tsconfig: '<rootDir>/tsconfig.spec.json' }],
+  },
+  moduleFileExtensions: ['ts', 'js', 'html'],
+  coverageDirectory: '../../../coverage/libs/react/components',
+};

libs/react/components/project.json

@@ -0,0 +1,16 @@
+{
+  "name": "react-components",
+  "$schema": "../../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "libs/react/components/src",
+  "projectType": "library",
+  "tags": [],
+  "targets": {
+    "test": {
+      "executor": "@nx/jest:jest",
+      "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+      "options": {
+        "jestConfig": "libs/react/components/jest.config.ts"
+      }
+    }
+  }
+}

libs/react/components/src/index.ts

@@ -0,0 +1 @@
+export * from './lib';

libs/react/components/src/lib/Button/Button.tsx

@@ -0,0 +1,42 @@
+import clsx from 'clsx';
+import { ButtonHTMLAttributes } from 'react';
+
+interface IButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  /**
+   * The size of the button. Determines padding and font size.
+   * - `sm`: 26px.
+   * - `md`: Medium size (default).
+   * - `lg`: Large size.
+   */
+  size?: 'sm' | 'md' | 'lg';
+  /**
+   * The variant of the button. Determines background and text color.
+   * - `primary`: primary-20 background, white text.
+   * - `secondary`: neutral-99 background, primary-20 text.
+   */
+  variant?: 'primary' | 'secondary';
+}
+
+export function Button(props: IButtonProps) {
+  const { size = 'md', variant = 'primary', className, ...rest } = props;
+
+  const sizeClasses = {
+    sm: 'h-[26px] px-2 text-sm',
+    md: 'h-[32px] px-4 text-base',
+    lg: 'h-[40px] px-6 text-lg',
+  };
+
+  const variantClasses = {
+    primary: 'bg-primary-20 text-white',
+    secondary: 'bg-neutral-99 text-primary-20',
+  };
+
+  const buttonClass = clsx(
+    className,
+    'font-semibold text-sm focus:outline-none rounded-lg',
+    sizeClasses[size],
+    variantClasses[variant]
+  );
+
+  return <button className={buttonClass} {...rest} />;
+}

libs/react/components/src/lib/Button/index.ts

@@ -0,0 +1 @@
+export { Button as default } from './Button';

libs/react/components/src/lib/CardWrapper/CardWrapper.tsx

@@ -0,0 +1,24 @@
+import clsx from 'clsx';
+import { ReactNode } from 'react';
+
+interface ICardWrapperProps {
+  children: ReactNode;
+  px?: 'px-0' | 'px-6';
+  pb?: 'pb-0' | 'pb-6';
+  title?: string;
+}
+
+export function CardWrapper(props: ICardWrapperProps) {
+  const { children, px = 'px-6', title, pb = 'pb-6' } = props;
+
+  const baseClasses = 'border-neutral-90 border pt-6 rounded-lg bg-white';
+
+  const pxClasses = clsx(baseClasses, px, pb);
+
+  return (
+    <div className={pxClasses}>
+      {title && <h3 className="font-semibold mb-2">{title}</h3>}
+      <div className="text-sm">{children}</div>
+    </div>
+  );
+}

libs/react/components/src/lib/CardWrapper/index.ts

@@ -0,0 +1 @@
+export { CardWrapper as default } from './CardWrapper';

libs/react/components/src/lib/Pill/Pill.tsx

@@ -0,0 +1,26 @@
+import clsx from 'clsx';
+
+interface IPillProps {
+  /**
+   * The type of pill. Determines background and border styles.
+   * - `primary`: Primary-themed pill.
+   * - `success`: Success-themed pill (default).
+   */
+  type?: 'success';
+  label: string;
+  className?: string;
+}
+
+export function Pill(props: IPillProps) {
+  const { label, type = 'success', className } = props;
+
+  const baseClasses = 'rounded-[20px] inline-flex items-center justify-center';
+
+  const typeClasses = {
+    success: 'bg-success-90 text-primary-20 px-4 py-1',
+  };
+
+  const pillClass = clsx(baseClasses, typeClasses[type], className);
+
+  return <div className={pillClass}>{label}</div>;
+}

libs/react/components/src/lib/Pill/index.ts

@@ -0,0 +1 @@
+export { Pill as default } from './Pill';

libs/react/components/src/lib/PillContainer/PillContainer.tsx

@@ -0,0 +1,40 @@
+import { useState } from 'react';
+import Pill from '../Pill';
+
+interface IPillContainerProps {
+  data: string[];
+  type?: 'success';
+  maxVisible: number;
+}
+
+export function PillContainer({
+  data,
+  type = 'success',
+  maxVisible,
+}: IPillContainerProps) {
+  const [showAll, setShowAll] = useState(false);
+  const servicesToDisplay = showAll ? data : data.slice(0, maxVisible);
+
+  return (
+    <div className="flex flex-col">
+      <div className="flex flex-wrap gap-1">
+        {servicesToDisplay.map((item, idx) => (
+          <Pill type={type} label={item} key={idx} />
+        ))}
+      </div>
+
+      {data.length > maxVisible && (
+        <button
+          className="mt-3 ml-auto mr-auto"
+          onClick={() => setShowAll(!showAll)}
+          aria-label={showAll ? 'Show fewer items' : 'Show all items'}
+        >
+          <p className="text-xs font-semibold">
+            {showAll ? `Show Less` : `View All (+${data.length - maxVisible})`}
+          </p>
+          {/* <ChevronLeftIcon className={clsx('chevron-icon', { rotated: showAll })} /> */}
+        </button>
+      )}
+    </div>
+  );
+}

libs/react/components/src/lib/PillContainer/index.ts

@@ -0,0 +1 @@
+export { PillContainer as default } from './PillContainer';

libs/react/components/src/lib/index.ts

@@ -0,0 +1,4 @@
+export { default as Button } from './Button';
+export { default as CardWrapper } from './CardWrapper';
+export { default as Pill } from './Pill';
+export { default as PillContainer } from './PillContainer';

libs/react/components/tsconfig.json

@@ -0,0 +1,24 @@
+{
+  "extends": "../../../tsconfig.base.json",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "esModuleInterop": true,
+    "module": "commonjs",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ]
+}

libs/react/components/tsconfig.lib.json

@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../dist/out-tsc",
+    "declaration": true,
+    "types": ["node"]
+  },
+  "include": ["src/**/*.ts"],
+  "exclude": ["jest.config.ts", "src/**/*.spec.ts", "src/**/*.test.ts"]
+}

libs/react/components/tsconfig.spec.json

@@ -0,0 +1,14 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../dist/out-tsc",
+    "module": "commonjs",
+    "types": ["jest", "node"]
+  },
+  "include": [
+    "jest.config.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.d.ts"
+  ]
+}