@multiplatform.one/components 0.2.0

package/dist/jsx/table/index.mjs

@@ -0,0 +1,4 @@
+export * from "./Table";
+export * from "./TableCell";
+export * from "./TableCol";
+//# sourceMappingURL=index.mjs.map

package/dist/jsx/table/index.mjs.map

@@ -0,0 +1,6 @@
+{
+  "version": 3,
+  "sources": ["../../../src/table/index.ts"],
+  "mappings": "AAAA,cAAc;AACd,cAAc;AACd,cAAc;",
+  "names": []
+}

package/dist/jsx/utils/setTinted.js

@@ -0,0 +1,16 @@
+let isTinted = true;
+const setTinted = (next) => {
+  isTinted = next;
+  listeners.forEach((cb) => cb(next));
+};
+const toggleTinted = () => {
+  setTinted(!isTinted);
+};
+const listeners = /* @__PURE__ */ new Set();
+export {
+  isTinted,
+  listeners,
+  setTinted,
+  toggleTinted
+};
+//# sourceMappingURL=setTinted.js.map

package/dist/jsx/utils/setTinted.js.map

@@ -0,0 +1,6 @@
+{
+  "version": 3,
+  "sources": ["../../../src/utils/setTinted.ts"],
+  "mappings": "AAAO,IAAI,WAAW;AAEf,MAAM,YAAY,CAAC,SAAkB;AAC1C,aAAW;AACX,YAAU,QAAQ,CAAC,OAAO,GAAG,IAAI,CAAC;AACpC;AAEO,MAAM,eAAe,MAAM;AAChC,YAAU,CAAC,QAAQ;AACrB;AAEO,MAAM,YAAY,oBAAI,IAAc;",
+  "names": []
+}

package/dist/jsx/utils/setTinted.mjs

@@ -0,0 +1,16 @@
+let isTinted = true;
+const setTinted = (next) => {
+  isTinted = next;
+  listeners.forEach((cb) => cb(next));
+};
+const toggleTinted = () => {
+  setTinted(!isTinted);
+};
+const listeners = /* @__PURE__ */ new Set();
+export {
+  isTinted,
+  listeners,
+  setTinted,
+  toggleTinted
+};
+//# sourceMappingURL=setTinted.mjs.map

package/dist/jsx/utils/setTinted.mjs.map

@@ -0,0 +1,6 @@
+{
+  "version": 3,
+  "sources": ["../../../src/utils/setTinted.ts"],
+  "mappings": "AAAO,IAAI,WAAW;AAEf,MAAM,YAAY,CAAC,SAAkB;AAC1C,aAAW;AACX,YAAU,QAAQ,CAAC,OAAO,GAAG,IAAI,CAAC;AACpC;AAEO,MAAM,eAAe,MAAM;AAChC,YAAU,CAAC,QAAQ;AACrB;AAEO,MAAM,YAAY,oBAAI,IAAc;",
+  "names": []
+}

package/dist/jsx/utils/unwrapText.js

@@ -0,0 +1,10 @@
+import React from "react";
+function unwrapText(children) {
+  return React.Children.toArray(children).map((x) => {
+    return x?.props?.children ? x.props.children : x;
+  });
+}
+export {
+  unwrapText
+};
+//# sourceMappingURL=unwrapText.js.map

package/dist/jsx/utils/unwrapText.js.map

@@ -0,0 +1,6 @@
+{
+  "version": 3,
+  "sources": ["../../../src/utils/unwrapText.ts"],
+  "mappings": "AAAA,OAAO,WAAW;AAEX,SAAS,WAAW,UAAe;AACxC,SAAO,MAAM,SAAS,QAAQ,QAAQ,EAAE,IAAI,CAAC,MAAM;AAEjD,WAAO,GAAG,OAAO,WAAW,EAAE,MAAM,WAAW;AAAA,EACjD,CAAC;AACH;",
+  "names": []
+}

package/dist/jsx/utils/unwrapText.mjs

@@ -0,0 +1,10 @@
+import React from "react";
+function unwrapText(children) {
+  return React.Children.toArray(children).map((x) => {
+    return x?.props?.children ? x.props.children : x;
+  });
+}
+export {
+  unwrapText
+};
+//# sourceMappingURL=unwrapText.mjs.map

package/dist/jsx/utils/unwrapText.mjs.map

