@oneplatformdev/ui 0.1.0-5 → 0.1.0-8

package/src_old/global.css

@@ -0,0 +1,275 @@
+@import 'tailwindcss';
+
+@plugin 'tailwindcss-animate';
+
+@custom-variant dark (&:is([data-mode="dark"] *));
+
+@utility container {
+  margin-inline: auto;
+  padding-inline: 2rem;
+  @media (width >= --theme(--breakpoint-sm)) {
+    max-width: none;
+  }
+  @media (width >= 1536px) {
+    max-width: 1536px;
+  }
+}
+
+@theme {
+  --breakpoint-sm: 480px;
+  --breakpoint-md: 768px;
+  --breakpoint-lg: 976px;
+  --breakpoint-xl: 1440px;
+
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+
+  --color-additional-green: hsl(var(--additional-green));
+  --color-additional-blue: hsl(var(--additional-blue));
+  --color-additional-yellow: hsl(var(--additional-yellow));
+  --color-additional-salmon: hsl(var(--additional-salmon));
+
+  --color-typography: hsl(var(--text-primary));
+  --color-typography-highlight: hsl(var(--text-highlight));
+  --color-typography-primary: hsl(var(--text-primary));
+  --color-typography-secondary: hsl(var(--text-secondary));
+  --color-typography-error: hsl(var(--text-error));
+  --color-typography-success: hsl(var(--text-success));
+  --color-typography-muted: hsl(var(--text-muted));
+
+  --color-gray-1: hsl(var(--gray-1));
+  --color-gray-2: hsl(var(--gray-2));
+  --color-gray-3: hsl(var(--gray-3));
+  --color-gray-4: hsl(var(--gray-4));
+  --color-gray-5: hsl(var(--gray-5));
+  --color-gray: hsl(var(--gray-1));
+
+  --color-background: hsl(var(--background));
+  --color-foreground: hsl(var(--foreground));
+
+  --color-card: hsl(var(--card));
+  --color-card-foreground: hsl(var(--card-foreground));
+
+  --color-popover: hsl(var(--popover));
+  --color-popover-foreground: hsl(var(--popover-foreground));
+
+  --color-greenner: hsl(var(--greenner));
+
+  --color-primary: hsl(var(--primary));
+  --color-primary-foreground: hsl(var(--primary-foreground));
+
+  --color-secondary: hsl(var(--secondary));
+  --color-secondary-foreground: hsl(var(--secondary-foreground));
+
+  --color-muted: hsl(var(--muted));
+  --color-muted-foreground: hsl(var(--muted-foreground));
+
+  --color-accent: hsl(var(--accent));
+  --color-accent-foreground: hsl(var(--accent-foreground));
+
+  --color-destructive: hsl(var(--destructive));
+  --color-destructive-foreground: hsl(var(--destructive-foreground));
+
+  --color-border: hsl(var(--border));
+  --color-input: hsl(var(--input));
+  --color-ring: hsl(var(--ring));
+
+  --color-chart-1: hsl(var(--chart-1));
+  --color-chart-2: hsl(var(--chart-2));
+  --color-chart-3: hsl(var(--chart-3));
+  --color-chart-4: hsl(var(--chart-4));
+  --color-chart-5: hsl(var(--chart-5));
+
+  --color-sidebar: hsl(var(--sidebar-background));
+  --color-sidebar-foreground: hsl(var(--sidebar-foreground));
+  --color-sidebar-primary: hsl(var(--sidebar-primary));
+  --color-sidebar-primary-foreground: hsl(var(--sidebar-primary-foreground));
+  --color-sidebar-accent: hsl(var(--sidebar-accent));
+  --color-sidebar-accent-foreground: hsl(var(--sidebar-accent-foreground));
+  --color-sidebar-border: hsl(var(--sidebar-border));
+  --color-sidebar-ring: hsl(var(--sidebar-ring));
+}
+
+/*
+  The default border color has changed to `currentcolor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentcolor);
+  }
+}
+
+@layer base {
+  :root {
+    /*--additional-green: 80 192 153;*/
+    /*--additional-blue: 93 170 238;*/
+    /*--additional-yellow: 255 197 101;*/
+    /*--additional-salmon: 249 131 124;*/
+
+    /*--text-highlight: var(--highlight); // 123 87 224;*/
+    /*--text-primary: 43 46 72;*/
+    /*--text-secondary: 125 125 125;*/
+    /*--text-error: 199 16 38;*/
+    /*--text-success: 11 138 0;*/
+    /*--text-muted: 39 39 42;*/
+
+    /*--gray-1: 220 220 221;*/
+    /*--gray-2: 241 243 244;*/
+    /*--gray-3: 220 227 235;*/
+    /*--gray-4: 51 78 104;*/
+    /*--gray-5: 87 103 118;*/
+
+    --additional-green: 166 58% 53%;
+    --additional-blue: 207 77% 65%;
+    --additional-yellow: 38 100% 70%;
+    --additional-salmon: 3 94% 73%;
+
+    --text-highlight: 258 79% 68%;
+    --text-primary: 231 25% 23%;
+    --text-secondary: 0 0% 49%;
+    --text-error: 350 92% 42%;
+    --text-success: 114 100% 27%;
+    --text-muted: 228 4% 16%;
+
+    --gray-1: 210 7% 87%;
+    --gray-2: 210 14% 95%;
+    --gray-3: 210 20% 89%;
+    --gray-4: 210 34% 30%;
+    --gray-5: 210 16% 40%;
+
+    --background: 0 0% 100%;
+    --foreground: 240 10% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 0 0% 99%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 240 10% 3.9%;
+    /*--primary: 0 100% 50%;*/
+    --primary: 240 5.9% 10%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 240 4.8% 95.9%;
+    --secondary-foreground: 240 5.9% 10%;
+    --muted: 240 4.8% 95.9%;
+    --muted-foreground: 240 3.8% 46.1%;
+    --accent: 240 4.8% 95.9%;
+    --accent-foreground: 240 5.9% 10%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 5.9% 90%;
+    --input: 228 8% 87%;
+    --ring: 240 5.9% 10%;
+
+    --radius: 0.5rem;
+
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+
+    --sidebar-background: 240 5.3% 3%;
+    --sidebar-foreground: 0 0% 98%;
+    --sidebar-primary: 220 6% 25%;
+    --sidebar-primary-foreground: 0 0% 98%;
+    --sidebar-accent: 220 6% 25%;
+    --sidebar-accent-foreground: 0 0% 100%;
+    --sidebar-border: 220 13% 91%;
+    --sidebar-ring: 217.2 15% 59.8%;
+  }
+
+  .dark {
+    /*--additional-green: 71 167 133;*/
+    /*--additional-blue: 83 149 207;*/
+    /*--additional-yellow: 239 176 71;*/
+    /*--additional-salmon: 249 131 124;*/
+
+    /*--text-highlight: var(--highlight); // 123 87 224;*/
+    /*--text-primary: 227 227 227;*/
+    /*--text-secondary: 184 192 204;*/
+    /*--text-error: 245 59 48;*/
+    /*--text-success: 42 163 31;*/
+    /*--text-muted: 39 39 42;*/
+
+    /*--gray-1: 13 15 17;*/
+    /*--gray-2: 25 29 50;*/
+    /*--gray-3: 38 44 54;*/
+    /*--gray-4: 51 78 104;*/
+    /*--gray-5: 87 103 118;*/
+
+    --additional-green: 166 58% 47%;
+    --additional-blue: 207 60% 57%;
+    --additional-yellow: 38 85% 61%;
+    --additional-salmon: 3 94% 73%;
+
+    --text-highlight: 258 79% 68%;
+    --text-primary: 0 0% 89%;
+    --text-secondary: 210 10% 76%;
+    --text-error: 356 91% 59%;
+    --text-success: 123 63% 40%;
+    --text-muted: 228 4% 16%;
+
+    --gray-1: 210 12% 6%;
+    --gray-2: 225 32% 15%;
+    --gray-3: 210 18% 18%;
+    --gray-4: 210 34% 30%;
+    --gray-5: 210 16% 40%;
+
+    --background: 240 10% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 240 10% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 240 10% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 240 5.9% 10%;
+    --secondary: 240 3.7% 15.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 240 3.7% 15.9%;
+    --muted-foreground: 240 5% 64.9%;
+    --accent: 240 3.7% 15.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 3.7% 15.9%;
+    --input: 240 3.7% 15.9%;
+    --ring: 240 4.9% 83.9%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+
+    --sidebar-background: 240 5.9% 10%;
+    --sidebar-foreground: 240 4.8% 95.9%;
+    --sidebar-primary: 224.3 76.3% 48%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-accent: 240 3.7% 15.9%;
+    --sidebar-accent-foreground: 240 4.8% 95.9%;
+    --sidebar-border: 240 3.7% 15.9%;
+    --sidebar-ring: 217.2 91.2% 59.8%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+.rdp-vhidden {
+  @apply hidden;
+}
+

package/src_old/index.ts

@@ -0,0 +1,72 @@
+import "./global.css"
+
+export * from './Accordion';
+export * from './Alert';
+export * from './AlertDialog';
+export * from './AreaChart';
+export * from './Aside';
+export * from './AspectRatio';
+export * from './Avatar';
+export * from './Badge';
+export * from './Breadcrumb';
+export * from './Button';
+export * from './ButtonIcon';
+export * from './Calendar';
+export * from './Card';
+export * from './Carousel';
+export * from './Chart';
+export * from './Checkbox';
+export * from './Collapsible';
+export * from './Combobox';
+export * from './Command';
+export * from './DataTable';
+export * from './DatePicker';
+export * from './Dialog';
+export * from './Drawer';
+export * from './DropdownMenu';
+export * from './Form';
+export * from './FormCheckbox';
+export * from './FormCombobox';
+export * from './FormDatePicker';
+export * from './FormInput';
+export * from './FormSelect';
+export * from './FormTextarea';
+export * from './Header';
+export * from './HoverCard';
+export * from './Input';
+export * from './InputOTP';
+export * from './Label';
+export * from './LazyLoader';
+export * from './LoadedIcon';
+export * from './LoadingMask';
+export * from './LoadingProgress';
+export * from './Menubar';
+export * from './NavigationMenu';
+export * from './Pagination';
+export * from './Popover';
+export * from './Progress';
+export * from './RadioGroup';
+export * from './Resizable';
+export * from './ScrollArea';
+export * from './Search';
+export * from './Select';
+export * from './Separator';
+export * from './Sheet';
+export * from './Sidebar';
+export * from './Skeleton';
+export * from './Slider';
+export * from './Sonner';
+export * from './Switch';
+export * from './Table';
+export * from './Tabs';
+export * from './Textarea';
+export * from './Theme';
+export * from './Toast';
+export * from './Toaster';
+export * from './Toggle';
+export * from './ToggleGroup';
+export * from './Tooltip';
+export * from './Dropzone';
+export * from './FormDropzone';
+export * from './TablePagination';
+

package/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "../utils"
+    },
+    {
+      "path": "../hooks"
+    },
+    {
+      "path": "./tsconfig.lib.json"
+    }
+  ],
+  "extends": "../../tsconfig.base.json"
+}

