fix: color management (#2)

## Description

Major Update:
	•	Enhanced the color system for easier updates.
• Updated stories to reflect how changes to existing color variables are
applied to components.

Bug Fix:
• Resolved an issue where button loading colors were not being properly
injected.

## Test Plan

See included stories in `Button` and `Typography` with `Custom` prefix.

## Tests

N/A

## Checklist

Before you create this PR confirms that it meets all requirements listed
below by checking the relevant checkboxes (`[x]`). This will ensure a
smooth and quick review process.

- [x] I read the [Contributor
Guide](https://github.com/crossplatformkorea/cpk-ui/blob/main/CONTRIBUTING.md)
and followed the process outlined there for submitting PRs.
- [x] Run `yarn test:all` and make sure nothing fails.
- [x] I am willing to follow-up on review comments in a timely manner.

.github/PULL_REQUEST_TEMPLATE.md

@@ -16,12 +16,12 @@ resolved or fixed by this PR._
 I added the following tests:
 
 _Replace this with a list of the tests that you added as part of this PR. A change in behavior with no test covering it
-will likely get reverted accidentally sooner or later. PRs must include tests for all changed/updated/fixed behaviors. See [Test Coverage](https://codecov.io/gh/crossplatformkorea/CPK-UI)._
+will likely get reverted accidentally sooner or later. PRs must include tests for all changed/updated/fixed behaviors. See [Test Coverage](https://codecov.io/gh/crossplatformkorea/cpk-ui)._
 
 ## Checklist
 
 Before you create this PR confirms that it meets all requirements listed below by checking the relevant checkboxes (`[x]`). This will ensure a smooth and quick review process.
 
-- [ ] I read the [Contributor Guide](https://github.com/crossplatformkorea/CPK-UI/blob/main/CONTRIBUTING.md) and followed the process outlined there for submitting PRs.
+- [ ] I read the [Contributor Guide](https://github.com/crossplatformkorea/cpk-ui/blob/main/CONTRIBUTING.md) and followed the process outlined there for submitting PRs.
 - [ ] Run `yarn test:all` and make sure nothing fails.
 - [ ] I am willing to follow-up on review comments in a timely manner.

.storybook/decorators.tsx

@@ -4,18 +4,20 @@ import {ThemeProvider} from '../src/providers/ThemeProvider';
 import {dark, light} from '../src/utils/colors';
 import styled from '@emotion/native';
 import {CpkProvider} from '../src/providers';
+import {ThemeParam} from '../src/utils/theme';
 
-export const withThemeProvider = (Story: React.FC, context: any) => {
+export const withThemeProvider = (
+  Story: React.FC,
+  context: any,
+  customTheme?: ThemeParam,
+) => {
   const isDarkMode = context.globals.theme === 'dark';
 
   return (
     <CpkProvider
       themeConfig={{
         initialThemeType: isDarkMode ? 'dark' : 'light',
-        customTheme: {
-          light,
-          dark,
-        },
+        customTheme,
       }}
     >
       <Container>

CHANGELOGS.md

@@ -1,3 +1,3 @@
 ## Changelogs
 
-Covered in [release notes](https://github.com/crossplatformkorea/CPK-UI/releases).
+Covered in [release notes](https://github.com/crossplatformkorea/cpk-ui/releases).

CONTRIBUTING.md

@@ -12,9 +12,9 @@
 
 ### Things to Keep in Mind
 
-> Only components in the `main` directory are published to `npm`. These are the components intended for production use.  
-> When creating new components, please ensure you write `test code` for them.  
-> Add `stories` in the `storybook` directory to showcase components. Users can easily see a [demo](https://ui.crossplatformkorea.com) of all components at a glance.  
+> Only components in the `main` directory are published to `npm`. These are the components intended for production use.
+> When creating new components, please ensure you write `test code` for them.
+> Add stories to the same directory (e.g., component.stories.tsx) to showcase components. This allows users to easily view a demo of all components at a glance.
 
 ## How to Contribute
 
@@ -24,7 +24,7 @@
 
    - It is recommended to keep the `main` branch of your fork updated with the upstream repository.
    - Configure [Syncing a Fork](https://help.github.com/articles/configuring-a-remote-for-a-fork/):
-     - `git remote add upstream https://github.com/crossplatformkorea/CPK-UI`
+     - `git remote add upstream https://github.com/crossplatformkorea/cpk-ui`
      - Verify with `git remote -v`
    - Fetch branches from the upstream repository: `git fetch upstream`
    - Create a new branch before submitting a PR: `git checkout -b [feature_name]`
@@ -33,7 +33,7 @@
 
 2. Clone your forked repository:
    ```
-   git clone https://github.com/<your-github-username>/CPK-UI.git
+   git clone https://github.com/<your-github-username>/cpk-ui.git
    ```
 3. Install dependencies:
    ```

README.md

@@ -1,4 +1,4 @@
-# CPK-UI
+# cpk-ui
 
 React Native UI components for [Expo](https://expo.dev).
 

app.config.ts

@@ -2,10 +2,10 @@ export default {
   expo: {
     plugins: [['expo-font', {fonts: ['main/uis/Icon/*']}]],
     experiments: {
-      baseUrl: '/CPK-UI',
+      baseUrl: '/cpk-ui',
     },
-    name: 'CPK-UI',
-    slug: 'CPK-UI',
+    name: 'cpk-ui',
+    slug: 'cpk-ui',
     privacy: 'public',
     platforms: ['ios', 'android', 'web'],
     orientation: 'default',

lib/package.json

@@ -13,9 +13,9 @@
     "publish:next": "npm publish <package>.tgz --tag next"
   },
   "bugs": {
-    "url": "https://github.com/crossplatformkorea/CPK-UI/issues"
+    "url": "https://github.com/crossplatformkorea/cpk-ui/issues"
   },
-  "homepage": "https://github.com/crossplatformkorea/CPK-UI#readme",
+  "homepage": "https://github.com/crossplatformkorea/cpk-ui#readme",
   "peerDependencies": {
     "@emotion/native": ">=11.0.0",
     "@emotion/react": ">=11.0.0",

src/components/uis/Button/Button.stories.tsx

@@ -5,6 +5,7 @@ import {withThemeProvider} from '../../../../.storybook/decorators';
 
 import type {ButtonColorType, ButtonSizeType, ButtonType} from './Button';
 import {Button} from './Button';
+import {ThemeParam} from '../../../utils/theme';
 
 const buttonTypes: ButtonType[] = ['outlined', 'solid', 'text'];
 const buttonSizes: ButtonSizeType[] = ['large', 'medium', 'small'];
@@ -43,7 +44,15 @@ const meta = {
       options: buttonSizes,
     },
   },
-  decorators: [withThemeProvider],
+  decorators: [
+    (Story, context) =>
+      withThemeProvider(
+        Story,
+        context,
+        // @ts-ignore
+        context.args.theme,
+      ),
+  ],
 } satisfies Meta<typeof Button>;
 
 export default meta;
@@ -79,3 +88,54 @@ export const Danger: Story = {
     onPress: action('onPress'),
   },
 };
+
+const disableAllExcept = (allowedField: string) => {
+  const argTypes = {
+    text: {table: {disable: true}},
+    type: {table: {disable: true}},
+    color: {table: {disable: true}},
+    size: {table: {disable: true}},
+    onPress: {table: {disable: true}},
+    testID: {table: {disable: true}},
+    disabled: {table: {disable: true}},
+    loadingElement: {table: {disable: true}},
+    borderRadius: {table: {disable: true}},
+    startElement: {table: {disable: true}},
+    endElement: {table: {disable: true}},
+    activeOpacity: {table: {disable: true}},
+    touchableHighlightProps: {table: {disable: true}},
+    hitSlop: {table: {disable: true}},
+    theme: {control: 'object'},
+  };
+
+  if (argTypes[allowedField]) {
+    argTypes[allowedField] = {table: {disable: false}};
+  }
+
+  return argTypes;
+};
+
+export const CustomColor: Story = {
+  args: {
+    // @ts-ignore
+    theme: {
+      light: {
+        button: {
+          primary: {
+            bg: 'red',
+            text: 'white',
+          },
+        },
+      },
+      dark: {
+        button: {
+          primary: {
+            bg: 'pink',
+            text: 'red',
+          },
+        },
+      },
+    } as ThemeParam,
+  },
+  argTypes: disableAllExcept('theme'),
+};

src/components/uis/Button/Button.tsx

@@ -236,9 +236,11 @@ export function Button({
   const LoadingView = loadingElement ?? (
     <LoadingIndicator
       color={
-        loadingColor || type === 'solid'
-          ? theme.text.contrast
-          : theme.text.basic
+        loadingColor
+          ? loadingColor
+          : type === 'solid'
+            ? theme.text.contrast
+            : theme.text.basic
       }
       size="small"
     />
@@ -285,13 +287,11 @@ export function Button({
     ],
   );
 
-  function resolveStyle<T>(
-    style: StyleProp<T>
-  ): T | undefined {
+  function resolveStyle<T>(style: StyleProp<T>): T | undefined {
     if (Array.isArray(style)) {
       return style.find((s): s is T => !!s);
     }
-    return style as T || undefined;
+    return (style as T) || undefined;
   }
 
   const viewStyle = resolveStyle<ViewStyle>(compositeStyles.container);

src/components/uis/Typography/Typography.stories.tsx

@@ -0,0 +1,58 @@
+import type {Meta, StoryObj} from '@storybook/react';
+import {Typography} from './Typography';
+import {withThemeProvider} from '../../../../.storybook/decorators';
+import {ScrollView, View} from 'react-native';
+import {ThemeParam} from '../../../utils/theme';
+
+const meta = {
+  title: 'Typography',
+  component: Typography.Title,
+  decorators: [
+    (Story, context) =>
+      withThemeProvider(
+        Story,
+        context,
+        (context.args.theme as any) || undefined,
+      ),
+  ],
+} satisfies Meta<typeof Typography.Title>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const AllTypography: Story = {
+  render: (args) => (
+    <ScrollView contentContainerStyle={{padding: 16}}>
+      {Object.entries(Typography).map(([key, Component]) => (
+        <View key={key} style={{marginBottom: 16}}>
+          <Component {...args}>
+            {key} {args.children}
+          </Component>
+        </View>
+      ))}
+    </ScrollView>
+  ),
+  args: {
+    children: 'Hello world',
+  },
+};
+
+export const CustomTitle: Story = {
+  args: {
+    children: 'Custom Color',
+    // @ts-ignore
+    theme: {
+      light: {
+        text: {
+          basic: 'blue',
+        },
+      },
+      dark: {
+        text: {
+          basic: 'skyblue',
+        },
+      },
+    } as ThemeParam,
+  },
+};