[Feature] Component Implementation - Button

packages/components/.storybook/native/storybook.requires.js

@@ -54,6 +54,7 @@ try {
 
 const getStories = () => {
   return {
+    "./src/components/Button/Button.stories.tsx": require("../../src/components/Button/Button.stories.tsx"),
     "./src/components/SegmentedControl/SegmentedControl.stories.tsx": require("../../src/components/SegmentedControl/SegmentedControl.stories.tsx"),
   };
 };

packages/components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@department-of-veterans-affairs/mobile-component-library",
-  "version": "0.1.0",
+  "version": "0.1.1-alpha.15",
   "description": "VA Design System Mobile Component Library",
   "main": "src/index.tsx",
   "scripts": {
@@ -39,11 +39,10 @@
   },
   "homepage": "https://department-of-veterans-affairs.github.io/va-mobile-library",
   "dependencies": {
-    "@department-of-veterans-affairs/mobile-tokens": "0.0.10",
+    "@department-of-veterans-affairs/mobile-tokens": "0.2.0",
     "@os-team/i18next-react-native-language-detector": "^1.0.28",
     "i18next": "^23.4.3",
     "react-i18next": "^13.0.3",
-    "storybook-dark-mode": "^3.0.1",
     "styled-components": "^6.0.7"
   },
   "peerDependencies": {
@@ -63,6 +62,7 @@
     "@react-native-community/slider": "^4.4.2",
     "@storybook/addon-actions": "^6.5.16",
     "@storybook/addon-controls": "^6.5.16",
+    "@storybook/addon-docs": "^6.5.16",
     "@storybook/addon-essentials": "^6.5.16",
     "@storybook/addon-links": "^6.5.16",
     "@storybook/addon-ondevice-actions": "^6.5.4",
@@ -101,6 +101,7 @@
     "react-native-web": "~0.19.6",
     "react-test-renderer": "^18.2.0",
     "storybook-addon-designs": "^6.3.1",
+    "storybook-dark-mode": "^3.0.1",
     "ts-jest": "^29.1.1",
     "typescript": "^5.1.6"
   },

packages/components/src/App.tsx

@@ -1,22 +1,42 @@
 import * as SplashScreen from 'expo-splash-screen'
+import { ColorSchemeName, View } from 'react-native'
 import { I18nextProvider } from 'react-i18next'
-import { View } from 'react-native'
 import { registerRootComponent } from 'expo'
 import { useFonts } from 'expo-font'
-import React, { useCallback } from 'react'
+import React, { useCallback, useSyncExternalStore } from 'react'
 
 import StorybookUI from '../.storybook/native'
 import i18n from './utils/translation/i18n'
 
 SplashScreen.preventAutoHideAsync()
 
+/** Function to initiate Expo/Storybook running of components package */
 export const initiateExpo = (expoApp: typeof App) => {
   // registerRootComponent calls AppRegistry.registerComponent('main', () => App);
   // It also ensures that whether you load the app in Expo Go or in a native build,
   // the environment is set up appropriately
   registerRootComponent(expoApp)
 }
 
+/** Function to initialize listening to light/dark mode toggle in Web Storybook to set color scheme */
+export const webStorybookColorScheme = () => {
+  // Mimics RN useColorScheme hook, but listens to the parent body's class ('light'/'dark' from storybook-dark-mode)
+  return useSyncExternalStore(
+    (callback) => {
+      window.parent.addEventListener('click', callback)
+      return () => window.parent.removeEventListener('click', callback)
+    },
+    (): ColorSchemeName => {
+      const colorScheme = window.parent.document.body.className
+      if (colorScheme !== 'light' && colorScheme !== 'dark') {
+        return null
+      }
+
+      return colorScheme
+    }
+  )
+}
+
 const App = () => {
   // Loads in custom fonts async
   const [fontsLoaded, fontError] = useFonts({

packages/components/src/components/Button/Button.stories.tsx

@@ -0,0 +1,98 @@
+import { Button, ButtonProps, ButtonVariants } from './Button'
+import { Meta, StoryObj } from '@storybook/react-native'
+import { View } from 'react-native'
+import { generateDocs } from '../../utils/storybook'
+import React from 'react'
+
+const meta: Meta<ButtonProps> = {
+  title: 'Button',
+  component: Button,
+  argTypes: {
+    onPress: {
+      action: 'onPress event',
+    },
+  },
+  parameters: {
+    docs: generateDocs({
+      name: 'Button',
+      docUrl:
+        'https://department-of-veterans-affairs.github.io/va-mobile-app/docs/Flagship%20design%20library/Components/Buttons%20and%20Links/VAButton/',
+    }),
+  },
+  decorators: [
+    (Story) => (
+      <View
+        style={{
+          flex: 1,
+          justifyContent: 'center',
+          alignItems: 'center',
+        }}
+      >
+        <Story />
+      </View>
+    ),
+  ],
+}
+
+export default meta
+
+type Story = StoryObj<ButtonProps>
+
+export const Base: Story = {
+  storyName: 'Base',
+  args: {
+    buttonType: ButtonVariants.Base,
+    label: 'Button text',
+    a11yLabel: 'Alternate a11y text',
+    a11yHint: 'Descriptive text about this Button',
+  },
+}
+
+export const BaseSecondary: Story = {
+  storyName: 'Base Secondary',
+  args: {
+    buttonType: ButtonVariants.BaseSecondary,
+    label: 'Button text',
+    a11yLabel: 'Alternate a11y text',
+    a11yHint: 'Descriptive text about this Button',
+  },
+}
+
+export const Destructive: Story = {
+  storyName: 'Destructive',
+  args: {
+    buttonType: ButtonVariants.Destructive,
+    label: 'Button text',
+    a11yLabel: 'Alternate a11y text',
+    a11yHint: 'Descriptive text about this Button',
+  },
+}
+
+export const Primary: Story = {
+  storyName: 'Primary',
+  args: {
+    label: 'Button text',
+    a11yLabel: 'Alternate a11y text',
+    a11yHint: 'Descriptive text about this Button',
+  },
+}
+
+export const Secondary: Story = {
+  storyName: 'Secondary',
+  args: {
+    buttonType: ButtonVariants.Secondary,
+    label: 'Button text',
+    a11yLabel: 'Alternate a11y text',
+    a11yHint: 'Descriptive text about this Button',
+  },
+}
+
+export const White: Story = {
+  storyName: 'White',
+  args: {
+    buttonType: ButtonVariants.White,
+    label: 'Button text',
+    a11yLabel: 'Alternate a11y text',
+    a11yHint: 'Descriptive text about this Button',
+  },
+}