Skip to content

Commit

Permalink
Merge pull request #173 from department-of-veterans-affairs/cu/53-nar…
Browse files Browse the repository at this point in the history
…in-update-expo-storybook

[CU] Update to Expo 50 and Storybook 7
  • Loading branch information
narin authored Feb 13, 2024
2 parents 6b924d5 + a637f87 commit a7c3fc4
Show file tree
Hide file tree
Showing 24 changed files with 4,249 additions and 9,519 deletions.
13 changes: 10 additions & 3 deletions packages/components/.storybook/native/index.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,14 @@
import { getStorybookUI } from '@storybook/react-native'
import AsyncStorage from '@react-native-async-storage/async-storage'

import './storybook.requires'
import { view } from './storybook.requires'

const StorybookUIRoot = getStorybookUI({})
import './storybook.requires'

const StorybookUIRoot = view.getStorybookUI({
// Used to persist the selected story between reloads
storage: {
getItem: AsyncStorage.getItem,
setItem: AsyncStorage.setItem,
},
})
export default StorybookUIRoot
64 changes: 0 additions & 64 deletions packages/components/.storybook/native/storybook.requires.js

This file was deleted.

47 changes: 47 additions & 0 deletions packages/components/.storybook/native/storybook.requires.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
/* do not change this file, it is auto generated by storybook. */

import { start } from "@storybook/react-native";

import "@storybook/addon-ondevice-controls/register";
import "@storybook/addon-ondevice-actions/register";

const normalizedStories = [
{
titlePrefix: "",
directory: "./src/components",
files: "**/*.stories.mdx",
importPathMatcher:
/^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.mdx)$/,
// @ts-ignore
req: require.context(
"../../src/components",
true,
/^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.mdx)$/
),
},
{
titlePrefix: "",
directory: "./src/components",
files: "**/*.stories.@(js|jsx|ts|tsx)",
importPathMatcher:
/^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(js|jsx|ts|tsx))$/,
// @ts-ignore
req: require.context(
"../../src/components",
true,
/^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(js|jsx|ts|tsx))$/
),
},
];

// @ts-ignore
global.STORIES = normalizedStories;

export const view = start({
annotations: [
require("./preview"),
require("@storybook/react-native/dist/preview"),
require("@storybook/addon-actions/preview"),
],
storyEntries: normalizedStories,
});
14 changes: 6 additions & 8 deletions packages/components/.storybook/web/main.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,20 +8,18 @@ module.exports = {
],
addons: [
'@storybook/addon-links',
{
name: '@storybook/addon-essentials',
options: {
backgrounds: false,
},
},
'@storybook/addon-essentials',
'@storybook/addon-react-native-web',
'storybook-addon-designs',
'@storybook/addon-designs',
'storybook-dark-mode',
],
docs: {
autodocs: true,
},
core: {
builder: 'webpack5',
},
framework: '@storybook/react',
framework: '@storybook/react-webpack5',
staticDirs: ['../../src/assets'],
webpackFinal: async (config) => {
// Copies fonts from mobile-assets to storybook static folder
Expand Down
3 changes: 3 additions & 0 deletions packages/components/.storybook/web/preview-head.html
Original file line number Diff line number Diff line change
Expand Up @@ -9,4 +9,7 @@
src: url('fonts/SourceSansPro/SourceSansPro-Bold.ttf');
}

.dark {
background: #333333;
}
</style>
7 changes: 3 additions & 4 deletions packages/components/.storybook/web/preview.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
import { withDesign } from 'storybook-addon-designs'

export const parameters = {
actions: { argTypesRegex: '^on[A-Z].*' },
controls: {
Expand All @@ -8,6 +6,7 @@ export const parameters = {
date: /Date$/,
},
},
darkMode: {
stylePreview: true,
},
}

export const decorators = [withDesign]
62 changes: 36 additions & 26 deletions packages/components/metro.config.js
Original file line number Diff line number Diff line change
@@ -1,36 +1,46 @@
/* eslint-disable @typescript-eslint/no-var-requires */
const { getDefaultConfig } = require('metro-config')
const { getDefaultConfig } = require('expo/metro-config')
const path = require('path')

