@indico-data/design-system 2.49.0 → 2.51.0

package/src/stylesAndAnimations/utilityClasses/UtilityClassesData.ts

@@ -0,0 +1,230 @@
+export type UtilityClassData = {
+  className: string;
+  css: string;
+  category: string;
+  resolvedCss?: string;
+};
+
+export const utilityClassesData: UtilityClassData[] = [
+  // Border Utilities
+  {
+    className: 'border-primary',
+    css: 'border-color: var(--pf-primary-color);',
+    category: 'Border',
+  },
+  {
+    className: 'border-secondary',
+    css: 'border-color: var(--pf-secondary-color);',
+    category: 'Border',
+  },
+  {
+    className: 'border-tertiary',
+    css: 'border-color: var(--pf-tertiary-color);',
+    category: 'Border',
+  },
+  { className: 'border-gray', css: 'border-color: var(--pf-gray-color);', category: 'Border' },
+  { className: 'border-red', css: 'border-color: var(--pf-red-color);', category: 'Border' },
+  { className: 'border-orange', css: 'border-color: var(--pf-orange-color);', category: 'Border' },
+  { className: 'border-yellow', css: 'border-color: var(--pf-yellow-color);', category: 'Border' },
+  { className: 'border-green', css: 'border-color: var(--pf-green-color);', category: 'Border' },
+  { className: 'border-purple', css: 'border-color: var(--pf-purple-color);', category: 'Border' },
+  { className: 'border-thin', css: 'border-width: var(--pf-border-thin);', category: 'Border' },
+  { className: 'border-sm', css: 'border-width: var(--pf-border-sm);', category: 'Border' },
+  { className: 'border-md', css: 'border-width: var(--pf-border-md);', category: 'Border' },
+  { className: 'border-lg', css: 'border-width: var(--pf-border-lg);', category: 'Border' },
+  { className: 'border-xl', css: 'border-width: var(--pf-border-xl);', category: 'Border' },
+  { className: 'border-dashed', css: 'border-style: dashed;', category: 'Border' },
+  { className: 'border-dotted', css: 'border-style: dotted;', category: 'Border' },
+  { className: 'border-double', css: 'border-style: double;', category: 'Border' },
+  { className: 'border-solid', css: 'border-style: solid;', category: 'Border' },
+  { className: 'rounded', css: 'border-radius: var(--pf-rounded);', category: 'Border' },
+  { className: 'rounded-0', css: 'border-radius: var(--pf-rounded-0);', category: 'Border' },
+  { className: 'rounded-sm', css: 'border-radius: var(--pf-rounded-sm);', category: 'Border' },
+  { className: 'rounded-md', css: 'border-radius: var(--pf-rounded-md);', category: 'Border' },
+  { className: 'rounded-lg', css: 'border-radius: var(--pf-rounded-lg);', category: 'Border' },
+  { className: 'rounded-xl', css: 'border-radius: var(--pf-rounded-xl);', category: 'Border' },
+  { className: 'rounded-pill', css: 'border-radius: var(--pf-rounded-pill);', category: 'Border' },
+  {
+    className: 'rounded-circle',
+    css: 'border-radius: var(--pf-rounded-circle);',
+    category: 'Border',
+  },
+  {
+    className: 'rounded-shaped',
+    css: 'border-radius: var(--pf-rounded-shaped);',
+    category: 'Border',
+  },
+
+  // Color Utilities
+  { className: 'color-primary', css: 'color: var(--pf-primary-color);', category: 'Color' },
+  { className: 'color-secondary', css: 'color: var(--pf-secondary-color);', category: 'Color' },
+  { className: 'color-tertiary', css: 'color: var(--pf-tertiary-color);', category: 'Color' },
+  { className: 'color-gray', css: 'color: var(--pf-gray-color);', category: 'Color' },
+  { className: 'color-red', css: 'color: var(--pf-red-color);', category: 'Color' },
+  { className: 'color-orange', css: 'color: var(--pf-orange-color);', category: 'Color' },
+  { className: 'color-yellow', css: 'color: var(--pf-yellow-color);', category: 'Color' },
+  { className: 'color-green', css: 'color: var(--pf-green-color);', category: 'Color' },
+  { className: 'color-purple', css: 'color: var(--pf-purple-color);', category: 'Color' },
+  { className: 'color-success', css: 'color: var(--pf-success-color);', category: 'Color' },
+  { className: 'color-info', css: 'color: var(--pf-info-color);', category: 'Color' },
+  { className: 'color-neutral', css: 'color: var(--pf-neutral-color);', category: 'Color' },
+  { className: 'color-warning', css: 'color: var(--pf-warning-color);', category: 'Color' },
+  { className: 'color-error', css: 'color: var(--pf-error-color);', category: 'Color' },
+  { className: 'color-brand', css: 'color: var(--pf-brand-color);', category: 'Color' },
+
+  // Typography Utilities
+  {
+    className: 'text-h1',
+    css: 'font-size: var(--pf-font-size-h1); font-weight: var(--pf-font-weight-bold);',
+    category: 'Typography',
+  },
+  {
+    className: 'text-h2',
+    css: 'font-size: var(--pf-font-size-h2); font-weight: var(--pf-font-weight-bold);',
+    category: 'Typography',
+  },
+  {
+    className: 'text-h3',
+    css: 'font-size: var(--pf-font-size-h3); font-weight: var(--pf-font-weight-bold);',
+    category: 'Typography',
+  },
+  {
+    className: 'text-h4',
+    css: 'font-size: var(--pf-font-size-h4); font-weight: var(--pf-font-weight-bold);',
+    category: 'Typography',
+  },
+  {
+    className: 'text-h5',
+    css: 'font-size: var(--pf-font-size-h5); font-weight: var(--pf-font-weight-bold);',
+    category: 'Typography',
+  },
+  { className: 'text-body', css: 'font-size: var(--pf-font-size-body);', category: 'Typography' },
+  {
+    className: 'text-body-2',
+    css: 'font-size: var(--pf-font-size-body2);',
+    category: 'Typography',
+  },
+  {
+    className: 'subtitle',
+    css: 'font-size: var(--pf-font-size-subtitle);',
+    category: 'Typography',
+  },
+  {
+    className: 'subtitle-2',
+    css: 'font-size: var(--pf-font-size-subtitle2);',
+    category: 'Typography',
+  },
+  {
+    className: 'text-caption',
+    css: 'font-size: var(--pf-font-size-caption);',
+    category: 'Typography',
+  },
+  {
+    className: 'text-overline',
+    css: 'font-size: var(--pf-font-size-overline); text-transform: uppercase;',
+    category: 'Typography',
+  },
+  { className: 'text-capitalize', css: 'text-transform: capitalize;', category: 'Typography' },
+  { className: 'text-uppercase', css: 'text-transform: uppercase;', category: 'Typography' },
+  { className: 'text-lowercase', css: 'text-transform: lowercase;', category: 'Typography' },
+  { className: 'text-decoration--none', css: 'text-decoration: none;', category: 'Typography' },
+  {
+    className: 'text-decoration--underline',
+    css: 'text-decoration: underline;',
+    category: 'Typography',
+  },
+  {
+    className: 'text-decoration--line-through',
+    css: 'text-decoration: line-through;',
+    category: 'Typography',
+  },
+  {
+    className: 'text-decoration--overline',
+    css: 'text-decoration: overline;',
+    category: 'Typography',
+  },
+  {
+    className: 'text-weight--thin',
+    css: 'font-weight: var(--pf-font-weight-thin);',
+    category: 'Typography',
+  },
+  {
+    className: 'text-weight--light',
+    css: 'font-weight: var(--pf-font-weight-light);',
+    category: 'Typography',
+  },
+  {
+    className: 'text-weight--regular',
+    css: 'font-weight: var(--pf-font-weight-regular);',
+    category: 'Typography',
+  },
+  {
+    className: 'text-weight--medium',
+    css: 'font-weight: var(--pf-font-weight-medium);',
+    category: 'Typography',
+  },
+  {
+    className: 'text-weight--bold',
+    css: 'font-weight: var(--pf-font-weight-bold);',
+    category: 'Typography',
+  },
+  {
+    className: 'text-weight--heavy',
+    css: 'font-weight: var(--pf-font-weight-heavy);',
+    category: 'Typography',
+  },
+  { className: 'text-align--left', css: 'text-align: left;', category: 'Typography' },
+  { className: 'text-align--center', css: 'text-align: center;', category: 'Typography' },
+  { className: 'text-align--right', css: 'text-align: right;', category: 'Typography' },
+  { className: 'text-opacity--0', css: 'opacity: 0;', category: 'Typography' },
+  { className: 'text-opacity--50', css: 'opacity: 0.5;', category: 'Typography' },
+  { className: 'text-opacity--100', css: 'opacity: 1;', category: 'Typography' },
+  { className: 'text-break--word', css: 'overflow-wrap: break-word;', category: 'Typography' },
+
+  // Sizing Utilities
+  { className: 'ma-auto', css: 'margin: auto;', category: 'Sizing' },
+  { className: 'ma-0', css: 'margin: var(--pf-margin-0);', category: 'Sizing' },
+  { className: 'ma-1', css: 'margin: var(--pf-margin-1);', category: 'Sizing' },
+  { className: 'ma-2', css: 'margin: var(--pf-margin-2);', category: 'Sizing' },
+  { className: 'ma-3', css: 'margin: var(--pf-margin-3);', category: 'Sizing' },
+  { className: 'ma-4', css: 'margin: var(--pf-margin-4);', category: 'Sizing' },
+  { className: 'ma-5', css: 'margin: var(--pf-margin-5);', category: 'Sizing' },
+  { className: 'ma-6', css: 'margin: var(--pf-margin-6);', category: 'Sizing' },
+  { className: 'ma-7', css: 'margin: var(--pf-margin-7);', category: 'Sizing' },
+  { className: 'ma-8', css: 'margin: var(--pf-margin-8);', category: 'Sizing' },
+  { className: 'ma-9', css: 'margin: var(--pf-margin-9);', category: 'Sizing' },
+  { className: 'ma-10', css: 'margin: var(--pf-margin-10);', category: 'Sizing' },
+  { className: 'ma-11', css: 'margin: var(--pf-margin-11);', category: 'Sizing' },
+  { className: 'ma-12', css: 'margin: var(--pf-margin-12);', category: 'Sizing' },
+  { className: 'ma-13', css: 'margin: var(--pf-margin-13);', category: 'Sizing' },
+  { className: 'ma-14', css: 'margin: var(--pf-margin-14);', category: 'Sizing' },
+  { className: 'ma-15', css: 'margin: var(--pf-margin-15);', category: 'Sizing' },
+  { className: 'ma-16', css: 'margin: var(--pf-margin-16);', category: 'Sizing' },
+  { className: 'pa-0', css: 'padding: var(--pf-padding-0);', category: 'Sizing' },
+  { className: 'pa-1', css: 'padding: var(--pf-padding-1);', category: 'Sizing' },
+  { className: 'pa-2', css: 'padding: var(--pf-padding-2);', category: 'Sizing' },
+  { className: 'pa-3', css: 'padding: var(--pf-padding-3);', category: 'Sizing' },
+  { className: 'pa-4', css: 'padding: var(--pf-padding-4);', category: 'Sizing' },
+  { className: 'pa-5', css: 'padding: var(--pf-padding-5);', category: 'Sizing' },
+  { className: 'pa-6', css: 'padding: var(--pf-padding-6);', category: 'Sizing' },
+  { className: 'pa-7', css: 'padding: var(--pf-padding-7);', category: 'Sizing' },
+  { className: 'pa-8', css: 'padding: var(--pf-padding-8);', category: 'Sizing' },
+  { className: 'pa-9', css: 'padding: var(--pf-padding-9);', category: 'Sizing' },
+  { className: 'pa-10', css: 'padding: var(--pf-padding-10);', category: 'Sizing' },
+  { className: 'pa-11', css: 'padding: var(--pf-padding-11);', category: 'Sizing' },
+  { className: 'pa-12', css: 'padding: var(--pf-padding-12);', category: 'Sizing' },
+  { className: 'pa-13', css: 'padding: var(--pf-padding-13);', category: 'Sizing' },
+  { className: 'pa-14', css: 'padding: var(--pf-padding-14);', category: 'Sizing' },
+  { className: 'pa-15', css: 'padding: var(--pf-padding-15);', category: 'Sizing' },
+  { className: 'pa-16', css: 'padding: var(--pf-padding-16);', category: 'Sizing' },
+
+  // Icon Sizes
+  { className: 'icon-xs', css: 'font-size: var(--pf-icon-size-xs);', category: 'Icon' },
+  { className: 'icon-sm', css: 'font-size: var(--pf-icon-size-sm);', category: 'Icon' },
+  { className: 'icon-md', css: 'font-size: var(--pf-icon-size-md);', category: 'Icon' },
+  { className: 'icon-lg', css: 'font-size: var(--pf-icon-size-lg);', category: 'Icon' },
+  { className: 'icon-xl', css: 'font-size: var(--pf-icon-size-xl);', category: 'Icon' },
+
+  // Drop Shadows
+  { className: 'dropshadow', css: 'box-shadow: var(--pf-dropshadow);', category: 'Effect' },
+];

