Merge pull request #27 from firstcontributions/storybook

Author: Roshanjossey

.eslintrc.json

@@ -5,6 +5,7 @@
   },
   "extends": [
     "plugin:@typescript-eslint/recommended",
+    "plugin:storybook/recommended",
     "next",
     "next/core-web-vitals",
     "prettier"

.gitignore

@@ -35,3 +35,6 @@ yarn-error.log*
 
 # typescript
 *.tsbuildinfo
+
+#vscode
+.vscode

.storybook/RelayStorybook.tsx

@@ -0,0 +1,37 @@
+import { ReactNode, useEffect, useState } from 'react'
+import { createMockEnvironment, MockPayloadGenerator } from 'relay-test-utils'
+
+import { IEnvironment } from 'relay-runtime'
+import RelayEnvironmentProvider from '../src/lib/RelayEnvironmentProvider'
+import RelayModernEnvironment from 'relay-runtime/lib/store/RelayModernEnvironment'
+
+type RelayStorybookProps = {
+  children: ReactNode
+  mockResolvers?: Record<string, unknown>
+}
+export const RelayStorybook = ({
+  children,
+  mockResolvers = {},
+}: RelayStorybookProps) => {
+  const [environment] = useState(() => createMockEnvironment())
+
+  useEffect(() => {
+    try {
+      environment.mock.resolveMostRecentOperation((operation) =>
+        MockPayloadGenerator.generate(operation, mockResolvers)
+      )
+    } catch (err) {
+      // handle no operation
+      // eslint-disable-next-line
+      console.log({
+        err,
+      })
+    }
+  }, [])
+
+  return (
+    <RelayEnvironmentProvider environment={environment}>
+      {children}
+    </RelayEnvironmentProvider>
+  )
+}

.storybook/connectionFromArray.ts

@@ -0,0 +1,27 @@
+export const connectionFromArray = <T extends object>(arr: T[] = []) => {
+  if (!arr || arr.length === 0) {
+    return {
+      edges: [],
+      totalCount: 0,
+      count: 0,
+      endCursorOffset: 0,
+      startCursorOffset: 0,
+      pageInfo: {
+        hasNextPage: false,
+        hasPreviousPage: false,
+      },
+    }
+  }
+
+  return {
+    edges: arr.map((node) => ({ node })),
+    totalCount: arr.length,
+    count: arr.length,
+    endCursorOffset: arr.length,
+    startCursorOffset: 0,
+    pageInfo: {
+      hasNextPage: false,
+      hasPreviousPage: false,
+    },
+  }
+}

.storybook/main.js

@@ -0,0 +1,27 @@
+module.exports = {
+  stories: ['../**/*.stories.mdx', '../**/*.stories.@(js|jsx|ts|tsx)'],
+  /** Expose public folder to storybook as static */
+  staticDirs: ['../public'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+    'storybook-css-modules-preset',
+    {
+      /**
+       * Fix Storybook issue with PostCSS@8
+       * @see https://github.com/storybookjs/storybook/issues/12668#issuecomment-773958085
+       */
+      name: '@storybook/addon-postcss',
+      options: {
+        postcssLoaderOptions: {
+          implementation: require('postcss'),
+        },
+      },
+    },
+  ],
+  framework: '@storybook/react',
+  core: {
+    builder: '@storybook/builder-webpack5',
+  },
+}

.storybook/preview.js

@@ -0,0 +1,45 @@
+import '../src/styles/globals.css'
+import * as NextImage from 'next/image'
+
+const BREAKPOINTS_INT = {
+  xs: 375,
+  sm: 600,
+  md: 900,
+  lg: 1200,
+  xl: 1536,
+}
+
+const customViewports = Object.fromEntries(
+  Object.entries(BREAKPOINTS_INT).map(([key, val], idx) => {
+    console.log(val)
+    return [
+      key,
+      {
+        name: key,
+        styles: {
+          width: `${val}px`,
+          height: `${(idx + 5) * 10}vh`,
+        },
+      },
+    ]
+  })
+)
+
+// Allow Storybook to handle Next's <Image> component
+const OriginalNextImage = NextImage.default
+
+Object.defineProperty(NextImage, 'default', {
+  configurable: true,
+  value: (props) => <OriginalNextImage {...props} unoptimized />,
+})
+
+export const parameters = {
+  actions: { argTypesRegex: '^on[A-Z].*' },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+  viewport: { viewports: customViewports },
+}

package.json

@@ -10,7 +10,9 @@
     "check-lint": "eslint . --ext ts --ext tsx --ext js",
     "check-types": "tsc --pretty --noEmit",
     "format": "prettier --write .",
-    "prepare": "husky install"
+    "prepare": "husky install",
+    "storybook": "start-storybook -p 3333",
+    "build-storybook": "build-storybook"
   },
   "dependencies": {
     "@editorjs/code": "^2.7.0",
@@ -41,6 +43,16 @@
     "string-strip-html": "^9.1.12"
   },
   "devDependencies": {
+    "@babel/core": "^7.18.6",
+    "@storybook/addon-actions": "^6.5.9",
+    "@storybook/addon-essentials": "^6.5.9",
+    "@storybook/addon-interactions": "^6.5.9",
+    "@storybook/addon-links": "^6.5.9",
+    "@storybook/addon-postcss": "^2.0.0",
+    "@storybook/builder-webpack5": "^6.5.9",
+    "@storybook/manager-webpack5": "^6.5.9",
+    "@storybook/react": "^6.5.9",
+    "@storybook/testing-library": "^0.0.13",
     "@tailwindcss/typography": "^0.5.2",
     "@types/formidable": "^2.0.5",
     "@types/multiparty": "^0.0.33",
@@ -52,12 +64,14 @@
     "@typescript-eslint/eslint-plugin": "^5.28.0",
     "@typescript-eslint/parser": "^5.28.0",
     "autoprefixer": "^10.4.2",
+    "babel-loader": "^8.2.5",
     "babel-plugin-relay": "^13.0.2",
     "eslint": "^8.18.0",
     "eslint-config-next": "12.0.10",
     "eslint-config-prettier": "^8.5.0",
     "eslint-import-resolver-typescript": "^2.7.1",
     "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-storybook": "^0.5.13",
     "graphql": "^16.3.0",
     "husky": "^8.0.0",
     "lint-staged": "^13.0.2",
@@ -66,6 +80,8 @@
     "relay-compiler": "^13.0.2",
     "relay-compiler-language-typescript": "^15.0.1",
     "relay-config": "^12.0.1",
+    "relay-test-utils": "^14.0.0",
+    "storybook-css-modules-preset": "^1.1.1",
     "tailwind-scrollbar": "^2.0.1",
     "tailwindcss": "^3.0.23",
     "typescript": "4.5.5"
@@ -84,5 +100,8 @@
     "*.json": [
       "prettier --write"
     ]
+  },
+  "resolutions": {
+    "webpack": "^5"
   }
 }

