Use Tailwind for styling components

.babelrc

@@ -11,6 +11,5 @@
     ],
     "@babel/preset-typescript",
     "@babel/preset-react"
-  ],
-  "plugins": ["babel-plugin-styled-components"]
+  ]
 }

.storybook/main.ts

@@ -5,20 +5,26 @@ const config: StorybookConfig = {
     '../stories/**/*.mdx',
     '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)',
   ],
-  staticDirs: ['../src/fonts/'],
+
+  // staticDirs: ['../src/fonts/'],
+
   addons: [
     '@storybook/addon-links',
     '@storybook/addon-essentials',
     '@storybook/addon-onboarding',
     '@storybook/addon-interactions',
-    '@storybook/addon-mdx-gfm',
+    '@chromatic-com/storybook',
   ],
+
   framework: {
     name: '@storybook/react-vite',
     options: {},
   },
-  docs: {
-    autodocs: 'tag',
+
+  docs: {},
+
+  typescript: {
+    reactDocgen: 'react-docgen-typescript',
   },
 }
 export default config

.storybook/preview.tsx

@@ -1,25 +1,18 @@
 import type { Preview } from '@storybook/react'
 import React from 'react'
-import { ThemeProvider } from 'styled-components'
+import '../src/tailwind.css'
 import theme from '../src/theme'
 
 const preview: Preview = {
   parameters: {
-    actions: { argTypesRegex: '^on[A-Z].*' },
     controls: {
       matchers: {
         color: /(background|color)$/i,
         date: /Date$/i,
       },
     },
   },
-  decorators: [
-    (Story) => (
-      <ThemeProvider theme={theme}>
-        <Story />
-      </ThemeProvider>
-    ),
-  ],
+  decorators: [(Story) => <Story />],
 }
 
 export default preview

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ooni-components",
-  "version": "0.6.0-alpha.11",
+  "version": "0.7.0-alpha.6",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
   "types": "dist/index.d.ts",