package/tsconfig.lib.json

@@ -0,0 +1,41 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "types": [
+      "node",
+      "@nx/react/typings/cssmodule.d.ts",
+      "@nx/react/typings/image.d.ts",
+      "vite/client"
+    ],
+    "rootDir": "src",
+    "jsx": "react-jsx",
+    "tsBuildInfoFile": "dist/tsconfig.lib.tsbuildinfo"
+  },
+  "exclude": [
+    "out-tsc",
+    "dist",
+    "**/*.spec.ts",
+    "**/*.test.ts",
+    "**/*.spec.tsx",
+    "**/*.test.tsx",
+    "**/*.spec.js",
+    "**/*.test.js",
+    "**/*.spec.jsx",
+    "**/*.test.jsx"
+  ],
+  "include": [
+    "src/**/*.js",
+    "src/**/*.jsx",
+    "src/**/*.ts",
+    "src/**/*.tsx"
+  ],
+  "references": [
+    {
+      "path": "../utils/tsconfig.lib.json"
+    },
+    {
+      "path": "../hooks/tsconfig.lib.json"
+    }
+  ]
+}

package/vite.config.ts

@@ -0,0 +1,67 @@
+/// <reference types='vitest' />
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import dts from 'vite-plugin-dts';
+import * as path from 'path';
+import tailwind from '@tailwindcss/vite'
+import { external } from "./external";
+import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
+import { nxCopyAssetsPlugin } from '@nx/vite/plugins/nx-copy-assets.plugin';
+import { defineConfig } from 'vite';
+import { globSync } from 'glob';
+
+export default defineConfig(() => ({
+  root: __dirname,
+  cacheDir: '../../node_modules/.vite/packages/ui',
+  plugins: [
+    react(),
+    tailwind(),
+    nxViteTsPaths(),
+    nxCopyAssetsPlugin([ '*.md', 'LICENSE', 'package.json' ]),
+    dts({
+      include: 'src',
+      entryRoot: 'src',
+      tsconfigPath: path.join(__dirname, 'tsconfig.lib.json')
+    }) ],
+  // See: https://vitejs.dev/guide/build.html#library-mode
+  build: {
+    outDir: './dist',
+    emptyOutDir: true,
+    reportCompressedSize: true,
+    commonjsOptions: {
+      transformMixedEsModules: true,
+    },
+    lib: {
+      name: '@oneplatformdev/ui',
+      formats: [ 'es' as const ],
+      cssFileName: 'global',
+      entry: {
+        index: path.resolve(__dirname, 'src/index.ts'),
+        ...Object.fromEntries(
+          globSync('src/**/*.{ts,tsx}').map((filename) => {
+            return [
+              path.relative(
+                'src',
+                filename.slice(0, filename.length - path.extname(filename).length)
+              ),
+              path.resolve(__dirname, filename),
+            ]
+          })
+        )
+      }
+    },
+    rollupOptions: {
+      external,
+      output: {
+        preserveModules: true,
+        preserveModulesRoot: 'src',
+        globals: {
+          path: 'path',
+          react: 'React',
+          'react-dom': 'ReactDOM',
+          tailwindcss: 'tailwindcss',
+        }
+      }
+    },
+  },
+}));