powell-react 0.0.0

package/dist/esm/types/src/powell/components/SelectButton/index.d.ts

@@ -0,0 +1 @@
+export * from "./SelectButton";

package/dist/esm/types/src/powell/components/Slider/Slider.d.ts

@@ -0,0 +1,21 @@
+import { ChangeEvent, ReactNode } from "react";
+import { FixLabelPosition } from "@powell/models";
+import { $SliderProps } from "@powell/api";
+import { SafeAny } from "@powell/models";
+import '@components/Slider/Slider.scss';
+interface SliderProps extends Omit<$SliderProps, 'checked'> {
+    checked?: boolean;
+    name?: string;
+    parseError?: (error: string) => ReactNode;
+    transform?: {
+        input?: (value: SafeAny) => string;
+        output?: (event: ChangeEvent<HTMLInputElement>) => SafeAny;
+    };
+    showRequiredStar?: boolean;
+    rtl?: boolean;
+    label?: string;
+    hint?: string;
+    labelPosition?: FixLabelPosition;
+}
+export declare const Slider: (props: SliderProps) => import("react").JSX.Element;
+export {};

package/dist/esm/types/src/powell/components/Slider/index.d.ts

@@ -0,0 +1 @@
+export * from "./Slider";

package/dist/esm/types/src/powell/components/ToggleButton/ToggleButton.d.ts

@@ -0,0 +1,21 @@
+import { ChangeEvent, ReactNode } from "react";
+import { FixLabelPosition } from "@powell/models";
+import { $ToggleButtonProps } from "@powell/api";
+import { SafeAny } from "@powell/models";
+import '@components/ToggleButton/ToggleButton.scss';
+interface ToggleButtonProps extends Omit<$ToggleButtonProps, 'checked'> {
+    checked?: boolean;
+    name?: string;
+    parseError?: (error: string) => ReactNode;
+    transform?: {
+        input?: (value: SafeAny) => string;
+        output?: (event: ChangeEvent<HTMLInputElement>) => SafeAny;
+    };
+    showRequiredStar?: boolean;
+    rtl?: boolean;
+    label?: string;
+    hint?: string;
+    labelPosition?: FixLabelPosition;
+}
+export declare const ToggleButton: (props: ToggleButtonProps) => import("react").JSX.Element;
+export {};

package/dist/esm/types/src/powell/components/ToggleButton/index.d.ts

@@ -0,0 +1 @@
+export * from "./ToggleButton";

package/dist/esm/types/src/powell/components/TreeSelect/TreeSelect.d.ts

@@ -0,0 +1,24 @@
+import { ChangeEvent, ReactNode } from "react";
+import { Addon, LabelPosition, Size } from "@powell/models";
+import { $IconFieldProps, $TreeSelectProps } from "@powell/api";
+import { SafeAny } from "@powell/models";
+import '@components/TreeSelect/TreeSelect.scss';
+interface TreeSelectProps extends $TreeSelectProps {
+    name?: string;
+    parseError?: (error: string) => ReactNode;
+    transform?: {
+        input?: (value: SafeAny) => string;
+        output?: (event: ChangeEvent<HTMLInputElement>) => SafeAny;
+    };
+    showRequiredStar?: boolean;
+    rtl?: boolean;
+    label?: string;
+    icon?: string | ReactNode;
+    hint?: string;
+    inputSize?: Size;
+    addon?: Addon;
+    iconPosition?: $IconFieldProps["iconPosition"];
+    labelPosition?: LabelPosition;
+}
+export declare const TreeSelect: (props: TreeSelectProps) => import("react").JSX.Element;
+export {};

package/dist/esm/types/src/powell/components/TreeSelect/index.d.ts

@@ -0,0 +1 @@
+export * from "./TreeSelect";

package/dist/esm/types/src/powell/components/TriStateCheckbox/TriStateCheckbox.d.ts

