mitre-form-component 0.0.1

package/src/components/styles/global.ts

@@ -0,0 +1,165 @@
+"use client";
+
+import { createGlobalStyle } from "styled-components";
+import React, { useEffect } from "react";
+
+export const GlobalStyles = createGlobalStyle`
+  :root {
+    --red: #e52e4d;
+    --white: #FFF;
+    --black: #2F2F2F;
+    --black-2:#1E1E1E;
+    --alphaBlack: #000000;
+    --black-2:#1E1E1E;
+    --black-3:#353535;
+
+    --yellow-400:#FFD789;
+    --yellow-500: #F6C76B;
+    --gray-40:#F0F0F0;
+    --gray-45:#767676;
+    --gray-50: #686A69;
+    --gray-60: #8F8F8F;
+    --gray-100: #B6B6B6;
+    --gray-150: #B9B9B9;
+    --gray-200: #D2D2D2;
+    --gray-300: #EBEBEB;
+    --gray-400: #ECECEC;
+    --gray-500: #F4F4F4;
+    --gray-550:#6F6F6F;
+    --gray-600:#686868;
+    --gray-700: #535353;
+    --gray-800:#9D9D9D;
+    --shadow-500: 0px 4px 8px rgba(91, 91, 91, 0.2);
+    --green:#57C06E;
+    --green-2:#2DCE68;
+    --blue:#007BFF;
+  }
+
+  * {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+  }
+
+  html {
+    scroll-behavior: smooth;
+
+    @media (max-width: 1080px) {
+      font-size: 93.75%;
+    }
+    @media (max-width: 720px) {
+      font-size: 87.5%;
+    }
+  }
+
+  body {
+    background: var(--white);
+    -webkit-font-smoothing: antialiased;
+  }
+
+  body, input, textarea, select, button {
+    font-family: "Montserrat", sans-serif;
+    font-weight: 400;
+  } 
+
+  h1, h2, h3, h4, h5, h6, strong {
+    font-weight: 600;
+  }
+
+  button {
+    cursor: pointer;
+  }
+
+  [disabled] {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+
+  .hidden {
+    overflow: hidden;
+  }
+
+  ::-webkit-scrollbar {
+    -webkit-appearance: none;
+    background: var(--gray-500);
+    width: 6px;
+    height: 10px;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background-color: var(--gray-50);
+  }
+
+  .aligncenter {
+    text-align: center;
+  }
+
+  .width-190px {
+    width:190px;
+  }
+
+  .hidden-content {
+    display:none !important;
+  }
+
+  .global-margin-bottom {
+    margin-bottom:20px;
+  }
+
+  .background-light-gray {
+    background:#F4F4F4;
+  }
+
+  .full-width-and-height {
+    height:100%;
+    width:100%;
+  }
+
+  .flex-direction-column {
+    flex-direction:column;
+  }
+
+  .bold {
+    font-weight:700;
+  }
+
+  .margin-center-x {
+    margin:0 auto;
+  }
+
+  .border-none {
+    border:none;
+  }
+
+  .text-center {
+    text-align:center;
+  }
+
+  .relative {
+    position:relative;
+  }
+
+  /* accessibility */
+  body ._access-menu p._text-center{
+    font-family: "Montserrat", sans-serif;
+    font-style: italic;
+    font-size: 1.2rem!important;
+    margin-top: 6px;
+    margin-bottom: 3px;
+  } 
+
+`;
+
+const FontLoader: React.FC = () => {
+  useEffect(() => {
+    const link = document.createElement("link");
+    link.href =
+      "https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap";
+    link.rel = "stylesheet";
+    document.head.appendChild(link);
+  }, []);
+
+  return null;
+};
+
+export default FontLoader;

package/src/components/styles/utils.ts

@@ -0,0 +1,56 @@
+type directionType = "column" | "row";
+type alignItemsType = "center" | "flex-start";
+
+type jutifyContentType = "center" | "space-between";
+
+export function flex(
+  direction: directionType = "row",
+  alignItems?: alignItemsType,
+  justifyContent?: jutifyContentType
+) {
+  return `
+    align-items:${alignItems || null};
+    display:flex;
+    flex-direction:${direction};
+    justify-content:${justifyContent || null};
+  `;
+}
+
+export const alignX = `
+  left:50%;
+  transform:translateX(-50%);
+`;
+
+export const alignXAndY = `
+  left:50%;
+  top:50%;
+  transform:translate(-50%, -50%);
+`;
+
+export const darkEffect = `
+  &:hover {
+    cursor:pointer;
+    filter:brightness(98%);
+  }
+
+  &:active {
+    filter:brightness(95%);
+  }
+`;
+
+export const opacityEffect = `
+  &:hover {
+    cursor:pointer;
+    opacity:.9;
+  }
+
+  &:active {
+    opacity:.7;
+  }
+`;
+
+export const modalZIndex = 9999;
+
+export const breakpoints = {
+  tablet: "1024px",
+};

package/src/index.ts

@@ -0,0 +1,4 @@
+"use client";
+
+export { default as MitreFormComponent } from "./components/Form";
+export type { MitreFormComponentProps } from "./components/Form";

package/src/main.tsx

@@ -0,0 +1,12 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import App from './App.tsx'
+import StyledComponentsRegistry from './registry'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <StyledComponentsRegistry>
+      <App />
+    </StyledComponentsRegistry>
+  </StrictMode>,
+)

package/src/registry.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import { StyleSheetManager } from 'styled-components'
+
+export default function StyledComponentsRegistry({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <StyleSheetManager>
+      {children}
+    </StyleSheetManager>
+  )
+}

package/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/tsconfig.build.json

@@ -0,0 +1,29 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "declaration": true,
+    "declarationMap": true,
+    "sourceMap": true,
+    "rootDir": "src",
+    "module": "ESNext",
+    "target": "ES2020",
+    "jsx": "react-jsx",
+    "moduleResolution": "node",
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "composite": true,
+    "incremental": true
+  },
+  "include": ["src/**/*"],
+  "exclude": [
+    "node_modules",
+    "dist",
+    "**/*.test.ts",
+    "**/*.test.tsx",
+    "**/__tests__/**",
+    "src/app/**"  
+  ]
+}

package/tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "allowJs": false,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src"],
+  "exclude": ["node_modules", "dist"]
+}

package/tsup.config.ts

@@ -0,0 +1,28 @@
+import { defineConfig } from "tsup";
+import { dependencies, peerDependencies } from "./package.json";
+
+export default defineConfig({
+  entry: ["src/index.ts"],
+  format: ["cjs", "esm"],
+  dts: {
+    compilerOptions: {
+      incremental: false,
+      skipLibCheck: true,
+    },
+  },
+  sourcemap: true,
+  clean: true,
+  loader: {
+    ".svg": "dataurl",
+  },
+  external: [
+    ...Object.keys(dependencies ?? {}),
+    ...Object.keys(peerDependencies ?? {}),
+  ],
+  esbuildOptions: (options) => {
+    (options.jsx = "automatic"), (options.treeShaking = true);
+  },
+  target: "es2020",
+  minify: process.env.NODE_ENV === "production",
+  splitting: false,
+});

package/vite.config.ts

@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react()],
+})