@audira/carbon-react-native 0.0.1-alpha.1

package/src/contexts/theme/context.ts

@@ -0,0 +1,26 @@
+import {
+	createContext,
+} from 'react'
+
+import {
+	ColorSchemeGlobal,
+} from '../../globals'
+
+import {
+	ColorHelper,
+} from '../../helpers'
+
+import type {
+	ThemeType,
+} from '../../types'
+
+export interface ThemeContext {
+	colorScheme: ThemeType.ColorScheme,
+	color: Record<ThemeType.ColorToken, string>,
+}
+
+export const ThemeContext =
+	createContext<ThemeContext>({
+		colorScheme: ColorSchemeGlobal.get(),
+		color: ColorHelper.getColorToken(ColorSchemeGlobal.get()),
+	})

package/src/contexts/theme/index.tsx

@@ -0,0 +1,5 @@
+export * from './context'
+
+export type {
+	ThemeContextProviderProps,
+} from './provider'

package/src/contexts/theme/provider.tsx

@@ -0,0 +1,55 @@
+import {
+	useColorScheme,
+} from 'react-native'
+
+import {
+	ColorHelper,
+} from '../../helpers'
+
+import {
+	ColorSchemeGlobal,
+} from '../../globals'
+
+import {
+	ThemeContext,
+} from './context'
+
+export interface ThemeContextProviderProps {
+	colorScheme?: ThemeContext['colorScheme'],
+	/**
+	 * You can override all color by your own. `colorScheme` probably means nothing due to this prop.  
+	 */
+	overrideColor?: Partial<ThemeContext['color']>,
+	children?: React.ReactNode,
+}
+
+export function ThemeContextProvider({
+	colorScheme: colorSchemeProp,
+	overrideColor,
+	children,
+}: ThemeContextProviderProps): React.JSX.Element {
+
+	const
+		colorSchemeUse =
+			useColorScheme(),
+
+		colorScheme =
+			colorSchemeProp ?? ColorHelper.getColorScheme(colorSchemeUse)
+
+	ColorSchemeGlobal.set(colorScheme)
+
+	return (
+		<ThemeContext.Provider
+			value={{
+				colorScheme,
+				color: {
+					...ColorHelper.getColorToken(colorScheme),
+					...overrideColor,
+				},
+			}}
+		>
+			{ children }
+		</ThemeContext.Provider>
+	)
+
+}

package/src/globals/color-scheme/index.ts

@@ -0,0 +1,13 @@
+import {
+	ColorHelper,
+} from '../../helpers'
+
+let colorScheme = ColorHelper.getColorScheme()
+
+export function get() {
+	return colorScheme
+}
+
+export function set(scheme: typeof colorScheme) {
+	colorScheme = scheme
+}

package/src/globals/index.ts

@@ -0,0 +1,5 @@
+import * as ColorSchemeGlobal from './color-scheme'
+
+export {
+	ColorSchemeGlobal,
+}

package/src/helpers/color/get-color-scheme.ts

@@ -0,0 +1,19 @@
+import {
+	Appearance,
+	type ColorSchemeName,
+} from 'react-native'
+
+import type * as ThemeType from '../../types/theme'
+
+export function getColorScheme(
+	appearanceColorScheme?: ColorSchemeName,
+): ThemeType.ColorScheme {
+	return mapScheme[ appearanceColorScheme || Appearance.getColorScheme() || 'light' ]
+}
+
+const
+	mapScheme: Record<Extract<ColorSchemeName, string>, ThemeType.ColorScheme> =
+		{
+			light: 'gray_10',
+			dark: 'gray_100',
+		}

package/src/helpers/color/get-color-token.ts

@@ -0,0 +1,14 @@
+import type {
+	ThemeType,
+} from '../../types'
+
+export function getColorToken(
+	colorScheme: ThemeType.ColorScheme,
+) {
+	return mapSchemeToColorToken[ colorScheme ]()
+}
+
+const mapSchemeToColorToken: Record<ThemeType.ColorScheme, () => Record<ThemeType.ColorToken, string>> = {
+	gray_10: () => (require('../../constants/color/tokens/gray-10') as { gray_10: Record<ThemeType.ColorToken, string> }).gray_10,
+	gray_100: () => (require('../../constants/color/tokens/gray-100') as { gray_100: Record<ThemeType.ColorToken, string> }).gray_100,
+}

package/src/helpers/color/hex-to-rgba.ts

