chore: Migrate to tailwind

.babelrc

@@ -1,5 +1,5 @@
 {
-  "presets": ["@babel/preset-env", "@babel/preset-react"],
+  "presets": ["@babel/preset-env", "@babel/preset-react", "@babel/preset-typescript"],
   "plugins": [
     ["babel-plugin-wildcard", { "exts": ["json"], "nostrip": true, "noModifyCase": true }],
     [

.dockerignore

@@ -4,7 +4,6 @@
 .vscode
 .eslintrc.yml
 .gitignore
-.sass-lint.yml
 .travis.yml
 
 node_modules

.gitignore

@@ -8,7 +8,6 @@
 *.swp
 *.vi
 *~
-*.sass-cache
 
 # OS or Editor folders
 .DS_Store

README.md

@@ -59,7 +59,6 @@ app
 │   │   └── selectors.js => Re-select selectors to select data in state
 │   └── ...
 ├── static => Static assets, directly copied to the public directory
-├── styles => Stylesheets in .sass format, all included from application.sass
 └── router.jsx => Application router and main entry point
 ```
 

app/API/no_internet_error.js

@@ -1,14 +1,14 @@
 // Used only to show a message when request fail / timeout due to connection problems
+
 import { NO_INTERNET_ERROR } from '../constants'
 import { flashError } from '../state/flashes/reducer'
-import store from '../state/index'
 
 export default function noInternetError() {
-  store.dispatch(
-    flashError({
-      message: NO_INTERNET_ERROR,
-      timeLeft: 999999999999,
-      infoText: 'actions.reload',
-    }),
-  )
+  flashError({
+    title: 'TODO',
+    message: NO_INTERNET_ERROR,
+    infoText: 'actions.reload',
+    variant: 'destructive',
+    duration: 999999999999,
+  })
 }

app/App.jsx

@@ -1,19 +1,20 @@
 // Import polyfills
 // Import styles
-import './styles/application.sass'
+import '@/styles/main.css'
 
 import { ApolloProvider } from '@apollo/client'
 // Import libs
 import React from 'react'
 import { I18nextProvider } from 'react-i18next'
 import { Configure, Index, InstantSearch } from 'react-instantsearch-dom'
 import { Provider as ReduxProvider } from 'react-redux'
-import { polyfill as smoothSrollPolyfill } from 'smoothscroll-polyfill'
+import { polyfill as smoothScrollPolyfill } from 'smoothscroll-polyfill'
 import { ThemeProvider } from 'styled-components'
 
 // Import APIs so they can load their configurations
 import GraphQLClient from './API/graphql_api'
 import UserProvider from './components/LoggedInUser/UserProvider'
+import { ToastProvider } from './components/ui/toast'
 import { ENTITY_SPEAKER, ENTITY_STATEMENT, ENTITY_VIDEO } from './constants'
 import i18n from './i18n/i18n'
 import { ALGOLIA_INDEXES_NAMES, searchClient } from './lib/algolia'
@@ -24,34 +25,36 @@ import store from './state'
 import theme from './styles/theme'
 
 // Activate polyfills
-smoothSrollPolyfill()
+smoothScrollPolyfill()
 
 const App = () => (
-  <ThemeProvider theme={theme}>
-    <ReduxProvider store={store}>
-      <ApolloProvider client={GraphQLClient}>
-        <I18nextProvider i18n={i18n}>
-          <UserProvider>
-            <InstantSearch
-              searchClient={searchClient}
-              indexName={ALGOLIA_INDEXES_NAMES[ENTITY_VIDEO]}
-            >
-              <Index indexName={ALGOLIA_INDEXES_NAMES[ENTITY_VIDEO]}>
-                <Configure hitsPerPage={16} />
-              </Index>
-              <Index indexName={ALGOLIA_INDEXES_NAMES[ENTITY_SPEAKER]}>
-                <Configure hitsPerPage={32} />
-              </Index>
-              <Index indexName={ALGOLIA_INDEXES_NAMES[ENTITY_STATEMENT]}>
-                <Configure hitsPerPage={24} />
-              </Index>
-              <CFRouter />
-            </InstantSearch>
-          </UserProvider>
-        </I18nextProvider>
-      </ApolloProvider>
-    </ReduxProvider>
-  </ThemeProvider>
+  <ToastProvider>
+    <ThemeProvider theme={theme}>
+      <ReduxProvider store={store}>
+        <ApolloProvider client={GraphQLClient}>
+          <I18nextProvider i18n={i18n}>
+            <UserProvider>
+              <InstantSearch
+                searchClient={searchClient}
+                indexName={ALGOLIA_INDEXES_NAMES[ENTITY_VIDEO]}
+              >
+                <Index indexName={ALGOLIA_INDEXES_NAMES[ENTITY_VIDEO]}>
+                  <Configure hitsPerPage={16} />
+                </Index>
+                <Index indexName={ALGOLIA_INDEXES_NAMES[ENTITY_SPEAKER]}>
+                  <Configure hitsPerPage={32} />
+                </Index>
+                <Index indexName={ALGOLIA_INDEXES_NAMES[ENTITY_STATEMENT]}>
+                  <Configure hitsPerPage={24} />
+                </Index>
+                <CFRouter />
+              </InstantSearch>
+            </UserProvider>
+          </I18nextProvider>
+        </ApolloProvider>
+      </ReduxProvider>
+    </ThemeProvider>
+  </ToastProvider>
 )
 
 export default App

app/components/App/LanguageSelector.jsx

@@ -1,10 +1,17 @@
-import { Box, Flex } from '@rebass/grid'
-import classNames from 'classnames'
 import { Map } from 'immutable'
 import React from 'react'
 import { withNamespaces } from 'react-i18next'
 import { Globe } from 'styled-icons/fa-solid'
 
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
+import { cn } from '@/lib/css-utils'
+
 const defaultLocales = new Map({
   en: 'English',
   fr: 'Français',
@@ -21,26 +28,25 @@ export default class LanguageSelector extends React.PureComponent {
     const options = defaultLocales.merge(this.props.additionalOptions || {}).sortBy((v, k) => k)
 
     return (
-      <select
-        onChange={(e) => this.props.handleChange(e.target.value)}
-        value={this.props.value}
-        id={this.props.id}
-      >
-        {this.renderLocalesMap(options)}
-      </select>
+      <Select onValueChange={this.props.handleChange} value={this.props.value} id={this.props.id}>
+        <SelectTrigger className="w-full min-w-32">
+          <SelectValue />
+        </SelectTrigger>
+        <SelectContent>{this.renderLocalesMap(options)}</SelectContent>
+      </Select>
     )
   }
 
   renderLocalesMap(localesMap) {
     return localesMap.entrySeq().map(([key, value]) => (
-      <option key={key} value={key}>
+      <SelectItem key={key} value={key}>
         {value}
-      </option>
+      </SelectItem>
     ))
   }
 
   renderIcon() {
-    const { value, size } = this.props
+    const { value } = this.props
     if (value === 'fr') {
       return '🇫🇷'
     } else if (value === 'en') {
@@ -56,16 +62,15 @@ export default class LanguageSelector extends React.PureComponent {
     } else if (value === 'ru') {
       return '🇷🇺'
     }
-    return <Globe size={!size ? '2em' : '1em'} />
+    return <Globe size={'2em'} />
   }
 
   render() {
-    const sizeClass = this.props.size ? `is-${this.props.size}` : null
     return (
-      <Flex className={classNames('language-selector', this.props.className)} alignItems="center">
-        {this.props.withIcon && <Box mx="0.5em">{this.renderIcon()}</Box>}
-        <span className={classNames('select', sizeClass)}>{this.renderSelect()}</span>
-      </Flex>
+      <div className={cn('flex items-center', this.props.className)}>
+        {this.props.withIcon && <div className="mr-2">{this.renderIcon()}</div>}
+        {this.renderSelect()}
+      </div>
     )
   }
 }

app/components/App/Layout.jsx

@@ -2,9 +2,11 @@ import React from 'react'
 import { Helmet } from 'react-helmet'
 import { connect } from 'react-redux'
 
+import { cn } from '@/lib/css-utils'
+
 import { MainModalContainer } from '../Modal/MainModalContainer'
+import { Toaster } from '../ui/toaster'
 import PublicAchievementUnlocker from '../Users/PublicAchievementUnlocker'
-import { FlashMessages } from '../Utils'
 import BackgroundNotifier from './BackgroundNotifier'
 import CrashReportPage from './CrashReportPage'
 import Navbar from './Navbar'
@@ -48,24 +50,27 @@ export default class Layout extends React.PureComponent {
 
   render() {
     const { locale, sidebarExpended, children } = this.props
-    const mainContainerClass = sidebarExpended ? undefined : 'expended'
 
     return (
-      <div id="main-layout" lang={locale}>
-        {this.renderMetadata()}
-        <MainModalContainer />
-        <FlashMessages />
-        <Navbar />
-        <Sidebar />
-        <div id="main-container" className={mainContainerClass}>
-          {!this.state.error ? children : <CrashReportPage error={this.state.error} />}
+      <React.Fragment>
+        <div id="main-layout" lang={locale}>
+          {this.renderMetadata()}
+          <MainModalContainer />
+          <Navbar />
+          <Sidebar />
+          <div
+            className={cn(sidebarExpended ? 'pl-[var(--sidebar-width)]' : 'pl-0', 'transition-all')}
+          >
+            {!this.state.error ? children : <CrashReportPage error={this.state.error} />}
+          </div>
+          <BackgroundNotifier />
+          <PublicAchievementUnlocker
+            achievementId={4}
+            meetConditionsFunc={this.checkExtensionInstall}
+          />
         </div>
-        <BackgroundNotifier />
-        <PublicAchievementUnlocker
-          achievementId={4}
-          meetConditionsFunc={this.checkExtensionInstall}
-        />
-      </div>
+        <Toaster />
+      </React.Fragment>
     )
   }
 

app/components/App/Logo.jsx

@@ -29,10 +29,12 @@ const Image = styled.img`
  * The main website logo.
  */
 const Logo = ({ borderless, height }) => (
-  <LogoContainer size={height}>
+  <LogoContainer size={height} className="tracking-wide">
     <Image alt="C" src={borderless ? borderlessLogo : logo} />
-    <Span ml="1px">aptain</Span>
-    <Span fontWeight="bold" mr={1}>
+    <Span className="text-xl" ml="1px">
+      aptain
+    </Span>
+    <Span className="text-xl" fontWeight="bold" mr={1}>
       Fact
     </Span>
   </LogoContainer>