diff --git a/packages/ui/.gitignore b/packages/components/.gitignore similarity index 100% rename from packages/ui/.gitignore rename to packages/components/.gitignore diff --git a/packages/components/.storybook/main.ts b/packages/components/.storybook/main.ts new file mode 100644 index 00000000..cda763cc --- /dev/null +++ b/packages/components/.storybook/main.ts @@ -0,0 +1,15 @@ +module.exports = { + stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'], + addons: [ + '@storybook/addon-links', + '@storybook/addon-essentials', + '@storybook/addon-interactions' + ], + framework: { + name: '@storybook/react-vite', + options: {} + }, + docs: { + autodocs: 'tag' + } +} diff --git a/packages/components/.storybook/preview-head.html b/packages/components/.storybook/preview-head.html new file mode 100644 index 00000000..05da1e9d --- /dev/null +++ b/packages/components/.storybook/preview-head.html @@ -0,0 +1,3 @@ + \ No newline at end of file diff --git a/packages/components/.storybook/preview.tsx b/packages/components/.storybook/preview.tsx new file mode 100644 index 00000000..43a2ea68 --- /dev/null +++ b/packages/components/.storybook/preview.tsx @@ -0,0 +1,22 @@ +import React from 'react' +import { TamaguiProvider } from '@tamagui/core' +import { config } from '../src' + +export const parameters = { + actions: { argTypesRegex: '^on[A-Z].*' }, + controls: { + matchers: { + color: /(background|color)$/i, + date: /Date$/ + } + } +} + +const withThemeProvider = (Story, context) => { + return ( + + + + ) +} +export const decorators = [withThemeProvider] diff --git a/packages/components/package.json b/packages/components/package.json new file mode 100644 index 00000000..d2b4e9c3 --- /dev/null +++ b/packages/components/package.json @@ -0,0 +1,46 @@ +{ + "name": "@status-im/components", + "version": "0.0.1", + "sideEffects": [ + "*.css" + ], + "private": true, + "types": "src/index.tsx", + "main": "src/index.tsx", + "files": [ + "types", + "dist" + ], + "scripts": { + "build": "tamagui-build", + "typegen": "tsc --noEmit false --emitDeclarationOnly || true", + "watch": "tamagui-build --watch", + "storybook": "storybook dev -p 6006", + "build-storybook": "storybook build" + }, + "dependencies": { + "@tamagui/animations-react-native": "^1.0.3", + "@tamagui/core": "^1.0.3", + "@tamagui/font-inter": "^1.0.3", + "@tamagui/react-native-media-driver": "^1.0.3", + "@tamagui/shorthands": "^1.0.3", + "@tamagui/theme-base": "^1.0.3", + "tamagui": "^1.0.3" + }, + "devDependencies": { + "@storybook/addon-essentials": "^7.0.0-beta.21", + "@storybook/addon-interactions": "^7.0.0-beta.21", + "@storybook/addon-links": "^7.0.0-beta.21", + "@storybook/blocks": "^7.0.0-beta.21", + "@storybook/react": "^7.0.0-beta.21", + "@storybook/react-vite": "^7.0.0-beta.21", + "@storybook/testing-library": "^0.0.13", + "@tamagui/build": "^1.0.3", + "@tamagui/vite-plugin": "^1.0.3", + "prop-types": "^15.8.1", + "react": "^18.2.0", + "react-dom": "^18.2.0", + "storybook": "^7.0.0-beta.21", + "vite": "^4.0.4" + } +} diff --git a/packages/ui/src/animations.ts b/packages/components/src/animations.ts similarity index 100% rename from packages/ui/src/animations.ts rename to packages/components/src/animations.ts diff --git a/packages/ui/src/global.ts b/packages/components/src/global.ts similarity index 100% rename from packages/ui/src/global.ts rename to packages/components/src/global.ts diff --git a/packages/ui/src/index.tsx b/packages/components/src/index.tsx similarity index 68% rename from packages/ui/src/index.tsx rename to packages/components/src/index.tsx index 624736a4..58207831 100644 --- a/packages/ui/src/index.tsx +++ b/packages/components/src/index.tsx @@ -1,3 +1,3 @@ -export * from './MyComponent' +export * from './shape' export { config } from './tamagui.config' export * from 'tamagui' diff --git a/packages/components/src/shape/index.tsx b/packages/components/src/shape/index.tsx new file mode 100644 index 00000000..16fad832 --- /dev/null +++ b/packages/components/src/shape/index.tsx @@ -0,0 +1 @@ +export * from './shape' diff --git a/packages/components/src/shape/shape.stories.tsx b/packages/components/src/shape/shape.stories.tsx new file mode 100644 index 00000000..254491aa --- /dev/null +++ b/packages/components/src/shape/shape.stories.tsx @@ -0,0 +1,39 @@ +import { Shape } from './shape' + +// More on how to set up stories at: https://storybook.js.org/docs/7.0/react/writing-stories/introduction +export default { + title: 'Example/Shape', + component: Shape, + tags: ['autodocs'], + argTypes: { + backgroundColor: { control: 'color' } + } +} + +// More on writing stories with args: https://storybook.js.org/docs/7.0/react/writing-stories/args +export const Primary = { + args: { + primary: true, + label: 'Shape' + } +} + +export const Secondary = { + args: { + label: 'Shape' + } +} + +export const Large = { + args: { + size: 'large', + label: 'Shape' + } +} + +export const Small = { + args: { + size: 'small', + label: 'Shape' + } +} diff --git a/packages/components/src/shape/shape.tsx b/packages/components/src/shape/shape.tsx new file mode 100644 index 00000000..b38d37e4 --- /dev/null +++ b/packages/components/src/shape/shape.tsx @@ -0,0 +1,15 @@ +import { Stack, styled } from '@tamagui/core' + +export const Shape = styled(Stack, { + backgroundColor: 'pink', + width: 100, + height: 100 +}) + +// import { styled, YStack } from 'tamagui' + +// export const MyComponent = styled(YStack, { +// backgroundColor: 'pink', +// width: 100, +// height: 100 +// }) diff --git a/packages/components/src/stories/Button.jsx b/packages/components/src/stories/Button.jsx new file mode 100644 index 00000000..15dde392 --- /dev/null +++ b/packages/components/src/stories/Button.jsx @@ -0,0 +1,50 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import './button.css'; + +/** + * Primary UI component for user interaction + */ +export const Button = ({ primary, backgroundColor, size, label, ...props }) => { + const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary'; + return ( + + ); +}; + +Button.propTypes = { + /** + * Is this the principal call to action on the page? + */ + primary: PropTypes.bool, + /** + * What background color to use + */ + backgroundColor: PropTypes.string, + /** + * How large should the button be? + */ + size: PropTypes.oneOf(['small', 'medium', 'large']), + /** + * Button contents + */ + label: PropTypes.string.isRequired, + /** + * Optional click handler + */ + onClick: PropTypes.func, +}; + +Button.defaultProps = { + backgroundColor: null, + primary: false, + size: 'medium', + onClick: undefined, +}; diff --git a/packages/components/src/stories/Button.stories.js b/packages/components/src/stories/Button.stories.js new file mode 100644 index 00000000..0f57d469 --- /dev/null +++ b/packages/components/src/stories/Button.stories.js @@ -0,0 +1,39 @@ +import { Button } from './Button'; + +// More on how to set up stories at: https://storybook.js.org/docs/7.0/react/writing-stories/introduction +export default { + title: 'Example/Button', + component: Button, + tags: ['autodocs'], + argTypes: { + backgroundColor: { control: 'color' }, + }, +}; + +// More on writing stories with args: https://storybook.js.org/docs/7.0/react/writing-stories/args +export const Primary = { + args: { + primary: true, + label: 'Button', + }, +}; + +export const Secondary = { + args: { + label: 'Button', + }, +}; + +export const Large = { + args: { + size: 'large', + label: 'Button', + }, +}; + +export const Small = { + args: { + size: 'small', + label: 'Button', + }, +}; diff --git a/packages/components/src/stories/Header.jsx b/packages/components/src/stories/Header.jsx new file mode 100644 index 00000000..3862422e --- /dev/null +++ b/packages/components/src/stories/Header.jsx @@ -0,0 +1,59 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +import { Button } from './Button'; +import './header.css'; + +export const Header = ({ user, onLogin, onLogout, onCreateAccount }) => ( +
+
+
+ + + + + + + +

