fix:css code style

apps/site/.stylelintrc.mjs

@@ -15,7 +15,7 @@ const CUSTOM_AT_RULES = [
 // Enforces certain selectors to be only in camelCase notation
 // We use these for id selectors and classname selectors
 const ONLY_ALLOW_CAMEL_CASE_SELECTORS = [
-  /^(?:[a-z]+(?:[A-Z][a-z]*)*)$/,
+  /^(?:[a-z0-9]+(?:[A-Z][a-z0-9]*)*)$/,
   { message: s => `Expected '${s}' to be in camelCase` },
 ];
 

apps/site/components/ApiDocs/StabilityIndex/index.module.css

@@ -1,47 +1,47 @@
 .stabilityIndex {
-  @apply py-3
-    px-4
-    flex
+  @apply flex
     flex-row
     items-center
     gap-2
-    text-white
-    rounded;
+    rounded
+    px-4
+    py-3
+    text-white;
 
-  .indexLelvel {
+  .indexLevel {
     @apply rounded-sm
-      text-sm
-      px-1.5;
+      px-1.5
+      text-sm;
   }
 
   &.stabilityLevel3 {
     @apply bg-info-600;
 
-    .indexLelvel {
+    .indexLevel {
       @apply bg-info-700;
     }
   }
 
   &.stabilityLevel2 {
     @apply bg-green-600;
 
-    .indexLelvel {
+    .indexLevel {
       @apply bg-green-700;
     }
   }
 
   &.stabilityLevel1 {
     @apply bg-warning-600;
 
-    .indexLelvel {
+    .indexLevel {
       @apply bg-warning-700;
     }
   }
 
   &.stabilityLevel0 {
     @apply bg-danger-600;
 
-    .indexLelvel {
+    .indexLevel {
       @apply bg-danger-700;
     }
   }

apps/site/components/ApiDocs/StabilityIndex/index.stories.tsx

@@ -1,6 +1,5 @@
 import type { Meta as MetaObj, StoryObj } from '@storybook/react';
 
-
 import StabilityIndex from '@/components/ApiDocs/StabilityIndex';
 
 type Story = StoryObj<typeof StabilityIndex>;
@@ -9,29 +8,33 @@ type Meta = MetaObj<typeof StabilityIndex>;
 export const Legacy: Story = {
   args: {
     level: 3,
-    children: 'Legacy. Although this feature is unlikely to be removed and is still covered by semantic versioning guarantees, it is no longer actively maintained, and other alternatives are available.'
+    children:
+      'Legacy. Although this feature is unlikely to be removed and is still covered by semantic versioning guarantees, it is no longer actively maintained, and other alternatives are available.',
   },
-}
+};
 
 export const Stable: Story = {
   args: {
     level: 2,
-    children: 'Stable. Compatibility with the npm ecosystem is a high priority.'
+    children:
+      'Stable. Compatibility with the npm ecosystem is a high priority.',
   },
-}
+};
 
 export const Experimental: Story = {
   args: {
     level: 1,
-    children: 'Experimental. The feature is not subject to semantic versioning rules. Non-backward compatible changes or removal may occur in any future release. Use of the feature is not recommended in production environments. Experimental features are subdivided into stages:'
+    children:
+      'Experimental. The feature is not subject to semantic versioning rules. Non-backward compatible changes or removal may occur in any future release. Use of the feature is not recommended in production environments. Experimental features are subdivided into stages:',
   },
-}
+};
 
 export const Deprecated: Story = {
   args: {
     level: 0,
-    children: 'Deprecated. The feature may emit warnings. Backward compatibility is not guaranteed.'
+    children:
+      'Deprecated. The feature may emit warnings. Backward compatibility is not guaranteed.',
   },
-}
+};
 
 export default { component: StabilityIndex } as Meta;

apps/site/components/ApiDocs/StabilityIndex/index.tsx

@@ -8,12 +8,15 @@ type StabilityIndexProps = PropsWithChildren<{
 }>;
 
 const StabilityIndex: FC<StabilityIndexProps> = ({ level, children }) => (
-    <div className={classNames(styles.stabilityIndex, styles[`stabilityLevel${level}`])}>
-      <span
-        className={styles.indexLelvel}
-      >{level}</span>{children}
-    </div>
-  );
-
+  <div
+    className={classNames(
+      styles.stabilityIndex,
+      styles[`stabilityLevel${level}`]
+    )}
+  >
+    <span className={styles.indexLevel}>{level}</span>
+    {children}
+  </div>
+);
 
 export default StabilityIndex;