@@ -9,55 +9,53 @@
   "author": "Arturo Filastò <arturo@filasto.net>",
   "license": "BSD-3-Clause",
   "dependencies": {
-    "@styled-system/css": "^5.1.5",
-    "@styled-system/should-forward-prop": "^5.1.5",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.1",
+    "mini-svg-data-uri": "^1.4.4",
     "react-select": "^5.8.0",
-    "styled-system": "^5.1.5"
+    "tailwind-merge": "^2.3.0"
   },
   "devDependencies": {
     "@babel/core": "^7.23.9",
     "@babel/preset-env": "^7.23.9",
     "@babel/preset-react": "^7.23.3",
     "@babel/preset-typescript": "^7.23.3",
     "@biomejs/biome": "1.5.3",
+    "@chromatic-com/storybook": "^1.6.1",
     "@rollup/plugin-commonjs": "^25.0.7",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-typescript": "^11.1.6",
     "@rollup/plugin-url": "^8.0.2",
-    "@storybook/addon-essentials": "^7.6.17",
-    "@storybook/addon-interactions": "^7.6.17",
-    "@storybook/addon-links": "^7.6.17",
-    "@storybook/addon-mdx-gfm": "^7.6.17",
-    "@storybook/addon-onboarding": "^1.0.11",
-    "@storybook/blocks": "^7.6.17",
-    "@storybook/react": "^7.6.17",
-    "@storybook/react-vite": "^7.6.17",
-    "@storybook/test": "^7.6.17",
-    "@storybook/testing-library": "^0.2.2",
+    "@storybook/addon-essentials": "^8.2.1",
+    "@storybook/addon-interactions": "^8.2.1",
+    "@storybook/addon-links": "^8.2.1",
+    "@storybook/addon-onboarding": "^8.2.1",
+    "@storybook/blocks": "^8.2.1",
+    "@storybook/react": "^8.2.1",
+    "@storybook/react-vite": "^8.2.1",
+    "@storybook/test": "^8.2.1",
     "@svgr/rollup": "^8.1.0",
+    "@tailwindcss/forms": "^0.5.7",
     "@testing-library/dom": "^9.3.4",
     "@testing-library/jest-dom": "^6.4.2",
     "@testing-library/react": "^14.2.1",
     "@testing-library/user-event": "^14.5.2",
     "@types/jest": "^29.5.12",
     "@types/react": "^18.2.57",
     "@types/react-dom": "^18.2.19",
-    "@types/styled-system": "^5.1.22",
-    "@types/styled-system__css": "^5.0.21",
+    "autoprefixer": "^10.4.17",
     "babel-plugin-inline-react-svg": "^2.0.2",
-    "babel-plugin-styled-components": "^2.1.4",
     "cheerio": "^1.0.0-rc.12",
     "gh-pages": "^6.1.1",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "jest-styled-components": "^7.1.1",
     "jest-svg-transformer": "^1.0.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-icons": "^5.0.1",
-    "rimraf": "^5.0.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-icons": "^5.2.1",
+    "rimraf": "^5.0.7",
     "rollup": "^4.12.0",
     "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-delete": "^2.0.0",
@@ -66,25 +64,22 @@
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-typescript2": "^0.36.0",
     "rollup-plugin-visualizer": "^5.12.0",
-    "storybook": "^7.6.17",
-    "styled-components": "^6.1.8",
-    "ts-jest": "^29.1.2",
-    "tslib": "^2.6.2",
-    "typescript": "^5.3.3",
-    "vite": "^5.1.3"
-  },
-  "resolutions": {
-    "serialize-javascript": "^6.0.0",
-    "node-fetch": "^2.6.7",
-    "jackspeak": "2.1.1"
+    "storybook": "^8.2.1",
+    "tailwindcss": "^3.4.4",
+    "ts-jest": "^29.1.5",
+    "tslib": "^2.6.3",
+    "typescript": "^5.5.3",
+    "vite": "^5.3.3",
+    "yalc": "^1.0.0-pre.53"
   },
   "peerDependencies": {
     "react": ">= 17",
     "react-icons": ">= 4",
-    "styled-components": ">= 6"
+    "tailwindcss": ">=3.0.0"
   },
   "scripts": {
     "build": "yarn run rollup -c",
+    "build:tailwind": "tailwindcss -o tailwind/tailwind.css",
     "create-icons-dir": "rimraf src/components/icons && npx mkdirp src/components/icons",
     "create-icons": "npm run create-icons-dir && node src/bin/create-icons",
     "tag": "git tag -s -a v$npm_package_version  -m \"ooni-components $npm_package_version\"",
@@ -100,5 +95,5 @@
     "storybook": "storybook dev -p 6006",
     "storybook:build": "storybook build"
   },
-  "files": ["dist", "animations", "svgs", "index.d.ts", "icons"]
+  "files": ["dist", "animations", "svgs", "index.d.ts", "icons", "tailwind"]
 }

postcss.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+  plugins: {
+    'postcss-import': {},
+    'tailwindcss/nesting': {},
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

rollup.config.mjs

@@ -53,7 +53,7 @@ const mainBundle = {
     copy({
       targets: [
         {
-          src: './src/fonts',
+          src: './src/tailwind.css',
           dest: './dist',
         },
       ],

src/__test__/Icons.test.tsx

@@ -1,6 +1,6 @@
-import React from 'react'
 import { render, screen } from '@testing-library/react'
-import Flex from '../components/Flex'
+import React from 'react'
+
 import {
   CategoryCodeALDR,
   CategoryCodeANON,
@@ -106,9 +106,10 @@ describe('Icons', () => {
         {Object.keys(icons).map((k, i) => {
           const Icon = icons[i]
           return (
-            <Flex key={i} width={1 / 5} pb={3} data-testid={`icon-${i}`}>
+            // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
+            <div className="flex w-1/5 pb-4" key={i} data-testid={`icon-${i}`}>
               <Icon size={50} />
-            </Flex>
+            </div>
           )
         })}
       </div>,