diff --git a/.storybook/main.js b/.storybook/main.js deleted file mode 100644 index aab81ab..0000000 --- a/.storybook/main.js +++ /dev/null @@ -1,116 +0,0 @@ - -const path = require('path'); - -module.exports = { - stories: [ - '../docs/**/*.stories.@(js|jsx|ts|tsx|mdx)', - '../src/components/**/*.stories.@(js|jsx|ts|tsx)', - '../src/containers/**/*.stories.@(js|jsx|ts|tsx)', - ], - staticDirs: ['../public'], - addons: [ - '@storybook/addon-links', - '@storybook/addon-essentials', - { - /** - * 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'), - }, - }, - }, - 'storybook-addon-swc', - ], - core: { - builder: 'webpack5', - disableTelemetry: true, - }, - /* nextjs -> no need to import React and can use alias modules */ - webpackFinal: async (config) => { - // ************************* - // RESOLVE node_modules - // If you want to add a directory to search in that takes precedence over node_modules/: - // https://webpack.js.org/configuration/resolve/#resolvemodules - config.resolve.modules = [path.resolve(__dirname, '../src'), 'node_modules']; - - /** - * Add support for alias-imports - * @see https://github.com/storybookjs/storybook/issues/11989#issuecomment-715524391 - */ - config.resolve.alias = { - ...config.resolve?.alias, - '@': [path.resolve(__dirname, '../src/'), path.resolve(__dirname, '../')], - }; - - /** - * Fixes font import with / - * @see https://github.com/storybookjs/storybook/issues/12844#issuecomment-867544160 - */ - config.resolve.roots = [ - path.resolve(__dirname, '../public'), - 'node_modules', - ]; - - config.resolve = { - ...config.resolve, - fallback: { - ...config.resolve.fallback, - 'assert': path.join(process.cwd(), 'assert') - } - } - - // ************************* - // SVGS - // Remove how storybook is handling the svgs. They are using file-loader - // https://github.com/JetBrains/svg-sprite-loader/issues/267 - config.module.rules = config.module.rules.map((rule) => { - if (rule.test && rule.test.toString().includes('svg')) { - const test = rule.test.toString().replace('svg|', '').replace(/\//g, ''); - return { ...rule, test: new RegExp(test) }; - } else { - return rule; - } - }); - - config.module.rules.push({ - test: /\.mjs$/, - include: /node_modules/, - type: 'javascript/auto', - }); - - // Add custom loaders for svgs - config.module.rules.push({ - test: /\.svg$/, - use: [ - { - loader: 'svg-sprite-loader', - options: { - extract: false, - }, - }, - { - loader: 'svgo-loader', - options: { - plugins: [ - { - name: 'preset-default', - params: { - overrides: { - convertColors: { shorthex: false }, - convertPathData: false, - }, - }, - }, - ], - }, - }, - ], - }); - - return config; - }, -}; diff --git a/.storybook/manager.js b/.storybook/manager.js deleted file mode 100644 index fb5ace7..0000000 --- a/.storybook/manager.js +++ /dev/null @@ -1,6 +0,0 @@ -import { addons } from '@storybook/addons'; -import { themes } from '@storybook/theming'; - -addons.setConfig({ - theme: themes.dark, -}); diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html deleted file mode 100644 index 6d2f97d..0000000 --- a/.storybook/preview-head.html +++ /dev/null @@ -1,8 +0,0 @@ - - - - diff --git a/.storybook/preview.js b/.storybook/preview.js deleted file mode 100644 index 5c9d787..0000000 --- a/.storybook/preview.js +++ /dev/null @@ -1,34 +0,0 @@ -import React from 'react'; - -import { themes } from '@storybook/theming'; - -import { MediaContextProvider } from 'components/media-query'; - -import '../src/styles/globals.css'; - -export const parameters = { - actions: { argTypesRegex: '^on[A-Z].*' }, - options: { - storySort: { - order: [ - 'Intro', - 'Docs', - ['Install', 'Deploy', 'Authentication', 'Fetching', 'Media', 'Tests'], - 'Components', - ], - }, - }, - docs: { - theme: themes.dark, - }, -}; - -export const decorators = [ - (Story) => { - return ( - - {Story()} - - ); - }, -]; diff --git a/docs/authentication.stories.mdx b/docs/authentication.stories.mdx deleted file mode 100644 index f049584..0000000 --- a/docs/authentication.stories.mdx +++ /dev/null @@ -1,9 +0,0 @@ -import { Meta } from '@storybook/addon-docs/blocks'; - - - -# Authentication - -- next-auth -- react query hydratation -- useMe hook diff --git a/docs/deploy.stories.mdx b/docs/deploy.stories.mdx deleted file mode 100644 index a92cd75..0000000 --- a/docs/deploy.stories.mdx +++ /dev/null @@ -1,8 +0,0 @@ -import { Meta } from '@storybook/addon-docs/blocks'; - - - -# Deploy - -- VERCEL for developing -- DOCKER for staging and production diff --git a/docs/fetching.stories.mdx b/docs/fetching.stories.mdx deleted file mode 100644 index 500a0cd..0000000 --- a/docs/fetching.stories.mdx +++ /dev/null @@ -1,8 +0,0 @@ -import { Meta } from '@storybook/addon-docs/blocks'; - - - -# Fetching - -- React query -- Hooks diff --git a/docs/intro.stories.mdx b/docs/intro.stories.mdx deleted file mode 100644 index 5c2831f..0000000 --- a/docs/intro.stories.mdx +++ /dev/null @@ -1,19 +0,0 @@ -import { Meta } from '@storybook/addon-docs/blocks'; - - - -# Intro - -Welcome to `YOUR PROJECT` - -- [Install](?path=/docs/docs-install--page) - -- [Deploy](?path=/docs/docs-deploy--page) - -- [Authentication](?path=/docs/docs-authentication--page) - -- [Fetching](?path=/docs/docs-fetching--page) - -- [Media](?path=/docs/docs-media--page) - -- [Tests](?path=/docs/docs-tests--page) diff --git a/docs/media.stories.mdx b/docs/media.stories.mdx deleted file mode 100644 index 2996e14..0000000 --- a/docs/media.stories.mdx +++ /dev/null @@ -1,9 +0,0 @@ -import { Meta } from '@storybook/addon-docs/blocks'; - - - -# Media - -- next-optimized-images - - Icons and sprites - - Images? diff --git a/docs/tests.stories.mdx b/docs/tests.stories.mdx deleted file mode 100644 index 3d79bff..0000000 --- a/docs/tests.stories.mdx +++ /dev/null @@ -1,7 +0,0 @@ -import { Meta } from '@storybook/addon-docs/blocks'; - - - -# Tests - -- Cypress diff --git a/next.config.js b/next.config.js index e151e2d..eae79b3 100644 --- a/next.config.js +++ b/next.config.js @@ -1,14 +1,25 @@ -// @ts-check +const withMDX = require('@next/mdx')({ + extension: /\.mdx?$/, + options: { + // If you use remark-gfm, you'll need to use next.config.mjs + // as the package is ESM only + // https://github.com/remarkjs/remark-gfm#install + remarkPlugins: [], + rehypePlugins: [], + // If you use `MDXProvider`, uncomment the following line. + // providerImportSource: "@mdx-js/react", + }, +}); /** * @type {import('next').NextConfig} */ - const nextConfig = { + // Configure pageExtensions to include md and mdx + pageExtensions: ['ts', 'tsx', 'js', 'jsx', 'md', 'mdx'], // ? https://nextjs.org/docs/advanced-features/output-file-tracing#automatically-copying-traced-files output: 'standalone', poweredByHeader: false, - // ? types `config` parameter /** @param {import('webpack').Configuration} config */ webpack(config) { config?.module?.rules?.push({ @@ -40,4 +51,4 @@ const nextConfig = { }, }; -module.exports = nextConfig; +module.exports = withMDX(nextConfig); diff --git a/package.json b/package.json index 001e49d..64cc4c5 100644 --- a/package.json +++ b/package.json @@ -9,8 +9,6 @@ "start": "next start", "check-types": "tsc", "test": "start-server-and-test 'yarn dev' 3000 'yarn cypress:run'", - "storybook:dev": "start-storybook -p 6006 -c .storybook", - "storybook:build": "build-storybook -c .storybook", "cypress:open": "cypress open", "cypress:run": "cypress run", "postinstall": "husky install" @@ -21,9 +19,12 @@ "packageManager": "yarn@3.5.0", "dependencies": { "@artsy/fresnel": "6.1.0", - "@storybook/react": "6.5.15", + "@mdx-js/loader": "2.3.0", + "@mdx-js/react": "2.3.0", + "@next/mdx": "13.2.4", "@tailwindcss/forms": "0.5.3", "@tailwindcss/line-clamp": "0.4.2", + "@tailwindcss/typography": "0.5.9", "@tanstack/react-query": "4.26.1", "axios": "1.3.4", "clsx": "1.2.1", @@ -35,17 +36,13 @@ "tailwindcss": "3.2.7" }, "devDependencies": { - "@storybook/addon-actions": "6.5.10", - "@storybook/addon-essentials": "6.5.10", - "@storybook/addon-links": "6.5.10", - "@storybook/addon-postcss": "2.0.0", - "@storybook/builder-webpack5": "6.5.10", - "@storybook/manager-webpack5": "6.5.10", "@types/google.analytics": "0.0.42", + "@types/node": "18.15.0", "@types/react": "18.0.28", "@types/react-dom": "18.0.11", "@typescript-eslint/eslint-plugin": "5.48.2", "assert": "2.0.0", + "autoprefixer": "10.4.14", "eslint": "8.32.0", "eslint-config-next": "13.2.3", "eslint-config-prettier": "8.6.0", @@ -54,7 +51,6 @@ "prettier": "2.8.3", "prettier-plugin-tailwindcss": "0.2.1", "start-server-and-test": "1.12.1", - "storybook-addon-swc": "1.1.8", "svg-sprite-loader": "6.0.11", "svgo": "3.0.2", "svgo-loader": "3.0.3", diff --git a/src/components/icon/component.stories.tsx b/src/components/icon/component.stories.tsx deleted file mode 100644 index 04c73c5..0000000 --- a/src/components/icon/component.stories.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import { Story } from '@storybook/react/types-6-0'; - -import DOWNLOAD_SVG from 'svgs/ui/download.svg'; - -import Icon from './component'; -import { IconProps } from './types'; - -const StoryIcon = { - title: 'Components/Icon', - component: Icon, -}; - -export default StoryIcon; - -const Template: Story = (args) => ; - -export const Default = Template.bind({}); -Default.args = { - className: 'w-5 h-5 text-blue-500', - icon: DOWNLOAD_SVG, -}; diff --git a/src/components/icon/component.tsx b/src/components/icon/component.tsx index 6b4f391..4c05c85 100644 --- a/src/components/icon/component.tsx +++ b/src/components/icon/component.tsx @@ -1,10 +1,8 @@ -import { FC } from 'react'; - import cx from 'clsx'; import type { IconProps } from './types'; -export const Icon: FC = ({ icon, className = 'w-5 h-5', style }: IconProps) => ( +export const Icon = ({ icon, className = 'w-5 h-5', style }: IconProps) => ( = (props: LayoutProps) => { + const { children } = props; + + return ( +
+
+ {/* Content */} + {children} +
+ + {/*