powell-react 0.0.8 → 0.0.9

package/dist/esm/types/{models → src/powell/models}/config.d.ts

@@ -1,5 +1,5 @@
-import { $APIOptions } from "@api";
-import { FixLabelPosition, LabelPosition, Size } from "@models";
+import { $APIOptions } from "@powell/api";
+import { FixLabelPosition, LabelPosition, Size } from "@powell/models";
 export type ThemeName = "arya-blue" | "arya-green" | "arya-orange" | "arya-purple" | "bootstrap4-dark-blue" | "bootstrap4-dark-purple" | "bootstrap4-light-blue" | "bootstrap4-light-purple" | "fluent-light" | "lara-dark-amber" | "lara-dark-blue" | "lara-dark-cyan" | "lara-dark-green" | "lara-dark-indigo" | "lara-dark-pink" | "lara-dark-purple" | "lara-dark-teal" | "lara-light-amber" | "lara-light-blue" | "lara-light-cyan" | "lara-light-green" | "lara-light-indigo" | "lara-light-pink" | "lara-light-purple" | "lara-light-teal" | "luna-amber" | "luna-blue" | "luna-green" | "luna-pink" | "md-dark-deeppurple" | "md-dark-indigo" | "md-light-deeppurple" | "md-light-indigo" | "mdc-dark-deeppurple" | "mdc-dark-indigo" | "mdc-light-deeppurple" | "mdc-light-indigo" | "mira" | "nano" | "nova" | "nova-accent" | "nova-alt" | "rhea" | "saga-blue" | "saga-green" | "saga-orange" | "saga-purple" | "soho-dark" | "soho-light" | "tailwind-light" | "vela-blue" | "vela-green" | "vela-orange" | "vela-purple" | "viva-dark" | "viva-light";
 type OmittedApiOptions = Omit<$APIOptions, "setAppendTo" | "setStyleContainer" | "setAutoZIndex" | "setCssTransition" | "setFilterMatchModeOptions" | "setHideOverlaysOnDocumentScrolling" | "setInputStyle" | "setLocale" | "setNonce" | "setNullSortOrder" | "setRipple" | "setZIndex" | "setPt" | "changeTheme">;
 export interface PowellConfig extends OmittedApiOptions {

package/dist/esm/types/{models → src/powell/models}/forms.d.ts

@@ -1,5 +1,5 @@
-import { $ButtonProps } from "@api";
-import { ButtonAppearance, Nullable, Position, SafeAny } from "@models";
+import { $ButtonProps } from "@powell/api";
+import { ButtonAppearance, Nullable, Position, SafeAny } from "@powell/models";
 import { MouseEvent } from "react";
 export type LabelPosition = 'float' | 'fix-side' | 'fix-top';
 export type FixLabelPosition = Exclude<LabelPosition, 'float'>;

package/dist/{cjs/types → esm/types/src/powell}/utils/utilsService.d.ts

@@ -1,6 +1,6 @@
-import { AddonConfig, TransformOptions } from "@models";
-import { $FormikContextType, $FormikValues } from "@api";
-export declare const getAddonTemplate: (config?: AddonConfig) => import("react/jsx-runtime").JSX.Element;
+import { AddonConfig, TransformOptions } from "@powell/models";
+import { $FormikContextType, $FormikValues } from "@powell/api";
+export declare const getAddonTemplate: (config?: AddonConfig) => import("react").JSX.Element;
 export declare const isRequiredField: (formContext: $FormikContextType<$FormikValues> | null, name: string | undefined) => any;
 export declare const transformer: <V = any, T = any>(options: TransformOptions<V, T>) => {
     value: V;

package/dist/esm/types/vite.config.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vite").UserConfig;
+export default _default;

package/package.json

@@ -1,82 +1,70 @@
 {
   "name": "powell-react",
-  "version": "0.0.8",
+  "version": "0.0.9",
+  "description": "",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": ""
+  },
+  "homepage": "",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/index.d.ts",
-  "files": [
-    "dist"
-  ],
+  "type": "module",
+  "engines": {
+    "node": ">=18"
+  },
   "scripts": {
-    "dev": "rollup -c --watch",
+    "start": "npm run storybook",
     "prebuild": "npm version patch",
     "build": "rollup -c",
+    "release": "npm run build && npm publish",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
+    "storybook:build": "storybook build"
   },
-  "babel": {
-    "sourceType": "unambiguous",
-    "presets": [
-      [
-        "@babel/preset-env",
-        {
-          "targets": {
-            "chrome": 100,
-            "safari": 15,
-            "firefox": 91
-          }
-        }
-      ],
-      [
-        "@babel/preset-react",
-        {
-          "runtime": "automatic"
-        }
-      ],
-      "@babel/preset-typescript"
-    ]
+  "peerDependencies": {
+    "react": "18.x",
+    "react-dom": "18.x"
   },
-  "author": "",
-  "license": "ISC",
-  "description": "",
   "devDependencies": {
-    "@babel/core": "^7.24.6",
-    "@babel/preset-env": "^7.24.6",
-    "@babel/preset-react": "^7.24.6",
-    "@babel/preset-typescript": "^7.24.6",
-    "@chromatic-com/storybook": "1.5.0",
-    "@rollup/plugin-commonjs": "^25.0.8",
+    "@chromatic-com/storybook": "^2.0.2",
+    "@rollup/plugin-alias": "^5.1.1",
+    "@rollup/plugin-commonjs": "^26.0.1",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-typescript": "^11.1.6",
-    "@storybook/addon-essentials": "^8.1.5",
-    "@storybook/addon-interactions": "^8.1.5",
-    "@storybook/addon-links": "^8.1.5",
-    "@storybook/addon-onboarding": "^8.1.5",
-    "@storybook/addon-webpack5-compiler-swc": "1.0.3",
-    "@storybook/blocks": "^8.1.5",
-    "@storybook/react": "^8.1.5",
-    "@storybook/react-webpack5": "^8.1.5",
-    "@storybook/test": "^8.1.5",
-    "@types/react": "^18.3.3",
-    "postcss": "^8.4.38",
+    "@rollup/plugin-url": "^8.0.2",
+    "@storybook/addon-docs": "^8.3.1",
+    "@storybook/addon-essentials": "^8.3.1",
+    "@storybook/addon-interactions": "^8.3.1",
+    "@storybook/addon-links": "^8.3.1",
+    "@storybook/addon-onboarding": "^8.3.1",
+    "@storybook/blocks": "^8.3.1",
+    "@storybook/react": "^8.3.1",
+    "@storybook/react-vite": "^8.3.1",
+    "@storybook/test": "^8.3.1",
+    "@svgr/rollup": "^8.1.0",
+    "@types/node": "^22.5.5",
+    "@types/react": "^18.3.7",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "rollup": "^4.18.0",
+    "rimraf": "^6.0.1",
+    "rollup": "^4.22.4",
     "rollup-plugin-dts": "^6.1.1",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
-    "storybook": "^8.1.5",
-    "tslib": "^2.6.2",
-    "typescript": "^5.4.5"
-  },
-  "peerDependencies": {
-    "react": "^18.2.0"
+    "rollup-plugin-terser": "^7.0.2",
+    "sass": "^1.78.0",
+    "storybook": "^8.3.1",
+    "typescript": "5.5.4",
+    "vite": "^5.4.6",
+    "vite-plugin-svgr": "^4.2.0"
   },
   "dependencies": {
-    "@rollup/plugin-alias": "^5.1.1",
     "formik": "^2.4.6",
-    "primeicons": "^7.0.0",
     "primereact": "^10.8.4",
-    "sass": "^1.80.6",
     "yup": "^1.4.0"
   }
 }

package/rollup.config.mjs

@@ -0,0 +1,95 @@
+import { readFileSync } from 'fs';
+import { defineConfig } from 'rollup';
+import resolve from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
+import typescript from '@rollup/plugin-typescript';
+import url from '@rollup/plugin-url';
+import svgr from '@svgr/rollup';
+import external from 'rollup-plugin-peer-deps-external';
+import postcss from 'rollup-plugin-postcss';
+import dts from 'rollup-plugin-dts';
+import { terser } from 'rollup-plugin-terser';
+import typescriptEngine from 'typescript';
+import alias from '@rollup/plugin-alias';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const packageJson = JSON.parse(readFileSync('./package.json'));
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const projectRootDir = path.resolve(__dirname);
+
+export default defineConfig(
+  {
+    input: './src/index.ts',
+    output: [
+      {
+        file: packageJson.main,
+        format: 'cjs',
+        sourcemap: false,
+        exports: 'named',
+        name: packageJson.name,
+      },
+      {
+        file: packageJson.module,
+        format: 'es',
+        exports: 'named',
+        sourcemap: false,
+      },
+    ],
+    plugins: [
+      postcss({
+        plugins: [],
+        minimize: true,
+      }),
+      alias({
+        entries: [
+          { find: "@powell/*", replacement: path.resolve(projectRootDir, '/src/powell/*') },
+        ]
+      }),
+      external({ includeDependencies: true }),
+      resolve(),
+      commonjs(),
+      typescript({
+        tsconfig: './tsconfig.json',
+        typescript: typescriptEngine,
+        sourceMap: false,
+        exclude: [
+          'coverage',
+          '.storybook',
+          'storybook-static',
+          'config',
+          'dist',
+          'node_modules/**',
+          '*.cjs',
+          '*.mjs',
+          '**/__snapshots__/*',
+          '**/__tests__',
+          '**/*.test.js+(|x)',
+          '**/*.test.ts+(|x)',
+          '**/*.mdx',
+          '**/*.story.ts+(|x)',
+          '**/*.story.js+(|x)',
+          '**/*.stories.ts+(|x)',
+          '**/*.stories.js+(|x)',
+          'setupTests.ts',
+          'vitest.config.ts',
+        ],
+      }),
+      url(),
+      svgr(),
+      terser(),
+    ],
+    onwarn: (warning, warn) => {
+      if (warning.code === 'MODULE_LEVEL_DIRECTIVE') {
+        return
+      }
+      warn(warning)
+    },
+  },
+  {
+    input: 'dist/esm/types/src/index.d.ts',
+    output: [{ file: 'dist/index.d.ts', format: 'esm' }],
+    external: [/\.(sc|sa|c)ss$/],
+    plugins: [dts()],
+  },
+);

package/src/components/Button/Button.scss

@@ -0,0 +1,43 @@
+.button {
+  position: relative;
+  background-color: #4caf50;
+  border: none;
+  font-size: 28px;
+  color: #ffffff;
+  padding: 20px;
+  width: 200px;
+  text-align: center;
+  -webkit-transition-duration: 0.4s; /* Safari */
+  transition-duration: 0.4s;
+  text-decoration: none;
+  overflow: hidden;
+  cursor: pointer;
+  box-shadow:
+    0 8px 16px 0 rgba(0, 0, 0, 0.2),
+    0 6px 20px 0 rgba(0, 0, 0, 0.19);
+
+  &:after {
+    content: '';
+    background: #f1f1f1;
+    display: block;
+    position: absolute;
+    padding-top: 300%;
+    padding-left: 350%;
+    margin-left: -20px !important;
+    margin-top: -120%;
+    opacity: 0;
+    transition: all 0.8s;
+  }
+
+  &:active:after {
+    padding: 0;
+    margin: 0;
+    opacity: 1;
+    transition: 0s;
+  }
+
+  &--dsiabled {
+    opacity: 0.5;
+    background-color: grey;
+  }
+}

package/src/components/Button/Button.stories.tsx

@@ -0,0 +1,13 @@
+import { Button } from './Button';
+
+export default {
+  title: 'Button',
+  component: Button,
+};
+
+export const Default = {
+  args: {
+    disabled: false,
+    children: `I'm a Button`,
+  },
+};

package/src/components/Button/Button.tsx

@@ -0,0 +1,19 @@
+import React, { ButtonHTMLAttributes, FC, ReactNode } from 'react';
+
+import './Button.scss';
+
+export interface IButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  children?: ReactNode;
+}
+
+export const Button: FC<IButtonProps> = ({ onClick, disabled, className, children, ...rest }) => (
+  <button
+    type="button"
+    className={`button ${className} ${disabled && 'button--dsiabled'}`}
+    onClick={onClick}
+    disabled={disabled}
+    {...rest}
+  >
+    {children}
+  </button>
+);

package/src/components/Button/index.ts

@@ -0,0 +1 @@
+export * from './Button';

package/src/components/index.ts

@@ -0,0 +1 @@
+export * from './Button';

package/src/index.ts

@@ -0,0 +1 @@
+export * from './components';

package/src/powell/api/PowellProvider.tsx

@@ -0,0 +1,37 @@
+import {PropsWithChildren} from "react";
+import {configService, powellDefaults, $PrimeReactProvider} from "@powell/api";
+import {PowellConfig, ThemeName} from "@powell/models";
+
+const createThemeLink = () => {
+  const headEl = document.head;
+  const linkEl = document.createElement("link");
+  linkEl.rel = "stylesheet";
+  linkEl.type = "text/css";
+  linkEl.id = "powell-theme-link";
+  headEl.appendChild(linkEl);
+  return linkEl;
+}
+
+const applyTheme = (theme: ThemeName) => {
+  let themeEl: HTMLLinkElement = document.getElementById('powell-theme-link') as HTMLLinkElement;
+  if (!themeEl) {
+    themeEl = createThemeLink();
+  }
+  const themeLink = `/src/powell/themes/${theme}.css`;
+  themeEl.setAttribute('href', themeLink);
+}
+
+export const PowellProvider = (props: PropsWithChildren<{ config?: PowellConfig }>) => {
+  const {children, config} = props;
+  const defaultConfig: PowellConfig = {
+    ...powellDefaults,
+    ...config
+  };
+  configService.set(defaultConfig);
+  applyTheme(defaultConfig.theme!);
+  return (
+      <$PrimeReactProvider value={defaultConfig}>
+        {children}
+      </$PrimeReactProvider>
+  )
+}

package/src/powell/api/configService.ts

@@ -0,0 +1,4 @@
+import {globalState} from "@powell/utils";
+import {PowellConfig} from "@powell/models";
+
+export const configService = globalState<PowellConfig>({});

package/src/powell/api/forms.ts

@@ -0,0 +1,145 @@
+import {
+  ArrayHelpers,
+  ComponentDecorator,
+  CompositeComponent,
+  connect,
+  ErrorMessage,
+  ErrorMessageProps,
+  FastField,
+  FastFieldAttributes,
+  FastFieldConfig,
+  FastFieldProps,
+  Field,
+  FieldArray,
+  FieldArrayConfig,
+  FieldArrayRenderProps,
+  FieldAttributes,
+  FieldConfig,
+  FieldHelperProps,
+  FieldHookConfig,
+  FieldInputProps,
+  FieldMetaProps,
+  FieldProps,
+  FieldValidator,
+  Form,
+  Formik,
+  FormikBag,
+  FormikComputedProps,
+  FormikConfig,
+  FormikConsumer,
+  FormikContext,
+  FormikContextType,
+  FormikErrors,
+  FormikFormProps,
+  FormikHandlers,
+  FormikHelpers,
+  FormikProps,
+  FormikProvider,
+  FormikRegistration,
+  FormikSharedConfig,
+  FormikState,
+  FormikTouched,
+  FormikValues,
+  GenericFieldHTMLAttributes,
+  getActiveElement,
+  getIn,
+  InferableComponentDecorator,
+  InjectedFormikProps,
+  insert,
+  isEmptyArray,
+  isEmptyChildren,
+  isFunction,
+  isInputEvent,
+  isInteger,
+  isNaN,
+  isObject,
+  isPromise,
+  isString,
+  move,
+  prepareDataForValidation,
+  replace,
+  setIn,
+  setNestedObjectValues,
+  SharedRenderProps,
+  swap,
+  useField,
+  useFormik,
+  useFormikContext,
+  validateYupSchema,
+  withFormik,
+  WithFormikConfig,
+  yupToFormErrors,
+} from 'formik';
+import * as Yup from 'yup';
+
+export {ErrorMessage as $ErrorMessage};
+export type {ErrorMessageProps as $ErrorMessageProps};
+export type {FieldProps as $FieldProps};
+export {Field as $Field};
+export {FieldArray as $FieldArray};
+export {Form as $Form};
+export type {ArrayHelpers as $ArrayHelpers};
+export type {FieldArrayConfig as $FieldArrayConfig};
+export type {FastFieldConfig as $FastFieldConfig};
+export type {FastFieldProps as $FastFieldProps};
+export {FastField as $FastField};
+export type {FastFieldAttributes as $FastFieldAttributes};
+export type {FieldConfig as $FieldConfig};
+export type {FieldAttributes as $FieldAttributes};
+export type {FieldHookConfig as $FieldHookConfig};
+export type {FieldInputProps as $FieldInputProps};
+export type {FieldMetaProps as $FieldMetaProps};
+export type {FieldHelperProps as $FieldHelperProps};
+export type {FieldValidator as $FieldValidator};
+export type {FieldArrayRenderProps as $FieldArrayRenderProps};
+export {useField as $useField};
+export type {FormikProps as $FormikProps};
+export type {FormikComputedProps as $FormikComputedProps};
+export type {FormikFormProps as $FormikFormProps};
+export {Formik as $Formik};
+export type {FormikConfig as $FormikConfig};
+export type {FormikSharedConfig as $FormikSharedConfig};
+export type {FormikBag as $FormikBag};
+export {FormikConsumer as $FormikConsumer};
+export type {FormikErrors as $FormikErrors};
+export {FormikContext as $FormikContext};
+export type {FormikContextType as $FormikContextType};
+export type {FormikHandlers as $FormikHandlers};
+export type {FormikHelpers as $FormikHelpers};
+export {FormikProvider as $FormikProvider};
+export type {FormikRegistration as $FormikRegistration};
+export type {FormikState as $FormikState};
+export type {FormikTouched as $FormikTouched};
+export type {FormikValues as $FormikValues};
+export {useFormikContext as $useFormikContext};
+export type {WithFormikConfig as $WithFormikConfig};
+export type {GenericFieldHTMLAttributes as $GenericFieldHTMLAttributes};
+export type {SharedRenderProps as $SharedRenderProps};
+export {connect as $connect};
+export {getIn as $getIn};
+export {isEmptyArray as $isEmptyArray};
+export {useFormik as $useFormik};
+export {withFormik as $withFormik};
+export type {ComponentDecorator as $ComponentDecorator};
+export type {InferableComponentDecorator as $InferableComponentDecorator};
+export {insert as $insert};
+export type {CompositeComponent as $CompositeComponent};
+export {isEmptyChildren as $isEmptyChildren};
+export {isInputEvent as $isInputEvent};
+export {isNaN as $isNaN};
+export type {InjectedFormikProps as $InjectedFormikProps};
+export {isFunction as $isFunction};
+export {move as $move};
+export {isInteger as $isInteger};
+export {isObject as $isObject};
+export {isPromise as $isPromise};
+export {isString as $isString};
+export {swap as $swap};
+export {replace as $replace};
+export {setIn as $setIn};
+export {prepareDataForValidation as $prepareDataForValidation};
+export {setNestedObjectValues as $setNestedObjectValues};
+export {validateYupSchema as $validateYupSchema};
+export {yupToFormErrors as $yupToFormErrors};
+export {getActiveElement as $getActiveElement};
+export {Yup as $Yup};

package/src/powell/api/index.ts

@@ -0,0 +1,5 @@
+export * from './configService';
+export * from './forms';
+export * from './powellDefaults';
+export * from './PowellProvider';
+export * from './primereact';

package/src/powell/api/powellDefaults.ts

@@ -0,0 +1,11 @@
+import {PowellConfig} from "@powell/models";
+
+export const powellDefaults: PowellConfig = {
+  theme: 'lara-light-cyan',
+  rtl: false,
+  showRequiredStar: true,
+  ripple: true,
+  inputSize: 'md',
+  labelPosition: 'fix-top',
+  fixLabelPosition: 'fix-side'
+}