Change icons name to camelCase, standard typo fix

Author: Mykola Ptushchuk

src/components/Icon/Icon.stories.tsx

@@ -3,16 +3,20 @@ import { Meta, StoryObj } from "@storybook/react";
 
 import Icon, {
   ICONS,
-  STANDART_ICONS,
+  STANDARD_ICONS,
   ADDITIONAL_ICONS,
   SOCIAL_ICONS,
   STATUS_ICONS,
 } from "./Icon";
 
 import "./Icon.stories.scss";
 
+const Template = ({ name }: { name: keyof typeof ICONS }) => (
+  <Icon name={ICONS[name]} />
+);
+
 const meta: Meta<typeof Icon> = {
-  component: Icon,
+  component: Template,
   tags: ["autodocs"],
 };
 
@@ -33,16 +37,16 @@ export const Base: Story = {
   },
 };
 
-export const Standart: Story = {
-  name: "Standart",
+export const Standard: Story = {
+  name: "Standard",
   argTypes: {
     name: {
-      options: Object.keys(STANDART_ICONS),
+      options: Object.keys(STANDARD_ICONS),
       control: { type: "select" },
     },
   },
   args: {
-    name: STANDART_ICONS.plus,
+    name: STANDARD_ICONS.plus,
   },
 };
 
@@ -88,7 +92,7 @@ export const Additional: Story = {
 };
 
 const allIcons = {
-  Standard: STANDART_ICONS,
+  Standard: STANDARD_ICONS,
   Additional: ADDITIONAL_ICONS,
   Social: SOCIAL_ICONS,
   Status: STATUS_ICONS,
@@ -101,19 +105,19 @@ export const AllIcons: Story = {
   render: () => (
     <>
       {Object.entries(allIcons).map(([name, icons]) => (
-        <>
+        <div key={name}>
           <h2>{name}</h2>
           <div className="grid-row">
             {Object.keys(icons).map((icon) => (
               <div key={icon} className="p-card grid-col-2">
                 <p>
-                  <Icon name={icon} style={{ marginRight: ".5rem" }} />
+                  <Icon name={ICONS[icon]} style={{ marginRight: ".5rem" }} />
                   <span>{icon}</span>
                 </p>
               </div>
             ))}
           </div>
-        </>
+        </div>
       ))}
     </>
   ),

src/components/Icon/Icon.tsx

@@ -4,21 +4,21 @@ import React from "react";
 
 import type { ClassName, PropsWithSpread, ValueOf } from "types";
 
-export const STANDART_ICONS = {
+export const STANDARD_ICONS = {
   anchor: "anchor",
-  "chevron-down": "chevron-down",
-  "chevron-left": "chevron-left",
-  "chevron-right": "chevron-right",
-  "chevron-up": "chevron-up",
+  chevronDown: "chevron-down",
+  chevronLeft: "chevron-left",
+  chevronRight: "chevron-right",
+  chevronUp: "chevron-up",
   close: "close",
   code: "code",
   collapse: "collapse",
   copy: "copy",
   delete: "delete",
   drag: "drag",
-  "error-grey": "error-grey",
+  errorGrey: "error-grey",
   expand: "expand",
-  "external-link": "external-link",
+  externalLink: "external-link",
   help: "help",
   hide: "hide",
   menu: "menu",
@@ -28,7 +28,7 @@ export const STANDART_ICONS = {
   share: "share",
   show: "show",
   spinner: "spinner",
-  "success-grey": "success-grey",
+  successGrey: "success-grey",
   user: "user",
 } as const;
 
@@ -47,94 +47,94 @@ export const ADDITIONAL_ICONS = {
   machines: "machines",
   pin: "pin",
   units: "units",
-  "priority-critical": "priority-critical",
-  "priority-high": "priority-high",
-  "priority-low": "priority-low",
-  "priority-medium": "priority-medium",
-  "priority-negligible": "priority-negligible",
-  "priority-unknown": "priority-unknown",
-  "add-canvas": "add-canvas",
-  "add-logical-volume": "add-logical-volume",
-  "add-partition": "add-partition",
-  "back-to-top": "back-to-top",
-  "begin-downloading": "begin-downloading",
+  priorityCritical: "priority-critical",
+  priorityHigh: "priority-high",
+  priorityLow: "priority-low",
+  priorityMedium: "priority-medium",
+  priorityNegligible: "priority-negligible",
+  priorityUnknown: "priority-unknown",
+  addCanvas: "add-canvas",
+  addLogicalVolume: "add-logical-volume",
+  addPartition: "add-partition",
+  backToTop: "back-to-top",
+  beginDownloading: "begin-downloading",
   bundle: "bundle",
   canvas: "canvas",
-  "change-version": "change-version",
+  changeVersion: "change-version",
   comments: "comments",
-  "conflict-grey": "conflict-grey",
-  "conflict-resolution-grey": "conflict-resolution-grey",
-  "conflict-resolution": "conflict-resolution",
+  conflictGrey: "conflict-grey",
+  conflictResolutionGrey: "conflict-resolution-grey",
+  conflictResolution: "conflict-resolution",
   conflict: "conflict",
   connected: "connected",
   containers: "containers",
-  "copy-to-clipboard": "copy-to-clipboard",
+  copyToClipboard: "copy-to-clipboard",
   desktop: "desktop",
   disconnect: "disconnect",
   edit: "edit",
   export: "export",
   exposed: "exposed",
   filter: "filter",
   fork: "fork",
-  "get-link": "get-link",
-  "halfscreen-bar": "halfscreen-bar",
-  "highlight-off": "highlight-off",
-  "highlight-on": "highlight-on",
+  getLink: "get-link",
+  halfscreenBar: "halfscreen-bar",
+  highlightOff: "highlight-off",
+  highlightOn: "highlight-on",
   home: "home",
   import: "import",
-  "in-progress": "in-progress",
-  "inspector-debug": "inspector-debug",
-  "loading-steps": "loading-steps",
-  "lock-locked-active": "lock-locked-active",
-  "lock-locked": "lock-locked",
-  "lock-unlock": "lock-unlock",
-  "maximise-bar": "maximise-bar",
-  "minimise-bar": "minimise-bar",
-  "mount-2": "mount-2",
+  inProgress: "in-progress",
+  inspectorDebug: "inspector-debug",
+  loadingSteps: "loading-steps",
+  lockLockedActive: "lock-locked-active",
+  lockLocked: "lock-locked",
+  lockUnlock: "lock-unlock",
+  maximiseBar: "maximise-bar",
+  minimiseBar: "minimise-bar",
+  mount2: "mount-2",
   mount: "mount",
-  "open-terminal": "open-terminal",
+  openTerminal: "open-terminal",
   pause: "pause",
   plans: "plans",
   play: "play",
   pods: "pods",
-  "power-error": "power-error",
-  "power-off": "power-off",
-  "power-on": "power-on",
+  powerError: "power-error",
+  powerOff: "power-off",
+  powerOn: "power-on",
   profile: "profile",
   restart: "restart",
   revisions: "revisions",
   security: "security",
   settings: "settings",
-  "sort-both": "sort-both",
-  "sort-down": "sort-down",
-  "sort-up": "sort-up",
+  sortBoth: "sort-both",
+  sortDown: "sort-down",
+  sortUp: "sort-up",
   starred: "starred",
-  "status-failed-small": "status-failed-small",
-  "status-in-progress-small": "status-in-progress-small",
-  "status-in-progress": "status-in-progress",
-  "status-queued-small": "status-queued-small",
-  "status-queued": "status-queued",
-  "status-succeeded-small": "status-succeeded-small",
-  "status-waiting-small": "status-waiting-small",
-  "status-waiting": "status-waiting",
+  statusFailedSmall: "status-failed-small",
+  statusInProgressSmall: "status-in-progress-small",
+  statusInProgress: "status-in-progress",
+  statusQueuedSmall: "status-queued-small",
+  statusQueued: "status-queued",
+  statusSucceededSmall: "status-succeeded-small",
+  statusWaitingSmall: "status-waiting-small",
+  statusWaiting: "status-waiting",
   status: "status",
   stop: "stop",
-  "submit-bug": "submit-bug",
-  "switcher-dashboard": "switcher-dashboard",
-  "switcher-environments": "switcher-environments",
+  submitBug: "submit-bug",
+  switcherDashboard: "switcher-dashboard",
+  switcherEnvironments: "switcher-environments",
   switcher: "switcher",
   tag: "tag",
-  "task-outstanding": "task-outstanding",
-  "timed-out-grey": "timed-out-grey",
-  "timed-out": "timed-out",
+  taskOutstanding: "task-outstanding",
+  timedOutGrey: "timed-out-grey",
+  timedOut: "timed-out",
   topic: "topic",
-  "unit-pending": "unit-pending",
-  "unit-running": "unit-running",
+  unitPending: "unit-pending",
+  unitRunning: "unit-running",
   unmount: "unmount",
   unstarred: "unstarred",
-  "user-group": "user-group",
-  "video-play": "video-play",
-  "warning-grey": "warning-grey",
+  userGroup: "user-group",
+  videoPlay: "video-play",
+  warningGrey: "warning-grey",
 } as const;
 
 export const SOCIAL_ICONS = {
@@ -149,7 +149,7 @@ export const SOCIAL_ICONS = {
 } as const;
 
 export const ICONS = {
-  ...STANDART_ICONS,
+  ...STANDARD_ICONS,
   ...STATUS_ICONS,
   ...ADDITIONAL_ICONS,
   ...SOCIAL_ICONS,