Feature/components demo

.gitattributes

@@ -0,0 +1,43 @@
+# These settings are for any web project
+
+# Handle line endings automatically for files detected as text
+# and leave all files detected as binary untouched.
+* text=auto
+
+# Force the following filetypes to have unix eols, so Windows does not break them
+*.* text eol=lf
+
+# Windows forced line-endings
+/.idea/* text eol=crlf
+
+#
+## These files are binary and should be left untouched
+#
+
+# (binary is a macro for -text -diff)
+*.7z binary
+*.bz2 binary
+*.cur binary
+*.ez binary
+*.eot binary
+*.flv binary
+*.fla binary
+*.gif binary
+*.jpg binary
+*.jpeg binary
+*.ico binary
+*.gz binary
+*.swf binary
+*.mov binary
+*.mp4 binary
+*.mp3 binary
+*.pdf binary
+*.png binary
+*.pyc binary
+*.swp binary
+*.ttf binary
+*.wav binary
+*.webp binary
+*.woff binary
+*.woff2 binary
+*.zip binary

.gitignore

@@ -10,3 +10,5 @@ node_modules
 .vercel
 
 yarn-error.log
+
+.vscode/.as-fs

.vscode/settings.json

@@ -13,5 +13,5 @@
     "*.css": "postcss"
   },
   "prettier.enable": false,
-  "typescript.tsdk": "node_modules/typescript/lib"
+  "typescript.tsdk": "node_modules/typescript/lib",
 }

components/avatar.tsx

@@ -1,13 +1,18 @@
 import { Root, Image, Fallback } from '@radix-ui/react-avatar'
+import type {
+  AvatarProps,
+  AvatarImageProps,
+  AvatarFallbackProps,
+} from '@radix-ui/react-avatar'
 
-export const Avatar = (props: any) => (
+export const Avatar = (props: AvatarProps) => (
   <Root {...props} className={`${props.className}`} />
 )
 
-export const AvatarImage = (props: any) => (
+export const AvatarImage = (props: AvatarImageProps) => (
   <Image {...props} className={`${props.className}`} />
 )
 
-export const AvatarFallback = (props: any) => (
+export const AvatarFallback = (props: AvatarFallbackProps) => (
   <Fallback {...props} className={`${props.className}`} />
 )

components/checkbox.tsx

@@ -1,9 +1,23 @@
 import { Root, Indicator } from '@radix-ui/react-checkbox'
+import type {
+  CheckboxProps,
+  CheckboxIndicatorProps,
+} from '@radix-ui/react-checkbox'
 
-export const Checkbox = (props: any) => (
-  <Root {...props} className={`${props.className}`}></Root>
+import MdiCheck from '~icons/mdi/check.jsx'
+
+export const Checkbox = ({ className = '', ...props }: CheckboxProps) => (
+  <Root
+    {...props}
+    className={`relative w-24px h-24px border-1 border-cool-gray-300 rounded-sm flex items-center justify-center focus-ring ${className}`}
+  >
+    <MdiCheck className={props.checked ? '' : 'hidden'} />
+  </Root>
 )
 
-export const CheckIndicator = (props: any) => (
-  <Indicator {...props} className={`${props.className}`}></Indicator>
+export const CheckIndicator = ({
+  className = '',
+  ...props
+}: CheckboxIndicatorProps) => (
+  <Indicator {...props} className={`${className}`}></Indicator>
 )

components/index.ts

@@ -4,5 +4,5 @@ export { default as Status } from './status'
 export { default as VideoPlayerStream } from './video-player-stream'
 export { Checkbox, CheckIndicator } from './checkbox'
 export { Avatar, AvatarImage, AvatarFallback } from './avatar'
-export { RadioButtons, RadioButton, RadioIndicator } from './radioButtons'
+export { RadioButtons, RadioButton, RadioIndicator } from './radio-buttons'
 export * from './tabs'

components/radio-buttons.tsx

@@ -0,0 +1,33 @@
+import { Root, Item, Indicator } from '@radix-ui/react-radio-group'
+import type {
+  RadioGroupProps,
+  RadioGroupItemProps,
+  RadioIndicatorProps,
+} from '@radix-ui/react-radio-group'
+import classnames from 'classnames'
+import type { FC } from 'react'
+
+export const RadioButtons: FC<RadioGroupProps> = ({ className, ...props }) => (
+  <Root
+    {...props}
+    className={classnames(
+      'inline-block border border-gray-200 shadow-md rounded-lg bg-white overflow-hidden divide-x divide-gray-200 color-cool-gray-500',
+      className
+    )}
+  />
+)
+
+export const RadioButton: FC<RadioGroupItemProps> = ({
+  className,
+  ...props
+}) => (
+  <Item
+    {...props}
+    className={classnames(
+      'px-8 py-4 aria-checked:(bg-red-700 text-white font-bold)',
+      className
+    )}
+  />
+)
+
+export const RadioIndicator: FC<RadioIndicatorProps> = Indicator

components/tabs.tsx

@@ -1,18 +1,24 @@
 import { Root, List, Trigger, Content } from '@radix-ui/react-tabs'
+import type {
+  TabsProps,
+  TabsListProps,
+  TabsTriggerProps,
+  TabsContentProps,
+} from '@radix-ui/react-tabs'
 
-import styles from './tabs.module.css'
+export const Tabs = (props: TabsProps) => <Root {...props} />
 
-export const Tabs = (props: any) => <Root {...props} />
-
-export const TabsHeaders = ({ className = '', ...props }: any) => (
+export const TabsHeaders = ({ className = '', ...props }: TabsListProps) => (
   <List {...props} className={`flex ${className}`} />
 )
 
-export const TabHeader = ({ className = '', ...props }: any) => (
+export const TabHeader = ({ className = '', ...props }: TabsTriggerProps) => (
   <Trigger
     {...props}
-    className={`${styles.tabHeader} cursor-pointer outline-none ${className}`}
+    className={`cursor-pointer outline-none underline focus-ring aria-selected:(font-bold pointer-events-none no-underline) ${className}`}
   />
 )
 
-export const TabContent = (props: any) => <Content {...props} />
+export const TabContent = ({ className = '', ...props }: TabsContentProps) => (
+  <Content {...props} className={`focus-ring ${className}`} />
+)

global.d.ts

@@ -1,3 +1,5 @@
+/// <reference types="unplugin-icons/types/react" />
+
 declare module '*.md' {
   const content: string
   export default content

hooks/use-swr.tsx

@@ -2,7 +2,7 @@ import _useSWR from 'swr'
 
 import { fetcher } from './_utils'
 
-const useSWR = <Data extends any = any, Error = any>(url: string) => {
+const useSWR = <Data, Error = any>(url: string) => {
   const { data, error } = _useSWR<Data, Error>(url, fetcher)
 
   const headLink = (

layouts/landing-page.tsx

@@ -65,7 +65,7 @@ const LandingPageLayout: FC<LandingPageLayoutProps> = ({
           <figure
             className='h-18 w-18 cursor-pointer lg:col-span-2 xl:col-span-1'
             style={{
-              background: `url('/globe-glyph-k.svg') no-repeat center center`,
+              background: `url('/images/globe-glyph-k.svg') no-repeat center center`,
               backgroundSize: 'contain',
             }}
           />

next-env.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="next" />
-/// <reference types="next/types/global" />
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited

next.config.js

@@ -1,23 +1,31 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
-const WindiCSSWebpackPlugin = require('windicss-webpack-plugin').default
+const path = require('path')
+
+const unpluginIcons = require('unplugin-icons/webpack')
+const WindiCSSWebpackPlugin = require('windicss-webpack-plugin')
 
 module.exports = {
-  webpack(config /*, _options */) {
-    config.plugins.push(
-      new WindiCSSWebpackPlugin({
-        scan: {
-          dirs: ['./'],
-          exclude: ['node_modules', '.git', '.next/**/*'],
-        },
-      })
-    )
+  eslint: {
+    ignoreDuringBuilds: true,
+  },
+  include: path.resolve(__dirname, 'public'),
+  webpack(config /* , _options */) {
+    config.plugins.push(new WindiCSSWebpackPlugin())
 
     config.module.rules.push({
       test: /\.md$/,
       use: 'raw-loader',
     })
 
+    config.plugins.push(
+      unpluginIcons({
+        autoInstall: true,
+        compiler: 'jsx',
+        extension: 'jsx',
+        jsx: 'react',
+      })
+    )
+
     return config
   },
-  webpack5: false,
 }