const { generate } = require('@storybook/react-native/scripts/generate')

// Generates storybook.requires, which is used to load all our stories and addons in our project.
generate({
configPath: path.resolve(__dirname, './.storybook/native'),
})

// Find the project and workspace directories
const projectRoot = __dirname
// This can be replaced with `find-yarn-workspace-root`
const workspaceRoot = path.resolve(projectRoot, '../..')

module.exports = (async () => {
const {
resolver: { sourceExts, assetExts, resolverMainFields },
} = await getDefaultConfig()

return {
// Watch all files within the monorepo
watchFolders: [workspaceRoot],
// SVG support
transformer: {
babelTransformerPath: require.resolve('react-native-svg-transformer'),
},
resolver: {
// SVG support
assetExts: assetExts.filter((ext) => ext !== 'svg'),
sourceExts: [...sourceExts, 'svg'],
// Let Metro know where to resolve packages and in what order
nodeModulesPaths: [
path.resolve(projectRoot, 'node_modules'),
path.resolve(workspaceRoot, 'node_modules'),
],
// Force Metro to resolve (sub)dependencies only from the `nodeModulesPaths`
disableHierarchicalLookup: true,
resolverMainFields: ['sbmodern', 'react-native', ...resolverMainFields],
},
module.exports = (() => {
const config = getDefaultConfig(__dirname)

const { transformer, resolver } = config

config.watchFolders = [workspaceRoot]

config.transformer = {
...transformer,
// Enables dynamic imports
unstable_useRequireContext: true,
// SVG Support
babelTransformerPath: require.resolve('react-native-svg-transformer'),
}
config.resolver = {
...resolver,
// SVG Support
assetExts: resolver.assetExts.filter((ext) => ext !== 'svg'),
sourceExts: [...resolver.sourceExts, 'svg'],
// Let Metro know where to resolve packages and in what order
nodeModulesPaths: [
path.resolve(projectRoot, 'node_modules'),
path.resolve(workspaceRoot, 'node_modules'),
],
// Force Metro to resolve (sub)dependencies only from the `nodeModulesPaths`
disableHierarchicalLookup: true,
}

return config
})()
72 changes: 37 additions & 35 deletions packages/components/package.json
Original file line number Diff line number Diff line change
@@ -1,18 +1,18 @@
{
"name": "@department-of-veterans-affairs/mobile-component-library",
"version": "0.5.2-alpha.2",
"version": "0.5.2-alpha.10",
"description": "VA Design System Mobile Component Library",
"main": "src/index.tsx",
"scripts": {
"start": "sb-rn-get-stories --config-path .storybook/native && expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"publish-package": "npm publish --access public --tolerate-republish",
"storybook:build": "STORYBOOK_WEB=true build-storybook --config-dir .storybook/web",
"storybook:build": "STORYBOOK_WEB=true storybook build --config-dir .storybook/web",
"storybook:deploy": "yarn storybook:build && gh-pages -d storybook-static",
"storybook:generate": "sb-rn-get-stories --config-path .storybook/native",
"storybook:watch": "sb-rn-watcher --config-path .storybook/native",
"storybook:web": "STORYBOOK_WEB=true start-storybook --config-dir .storybook/web -p 6006 --no-version-updates",
"storybook:web": "STORYBOOK_WEB=true storybook dev --config-dir .storybook/web -p 6006 --no-version-updates",
"test": "jest --coverage",
"test:watch": "jest --watch"
},
Expand Down Expand Up @@ -43,13 +43,13 @@
"@os-team/i18next-react-native-language-detector": "^1.0.28",
"i18next": "^23.4.3",
"react-i18next": "^13.0.3",
"react-native-svg": "13.9.0",
"react-native-svg": "14.1.0",
"styled-components": "^6.0.7"
},
"peerDependencies": {
"@department-of-veterans-affairs/mobile-assets": "*",
"react": "^18.2.0",
"react-native": "~0.71.7",
"react-native": ">=0.71.7",
"react-native-gesture-handler": "^2.12.0"
},
"devDependencies": {
Expand All @@ -58,57 +58,59 @@
"@babel/plugin-transform-react-jsx": "^7.22.15",
"@babel/preset-env": "^7.22.15",
"@babel/preset-typescript": "^7.22.15",
"@expo/webpack-config": "^19.0.0",
"@react-native-async-storage/async-storage": "1.18.2",
"@react-native-community/datetimepicker": "7.2.0",
"@expo/metro-runtime": "~3.1.3",
"@expo/webpack-config": "~19.0.1",
"@react-native-async-storage/async-storage": "^1.21.0",
"@react-native-community/datetimepicker": "7.6.1",
"@react-native-community/slider": "^4.4.2",
"@storybook/addon-actions": "^6.5.16",
"@storybook/addon-controls": "^6.5.16",
"@storybook/addon-docs": "^6.5.16",
"@storybook/addon-essentials": "^6.5.16",
"@storybook/addon-links": "^6.5.16",
"@storybook/addon-ondevice-actions": "^6.5.4",
"@storybook/addon-ondevice-controls": "^6.5.4",
"@storybook/addon-react-native-web": "^0.0.21",
"@storybook/builder-webpack5": "^6.5.14",
"@storybook/manager-webpack5": "^6.5.14",
"@storybook/react": "^6.5.16",
"@storybook/react-native": "^6.5.4",
"@storybook/addon-actions": "^7.6.10",
"@storybook/addon-controls": "^7.6.10",
"@storybook/addon-designs": "^7.0.9",
"@storybook/addon-docs": "^7.6.10",
"@storybook/addon-essentials": "^7.6.10",
"@storybook/addon-links": "^7.6.10",
"@storybook/addon-ondevice-actions": "^7.6.10",
"@storybook/addon-ondevice-controls": "^7.6.10",
"@storybook/addon-react-native-web": "^0.0.22",
"@storybook/builder-webpack5": "^7.6.12",
"@storybook/react": "^7.6.10",
"@storybook/react-native": "^7.6.10",
"@storybook/react-webpack5": "^7.6.13",
"@svgr/webpack": "^8.1.0",
"@testing-library/react-native": "^12.3.0",
"@types/jest": "^29.5.3",
"@types/react": "~18.2.14",
"@types/react": "~18.2.45",
"@types/react-test-renderer": "^18.0.1",
"@types/styled-components-react-native": "^5.2.1",
"babel-jest": "^29.6.4",
"babel-loader": "^8.3.0",
"babel-plugin-react-docgen-typescript": "^1.5.1",
"babel-plugin-react-native-web": "^0.18.10",
"copy-webpack-plugin": "^11.0.0",
"expo": "49.0.13",
"expo-constants": "~14.4.2",
"expo-font": "~11.4.0",
"expo-linking": "~5.0.2",
"expo-splash-screen": "~0.20.4",
"expo-status-bar": "~1.6.0",
"expo": "^50.0.6",
"expo-constants": "~15.4.5",
"expo-font": "~11.10.2",
"expo-linking": "~6.2.2",
"expo-splash-screen": "~0.26.4",
"expo-status-bar": "~1.11.1",
"gh-pages": "^5.0.0",
"jest": "^29.6.1",
"jest-expo": "~49.0.0",
"jest-expo": "~50.0.2",
"jest-styled-components": "^7.1.1",
"metro-react-native-babel-preset": "^0.77.0",
"react": "^18.2.0",
"react-dom": "18.2.0",
"react-native": "0.72.6",
"react-native-gesture-handler": "^2.12.0",
"react-native-reanimated": "~3.3.0",
"react-native-safe-area-context": "4.6.3",
"react-native-screens": "~3.22.0",
"react-native": "0.73.4",
"react-native-gesture-handler": "~2.14.0",
"react-native-reanimated": "~3.6.2",
"react-native-safe-area-context": "4.8.2",
"react-native-screens": "~3.29.0",
"react-native-svg-transformer": "^1.3.0",
"react-native-web": "~0.19.6",
"react-test-renderer": "^18.2.0",
"storybook-addon-designs": "^6.3.1",
"storybook": "^7.6.12",
"storybook-dark-mode": "^3.0.1",
"ts-jest": "^29.1.1",
"typescript": "^5.1.6"
"typescript": "^5.3.0"
}
}
Loading

0 comments on commit a7c3fc4

Please sign in to comment.