Skip to content

Commit

Permalink
remove config and tamagui from tamagui-extras export
Browse files Browse the repository at this point in the history
  • Loading branch information
dohomi committed Apr 14, 2023
1 parent 8ddde61 commit fc81e38
Show file tree
Hide file tree
Showing 6 changed files with 127 additions and 57 deletions.
53 changes: 2 additions & 51 deletions apps/storybook-react/.storybook/preview.tsx
Original file line number Diff line number Diff line change
@@ -1,58 +1,9 @@
// import * as NextImage from 'next/image'
// import {Provider} from "app/src/provider";
import '@tamagui/core/reset.css'
import '@fontsource/inter/400.css'
import '@fontsource/inter/700.css'
import 'raf/polyfill' // const OriginalNextImage = NextImage.default
//
// Object.defineProperty(NextImage, 'default', {
// configurable: true,
// value: (props) => <OriginalNextImage {...props} unoptimized />
// })
import { useThemeState } from 'app/src/state/themeState'
import { LmTamaguiProvider } from 'app/src/provider/LmTamaguiProvider'
import { YStack } from 'tamagui-extras'
import { Preview } from '@storybook/react'
// import * as NextImage from 'next/image'

// const OriginalNextFutureImage = NextImage.default
// Object.defineProperty(NextImage, 'default', {
// configurable: true,
// value: (props: any) => (
// <OriginalNextFutureImage
// {...props}
// loader={
// props.loader
// ? props.loader
// : ({ src }) => {
// return src
// }
// }
// />
// ),
// })

const decorators = [
(Story, args: any) => {
// The theme global we just declared
const { theme: themeKey } = args.globals
const name = useThemeState((state) => state.name)
let theme = themeKey
if (!theme && window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
// dark mode
theme = 'dark'
}
return (
<>
<LmTamaguiProvider defaultTheme={name || theme}>
<YStack backgroundColor={'$backgroundStrong'} padding={'$4'} flexGrow={1}>
<Story />
</YStack>
</LmTamaguiProvider>
</>
)
},
]
import { StorybookDecorator } from 'app/src/provider/StorybookDecorator'

const preview: Preview = {
globalTypes: {
Expand All @@ -71,7 +22,7 @@ const preview: Preview = {
},
},
},
decorators,
decorators: [StorybookDecorator],
}

export default preview
21 changes: 21 additions & 0 deletions packages/app/config/animations.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import { createAnimations } from '@tamagui/animations-react-native'

export const animations = createAnimations({
bouncy: {
type: 'spring',
damping: 10,
mass: 0.9,
stiffness: 100,
},
lazy: {
type: 'spring',
damping: 20,
stiffness: 60,
},
quick: {
type: 'spring',
damping: 20,
mass: 1.2,
stiffness: 250,
},
})
80 changes: 80 additions & 0 deletions packages/app/config/tamagui.config.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
import { createTamagui } from 'tamagui'
import { createInterFont } from '@tamagui/font-inter'
import { shorthands } from '@tamagui/shorthands'
import { themes, tokens } from '@tamagui/themes'
import { createMedia } from '@tamagui/react-native-media-driver'

import { animations } from './animations'

const headingFont = createInterFont({
size: {
6: 15,
},
transform: {
6: 'uppercase',
7: 'none',
},
weight: {
6: '400',
7: '700',
},
color: {
6: '$colorFocus',
7: '$color',
},
letterSpacing: {
5: 2,
6: 1,
7: 0,
8: -1,
9: -2,
10: -3,
12: -4,
14: -5,
15: -6,
},
face: {
700: { normal: 'InterBold' },
},
})

const bodyFont = createInterFont(
{
face: {
700: { normal: 'InterBold' },
},
},
{
sizeSize: (size) => Math.round(size * 1.1),
sizeLineHeight: (size) => Math.round(size * 1.1 + (size > 20 ? 10 : 10)),
}
)

export const config = createTamagui({
animations,
shouldAddPrefersColorThemes: true,
themeClassNameOnRoot: true,
shorthands,
fonts: {
heading: headingFont,
body: bodyFont,
},
themes,
tokens,
media: createMedia({
xs: { maxWidth: 660 },
sm: { maxWidth: 800 },
md: { maxWidth: 1020 },
lg: { maxWidth: 1280 },
xl: { maxWidth: 1420 },
xxl: { maxWidth: 1600 },
gtXs: { minWidth: 660 + 1 },
gtSm: { minWidth: 800 + 1 },
gtMd: { minWidth: 1020 + 1 },
gtLg: { minWidth: 1280 + 1 },
short: { maxHeight: 820 },
tall: { minHeight: 820 },
hoverNone: { hover: 'none' },
pointerCoarse: { pointer: 'coarse' },
}),
})
23 changes: 23 additions & 0 deletions packages/app/src/provider/StorybookDecorator.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import { useThemeState } from '../state/themeState'
import { LmTamaguiProvider } from './LmTamaguiProvider'
import { YStack } from 'tamagui'

export const StorybookDecorator = (Story, args: any) => {
// The theme global we just declared
const { theme: themeKey } = args.globals
const name = useThemeState((state) => state.name)
let theme = themeKey
if (!theme && window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
// dark mode
theme = 'dark'
}
return (
<>
<LmTamaguiProvider defaultTheme={name || theme}>
<YStack backgroundColor={'$backgroundStrong'} padding={'$4'} flexGrow={1}>
<Story />
</YStack>
</LmTamaguiProvider>
</>
)
}
2 changes: 1 addition & 1 deletion packages/app/tamagui.config.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { config } from 'tamagui-extras'
import { config } from './config/tamagui.config'

export type Conf = typeof config

Expand Down
5 changes: 0 additions & 5 deletions packages/ui/src/index.ts
Original file line number Diff line number Diff line change
@@ -1,10 +1,5 @@
export * from 'tamagui'

export * from './core/themeMappings'
export * from './core/panels'
export * from './core/hooks'
export * from './core/form'
export * from './core/content'

// config
export { config } from './tamagui.config'

2 comments on commit fc81e38

@vercel
Copy link

@vercel vercel bot commented on fc81e38 Apr 14, 2023

Choose a reason for hiding this comment

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

@vercel
Copy link

@vercel vercel bot commented on fc81e38 Apr 14, 2023

Choose a reason for hiding this comment

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

Please sign in to comment.