Acme

+
+
+ {user ? ( + <> + + Welcome, {user.name}! + +
+
+
+); + +Header.propTypes = { + user: PropTypes.shape({ + name: PropTypes.string.isRequired, + }), + onLogin: PropTypes.func.isRequired, + onLogout: PropTypes.func.isRequired, + onCreateAccount: PropTypes.func.isRequired, +}; + +Header.defaultProps = { + user: null, +}; diff --git a/packages/components/src/stories/Header.stories.js b/packages/components/src/stories/Header.stories.js new file mode 100644 index 00000000..1c326bc0 --- /dev/null +++ b/packages/components/src/stories/Header.stories.js @@ -0,0 +1,22 @@ +import { Header } from './Header'; + +export default { + title: 'Example/Header', + component: Header, + // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/7.0/react/writing-docs/docs-page + tags: ['autodocs'], + parameters: { + // More on how to position stories at: https://storybook.js.org/docs/7.0/react/configure/story-layout + layout: 'fullscreen', + }, +}; + +export const LoggedIn = { + args: { + user: { + name: 'Jane Doe', + }, + }, +}; + +export const LoggedOut = {}; diff --git a/packages/components/src/stories/Introduction.mdx b/packages/components/src/stories/Introduction.mdx new file mode 100644 index 00000000..2097f913 --- /dev/null +++ b/packages/components/src/stories/Introduction.mdx @@ -0,0 +1,211 @@ +import { Meta } from '@storybook/blocks'; +import Code from './assets/code-brackets.svg'; +import Colors from './assets/colors.svg'; +import Comments from './assets/comments.svg'; +import Direction from './assets/direction.svg'; +import Flow from './assets/flow.svg'; +import Plugin from './assets/plugin.svg'; +import Repo from './assets/repo.svg'; +import StackAlt from './assets/stackalt.svg'; + + + + + +# Welcome to Storybook + +Storybook helps you build UI components in isolation from your app's business logic, data, and context. +That makes it easy to develop hard-to-reach states. Save these UI states as **stories** to revisit during development, testing, or QA. + +Browse example stories now by navigating to them in the sidebar. +View their code in the `stories` directory to learn how they work. +We recommend building UIs with a [**component-driven**](https://componentdriven.org) process starting with atomic components and ending with pages. + +
Configure
+ +
+ + plugin + + Presets for popular tools + Easy setup for TypeScript, SCSS and more. + + + + Build + + Build configuration + How to customize webpack and Babel + + + + colors + + Styling + How to load and configure CSS libraries + + + + flow + + Data + Providers and mocking for data libraries + + +
+ +
Learn
+ +
+ + repo + + Storybook documentation + Configure, customize, and extend + + + + direction + + In-depth guides + Best practices from leading teams + + + + code + + GitHub project + View the source and add issues + + + + comments + + Discord chat + Chat with maintainers and the community + + +
+ +
+ TipEdit the Markdown in{' '} + stories/Introduction.stories.mdx +
diff --git a/packages/components/src/stories/Page.jsx b/packages/components/src/stories/Page.jsx new file mode 100644 index 00000000..c5fffe95 --- /dev/null +++ b/packages/components/src/stories/Page.jsx @@ -0,0 +1,69 @@ +import React from 'react'; + +import { Header } from './Header'; +import './page.css'; + +export const Page = () => { + const [user, setUser] = React.useState(); + + return ( +
+
setUser({ name: 'Jane Doe' })} + onLogout={() => setUser(undefined)} + onCreateAccount={() => setUser({ name: 'Jane Doe' })} + /> + +
+

Pages in Storybook

+

+ We recommend building UIs with a{' '} + + component-driven + {' '} + process starting with atomic components and ending with pages. +

+

+ Render pages with mock data. This makes it easy to build and review page states without + needing to navigate to them in your app. Here are some handy patterns for managing page + data in Storybook: +

+
    +
  • + Use a higher-level connected component. Storybook helps you compose such data from the + "args" of child component stories +
    • +
  • + Assemble data in the page component from your services. You can mock these services out + using Storybook. +
    • +
+

+ Get a guided tutorial on component-driven development at{' '} + + Storybook tutorials + + . Read more in the{' '} + + docs + + . +

+
+ Tip Adjust the width of the canvas with the{' '} + + + + + + Viewports addon in the toolbar +
+
+
+ ); +}; diff --git a/packages/components/src/stories/Page.stories.js b/packages/components/src/stories/Page.stories.js new file mode 100644 index 00000000..3f0a5465 --- /dev/null +++ b/packages/components/src/stories/Page.stories.js @@ -0,0 +1,25 @@ +import { within, userEvent } from '@storybook/testing-library'; + +import { Page } from './Page'; + +export default { + title: 'Example/Page', + component: Page, + parameters: { + // More on how to position stories at: https://storybook.js.org/docs/7.0/react/configure/story-layout + layout: 'fullscreen', + }, +}; + +export const LoggedOut = {}; + +// More on interaction testing: https://storybook.js.org/docs/7.0/react/writing-tests/interaction-testing +export const LoggedIn = { + play: async ({ canvasElement }) => { + const canvas = within(canvasElement); + const loginButton = await canvas.getByRole('button', { + name: /Log in/i, + }); + await userEvent.click(loginButton); + }, +}; diff --git a/packages/components/src/stories/assets/code-brackets.svg b/packages/components/src/stories/assets/code-brackets.svg new file mode 100644 index 00000000..73de9477 --- /dev/null +++ b/packages/components/src/stories/assets/code-brackets.svg @@ -0,0 +1 @@ +illustration/code-brackets \ No newline at end of file diff --git a/packages/components/src/stories/assets/colors.svg b/packages/components/src/stories/assets/colors.svg new file mode 100644 index 00000000..17d58d51 --- /dev/null +++ b/packages/components/src/stories/assets/colors.svg @@ -0,0 +1 @@ +illustration/colors \ No newline at end of file diff --git a/packages/components/src/stories/assets/comments.svg b/packages/components/src/stories/assets/comments.svg new file mode 100644 index 00000000..6493a139 --- /dev/null +++ b/packages/components/src/stories/assets/comments.svg @@ -0,0 +1 @@ +illustration/comments \ No newline at end of file diff --git a/packages/components/src/stories/assets/direction.svg b/packages/components/src/stories/assets/direction.svg new file mode 100644 index 00000000..65676ac2 --- /dev/null +++ b/packages/components/src/stories/assets/direction.svg @@ -0,0 +1 @@ +illustration/direction \ No newline at end of file diff --git a/packages/components/src/stories/assets/flow.svg b/packages/components/src/stories/assets/flow.svg new file mode 100644 index 00000000..8ac27db4 --- /dev/null +++ b/packages/components/src/stories/assets/flow.svg @@ -0,0 +1 @@ +illustration/flow \ No newline at end of file diff --git a/packages/components/src/stories/assets/plugin.svg b/packages/components/src/stories/assets/plugin.svg new file mode 100644 index 00000000..29e5c690 --- /dev/null +++ b/packages/components/src/stories/assets/plugin.svg @@ -0,0 +1 @@ +illustration/plugin \ No newline at end of file diff --git a/packages/components/src/stories/assets/repo.svg b/packages/components/src/stories/assets/repo.svg new file mode 100644 index 00000000..f386ee90 --- /dev/null +++ b/packages/components/src/stories/assets/repo.svg @@ -0,0 +1 @@ +illustration/repo \ No newline at end of file diff --git a/packages/components/src/stories/assets/stackalt.svg b/packages/components/src/stories/assets/stackalt.svg new file mode 100644 index 00000000..9b7ad274 --- /dev/null +++ b/packages/components/src/stories/assets/stackalt.svg @@ -0,0 +1 @@ +illustration/stackalt \ No newline at end of file diff --git a/packages/components/src/stories/button.css b/packages/components/src/stories/button.css new file mode 100644 index 00000000..dc91dc76 --- /dev/null +++ b/packages/components/src/stories/button.css @@ -0,0 +1,30 @@ +.storybook-button { + font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; + font-weight: 700; + border: 0; + border-radius: 3em; + cursor: pointer; + display: inline-block; + line-height: 1; +} +.storybook-button--primary { + color: white; + background-color: #1ea7fd; +} +.storybook-button--secondary { + color: #333; + background-color: transparent; + box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset; +} +.storybook-button--small { + font-size: 12px; + padding: 10px 16px; +} +.storybook-button--medium { + font-size: 14px; + padding: 11px 20px; +} +.storybook-button--large { + font-size: 16px; + padding: 12px 24px; +} diff --git a/packages/components/src/stories/header.css b/packages/components/src/stories/header.css new file mode 100644 index 00000000..830610e6 --- /dev/null +++ b/packages/components/src/stories/header.css @@ -0,0 +1,32 @@ +.wrapper { + font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; + border-bottom: 1px solid rgba(0, 0, 0, 0.1); + padding: 15px 20px; + display: flex; + align-items: center; + justify-content: space-between; +} + +svg { + display: inline-block; + vertical-align: top; +} + +h1 { + font-weight: 900; + font-size: 20px; + line-height: 1; + margin: 6px 0 6px 10px; + display: inline-block; + vertical-align: top; +} + +button + button { + margin-left: 10px; +} + +.welcome { + color: #333; + font-size: 14px; + margin-right: 10px; +} diff --git a/packages/components/src/stories/page.css b/packages/components/src/stories/page.css new file mode 100644 index 00000000..fbc32aea --- /dev/null +++ b/packages/components/src/stories/page.css @@ -0,0 +1,69 @@ +section { + font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; + font-size: 14px; + line-height: 24px; + padding: 48px 20px; + margin: 0 auto; + max-width: 600px; + color: #333; +} + +section h2 { + font-weight: 900; + font-size: 32px; + line-height: 1; + margin: 0 0 4px; + display: inline-block; + vertical-align: top; +} + +section p { + margin: 1em 0; +} + +section a { + text-decoration: none; + color: #1ea7fd; +} + +section ul { + padding-left: 30px; + margin: 1em 0; +} + +section li { + margin-bottom: 8px; +} + +section .tip { + display: inline-block; + border-radius: 1em; + font-size: 11px; + line-height: 12px; + font-weight: 700; + background: #e7fdd8; + color: #66bf3c; + padding: 4px 12px; + margin-right: 10px; + vertical-align: top; +} + +section .tip-wrapper { + font-size: 13px; + line-height: 20px; + margin-top: 40px; + margin-bottom: 40px; +} + +section .tip-wrapper svg { + display: inline-block; + height: 12px; + width: 12px; + margin-right: 4px; + vertical-align: top; + margin-top: 3px; +} + +section .tip-wrapper svg path { + fill: #1ea7fd; +} diff --git a/packages/ui/src/tamagui.config.ts b/packages/components/src/tamagui.config.ts similarity index 100% rename from packages/ui/src/tamagui.config.ts rename to packages/components/src/tamagui.config.ts diff --git a/packages/ui/tsconfig.json b/packages/components/tsconfig.json similarity index 100% rename from packages/ui/tsconfig.json rename to packages/components/tsconfig.json diff --git a/packages/components/vite.config.ts b/packages/components/vite.config.ts new file mode 100644 index 00000000..738b3041 --- /dev/null +++ b/packages/components/vite.config.ts @@ -0,0 +1,139 @@ +// import tamagui from '@tamagui/vite-plugin' +import react from '@vitejs/plugin-react-swc' +import { defineConfig } from 'vite' + +// console.log('tamagui', tamagui) +// const { tamaguiPlugin, tamaguiExtractPlugin } = tamagui + +// Tamagui exports incorrectly this plugin +function tamaguiPlugin(options): any { + const components = [ + ...new Set([...options.components, 'tamagui', '@tamagui/core']) + ] + const noExternalSSR = new RegExp( + `${components.join('|')}|react-native|expo-linear-gradient`, + 'ig' + ) + + const plugin: any = { + name: 'tamagui-base', + enforce: 'pre', + + config(userConfig, env) { + return { + plugins: [ + // + // envPlugin(['NODE_ENV', 'TAMAGUI_TARGET', 'ENABLE_RSC']), + // viteCommonjs(), + ], + define: { + // reanimated support + 'global.__x': {}, + _frameTimestamp: undefined, + _WORKLET: false, + ...(process.env.NODE_ENV !== 'test' && { + 'process.env.TAMAGUI_TARGET': JSON.stringify( + process.env.TAMAGUI_TARGET || 'web' + ), + 'process.env.NODE_ENV': JSON.stringify( + process.env.NODE_ENV || env.mode + ), + 'process.env.ENABLE_RSC': JSON.stringify( + process.env.ENABLE_RSC || '' + ), + 'process.env.ENABLE_STEPS': JSON.stringify( + process.env.ENABLE_STEPS || '' + ), + 'process.env.IS_STATIC': JSON.stringify(false) + }) + }, + // build: { + // commonjsOptions: { + // transformMixedEsModules: true, + // }, + // }, + ssr: { + noExternal: noExternalSSR + }, + optimizeDeps: { + // disabled: false, + include: ['styleq', 'react-native-reanimated'], + esbuildOptions: { + jsx: 'transform', + // plugins: [ + // esbuildCommonjs([ + // 'styleq', + // 'inline-style-prefixer', + // 'create-react-class', + // 'copy-to-clipboard', + // ]), + // ], + resolveExtensions: [ + '.web.js', + '.web.ts', + '.web.tsx', + '.js', + '.jsx', + '.json', + '.ts', + '.tsx', + '.mjs' + ], + loader: { + '.js': 'jsx' + } + } + }, + resolve: { + // for once it extracts + // mainFields: ['module:jsx', 'module', 'jsnext:main', 'jsnext', 'main'], + extensions: [ + '.web.js', + '.web.ts', + '.web.tsx', + '.js', + '.jsx', + '.json', + '.ts', + '.tsx', + '.mjs' + ], + alias: { + 'react-native/Libraries/Renderer/shims/ReactFabric': + '@tamagui/proxy-worm', + 'react-native/Libraries/Utilities/codegenNativeComponent': + '@tamagui/proxy-worm', + 'react-native-svg': '@tamagui/react-native-svg', + 'react-native': 'react-native-web', + ...(options.useReactNativeWebLite && { + 'react-native': 'react-native-web-lite', + 'react-native-web': 'react-native-web-lite' + }) + } + } + } + } + } + + return plugin +} + +// process.env.TAMAGUI_TARGET = 'web' + +const tamaguiConfig = { + components: [], + config: './src/tamagui.config.ts' + // useReactNativeWebLite: true, +} + +// https://vitejs.dev/config +export default defineConfig({ + define: { + TAMAGUI_TARGET: JSON.stringify('web') + }, + plugins: [ + react(), + tamaguiPlugin(tamaguiConfig) + // tamaguiExtractPlugin(tamaguiConfig) + ] +}) diff --git a/packages/ui/package.json b/packages/ui/package.json deleted file mode 100644 index 8d070bbc..00000000 --- a/packages/ui/package.json +++ /dev/null @@ -1,32 +0,0 @@ -{ - "name": "@status-im/ui", - "version": "0.0.1", - "sideEffects": [ - "*.css" - ], - "private": true, - "types": "dist/types/index.d.ts", - "main": "src/index.tsx", - "module:jsx": "src", - "files": [ - "types", - "dist" - ], - "scripts": { - "build": "tamagui-build", - "typegen": "tsc --noEmit false --emitDeclarationOnly || true", - "watch": "tamagui-build --watch" - }, - "dependencies": { - "@tamagui/animations-react-native": "^1.0.3", - "@tamagui/core": "^1.0.3", - "@tamagui/font-inter": "^1.0.3", - "@tamagui/react-native-media-driver": "^1.0.3", - "@tamagui/shorthands": "^1.0.3", - "@tamagui/theme-base": "^1.0.3", - "tamagui": "^1.0.3" - }, - "devDependencies": { - "@tamagui/build": "^1.0.3" - } -} diff --git a/packages/ui/src/MyComponent.tsx b/packages/ui/src/MyComponent.tsx deleted file mode 100644 index c1c5f7e9..00000000 --- a/packages/ui/src/MyComponent.tsx +++ /dev/null @@ -1,7 +0,0 @@ -import { styled, YStack } from 'tamagui' - -export const MyComponent = styled(YStack, { - backgroundColor: 'pink', - width: 100, - height: 100 -})