From bef818e9d3476e526f56254e271fb03457bd3e09 Mon Sep 17 00:00:00 2001
From: Anass Bouassaba <ebouassaba@gmail.com>
Date: Tue, 29 Oct 2024 17:11:12 +0100
Subject: [PATCH] wip: add icon components

---
 src/components/icons.tsx                | 252 +++++++-----------------
 src/stories/components/icon.stories.tsx | 140 +++++++++++++
 2 files changed, 216 insertions(+), 176 deletions(-)
 create mode 100644 src/stories/components/icon.stories.tsx

diff --git a/src/components/icons.tsx b/src/components/icons.tsx
index d9ea74f..dae5889 100644
--- a/src/components/icons.tsx
+++ b/src/components/icons.tsx
@@ -1,51 +1,29 @@
 import { HTMLAttributes } from 'react'
 import { cx } from '@emotion/css'
 
-export type IconBaseProps = {
+export type IconProps = {
   filled?: boolean
 } & HTMLAttributes<HTMLSpanElement>
 
-type GetClassNameOptions = {
-  filled?: boolean
-  className?: string
-}
-
-export function getClassName({ filled, className }: GetClassNameOptions) {
-  return cx(
-    'material-symbols-rounded',
-    { 'material-symbols-rounded__filled': filled },
-    'text-[16px]',
-    className,
-  )
-}
-
-export const IconPlayArrow = ({
-  className,
-  filled,
-  ...props
-}: IconBaseProps) => (
+export const IconPlayArrow = ({ className, filled, ...props }: IconProps) => (
   <span className={getClassName({ filled, className })} {...props}>
     play_arrow
   </span>
 )
 
-export const IconUpload = ({ className, filled, ...props }: IconBaseProps) => (
+export const IconUpload = ({ className, filled, ...props }: IconProps) => (
   <span className={getClassName({ filled, className })} {...props}>
     upload
   </span>
 )
 
-export const IconAdmin = ({ className, filled, ...props }: IconBaseProps) => (
+export const IconAdmin = ({ className, filled, ...props }: IconProps) => (
   <span className={getClassName({ filled, className })} {...props}>
     admin_panel_settings
   </span>
 )
 
-export const IconDatabase = ({
-  className,
-  filled,
-  ...props
-}: IconBaseProps) => (
+export const IconDatabase = ({ className, filled, ...props }: IconProps) => (
   <span className={getClassName({ filled, className })} {...props}>
     database
   </span>
@@ -55,7 +33,7 @@ export const IconRemoveOperator = ({
   className,
   filled,
   ...props
-}: IconBaseProps) => (
+}: IconProps) => (
   <span className={getClassName({ filled, className })} {...props}>
     remove_moderator
   </span>
@@ -65,33 +43,25 @@ export const IconNotifications = ({
   className,
   filled,
   ...props
-}: IconBaseProps) => (
+}: IconProps) => (
   <span className={getClassName({ filled, className })} {...props}>
     notifications
   </span>
 )
 
-export const IconMoreVert = ({
-  className,
-  filled,
-  ...props
-}: IconBaseProps) => (
+export const IconMoreVert = ({ className, filled, ...props }: IconProps) => (
   <span className={getClassName({ filled, className })} {...props}>
     more_vert
   </span>
 )
 
-export const IconLogout = ({ className, filled, ...props }: IconBaseProps) => (
+export const IconLogout = ({ className, filled, ...props }: IconProps) => (
   <span className={getClassName({ filled, className })} {...props}>
     logout
   </span>
 )
 
-export const IconChevronLeft = ({
-  className,
-  filled,
-  ...props
-}: IconBaseProps) => (
+export const IconChevronLeft = ({ className, filled, ...props }: IconProps) => (
   <span className={getClassName({ filled, className })} {...props}>
     chevron_left
   </span>
@@ -101,55 +71,43 @@ export const IconChevronRight = ({
   className,
   filled,
   ...props
-}: IconBaseProps) => (
+}: IconProps) => (
   <span className={getClassName({ filled, className })} {...props}>
     chevron_right
   </span>
 )
 
-export const IconChevronDown = ({
-  className,
-  filled,
-  ...props
-}: IconBaseProps) => (
+export const IconChevronDown = ({ className, filled, ...props }: IconProps) => (
   <span className={getClassName({ filled, className })} {...props}>
     keyboard_arrow_down
   </span>
 )
 
-export const IconChevronUp = ({
-  className,
-  filled,
-  ...props
-}: IconBaseProps) => (
+export const IconChevronUp = ({ className, filled, ...props }: IconProps) => (
   <span className={getClassName({ filled, className })} {...props}>
     keyboard_arrow_up
   </span>
 )
 
-export const IconAdd = ({ className, filled, ...props }: IconBaseProps) => (
+export const IconAdd = ({ className, filled, ...props }: IconProps) => (
   <span className={getClassName({ filled, className })} {...props}>
     add
   </span>
 )
 
-export const IconEdit = ({ className, filled, ...props }: IconBaseProps) => (
+export const IconEdit = ({ className, filled, ...props }: IconProps) => (
   <span className={getClassName({ filled, className })} {...props}>
     edit
   </span>
 )
 
-export const IconGroup = ({ className, filled, ...props }: IconBaseProps) => (
+export const IconGroup = ({ className, filled, ...props }: IconProps) => (
   <span className={getClassName({ filled, className })} {...props}>
     group
   </span>
 )
 
-export const IconDownload = ({
-  className,
-  filled,
-  ...props
-}: IconBaseProps) => (
+export const IconDownload = ({ className, filled, ...props }: IconProps) => (
   <span className={getClassName({ filled, className })} {...props}>
     download
   </span>
@@ -159,51 +117,43 @@ export const IconArrowTopRight = ({
   className,
   filled,
   ...props
-}: IconBaseProps) => (
+}: IconProps) => (
   <span className={getClassName({ filled, className })} {...props}>
     arrow_top_right
   </span>
 )
 
-export const IconFileCopy = ({
-  className,
-  filled,
-  ...props
-}: IconBaseProps) => (
+export const IconFileCopy = ({ className, filled, ...props }: IconProps) => (
   <span className={getClassName({ filled, className })} {...props}>
     file_copy
   </span>
 )
 
-export const IconDelete = ({ className, filled, ...props }: IconBaseProps) => (
+export const IconDelete = ({ className, filled, ...props }: IconProps) => (
   <span className={getClassName({ filled, className })} {...props}>
     delete
   </span>
 )
 
-export const IconSend = ({ className, filled, ...props }: IconBaseProps) => (
+export const IconSend = ({ className, filled, ...props }: IconProps) => (
   <span className={getClassName({ filled, className })} {...props}>
     send
   </span>
 )
 
-export const IconPersonAdd = ({
-  className,
-  filled,
-  ...props
-}: IconBaseProps) => (
+export const IconPersonAdd = ({ className, filled, ...props }: IconProps) => (
   <span className={getClassName({ filled, className })} {...props}>
     person_add
   </span>
 )
 
-export const IconPerson = ({ className, filled, ...props }: IconBaseProps) => (
+export const IconPerson = ({ className, filled, ...props }: IconProps) => (
   <span className={getClassName({ filled, className })} {...props}>
     person
   </span>
 )
 
-export const IconCheck = ({ className, filled, ...props }: IconBaseProps) => (
+export const IconCheck = ({ className, filled, ...props }: IconProps) => (
   <span className={getClassName({ filled, className })} {...props}>
     check
   </span>
@@ -213,7 +163,7 @@ export const IconLibraryAddCheck = ({
   className,
   filled,
   ...props
-}: IconBaseProps) => (
+}: IconProps) => (
   <span className={getClassName({ filled, className })} {...props}>
     library_add_check
   </span>
@@ -223,7 +173,7 @@ export const IconSelectCheckBox = ({
   className,
   filled,
   ...props
-}: IconBaseProps) => (
+}: IconProps) => (
   <span className={getClassName({ filled, className })} {...props}>
     select_check_box
   </span>
@@ -233,135 +183,103 @@ export const IconCheckBoxOutlineBlank = ({
   className,
   filled,
   ...props
-}: IconBaseProps) => (
+}: IconProps) => (
   <span className={getClassName({ filled, className })} {...props}>
     check_box_outline_blank
   </span>
 )
 
-export const IconCheckCircle = ({
-  className,
-  filled,
-  ...props
-}: IconBaseProps) => (
+export const IconCheckCircle = ({ className, filled, ...props }: IconProps) => (
   <span className={getClassName({ filled, className })} {...props}>
     check_circle
   </span>
 )
 
-export const IconError = ({ className, filled, ...props }: IconBaseProps) => (
+export const IconError = ({ className, filled, ...props }: IconProps) => (
   <span className={getClassName({ filled, className })} {...props}>
     error
   </span>
 )
 
-export const IconWarning = ({ className, filled, ...props }: IconBaseProps) => (
+export const IconWarning = ({ className, filled, ...props }: IconProps) => (
   <span className={getClassName({ filled, className })} {...props}>
     warning
   </span>
 )
 
-export const IconInvitations = ({
-  className,
-  filled,
-  ...props
-}: IconBaseProps) => (
+export const IconInvitations = ({ className, filled, ...props }: IconProps) => (
   <span className={getClassName({ filled, className })} {...props}>
     forward_to_inbox
   </span>
 )
 
-export const IconWorkspaces = ({
-  className,
-  filled,
-  ...props
-}: IconBaseProps) => (
+export const IconWorkspaces = ({ className, filled, ...props }: IconProps) => (
   <span className={getClassName({ filled, className })} {...props}>
     workspaces
   </span>
 )
 
-export const IconFlag = ({ className, filled, ...props }: IconBaseProps) => (
+export const IconFlag = ({ className, filled, ...props }: IconProps) => (
   <span className={getClassName({ filled, className })} {...props}>
     flag
   </span>
 )
 
-export const IconClose = ({ className, filled, ...props }: IconBaseProps) => (
+export const IconClose = ({ className, filled, ...props }: IconProps) => (
   <span className={getClassName({ filled, className })} {...props}>
     close
   </span>
 )
 
-export const IconSchedule = ({
-  className,
-  filled,
-  ...props
-}: IconBaseProps) => (
+export const IconSchedule = ({ className, filled, ...props }: IconProps) => (
   <span className={getClassName({ filled, className })} {...props}>
     schedule
   </span>
 )
 
-export const IconClearAll = ({
-  className,
-  filled,
-  ...props
-}: IconBaseProps) => (
+export const IconClearAll = ({ className, filled, ...props }: IconProps) => (
   <span className={getClassName({ filled, className })} {...props}>
     clear_all
   </span>
 )
 
-export const IconOpenInNew = ({
-  className,
-  filled,
-  ...props
-}: IconBaseProps) => (
+export const IconOpenInNew = ({ className, filled, ...props }: IconProps) => (
   <span className={getClassName({ filled, className })} {...props}>
     open_in_new
   </span>
 )
 
-export const IconInfo = ({ className, filled, ...props }: IconBaseProps) => (
+export const IconInfo = ({ className, filled, ...props }: IconProps) => (
   <span className={getClassName({ filled, className })} {...props}>
     info
   </span>
 )
 
-export const IconSearch = ({ className, filled, ...props }: IconBaseProps) => (
+export const IconSearch = ({ className, filled, ...props }: IconProps) => (
   <span className={getClassName({ filled, className })} {...props}>
     search
   </span>
 )
 
-export const IconRefresh = ({ className, filled, ...props }: IconBaseProps) => (
+export const IconRefresh = ({ className, filled, ...props }: IconProps) => (
   <span className={getClassName({ filled, className })} {...props}>
     refresh
   </span>
 )
 
-export const IconSync = ({ className, filled, ...props }: IconBaseProps) => (
+export const IconSync = ({ className, filled, ...props }: IconProps) => (
   <span className={getClassName({ filled, className })} {...props}>
     sync
   </span>
 )
 
-export const IconGridView = ({
-  className,
-  filled,
-  ...props
-}: IconBaseProps) => (
+export const IconGridView = ({ className, filled, ...props }: IconProps) => (
   <span className={getClassName({ filled, className })} {...props}>
     grid_view
   </span>
 )
 
-export const IconArrowUpward = ({
-  className,
-  filled,
-  ...props
-}: IconBaseProps) => (
+export const IconArrowUpward = ({ className, filled, ...props }: IconProps) => (
   <span className={getClassName({ filled, className })} {...props}>
     arrow_upward
   </span>
@@ -371,33 +289,25 @@ export const IconArrowDownward = ({
   className,
   filled,
   ...props
-}: IconBaseProps) => (
+}: IconProps) => (
   <span className={getClassName({ filled, className })} {...props}>
     arrow_downward
   </span>
 )
 
-export const IconExpandMore = ({
-  className,
-  filled,
-  ...props
-}: IconBaseProps) => (
+export const IconExpandMore = ({ className, filled, ...props }: IconProps) => (
   <span className={getClassName({ filled, className })} {...props}>
     expand_more
   </span>
 )
 
-export const IconList = ({ className, filled, ...props }: IconBaseProps) => (
+export const IconList = ({ className, filled, ...props }: IconProps) => (
   <span className={getClassName({ filled, className })} {...props}>
     list
   </span>
 )
 
-export const IconHourglass = ({
-  className,
-  filled,
-  ...props
-}: IconBaseProps) => (
+export const IconHourglass = ({ className, filled, ...props }: IconProps) => (
   <span className={getClassName({ filled, className })} {...props}>
     hourglass
   </span>
@@ -407,7 +317,7 @@ export const IconKeyboardArrowLeft = ({
   className,
   filled,
   ...props
-}: IconBaseProps) => (
+}: IconProps) => (
   <span className={getClassName({ filled, className })} {...props}>
     keyboard_arrow_left
   </span>
@@ -417,7 +327,7 @@ export const IconKeyboardArrowRight = ({
   className,
   filled,
   ...props
-}: IconBaseProps) => (
+}: IconProps) => (
   <span className={getClassName({ filled, className })} {...props}>
     keyboard_arrow_right
   </span>
@@ -427,7 +337,7 @@ export const IconKeyboardDoubleArrowRight = ({
   className,
   filled,
   ...props
-}: IconBaseProps) => (
+}: IconProps) => (
   <span className={getClassName({ filled, className })} {...props}>
     keyboard_double_arrow_right
   </span>
@@ -437,98 +347,88 @@ export const IconKeyboardDoubleArrowLeft = ({
   className,
   filled,
   ...props
-}: IconBaseProps) => (
+}: IconProps) => (
   <span className={getClassName({ filled, className })} {...props}>
     keyboard_double_arrow_left
   </span>
 )
 
-export const IconFirstPage = ({
-  className,
-  filled,
-  ...props
-}: IconBaseProps) => (
+export const IconFirstPage = ({ className, filled, ...props }: IconProps) => (
   <span className={getClassName({ filled, className })} {...props}>
     first_page
   </span>
 )
 
-export const IconLastPage = ({
-  className,
-  filled,
-  ...props
-}: IconBaseProps) => (
+export const IconLastPage = ({ className, filled, ...props }: IconProps) => (
   <span className={getClassName({ filled, className })} {...props}>
     last_page
   </span>
 )
 
-export const IconHistory = ({ className, filled, ...props }: IconBaseProps) => (
+export const IconHistory = ({ className, filled, ...props }: IconProps) => (
   <span className={getClassName({ filled, className })} {...props}>
     history
   </span>
 )
 
-export const IconModeHeat = ({
-  className,
-  filled,
-  ...props
-}: IconBaseProps) => (
+export const IconModeHeat = ({ className, filled, ...props }: IconProps) => (
   <span className={getClassName({ filled, className })} {...props}>
     mode_heat
   </span>
 )
 
-export const IconSecurity = ({
-  className,
-  filled,
-  ...props
-}: IconBaseProps) => (
+export const IconSecurity = ({ className, filled, ...props }: IconProps) => (
   <span className={getClassName({ filled, className })} {...props}>
     security
   </span>
 )
 
-export const IconVisibility = ({
-  className,
-  filled,
-  ...props
-}: IconBaseProps) => (
+export const IconVisibility = ({ className, filled, ...props }: IconProps) => (
   <span className={getClassName({ filled, className })} {...props}>
     visibility
   </span>
 )
 
-export const IconTune = ({ className, filled, ...props }: IconBaseProps) => (
+export const IconTune = ({ className, filled, ...props }: IconProps) => (
   <span className={getClassName({ filled, className })} {...props}>
     tune
   </span>
 )
 
-export const IconHome = ({ className, filled, ...props }: IconBaseProps) => (
+export const IconHome = ({ className, filled, ...props }: IconProps) => (
   <span className={getClassName({ filled, className })} {...props}>
     home
   </span>
 )
 
-export const IconStacks = ({ className, filled, ...props }: IconBaseProps) => (
+export const IconStacks = ({ className, filled, ...props }: IconProps) => (
   <span className={getClassName({ filled, className })} {...props}>
     stacks
   </span>
 )
 
-export const IconCloudUpload = ({
-  className,
-  filled,
-  ...props
-}: IconBaseProps) => (
+export const IconCloudUpload = ({ className, filled, ...props }: IconProps) => (
   <span className={getClassName({ filled, className })} {...props}>
     cloud_upload
   </span>
 )
 
-export const IconBolt = ({ className, filled, ...props }: IconBaseProps) => (
+export const IconBolt = ({ className, filled, ...props }: IconProps) => (
   <span className={getClassName({ filled, className })} {...props}>
     bolt
   </span>
 )
+
+type GetClassNameOptions = {
+  filled?: boolean
+  className?: string
+}
+
+function getClassName({ filled, className }: GetClassNameOptions) {
+  return cx(
+    'material-symbols-rounded',
+    { 'material-symbols-rounded__filled': filled },
+    'text-[16px]',
+    className,
+  )
+}
diff --git a/src/stories/components/icon.stories.tsx b/src/stories/components/icon.stories.tsx
new file mode 100644
index 0000000..1d5f128
--- /dev/null
+++ b/src/stories/components/icon.stories.tsx
@@ -0,0 +1,140 @@
+import { Meta, StoryObj } from '@storybook/react'
+import cx from 'classnames'
+import {
+  IconAdd,
+  IconAdmin,
+  IconArrowDownward,
+  IconArrowTopRight,
+  IconArrowUpward,
+  IconBolt,
+  IconCheck,
+  IconCheckBoxOutlineBlank,
+  IconCheckCircle,
+  IconChevronDown,
+  IconChevronLeft,
+  IconChevronRight,
+  IconChevronUp,
+  IconClearAll,
+  IconClose,
+  IconCloudUpload,
+  IconDatabase,
+  IconDelete,
+  IconDownload,
+  IconEdit,
+  IconError,
+  IconExpandMore,
+  IconFileCopy,
+  IconFirstPage,
+  IconFlag,
+  IconGridView,
+  IconGroup,
+  IconHistory,
+  IconHome,
+  IconHourglass,
+  IconInfo,
+  IconInvitations,
+  IconKeyboardArrowLeft,
+  IconKeyboardArrowRight,
+  IconKeyboardDoubleArrowLeft,
+  IconKeyboardDoubleArrowRight,
+  IconLastPage,
+  IconLibraryAddCheck,
+  IconList,
+  IconLogout,
+  IconModeHeat,
+  IconMoreVert,
+  IconNotifications,
+  IconOpenInNew,
+  IconPerson,
+  IconPersonAdd,
+  IconPlayArrow,
+  IconRefresh,
+  IconRemoveOperator,
+  IconSchedule,
+  IconSearch,
+  IconSecurity,
+  IconSelectCheckBox,
+  IconSend,
+  IconStacks,
+  IconSync,
+  IconTune,
+  IconUpload,
+  IconVisibility,
+  IconWarning,
+  IconWorkspaces,
+} from '../../components'
+
+const meta: Meta = {
+  title: 'Components/Icon',
+}
+
+export default meta
+type Story = StoryObj
+
+export const Default: Story = {
+  render: () => (
+    <div className={cx('flex', 'flex-wrap', 'gap-1.5', 'w-[400px]')}>
+      <IconPlayArrow />
+      <IconUpload />
+      <IconAdmin />
+      <IconDatabase />
+      <IconRemoveOperator />
+      <IconNotifications />
+      <IconMoreVert />
+      <IconLogout />
+      <IconChevronLeft />
+      <IconChevronRight />
+      <IconChevronDown />
+      <IconChevronUp />
+      <IconAdd />
+      <IconEdit />
+      <IconGroup />
+      <IconDownload />
+      <IconArrowTopRight />
+      <IconFileCopy />
+      <IconDelete />
+      <IconSend />
+      <IconPersonAdd />
+      <IconPerson />
+      <IconCheck />
+      <IconLibraryAddCheck />
+      <IconSelectCheckBox />
+      <IconCheckBoxOutlineBlank />
+      <IconCheckCircle />
+      <IconError />
+      <IconWarning />
+      <IconInvitations />
+      <IconWorkspaces />
+      <IconFlag />
+      <IconClose />
+      <IconSchedule />
+      <IconClearAll />
+      <IconOpenInNew />
+      <IconInfo />
+      <IconSearch />
+      <IconRefresh />
+      <IconSync />
+      <IconGridView />
+      <IconArrowUpward />
+      <IconArrowDownward />
+      <IconExpandMore />
+      <IconList />
+      <IconHourglass />
+      <IconKeyboardArrowLeft />
+      <IconKeyboardArrowRight />
+      <IconKeyboardDoubleArrowRight />
+      <IconKeyboardDoubleArrowLeft />
+      <IconFirstPage />
+      <IconLastPage />
+      <IconHistory />
+      <IconModeHeat />
+      <IconSecurity />
+      <IconVisibility />
+      <IconTune />
+      <IconHome />
+      <IconStacks />
+      <IconCloudUpload />
+      <IconBolt />
+    </div>
+  ),
+}