package.json

@@ -14,24 +14,24 @@
     "start": "next start"
   },
   "dependencies": {
-    "@notionhq/client": "^0.4.6",
-    "@peertube/embed-api": "^0.0.4",
-    "@radix-ui/react-avatar": "^0.0.15",
-    "@radix-ui/react-checkbox": "^0.0.15",
-    "@radix-ui/react-radio-group": "^0.0.15",
-    "@radix-ui/react-tabs": "^0.0.15",
+    "@notionhq/client": "^0.4.9",
+    "@peertube/embed-api": "^0.0.5",
+    "@radix-ui/react-avatar": "^0.1.1",
+    "@radix-ui/react-checkbox": "^0.1.1",
+    "@radix-ui/react-radio-group": "^0.1.1",
+    "@radix-ui/react-tabs": "^0.1.1",
     "@react-hook/window-size": "^3.0.7",
     "@replygirl/change-case-object": "^1.3.0",
     "@replygirl/tc": "^3.0.0",
-    "autoprefixer": "^10.2.6",
+    "autoprefixer": "^10.4.0",
     "classnames": "^2.3.1",
-    "date-fns": "^2.22.1",
-    "date-fns-tz": "^1.1.4",
+    "date-fns": "^2.27.0",
+    "date-fns-tz": "^1.1.6",
     "destyle.css": "^2.0.2",
-    "detect-browser": "^5.2.0",
-    "faunadb": "^4.3.0",
+    "detect-browser": "^5.2.1",
+    "faunadb": "^4.4.1",
     "isomorphic-unfetch": "^3.1.0",
-    "next": "^11.1.1",
+    "next": "^12.0.7",
     "notion-utils": "^4.10.0",
     "react": "^17.0.2",
     "react-cool-dimensions": "^2.0.7",
@@ -42,41 +42,41 @@
     "swr": "^0.5.6"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^0.6.6",
-    "@babel/core": "^7.14.6",
-    "@babel/preset-typescript": "^7.14.5",
-    "@types/jschannel": "^1.0.1",
-    "@types/node": "^15.12.4",
-    "@types/react": "^17.0.11",
-    "@vercel/node": "^1.11.1",
+    "@antfu/eslint-config": "^0.12.2",
+    "@iconify-json/mdi": "^1.0.12",
+    "@next/eslint-plugin-next": "^12.0.7",
+    "@svgr/core": "^5.5.0",
+    "@tsconfig/next": "^1.0.1",
+    "@types/jschannel": "^1.0.2",
+    "@types/node": "^16.11.12",
+    "@types/react": "^17.0.37",
+    "@vercel/node": "^1.12.1",
     "@windicss/animations": "^1.0.8",
     "@windicss/plugin-heropatterns": "^0.0.8",
     "@windicss/plugin-interaction-variants": "^1.0.0",
     "@windicss/plugin-question-mark": "^0.1.1",
     "@windicss/plugin-scrollbar": "^1.2.3",
-    "babel-loader": "^8.2.2",
-    "babel-plugin-react-require": "^3.1.3",
-    "eslint": "^7.29.0",
-    "eslint-config-next": "^11.0.1",
+    "eslint": "^8.4.1",
     "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-prettier": "^3.4.0",
-    "eslint-plugin-sort-keys-fix": "^1.1.1",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-sort-keys-fix": "^1.1.2",
     "postcss-flexbugs-fixes": "^5.0.2",
-    "postcss-preset-env": "^6.7.0",
-    "prettier": "^2.3.1",
+    "postcss-preset-env": "^7.0.1",
+    "prettier": "^2.5.1",
     "raw-loader": "^4.0.2",
-    "typescript": "^4.3.4",
-    "windicss-webpack-plugin": "^1.1.0"
+    "typescript": "^4.5.2",
+    "unplugin-icons": "^0.12.23",
+    "windicss-webpack-plugin": "^1.5.9"
   },
   "eslintConfig": {
     "extends": [
-      "next",
       "@antfu/eslint-config",
       "plugin:prettier/recommended"
     ],
     "plugins": [
       "prettier",
-      "sort-keys-fix"
+      "sort-keys-fix",
+      "@next/next"
     ],
     "rules": {
       "import/order": [