@@ -0,0 +1,21 @@
+import { ChangeEvent, ReactNode } from "react";
+import { FixLabelPosition } from "@powell/models";
+import { $TriStateCheckboxProps } from "@powell/api";
+import { SafeAny } from "@powell/models";
+import '@components/TriStateCheckbox/TriStateCheckbox.scss';
+interface TriStateCheckboxProps extends Omit<$TriStateCheckboxProps, 'checked'> {
+    checked?: boolean;
+    name?: string;
+    parseError?: (error: string) => ReactNode;
+    transform?: {
+        input?: (value: SafeAny) => string;
+        output?: (event: ChangeEvent<HTMLInputElement>) => SafeAny;
+    };
+    showRequiredStar?: boolean;
+    rtl?: boolean;
+    label?: string;
+    hint?: string;
+    labelPosition?: FixLabelPosition;
+}
+export declare const TriStateCheckbox: (props: TriStateCheckboxProps) => import("react").JSX.Element;
+export {};

package/dist/esm/types/src/powell/components/TriStateCheckbox/index.d.ts

@@ -0,0 +1 @@
+export * from "./TriStateCheckbox";

package/dist/esm/types/src/powell/hooks/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./useApplyConfig";
+export * from "./useFormContext";
+export * from "./usePowellConfig";

package/dist/esm/types/src/powell/hooks/useApplyConfig.d.ts

@@ -0,0 +1,17 @@
+import { PowellConfig } from "@powell/models";
+interface ApplyConfigOptions {
+    isFixLabel?: boolean;
+    sizable?: boolean;
+}
+interface CommonConfigProps {
+    rtl?: PowellConfig["rtl"];
+    showRequiredStar?: PowellConfig["showRequiredStar"];
+    labelPosition?: PowellConfig["labelPosition"];
+    inputSize?: PowellConfig["inputSize"];
+}
+export declare const useApplyConfig: <T extends CommonConfigProps>(props: T, options?: ApplyConfigOptions) => T & {
+    rtl: boolean | undefined;
+    showRequiredStar: boolean | undefined;
+    labelPosition: import("@powell/models").LabelPosition | undefined;
+};
+export {};

package/dist/esm/types/src/powell/hooks/useFormContext.d.ts

@@ -0,0 +1,2 @@
+import { $FormikContextType, $FormikValues } from "@powell/api";
+export declare const useFormContext: () => $FormikContextType<$FormikValues> | null;

package/dist/esm/types/src/powell/hooks/usePowellConfig.d.ts

@@ -0,0 +1,2 @@
+import { PowellConfig } from "@powell/models";
+export declare const usePowellConfig: () => [config: PowellConfig, (c: Partial<PowellConfig>) => any];

package/dist/esm/types/src/powell/index.d.ts

@@ -0,0 +1,29 @@
+export { PowellProvider } from "./api/PowellProvider";
+export { AutoComplete } from "./components/AutoComplete";
+export { Button } from "./components/Button";
+export { CascadeSelect } from "./components/CascadeSelect";
+export { Checkbox } from "./components/Checkbox";
+export { Chips } from "./components/Chips";
+export { ColorPicker } from "./components/ColorPicker";
+export { Dropdown } from "./components/Dropdown";
+export { Editor } from "./components/Editor";
+export { FormContainer } from "./components/FormContainer";
+export { InputMask } from "./components/InputMask";
+export { InputNumber } from "./components/InputNumber";
+export { InputOtp } from "./components/InputOtp";
+export { InputPassword } from "./components/InputPassword";
+export { InputSwitch } from "./components/InputSwitch";
+export { InputText } from "./components/InputText";
+export { InputTextarea } from "./components/InputTextarea";
+export { Knob } from "./components/Knob";
+export { ListBox } from "./components/ListBox";
+export { Mention } from "./components/Mention";
+export { MultiSelect } from "./components/MultiSelect";
+export { MultiStateCheckbox } from "./components/MultiStateCheckbox";
+export { RadioGroup } from "./components/RadioGroup";
+export { Rating } from "./components/Rating";
+export { SelectButton } from "./components/SelectButton";
+export { Slider } from "./components/Slider";
+export { ToggleButton } from "./components/ToggleButton";
+export { TreeSelect } from "./components/TreeSelect";
+export { TriStateCheckbox } from "./components/TriStateCheckbox";

