RI-7640: Storybook and Playground

.eslintrc.js

@@ -6,7 +6,7 @@ module.exports = {
     node: true,
     browser: true,
   },
-  extends: ['airbnb-typescript', 'prettier', 'plugin:prettier/recommended'],
+  extends: ['airbnb-typescript', 'prettier', 'plugin:prettier/recommended', 'plugin:storybook/recommended'],
   plugins: ['@typescript-eslint', 'import', 'prettier'],
   parser: '@typescript-eslint/parser',
   rules: {

.gitignore

@@ -87,3 +87,6 @@ static/
 
 .env*
 .npmrc
+
+*storybook.log
+storybook-static

.storybook/RootStoryLayout.tsx

@@ -0,0 +1,28 @@
+import React, { FC, PropsWithChildren } from 'react'
+import { StoryContext } from '@storybook/react-vite'
+
+export interface Parameters {
+  storyLayout?: FC<PropsWithChildren<{ storyContext: StoryContext }>>
+}
+
+/**
+ * Note: for use in Storybook preview config
+ *
+ * Define parameters.storyLayout as React component, and it will be used as root layout of the story
+ */
+export const RootStoryLayout = ({
+  children,
+  storyContext,
+}: Required<PropsWithChildren<{ storyContext: StoryContext }>>) => {
+  const { storyLayout } = storyContext.parameters
+  if (!storyLayout) {
+    return <>{children}</>
+  }
+  if (React.isValidElement(storyLayout)) {
+    // @ts-ignore
+    return React.cloneElement(storyLayout, { storyContext }, children)
+  }
+
+  const StoryLayout = storyLayout
+  return <StoryLayout storyContext={storyContext}>{children}</StoryLayout>
+}

.storybook/Story.context.ts

@@ -0,0 +1,16 @@
+import { createContext, useContext } from 'react'
+import { StoryContext } from '@storybook/react-vite'
+
+const Context = createContext<StoryContext | null>(null)
+
+export const StoryContextProvider = Context.Provider
+
+export const useStoryContext = () => {
+  const context = useContext(Context)
+  if (!context)
+    throw new Error('useStoryContext must be used within StoryContextProvider')
+  return context
+}
+
+export const useStoryParameter = <T>(parameterKey: string): T | undefined =>
+  useStoryContext().parameters[parameterKey]

.storybook/helpers/styles.ts

@@ -0,0 +1,13 @@
+import styled from 'styled-components'
+import { Theme } from 'uiSrc/components/base/theme/types'
+
+export const StyledContainer = styled.div`
+  padding: 50px;
+  height: max-content;
+  overflow: hidden;
+  overflow-y: auto;
+  background-color: ${({ theme }: { theme: Theme }) =>
+    theme.semantic.color.background.neutral100};
+  border: 2px solid
+    ${({ theme }: { theme: Theme }) => theme.semantic.color.border.neutral500};
+`

.storybook/main.ts

@@ -0,0 +1,27 @@
+import type { StorybookConfig } from '@storybook/react-vite'
+import { mergeConfig } from 'vite'
+import vc from './vite.config'
+
+const config: StorybookConfig = {
+  async viteFinal(inlineConfig) {
+    // return the customized config
+    return mergeConfig(inlineConfig, vc)
+  },
+  stories: [
+    '../stories/**/*.mdx',
+    '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)',
+    '../redisinsight/ui/src/**/*.stories.@(js|jsx|mjs|ts|tsx)',
+    '../redisinsight/ui/src/**/*.mdx',
+  ],
+  addons: [
+    '@storybook/addon-a11y',
+    '@storybook/addon-docs',
+    '@storybook/addon-links',
+    '@storybook/addon-themes',
+  ],
+  framework: {
+    name: '@storybook/react-vite',
+    options: {},
+  },
+}
+export default config

.storybook/preview-head.html

@@ -0,0 +1,46 @@
+<script>
+    window.global = window;
+</script>
+<style>
+    :root {
+        /*
+           Insert global variables here:
+           colors, sizes, fonts, etc.
+        */
+    }
+
+    body {
+      min-height: 100vh;
+    }
+
+    .sbdocs-wrapper div:has(>div>.toc-wrapper){
+      width:14rem;
+    }
+
+    .sbdocs-wrapper div:has(>.toc-wrapper){
+      width:fit-content;
+      margin-right:1rem;
+    }
+
+    .sbdocs-wrapper .toc-wrapper .toc-list-item {
+      padding-block: 5px;
+    }
+
+    .sb-errordisplay pre code {
+      background-color: transparent;
+    }
+
+    .docblock-argstable [type='checkbox'][role='switch'] {
+      display: none;
+    }
+
+    pre:has(.docblock-source), pre.prismjs{
+      max-height: none; /*fix code block scroll*/
+    }
+
+    .docblock-source [data-radix-scroll-area-viewport],
+    .docs-story + div [data-radix-scroll-area-viewport]{
+      max-height: 80vh; /*add max height of code block*/
+    }
+
+</style>

.storybook/preview.tsx

@@ -0,0 +1,88 @@
+import React from 'react'
+import type { Parameters, Preview } from '@storybook/react-vite'
+import { withThemeFromJSXProvider } from '@storybook/addon-themes'
+import {
+  createGlobalStyle,
+  ThemeProvider as StyledThemeProvider,
+} from 'styled-components'
+import { CommonStyles, themeDark, themeLight, themeOld } from '@redis-ui/styles'
+import 'modern-normalize/modern-normalize.css'
+import '@redis-ui/styles/normalized-styles.css'
+import '@redis-ui/styles/fonts.css'
+import { RootStoryLayout } from './RootStoryLayout'
+import { StoryContextProvider } from './Story.context'
+import { useStoryContext } from 'storybook/internal/preview-api'
+import { TooltipProvider } from '@redis-ui/components'
+import { type Theme } from 'uiSrc/components/base/theme/types'
+// import { store } from 'uiSrc/utils/test-utils'
+import { Provider } from 'react-redux'
+import { store } from 'uiSrc/slices/store'
+import Router from 'uiSrc/Router'
+
+const parameters: Parameters = {
+  parameters: {
+    layout: 'centered',
+  },
+  actions: { argTypesRegex: '^on[A-Z].*' },
+  controls: {
+    disableSaveFromUI: true,
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+    expanded: true,
+    sort: 'requiredFirst',
+    exclude: ['theme'],
+  },
+  docs: {
+    toc: true,
+    controls: {
+      sort: 'requiredFirst',
+    },
+  },
+  options: {
+    storySort: {
+      method: 'alphabetical',
+      order: ['Getting Started', 'Playground', '*'],
+    },
+  },
+}
+
+const GlobalStoryStyles = createGlobalStyle`
+  .sb-show-main, .docs-story {
+    background: ${({ theme }: { theme: Theme }) => theme.globals.body.bgColor};
+    color: ${({ theme }: { theme: Theme }) => theme.globals.body.textColor};
+  }
+`
+
+const preview: Preview = {
+  parameters,
+  decorators: [
+    (Story) => (
+      <StoryContextProvider value={useStoryContext()}>
+        <Router>
+          <Provider store={store}>
+            <TooltipProvider>
+              <RootStoryLayout storyContext={useStoryContext()}>
+                <CommonStyles />
+                <Story />
+              </RootStoryLayout>
+            </TooltipProvider>
+          </Provider>
+        </Router>
+      </StoryContextProvider>
+    ),
+    withThemeFromJSXProvider({
+      themes: {
+        light: themeLight,
+        dark: themeDark,
+        obsolete: themeOld,
+      },
+      defaultTheme: 'light',
+      Provider: StyledThemeProvider,
+      GlobalStyles: GlobalStoryStyles,
+    }),
+  ],
+}
+
+export default preview

.storybook/redis-theme.ts

@@ -0,0 +1,20 @@
+import { create } from '@storybook/theming/create';
+
+export default create({
+  base: 'light',
+
+  brandTitle: 'Redis UI',
+  brandUrl: 'https://github.com/redislabsdev/redis-ui',
+  brandImage: 'logo.svg',
+  brandTarget: '_blank',
+
+  colorPrimary: '#001D2D',
+  colorSecondary: '#FF4438',
+
+  // UI
+  appBg: '#001D2D',
+
+  // Toolbar default and active colors
+  barBg: '#F0F0F0',
+  textMutedColor: '#5C707A'
+});

.storybook/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "jsx": "react",
+    "types": ["node", "vite/client"],
+    "module": "ESNext"
+  },
+  "include": [
+    "./**/*"
+  ]
+}