Merge pull request #28 from onetdev/develop

feat(*): release v0.2.0

.envrc.example

@@ -0,0 +1,2 @@
+# To use nvmrc if asdf is being useg
+ASDF_NODEJS_LEGACY_VERSION_FILE=true

.eslintrc.js

@@ -5,6 +5,8 @@ module.exports = {
     'next/core-web-vitals',
     'plugin:@typescript-eslint/recommended',
     'plugin:prettier/recommended',
+    'plugin:storybook/recommended',
+    'plugin:tailwindcss/recommended',
   ],
   rules: {
     'import/order': [

.gitignore

@@ -36,4 +36,5 @@ yarn-error.log*
 *.tsbuildinfo
 next-env.d.ts
 
-certificates
+certificates
+*storybook.log

.nvmrc

@@ -1 +1 @@
-18.19.1
+20.17.0

.storybook/main.ts

@@ -0,0 +1,37 @@
+import type { StorybookConfig } from '@storybook/nextjs';
+import path from 'path';
+
+const config: StorybookConfig = {
+  stories: [
+    '../src/**/*.mdx',
+    '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)',
+  ],
+  addons: [
+    '@storybook/addon-onboarding',
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@chromatic-com/storybook',
+    '@storybook/addon-interactions',
+    '@storybook/addon-themes'
+  ],
+  framework: {
+    name: '@storybook/nextjs',
+    options: {},
+  },
+  docs: {
+    autodocs: 'tag',
+  },
+  staticDirs: ['../public'],
+  webpackFinal: async (config) => {
+    if (!config.resolve) {
+      return config;
+    }
+
+    config.resolve.alias = {
+      ...config.resolve.alias,
+      '@': path.resolve(__dirname, '../src'),
+    };
+    return config;
+  },
+};
+export default config;

.storybook/preview.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import type { Preview } from '@storybook/react';
+import { withThemeByDataAttribute, withThemeFromJSXProvider } from '@storybook/addon-themes';
+
+import '../src/styles/globals.css';
+import ScopedThemeStyle from '../src/styles/ScopedThemeStyle';
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+  decorators: [
+    // So `withThemeFromJSXProvider` could've handled global vars but then
+    // we would not have `[data-theme=*]` attribute that helps us to apply
+    // proper var scope to the components.
+    //
+    // Hence we need to manually pull in the `<ScopedThemeStyle />` style
+    // in a second decorator. Works like charm.
+    withThemeByDataAttribute({
+      themes: {
+        light: 'light',
+        dark: 'dark',
+      },
+      defaultTheme: 'dark',
+      attributeName: 'data-theme',
+    }),
+    (Story) => (
+      <>
+        <ScopedThemeStyle />
+        <Story />
+      </>
+    ),
+  ],
+};
+
+export default preview;

.vscode/extensions.json

@@ -3,6 +3,7 @@
         "dbaeumer.vscode-eslint",
         "esbenp.prettier-vscode",
         "rubymaniac.vscode-direnv",
-        "styled-components.vscode-styled-components"
+        "unifiedjs.vscode-mdx",
+        "bradlc.vscode-tailwindcss"
     ]
 }

.vscode/settings.json

@@ -14,4 +14,17 @@
     "typescript",
     "typescriptreact"
   ],
+  "files.associations": {
+    "*.css": "tailwindcss"
+  },
+  "editor.quickSuggestions": {
+    "strings": "on"
+  },
+  "tailwindCSS.classAttributes": [
+    "className",
+    "class",
+    "cx",
+    "iteratorClassName",
+    "localStyles.*"
+  ],
 }

README.md

@@ -10,14 +10,14 @@ The main idea is to collect all the disgusting features from today's website in
 - [x] Wheel of fortune coupon modal
 - [x] Add confirmation when trying to leave the page
 - [x] Update title while the user is on a different tab
-- [ ] Age verification on some images
+- [x] Asking for notification: no worries, the website won't send any notification
+- [ ] Funny, silly contents (inspired Onion news)
 - [ ] Newsletter modal when the user leaves the screen or scrolls down a bit
-- [ ] Asking for notification: no worries, the website won't send any notification
 - [ ] Asking for location permission: no worries, the website won't use your location
 - [ ] Sticky video player obscuring the page visibility. (+audio)
 - [ ] Randomly loading images while scrolling.
 - [ ] Low Quality images
-- [ ] Funny, silly contents (inspired Onion news)
+- [ ] Age verification on some images
 
 **Stretch goal experiments**:
 

next-i18next.config.js

