@effijs/templates 0.0.0-stage → 1.0.0-alpha.0

package/platforms/react-native/generators/init/files/ui/theme/scheme/theme.scheme.color.ts

@@ -0,0 +1,139 @@
+import { Decorators } from '@effijs/theme';
+
+export class ColorScheme {
+  @Decorators.ThemeToken()
+  primary!: string;
+
+  @Decorators.ThemeToken()
+  onPrimary!: string;
+
+  @Decorators.ThemeToken()
+  cardWhiteVariant!: string;
+
+  @Decorators.ThemeToken()
+  cardGrayVariant!: string;
+
+  @Decorators.ThemeToken()
+  cardBlockedVariant!: string;
+
+  @Decorators.ThemeToken()
+  primaryContainer!: string;
+
+  @Decorators.ThemeToken()
+  onPrimaryContainer!: string;
+
+  @Decorators.ThemeToken()
+  outlineStrong!: string;
+
+  @Decorators.ThemeToken()
+  surfaceDim!: string;
+
+  @Decorators.ThemeToken()
+  onSurfaceVariantSecondary!: string;
+
+  /*
+  primaryFixed!: string;
+  onPrimaryFixed!: string;
+  primaryFixedDim!: string;
+  onPrimaryFixedVariant!: string;
+  */
+
+  @Decorators.ThemeToken()
+  secondary!: string;
+
+  @Decorators.ThemeToken()
+  onSecondary!: string;
+
+  @Decorators.ThemeToken()
+  tertiary!: string;
+
+  @Decorators.ThemeToken()
+  onTertiary!: string;
+
+  @Decorators.ThemeToken()
+  tertiaryActive!: string;
+
+  @Decorators.ThemeToken()
+  onTertiaryActive!: string;
+
+  /*
+  secondaryContainer!: string;
+  onSecondaryContainer!: string;
+  secondaryFixed!: string;
+  onSecondaryFixed!: string;
+  secondaryFixedDim!: string;
+  onSecondaryFixedVariant!: string;
+
+  tertiaryContainer!: string;
+  onTertiaryContainer!: string;
+  tertiaryFixed!: string;
+  onTertiaryFixed!: string;
+  tertiaryFixedDim!: string;
+  onTertiaryFixedVariant!: string;
+  */
+
+  @Decorators.ThemeToken()
+  error!: string;
+
+  @Decorators.ThemeToken()
+  onError!: string;
+
+  /*
+  errorContainer!: string;
+  onErrorContainer!: string;
+  */
+
+  @Decorators.ThemeToken()
+  background!: string;
+
+  @Decorators.ThemeToken()
+  onBackground!: string;
+
+  @Decorators.ThemeToken()
+  backgroundVariant!: string;
+
+  @Decorators.ThemeToken()
+  backgroundSecondVariant!: string;
+
+  @Decorators.ThemeToken()
+  onBackgroundSecondVariant!: string;
+
+  @Decorators.ThemeToken()
+  onBackgroundVariant!: string;
+
+  @Decorators.ThemeToken()
+  surface!: string;
+
+  /*
+  surfaceBright!: string;
+  surfaceContainerLowest!: string;
+  surfaceContainerLow!: string;
+  surfaceContainer!: string;
+  surfaceContainerHigh!: string;
+  surfaceContainerHighest!: string;
+  */
+
+  @Decorators.ThemeToken()
+  onSurface!: string;
+  @Decorators.ThemeToken()
+  surfaceVariant!: string;
+  @Decorators.ThemeToken()
+  onSurfaceVariant!: string;
+  @Decorators.ThemeToken()
+  outline!: string;
+
+  /*
+  inverseOnSurface!: string;
+  inverseSurface!: string;
+  inversePrimary!: string;
+  shadow!: string;
+  surfaceTint!: string;
+  */
+
+  @Decorators.ThemeToken()
+  outlineVariant!: string;
+
+  /*
+  scrim!: string;
+  */
+}

package/platforms/react-native/generators/init/files/ui/theme/scheme/theme.scheme.radius.ts