@@ -0,0 +1,11 @@
+export function hexToRgba(
+	hexCode: string,
+	opacity: string,
+): string {
+	const values = [
+		hexCode.substring(1, 3),
+		hexCode.substring(3, 5),
+		hexCode.substring(5, 7),
+	].map((string) => parseInt(string, 16))
+	return `rgba(${values[0]},${values[1]},${values[2]},${opacity})`
+}

package/src/helpers/color/index.ts

@@ -0,0 +1,3 @@
+export * from './get-color-scheme'
+export * from './get-color-token'
+export * from './hex-to-rgba'

package/src/helpers/index.ts

@@ -0,0 +1,5 @@
+import * as ColorHelper from './color'
+
+export {
+	ColorHelper,
+}

package/src/index.tsx

@@ -0,0 +1,9 @@
+export * from './_carbon-react-native'
+export * from './_style-sheet'
+
+export * from './components'
+export * from './contexts'
+export * from './constants'
+export * from './helpers'
+export * from './styles'
+export * from './types'

package/src/styles/common.ts

@@ -0,0 +1,21 @@
+import {
+	StyleSheet,
+} from 'react-native'
+
+export const CommonStyle = StyleSheet.create({
+	w_full: {
+		width: '100%',
+	},
+	h_full: {
+		height: '100%',
+	},
+	overflow_hidden: {
+		overflow: 'hidden',
+	},
+	absolute: {
+		position: 'absolute',
+	},
+	relative: {
+		position: 'relative',
+	},
+})

package/src/styles/flex.ts

@@ -0,0 +1,78 @@
+import {
+	StyleSheet,
+} from 'react-native'
+
+export const FlexStyle = StyleSheet.create({
+	flex_1: {
+		flexGrow: 1,
+		flexShrink: 1,
+		flexBasis: 0,
+	},
+	flex_auto: {
+		flexGrow: 1,
+		flexShrink: 1,
+		flexBasis: 'auto',
+	},
+	flex_initial: {
+		flexGrow: 0,
+		flexShrink: 1,
+		flexBasis: 'auto',
+	},
+	flex_col: {
+		flexDirection: 'column',
+	},
+	flex_row: {
+		flexDirection: 'row',
+	},
+	flex_wrap: {
+		flexWrap: 'wrap',
+	},
+	flex_wrap_reverse: {
+		flexWrap: 'wrap-reverse',
+	},
+	flex_nowrap: {
+		flexWrap: 'nowrap',
+	},
+	items_start: {
+		alignItems: 'flex-start',
+	},
+	items_center: {
+		alignItems: 'center',
+	},
+	items_end: {
+		alignItems: 'flex-end',
+	},
+	content_start: {
+		alignContent: 'flex-start',
+	},
+	content_center: {
+		alignContent: 'center',
+	},
+	content_end: {
+		alignContent: 'flex-end',
+	},
+	justify_start: {
+		justifyContent: 'flex-start',
+	},
+	justify_center: {
+		justifyContent: 'center',
+	},
+	justify_between: {
+		justifyContent: 'space-between',
+	},
+	justify_end: {
+		justifyContent: 'flex-end',
+	},
+	self_start: {
+		alignSelf: 'flex-start',
+	},
+	self_center: {
+		alignSelf: 'center',
+	},
+	self_end: {
+		alignSelf: 'flex-end',
+	},
+	self_stretch: {
+		alignSelf: 'stretch',
+	},
+})

package/src/styles/index.ts

@@ -0,0 +1,3 @@
+export * from './common'
+export * from './flex'
+export * from './text'

package/src/styles/text.ts