package/src/stylesAndAnimations/utilityClasses/UtilityClassesTable.stories.tsx

@@ -0,0 +1,13 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { UtilityClassesTable } from './UtilityClassesTable';
+
+const meta: Meta<typeof UtilityClassesTable> = {
+  title: 'remove/Utility Classes/Table',
+  component: UtilityClassesTable,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof UtilityClassesTable>;
+
+export const Default: Story = {};

package/src/stylesAndAnimations/utilityClasses/UtilityClassesTable.tsx

@@ -0,0 +1,146 @@
+import React, { useState, useEffect } from 'react';
+import { Table, Select, Input, Container, Row, Col } from '@/components';
+import { MultiValue, SingleValue, ActionMeta } from 'react-select';
+import { UtilityClassData, utilityClassesData } from './UtilityClassesData';
+
+const categories = Array.from(new Set(utilityClassesData.map((item) => item.category)));
+
+// Resolve CSS variables using getComputedStyle
+const resolveCssVariables = (css: string): string => {
+  const tempElement = document.createElement('div');
+  document.body.appendChild(tempElement);
+  const style = getComputedStyle(tempElement);
+
+  const resolvedCss = css.replace(/var\((--pf-[\w-]+)\)/g, (_, variable) => {
+    return style.getPropertyValue(variable).trim() || variable;
+  });
+
+  document.body.removeChild(tempElement);
+  return resolvedCss;
+};
+
+const formatCss = (css: string): string => {
+  return css
+    .split(';')
+    .filter(Boolean)
+    .map((line) => line.trim() + ';')
+    .join('\n');
+};
+
+export const UtilityClassesTable = () => {
+  const [classNameSearch, setClassNameSearch] = useState('');
+  const [cssSearch, setCssSearch] = useState('');
+  const [selectedCategories, setSelectedCategories] = useState<string[]>([]);
+  const [rowData, setRowData] = useState<UtilityClassData[]>([]);
+
+  useEffect(() => {
+    const resolved = utilityClassesData.map((item) => ({
+      ...item,
+      resolvedCss: resolveCssVariables(item.css),
+    }));
+    setRowData(resolved);
+  }, []);
+
+  const handleCategoryChange = (
+    newValue:
+      | MultiValue<{ value: string; label: string }>
+      | SingleValue<{ value: string; label: string }>,
+  ) => {
+    setSelectedCategories(Array.isArray(newValue) ? newValue.map((option) => option.value) : []);
+  };
+
+  const filteredData = rowData.filter(
+    (item) =>
+      (selectedCategories.length === 0 || selectedCategories.includes(item.category)) &&
+      item.className.toLowerCase().includes(classNameSearch.toLowerCase()) &&
+      (item.css.toLowerCase().includes(cssSearch.toLowerCase()) ||
+        item.resolvedCss?.toLowerCase().includes(cssSearch.toLowerCase())),
+  );
+
+  return (
+    <Container>
+      <Row className="mb-4">
+        <Col sm={4}>
+          <Input
+            id="classNameSearch"
+            name="classNameSearch"
+            label="Class Name"
+            value={classNameSearch}
+            onChange={(e) => setClassNameSearch(e.target.value)}
+          />
+        </Col>
+        <Col sm={4}>
+          <Input
+            id="cssSearch"
+            name="cssSearch"
+            label="CSS"
+            value={cssSearch}
+            onChange={(e) => setCssSearch(e.target.value)}
+          />
+        </Col>
+        <Col sm={4}>
+          <div className="form-control">
+            <div data-testid={`category-label`} className={`form-label mb-2`}>
+              <label htmlFor={`categoryFilter`}>Category</label>
+            </div>
+            <Select
+              id="categoryFilter"
+              name="categoryFilter"
+              options={categories.map((category) => ({ value: category, label: category }))}
+              onChange={handleCategoryChange}
+              value={categories
+                .filter((category) => selectedCategories.includes(category))
+                .map((category) => ({ value: category, label: category }))}
+              placeholder=""
+              isMulti
+              isClearable
+            />
+          </div>
+        </Col>
+      </Row>
+
+      <Table
+        columns={[
+          { name: 'Class Name', selector: (row) => row.className, sortable: true, width: '225px' },
+          {
+            name: 'CSS Applied',
+            selector: (row) => formatCss(row.css),
+            sortable: true,
+            cell: (row) => (
+              <pre
+                style={{
+                  fontFamily: 'monospace',
+                  whiteSpace: 'pre-wrap',
+                  fontSize: '12px',
+                }}
+              >
+                {formatCss(row.css)}
+              </pre>
+            ),
+          },
+          {
+            name: 'Resolved CSS',
+            selector: (row) => formatCss(row.resolvedCss || ''),
+            sortable: true,
+            cell: (row) => (
+              <pre
+                style={{
+                  fontFamily: 'monospace',
+                  whiteSpace: 'pre-wrap',
+                  fontSize: '12px',
+                }}
+              >
+                {formatCss(row.resolvedCss || '')}
+              </pre>
+            ),
+          },
+          { name: 'Category', selector: (row) => row.category, sortable: true, width: '114px' },
+        ]}
+        data={filteredData}
+        dense
+        noDataComponent="-- No Classes Found --"
+        pagination={false}
+      />
+    </Container>
+  );
+};