Migration to @dooboo-ui/theme (#150)

This is a follow-up to previous work #149 . * initial docs migration * demo migration init * Fix broken tests except [ButtonGroup] * Update CI * Fix [ButtonGroup] test Co-authored-by: hyochan <dooboolab@gmail.com>
hyochan · Oct 16, 2021 · 612f661 · 612f661
1 parent 5bd77a4
commit 612f661
Show file tree

Hide file tree

Showing 100 changed files with 177 additions and 382 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -22,6 +22,9 @@ jobs:
       - name: Install modules
         run: yarn install --frozen-lockfile
 
+      - name: Prepare pacakges
+        run: yarn pre
+
       - name: Check linting
         run: yarn lint
 

diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml
@@ -14,6 +14,7 @@ jobs:
           node-version: '14.x'
           registry-url: 'https://registry.npmjs.org'
       - run: yarn
+      - run: yarn pre
       - run: yarn build
       - run: cd lib && yarn publish
         env:

diff --git a/docs/src/components/Accordion/index.tsx b/docs/src/components/Accordion/index.tsx
@@ -1,7 +1,8 @@
-import {Accordion, ThemeProvider} from 'dooboo-ui';
 import React, {ReactElement} from 'react';
 
+import {Accordion} from 'dooboo-ui';
 import {IC_ARR_DOWN} from '../../icon';
+import {ThemeProvider} from '@dooboo-ui/theme';
 import styled from '@emotion/native';
 
 const Container = styled.View`

diff --git a/docs/src/components/Button/AdditionalElement.tsx b/docs/src/components/Button/AdditionalElement.tsx
@@ -1,9 +1,10 @@
-import {Button, ThemeProvider, ThemeType} from 'dooboo-ui';
 import {IC_FACEBOOK, IC_GOOGLE} from '../../icon';
 import {Image, View} from 'react-native';
 import React, {useState} from 'react';
+import {ThemeProvider, ThemeType} from '@dooboo-ui/theme';
 import styled, {css} from '@emotion/native';
 
+import {Button} from 'dooboo-ui';
 import type {FC} from 'react';
 import {action} from '@storybook/addon-actions';
 

diff --git a/docs/src/components/Button/Basic.tsx b/docs/src/components/Button/Basic.tsx
@@ -1,5 +1,6 @@
-import {Button, ThemeProvider, ThemeType} from 'dooboo-ui';
+import {ThemeProvider, ThemeType} from '@dooboo-ui/theme';
 
+import {Button} from 'dooboo-ui';
 import type {FC} from 'react';
 import React from 'react';
 import {View} from 'react-native';

diff --git a/docs/src/components/Button/Button.stories.mdx b/docs/src/components/Button/Button.stories.mdx
@@ -1,5 +1,6 @@
 import {Meta, Story, Canvas} from '@storybook/addon-docs/blocks';
-import {ThemeProvider} from 'dooboo-ui';
+import {ThemeProvider} from '@dooboo-ui/theme';
+
 import {
   Basic,
   Loading,

diff --git a/docs/src/components/Button/Disabled.tsx b/docs/src/components/Button/Disabled.tsx
@@ -1,5 +1,6 @@
-import {Button, ThemeProvider, ThemeType} from 'dooboo-ui';
+import {ThemeProvider, ThemeType} from '@dooboo-ui/theme';
 
+import {Button} from 'dooboo-ui';
 import type {FC} from 'react';
 import React from 'react';
 import {View} from 'react-native';

diff --git a/docs/src/components/Button/Link.tsx b/docs/src/components/Button/Link.tsx
@@ -1,8 +1,9 @@
-import {Button, ThemeProvider} from 'dooboo-ui';
 import {Linking, StyleSheet, View} from 'react-native';
 
+import {Button} from 'dooboo-ui';
 import type {FC} from 'react';
 import React from 'react';
+import {ThemeProvider} from '@dooboo-ui/theme';
 
 const styles = StyleSheet.create({
   container: {

diff --git a/docs/src/components/Button/Loading.tsx b/docs/src/components/Button/Loading.tsx
@@ -1,5 +1,6 @@
-import {Button, ThemeProvider, ThemeType} from 'dooboo-ui';
+import {ThemeProvider, ThemeType} from '@dooboo-ui/theme';
 
+import {Button} from 'dooboo-ui';
 import type {FC} from 'react';
 import React from 'react';
 import {View} from 'react-native';

diff --git a/docs/src/components/Button/OnPress.tsx b/docs/src/components/Button/OnPress.tsx
@@ -1,6 +1,7 @@
-import {Button, ThemeProvider, ThemeType} from 'dooboo-ui';
 import React, {useState} from 'react';
+import {ThemeProvider, ThemeType} from '@dooboo-ui/theme';
 
+import {Button} from 'dooboo-ui';
 import type {FC} from 'react';
 import {View} from 'react-native';
 import styled from '@emotion/native';

diff --git a/docs/src/components/Button/Outlined.tsx b/docs/src/components/Button/Outlined.tsx
@@ -1,5 +1,6 @@
-import {Button, ThemeProvider, ThemeType} from 'dooboo-ui';
+import {ThemeProvider, ThemeType} from '@dooboo-ui/theme';
 
+import {Button} from 'dooboo-ui';
 import type {FC} from 'react';
 import React from 'react';
 import {View} from 'react-native';

diff --git a/docs/src/components/Button/Sizes.tsx b/docs/src/components/Button/Sizes.tsx
@@ -1,5 +1,6 @@
-import {Button, ThemeProvider, ThemeType} from 'dooboo-ui';
+import {ThemeProvider, ThemeType} from '@dooboo-ui/theme';
 
+import {Button} from 'dooboo-ui';
 import type {FC} from 'react';
 import React from 'react';
 import {View} from 'react-native';

diff --git a/docs/src/components/Button/Solid.tsx b/docs/src/components/Button/Solid.tsx
@@ -1,5 +1,6 @@
-import {Button, ThemeProvider, ThemeType} from 'dooboo-ui';
+import {ThemeProvider, ThemeType} from '@dooboo-ui/theme';
 
+import {Button} from 'dooboo-ui';
 import type {FC} from 'react';
 import React from 'react';
 import {View} from 'react-native';

diff --git a/docs/src/components/ButtonGroup/ButtonGroup.stories.mdx b/docs/src/components/ButtonGroup/ButtonGroup.stories.mdx
@@ -1,5 +1,6 @@
 import {Meta, Story, Canvas} from '@storybook/addon-docs/blocks';
-import {ThemeProvider} from 'dooboo-ui';
+import {ThemeProvider} from '@dooboo-ui/theme';
+
 import {Light, Dark} from './index';
 
 <Meta title="Components/ButtonGroup" />

diff --git a/docs/src/components/ButtonGroup/index.tsx b/docs/src/components/ButtonGroup/index.tsx
@@ -1,6 +1,7 @@
-import {ButtonGroup, ThemeProvider} from 'dooboo-ui';
 import React, {ReactElement, useState} from 'react';
 
+import {ButtonGroup} from 'dooboo-ui';
+import {ThemeProvider} from '@dooboo-ui/theme';
 import {View} from 'react-native';
 import styled from '@emotion/native';
 

diff --git a/docs/src/components/Checkbox/Basic.tsx b/docs/src/components/Checkbox/Basic.tsx
@@ -1,11 +1,6 @@
-import {
-  Checkbox,
-  LoadingIndicator,
-  ThemeProvider,
-  ThemeType,
-  useTheme,
-} from 'dooboo-ui';
+import {Checkbox, LoadingIndicator, useTheme} from 'dooboo-ui';
 import React, {FC, useState} from 'react';
+import {ThemeProvider, ThemeType} from '@dooboo-ui/theme';
 
 import {View} from 'react-native';
 import {useFonts} from 'expo-font';

diff --git a/docs/src/components/Checkbox/Checkbox.stories.mdx b/docs/src/components/Checkbox/Checkbox.stories.mdx
@@ -1,5 +1,5 @@
 import {Meta, Story, Canvas} from '@storybook/addon-docs/blocks';
-import {ThemeProvider} from 'dooboo-ui';
+import {ThemeProvider} from '@dooboo-ui/theme';
 import {Basic, Solid, Disabled, LeftElement, RightElement} from './index';
 
 <Meta title="Components/Checkbox" />

diff --git a/docs/src/components/Checkbox/Disabled.tsx b/docs/src/components/Checkbox/Disabled.tsx
@@ -1,11 +1,6 @@
-import {
-  Checkbox,
-  LoadingIndicator,
-  ThemeProvider,
-  ThemeType,
-  useTheme,
-} from 'dooboo-ui';
+import {Checkbox, LoadingIndicator} from 'dooboo-ui';
 import React, {FC} from 'react';
+import {ThemeProvider, ThemeType, useTheme} from '@dooboo-ui/theme';
 
 import {View} from 'react-native';
 import {useFonts} from 'expo-font';

diff --git a/docs/src/components/Checkbox/LeftElement.tsx b/docs/src/components/Checkbox/LeftElement.tsx
@@ -1,11 +1,6 @@
-import {
-  Checkbox,
-  LoadingIndicator,
-  ThemeProvider,
-  ThemeType,
-  useTheme,
-} from 'dooboo-ui';
+import {Checkbox, LoadingIndicator} from 'dooboo-ui';
 import React, {FC, useState} from 'react';
+import {ThemeProvider, ThemeType, useTheme} from '@dooboo-ui/theme';
 
 import {View} from 'react-native';
 import styled from '@emotion/native';

diff --git a/docs/src/components/Checkbox/RightElement.tsx b/docs/src/components/Checkbox/RightElement.tsx
@@ -1,11 +1,6 @@
-import {
-  Checkbox,
-  LoadingIndicator,
-  ThemeProvider,
-  ThemeType,
-  useTheme,
-} from 'dooboo-ui';
+import {Checkbox, LoadingIndicator} from 'dooboo-ui';
 import React, {FC, useState} from 'react';
+import {ThemeProvider, ThemeType, useTheme} from '@dooboo-ui/theme';
 
 import {View} from 'react-native';
 import styled from '@emotion/native';

diff --git a/docs/src/components/Checkbox/Solid.tsx b/docs/src/components/Checkbox/Solid.tsx
@@ -1,11 +1,6 @@
-import {
-  Checkbox,
-  LoadingIndicator,
-  ThemeProvider,
-  ThemeType,
-  useTheme,
-} from 'dooboo-ui';
+import {Checkbox, LoadingIndicator} from 'dooboo-ui';
 import React, {FC, useState} from 'react';
+import {ThemeProvider, ThemeType, useTheme} from '@dooboo-ui/theme';
 
 import {View} from 'react-native';
 import {useFonts} from 'expo-font';

diff --git a/docs/src/components/FAB/index.tsx b/docs/src/components/FAB/index.tsx
@@ -1,7 +1,8 @@
-import {FAB, ThemeProvider, withTheme} from 'dooboo-ui';
 import {FC, ReactElement, useState} from 'react';
 import {SafeAreaView, View} from 'react-native';
+import {ThemeProvider, withTheme} from '@dooboo-ui/theme';
 
+import {FAB} from 'dooboo-ui';
 import styled from '@emotion/native';
 import {useFonts} from 'expo-font';
 

diff --git a/docs/src/components/Icon/Default.tsx b/docs/src/components/Icon/Default.tsx
@@ -1,4 +1,5 @@
-import {Icon, IconName, ThemeProvider, ThemeType} from 'dooboo-ui';
+import {Icon, IconName} from 'dooboo-ui';
+import {ThemeProvider, ThemeType} from '@dooboo-ui/theme';
 
 import type {FC} from 'react';
 import {View} from 'react-native';

diff --git a/docs/src/components/IconButton/index.tsx b/docs/src/components/IconButton/index.tsx
@@ -1,6 +1,7 @@
-import {ThemeProvider, IconButton, Icon} from 'dooboo-ui';
+import {Icon, IconButton} from 'dooboo-ui';
 import React, {ReactElement} from 'react';
 
+import {ThemeProvider} from '@dooboo-ui/theme';
 import {View} from 'react-native';
 import styled from '@emotion/native';
 import {useFonts} from 'expo-font';

diff --git a/docs/src/components/LoadingIndicator/Basic.tsx b/docs/src/components/LoadingIndicator/Basic.tsx
@@ -1,6 +1,7 @@
-import {LoadingIndicator, ThemeProvider, ThemeType} from 'dooboo-ui';
+import {ThemeProvider, ThemeType} from '@dooboo-ui/theme';
 
 import type {FC} from 'react';
+import {LoadingIndicator} from 'dooboo-ui';
 import styled from '@emotion/native';
 
 const StyledView = styled.View`

diff --git a/docs/src/components/LoadingIndicator/ImageVersion.tsx b/docs/src/components/LoadingIndicator/ImageVersion.tsx
@@ -1,6 +1,8 @@
-import {LoadingIndicator, ThemeProvider, ThemeType, useTheme} from 'dooboo-ui';
-import {IC_GIF} from '../../icon';
+import {ThemeProvider, ThemeType, useTheme} from '@dooboo-ui/theme';
+
 import type {FC} from 'react';
+import {IC_GIF} from '../../icon';
+import {LoadingIndicator} from 'dooboo-ui';
 import {View} from 'react-native';
 
 const ImageComponent: FC = () => {

diff --git a/docs/src/components/LoadingIndicator/LoadingIndicator.stories.mdx b/docs/src/components/LoadingIndicator/LoadingIndicator.stories.mdx
@@ -1,5 +1,5 @@
 import {Meta, Story, Canvas} from '@storybook/addon-docs/blocks';
-import {ThemeProvider} from 'dooboo-ui';
+import {ThemeProvider} from '@dooboo-ui/theme';
 import {Basic, ImageVersion, Link} from './index';
 
 <Meta title="Components/LoadingIndicator" />

diff --git a/docs/src/components/RadioGroup/Basic.tsx b/docs/src/components/RadioGroup/Basic.tsx
@@ -1,5 +1,7 @@
-import {RadioGroup, ThemeProvider, ThemeType, useTheme} from 'dooboo-ui';
 import React, {FC} from 'react';
+import {ThemeProvider, ThemeType, useTheme} from '@dooboo-ui/theme';
+
+import {RadioGroup} from 'dooboo-ui';
 import {View} from 'react-native';
 
 const data = ['one', 'two', 'three', 'four'];

diff --git a/docs/src/components/RadioGroup/Colored.tsx b/docs/src/components/RadioGroup/Colored.tsx
@@ -1,5 +1,7 @@
-import {RadioGroup, ThemeProvider, ThemeType, useTheme} from 'dooboo-ui';
 import React, {FC} from 'react';
+import {ThemeProvider, ThemeType, useTheme} from '@dooboo-ui/theme';
+
+import {RadioGroup} from 'dooboo-ui';
 import {View} from 'react-native';
 
 const data = ['one', 'two', 'three', 'four'];

diff --git a/docs/src/components/RadioGroup/RadioGroup.stories.mdx b/docs/src/components/RadioGroup/RadioGroup.stories.mdx
@@ -1,5 +1,6 @@
 import {Meta, Story, Canvas} from '@storybook/addon-docs/blocks';
-import {ThemeProvider} from 'dooboo-ui';
+import {ThemeProvider} from '@dooboo-ui/theme';
+
 import {
   BasicDemo,
   ColoredDemo,

diff --git a/docs/src/components/RadioGroup/SelectValue.tsx b/docs/src/components/RadioGroup/SelectValue.tsx
@@ -1,5 +1,7 @@
-import {RadioGroup, ThemeProvider, ThemeType, useTheme} from 'dooboo-ui';
 import React, {FC, useState} from 'react';
+import {ThemeProvider, ThemeType, useTheme} from '@dooboo-ui/theme';
+
+import {RadioGroup} from 'dooboo-ui';
 import {View} from 'react-native';
 
 const data = ['one', 'two', 'three', 'four'];

diff --git a/docs/src/components/RadioGroup/WithLabels.tsx b/docs/src/components/RadioGroup/WithLabels.tsx
@@ -1,5 +1,7 @@
-import {RadioGroup, ThemeProvider, ThemeType, useTheme} from 'dooboo-ui';
 import React, {FC} from 'react';
+import {ThemeProvider, ThemeType, useTheme} from '@dooboo-ui/theme';
+
+import {RadioGroup} from 'dooboo-ui';
 import {View} from 'react-native';
 
 const data = ['one', 'two', 'three', 'four'];

diff --git a/docs/src/components/RadioGroup/WithTitle.tsx b/docs/src/components/RadioGroup/WithTitle.tsx
@@ -1,5 +1,7 @@
-import {RadioGroup, ThemeProvider, ThemeType, useTheme} from 'dooboo-ui';
 import React, {FC} from 'react';
+import {ThemeProvider, ThemeType, useTheme} from '@dooboo-ui/theme';
+
+import {RadioGroup} from 'dooboo-ui';
 import {View} from 'react-native';
 
 const data = ['one', 'two', 'three', 'four'];

diff --git a/docs/src/components/SelectBox/Animation.tsx b/docs/src/components/SelectBox/Animation.tsx
@@ -1,7 +1,8 @@
 import React, {useState} from 'react';
-import {SelectBox, ThemeProvider, ThemeType, useTheme} from 'dooboo-ui';
+import {ThemeProvider, ThemeType, useTheme} from '@dooboo-ui/theme';
 
 import type {FC} from 'react';
+import {SelectBox} from 'dooboo-ui';
 import {View} from 'react-native';
 import styled from '@emotion/native';
 import {useFonts} from 'expo-font';

diff --git a/docs/src/components/SelectBox/Disabled.tsx b/docs/src/components/SelectBox/Disabled.tsx
@@ -1,7 +1,8 @@
 import React, {useState} from 'react';
-import {SelectBox, ThemeProvider, ThemeType, useTheme} from 'dooboo-ui';
+import {ThemeProvider, ThemeType, useTheme} from '@dooboo-ui/theme';
 
 import type {FC} from 'react';
+import {SelectBox} from 'dooboo-ui';
 import {View} from 'react-native';
 import styled from '@emotion/native';
 import {useFonts} from 'expo-font';

diff --git a/docs/src/components/SelectBox/SelectBox.stories.mdx b/docs/src/components/SelectBox/SelectBox.stories.mdx
@@ -1,5 +1,6 @@
 import {Meta, Story, Canvas} from '@storybook/addon-docs/blocks';
-import {ThemeProvider} from 'dooboo-ui';
+import {ThemeProvider} from '@dooboo-ui/theme';
+
 import {Basic} from './index.tsx';
 import {Disabled} from './Disabled.tsx';
 import {Animation} from './Animation.tsx';

diff --git a/docs/src/components/SelectBox/Styled.tsx b/docs/src/components/SelectBox/Styled.tsx
@@ -1,7 +1,8 @@
 import React, {useState} from 'react';
-import {SelectBox, ThemeProvider, ThemeType, useTheme} from 'dooboo-ui';
+import {ThemeProvider, ThemeType, useTheme} from '@dooboo-ui/theme';
 
 import type {FC} from 'react';
+import {SelectBox} from 'dooboo-ui';
 import {View} from 'react-native';
 import styled from '@emotion/native';
 import {useFonts} from 'expo-font';

diff --git a/docs/src/components/SwitchToggle/Basic.tsx b/docs/src/components/SwitchToggle/Basic.tsx
@@ -1,5 +1,6 @@
 import {FC, useState} from 'react';
-import {SwitchToggle, ThemeProvider, ThemeType, Typography} from 'dooboo-ui';
+import {SwitchToggle, Typography} from 'dooboo-ui';
+import {ThemeProvider, ThemeType} from '@dooboo-ui/theme';
 
 import {View} from 'react-native';
 

diff --git a/docs/src/styled.d.ts b/docs/src/styled.d.ts
@@ -1,5 +1,5 @@
 import '@emotion/react';
-import type {DoobooTheme} from 'dooboo-ui';
+import type {DoobooTheme} from '@dooboo-ui/theme';
 
 declare module '@emotion/react' {
   export interface Theme extends DoobooTheme {}

diff --git a/jest.config.js b/jest.config.js
@@ -14,13 +14,7 @@ module.exports = {
   testMatch: ['**/__tests__/**/*.ts?(x)', '**/?(*.)+(spec|test).ts?(x)'],
   moduleFileExtensions: ['js', 'ts', 'tsx', 'svg', 'png', 'json'],
   globals: {
-    'ts-jest': {
-      babelConfig: true,
-      tsconfig: {
-        jsx: 'react',
-      },
-      diagnostics: false,
-    },
+    'ts-jest': {tsconfig: 'tsconfig.spec.json'},
   },
   modulePathIgnorePatterns: [
     '<rootDir>/server/',
@@ -41,7 +35,7 @@ module.exports = {
   },
   transformIgnorePatterns: [
     // eslint-disable-next-line max-len
-    'node_modules/(?!(jest-)?react-native|react-clone-referenced-element|@react-native-community|expo(nent)?|@expo(nent)?/.*|react-navigation|@react-navigation/.*|@unimodules/.*|unimodules|sentry-expo|native-base|@sentry/.*)',
+    'node_modules/(?!(jest-)?react-native|react-clone-referenced-element|@react-native-community|expo(nent)?|@expo(nent)?/.*|react-navigation|@react-navigation/.*|@unimodules/.*|unimodules|sentry-expo|native-base|@sentry/.*|dooboo-ui|@dooboo-ui)',
   ],
   coveragePathIgnorePatterns: [
     '.example.',