Skip to content

Commit

Permalink
Merge pull request geyserfund#1367 from geyserfund/sajal/gys-6400-sta…
Browse files Browse the repository at this point in the history
…rt-working-on-storybook

Sajal/gys-6400-start-working-on-storybook
  • Loading branch information
sajald77 authored Mar 27, 2024
2 parents 4de69a0 + b8ac0dc commit 3b5b008
Show file tree
Hide file tree
Showing 15 changed files with 3,870 additions and 73 deletions.
10 changes: 1 addition & 9 deletions .eslintrc.cjs
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,7 @@ module.exports = {
browser: true,
es2021: true,
},
extends: [
'plugin:react/recommended',
'plugin:@typescript-eslint/recommended',
'xo',
'plugin:jest-dom/recommended',
'plugin:react-hooks/recommended',
'plugin:testing-library/react',
'plugin:prettier/recommended',
],
extends: ['plugin:react/recommended', 'plugin:@typescript-eslint/recommended', 'xo', 'plugin:jest-dom/recommended', 'plugin:react-hooks/recommended', 'plugin:testing-library/react', 'plugin:prettier/recommended', 'plugin:storybook/recommended'],
plugins: [
'react',
'simple-import-sort',
Expand Down
23 changes: 23 additions & 0 deletions .github/workflows/deploy.yaml
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
on:
push:
branches:
- "staging" # change to the branch you wish to deploy from

permissions:
contents: read
pages: write
id-token: write

jobs:
deploy:
environment:
name: github-pages
url: ${{ steps.build-publish.outputs.page_url }}
runs-on: ubuntu-latest
steps:
- id: build-publish
uses: bitovi/[email protected]
with:
path: build # change to your build folder
install_command: yarn install
build_command: yarn storybook:build
7 changes: 5 additions & 2 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,9 @@
# production
/dist

# Storybook
/storybook-static

# misc
.DS_Store
.env.local
Expand All @@ -26,9 +29,9 @@ npm-debug.log*
yarn-debug.log*
yarn-error.log*

.nvmrc

faker/custom-extended-schemas/
src/config/apollo-client/customClientTypeDefs.ts

caddy/certificate/root.crt

*storybook.log
1 change: 1 addition & 0 deletions .nvmrc
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
18.19.1
21 changes: 21 additions & 0 deletions .storybook/main.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import type { StorybookConfig } from '@storybook/react-vite'

const config: StorybookConfig = {
stories: ['../**/*.mdx', '../**/*.stories.@(js|jsx|mjs|ts|tsx)'],
addons: [
'@chakra-ui/storybook-addon',
'@storybook/addon-onboarding',
'@storybook/addon-links',
'@storybook/addon-essentials',
'@chromatic-com/storybook',
'@storybook/addon-interactions',
],
framework: {
name: '@storybook/react-vite',
options: {},
},
docs: {
autodocs: 'tag',
},
}
export default config
21 changes: 21 additions & 0 deletions .storybook/preview.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import type { Preview } from '@storybook/react'
import {theme} from '../src/config/theme/theme'
import { lightModeColors } from '../src/styles'

const preview: Preview = {
parameters: {
layout: 'centered',
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/i,
},
},
chakra: {
theme: {...theme, colors: lightModeColors},
}

},
}

export default preview
2 changes: 1 addition & 1 deletion Dockerfile
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
###########################
# STEP 1: create base image
###########################
ARG NODE_VERSION=16
ARG NODE_VERSION=18
FROM --platform=linux/amd64 node:${NODE_VERSION}-alpine AS base


Expand Down
7 changes: 7 additions & 0 deletions docs/CODING_GUIDELINES.md
Original file line number Diff line number Diff line change
Expand Up @@ -202,3 +202,10 @@ However, there are situations where a larger image size is required, like in a p

To facilitate this, we've provided functions in the utils folder: `toLargeImageUrl`, `toMediumImageUrl`, and `toSmallImageUrl`. These functions can be used to display images of different sizes as necessary. Even if the incoming image size is unknown, these functions act as filters, ensuring the correct image size renders.


## Storybook

We use storybook for showcasing all of the components, starting out with the base UI components like buttons, inputs, to complex ones like activity panel.
This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export