@@ -0,0 +1,6 @@
+{
+  "version": 3,
+  "sources": ["../../../src/utils/unwrapText.ts"],
+  "mappings": "AAAA,OAAO,WAAW;AAEX,SAAS,WAAW,UAAe;AACxC,SAAO,MAAM,SAAS,QAAQ,QAAQ,EAAE,IAAI,CAAC,MAAM;AAEjD,WAAO,GAAG,OAAO,WAAW,EAAE,MAAM,WAAW;AAAA,EACjD,CAAC;AACH;",
+  "names": []
+}

package/package.json

@@ -0,0 +1,92 @@
+{
+  "name": "@multiplatform.one/components",
+  "version": "0.2.0",
+  "sideEffects": [
+    "*.css"
+  ],
+  "description": "multiplatform.one ui components",
+  "main": "dist/cjs",
+  "module": "dist/esm",
+  "module:jsx": "dist/jsx",
+  "react-native": "src/index.ts",
+  "source": "src/index.ts",
+  "types": "types/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.js",
+      "types": "./types/index.d.ts"
+    },
+    "./src/tamagui.config": {
+      "import": "./dist/esm/tamagui.config.js",
+      "require": "./dist/cjs/tamagui.config.js",
+      "types": "./types/tamagui.config.d.ts"
+    },
+    "./tamagui": {
+      "import": "./dist/esm/tamagui",
+      "require": "./dist/cjs/tamagui",
+      "types": "./types/tamagui"
+    },
+    "./css/code-highlight.css": {
+      "import": "./css/code-highlight.css",
+      "require": "./css/code-highlight.css"
+    }
+  },
+  "files": [
+    "css",
+    "dist",
+    "src",
+    "types"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://gitlab.com/risserlabs/multiplatform.one/keycloak"
+  },
+  "dependencies": {
+    "@mdx-js/mdx": "^2.3.0",
+    "@mdx-js/react": "^2.3.0",
+    "@tamagui/font-inter": "^1.29.3",
+    "@tamagui/logo": "^1.29.3",
+    "@tamagui/react-native-media-driver": "^1.29.3",
+    "@tamagui/shorthands": "^1.29.3",
+    "@tamagui/themes": "^1.29.3",
+    "expo-asset": "^8.9.2",
+    "fast-xml-parser": "^4.2.2",
+    "gray-matter": "^4.0.3",
+    "hast-util-to-html": "^8.0.4",
+    "immer": "^10.0.2",
+    "parse-numeric-range": "^1.3.0",
+    "react-hook-form": "^7.43.9",
+    "react-native-svg": "13.9.0",
+    "refractor": "^4.8.1",
+    "rehype-autolink-headings": "^6.1.1",
+    "rehype-parse": "^8.0.4",
+    "rehype-slug": "^5.1.0",
+    "remark-frontmatter": "^4.0.1",
+    "remark-mdx-frontmatter": "^3.0.0",
+    "tamagui": "^1.29.3",
+    "unist-util-visit": "^4.1.2"
+  },
+  "peerDependencies": {
+    "moti": "^0.25.3",
+    "react-native-reanimated": "2.14.4",
+    "solito": "^3.2.6"
+  },
+  "devDependencies": {
+    "@tamagui/build": "^1.29.3",
+    "moti": "^0.25.3",
+    "react-native-reanimated": "2.14.4",
+    "solito": "^3.2.6",
+    "ui": "*"
+  },
+  "jest": {
+    "testRegex": "((/(tests|__tests__)((/|/[^_.\n][^/\n]*(/[^_.\n][^/\n]+)*/)[^_.\n][^/\n]*))|((/|/.*/)(([^_.\n][^/\n]*.(spec|test))|(spec|test)))).[jt]sx?$",
+    "verbose": true,
+    "testPathIgnorePatterns": []
+  },
+  "jestSonar": {
+    "reportPath": ".mkpm/.tmp/reports",
+    "reportFile": "test-report.xml",
+    "indent": 4
+  }
+}

package/src/ErrorBoundary/index.tsx

@@ -0,0 +1,28 @@
+import React, { Component } from 'react';
+import { YStack, H2, Button } from 'tamagui';
+
+const logger = console;
+
+export class ErrorBoundary extends Component<any> {
+  static getDerivedStateFromError(_err: Error) {
+    return { hasError: true };
+  }
+
+  state = { hasError: false };
+
+  componentDidCatch(err: Error, errorInfo: any) {
+    logger.info({ error: err, errorInfo });
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <YStack>
+          <H2>Oops, there is an error!</H2>
+          <Button onPress={() => this.setState({ hasError: false })}>Try again?</Button>
+        </YStack>
+      );
+    }
+    return this.props.children;
+  }
+}