@@ -0,0 +1,21 @@
+import { Decorators } from '@effijs/theme';
+
+export class RadiusScheme {
+  @Decorators.ThemeToken()
+  xs!: number;
+
+  @Decorators.ThemeToken()
+  sm!: number;
+
+  @Decorators.ThemeToken()
+  md!: number;
+
+  @Decorators.ThemeToken()
+  lg!: number;
+
+  @Decorators.ThemeToken()
+  xl!: number;
+
+  @Decorators.ThemeToken()
+  full!: number;
+}

package/platforms/react-native/generators/init/files/ui/theme/scheme/theme.scheme.spacing.ts

@@ -0,0 +1,24 @@
+import { Decorators } from '@effijs/theme';
+
+export class SpacingScheme {
+  @Decorators.ThemeToken()
+  xxs!: number;
+
+  @Decorators.ThemeToken()
+  xs!: number;
+
+  @Decorators.ThemeToken()
+  s!: number;
+
+  @Decorators.ThemeToken()
+  m!: number;
+
+  @Decorators.ThemeToken()
+  l!: number;
+
+  @Decorators.ThemeToken()
+  xl!: number;
+
+  @Decorators.ThemeToken()
+  xxl!: number;
+}

package/platforms/react-native/generators/init/files/ui/theme/scheme/theme.scheme.ts

@@ -0,0 +1,25 @@
+import { Decorators } from '@effijs/theme';
+
+import { ColorScheme } from './theme.scheme.color';
+import { RadiusScheme } from './theme.scheme.radius';
+import { SpacingScheme } from './theme.scheme.spacing';
+import { TypographyScheme } from './theme.scheme.typography';
+
+@Decorators.ThemeValidator()
+export class ThemeScheme /*extends UIThemeScheme*/ {
+  @Decorators.ThemeToken()
+  @Decorators.ThemeTokenType(() => SpacingScheme)
+  spacing!: SpacingScheme;
+
+  @Decorators.ThemeToken()
+  @Decorators.ThemeTokenType(() => TypographyScheme)
+  typography!: TypographyScheme;
+
+  @Decorators.ThemeToken()
+  @Decorators.ThemeTokenType(() => ColorScheme)
+  color!: ColorScheme;
+
+  @Decorators.ThemeToken()
+  @Decorators.ThemeTokenType(() => RadiusScheme)
+  radius!: RadiusScheme;
+}

package/platforms/react-native/generators/init/files/ui/theme/scheme/theme.scheme.typography.ts

@@ -0,0 +1,98 @@
+import { Decorators } from '@effijs/theme';
+
+class TypographyData {
+  // @Decorators.ThemeToken()
+  // fontFamily!: string;
+
+  @Decorators.ThemeToken()
+  fontWeight!: string;
+
+  @Decorators.ThemeToken()
+  fontSize!: number;
+
+  @Decorators.ThemeToken()
+  lineHeight!: number;
+
+  @Decorators.ThemeToken()
+  letterSpacing!: number;
+}
+
+class IconData {
+  @Decorators.ThemeToken()
+  fontFamily!: string;
+
+  @Decorators.ThemeToken()
+  fontWeight!: string;
+
+  @Decorators.ThemeToken()
+  fontSize!: number;
+
+  @Decorators.ThemeToken()
+  fontStyle!: string;
+}
+
+export class TypographyScheme {
+  @Decorators.ThemeToken()
+  @Decorators.ThemeTokenType(() => TypographyData)
+  'title-s': TypographyData;
+
+  @Decorators.ThemeToken()
+  @Decorators.ThemeTokenType(() => TypographyData)
+  'title-m': TypographyData;
+
+  @Decorators.ThemeToken()
+  @Decorators.ThemeTokenType(() => TypographyData)
+  'title-l': TypographyData;
+
+  @Decorators.ThemeToken()
+  @Decorators.ThemeTokenType(() => TypographyData)
+  'label-s': TypographyData;
+
+  @Decorators.ThemeToken()
+  @Decorators.ThemeTokenType(() => TypographyData)
+  'label-m': TypographyData;
+
+  @Decorators.ThemeToken()
+  @Decorators.ThemeTokenType(() => TypographyData)
+  'label-l': TypographyData;
+
+  @Decorators.ThemeToken()
+  @Decorators.ThemeTokenType(() => TypographyData)
+  'body-s': TypographyData;
+
+  @Decorators.ThemeToken()
+  @Decorators.ThemeTokenType(() => TypographyData)
+  'body-m': TypographyData;
+
+  @Decorators.ThemeToken()
+  @Decorators.ThemeTokenType(() => TypographyData)
+  'body-l': TypographyData;
+
+  @Decorators.ThemeToken()
+  @Decorators.ThemeTokenType(() => TypographyData)
+  'headline-s': TypographyData;
+
+  @Decorators.ThemeToken()
+  @Decorators.ThemeTokenType(() => TypographyData)
+  'headline-m': TypographyData;
+
+  @Decorators.ThemeToken()
+  @Decorators.ThemeTokenType(() => TypographyData)
+  'headline-l': TypographyData;
+
+  @Decorators.ThemeToken()
+  @Decorators.ThemeTokenType(() => TypographyData)
+  'display-s': TypographyData;
+
+  @Decorators.ThemeToken()
+  @Decorators.ThemeTokenType(() => TypographyData)
+  'display-m': TypographyData;
+
+  @Decorators.ThemeToken()
+  @Decorators.ThemeTokenType(() => TypographyData)
+  'display-l': TypographyData;
+
+  @Decorators.ThemeToken()
+  @Decorators.ThemeTokenType(() => IconData)
+  'icon-m': IconData;
+}