@@ -0,0 +1,66 @@
+import {
+	StyleSheet,
+} from 'react-native'
+
+import {
+	FontFamily,
+} from '../constants/typography/font-family'
+
+export const TextStyle = StyleSheet.create({
+	thin: {
+		fontWeight: 100,
+		fontFamily: FontFamily.thin,
+	},
+	thin_italic: {
+		fontWeight: 100,
+		fontFamily: FontFamily.thin_italic,
+	},
+	extralight: {
+		fontWeight: 200,
+		fontFamily: FontFamily.extralight,
+	},
+	extralight_italic: {
+		fontWeight: 200,
+		fontFamily: FontFamily.extralight_italic,
+	},
+	light: {
+		fontWeight: 300,
+		fontFamily: FontFamily.light,
+	},
+	light_italic: {
+		fontWeight: 300,
+		fontFamily: FontFamily.light_italic,
+	},
+	normal: {
+		fontWeight: 400,
+		fontFamily: FontFamily.normal,
+	},
+	normal_italic: {
+		fontWeight: 400,
+		fontFamily: FontFamily.normal_italic,
+	},
+	medium: {
+		fontWeight: 500,
+		fontFamily: FontFamily.medium,
+	},
+	medium_italic: {
+		fontWeight: 500,
+		fontFamily: FontFamily.medium_italic,
+	},
+	semibold: {
+		fontWeight: 600,
+		fontFamily: FontFamily.semibold,
+	},
+	semibold_italic: {
+		fontWeight: 600,
+		fontFamily: FontFamily.semibold_italic,
+	},
+	bold: {
+		fontWeight: 700,
+		fontFamily: FontFamily.bold,
+	},
+	bold_italic: {
+		fontWeight: 700,
+		fontFamily: FontFamily.bold_italic,
+	},
+})

package/src/types/@carbon/icons/index.d.ts

@@ -0,0 +1 @@
+declare module '@carbon/icons*'

package/src/types/index.ts

@@ -0,0 +1,9 @@
+import type * as SharedType from './shared'
+import type * as ThemeType from './theme'
+import type * as TypographyType from './typography'
+
+export type {
+	SharedType,
+	ThemeType,
+	TypographyType,
+}

package/src/types/shared.ts

@@ -0,0 +1 @@
+export type CarbonIcon = unknown

package/src/types/theme/color-scheme.ts

@@ -0,0 +1 @@
+export type ColorScheme = 'gray_10' | 'gray_100'

package/src/types/theme/color-token.ts