package/src/code/Code/Code.stories.tsx

@@ -0,0 +1,19 @@
+import { Code } from './index';
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta = {
+  title: 'code/Code',
+  component: Code,
+  parameters: {
+    status: { type: 'beta' },
+  },
+};
+
+export const main: StoryObj<typeof Code> = {
+  args: {
+    children: `const hello = "world"
+const hello = "world"`,
+  },
+};
+
+export default meta;

package/src/code/Code/index.ts

@@ -0,0 +1,39 @@
+import type { GetProps } from 'tamagui';
+import { Paragraph, styled } from 'tamagui';
+import { Platform } from 'react-native';
+
+export const Code = styled(Paragraph, {
+  name: 'Code',
+  borderRadius: '$4',
+  cursor: 'inherit',
+  fontFamily: Platform.OS === 'web' ? '$mono' : undefined,
+  lineHeight: 18,
+  padding: '$1',
+  size: '$3',
+  tag: 'code',
+  whiteSpace: 'pre',
+  variants: {
+    colored: {
+      true: {
+        backgroundColor: '$background',
+        color: '$color',
+      },
+    },
+  } as const,
+});
+
+export const CodeInline = styled(Paragraph, {
+  name: 'CodeInline',
+  backgroundColor: '$background',
+  borderRadius: '$3',
+  color: '$colorHover',
+  cursor: 'inherit',
+  fontFamily: Platform.OS === 'web' ? '$mono' : undefined,
+  fontSize: '85%',
+  padding: '$1.5',
+  tag: 'code',
+});
+
+export type CodeProps = GetProps<typeof Code>;
+
+export type CodeInlineProps = GetProps<typeof CodeInline>;

package/src/code/CodeBlock/CodeBlock.stories.ts

@@ -0,0 +1,30 @@
+import { CodeBlock } from './index';
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta = {
+  title: 'code/CodeBlock',
+  component: CodeBlock,
+  parameters: {
+    status: { type: 'beta' },
+  },
+};
+
+export const main: StoryObj<typeof CodeBlock> = {
+  args: {
+    backgroundColor: '$color2',
+    debug: false,
+    disableCopy: false,
+    isCollapsible: false,
+    isHighlightingLines: true,
+    showLineNumbers: false,
+    children: `
+const hello = 'world';
+
+function howdy() {
+  return 'texas';
+}
+`,
+  },
+};
+
+export default meta;

package/src/code/CodeBlock/index.tsx

@@ -0,0 +1,27 @@
+import React, { useMemo } from 'react';
+import type { MDXCodeBlockContextValue } from '../../mdx/MDXCodeBlock/MDXCodeBlockContext';
+import type { MDXProps } from '../../mdx/MDX';
+import { MDX } from '../../mdx/MDX';
+import { MDXCodeBlockContext } from '../../mdx/MDXCodeBlock/MDXCodeBlockContext';
+
+export interface CodeBlockProps extends Omit<MDXProps, 'children'>, MDXCodeBlockContextValue {
+  children?: string;
+  language?: string;
+}
+
+export function CodeBlock({ children, language = 'tsx', components, debug, ...props }: CodeBlockProps) {
+  const mdxString = useMemo(
+    () => `\`\`\`${language}
+${children?.trim()}
+\`\`\``,
+    [children, language],
+  );
+  const value = useMemo(() => ({ ...props, debug }), [props, debug]);
+  return (
+    <MDXCodeBlockContext.Provider value={value}>
+      <MDX components={components} debug={debug}>
+        {mdxString}
+      </MDX>
+    </MDXCodeBlockContext.Provider>
+  );
+}

package/src/code/Pre/index.ts

@@ -0,0 +1,9 @@
+import { YStack, styled } from 'tamagui';
+
+export const Pre = styled(YStack, {
+  backgroundColor: '$background',
+  borderRadius: '$4',
+  overflow: 'visible',
+  padding: '$4',
+  tag: 'pre',
+});

package/src/code/index.ts

@@ -0,0 +1,3 @@
+export * from './Code';
+export * from './CodeBlock';
+export * from './Pre';

package/src/forms/FormCheckBox/FormCheckBox.stories.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { FormCheckBox } from './index';
+
+export default {
+  title: 'forms/FormCheckBox',
+  component: FormCheckBox,
+  parameters: { status: { type: 'beta' } },
+};
+
+export const main = () => (
+  <FormCheckBox name="checkbox" label="checkbox" checkBoxElement={{ label: 'checkbox', value: 'checkbox' }}>
+    Hello this is from FormCheckBox
+  </FormCheckBox>
+);