src/components/UserDetails/Badges/Badge.tsx

@@ -1,7 +1,7 @@
 import { graphql, useFragment } from 'react-relay'
 import { Badge_node$key } from '../../../queries/__generated__/Badge_node.graphql'
 import BadgeIcon, { LanguageName } from './BadgeIcon'
-import Hexagon from './Hexagon'
+import Hexagon, { hexagonBackground } from './Hexagon'
 
 const Badge = ({ badge }: { badge: Badge_node$key }) => {
   const data = useFragment(
@@ -15,9 +15,16 @@ const Badge = ({ badge }: { badge: Badge_node$key }) => {
     badge
   )
 
+  const getLevelBackground = (level: number) =>
+    hexagonBackground[
+      Object.keys(hexagonBackground)[
+        level - 1
+      ] as keyof typeof hexagonBackground
+    ]
+
   return (
     <div className="flex items-center ">
-      <Hexagon size={36} color="red">
+      <Hexagon size={4} color={getLevelBackground(data.currentLevel)}>
         <BadgeIcon displayName={data.displayName as LanguageName} />
       </Hexagon>
       <div className=" ml-8 dark:text-gray-300">

src/components/UserDetails/Badges/BadgeIcon.tsx

@@ -35,12 +35,14 @@ export default function BadgeIcon({ displayName }: BadgeIconProps) {
   return (
     <div className="text-xl z-10 badge-icon">
       {iconMap[displayName]}
-      <style>
+      <style jsx>
         {`
-                    .badge-icon {
-                        color: #00000077;
-                    }
-                `}
+          .badge-icon {
+            padding: 0.5rem;
+            background: #fff;
+            border-radius: 50%;
+          }
+        `}
       </style>
     </div>
   )

src/components/UserDetails/Badges/BadgeList.tsx

@@ -1,5 +1,4 @@
-import { useFragment, graphql, usePaginationFragment } from 'react-relay'
-import { Badge_node$data } from '../../../queries/__generated__/Badge_node.graphql'
+import { graphql, usePaginationFragment } from 'react-relay'
 import Badge from './Badge'
 
 const BadgeList = ({ user }: any) => {