remove styled-components and use shira-ui package instead

Horizontal-org · Dec 17, 2024 · 9b4dca7 · 9b4dca7
1 parent b0bfef0
commit 9b4dca7
Show file tree

Hide file tree

Showing 90 changed files with 568 additions and 1,039 deletions.
diff --git a/package.json b/package.json
@@ -5,6 +5,7 @@
   "dependencies": {
     "@babel/core": "^7.16.0",
     "@divviup/dap": "^0.9.0",
+    "@horizontal-org/shira-ui": "^1.0.6",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
     "@popperjs/core": "^2.11.8",
     "@svgr/webpack": "^5.5.0",
@@ -26,7 +27,6 @@
     "case-sensitive-paths-webpack-plugin": "^2.4.0",
     "css-loader": "^6.5.1",
     "css-minimizer-webpack-plugin": "^3.2.0",
-    "divviup-ts": "file:../divviup-ts",
     "dotenv": "^10.0.0",
     "dotenv-expand": "^5.1.0",
     "eslint": "^8.3.0",
@@ -67,7 +67,6 @@
     "semver": "^7.3.5",
     "source-map-loader": "^3.0.0",
     "style-loader": "^3.3.1",
-    "styled-components": "^5.3.5",
     "tailwindcss": "^3.0.2",
     "terser-webpack-plugin": "^5.2.5",
     "typescript": "^4.6.3",
@@ -128,7 +127,6 @@
     "@storybook/preset-create-react-app": "^4.1.0",
     "@storybook/react": "^6.4.22",
     "@storybook/testing-library": "^0.0.10",
-    "@types/styled-components": "^5.1.25",
     "chromatic": "^6.5.4",
     "webpack": "^5.72.0"
   },

diff --git a/src/App.tsx b/src/App.tsx
@@ -4,21 +4,21 @@ import {
   Routes,
   Route,
 } from 'react-router-dom'
-import styled, { ThemeProvider } from 'styled-components'
 import { MainLayout } from "./components/Layouts/MainLayout";
 import { AboutLayout } from "./components/Layouts/AboutLayout";
 import { ToastProvider } from "./hooks/useToast";
-import theme from "./utils/theme";
 import './language/i18n'
 import { PrivacyLayout } from "./components/Layouts/PrivacyLayout";