package/src/forms/FormCheckBox/index.tsx

@@ -0,0 +1,128 @@
+import type { SizeTokens, CheckboxProps, CheckboxIndicatorProps, LabelProps, ThemeName, ThemeKeys } from 'tamagui';
+import { Label, Checkbox, XStack, YStack } from 'tamagui';
+import { Controller, useFormContext } from 'react-hook-form';
+import type { FormControllerProps } from '../types';
+import type { FormFieldProps } from '../FormField';
+import { FormField } from '../FormField';
+import React, { useId } from 'react';
+import type { FlexAlignType } from 'react-native';
+import { Check as CheckIcon } from '@tamagui/lucide-icons';
+
+export type FormCheckBoxProps = CheckboxProps &
+  FormControllerProps & {
+    fieldProps?: Omit<FormFieldProps, 'helperText' | 'required' | 'error' | 'label'>;
+  } & Pick<FormFieldProps, 'helperText' | 'required' | 'error' | 'label'> & {
+    IndicatorStyle?: CheckboxIndicatorProps;
+  } & { LabelStyle?: LabelProps } & { iconColor?: string | ThemeName | ThemeKeys };
+
+export interface CheckBoxElement {
+  label?: string;
+  value: string;
+  size?: SizeTokens;
+  disabled?: boolean;
+  defaultChecked?: boolean;
+  id?: string;
+}
+
+export interface CheckBoxElementSizing {
+  width?: any;
+  height?: any;
+  space?: SizeTokens;
+  ai?: FlexAlignType;
+}
+
+export function FormCheckBox({
+  children,
+  control,
+  defaultValue,
+  error,
+  fieldProps,
+  helperText,
+  label,
+  name,
+  required,
+  rules,
+  checkBoxElement,
+  CheckBoxElementSizing,
+  IndicatorStyle,
+  iconColor,
+  LabelStyle,
+  ...checkProps
+}: FormCheckBoxProps & { checkBoxElement: CheckBoxElement } & { CheckBoxElementSizing?: CheckBoxElementSizing }) {
+  const formContext = useFormContext();
+  const id = useId();
+  if (!formContext) {
+    return (
+      <YStack>
+        <XStack
+          space={CheckBoxElementSizing?.space || '$3'}
+          height={CheckBoxElementSizing?.height}
+          width={CheckBoxElementSizing?.width || '300'}
+        >
+          <Checkbox
+            id={id}
+            size={checkBoxElement.size}
+            defaultChecked={checkBoxElement.defaultChecked}
+            value={checkBoxElement.value}
+            {...checkProps}
+          >
+            <Checkbox.Indicator>
+              <CheckIcon />
+            </Checkbox.Indicator>
+          </Checkbox>
+
+          <Label size={checkBoxElement.size} htmlFor={id}>
+            {checkBoxElement.label || checkBoxElement.value}
+          </Label>
+        </XStack>
+      </YStack>
+    );
+  }
+  return (
+    <Controller
+      name={name}
+      control={control}
+      rules={rules}
+      defaultValue={defaultValue}
+      render={({ field: { onChange, value }, fieldState: { error } }) => (
+        <FormField
+          id={id}
+          error={!!error}
+          helperText={error ? error.message : helperText}
+          label={label}
+          required={required}
+          {...fieldProps}
+        >
+          <YStack>
+            <XStack
+              alignItems={CheckBoxElementSizing?.ai || 'center'}
+              space={CheckBoxElementSizing?.space || '$3'}
+              height={CheckBoxElementSizing?.height}
+              width={CheckBoxElementSizing?.width || '300'}
+            >
+              <Checkbox
+                id={id}
+                size={checkBoxElement.size}
+                defaultChecked={checkBoxElement.defaultChecked}
+                value={checkBoxElement.value}
+                checked={value}
+                {...checkProps}
+                onCheckedChange={(e) => {
+                  onChange(e);
+                  if (checkProps.onCheckedChange) checkProps.onCheckedChange(e);
+                }}
+              >
+                <Checkbox.Indicator {...IndicatorStyle}>
+                  <CheckIcon />
+                </Checkbox.Indicator>
+              </Checkbox>
+              <Label size={checkBoxElement.size} htmlFor={id} {...LabelStyle}>
+                {checkBoxElement.label || checkBoxElement.value}
+              </Label>
+            </XStack>
+          </YStack>
+        </FormField>
+      )}
+    />
+  );
+}

