fix(datasheets): update PDF datasheets and generator for Class 2 conductor spec on NA cables

scripts/pdf/react-pdf/styles.ts

@@ -0,0 +1,270 @@
+import { Font, StyleSheet } from '@react-pdf/renderer';
+
+// Prevent automatic word hyphenation, which can create multi-line table headers
+// even when we try to keep them single-line.
+Font.registerHyphenationCallback((word) => [word]);
+
+export const COLORS = {
+  primary: '#001a4d',
+  primaryDark: '#000d26',
+  accent: '#82ed20',
+  textPrimary: '#111827',
+  textSecondary: '#4b5563',
+  textLight: '#9ca3af',
+  neutral: '#f8f9fa',
+  border: '#e5e7eb',
+} as const;
+
+export const styles = StyleSheet.create({
+  page: {
+    paddingTop: 0,
+    paddingLeft: 30,
+    paddingRight: 30,
+    paddingBottom: 60,
+    fontFamily: 'Helvetica',
+    fontSize: 10,
+    color: COLORS.textPrimary,
+    backgroundColor: '#FFFFFF',
+  },
+
+  // Hero-style header
+  hero: {
+    backgroundColor: '#FFFFFF',
+    paddingTop: 30,
+    paddingBottom: 0,
+    paddingHorizontal: 0,
+    marginBottom: 20,
+    position: 'relative',
+    borderBottomWidth: 0,
+    borderBottomColor: COLORS.border,
+  },
+  header: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: 24,
+    paddingHorizontal: 0,
+  },
+  headerLeft: { flexDirection: 'row', alignItems: 'center', gap: 10 },
+  logo: { width: 100, height: 22, objectFit: 'contain' },
+  brandFallback: {
+    fontSize: 20,
+    fontWeight: 700,
+    color: COLORS.primaryDark,
+    letterSpacing: 1,
+    textTransform: 'uppercase',
+  },
+  headerRight: { flexDirection: 'row', alignItems: 'center', gap: 10 },
+  headerTitle: {
+    fontSize: 9,
+    fontWeight: 700,
+    color: COLORS.primary,
+    letterSpacing: 1.5,
+    textTransform: 'uppercase',
+  },
+  qr: { width: 30, height: 30, objectFit: 'contain' },
+
+  productRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 20,
+  },
+  productInfoCol: {
+    flex: 1,
+    justifyContent: 'center',
+  },
+  productImageCol: {
+    flex: 1,
+    height: 120,
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: COLORS.border,
+    backgroundColor: '#FFFFFF',
+    overflow: 'hidden',
+  },
+
+  productHero: {
+    marginTop: 0,
+    paddingHorizontal: 0,
+  },
+  productName: {
+    fontSize: 24,
+    fontWeight: 700,
+    color: COLORS.primaryDark,
+    marginBottom: 0,
+    textTransform: 'uppercase',
+    letterSpacing: -0.5,
+  },
+  productMeta: {
+    fontSize: 9,
+    color: COLORS.textSecondary,
+    fontWeight: 700,
+    textTransform: 'uppercase',
+    letterSpacing: 1,
+    marginBottom: 4,
+  },
+
+  content: {
+    paddingHorizontal: 0,
+  },
+
+  footer: {
+    position: 'absolute',
+    left: 30,
+    right: 30,
+    bottom: 30,
+    paddingTop: 16,
+    borderTopWidth: 1,
+    borderTopColor: COLORS.border,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  footerBrand: {
+    fontSize: 9,
+    fontWeight: 700,
+    color: COLORS.primaryDark,
+    textTransform: 'uppercase',
+    letterSpacing: 1,
+  },
+  footerText: {
+    fontSize: 8,
+    color: COLORS.textLight,
+    fontWeight: 500,
+    textTransform: 'uppercase',
+    letterSpacing: 0.5,
+  },
+
+  h1: {
+    fontSize: 22,
+    fontWeight: 700,
+    color: COLORS.primaryDark,
+    marginBottom: 8,
+    textTransform: 'uppercase',
+  },
+  subhead: {
+    fontSize: 10,
+    fontWeight: 700,
+    color: COLORS.textSecondary,
+    marginBottom: 16,
+    textTransform: 'uppercase',
+    letterSpacing: 0.5,
+  },
+
+  heroBox: {
+    height: 180,
+    borderRadius: 12,
+    borderWidth: 1,
+    borderColor: COLORS.border,
+    backgroundColor: '#FFFFFF',
+    marginBottom: 24,
+    justifyContent: 'center',
+    overflow: 'hidden',
+    padding: 0,
+  },
+  heroImage: { width: '100%', height: '100%', objectFit: 'contain' },
+  noImage: { fontSize: 8, color: COLORS.textLight, textAlign: 'center' },
+
+  section: {
+    marginBottom: 10,
+  },
+  sectionTitle: {
+    fontSize: 14,
+    fontWeight: 700,
+    color: COLORS.primaryDark,
+    marginBottom: 8,
+    textTransform: 'uppercase',
+    letterSpacing: -0.2,
+  },
+  sectionAccent: {
+    width: 30,
+    height: 3,
+    backgroundColor: COLORS.accent,
+    marginBottom: 8,
+    borderRadius: 1.5,
+  },
+  body: { fontSize: 10, lineHeight: 1.6, color: COLORS.textSecondary },
+
+  kvGrid: {
+    width: '100%',
+    borderWidth: 1,
+    borderColor: COLORS.border,
+    borderRadius: 8,
+    overflow: 'hidden',
+  },
+  kvRow: {
+    flexDirection: 'row',
+    borderBottomWidth: 1,
+    borderBottomColor: COLORS.border,
+  },
+  kvRowAlt: { backgroundColor: COLORS.neutral },
+  kvRowLast: { borderBottomWidth: 0 },
+  kvCell: { paddingVertical: 3, paddingHorizontal: 12 },
+  kvMidDivider: {
+    borderRightWidth: 1,
+    borderRightColor: COLORS.border,
+  },
+  kvLabelText: {
+    fontSize: 8,
+    fontWeight: 700,
+    color: COLORS.primaryDark,
+    textTransform: 'uppercase',
+    letterSpacing: 0.3,
+  },
+  kvValueText: { fontSize: 9, color: COLORS.textPrimary, fontWeight: 500 },
+
+  tableWrap: {
+    width: '100%',
+    borderWidth: 1,
+    borderColor: COLORS.border,
+    borderRadius: 8,
+    overflow: 'hidden',
+    marginBottom: 16,
+  },
+  tableHeader: {
+    width: '100%',
+    flexDirection: 'row',
+    backgroundColor: COLORS.neutral,
+    borderBottomWidth: 1,
+    borderBottomColor: COLORS.border,
+  },
+  tableHeaderCell: {
+    paddingVertical: 8,
+    paddingHorizontal: 6,
+    fontSize: 7,
+    fontWeight: 700,
+    color: COLORS.primaryDark,
+    textTransform: 'uppercase',
+    letterSpacing: 0.2,
+  },
+  tableHeaderCellCfg: {
+    paddingHorizontal: 8,
+  },
+  tableHeaderCellDivider: {
+    borderRightWidth: 1,
+    borderRightColor: COLORS.border,
+  },
+  tableRow: {
+    width: '100%',
+    flexDirection: 'row',
+    borderBottomWidth: 1,
+    borderBottomColor: COLORS.border,
+  },
+  tableRowAlt: { backgroundColor: '#FFFFFF' },
+  tableCell: {
+    paddingVertical: 6,
+    paddingHorizontal: 6,
+    fontSize: 7,
+    color: COLORS.textSecondary,
+    fontWeight: 500,
+  },
+  tableCellCfg: {
+    paddingHorizontal: 8,
+  },
+  tableCellDivider: {
+    borderRightWidth: 1,
+    borderRightColor: COLORS.border,
+  },
+});