+import { ThemeProvider, defaultTheme, styled } from "@horizontal-org/shira-ui";
 
 interface Props {}
 
 const App: FunctionComponent<Props> = () => {
+  console.log('Imported theme:', defaultTheme)
   return (
     <Wrapper>
       <ToastProvider>
-        <ThemeProvider theme={theme}>
+        <ThemeProvider theme={defaultTheme}>
           <BrowserRouter>
             <Routes>          
               <Route path="/" element={<MainLayout />} />

diff --git a/src/components/Apps/DatingApp/Chat/Attachment/index.tsx b/src/components/Apps/DatingApp/Chat/Attachment/index.tsx
@@ -1,5 +1,5 @@
 import { FunctionComponent } from "react";
-import styled from 'styled-components'
+import { styled } from '@horizontal-org/shira-ui'
 import Document from './assets/Document'
 interface Props {
   name: string;

diff --git a/src/components/Apps/DatingApp/Chat/Message/index.tsx b/src/components/Apps/DatingApp/Chat/Message/index.tsx
@@ -1,5 +1,5 @@
 import { FunctionComponent } from 'react'
-import styled from 'styled-components'
+import { styled } from '@horizontal-org/shira-ui'
 
 interface Props {
   data: Element

diff --git a/src/components/Apps/DatingApp/Chat/index.tsx b/src/components/Apps/DatingApp/Chat/index.tsx
@@ -1,5 +1,5 @@
 import { FunctionComponent } from 'react'
-import styled from 'styled-components'
+import { styled } from '@horizontal-org/shira-ui'
 import { Message } from './Message'
 import { Attachment } from './Attachment'
 interface Props {

diff --git a/src/components/Apps/DatingApp/Footer/index.tsx b/src/components/Apps/DatingApp/Footer/index.tsx
@@ -1,5 +1,5 @@
 import { FunctionComponent } from 'react'
-import styled from 'styled-components'
+import { styled } from '@horizontal-org/shira-ui'
 import Location from './Icons/Location'
 import Camera from './Icons/Camera'
 import Smile from './Icons/Smile'

diff --git a/src/components/Apps/DatingApp/Header/index.tsx b/src/components/Apps/DatingApp/Header/index.tsx
@@ -1,5 +1,5 @@
 import { FunctionComponent } from 'react'
-import styled from 'styled-components'
+import { styled } from '@horizontal-org/shira-ui'
 import BackArrow from './Icons/BackArrow'
 import MoreOptions from './Icons/MoreOptions'
 import Stranger from './Icons/Stranger'

diff --git a/src/components/Apps/FBMessenger/Chat/BottomBar.tsx b/src/components/Apps/FBMessenger/Chat/BottomBar.tsx
@@ -1,5 +1,5 @@
 import { FunctionComponent  } from "react"
-import styled from 'styled-components'
+import { styled } from '@horizontal-org/shira-ui'
 
 import RecorderIcon from "./RecorderIcon"
 

diff --git a/src/components/Apps/FBMessenger/Chat/ChatContent.tsx b/src/components/Apps/FBMessenger/Chat/ChatContent.tsx
@@ -1,5 +1,5 @@
 import { FunctionComponent  } from "react"
-import styled from 'styled-components'
+import { styled } from '@horizontal-org/shira-ui'
 import ProfilePicture from "../../Whatsapp/ProfilePicture"
 import DocumentIcon from './assets/document.png'
 interface Props {

diff --git a/src/components/Apps/FBMessenger/Chat/TopBar.tsx b/src/components/Apps/FBMessenger/Chat/TopBar.tsx
@@ -1,5 +1,5 @@
 import { FunctionComponent  } from "react"
-import styled from 'styled-components'
+import { styled } from '@horizontal-org/shira-ui'
 
 import CallIcon from './assets/call.png'
 import PhoneIcon from './assets/video.png'

diff --git a/src/components/Apps/FBMessenger/Chat/index.tsx b/src/components/Apps/FBMessenger/Chat/index.tsx
@@ -1,5 +1,5 @@
 import { FunctionComponent } from "react"
-import styled from 'styled-components'
+import { styled } from '@horizontal-org/shira-ui'
 import BottomBar from "./BottomBar"
 import ChatContent from "./ChatContent"
 

diff --git a/src/components/Apps/FBMessenger/MessagesSidebar/Header.tsx b/src/components/Apps/FBMessenger/MessagesSidebar/Header.tsx
@@ -1,5 +1,5 @@
 import { FunctionComponent  } from "react"
-import styled from 'styled-components'
+import { styled } from '@horizontal-org/shira-ui'
 
 import VideoIcon from '../assets/video.png'
 import NewMessageIcon from '../assets/new-message.png'

diff --git a/src/components/Apps/FBMessenger/MessagesSidebar/Index.tsx b/src/components/Apps/FBMessenger/MessagesSidebar/Index.tsx
@@ -1,5 +1,5 @@
 import { FunctionComponent  } from "react"
-import styled from 'styled-components'
+import { styled } from '@horizontal-org/shira-ui'
 import Header from "./Header"
 import MessagesList from "./MessagesList"
 import SearchBar from "./SearchBar"

diff --git a/src/components/Apps/FBMessenger/MessagesSidebar/MessagesList.tsx b/src/components/Apps/FBMessenger/MessagesSidebar/MessagesList.tsx
@@ -1,5 +1,5 @@
 import { FunctionComponent  } from "react"
-import styled from 'styled-components'
+import { styled } from '@horizontal-org/shira-ui'
 import ProfilePicture from "../../Whatsapp/ProfilePicture"
 
 const MessagesList: FunctionComponent = () => {

diff --git a/src/components/Apps/FBMessenger/MessagesSidebar/SearchBar.tsx b/src/components/Apps/FBMessenger/MessagesSidebar/SearchBar.tsx
@@ -1,5 +1,5 @@
 import { FunctionComponent  } from "react"
-import styled from 'styled-components'
+import { styled } from '@horizontal-org/shira-ui'
 
 import SearchIcon from '../assets/search.png'
 

diff --git a/src/components/Apps/FBMessenger/index.tsx b/src/components/Apps/FBMessenger/index.tsx
@@ -1,5 +1,5 @@
 import { FunctionComponent  } from "react"
-import styled from 'styled-components'
+import { styled } from '@horizontal-org/shira-ui'
 
 import MessageSidebar from "./MessagesSidebar/Index"
 import Chat from "./Chat"

diff --git a/src/components/Apps/Gmail/Applications/index.tsx b/src/components/Apps/Gmail/Applications/index.tsx
@@ -1,5 +1,5 @@
 import { FunctionComponent } from 'react'
-import styled from 'styled-components'
+import { styled } from '@horizontal-org/shira-ui'
 
 import CalendarIcon from './assets/calendar.png'
 import ContactsIcon from './assets/contacts.png'

diff --git a/src/components/Apps/Gmail/Attachment/index.tsx b/src/components/Apps/Gmail/Attachment/index.tsx
@@ -1,5 +1,5 @@
 import { FunctionComponent } from 'react'
-import styled from 'styled-components'
+import { styled } from '@horizontal-org/shira-ui'
 import { RiFileFill } from 'react-icons/ri'
 
 interface Props {

diff --git a/src/components/Apps/Gmail/Attachments/index.tsx b/src/components/Apps/Gmail/Attachments/index.tsx
@@ -1,5 +1,5 @@
 import { FunctionComponent } from 'react'
-import styled from 'styled-components'
+import { styled } from '@horizontal-org/shira-ui'
 import { Attachment } from '../Attachment';
 
 interface Props {

diff --git a/src/components/Apps/Gmail/Header/components/IconWrapper/index.tsx b/src/components/Apps/Gmail/Header/components/IconWrapper/index.tsx
@@ -1,4 +1,4 @@
-import styled from 'styled-components'
+import { styled } from '@horizontal-org/shira-ui'
 
 export default styled.div`
   padding: 8px;

diff --git a/src/components/Apps/Gmail/Header/components/Search/index.tsx b/src/components/Apps/Gmail/Header/components/Search/index.tsx
@@ -1,5 +1,5 @@
 import { FunctionComponent } from 'react'
-import styled from 'styled-components'
+import { styled } from '@horizontal-org/shira-ui'
 
 import SearchIcon from './components/SearchIcon'
 import PreferencesIcon from './components/PreferencesIcon'

diff --git a/src/components/Apps/Gmail/Header/index.tsx b/src/components/Apps/Gmail/Header/index.tsx
@@ -1,5 +1,5 @@
 import { FunctionComponent } from 'react'
-import styled from 'styled-components'
+import { styled } from '@horizontal-org/shira-ui'
 
 import Search from './components/Search'
 import IconWrapper from './components/IconWrapper'

diff --git a/src/components/Apps/Gmail/MailOptions/index.tsx b/src/components/Apps/Gmail/MailOptions/index.tsx
@@ -1,5 +1,5 @@
 import { FunctionComponent } from 'react'
-import styled from 'styled-components'
+import { styled } from '@horizontal-org/shira-ui'
 import useGetWidth from '../../../../hooks/useGetWidth'
 
 import ArchiveIcon from './assets/archive.png'

diff --git a/src/components/Apps/Gmail/Profile/index.tsx b/src/components/Apps/Gmail/Profile/index.tsx
@@ -1,5 +1,5 @@
 import { FunctionComponent } from "react";
-import styled from 'styled-components'
+import { styled } from '@horizontal-org/shira-ui'
 import ProfileIcon from './assets/profile.png'
 
 interface CustomElements {

diff --git a/src/components/Apps/Gmail/Sidebar/components/Categories/index.tsx b/src/components/Apps/Gmail/Sidebar/components/Categories/index.tsx
@@ -1,5 +1,5 @@
 import { FunctionComponent } from 'react'
-import styled from 'styled-components'
+import { styled } from '@horizontal-org/shira-ui'
 
 import ChevronDown from '../../assets/arrow_drop_down.png'
 

diff --git a/src/components/Apps/Gmail/Sidebar/index.tsx b/src/components/Apps/Gmail/Sidebar/index.tsx
@@ -1,5 +1,5 @@
 import { FunctionComponent } from 'react' 
-import styled from 'styled-components'
+import { styled } from '@horizontal-org/shira-ui'
 import Categories from './components/Categories'
 
 import RedPencilImage from './assets/redpencil.png'

diff --git a/src/components/Apps/Gmail/index.tsx b/src/components/Apps/Gmail/index.tsx
@@ -1,5 +1,5 @@
 import { FunctionComponent } from "react"
-import styled, { createGlobalStyle } from 'styled-components'
+import { styled, createGlobalStyle } from '@horizontal-org/shira-ui'
 
 import Header from './Header'
 import Sidebar from "./Sidebar"

diff --git a/src/components/Apps/SMS/Attachment/index.tsx b/src/components/Apps/SMS/Attachment/index.tsx
@@ -1,5 +1,5 @@
 import { FunctionComponent } from "react";
-import styled from 'styled-components'
+import { styled } from '@horizontal-org/shira-ui'
 import { Pic } from "../Pic";
 import Document from './assets/Document'
 interface Props {

diff --git a/src/components/Apps/SMS/Content/index.tsx b/src/components/Apps/SMS/Content/index.tsx
@@ -1,5 +1,5 @@
 import { FunctionComponent, useEffect, useState } from 'react'
-import styled from 'styled-components'
+import { styled } from '@horizontal-org/shira-ui'
 import { Attachment } from '../Attachment'
 import { Message } from '../Message'
 

diff --git a/src/components/Apps/SMS/Footer/index.tsx b/src/components/Apps/SMS/Footer/index.tsx
@@ -1,5 +1,5 @@
 import { FunctionComponent } from 'react'
-import styled from 'styled-components'
+import { styled } from '@horizontal-org/shira-ui'
 import ImageIcon from './ImageIcon'
 import LandscapeIcon from './LandscapeIcon'
 interface Props {}

diff --git a/src/components/Apps/SMS/Header/index.tsx b/src/components/Apps/SMS/Header/index.tsx
@@ -1,5 +1,5 @@
 import { FunctionComponent } from 'react'
-import styled from 'styled-components'
+import { styled } from '@horizontal-org/shira-ui'
 import Arrow from './assets/Arrow'
 import Call from './assets/Call'
 import Search from './assets/Search'

diff --git a/src/components/Apps/SMS/Message/index.tsx b/src/components/Apps/SMS/Message/index.tsx
@@ -1,5 +1,5 @@
 import { FunctionComponent } from 'react'
-import styled from 'styled-components'
+import { styled } from '@horizontal-org/shira-ui'
 import { Pic } from '../Pic'
 
 interface Props {

diff --git a/src/components/Apps/SMS/Pic/index.tsx b/src/components/Apps/SMS/Pic/index.tsx
@@ -1,5 +1,5 @@
 import { FunctionComponent } from 'react'
-import styled from 'styled-components'
+import { styled } from '@horizontal-org/shira-ui'
 import Account from './assets/Account'
 
 interface Props {

diff --git a/src/components/Apps/Whatsapp/Background/index.tsx b/src/components/Apps/Whatsapp/Background/index.tsx
@@ -1,5 +1,5 @@
 import { FunctionComponent, ReactNode } from 'react'
-import styled from 'styled-components'
+import { styled } from '@horizontal-org/shira-ui'
 
 interface Props {
   children: ReactNode

diff --git a/src/components/Apps/Whatsapp/MessageWrapper/components/Attachment/index.tsx b/src/components/Apps/Whatsapp/MessageWrapper/components/Attachment/index.tsx
@@ -1,5 +1,5 @@
 import { FunctionComponent } from "react";
-import styled from 'styled-components'
+import { styled } from '@horizontal-org/shira-ui'
 import Document from '../../assets/document.png'
 import DownloadIcon from '../../../Icons/Download'
 

diff --git a/src/components/Apps/Whatsapp/MessageWrapper/components/Message/index.tsx b/src/components/Apps/Whatsapp/MessageWrapper/components/Message/index.tsx
@@ -1,5 +1,5 @@
 import { FunctionComponent } from 'react'
-import styled from 'styled-components'
+import { styled } from '@horizontal-org/shira-ui'
 
 
 interface Props {

diff --git a/src/components/Apps/Whatsapp/MessageWrapper/components/Recipient/index.tsx b/src/components/Apps/Whatsapp/MessageWrapper/components/Recipient/index.tsx
@@ -1,5 +1,5 @@
 import { FunctionComponent } from 'react'
-import styled from 'styled-components'
+import { styled } from '@horizontal-org/shira-ui'
 import ProfilePicture from '../../../ProfilePicture'
 
 import MoreOptionsIcon from '../../../Icons/MoreOptions'

diff --git a/src/components/Apps/Whatsapp/MessageWrapper/index.tsx b/src/components/Apps/Whatsapp/MessageWrapper/index.tsx
@@ -1,5 +1,5 @@
 import { FunctionComponent, useState } from 'react'
-import styled from 'styled-components'
+import { styled } from '@horizontal-org/shira-ui'
 import Recipient from './components/Recipient'
 import Message from './components/Message'
 import Background from './assets/background.png'

diff --git a/src/components/Apps/Whatsapp/ProfilePicture/index.tsx b/src/components/Apps/Whatsapp/ProfilePicture/index.tsx
@@ -1,5 +1,5 @@
 import { FunctionComponent } from 'react'
-import styled from 'styled-components'
+import { styled } from '@horizontal-org/shira-ui'
 
 import Picture from './components/Picture'
 

diff --git a/src/components/Apps/Whatsapp/Sidebar/components/MessagesPreview/index.tsx b/src/components/Apps/Whatsapp/Sidebar/components/MessagesPreview/index.tsx
@@ -1,5 +1,5 @@
 import { FunctionComponent } from 'react'
-import styled from 'styled-components'
+import { styled } from '@horizontal-org/shira-ui'
 import ProfilePicture from '../../../ProfilePicture'
 
 interface Props {}

diff --git a/src/components/Apps/Whatsapp/Sidebar/components/Profile/index.tsx b/src/components/Apps/Whatsapp/Sidebar/components/Profile/index.tsx
@@ -1,5 +1,5 @@
 import { FunctionComponent } from 'react'
-import styled from 'styled-components'
+import { styled } from '@horizontal-org/shira-ui'
 import ProfilePicture from '../../../ProfilePicture'
 
 import StoriesIcon from '../../../Icons/Stories'

diff --git a/src/components/Apps/Whatsapp/Sidebar/components/SearchBar/index.tsx b/src/components/Apps/Whatsapp/Sidebar/components/SearchBar/index.tsx
@@ -1,5 +1,5 @@
 import { FunctionComponent } from 'react'
-import styled from 'styled-components'
+import { styled } from '@horizontal-org/shira-ui'
 
 interface Props {}
 

diff --git a/src/components/Apps/Whatsapp/Sidebar/index.tsx b/src/components/Apps/Whatsapp/Sidebar/index.tsx
@@ -1,5 +1,5 @@
 import { FunctionComponent } from 'react'
-import styled from 'styled-components'
+import { styled } from '@horizontal-org/shira-ui'
 
 import Profile from './components/Profile'
 import SearchBar from './components/SearchBar'

diff --git a/src/components/Apps/Whatsapp/StrangerPicture/index.tsx b/src/components/Apps/Whatsapp/StrangerPicture/index.tsx
@@ -1,5 +1,5 @@
 import { FunctionComponent } from 'react'
-import styled from 'styled-components'
+import { styled } from '@horizontal-org/shira-ui'
 
 import Stranger from '../Icons/Stranger'
 

diff --git a/src/components/Apps/Whatsapp/index.tsx b/src/components/Apps/Whatsapp/index.tsx
@@ -1,5 +1,5 @@
 import { FunctionComponent  } from "react"
-import styled, { createGlobalStyle } from 'styled-components'
+import { styled, createGlobalStyle } from '@horizontal-org/shira-ui'
 
 import Background from './Background'
 import MessageWrapper from "./MessageWrapper"

diff --git a/src/components/Layouts/AboutLayout/index.tsx b/src/components/Layouts/AboutLayout/index.tsx
@@ -1,5 +1,5 @@
 import { FunctionComponent, useRef } from "react";
-import styled from 'styled-components'
+import { styled } from '@horizontal-org/shira-ui'
 import { Navbar } from "../../UI/Navbar";
 import { SceneWrapper } from "../../UI/SceneWrapper";
 import { useTranslation } from "react-i18next";

diff --git a/src/components/Layouts/AppLayout/index.tsx b/src/components/Layouts/AppLayout/index.tsx
@@ -1,5 +1,5 @@
 import { FunctionComponent } from 'react'
-import styled from 'styled-components'
+import { styled } from '@horizontal-org/shira-ui'
 import { App } from '../../../domain/app'
 import { Explanation } from '../../../domain/explanation'
 import { MailApps } from '../../UI/AppTypes/MailApps'

diff --git a/src/components/Layouts/PrivacyLayout/index.tsx b/src/components/Layouts/PrivacyLayout/index.tsx
@@ -1,5 +1,5 @@
 import { FunctionComponent, useRef } from "react";
-import styled from 'styled-components'
+import { styled } from '@horizontal-org/shira-ui'
 import { Navbar } from "../../UI/Navbar";
 import { SceneWrapper } from "../../UI/SceneWrapper";
 import { useTranslation } from "react-i18next";

diff --git a/src/components/UI/AnswerFeedback/index.tsx b/src/components/UI/AnswerFeedback/index.tsx
@@ -1,6 +1,6 @@
 import { Dispatch, FunctionComponent, SetStateAction } from "react";
 import { FiChevronRight, FiChevronLeft } from "react-icons/fi";
-import styled from 'styled-components'
+import { styled } from '@horizontal-org/shira-ui'
 import { Button } from "../Button";
 
 import UnsureIcon from '../Icons/Unsure'

diff --git a/src/components/UI/AnswerOptions/index.tsx b/src/components/UI/AnswerOptions/index.tsx
@@ -1,5 +1,5 @@
 import { FunctionComponent, useState } from "react";
-import styled from 'styled-components'
+import { styled } from '@horizontal-org/shira-ui'
 import { FiChevronRight, FiChevronLeft } from "react-icons/fi";
 
 import LegitimateIcon from '../Icons/ThumbUp'

diff --git a/src/components/UI/AppItem/index.tsx b/src/components/UI/AppItem/index.tsx
@@ -1,5 +1,5 @@
 import { FunctionComponent } from "react";
-import styled from 'styled-components'
+import { styled } from '@horizontal-org/shira-ui'
 
 // Icons
 import GmailSvg from './assets/Mail'