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
 ```
 
@@ -69,20 +68,14 @@ Styling is based on [Bulma](https://bulma.io/documentation/) and was initially
 customized with SASS. However we now include [styled-components](https://github.com/emotion-js/emotion), [styled-system](https://github.com/jxnblk/styled-system) and [@rebass/grid](https://github.com/rebassjs/grid).
 This has become the prefered way to build new components.
 
-#### Icons
-
-We bundle a custom font icon built with [IcoMoon](https://icomoon.io/). You can find scripts and config
-for this in `dev/` but the preferred (and easiest) way to add new icons today
-is to use `https://styled-icons.js.org/`.
-
 ## Main Libraries / Frameworks
 
 - [ES6](http://es6-features.org) with [Babel](https://babeljs.io/)
 - [React](https://reactjs.org/): View layer
-- [Redux](https://redux.js.org/): State management
 - [React Router](https://github.com/ReactTraining/react-router): Routing
 - [Phoenix](https://phoenixframework.org/): Interaction with [https://hexdocs.pm/phoenix/Phoenix.Socket.html](Phoenix.Socket)
-- [Bulma](https://bulma.io/): Base styles
+- [TailwindCSS](https://tailwindcss.com/): Utility-first CSS framework
+- [Redux](https://redux.js.org/): State management (deprecated)
 
 ## Linked projects
 

app/API/no_internet_error.js

@@ -1,14 +1,21 @@
 // Used only to show a message when request fail / timeout due to connection problems
+
+import { Trans } from 'react-i18next'
+
+import { ToastAction } from '@/components/ui/toast'
+import { toast } from '@/hooks/use-toast'
+
 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',
-    }),
-  )
+  toast({
+    variant: 'destructive',
+    description: NO_INTERNET_ERROR,
+    duration: 999999999999,
+    action: (
+      <ToastAction onClick={() => window.location.reload()}>
+        <Trans i18nKey="main:actions.reload" />
+      </ToastAction>
+    ),
+  })
 }

app/App.jsx

@@ -1,19 +1,21 @@
 // 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 { TooltipProvider } from './components/ui/tooltip'
 import { ENTITY_SPEAKER, ENTITY_STATEMENT, ENTITY_VIDEO } from './constants'
 import i18n from './i18n/i18n'
 import { ALGOLIA_INDEXES_NAMES, searchClient } from './lib/algolia'
@@ -24,34 +26,38 @@ 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}>
+            <TooltipProvider>
+              <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>
+            </TooltipProvider>
+          </I18nextProvider>
+        </ApolloProvider>
+      </ReduxProvider>
+    </ThemeProvider>
+  </ToastProvider>
 )
 
 export default App

app/components/App/CrashReportPage.jsx

@@ -1,7 +1,7 @@
 import { Flex } from '@rebass/grid'
 import { truncate } from 'lodash'
 import React from 'react'
-import { withNamespaces } from 'react-i18next'
+import { withTranslation } from 'react-i18next'
 import { Support } from 'styled-icons/boxicons-regular'
 import { Github } from 'styled-icons/fa-brands'
 import { Redo } from 'styled-icons/fa-solid'
@@ -82,4 +82,4 @@ const CrashReportPage = ({ t, error }) => {
   )
 }
 
-export default withNamespaces('errors')(CrashReportPage)
+export default withTranslation('errors')(CrashReportPage)

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 { withTranslation } 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',
@@ -15,32 +22,31 @@ const defaultLocales = new Map({
   pt_BR: 'Português (Brasil)',
 })
 
-@withNamespaces() // Force waiting for translations to be loaded
+@withTranslation() // Force waiting for translations to be loaded
 export default class LanguageSelector extends React.PureComponent {
   renderSelect() {
     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>
     )
   }
 }