package/platforms/react-native/generators/init/files/ui/theme/shared/index.ts

@@ -0,0 +1,4 @@
+export { spacing } from './shared.spacing';
+export { typography } from './shared.typography';
+export { radius } from './shared.radius';
+export { createThemeColor, sharedColorTokens } from './shared.color.base';

package/platforms/react-native/generators/init/files/ui/theme/shared/shared.color.base.ts

@@ -0,0 +1,79 @@
+import { ColorScheme } from '../scheme/theme.scheme.color';
+
+export const sharedColorTokens: Pick<
+  ColorScheme,
+  | 'secondary'
+  | 'onSecondary'
+  | 'tertiary'
+  | 'onTertiary'
+  | 'tertiaryActive'
+  | 'onTertiaryActive'
+  | 'error'
+  | 'onError'
+  | 'outlineVariant'
+  | 'outlineStrong'
+  | 'surfaceDim'
+  | 'backgroundVariant'
+  | 'onBackgroundVariant'
+  | 'backgroundSecondVariant'
+  | 'onBackgroundSecondVariant'
+  | 'surface'
+  | 'onSurface'
+  | 'surfaceVariant'
+  | 'onSurfaceVariant'
+  | 'onSurfaceVariantSecondary'
+  | 'cardWhiteVariant'
+  | 'cardGrayVariant'
+  | 'cardBlockedVariant'
+> = {
+  secondary: '#5c5c5c',
+  onSecondary: '#8A8A8A',
+
+  tertiary: '#9ca3800d',
+  onTertiary: '#8A8A8A',
+
+  tertiaryActive: '#FFE5E5',
+  onTertiaryActive: '#FE3333',
+
+  error: '#fe0000',
+  onError: '#ffffff',
+
+  outlineVariant: '#E1E2E5',
+  outlineStrong: '#8E8EA5',
+
+  surfaceDim: '#222223',
+
+  backgroundVariant: '#5E698A',
+  onBackgroundVariant: '#ffffff',
+
+  backgroundSecondVariant: '#687382',
+  onBackgroundSecondVariant: '#ffffff',
+
+  surface: '#141316',
+  onSurface: '#c9c5ca',
+
+  surfaceVariant: '#47464f',
+  onSurfaceVariant: '#c8c5d0',
+  onSurfaceVariantSecondary: '#515163',
+  cardWhiteVariant: '#000000',
+  cardGrayVariant: '#999999',
+  cardBlockedVariant: '#666666',
+};
+
+export function createThemeColor(vars: {
+  primary: string;
+  outline: string;
+  background: string;
+  onPrimaryContainer?: string;
+}): ColorScheme {
+  return {
+    ...sharedColorTokens,
+    primary: vars.primary,
+    onPrimary: '#ffffff',
+    primaryContainer: '#ffffff',
+    onPrimaryContainer: vars.onPrimaryContainer ?? vars.primary,
+    outline: vars.outline,
+    background: vars.background,
+    onBackground: '#5c5c5c',
+  };
+}

