From 3639a7f8d8a264ef6c070b2b0687471a520a72f0 Mon Sep 17 00:00:00 2001
From: Pavel Prichodko <14926950+prichodko@users.noreply.github.com>
Date: Tue, 10 Jan 2023 12:24:24 +0100
Subject: [PATCH] add storybook and rename
---
packages/{ui => components}/.gitignore | 0
packages/components/.storybook/main.ts | 15 ++
.../components/.storybook/preview-head.html | 3 +
packages/components/.storybook/preview.tsx | 22 ++
packages/components/package.json | 46 ++++
packages/{ui => components}/src/animations.ts | 0
packages/{ui => components}/src/global.ts | 0
packages/{ui => components}/src/index.tsx | 2 +-
packages/components/src/shape/index.tsx | 1 +
.../components/src/shape/shape.stories.tsx | 39 ++++
packages/components/src/shape/shape.tsx | 15 ++
packages/components/src/stories/Button.jsx | 50 +++++
.../components/src/stories/Button.stories.js | 39 ++++
packages/components/src/stories/Header.jsx | 59 +++++
.../components/src/stories/Header.stories.js | 22 ++
.../components/src/stories/Introduction.mdx | 211 ++++++++++++++++++
packages/components/src/stories/Page.jsx | 69 ++++++
.../components/src/stories/Page.stories.js | 25 +++
.../src/stories/assets/code-brackets.svg | 1 +
.../components/src/stories/assets/colors.svg | 1 +
.../src/stories/assets/comments.svg | 1 +
.../src/stories/assets/direction.svg | 1 +
.../components/src/stories/assets/flow.svg | 1 +
.../components/src/stories/assets/plugin.svg | 1 +
.../components/src/stories/assets/repo.svg | 1 +
.../src/stories/assets/stackalt.svg | 1 +
packages/components/src/stories/button.css | 30 +++
packages/components/src/stories/header.css | 32 +++
packages/components/src/stories/page.css | 69 ++++++
.../{ui => components}/src/tamagui.config.ts | 0
packages/{ui => components}/tsconfig.json | 0
packages/components/vite.config.ts | 139 ++++++++++++
packages/ui/package.json | 32 ---
packages/ui/src/MyComponent.tsx | 7 -
34 files changed, 895 insertions(+), 40 deletions(-)
rename packages/{ui => components}/.gitignore (100%)
create mode 100644 packages/components/.storybook/main.ts
create mode 100644 packages/components/.storybook/preview-head.html
create mode 100644 packages/components/.storybook/preview.tsx
create mode 100644 packages/components/package.json
rename packages/{ui => components}/src/animations.ts (100%)
rename packages/{ui => components}/src/global.ts (100%)
rename packages/{ui => components}/src/index.tsx (68%)
create mode 100644 packages/components/src/shape/index.tsx
create mode 100644 packages/components/src/shape/shape.stories.tsx
create mode 100644 packages/components/src/shape/shape.tsx
create mode 100644 packages/components/src/stories/Button.jsx
create mode 100644 packages/components/src/stories/Button.stories.js
create mode 100644 packages/components/src/stories/Header.jsx
create mode 100644 packages/components/src/stories/Header.stories.js
create mode 100644 packages/components/src/stories/Introduction.mdx
create mode 100644 packages/components/src/stories/Page.jsx
create mode 100644 packages/components/src/stories/Page.stories.js
create mode 100644 packages/components/src/stories/assets/code-brackets.svg
create mode 100644 packages/components/src/stories/assets/colors.svg
create mode 100644 packages/components/src/stories/assets/comments.svg
create mode 100644 packages/components/src/stories/assets/direction.svg
create mode 100644 packages/components/src/stories/assets/flow.svg
create mode 100644 packages/components/src/stories/assets/plugin.svg
create mode 100644 packages/components/src/stories/assets/repo.svg
create mode 100644 packages/components/src/stories/assets/stackalt.svg
create mode 100644 packages/components/src/stories/button.css
create mode 100644 packages/components/src/stories/header.css
create mode 100644 packages/components/src/stories/page.css
rename packages/{ui => components}/src/tamagui.config.ts (100%)
rename packages/{ui => components}/tsconfig.json (100%)
create mode 100644 packages/components/vite.config.ts
delete mode 100644 packages/ui/package.json
delete mode 100644 packages/ui/src/MyComponent.tsx
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 (
+
+ {label}
+
+ );
+};
+
+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 }) => (
+
+);
+
+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
+
+
+
+Learn
+
+
+
+
+ Tip Edit 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
-})