Style components with tailwind & update storybook

.storybook/main.ts

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

package.json

@@ -12,32 +12,35 @@
     "@styled-system/css": "^5.1.5",
     "@styled-system/should-forward-prop": "^5.1.5",
     "class-variance-authority": "^0.7.0",
-    "clsx": "^2.1.0",
+    "clsx": "^2.1.1",
+    "mini-svg-data-uri": "^1.4.4",
     "react-select": "^5.8.0",
-    "styled-system": "^5.1.5"
+    "styled-system": "^5.1.5",
+    "tailwind-merge": "^2.3.0",
+    "yalc": "^1.0.0-pre.53"
   },
   "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",
+    "@chromatic-com/storybook": "^1.6.0",
     "@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": "^8.0.9",
-    "@storybook/addon-interactions": "^8.0.9",
-    "@storybook/addon-links": "^8.0.9",
-    "@storybook/addon-mdx-gfm": "^8.0.9",
-    "@storybook/addon-onboarding": "^8.0.9",
-    "@storybook/blocks": "^8.0.9",
-    "@storybook/react": "^8.0.9",
-    "@storybook/react-vite": "^8.0.9",
-    "@storybook/test": "^8.0.9",
+    "@storybook/addon-essentials": "^8.1.11",
+    "@storybook/addon-interactions": "^8.1.11",
+    "@storybook/addon-links": "^8.1.11",
+    "@storybook/addon-mdx-gfm": "^8.1.11",
+    "@storybook/addon-onboarding": "^8.1.11",
+    "@storybook/blocks": "^8.1.11",
+    "@storybook/react": "^8.1.11",
+    "@storybook/react-vite": "^8.1.11",
+    "@storybook/test": "^8.1.11",
     "@svgr/rollup": "^8.1.0",
     "@tailwindcss/forms": "^0.5.7",
     "@testing-library/dom": "^9.3.4",
@@ -58,10 +61,10 @@
     "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",
@@ -70,13 +73,13 @@
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-typescript2": "^0.36.0",
     "rollup-plugin-visualizer": "^5.12.0",
-    "storybook": "^8.0.9",
-    "styled-components": "^6.1.8",
-    "tailwindcss": "^3.4.1",
-    "ts-jest": "^29.1.2",
-    "tslib": "^2.6.2",
-    "typescript": "^5.3.3",
-    "vite": "^5.1.3"
+    "storybook": "^8.1.11",
+    "styled-components": "^6.1.11",
+    "tailwindcss": "^3.4.4",
+    "ts-jest": "^29.1.5",
+    "tslib": "^2.6.3",
+    "typescript": "^5.5.3",
+    "vite": "^5.3.3"
   },
   "resolutions": {
     "serialize-javascript": "^6.0.0",
@@ -86,10 +89,12 @@
   "peerDependencies": {
     "react": ">= 17",
     "react-icons": ">= 4",
-    "styled-components": ">= 6"
+    "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\"",
@@ -105,5 +110,12 @@
     "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

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

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>,