package/platforms/react-native/generators/init/files/ui/theme/shared/shared.radius.ts

@@ -0,0 +1,8 @@
+export const radius = {
+  xs: 4,
+  sm: 8,
+  md: 12,
+  lg: 16,
+  xl: 24,
+  full: 999,
+};

package/platforms/react-native/generators/init/files/ui/theme/shared/shared.spacing.ts

@@ -0,0 +1,9 @@
+export const spacing = {
+  xxs: 4,
+  xs: 8,
+  s: 16,
+  m: 20,
+  l: 24,
+  xl: 32,
+  xxl: 40,
+};

package/platforms/react-native/generators/init/files/ui/theme/shared/shared.typography.ts

@@ -0,0 +1,105 @@
+export const typography = {
+  'title-s': {
+    fontWeight: '400',
+    fontSize: 14,
+    lineHeight: 20,
+    letterSpacing: 0.1,
+  },
+  'title-m': {
+    fontWeight: '400',
+    fontSize: 16,
+    lineHeight: 24,
+    letterSpacing: 0.15,
+  },
+  'title-l': {
+    fontWeight: '400',
+    fontSize: 18,
+    lineHeight: 22,
+    letterSpacing: 0,
+  },
+  'label-s': {
+    fontWeight: '400',
+    fontSize: 11,
+    lineHeight: 16,
+    letterSpacing: 0.5,
+  },
+  'label-m': {
+    fontWeight: '400',
+    fontSize: 12,
+    lineHeight: 16,
+    letterSpacing: 0.5,
+  },
+  'label-l': {
+    fontWeight: '400',
+    fontSize: 14,
+    lineHeight: 20,
+    letterSpacing: 0.1,
+  },
+  'body-s': {
+    fontWeight: '400',
+    fontSize: 12,
+    lineHeight: 16,
+    letterSpacing: 0,
+  },
+  'body-m': {
+    fontWeight: '400',
+    fontSize: 14,
+    lineHeight: 20,
+    letterSpacing: 0,
+  },
+  'body-l': {
+    fontWeight: '400',
+    fontSize: 16,
+    lineHeight: 20,
+    letterSpacing: 0,
+  },
+  'body-xl': {
+    fontWeight: '400',
+    fontSize: 18,
+    lineHeight: 24,
+    letterSpacing: 0.5,
+  },
+  'headline-s': {
+    fontWeight: '400',
+    fontSize: 24,
+    lineHeight: 32,
+    letterSpacing: 0,
+  },
+  'headline-m': {
+    fontWeight: '400',
+    fontSize: 28,
+    lineHeight: 36,
+    letterSpacing: 0,
+  },
+  'headline-l': {
+    fontWeight: '400',
+    fontSize: 32,
+    lineHeight: 40,
+    letterSpacing: 0,
+  },
+  'display-s': {
+    fontWeight: '400',
+    fontSize: 36,
+    lineHeight: 44,
+    letterSpacing: 0,
+  },
+  'display-m': {
+    fontWeight: '400',
+    fontSize: 45,
+    lineHeight: 52,
+    letterSpacing: 0,
+  },
+  'display-l': {
+    fontWeight: '400',
+    fontSize: 57,
+    lineHeight: 64,
+    letterSpacing: -0.25,
+  },
+  'icon-m': {
+    fontFamily: 'font-icons',
+    fontSize: 24,
+    lineHeight: 24,
+    fontWeight: 'normal',
+    fontStyle: 'normal',
+  },
+};

package/platforms/react-native/generators/init/files/ui/theme/theme.hooks.ts

@@ -0,0 +1,7 @@
+import { EffiJS } from '@effijs/common';
+
+import { ThemeService } from './theme.service';
+
+export function useThemeService() {
+  return EffiJS.resolve<ThemeService>('ThemeService');
+}

package/platforms/react-native/generators/init/files/ui/theme/theme.meta.ts