package/dist/esm/types/src/powell/models/common.d.ts

@@ -0,0 +1,7 @@
+export type ButtonAppearance = 'default' | 'text' | 'outlined' | 'link';
+export type Direction = 'rtl' | 'ltr';
+export type Size = 'sm' | 'md' | 'lg';
+export type Orientation = 'horizontal' | 'vertical';
+export type Position = 'left' | 'right' | 'top' | 'bottom';
+export type Nullable<T = void> = T | null | undefined;
+export type SafeAny = any;

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

@@ -0,0 +1,13 @@
+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 {
+    theme?: ThemeName;
+    rtl?: boolean;
+    showRequiredStar?: boolean;
+    inputSize?: Size;
+    labelPosition?: LabelPosition;
+    fixLabelPosition?: FixLabelPosition;
+}
+export {};

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

@@ -0,0 +1,28 @@
+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'>;
+export type IconPosition = Exclude<Position, 'top' | 'bottom'>;
+export interface AddonConfig {
+    type: 'button' | 'icon' | 'text';
+    label?: string;
+    severity?: $ButtonProps["severity"];
+    appearance?: ButtonAppearance;
+    icon?: string;
+    iconPosition?: IconPosition;
+    text?: string;
+    onClick?: (event: MouseEvent<HTMLElement>) => void;
+}
+export interface Addon {
+    before?: AddonConfig;
+    after?: AddonConfig;
+}
+export type TransformOptions<V = SafeAny, T = SafeAny> = {
+    value: Nullable<V>;
+    onChange: (...event: SafeAny[]) => void;
+    transform?: {
+        input?: (value: Nullable<V>) => SafeAny;
+        output?: (...event: T[]) => SafeAny;
+    };
+};

package/dist/esm/types/src/powell/models/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./common";
+export * from "./config";
+export * from "./forms";

package/dist/esm/types/src/powell/utils/globalState.d.ts

@@ -0,0 +1,19 @@
+import { SetStateAction } from "react";
+type Set<T> = (newState: SetStateAction<T>, callback?: (newState: T) => void) => void;
+type UseSelector<T> = <TSelected = unknown>(selector: (state: T) => TSelected, equalityFn?: Comparator<TSelected>) => TSelected;
+export interface StateWithValue<T> {
+    use: () => [T, Set<T>];
+    useValue: () => T;
+    get: () => T;
+    useSelector: UseSelector<T>;
+    set: Set<T>;
+    reset: () => void;
+    subscribe(subscriber: SubscriberFunc<T>): () => void;
+}
+type SubscriberFunc<T> = (newState: T, previousState: T) => void;
+interface Options<T> {
+    onSet?: SubscriberFunc<T>;
+}
+type Comparator<TSelected = unknown> = (a: TSelected, b: TSelected) => boolean;
+export declare function globalState<T>(initialValue: T, options?: Options<T>): StateWithValue<T>;
+export {};

package/dist/esm/types/src/powell/utils/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./globalState";
+export * from "./utilsService";

package/dist/esm/types/src/powell/utils/utilsService.d.ts

@@ -0,0 +1,8 @@
+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;
+    onChange: (...event: T[]) => void;
+};

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

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

package/package.json

@@ -0,0 +1,70 @@
+{
+  "name": "powell-react",
+  "version": "0.0.0",
+  "description": "",
+  "author": "itismohammadreza",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": ""
+  },
+  "homepage": "",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/index.d.ts",
+  "type": "module",
+  "engines": {
+    "node": ">=18"
+  },
+  "scripts": {
+    "start": "npm run storybook",
+    "build": "rimraf dist && rollup -c",
+    "release": "npm run build && npm publish",
+    "storybook": "storybook dev -p 6006",
+    "storybook:build": "storybook build"
+  },
+  "peerDependencies": {
+    "react": "18.x",
+    "react-dom": "18.x"
+  },
+  "devDependencies": {
+    "@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",
+    "@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",
+    "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",
+    "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": {
+    "formik": "^2.4.6",
+    "primereact": "^10.8.4",
+    "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>({});