@@ -0,0 +1,170 @@
+export type ColorToken =
+	| 'background'
+	| 'background_hover'
+	| 'background_active'
+	| 'background_selected'
+	| 'background_selected_hover'
+	| 'background_inverse'
+	| 'background_inverse_hover'
+	| 'background_brand'
+	| 'layer_01'
+	| 'layer_02'
+	| 'layer_03'
+	| 'layer_hover_01'
+	| 'layer_hover_02'
+	| 'layer_hover_03'
+	| 'layer_active_01'
+	| 'layer_active_02'
+	| 'layer_active_03'
+	| 'layer_selected_01'
+	| 'layer_selected_02'
+	| 'layer_selected_03'
+	| 'layer_selected_hover_01'
+	| 'layer_selected_hover_02'
+	| 'layer_selected_hover_03'
+	| 'layer_selected_inverse'
+	| 'layer_selected_disabled'
+	| 'layer_accent_01'
+	| 'layer_accent_02'
+	| 'layer_accent_03'
+	| 'layer_accent_hover_01'
+	| 'layer_accent_hover_02'
+	| 'layer_accent_hover_03'
+	| 'layer_accent_active_01'
+	| 'layer_accent_active_02'
+	| 'layer_accent_active_03'
+	| 'field_01'
+	| 'field_02'
+	| 'field_03'
+	| 'field_hover_01'
+	| 'field_hover_02'
+	| 'field_hover_03'
+	| 'border_interactive'
+	| 'border_subtle_00'
+	| 'border_subtle_01'
+	| 'border_subtle_02'
+	| 'border_subtle_03'
+	| 'border_subtle_selected_01'
+	| 'border_subtle_selected_02'
+	| 'border_subtle_selected_03'
+	| 'border_strong_01'
+	| 'border_strong_02'
+	| 'border_strong_03'
+	| 'border_tile_01'
+	| 'border_tile_02'
+	| 'border_tile_03'
+	| 'border_inverse'
+	| 'border_disabled'
+	| 'text_primary'
+	| 'text_secondary'
+	| 'text_placeholder'
+	| 'text_on_color'
+	| 'text_on_color_disabled'
+	| 'text_helper'
+	| 'text_error'
+	| 'text_inverse'
+	| 'text_disabled'
+	| 'link_primary'
+	| 'link_primary_hover'
+	| 'link_secondary'
+	| 'link_inverse'
+	| 'link_inverse_hover'
+	| 'link_inverse_active'
+	| 'link_inverse_visited'
+	| 'link_visited'
+	| 'icon_primary'
+	| 'icon_secondary'
+	| 'icon_on_color'
+	| 'icon_on_color_disabled'
+	| 'icon_interactive'
+	| 'icon_inverse'
+	| 'icon_disabled'
+	| 'support_error'
+	| 'support_success'
+	| 'support_warning'
+	| 'support_info'
+	| 'support_error_inverse'
+	| 'support_success_inverse'
+	| 'support_warning_inverse'
+	| 'support_info_inverse'
+	| 'support_caution_minor'
+	| 'support_caution_major'
+	| 'support_caution_undefined'
+	| 'focus'
+	| 'focus_inset'
+	| 'focus_inverse'
+	| 'interactive'
+	| 'highlight'
+	| 'toggle_off'
+	| 'overlay'
+	| 'skeleton_element'
+	| 'skeleton_background'
+	| 'button_primary'
+	| 'button_primary_hover'
+	| 'button_primary_active'
+	| 'button_secondary'
+	| 'button_secondary_hover'
+	| 'button_secondary_active'
+	| 'button_tertiary'
+	| 'button_tertiary_hover'
+	| 'button_tertiary_active'
+	| 'button_danger_primary'
+	| 'button_danger_secondary'
+	| 'button_danger_hover'
+	| 'button_danger_active'
+	| 'button_separator'
+	| 'button_disabled'
+	| 'tag_background_gray'
+	| 'tag_color_gray'
+	| 'tag_hover_gray'
+	| 'tag_border_gray'
+	| 'tag_background_cool_gray'
+	| 'tag_color_cool_gray'
+	| 'tag_hover_cool_gray'
+	| 'tag_border_cool_gray'
+	| 'tag_background_warm_gray'
+	| 'tag_color_warm_gray'
+	| 'tag_hover_warm_gray'
+	| 'tag_border_warm_gray'
+	| 'tag_background_red'
+	| 'tag_color_red'
+	| 'tag_hover_red'
+	| 'tag_border_red'
+	| 'tag_background_magenta'
+	| 'tag_color_magenta'
+	| 'tag_hover_magenta'
+	| 'tag_border_magenta'
+	| 'tag_background_purple'
+	| 'tag_color_purple'
+	| 'tag_hover_purple'
+	| 'tag_border_purple'
+	| 'tag_background_blue'
+	| 'tag_color_blue'
+	| 'tag_hover_blue'
+	| 'tag_border_blue'
+	| 'tag_background_cyan'
+	| 'tag_color_cyan'
+	| 'tag_hover_cyan'
+	| 'tag_border_cyan'
+	| 'tag_background_teal'
+	| 'tag_color_teal'
+	| 'tag_hover_teal'
+	| 'tag_border_teal'
+	| 'tag_background_green'
+	| 'tag_color_green'
+	| 'tag_hover_green'
+	| 'tag_border_green'
+	| 'notification_info_background'
+	| 'notification_info_border'
+	| 'notification_error_background'
+	| 'notification_error_border'
+	| 'notification_success_background'
+	| 'notification_success_border'
+	| 'notification_warning_background'
+	| 'notification_warning_border'
+	| 'notification_action_hover'
+	| 'notification_action_tertiary_inverse'
+	| 'notification_action_tertiary_inverse_active'
+	| 'notification_action_tertiary_inverse_hover'
+	| 'notification_action_tertiary_inverse_text'
+	| 'notification_action_tertiary_inverse_text_on_color_disabled'

package/src/types/theme/index.ts

@@ -0,0 +1,2 @@
+export type * from './color-scheme'
+export type * from './color-token'

package/src/types/typography.ts

@@ -0,0 +1,36 @@
+import type {
+	TextStyle,
+} from 'react-native'
+
+export type TypeSetsClass =
+	| 'code_01'
+	| 'code_02'
+	| 'label_01'
+	| 'label_02'
+	| 'helper_text_01'
+	| 'helper_text_02'
+	| 'legal_01'
+	| 'legal_02'
+	| 'body_compact_01'
+	| 'body_compact_02'
+	| 'body_01'
+	| 'body_02'
+	| 'heading_compact_01'
+	| 'heading_compact_02'
+	| 'heading_01'
+	| 'heading_02'
+	| 'heading_03'
+	| 'heading_04'
+	| 'heading_05'
+	| 'heading_06'
+	| 'heading_07'
+
+export interface TypeSetsStyle {
+	fontSize: number,
+	lineHeight: number,
+	fontWeight: Extract<NonNullable<TextStyle['fontWeight']>, number>
+	letterSpacing: number,
+}
+
+export interface TypeSets extends Record<TypeSetsClass, TypeSetsStyle> {
+}