package/src/forms/FormField.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import type { LabelProps, YStackProps, SizeTokens, FontSizeTokens } from 'tamagui';
+import type { ReactNode } from 'react';
+import { Label, Paragraph, YStack } from 'tamagui';
+
+export interface FormFieldProps extends YStackProps {
+  children: ReactNode;
+  label?: string;
+  labelProps?: Omit<LabelProps, 'htmlFor'>;
+  helperText?: string;
+  required?: boolean;
+  error?: boolean;
+  id: string;
+  size?: SizeTokens;
+}
+
+export function FormField({ children, label, error, helperText, labelProps, id, size, required }: FormFieldProps) {
+  return (
+    <YStack>
+      {label && (
+        <Label htmlFor={id} size={size || '$3'} {...labelProps} color={error ? '$red10' : undefined}>
+          {label}
+          {required && ` *`}
+        </Label>
+      )}
+      <YStack>
+        {children}
+        {helperText && (
+          <Paragraph paddingLeft="$2" size={size as FontSizeTokens} color={error ? '$red10' : undefined}>
+            {helperText}
+          </Paragraph>
+        )}
+      </YStack>
+    </YStack>
+  );
+}

package/src/forms/FormInput/FormInput.stories.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { FormInput } from './index';
+import { YStack } from 'tamagui';
+import { action } from '@storybook/addon-actions';
+
+export default {
+  title: 'forms/FormInput',
+  component: FormInput,
+  parameters: {
+    status: { type: 'beta' },
+  },
+};
+
+export const main = () => (
+  <YStack padding="$4" space>
+    <FormInput onChangeText={action('onTextChange')} name="firstName" label="First Name" />
+    <FormInput onChangeText={action('onTextChange')} name="lastName" label="Last Name" />
+  </YStack>
+);

package/src/forms/FormInput/index.tsx

@@ -0,0 +1,66 @@
+import React, { useId } from 'react';
+import type { FormControllerProps } from '../types';
+import type { FormFieldProps } from '../FormField';
+import type { InputProps } from 'tamagui';
+import { Controller, useFormContext } from 'react-hook-form';
+import { FormField } from '../FormField';
+import { Input } from 'tamagui';
+
+export type FormInputProps = InputProps &
+  FormControllerProps & {
+    fieldProps?: Omit<FormFieldProps, 'helperText' | 'required' | 'error' | 'label'>;
+  } & Pick<FormFieldProps, 'helperText' | 'required' | 'error' | 'label'>;
+
+export function FormInput({
+  control,
+  defaultValue,
+  error,
+  fieldProps,
+  helperText,
+  label,
+  name,
+  required,
+  rules,
+  ...inputProps
+}: FormInputProps) {
+  const formContext = useFormContext();
+  const id = useId();
+  if (!formContext) {
+    return (
+      <FormField id={id} error={!!error} helperText={helperText} label={label} required={required} {...fieldProps}>
+        <Input {...inputProps} />
+      </FormField>
+    );
+  }
+  return (
+    <Controller
+      name={name}
+      control={control}
+      rules={rules}
+      defaultValue={defaultValue}
+      render={({ field: { onChange, value, onBlur }, fieldState: { error } }) => (
+        <FormField
+          id={id}
+          error={!!error}
+          helperText={error ? error.message : helperText}
+          label={label}
+          required={required}
+          {...fieldProps}
+        >
+          <Input
+            {...inputProps}
+            value={value ?? ''}
+            onBlur={(e) => {
+              onBlur();
+              if (inputProps.onBlur) inputProps.onBlur(e);
+            }}
+            onChange={(e) => {
+              onChange(e);
+              if (inputProps.onChange) inputProps.onChange(e);
+            }}
+          />
+        </FormField>
+      )}
+    />
+  );
+}

package/src/forms/FormRadioGroup/FormRadioGroup.stories.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { FormRadioGroup } from './index';
+
+export default {
+  title: 'forms/FormRadioGroup',
+  component: FormRadioGroup,
+  parameters: { status: { type: 'beta' } },
+};
+
+export const main = () => (
+  <FormRadioGroup
+    name="radio group"
+    label="radio group"
+    helperText="select an option"
+    required
+    radioElements={[
+      { label: 'option 1', value: 'option1' },
+      { label: 'option 2', value: 'option2' },
+      { label: 'option 3', value: 'option3' },
+    ]}
+  />
+);