feat: kill styled-components, use from odigos theme instead

.babelrc.json

@@ -1,5 +1,4 @@
 {
   "sourceType": "unambiguous",
-  "presets": ["@babel/preset-env", "@babel/preset-typescript", "@babel/preset-react"],
-  "plugins": ["babel-plugin-styled-components"]
+  "presets": ["@babel/preset-env", "@babel/preset-typescript", "@babel/preset-react"]
 }

package.json

@@ -22,25 +22,23 @@
     "access": "public"
   },
   "peerDependencies": {
-    "@odigos/ui-components": "^0.0.57",
-    "@odigos/ui-icons": "^0.0.10",
-    "@odigos/ui-theme": "^0.0.12",
-    "@odigos/ui-utils": "^0.0.19",
+    "@odigos/ui-components": "^0.0.58",
+    "@odigos/ui-icons": "^0.0.11",
+    "@odigos/ui-theme": "^0.0.15",
+    "@odigos/ui-utils": "^0.0.20",
     "@xyflow/react": "^12.4.2",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "styled-components": "^6.1.15",
     "zustand": "^5.0.3"
   },
   "dependencies": {
-    "@odigos/ui-components": "^0.0.57",
-    "@odigos/ui-icons": "^0.0.10",
-    "@odigos/ui-theme": "^0.0.12",
-    "@odigos/ui-utils": "^0.0.19",
+    "@odigos/ui-components": "^0.0.58",
+    "@odigos/ui-icons": "^0.0.11",
+    "@odigos/ui-theme": "^0.0.15",
+    "@odigos/ui-utils": "^0.0.20",
     "@xyflow/react": "^12.4.2",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "styled-components": "^6.1.15",
     "zustand": "^5.0.3"
   },
   "devDependencies": {
@@ -60,7 +58,6 @@
     "@typescript-eslint/eslint-plugin": "^8.23.0",
     "@typescript-eslint/parser": "^8.23.0",
     "babel-loader": "^9.2.1",
-    "babel-plugin-styled-components": "^2.1.4",
     "eslint": "^9.20.0",
     "eslint-plugin-react": "^7.37.4",
     "eslint-plugin-storybook": "^0.11.2",

rollup.config.js

@@ -7,7 +7,7 @@ const packageJson = require('./package.json')
 
 export default {
   input: 'src/index.ts',
-  external: ['react', 'react-dom', 'styled-components'],
+  external: ['react', 'react-dom'],
   output: [
     {
       file: packageJson.main,

src/containers/action-drawer/index.tsx

@@ -1,5 +1,5 @@
 import React, { type FC, useMemo, useState } from 'react'
-import styled from 'styled-components'
+import { styled } from '@odigos/ui-theme'
 import { buildCard } from './build-card'
 import { ActionForm } from '../action-form'
 import { useDrawerStore } from '../../store'

src/containers/action-form/custom-fields/pii-masking.tsx

@@ -1,5 +1,5 @@
 import React, { type FC, useEffect, useState } from 'react'
-import styled, { css } from 'styled-components'
+import { css, styled } from '@odigos/ui-theme'
 import type { ActionFormData, CustomFieldProps } from '../../../@types'
 import { Checkbox, FieldError, FieldLabel } from '@odigos/ui-components'
 

src/containers/action-form/index.tsx

@@ -1,7 +1,6 @@
 import React, { type FC } from 'react'
-import Theme from '@odigos/ui-theme'
-import styled from 'styled-components'
 import { CustomFields } from './custom-fields'
+import Theme, { styled } from '@odigos/ui-theme'
 import { type ActionFormData } from '../../@types'
 import { type ActionOption } from '@odigos/ui-utils'
 import { CheckCircledIcon, CrossCircledIcon } from '@odigos/ui-icons'

src/containers/cli-drawer/index.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import styled from 'styled-components'
+import { styled } from '@odigos/ui-theme'
 import { TerminalIcon } from '@odigos/ui-icons'
 import { Tokens, type TokensProps } from './tokens'
 import { Describe, type DescribeProps } from './describe'

src/containers/data-flow-actions-menu/add-entity/index.tsx

@@ -1,8 +1,7 @@
 import React, { useState, useRef, useEffect } from 'react'
-import Theme from '@odigos/ui-theme'
 import { PlusIcon } from '@odigos/ui-icons'
 import { useModalStore } from '../../../store'
-import styled, { css } from 'styled-components'
+import Theme, { css, styled } from '@odigos/ui-theme'
 import { Button, type DropdownProps, Text } from '@odigos/ui-components'
 import { DISPLAY_TITLES, ENTITY_TYPES, getEntityIcon, useOnClickOutside } from '@odigos/ui-utils'
 

src/containers/data-flow-actions-menu/filters/index.tsx

@@ -1,7 +1,6 @@
 import React, { useEffect, useRef, useState } from 'react'
-import Theme from '@odigos/ui-theme'
-import styled from 'styled-components'
 import { FilterIcon } from '@odigos/ui-icons'
+import Theme, { styled } from '@odigos/ui-theme'
 import { SelectionButton } from '../selection-button'
 import { Button, Toggle } from '@odigos/ui-components'
 import { AbsoluteContainer, RelativeContainer } from '../styled'

src/containers/data-flow-actions-menu/index.tsx

@@ -1,11 +1,10 @@
 import React from 'react'
 import { Search } from './search'
 import { Filters } from './filters'
-import Theme from '@odigos/ui-theme'
-import styled from 'styled-components'
 import { AddEntity } from './add-entity'
 import { type AllEntities } from '../../@types'
 import { OverviewIcon } from '@odigos/ui-icons'
+import Theme, { styled } from '@odigos/ui-theme'
 import { Divider, MonitorsIcons, Text, Tooltip } from '@odigos/ui-components'
 
 interface DataFlowActionsMenuProps extends AllEntities {

src/containers/data-flow-actions-menu/search/search-results/index.tsx

@@ -1,6 +1,5 @@
 import React, { Fragment, useMemo, useState } from 'react'
-import Theme from '@odigos/ui-theme'
-import styled from 'styled-components'
+import Theme, { styled } from '@odigos/ui-theme'
 import { AbsoluteContainer } from '../../styled'
 import { useClickNode } from '../../../../helpers'
 import { Divider, Text } from '@odigos/ui-components'

src/containers/data-flow-actions-menu/selection-button/index.tsx

@@ -1,7 +1,6 @@
 import React from 'react'
-import Theme from '@odigos/ui-theme'
-import styled from 'styled-components'
 import { type SVG } from '@odigos/ui-icons'
+import Theme, { styled } from '@odigos/ui-theme'
 import { Badge, Button, Text } from '@odigos/ui-components'
 
 interface Props {

src/containers/data-flow-actions-menu/styled.ts

@@ -1,4 +1,4 @@
-import styled from 'styled-components'
+import { styled } from '@odigos/ui-theme'
 
 export const RelativeContainer = styled.div`
   position: relative;

src/containers/data-flow/edges/labeled-edge.tsx

@@ -1,5 +1,5 @@
 import React, { type FC } from 'react'
-import styled from 'styled-components'
+import { styled } from '@odigos/ui-theme'
 import { EDGE_TYPES } from '../../../@types'
 import { Tooltip } from '@odigos/ui-components'
 import { EdgeLabelRenderer, BaseEdge, type EdgeProps, type Edge, getSmoothStepPath } from '@xyflow/react'

src/containers/data-flow/flow.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import '@xyflow/react/dist/style.css'
-import styled from 'styled-components'
+import { styled } from '@odigos/ui-theme'
 import { AddNode } from './nodes/add-node'
 import { BaseNode } from './nodes/base-node'
 import { useClickNode } from '../../helpers'

src/containers/data-flow/index.tsx

@@ -1,7 +1,6 @@
 import React, { CSSProperties, useEffect, useMemo, useState } from 'react'
 import { Flow } from './flow'
-import Theme from '@odigos/ui-theme'
-import styled from 'styled-components'
+import Theme, { styled } from '@odigos/ui-theme'
 import { buildEdges } from './helpers/build-edges'
 import { buildRuleNodes } from './helpers/build-rule-nodes'
 import { type Metrics, type AllEntities } from '../../@types'

src/containers/data-flow/nodes/add-node.tsx

@@ -1,7 +1,6 @@
 import React, { Fragment } from 'react'
-import Theme from '@odigos/ui-theme'
-import styled from 'styled-components'
 import { PlusIcon } from '@odigos/ui-icons'
+import Theme, { styled } from '@odigos/ui-theme'
 import { usePendingStore } from '../../../store'
 import { ADD_NODE_TYPES, NODE_TYPES } from '../../../@types'
 import { ENTITY_TYPES, HEALTH_STATUS } from '@odigos/ui-utils'

src/containers/data-flow/nodes/base-node.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import styled from 'styled-components'
+import { styled } from '@odigos/ui-theme'
 import { NODE_TYPES } from '../../../@types'
 import { ErrorTriangleIcon, type SVG } from '@odigos/ui-icons'
 import { usePendingStore, useSelectedStore } from '../../../store'

src/containers/data-flow/nodes/edged-node.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import styled from 'styled-components'
+import { styled } from '@odigos/ui-theme'
 import { NODE_TYPES } from '../../../@types'
 import { Handle, type Node, type NodeProps, Position } from '@xyflow/react'
 

src/containers/data-flow/nodes/frame-node.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import styled from 'styled-components'
+import { styled } from '@odigos/ui-theme'
 import { NODE_TYPES } from '../../../@types'
 import { Handle, type Node, type NodeProps, Position } from '@xyflow/react'
 

src/containers/data-flow/nodes/header-node.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react'
-import styled from 'styled-components'
+import { styled } from '@odigos/ui-theme'
 import { PlusIcon } from '@odigos/ui-icons'
 import { useClickNode } from '../../../helpers'
 import type { Node, NodeProps } from '@xyflow/react'

src/containers/data-flow/nodes/scroll-node.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react'
-import styled from 'styled-components'
+import { styled } from '@odigos/ui-theme'
 import { BaseNode } from './base-node'
 import { type SVG } from '@odigos/ui-icons'
 import { NODE_TYPES } from '../../../@types'

src/containers/data-flow/nodes/skeleton-node.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import styled from 'styled-components'
+import { styled } from '@odigos/ui-theme'
 import { NODE_TYPES } from '../../../@types'
 import { SkeletonLoader } from '@odigos/ui-components'
 import { type Node, type NodeProps } from '@xyflow/react'

src/containers/destination-drawer/index.tsx

@@ -1,5 +1,5 @@
 import React, { type FC, useMemo, useState } from 'react'
-import styled from 'styled-components'
+import { styled } from '@odigos/ui-theme'
 import { buildCard } from './build-card'
 import { useDrawerStore } from '../../store'
 import type { DestinationFormData } from '../../@types'

src/containers/destination-form/index.tsx

@@ -1,5 +1,5 @@
 import React, { type Dispatch, type FC, type SetStateAction, useEffect, useMemo, useRef, useState } from 'react'
-import styled from 'styled-components'
+import { styled } from '@odigos/ui-theme'
 import { DynamicFields } from './dynamic-fields'
 import { TestConnection, type TestConnectionProps } from './test-connection'
 import type { DestinationDynamicField, DestinationFormData } from '../../@types'

src/containers/destination-form/test-connection/index.tsx

@@ -1,6 +1,5 @@
 import React, { type FC, useEffect } from 'react'
-import Theme from '@odigos/ui-theme'
-import styled, { css } from 'styled-components'
+import Theme, { css, styled } from '@odigos/ui-theme'
 import type { DestinationFormData } from '../../../@types'
 import { Button, FadeLoader, Text } from '@odigos/ui-components'
 import { getStatusIcon, NOTIFICATION_TYPE } from '@odigos/ui-utils'

src/containers/destination-modal/choose-destination/destinations-list/index.tsx

@@ -1,5 +1,5 @@
 import React, { type FC } from 'react'
-import styled from 'styled-components'
+import { styled } from '@odigos/ui-theme'
 import { DataTab, SectionTitle } from '@odigos/ui-components'
 import { capitalizeFirstLetter, type DestinationCategories, type DestinationOption, SIGNAL_TYPE } from '@odigos/ui-utils'
 

src/containers/destination-modal/choose-destination/index.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo, useState } from 'react'
-import styled from 'styled-components'
+import { styled } from '@odigos/ui-theme'
 import { SearchIcon } from '@odigos/ui-icons'
 import { DestinationsList } from './destinations-list'
 import { type DestinationCategories, type DestinationOption, SIGNAL_TYPE } from '@odigos/ui-utils'

src/containers/destination-modal/choose-destination/potential-destinations-list/index.tsx

@@ -1,5 +1,5 @@
 import React, { type FC } from 'react'
-import styled from 'styled-components'
+import { styled } from '@odigos/ui-theme'
 import { OdigosLogo } from '@odigos/ui-icons'
 import { DataTab, SectionTitle } from '@odigos/ui-components'
 import { type DestinationOption, SIGNAL_TYPE } from '@odigos/ui-utils'

src/containers/destination-modal/index.tsx

@@ -1,5 +1,5 @@
 import React, { type FC, useState } from 'react'
-import styled from 'styled-components'
+import { styled } from '@odigos/ui-theme'
 import { ArrowIcon } from '@odigos/ui-icons'
 import type { DestinationFormData } from '../../@types'
 import { ChooseDestinationBody } from './choose-destination'

src/containers/destination-selection-form/configured-list/index.tsx

@@ -1,5 +1,5 @@
 import React, { type FC, useState } from 'react'
-import styled from 'styled-components'
+import { styled } from '@odigos/ui-theme'
 import { TrashIcon } from '@odigos/ui-icons'
 import { ENTITY_TYPES, SIGNAL_TYPE } from '@odigos/ui-utils'
 import { useSetupStore, type ISetupState } from '../../../store'

src/containers/destination-selection-form/index.tsx

@@ -1,8 +1,7 @@
 import React, { type FC } from 'react'
-import Theme from '@odigos/ui-theme'
-import styled from 'styled-components'
 import { PlusIcon } from '@odigos/ui-icons'
 import { useModalStore } from '../../store'
+import Theme, { styled } from '@odigos/ui-theme'
 import { ConfiguredList } from './configured-list'
 import { DestinationModal } from '../destination-modal'
 import type { DestinationFormData } from '../../@types'

src/containers/instrumentation-rule-drawer/index.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo, useState } from 'react'
-import styled from 'styled-components'
+import { styled } from '@odigos/ui-theme'
 import { buildCard } from './build-card'
 import { DataCard } from '@odigos/ui-components'
 import type { InstrumentationRuleFormData } from '../../@types'

src/containers/instrumentation-rule-form/custom-fields/code-attributes.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useMemo, useState } from 'react'
-import styled, { css } from 'styled-components'
+import { css, styled } from '@odigos/ui-theme'
 import { CODE_ATTRIBUTES_KEY_TYPES } from '@odigos/ui-utils'
 import { Checkbox, FieldError, FieldLabel, Tooltip } from '@odigos/ui-components'
 import type { CustomFieldProps, InstrumentationRuleFormData } from '../../../@types'

src/containers/instrumentation-rule-form/custom-fields/payload-collection.tsx

@@ -1,5 +1,5 @@
 import React, { type FC, useEffect, useMemo, useState } from 'react'
-import styled, { css } from 'styled-components'
+import { css, styled } from '@odigos/ui-theme'
 import { PAYLOAD_COLLECTION_KEY_TYPES } from '@odigos/ui-utils'
 import { Checkbox, FieldError, FieldLabel } from '@odigos/ui-components'
 import type { CustomFieldProps, InstrumentationRuleFormData } from '../../../@types'

src/containers/instrumentation-rule-form/index.tsx

@@ -1,7 +1,6 @@
 import React, { type FC } from 'react'
-import Theme from '@odigos/ui-theme'
-import styled from 'styled-components'
 import { CustomFields } from './custom-fields'
+import Theme, { styled } from '@odigos/ui-theme'
 import type { InstrumentationRuleFormData } from '../../@types'
 import type { InstrumentationRuleOption } from '@odigos/ui-utils'
 import { CheckCircledIcon, CrossCircledIcon } from '@odigos/ui-icons'

src/containers/multi-source-control/index.tsx

@@ -1,7 +1,6 @@
 import React, { Fragment, useMemo, useState } from 'react'
-import Theme from '@odigos/ui-theme'
-import styled from 'styled-components'
 import { TrashIcon } from '@odigos/ui-icons'
+import Theme, { styled } from '@odigos/ui-theme'
 import { ENTITY_TYPES, useTransition } from '@odigos/ui-utils'
 import { type SelectedState, useSelectedStore } from '../../store'
 import { Badge, Button, DeleteWarning, Divider, Text } from '@odigos/ui-components'

src/containers/notification-manager/index.tsx

@@ -1,6 +1,5 @@
 import React, { type MouseEvent, useRef, useState } from 'react'
-import Theme from '@odigos/ui-theme'
-import styled from 'styled-components'
+import Theme, { styled } from '@odigos/ui-theme'
 import { type Notification } from '../../@types'
 import { useNotificationStore } from '../../store'
 import { useClickNotification } from '../../helpers'

src/containers/source-drawer/index.tsx

@@ -1,5 +1,5 @@
 import React, { type FC, useMemo, useState } from 'react'
-import styled from 'styled-components'
+import { styled } from '@odigos/ui-theme'
 import { buildCard } from './build-card'
 import { SourceForm } from '../source-form'
 import { useDrawerStore } from '../../store'

src/containers/source-form/index.tsx

@@ -1,5 +1,5 @@
 import React, { type FC } from 'react'
-import styled from 'styled-components'
+import { styled } from '@odigos/ui-theme'
 import { Input } from '@odigos/ui-components'
 import type { SourceFormData } from '../../@types'
 

src/containers/source-selection-form/fast/controls/index.tsx

@@ -1,5 +1,5 @@
 import React, { FC } from 'react'
-import styled from 'styled-components'
+import { styled } from '@odigos/ui-theme'
 import { SearchIcon } from '@odigos/ui-icons'
 import type { UseSourceSelectionFormData } from '../../../../helpers'
 import { Divider, Input, SectionTitle, Toggle } from '@odigos/ui-components'

src/containers/source-selection-form/fast/list/index.tsx

@@ -1,6 +1,5 @@
 import React, { type FC } from 'react'
-import Theme from '@odigos/ui-theme'
-import styled from 'styled-components'
+import Theme, { styled } from '@odigos/ui-theme'
 import type { UseSourceSelectionFormData } from '../../../../helpers'
 import { Checkbox, Divider, ExtendArrow, FadeLoader, FlexRow, NoDataFound, Text, Toggle } from '@odigos/ui-components'
 

src/containers/source-selection-form/simple/controls/index.tsx

@@ -1,5 +1,5 @@
 import React, { type FC } from 'react'
-import styled from 'styled-components'
+import { styled } from '@odigos/ui-theme'
 import { SearchIcon } from '@odigos/ui-icons'
 import type { Namespace } from '../../../../@types'
 import { NamespaceDropdown, type UseSourceSelectionFormData } from '../../../../helpers'

src/containers/source-selection-form/simple/list/index.tsx

@@ -1,7 +1,6 @@
 import React, { type FC } from 'react'
-import Theme from '@odigos/ui-theme'
-import styled from 'styled-components'
 import { FolderIcon } from '@odigos/ui-icons'
+import Theme, { styled } from '@odigos/ui-theme'
 import type { UseSourceSelectionFormData } from '../../../../helpers'
 import { Checkbox, FadeLoader, IconWrapped, NoDataFound, Text } from '@odigos/ui-components'
 

src/containers/toast-list/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import styled from 'styled-components'
+import { styled } from '@odigos/ui-theme'
 import { useNotificationStore } from '../../store'
 import { useClickNotification } from '../../helpers'
 import { NotificationNote } from '@odigos/ui-components'

src/helpers/components/styled.tsx

@@ -1,4 +1,4 @@
-import styled from 'styled-components'
+import { styled } from '@odigos/ui-theme'
 
 // note: add-destinations does not use this (yet), because it has a custom sidebar
 export const ModalBody = styled.div<{ $isNotModal?: boolean }>`