@@ -2,7 +2,7 @@ const isDev = process.env.NODE_ENV === 'development';
 /** @type {import('next-i18next').UserConfig} */
 module.exports = {
   reloadOnPrerender: isDev,
-  debug: isDev,
+  debug: false, // isDev,
   i18n: {
     defaultLocale: 'en',
     locales: ['en', 'hu'],

package.json

@@ -1,6 +1,6 @@
 {
   "name": "themostannoyingwebsite",
-  "version": "0.1.4",
+  "version": "0.2.0",
   "author": {
     "name": "Konrad Koller",
     "email": "[email protected]",
@@ -14,69 +14,85 @@
     "start": "next start",
     "lint": "next lint",
     "lint:fix": "next lint --fix",
-    "lint:fix-all": "next lint -- --fix",
     "type-check": "tsc --project tsconfig.json --pretty --noEmit",
     "test": "jest --watch",
     "test:coverage": "jest --coverage",
     "test:once": "jest",
     "test:ci": "jest --ci",
     "prepare": "husky",
-    "gen-manifest": "tsx ./scripts/gen-manifest.ts"
+    "gen-manifest": "tsx ./scripts/gen-manifest.ts",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^6.5.1",
-    "@fortawesome/free-solid-svg-icons": "^6.5.1",
-    "@fortawesome/react-fontawesome": "^0.2.0",
-    "@reduxjs/toolkit": "^2.2.1",
-    "@vercel/analytics": "^1.2.2",
+    "@fortawesome/fontawesome-svg-core": "^6.6.0",
+    "@fortawesome/free-solid-svg-icons": "^6.6.0",
+    "@fortawesome/react-fontawesome": "^0.2.2",
+    "@vercel/analytics": "^1.3.1",
+    "classnames": "^2.5.1",
     "color": "^4.2.3",
-    "eslint-config-next": "^14",
-    "i18next": "^23.10.1",
-    "modern-normalize": "^2.0.0",
-    "next": "^14.1.3",
-    "next-i18next": "^15.2.0",
-    "react": "^18.2.0",
+    "eslint-config-next": "^14.2.7",
+    "next": "^14.2.7",
+    "next-i18next": "^15.3.1",
+    "next-themes": "^0.3.0",
+    "react": "^18.3.1",
     "react-confetti": "^6.1.0",
-    "react-dom": "^18.2.0",
-    "react-fast-marquee": "^1.6.4",
-    "react-i18next": "^14.1.0",
-    "react-redux": "^9.1.0",
+    "react-dom": "^18.3.1",
+    "react-fast-marquee": "^1.6.5",
     "react-share": "^5.1.0",
     "react-timeago": "^7.2.0",
-    "react-use": "^17.5.0",
-    "redux-thunk": "^3.1.0",
-    "reduxjs-toolkit-persist": "^7.2.1",
-    "sharp": "^0.33.2",
+    "react-use": "^17.5.1",
+    "sharp": "^0.33.5",
     "slugify": "^1.6.6",
-    "styled-components": "6.1.8"
+    "zustand": "^4.5.5"
   },
   "devDependencies": {
-    "@commitlint/cli": "^19.0.3",
-    "@commitlint/config-conventional": "^19.0.3",
-    "@next/eslint-plugin-next": "^14",
-    "@testing-library/jest-dom": "^6.4.2",
-    "@testing-library/react": "^14.2.1",
+    "@chromatic-com/storybook": "^1.8.0",
+    "@commitlint/cli": "^19.4.1",
+    "@commitlint/config-conventional": "^19.4.1",
+    "@next/eslint-plugin-next": "^14.2.7",
+    "@storybook/addon-essentials": "^8.2.9",
+    "@storybook/addon-interactions": "^8.2.9",
+    "@storybook/addon-links": "^8.2.9",
+    "@storybook/addon-onboarding": "^8.2.9",
+    "@storybook/addon-themes": "^8.2.9",
+    "@storybook/blocks": "^8.2.9",
+    "@storybook/nextjs": "^8.2.9",
+    "@storybook/react": "^8.2.9",
+    "@storybook/test": "^8.2.9",
+    "@testing-library/jest-dom": "^6.5.0",
+    "@testing-library/react": "^16.0.1",
     "@types/color": "^3.0.6",
-    "@types/eslint": "^8.56.6",
+    "@types/eslint": "^8.56.10",
     "@types/eslint-config-prettier": "^6.11.3",
     "@types/jest": "^29.5.12",
     "@types/lint-staged": "^13.3.0",
-    "@types/node": "^18",
-    "@types/react": "^18",
-    "@types/react-dom": "^18",
-    "@types/react-timeago": "^4.1.3",
-    "@typescript-eslint/eslint-plugin": "^7.1.1",
-    "@typescript-eslint/parser": "^7.1.1",
+    "@types/node": "^20.14.8",
+    "@types/react": "^18.3.5",
+    "@types/react-dom": "^18.3.0",
+    "@types/react-timeago": "^4.1.7",
+    "@typescript-eslint/eslint-plugin": "^8.3.0",
+    "@typescript-eslint/parser": "^8.3.0",
+    "autoprefixer": "^10.4.20",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-storybook": "^0.8.0",
+    "eslint-plugin-tailwindcss": "^3.17.4",
     "favicons": "^7.2.0",
-    "husky": "^9.0.11",
+    "husky": "^9.1.4",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "lint-staged": "^15.2.2",
-    "prettier": "^3.2.5",
-    "tsx": "^4.7.1",
-    "typescript": "^5.3"
+    "lint-staged": "^15.2.8",
+    "postcss": "^8.4.41",
+    "prettier": "^3.3.3",
+    "storybook": "^8.2.9",
+    "tailwindcss": "^3.4.10",
+    "tsx": "^4.16.5",
+    "typescript": "^5.5.4"
+  },
+  "peerDependencies": {
+    "i18next": "^23.10.1",
+    "react-i18next": "^15.0.1"
   }
 }