@@ -0,0 +1,10 @@
+import { SchemaName } from './theme';
+
+export const themeMeta: Record<SchemaName, { previewColor: string; label: string }> = {
+  [SchemaName.Black]: { previewColor: '#5c5c5c', label: 'Black' },
+  [SchemaName.Pink]: { previewColor: '#e5b8b4', label: 'Pink' },
+  [SchemaName.Blue]: { previewColor: '#6d92ad', label: 'Blue' },
+  [SchemaName.Green]: { previewColor: '#9ca380', label: 'Green' },
+};
+
+export const themeOrder: SchemaName[] = [SchemaName.Black, SchemaName.Pink, SchemaName.Blue, SchemaName.Green];

package/platforms/react-native/generators/init/files/ui/theme/theme.provider.tsx

@@ -0,0 +1,19 @@
+import { createContext, useMemo, ReactNode, useSyncExternalStore, useContext } from 'react';
+
+import themeStore, { SchemaName } from './theme';
+
+type TThemeSchemaMapping = Record<SchemaName, SchemaName>;
+
+const ThemeContext = createContext<{ theme: SchemaName }>({ theme: themeStore.schema.active as SchemaName });
+
+export default function ThemeProvider({ children, mapping }: { children: ReactNode; mapping?: TThemeSchemaMapping }) {
+  const active = useSyncExternalStore(themeStore.subscribe, () => themeStore.schema.active) as SchemaName;
+  const value = useMemo(() => ({ theme: mapping?.[active] ?? active }), [active, mapping]);
+
+  return <ThemeContext.Provider value={value} children={children} />;
+}
+
+export function useTheme() {
+  const { theme } = useContext(ThemeContext);
+  return theme;
+}

package/platforms/react-native/generators/init/files/ui/theme/theme.service.ts

@@ -0,0 +1,36 @@
+import { Entity } from '@effijs/common';
+
+import { AuthStore } from '@entity/auth/auth.store';
+
+import theme, { SchemaName } from './theme';
+
+const SCHEMA_NAMES = new Set<string>(Object.values(SchemaName));
+
+function isSchemaName(value: unknown): value is SchemaName {
+  return typeof value === 'string' && SCHEMA_NAMES.has(value);
+}
+
+@Entity.Decorators.Service()
+export class ThemeService {
+  constructor(private authStore: AuthStore) {
+    this.authStore.subscribe('theme', ({ theme }) => {
+      this.apply(theme);
+    });
+  }
+
+  getActive(): SchemaName {
+    return (theme.schema.active as SchemaName) ?? SchemaName.Blue;
+  }
+
+  init() {
+    this.apply(this.authStore.getByPath('theme'));
+  }
+
+  setActive(name: SchemaName) {
+    this.authStore.set('theme', name);
+  }
+
+  private apply(value: unknown) {
+    theme.schema.active = isSchemaName(value) ? value : SchemaName.Blue;
+  }
+}

package/platforms/react-native/generators/init/files/ui/theme/theme.ts

@@ -0,0 +1,27 @@
+import { Theme } from '@effijs/theme';
+import type { TTheme as TEffiTheme } from '@effijs/theme';
+
+import { blackThemeValues } from './black';
+import { blueThemeValues } from './blue';
+import { greenThemeValues } from './green';
+import { pinkThemeValues } from './pink';
+import { ThemeScheme } from './scheme/theme.scheme';
+
+export enum SchemaName {
+  Black = 'black',
+  Pink = 'pink',
+  Blue = 'blue',
+  Green = 'green',
+}
+
+const theme = Theme(ThemeScheme);
+theme.schema.define(SchemaName.Black, blackThemeValues);
+theme.schema.define(SchemaName.Pink, pinkThemeValues);
+theme.schema.define(SchemaName.Blue, blueThemeValues);
+theme.schema.define(SchemaName.Green, greenThemeValues);
+
+theme.schema.active = SchemaName.Blue;
+
+export type TTheme = TEffiTheme<ThemeScheme>;
+
+export default theme;

package/platforms/react-native/generators/init/files/ui/widgets/index.ts

@@ -0,0 +1 @@
+import './widgets.feature';