Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: initialize storybook using nx command #97

Merged
merged 11 commits into from
Nov 19, 2024
Merged

chore: initialize storybook using nx command #97

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
f164b1c
ci(release): fix failing due to missing token
MFarabi619 Nov 11, 2024
714bade
build(eslint-config-inspector): change output from 'dist/lint-inspect…
MFarabi619 Nov 12, 2024
6711277
feat(libs/shared/ui): create project
MFarabi619 Nov 12, 2024
00b248d
feat(ui/website): initialize tailwind
MFarabi619 Nov 12, 2024
1b3ac4b
chore(libs/shared/config): create copies of common setups
MFarabi619 Nov 12, 2024
ac01dc7
feat(ui/website): use shared libs configs
MFarabi619 Nov 12, 2024
ec49054
chore(config): add git clean script
MFarabi619 Nov 12, 2024
4a89083
feat(ui/website): render shadcn component from lib
MFarabi619 Nov 12, 2024
12c454c
feat(libs/shared/ui): create storybook
MFarabi619 Nov 12, 2024
4c4d94c
ci: deploy storybook to chromatic
MFarabi619 Nov 12, 2024
a9180ad
refactor: reorganize libs with feature sliced design and bulletproof …
MFarabi619 Nov 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion .eslintcache
View file
Open in desktop

This file was deleted.

6 changes: 5 additions & 1 deletion .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ node_modules
!.vscode/extensions.json

# misc
.eslintcache
/.sass-cache
/connect.lock
/libpeerconnection.log
Expand Down Expand Up @@ -76,4 +77,7 @@ yarn-error.log*
# others
.env*.local
.vercel
next-env.d.ts
next-env.d.ts

**/*/storybook-static
build-storybook.log
40 changes: 40 additions & 0 deletions .storybook/custom-viewports.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport'

export const customViewports = {
...INITIAL_VIEWPORTS,
'720p': {
name: '720p',
styles: {
width: '1280px',
height: '720px',
},
},
'1080p': {
name: '1080p',
styles: {
width: '1920px',
height: '1080px',
},
},
'2k': {
name: '2K',
styles: {
width: '2560px',
height: '1440px',
},
},
'4k': {
name: '4K',
styles: {
width: '3840px',
height: '2160px',
},
},
'21/9': {
name: '21/9',
styles: {
width: '2560px',
height: '1080px',
},
},
}
103 changes: 103 additions & 0 deletions .storybook/main.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,103 @@
import type { StorybookConfig } from '@storybook/nextjs'

// import { TsconfigPathsPlugin } from 'tsconfig-paths-webpack-plugin'
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codebase verification

Path aliases are configured - enable TsconfigPathsPlugin for Storybook

The codebase has path aliases configured in the base tsconfig.json:

  • @shadcn -> libs/external/shadcn
  • @cuhacking -> libs/shared

You should uncomment and use the TsconfigPathsPlugin to enable these path aliases in Storybook stories.

🔗 Analysis chain

Consider implementing path aliasing for better imports

The commented out TsconfigPathsPlugin import suggests incomplete path aliasing setup. This could make imports in stories more verbose.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Check if tsconfig contains path aliases that would benefit from the plugin
fd -t f "tsconfig.*json" . -x cat {} \; | jq -r 'select(.compilerOptions.paths != null) | .compilerOptions.paths'

Length of output: 7455


export default {
stories: [
'../libs/external/shadcn/**/*.@(mdx|stories.@(js|jsx|ts|tsx))',
'../libs/shared/ui/**/*.@(mdx|stories.@(js|jsx|ts|tsx))',
],
framework: {
name: '@storybook/nextjs',
options: {},
},
docs: {},
// Did not use @storybook/addon-essentials due to lack of toolbar ordering API
addons: [
// --------------- Toolbar Icons ---------------
// Ruler
'@storybook/addon-measure',
// Phone
'@storybook/addon-viewport',
// Dotted Outline
'@storybook/addon-outline',
// Sun/Moon icon. Toggle Manager, Preview Components, and Preview Background
'storybook-dark-mode',
// Pen. Toggle both Preview Components and Preview Background
'@storybook/addon-themes',
// Portrait. Toggle only Preview Background. Not affected by other two, use to 'lock' the background.
'@storybook/addon-backgrounds',

// --------------- Action Bar ---------------
// https://storybook.js.org/docs/essentials/controls
'@storybook/addon-controls',
// Person inside circle icon. Also 'Accessibility' tab to action bar
'@storybook/addon-a11y',
// Accessibility tab added by '@storybook/addon-a11y'
{
name: '@storybook/addon-designs', // Actually has amazing docs for once: https://storybookjs.github.io/addon-designs/?path=/docs/docs-quick-start--docs
options: {
// renderTarget: 'canvas' | 'tab'
},
},
// https://storybook.js.org/docs/essentials/actions
'@storybook/addon-actions',
// https://storybook.js.org/docs/essentials/interactions
'@storybook/addon-interactions', // Must be listed after @storybook/addon-actions or @storybook/addon-essentials

// '@chromatic-com/storybook',
// Code for component story
// {
// name: '@storybook/addon-storysource',
// options: {
// rule: {
// test: [/\.stories\.tsx?$/],
// include: [path.resolve(__dirname, '../src')], // You can specify directories
// },
// loaderOptions: {
// parser: 'typescript',
// injectStoryParameters: false,
// prettierConfig: { printWidth: 80, singleQuote: false },
// },
// enforce: 'pre',
// },
// },
'@storybook/addon-links',

// --------------- No-icons ---------------
// Onboarding flow
// '@storybook/addon-onboarding',
// Custom toolbars
// '@storybook/addon-toolbars',
// Auto-generate MDX/React/JSX documentation for components
// https://github.com/storybookjs/storybook/tree/next/code/addons/docs
{
name: '@storybook/addon-docs',
options: {
// csfPluginOptions: null,
// mdxPluginOptions: {
// mdxCompileOptions: {
// remarkPlugins: [],
// },
// },
sourceLoaderOptions: {
injectStoryParameters: false,
},
},
},
// HTML Tab in action bar
// https://github.com/whitespace-se/storybook-addon-html
'@whitespace/storybook-addon-html',
],
// webpackFinal: async (config) => {
// if (config.resolve) {
// config.resolve.plugins = [
// ...(config.resolve.plugins || []),
// new TsconfigPathsPlugin({
// configFile: './tsconfig.storybook.json',
// }),
// ]
// }
// return config
// },
} satisfies StorybookConfig
Loading
Loading