17 changes: 16 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,9 @@
"graph:generate:staging": "yarn graph:generate staging",
"graph:generate:development": "run(){ yarn graph:fetch:development && graphql-codegen --config codegen.ts && rm schema.graphql && yarn graph:format; }; run",
"caddy:trust-ca": "bash ./scripts/trust-caddy-cert.sh",
"changelog": "yarn conventional-changelog -p conventionalcommits -i CHANGELOG.md -s"
"changelog": "yarn conventional-changelog -p conventionalcommits -i CHANGELOG.md -s",
"storybook": "storybook dev -p 6006",
"storybook:build": "storybook build"
},
"dependencies": {
"@apollo/client": "^3.9.2",
Expand Down Expand Up @@ -103,12 +105,23 @@
},
"devDependencies": {
"@chakra-ui/cli": "^2.3.0",
"@chakra-ui/storybook-addon": "^5.1.0",
"@chromatic-com/storybook": "^1.2.25",
"@commitlint/cli": "^17.4.2",
"@commitlint/config-conventional": "^17.4.2",
"@graphql-codegen/cli": "^3.2.1",
"@graphql-codegen/typescript-operations": "^3.0.3",
"@graphql-codegen/typescript-react-apollo": "^3.3.7",
"@graphql-codegen/typescript-resolvers": "^3.1.0",
"@storybook/addon-essentials": "^8.0.4",
"@storybook/addon-interactions": "^8.0.4",
"@storybook/addon-links": "^8.0.4",
"@storybook/addon-onboarding": "^8.0.4",
"@storybook/blocks": "^8.0.4",
"@storybook/react": "^8.0.4",
"@storybook/react-vite": "^8.0.4",
"@storybook/test": "^8.0.4",
"@storybook/types": "^8.0.4",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/react-hooks": "^8.0.1",
Expand Down Expand Up @@ -137,11 +150,13 @@
"eslint-plugin-react": "^7.32.1",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-simple-import-sort": "^9.0.0",
"eslint-plugin-storybook": "^0.8.0",
"eslint-plugin-testing-library": "^5.10.0",
"husky": "^8.0.3",
"jsdom": "^21.1.0",
"prettier": "^2.8.3",
"sitemap": "^7.1.1",
"storybook": "^8.0.4",
"typescript": "^4.9.5",
"vite": "^4.3.9",
"vite-plugin-mkcert": "^1.11.0",
Expand Down
1 change: 0 additions & 1 deletion src/components/inputs/index.ts

This file was deleted.

Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { CloseIcon } from '@chakra-ui/icons'
import { Box, HStack, Input, InputProps, StackProps } from '@chakra-ui/react'
import { IconType } from 'react-icons'

import { IconButtonComponent } from '../ui'
import { IconButtonComponent } from '../../../components/ui'

interface ProjectLinkInputProps extends StackProps {
leftIcon: IconType
Expand Down
2 changes: 1 addition & 1 deletion src/pages/projectCreate/components/ProjectLinks.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,10 @@ import { Button, VStack } from '@chakra-ui/react'
import { useEffect } from 'react'
import { useTranslation } from 'react-i18next'

import { ProjectLinkInput } from '../../../components/inputs'
import { FieldContainer } from '../../../forms/components/FieldContainer'
import { getIconForLink } from '../../../helpers/getIconForLinks'
import { Maybe } from '../../../types'
import { ProjectLinkInput } from './ProjectLinkInput'

interface ProjectLinksProps {
links: string[]
Expand Down
53 changes: 53 additions & 0 deletions stories/components/input/Button.stories.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
import { BellIcon } from '@chakra-ui/icons'
import { Button as ChakraButton } from '@chakra-ui/react'
import type { Meta, StoryObj } from '@storybook/react'

const meta = {
title: 'Components/Input/Button',
component: ChakraButton,
tags: ['autodocs'],
args: {
children: 'Button',
},
argTypes: {
variant: {
options: [
'primary',
'primaryNeutral',
'primaryLink',
'primaryGradient',
'secondary',
'secondaryNeutral',
'transparent',
],
control: { type: 'select' },
},
size: {
options: ['sm', 'md', 'lg'],
control: { type: 'radio' },
},
},
} satisfies Meta<typeof ChakraButton>

export default meta
type Story = StoryObj<typeof meta>

export const SimpleButton: Story = {
args: {
variant: 'primary',
},
}

export const LeftIconButton: Story = {
args: {
variant: 'primary',
leftIcon: <BellIcon />,
},
}

export const RightIconButton: Story = {
args: {
variant: 'primary',
rightIcon: <BellIcon />,
},
}
42 changes: 42 additions & 0 deletions stories/components/input/IconButton.stories.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
import { BellIcon } from '@chakra-ui/icons'
import { IconButton as ChakraButton } from '@chakra-ui/react'
import type { Meta, StoryObj } from '@storybook/react'

const meta = {
title: 'Components/Input/IconButton',
component: ChakraButton,
tags: ['autodocs'],
args: {
icon: <BellIcon />,
},
argTypes: {
size: {
options: ['sm', 'md', 'lg'],
control: { type: 'radio' },
},
},
} satisfies Meta<typeof ChakraButton>

export default meta
type Story = StoryObj<typeof meta>

export const IconButton: Story = {
args: {
variant: 'primary',
'aria-label': 'Notification',
},
argTypes: {
variant: {
options: [
'primary',
'primaryNeutral',
'primaryLink',
'primaryGradient',
'secondary',
'secondaryNeutral',
'transparent',
],
control: { type: 'select' },
},
},
}
Loading

0 comments on commit 3b5b008

Please sign in to comment.