fix: covert stories to ts

packages/core/src/stories/utility/utility-classes/align.stories.ts

@@ -0,0 +1,37 @@
+import type { Meta } from '@storybook/html';
+import hljs from 'highlight.js';
+import 'highlight.js/styles/default.css';
+
+const meta: Meta = {
+  title: 'Utilities/Utility Classes/Align',
+  parameters: {
+    layout: 'fullscreen',
+    options: {
+      showPanel: false,
+      showToolbar: true,
+    },
+  },
+};
+
+export default meta;
+export const Align = {
+  render: () => {
+    const code = `
+      .tds-u-align-start {
+        align-items: start !important;
+      }
+
+      .tds-u-align-center {
+        align-items: center !important;
+      }
+
+      .tds-u-align-end {
+        align-items: end !important;
+      }
+    `;
+
+    const highlightedCode = hljs.highlight(code, { language: 'css' }).value;
+
+    return `<pre><code class="hljs">${highlightedCode}</code></pre>`;
+  },
+};

packages/core/src/stories/utility/utility-classes/display.stories.ts

@@ -0,0 +1,49 @@
+import type { Meta } from '@storybook/html';
+import hljs from 'highlight.js';
+import 'highlight.js/styles/default.css';
+
+const meta: Meta = {
+  title: 'Utilities/Utility Classes/Display',
+  parameters: {
+    layout: 'fullscreen',
+    options: {
+      showPanel: false,
+      showToolbar: true,
+    },
+  },
+};
+
+export default meta;
+export const Display = {
+  render: () => {
+    const code = `
+      .tds-u-flex {
+        display: flex !important;
+      }
+
+      .tds-u-inline-flex {
+        display: inline-flex;
+      }
+
+      .tds-u-block {
+        display: block !important;
+      }
+
+      .tds-u-inline-block {
+        display: inline-block !important;
+      }
+
+      .tds-u-grid {
+        display: grid !important;
+      }
+
+      .tds-u-display-none {
+        display: none !important;
+      }
+    `;
+
+    const highlightedCode = hljs.highlight(code, { language: 'css' }).value;
+
+    return `<pre><code class="hljs">${highlightedCode}</code></pre>`;
+  },
+};

packages/core/src/stories/utility/utility-classes/flex.stories.ts

@@ -0,0 +1,49 @@
+import type { Meta } from '@storybook/html';
+import hljs from 'highlight.js';
+import 'highlight.js/styles/default.css';
+
+const meta: Meta = {
+  title: 'Utilities/Utility Classes/Flex',
+  parameters: {
+    layout: 'fullscreen',
+    options: {
+      showPanel: false,
+      showToolbar: true,
+    },
+  },
+};
+
+export default meta;
+export const Flex = {
+  render: () => {
+    const code = `
+      .tds-u-flex-start {
+        display: flex !important;
+        justify-content: flex-start !important;
+      }
+
+      .tds-u-flex-end {
+        display: flex !important;
+        justify-content: flex-end !important;
+      }
+
+      .tds-u-flex-center {
+        display: flex !important;
+        justify-content: center !important;
+        align-items: center !important;
+      }
+
+      .tds-u-flex-dir-col {
+        flex-direction: column !important;
+      }
+
+      .tds-u-flex-wrap {
+        flex-wrap: wrap !important;
+      }
+    `;
+
+    const highlightedCode = hljs.highlight(code, { language: 'css' }).value;
+
+    return `<pre><code class="hljs">${highlightedCode}</code></pre>`;
+  },
+};

packages/core/src/stories/utility/utility-classes/float.stories.ts

@@ -0,0 +1,37 @@
+import type { Meta } from '@storybook/html';
+import hljs from 'highlight.js';
+import 'highlight.js/styles/default.css';
+
+const meta: Meta = {
+  title: 'Utilities/Utility Classes/Float',
+  parameters: {
+    layout: 'fullscreen',
+    options: {
+      showPanel: false,
+      showToolbar: true,
+    },
+  },
+};
+
+export default meta;
+export const Float = {
+  render: () => {
+    const code = `
+      .tds-u-float-right {
+        float: right !important;
+      }
+
+      .tds-u-float-left {
+        float: left !important;
+      }
+
+      .tds-u-float-none {
+        float: none !important;
+      }
+    `;
+
+    const highlightedCode = hljs.highlight(code, { language: 'css' }).value;
+
+    return `<pre><code class="hljs">${highlightedCode}</code></pre>`;
+  },
+};

packages/core/src/stories/utility/utility-classes/gap.stories.ts

@@ -0,0 +1,41 @@
+import type { Meta } from '@storybook/html';
+import hljs from 'highlight.js';
+import 'highlight.js/styles/default.css';
+
+const meta: Meta = {
+  title: 'Utilities/Utility Classes/Gap',
+  parameters: {
+    layout: 'fullscreen',
+    options: {
+      showPanel: false,
+      showToolbar: true,
+    },
+  },
+};
+
+export default meta;
+export const Gap = {
+  render: () => {
+    const code = `
+      .tds-u-gap1 {
+        gap: 8px !important;
+      }
+
+      .tds-u-gap2 {
+        gap: 16px !important;
+      }
+
+      .tds-u-gap3 {
+        gap: 24px !important;
+      }
+
+      .tds-u-gap4 {
+        gap: 32px !important;
+      }
+    `;
+
+    const highlightedCode = hljs.highlight(code, { language: 'css' }).value;
+
+    return `<pre><code class="hljs">${highlightedCode}</code></pre>`;
+  },
+};

packages/core/src/stories/utility/utility-classes/height.stories.ts

@@ -0,0 +1,45 @@
+import type { Meta } from '@storybook/html';
+import hljs from 'highlight.js';
+import 'highlight.js/styles/default.css';
+
+const meta: Meta = {
+  title: 'Utilities/Utility Classes/Height',
+  parameters: {
+    layout: 'fullscreen',
+    options: {
+      showPanel: false,
+      showToolbar: true,
+    },
+  },
+};
+
+export default meta;
+export const Height = {
+  render: () => {
+    const code = `     
+      .tds-u-h-auto {
+        height: auto !important;
+      }
+
+      .tds-u-h-100 {
+        height: 100% !important;
+      }
+
+      .tds-u-h-75 {
+        height: 75% !important;
+      }
+
+      .tds-u-h-50 {
+        height: 50% !important;
+      }
+
+      .tds-u-h-25 {
+        height: 25% !important;
+      }
+    `;
+
+    const highlightedCode = hljs.highlight(code, { language: 'css' }).value;
+
+    return `<pre><code class="hljs">${highlightedCode}</code></pre>`;
+  },
+};