+ * The string representation of the object. + *
+ * + * @return void + * + * @since 5.1.0 + */ + public function unserialize($serialized) { + // TODO: Implement unserialize() method. + } + + /** + * __serialize. + * + * @return array+ * The string representation of the object. + *
+ * + * @return void + * + * @since 5.1.0 + */ + public function unserialize($serialized): void { + // TODO: Implement unserialize() method. + } + + /** + * __clone. + * + * @return void + */ + public function __clone(): void { + $this->type = clone $this->type; + } + + /** + * __serialize. + * + * @return mixed[] + */ + public function __serialize(): array { + return [$this->serialize()]; + } + + /** + * __unserialize. + * + * @param mixed $data + * + * @return void + */ + public function __unserialize($data): void { + // TODO: Implement __unserialize() method. + } + + /** + * __updateTable. + * + * @param \vhs\database\Table $table + * + * @return void + */ + public function __updateTable(Table &$table) { + $this->table = $table; + } +} diff --git a/packages/backend-php/vhs/database/Columns.php b/packages/backend-php/vhs/database/Columns.php new file mode 100644 index 00000000..31d56e1b --- /dev/null +++ b/packages/backend-php/vhs/database/Columns.php @@ -0,0 +1,151 @@ +__columns = $columns; + } + + /** + * compare Column $a to Column $b. + * + * @param Column $a + * @param Column $b + * + * @return bool + */ + public static function Equals(Column $a, Column $b) { + return $a->name === $b->name && $a->table === $b->table && $a->type === $b->type; + } + + /** + * Check if Column $a's name matches $name. + * + * @param Column $a + * @param string $name + * + * @return bool + */ + public static function EqualsByName(Column $a, $name) { + return $a->name === $name; + } + + /** + * add a column definition. + * + * @param Column $column + * + * @return \vhs\database\Column|null + */ + public function add(Column $column) { + if (!$this->contains($column->name)) { + array_push($this->__columns, $column); + + return $column; + } + + return null; + } + + /** + * @return Column[] + */ + public function all() { + return $this->__columns; + } + + /** + * check if Column set contains the specified column name. + * + * @param string $column + * + * @return bool + */ + public function contains($column) { + foreach ($this->__columns as $col) { + if ($col->name == $column) { + return true; + } + } + + return false; + } + + /** + * get a column by name. + * + * @param string $name + * + * @return \vhs\database\Column|null + */ + public function getByName($name) { + foreach ($this->__columns as $col) { + if ($col->name == $name) { + return $col; + } + } + + return null; + } + + /** + * get column names. + * + * @return string[] + */ + public function names() { + $names = []; + + foreach ($this->all() as $col) { + array_push($names, $col->name); + } + + return $names; + } + + /** + * remove a column. + * + * @param Column $column + * + * @return void + */ + public function remove(Column $column) { + if (!$this->contains($column->name)) { + return; + } + + foreach ($this->__columns as $key => $col) { + if (self::Equals($col, $column)) { + unset($this->__columns[$key]); + } + } + } + + /** + * column getter. + * + * @param string $name + * + * @return \vhs\database\Column|null + */ + public function __get($name) { + return $this->getByName($name); + } +} diff --git a/packages/backend-php/vhs/database/ConnectionInfo.php b/packages/backend-php/vhs/database/ConnectionInfo.php new file mode 100644 index 00000000..637f2d3b --- /dev/null +++ b/packages/backend-php/vhs/database/ConnectionInfo.php @@ -0,0 +1,29 @@ + + */ + abstract public function getDetails(); + + /** + * __toString. + * + * @return string + */ + public function __toString() { + return var_export($this->getDetails(), true); + } +} diff --git a/packages/backend-php/vhs/database/Database.php b/packages/backend-php/vhs/database/Database.php new file mode 100644 index 00000000..1c0506bf --- /dev/null +++ b/packages/backend-php/vhs/database/Database.php @@ -0,0 +1,314 @@ +setLoggerInternal(new SilentLogger()); + $this->setEngineInternal(new InMemoryEngine()); + $this->setRethrowInternal(true); + } + + /** + * __destruct. + * + * @return void + */ + public function __destruct() { + $this->engine->disconnect(); + } + + /** + * arbitrary. + * + * @param mixed $command + * + * @return mixed + */ + public static function arbitrary($command) { + /** @var Database $db */ + $db = self::getInstance(); + + return $db->invokeEngine(function () use ($db, $command) { + // TODO warn that this is not ideal + return $db->engine->arbitrary($command); + }); + } + + /** + * count. + * + * @param \vhs\database\queries\QueryCount $query + * + * @return mixed + */ + public static function count(QueryCount $query) { + /** @var Database $db */ + $db = self::getInstance(); + + return $db->invokeEngine(function () use ($db, $query) { + return $db->engine->count($query); + }); + } + + /** + * DateFormat. + * + * @return string + */ + public static function DateFormat() { + return self::getInstance()->engine->DateFormat(); + } + + /** + * delete. + * + * @param \vhs\database\queries\QueryDelete $query + * + * @return mixed + */ + public static function delete(QueryDelete $query) { + /** @var Database $db */ + $db = self::getInstance(); + + return $db->invokeEngine(function () use ($db, $query) { + return $db->engine->delete($query); + }); + } + + /** + * exists. + * + * @param \vhs\database\queries\QuerySelect $query + * + * @return mixed + */ + public static function exists(QuerySelect $query) { + /** @var Database $db */ + $db = self::getInstance(); + + return $db->invokeEngine(function () use ($db, $query) { + return $db->engine->exists($query); + }); + } + + /** + * insert. + * + * @param \vhs\database\queries\QueryInsert $query + * + * @return mixed + */ + public static function insert(QueryInsert $query) { + /** @var Database $db */ + $db = self::getInstance(); + + return $db->invokeEngine(function () use ($db, $query) { + return $db->engine->insert($query); + }); + } + + /** + * scalar. + * + * @param \vhs\database\queries\QuerySelect $query + * + * @return mixed + */ + public static function scalar(QuerySelect $query) { + /** @var Database $db */ + $db = self::getInstance(); + + return $db->invokeEngine(function () use ($db, $query) { + return $db->engine->scalar($query); + }); + } + + /** + * select. + * + * @param \vhs\database\queries\QuerySelect $query + * + * @return mixed + */ + public static function select(QuerySelect $query) { + /** @var Database $db */ + $db = self::getInstance(); + + return $db->invokeEngine(function () use ($db, $query) { + return $db->engine->select($query); + }); + } + + /** + * setEngine. + * + * @param \vhs\database\Engine $engine + * + * @return void + */ + public static function setEngine(Engine $engine) { + /** @var Database $db */ + $db = self::getInstance(); + + $db->setEngineInternal($engine); + } + + /** + * setLogger. + * + * @param \vhs\Logger $logger + * + * @return void + */ + public static function setLogger(Logger $logger) { + $db = self::getInstance(); + + $db->setLoggerInternal($logger); + } + + /** + * setRethrow. + * + * @param mixed $rethrow + * + * @return void + */ + public static function setRethrow($rethrow) { + /** @var Database $db */ + $db = self::getInstance(); + + $db->setRethrowInternal($rethrow); + } + + /** + * update. + * + * @param \vhs\database\queries\QueryUpdate $query + * + * @return mixed + */ + public static function update(QueryUpdate $query) { + /** @var Database $db */ + $db = self::getInstance(); + + return $db->invokeEngine(function () use ($db, $query) { + return $db->engine->update($query); + }); + } + + /** + * handleException. + * + * @param mixed $exception + * + * @return void + */ + private function handleException($exception) { + $this->logger->log($exception); + + if ($this->rethrow) { + throw $exception; + } + } + + /** + * invokeEngine. + * + * @param callable $func + * + * @return mixed + */ + private function invokeEngine(callable $func) { + try { + $this->engine->connect(); + } catch (DatabaseConnectionException $ex) { + $this->handleException($ex); + } + + $retval = null; + + try { + $retval = $func(); + } catch (DatabaseException $ex) { + $this->handleException($ex); + } + + return $retval; + } + + /** + * setEngineInternal. + * + * @param \vhs\database\Engine $engine + * + * @return void + */ + private function setEngineInternal(Engine $engine) { + if (!is_null($this->engine)) { + $this->engine->disconnect(); + } + + $this->engine = $engine; + } + + /** + * setLoggerInternal. + * + * @param \vhs\Logger $logger + * + * @return void + */ + private function setLoggerInternal(Logger $logger) { + $this->logger = $logger; + } + + /** + * setRethrowInternal. + * + * @param mixed $rethrow + * + * @return void + */ + private function setRethrowInternal($rethrow) { + $this->rethrow = $rethrow; + } +} diff --git a/packages/backend-php/vhs/database/Element.php b/packages/backend-php/vhs/database/Element.php new file mode 100644 index 00000000..0594fdef --- /dev/null +++ b/packages/backend-php/vhs/database/Element.php @@ -0,0 +1,27 @@ +where = $where; + } + + /** + * Where. + * + * @param \vhs\database\wheres\Where $where + * + * @return \vhs\database\On + */ + public static function Where(Where $where) { + return new On($where); + } + + /** + * @param \vhs\database\IOnGenerator $generator + * @param mixed $value + * + * @return mixed + */ + public function generate(IGenerator $generator, $value = null) { + return $this->generateOn($generator); + } + + /** + * generateOn. + * + * @param \vhs\database\IOnGenerator $generator + * + * @return mixed + */ + public function generateOn(IOnGenerator $generator) { + return $generator->generateOn($this); + } + + /** + * __updateTable. + * + * @param \vhs\database\Table $table + * + * @return void + */ + public function __updateTable(Table &$table) { + $this->where->__updateTable($table); + } +} diff --git a/packages/backend-php/vhs/database/Table.php b/packages/backend-php/vhs/database/Table.php new file mode 100644 index 00000000..6475733c --- /dev/null +++ b/packages/backend-php/vhs/database/Table.php @@ -0,0 +1,172 @@ +name = $name; + + if (is_null($alias)) { + // 'm gvn' hr ll sh's gt, cptn! + $alias = str_ireplace(['a', 'e', 'i', 'o', 'u'], '', $name); + } + + $this->aliasPrefix = $alias; + $this->alias = $alias . (string) self::$cloneIndex; + + if (is_null($this->joins)) { + $this->joins = []; + } + + foreach ($join as $j) { + array_push($this->joins, $j); + } + + $this->columns = new Columns(); + } + + /** + * add a column. + * + * @param string $name + * @param \vhs\database\types\Type $type + * @param bool $serializable + * + * @return \vhs\database\Column|null + */ + public function addColumn($name, Type $type, $serializable = true) { + return $this->columns->add(new Column($this, $name, $type, $serializable)); + } + + /** + * @param \vhs\database\IGenerator $generator + * @param mixed|null $value + * + * @return mixed + */ + public function generate(IGenerator $generator, $value = null) { + /** @var ITableGenerator $generator */ + return $this->generateTable($generator); + } + + /** + * @param ITableGenerator $generator + * + * @return mixed + */ + public function generateTable(ITableGenerator $generator) { + return $generator->generateTable($this); + } + + /** + * @return PrimaryKey[] + */ + public function getPrimaryKeys() { + $pks = []; + foreach ($this->constraints as $constraint) { + if ($constraint instanceof PrimaryKey) { + array_push($pks, $constraint); + } + } + + return $pks; + } + + /** + * Undocumented function. + * + * @param \vhs\database\access\IAccess ...$checks + * + * @return void + */ + public function setAccess(IAccess ...$checks) { + $this->checks = $checks; + } + + /** + * set constraints. + * + * @param \vhs\database\constraints\Constraint ...$constraints + * + * @return void + */ + public function setConstraints(Constraint ...$constraints) { + $this->constraints = $constraints; + } + + /** + * __clone. + * + * @return void + */ + public function __clone(): void { + parent::__clone(); + + self::$cloneIndex += 1; + + $this->alias = $this->aliasPrefix . (string) self::$cloneIndex; + + foreach ($this->joins as $join) { + $join->__updateTable($this); + } + + foreach ($this->columns->all() as $column) { + $column->__updateTable($this); + } + + foreach ($this->constraints as $constraint) { + $constraint->__updateTable($this); + } + } +} diff --git a/packages/backend-php/vhs/database/access/IAccess.php b/packages/backend-php/vhs/database/access/IAccess.php new file mode 100644 index 00000000..87af9c15 --- /dev/null +++ b/packages/backend-php/vhs/database/access/IAccess.php @@ -0,0 +1,38 @@ +column = $column; + } + + /** + * ForeignKey. + * + * @param \vhs\database\Column $column + * @param \vhs\database\Table $foreignTable + * @param \vhs\database\Column $on + * + * @return \vhs\database\constraints\ForeignKey + */ + public static function ForeignKey(Column $column, Table &$foreignTable, Column $on) { + return new ForeignKey($column, $foreignTable, $on); + } + + /** + * PrimaryKey. + * + * @param \vhs\database\Column $column + * + * @return \vhs\database\constraints\PrimaryKey + */ + public static function PrimaryKey(Column $column) { + return new PrimaryKey($column); + } + + /** + * generateConstraint. + * + * @param \vhs\database\constraints\IConstraintGenerator $generator + * + * @return mixed + */ + abstract public function generateConstraint(IConstraintGenerator $generator); + + /** + * @param \vhs\database\IGenerator $generator + * @param mixed|null $value + * + * @return mixed + */ + public function generate(IGenerator $generator, $value = null) { + /** @var IConstraintGenerator $generator */ + return $this->generateConstraint($generator); + } + + /** + * __updateTable. + * + * @param \vhs\database\Table $table + * + * @return void + */ + public function __updateTable(Table &$table) { + $this->column->__updateTable($table); + } +} diff --git a/vhs/database/constraints/ForeignKey.php b/packages/backend-php/vhs/database/constraints/ForeignKey.php similarity index 87% rename from vhs/database/constraints/ForeignKey.php rename to packages/backend-php/vhs/database/constraints/ForeignKey.php index 90f97c0a..f55fd99f 100644 --- a/vhs/database/constraints/ForeignKey.php +++ b/packages/backend-php/vhs/database/constraints/ForeignKey.php @@ -12,6 +12,7 @@ use vhs\database\Column; use vhs\database\Table; +/** @typescript */ class ForeignKey extends Constraint { /** @var Column */ public $on; @@ -29,7 +30,12 @@ public function generateConstraint(IConstraintGenerator $generator) { return $generator->generateForeignKey($this); } - public function __clone() { + /** + * __clone. + * + * @return void + */ + public function __clone(): void { $this->on = clone $this->on; } diff --git a/packages/backend-php/vhs/database/constraints/IConstraintGenerator.php b/packages/backend-php/vhs/database/constraints/IConstraintGenerator.php new file mode 100644 index 00000000..12c8e4bd --- /dev/null +++ b/packages/backend-php/vhs/database/constraints/IConstraintGenerator.php @@ -0,0 +1,33 @@ +generatePrimaryKey($this); diff --git a/packages/backend-php/vhs/database/engines/memory/InMemoryEngine.php b/packages/backend-php/vhs/database/engines/memory/InMemoryEngine.php new file mode 100644 index 00000000..d0ecae67 --- /dev/null +++ b/packages/backend-php/vhs/database/engines/memory/InMemoryEngine.php @@ -0,0 +1,318 @@ + + */ + private $datastore = []; + + /** + * generator. + * + * @var mixed + */ + private $generator; + + /** + * keyIncrementors. + * + * @var array+I.e. an _atom_ is a component of bare function where as a molecule in increasingly complex, and so on. + +This project divides components based on complexity and the inclusion of other components and their respective complexity levels.
+I.e. a simple component that imports another component or external components will always at least be a Molecule. + +This project uses the following levels to achieve this: + +- _Atoms_ are re-usable, simple HTML components +- _Molecules_ are fundamental building blocks that import at least either an Atom or an external component +- _Particles_ offer more functionality (and import Molecule components) +- _Composites_ are re-usable (template) components (and import Particle components) +- _Materials_ are fully re-usable complex modules/components (and import Composite components) + +**Notes**: + +> - A good way to look at classification is that Atoms may only use plain HTML (and not import other components), and every layer beyond an Atom is determined by the highest layer imported. E.g. a Molecule component will always import at least one (1) Atom or external component, and a Particle component will at least import one (1) Molecule component. +> - External components always count as Atoms. +> - If a component has integrated sub-components, count this as one complexity layer and count from there.
E.g. if a sub-component imports a Molecule, then the main component will be a Composite level component.
(Molecule->Particle->Composite). See the Menu component as an example. +> - Every type of component can be scaffolded by using the `pnpm create:_type_` command.
+> E.g. `pnpm create:atom Logo` will create a template component by the name of `Logo` in `src/components/01-atoms/Logo`. + +### Secondary Components + +In addition to the "basic" components above, this project separates the following types of components: + +- _Layouts_ for general layout components. +- _Integrated Pages_ for common components that will adapt based on props passed. (E.g. pages in this directory can be call from an admin route with an admin prop to show the admin page instead of the user page.) +- _Pages_ divided in logical groupings. + - _Admin_ for admin page components. + - _Common_ for non-authenticated page components. + - _User_ for user page components. +- _App_ for app components. +- _Providers_ for React Content Provider components. +- _Templates_ for `generate-react-cli` template components. + +### Folder Structure + +Furthermore, all components use a numbered naming convention to enforce consistent directory ordering: + +- `src/components/00-components` +- `src/components/01-atoms` +- `src/components/02-molecules` +- `src/components/03-particles` +- `src/components/04-composites` +- `src/components/05-materials` +- `src/components/06-layouts` +- `src/components/07-integrated-pages` +- `src/components/07-pages` +- `src/components/08-app` +- `src/components/09-providers` +- `src/components/99-templates` + +**Note**: + +> While new components may be created as a `component` and moved to the appropriate directory later, but components should never be committed to the `00-components` directory. + +## Routing + +The basic page/route workflow consists of a `route` file (that extends a particular `layout`) which calls a `page` that imports all the relevant components. diff --git a/packages/frontend-react/eslint.config.mjs b/packages/frontend-react/eslint.config.mjs new file mode 100644 index 00000000..5482acf9 --- /dev/null +++ b/packages/frontend-react/eslint.config.mjs @@ -0,0 +1,100 @@ +import pluginRouter from '@tanstack/eslint-plugin-router' +import cjs from '@tyisi/config-eslint/cjs' +import js from '@tyisi/config-eslint/js' +import mjs from '@tyisi/config-eslint/mjs' +import ts from '@tyisi/config-eslint/ts' +import tsx from '@tyisi/config-eslint/tsx' +import pluginReactHooks from 'eslint-plugin-react-hooks' +import pluginReactRefresh from 'eslint-plugin-react-refresh' +import pluginStorybook from 'eslint-plugin-storybook' +import unusedImports from 'eslint-plugin-unused-imports' +import globals from 'globals' + +function hoistConfig(config, withReact) { + withReact ??= false + + config[0].languageOptions.parserOptions = { + ecmaVersion: 'latest', + sourceType: 'module', + projectService: { + allowDefaultProject: ['src/', '.storybook/*.ts', '.storybook/*.tsx'] + }, + // @ts-ignore + tsconfigRootDir: process.cwd(), + ecmaFeatures: { + jsx: withReact + } + } + + if (withReact) config[0].languageOptions.globals = { ...config[0].languageOptions.globals, ...globals.browser } + + config[0].languageOptions.globals.describe = false + config[0].languageOptions.globals.it = false + + config[0].languageOptions.globals.Highcharts = false + + config[0].languageOptions.globals.top = false + + if (withReact) config[0].plugins['react-hooks'] = pluginReactHooks + if (withReact) config[0].plugins['react-refresh'] = pluginReactRefresh + if (withReact) config[0].plugins['@tanstack/router'] = pluginRouter + + if (withReact) config[0].rules['react-refresh/only-export-components'] = ['warn', { allowConstantExport: true }] + + if (withReact) + // @ts-ignore + Object.entries(pluginRouter.configs['flat/recommended'][0].rules).forEach(([k, v]) => (config[0].rules[k] = v)) + if (withReact) + Object.entries(pluginReactHooks.configs.recommended.rules).forEach(([k, v]) => (config[0].rules[k] = v)) + if (withReact) + Object.entries(pluginReactHooks.configs.recommended.rules).forEach(([k, v]) => (config[0].rules[k] = v)) + + delete config[0].rules['@typescript-eslint/no-unnecessary-condition'] + + if (withReact) { + config[0].plugins['storybook'] = pluginStorybook + + pluginStorybook.configs['flat/recommended'].forEach((storybookConfigSlice) => { + const newConfigSlice = {} + + if (storybookConfigSlice.files != null) { + newConfigSlice.files = [] + storybookConfigSlice.files.forEach((e) => newConfigSlice.files.push(e)) + } + + if (storybookConfigSlice.rules != null) { + newConfigSlice.rules = { ...config[0].rules } + Object.entries(storybookConfigSlice.rules).forEach(([k, v]) => (newConfigSlice.rules[k] = v)) + } + + config.push({ ...config[0], ...newConfigSlice }) + }) + } + + config[0].plugins['unused-imports'] = unusedImports + config[0].rules['unused-imports/no-unused-imports'] = 'warn' + + config[0].rules['max-params'] = 'off' + config[0].rules['@typescript-eslint/max-params'] = ['error', { max: 12 }] + + config[0].rules['@typescript-eslint/triple-slash-reference'] = [ + 'error', + { lib: 'always', path: 'always', types: 'always' } + ] + + if (withReact) + config[0].rules['jsx-a11y/label-has-associated-control'] = [ + 'error', + { + controlComponents: ['FormControl'], + depth: 3 + } + ] + + config.unshift({ ignores: ['src/routeTree.gen.ts', 'src/types/nomos.d.ts'] }) +} + +hoistConfig(ts, false) +hoistConfig(tsx, true) + +export default [...cjs, ...mjs, ...js, ...ts, ...tsx] diff --git a/packages/frontend-react/generate-react-cli.json b/packages/frontend-react/generate-react-cli.json new file mode 100644 index 00000000..daef5383 --- /dev/null +++ b/packages/frontend-react/generate-react-cli.json @@ -0,0 +1,280 @@ +{ + "usesTypeScript": true, + "usesStyledComponents": false, + "usesCssModule": true, + "cssPreprocessor": "scss", + "testLibrary": "Testing Library", + "component": { + "default": { + "path": "src/components/00-components", + "withLazy": false, + "withStory": true, + "withStyle": false, + "withTest": false, + "withTypes": true, + "withUtils": true, + "customTemplates": { + "component": "src/components/99-templates/default/TemplateName.tsx", + "lazy": "src/components/99-templates/default/TemplateName.lazy.tsx", + "story": "src/components/99-templates/default/TemplateName.stories.tsx", + "style": "src/components/99-templates/default/TemplateName.module.css", + "test": "src/components/99-templates/default/TemplateName.test.tsx", + "types": "src/components/99-templates/default/TemplateName.types.ts", + "utils": "src/components/99-templates/default/TemplateName.utils.ts" + } + }, + "atom": { + "path": "src/components/01-atoms", + "withLazy": true, + "withStory": true, + "withStyle": false, + "withTest": false, + "withTypes": true, + "withUtils": true, + "customTemplates": { + "component": "src/components/99-templates/default/TemplateName.tsx", + "lazy": "src/components/99-templates/default/TemplateName.lazy.tsx", + "story": "src/components/99-templates/default/TemplateName.stories.tsx", + "style": "src/components/99-templates/default/TemplateName.module.css", + "test": "src/components/99-templates/default/TemplateName.test.tsx", + "types": "src/components/99-templates/default/TemplateName.types.ts", + "utils": "src/components/99-templates/default/TemplateName.utils.ts" + } + }, + "molecule": { + "path": "src/components/02-molecules", + "withLazy": true, + "withStory": true, + "withStyle": false, + "withTest": true, + "withTypes": true, + "withUtils": true, + "customTemplates": { + "component": "src/components/99-templates/default/TemplateName.tsx", + "lazy": "src/components/99-templates/default/TemplateName.lazy.tsx", + "story": "src/components/99-templates/default/TemplateName.stories.tsx", + "style": "src/components/99-templates/default/TemplateName.module.css", + "test": "src/components/99-templates/default/TemplateName.test.tsx", + "types": "src/components/99-templates/default/TemplateName.types.ts", + "utils": "src/components/99-templates/default/TemplateName.utils.ts" + } + }, + "particle": { + "path": "src/components/03-particles", + "withLazy": true, + "withStory": true, + "withStyle": false, + "withTest": true, + "withTypes": true, + "withUtils": true, + "customTemplates": { + "component": "src/components/99-templates/default/TemplateName.tsx", + "lazy": "src/components/99-templates/default/TemplateName.lazy.tsx", + "story": "src/components/99-templates/default/TemplateName.stories.tsx", + "style": "src/components/99-templates/default/TemplateName.module.css", + "test": "src/components/99-templates/default/TemplateName.test.tsx", + "types": "src/components/99-templates/default/TemplateName.types.ts", + "utils": "src/components/99-templates/default/TemplateName.utils.ts" + } + }, + "composite": { + "path": "src/components/04-composites", + "withLazy": true, + "withStory": true, + "withStyle": false, + "withTest": true, + "withTypes": true, + "withUtils": true, + "customTemplates": { + "component": "src/components/99-templates/default/TemplateName.tsx", + "lazy": "src/components/99-templates/default/TemplateName.lazy.tsx", + "story": "src/components/99-templates/default/TemplateName.stories.tsx", + "style": "src/components/99-templates/default/TemplateName.module.css", + "test": "src/components/99-templates/default/TemplateName.test.tsx", + "types": "src/components/99-templates/default/TemplateName.types.ts", + "utils": "src/components/99-templates/default/TemplateName.utils.ts" + } + }, + "material": { + "path": "src/components/05-materials", + "withLazy": true, + "withStory": true, + "withStyle": false, + "withTest": true, + "withTypes": true, + "withUtils": true, + "customTemplates": { + "component": "src/components/99-templates/default/TemplateName.tsx", + "lazy": "src/components/99-templates/default/TemplateName.lazy.tsx", + "story": "src/components/99-templates/default/TemplateName.stories.tsx", + "style": "src/components/99-templates/default/TemplateName.module.css", + "test": "src/components/99-templates/default/TemplateName.test.tsx", + "types": "src/components/99-templates/default/TemplateName.types.ts", + "utils": "src/components/99-templates/default/TemplateName.utils.ts" + } + }, + "layout": { + "path": "src/components/06-layouts", + "withLazy": true, + "withStory": true, + "withStyle": false, + "withTest": true, + "withTypes": true, + "withUtils": true, + "customTemplates": { + "component": "src/components/99-templates/default/TemplateName.tsx", + "lazy": "src/components/99-templates/default/TemplateName.lazy.tsx", + "story": "src/components/99-templates/default/TemplateName.stories.tsx", + "style": "src/components/99-templates/default/TemplateName.module.css", + "test": "src/components/99-templates/default/TemplateName.test.tsx", + "types": "src/components/99-templates/default/TemplateName.types.ts", + "utils": "src/components/99-templates/default/TemplateName.utils.ts" + } + }, + "page": { + "path": "src/components/07-pages", + "withLazy": true, + "withStory": true, + "withStyle": false, + "withTest": true, + "withTypes": true, + "withUtils": true, + "customTemplates": { + "component": "src/components/99-templates/default/TemplateName.tsx", + "lazy": "src/components/99-templates/default/TemplateName.lazy.tsx", + "story": "src/components/99-templates/default/TemplateName.stories.tsx", + "style": "src/components/99-templates/default/TemplateName.module.css", + "test": "src/components/99-templates/default/TemplateName.test.tsx", + "types": "src/components/99-templates/default/TemplateName.types.ts", + "utils": "src/components/99-templates/default/TemplateName.utils.ts" + } + }, + "page:admin": { + "path": "src/components/07-pages/admin", + "withLazy": true, + "withStory": true, + "withStyle": false, + "withTest": true, + "withTypes": true, + "withUtils": true, + "customDirectory": "AdminTemplateName", + "customTemplates": { + "component": "src/components/99-templates/admin-page/AdminTemplateName.tsx", + "lazy": "src/components/99-templates/admin-page/AdminTemplateName.lazy.tsx", + "story": "src/components/99-templates/admin-page/AdminTemplateName.stories.tsx", + "style": "src/components/99-templates/admin-page/AdminTemplateName.module.css", + "test": "src/components/99-templates/admin-page/AdminTemplateName.test.tsx", + "types": "src/components/99-templates/admin-page/AdminTemplateName.types.ts", + "utils": "src/components/99-templates/admin-page/AdminTemplateName.utils.ts" + } + }, + "page:admin:item": { + "path": "src/components/07-pages/admin", + "withLazy": true, + "withStory": true, + "withStyle": false, + "withTest": false, + "withTypes": true, + "withUtils": true, + "customDirectory": "AdminTemplateName/item", + "customTemplates": { + "component": "src/components/99-templates/admin-page/item/AdminTemplateNameItem.tsx", + "lazy": "src/components/99-templates/admin-page/item/AdminTemplateNameItem.lazy.tsx", + "story": "src/components/99-templates/admin-page/item/AdminTemplateNameItem.stories.tsx", + "test": "src/components/99-templates/admin-page/item/AdminTemplateNameItem.test.ts", + "types": "src/components/99-templates/admin-page/item/AdminTemplateNameItem.types.ts", + "utils": "src/components/99-templates/admin-page/item/AdminTemplateNameItem.utils.ts" + } + }, + "page:common": { + "path": "src/components/07-pages/common", + "withLazy": true, + "withStory": true, + "withStyle": false, + "withTest": true, + "withTypes": true, + "withUtils": true, + "customTemplates": { + "component": "src/components/99-templates/page/TemplateName.tsx", + "lazy": "src/components/99-templates/page/TemplateName.lazy.tsx", + "story": "src/components/99-templates/page/TemplateName.stories.tsx", + "style": "src/components/99-templates/page/TemplateName.module.css", + "test": "src/components/99-templates/page/TemplateName.test.tsx", + "types": "src/components/99-templates/page/TemplateName.types.ts", + "utils": "src/components/99-templates/page/TemplateName.utils.ts" + } + }, + "page:public": { + "path": "src/components/07-pages/public", + "withLazy": true, + "withStory": true, + "withStyle": false, + "withTest": true, + "withTypes": true, + "withUtils": true, + "customTemplates": { + "component": "src/components/99-templates/page/TemplateName.tsx", + "lazy": "src/components/99-templates/page/TemplateName.lazy.tsx", + "story": "src/components/99-templates/page/TemplateName.stories.tsx", + "style": "src/components/99-templates/page/TemplateName.module.css", + "test": "src/components/99-templates/page/TemplateName.test.tsx", + "types": "src/components/99-templates/page/TemplateName.types.ts", + "utils": "src/components/99-templates/page/TemplateName.utils.ts" + } + }, + "page:user": { + "path": "src/components/07-pages/user", + "withLazy": true, + "withStory": true, + "withStyle": false, + "withTest": true, + "withTypes": true, + "withUtils": true, + "customTemplates": { + "component": "src/components/99-templates/page/TemplateName.tsx", + "lazy": "src/components/99-templates/page/TemplateName.lazy.tsx", + "story": "src/components/99-templates/page/TemplateName.stories.tsx", + "style": "src/components/99-templates/page/TemplateName.module.css", + "test": "src/components/99-templates/page/TemplateName.test.tsx", + "types": "src/components/99-templates/page/TemplateName.types.ts", + "utils": "src/components/99-templates/page/TemplateName.utils.ts" + } + }, + "app": { + "path": "src/components/08-app", + "withLazy": true, + "withStory": true, + "withStyle": false, + "withTest": true, + "withTypes": true, + "withUtils": true, + "customTemplates": { + "component": "src/components/99-templates/default/TemplateName.tsx", + "lazy": "src/components/99-templates/default/TemplateName.lazy.tsx", + "story": "src/components/99-templates/default/TemplateName.stories.tsx", + "style": "src/components/99-templates/default/TemplateName.module.css", + "test": "src/components/99-templates/default/TemplateName.test.tsx", + "types": "src/components/99-templates/default/TemplateName.types.ts", + "utils": "src/components/99-templates/default/TemplateName.utils.ts" + } + }, + "provider": { + "path": "src/components/09-providers", + "withLazy": true, + "withStory": true, + "withStyle": false, + "withTest": true, + "withTypes": true, + "withUtils": true, + "customTemplates": { + "component": "src/components/99-templates/default/TemplateName.tsx", + "lazy": "src/components/99-templates/default/TemplateName.lazy.tsx", + "story": "src/components/99-templates/default/TemplateName.stories.tsx", + "style": "src/components/99-templates/default/TemplateName.module.css", + "test": "src/components/99-templates/default/TemplateName.test.tsx", + "types": "src/components/99-templates/default/TemplateName.types.ts", + "utils": "src/components/99-templates/default/TemplateName.utils.ts" + } + } + } +} diff --git a/packages/frontend-react/index.html b/packages/frontend-react/index.html new file mode 100644 index 00000000..5d779e67 --- /dev/null +++ b/packages/frontend-react/index.html @@ -0,0 +1,20 @@ + + + + + + + +
+ {children}
+
+ )
+}
+
+export default Col
diff --git a/packages/frontend-react/src/components/01-atoms/Col/Col.types.ts b/packages/frontend-react/src/components/01-atoms/Col/Col.types.ts
new file mode 100644
index 00000000..563e5208
--- /dev/null
+++ b/packages/frontend-react/src/components/01-atoms/Col/Col.types.ts
@@ -0,0 +1,11 @@
+import type { MouseEventHandler, ReactNode } from 'react'
+
+export type ColBreakPoint = 'default' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+
+export type ColBreakPointRecord = Partial
+ {children}
+
+ )
+}
+
+export default Container
diff --git a/packages/frontend-react/src/components/01-atoms/Container/Container.types.ts b/packages/frontend-react/src/components/01-atoms/Container/Container.types.ts
new file mode 100644
index 00000000..bae65014
--- /dev/null
+++ b/packages/frontend-react/src/components/01-atoms/Container/Container.types.ts
@@ -0,0 +1,7 @@
+import type { ReactNode } from 'react'
+
+export interface ContainerProps {
+ children?: ReactNode
+ fluid?: boolean
+ className?: string
+}
diff --git a/packages/frontend-react/src/components/01-atoms/Container/Container.utils.ts b/packages/frontend-react/src/components/01-atoms/Container/Container.utils.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/packages/frontend-react/src/components/01-atoms/FontAwesomeIcon/FontAwesomeIcon.lazy.tsx b/packages/frontend-react/src/components/01-atoms/FontAwesomeIcon/FontAwesomeIcon.lazy.tsx
new file mode 100644
index 00000000..7ca330f1
--- /dev/null
+++ b/packages/frontend-react/src/components/01-atoms/FontAwesomeIcon/FontAwesomeIcon.lazy.tsx
@@ -0,0 +1,15 @@
+import { lazy, Suspense, type JSX } from 'react'
+
+import type { FontAwesomeIconProps } from './FontAwesomeIcon.types'
+
+import LoadingOverlay from '@/components/03-particles/LoadingOverlay/LoadingOverlay'
+
+const LazyFontAwesomeIcon = lazy(async () => await import('./FontAwesomeIcon'))
+
+const FontAwesomeIcon = (props: JSX.IntrinsicAttributes & FontAwesomeIconProps): JSX.Element => (
+
+ {children}
+
+)
+
+export default NavBar
diff --git a/packages/frontend-react/src/components/01-atoms/NavBar/NavBar.types.ts b/packages/frontend-react/src/components/01-atoms/NavBar/NavBar.types.ts
new file mode 100644
index 00000000..9c211c84
--- /dev/null
+++ b/packages/frontend-react/src/components/01-atoms/NavBar/NavBar.types.ts
@@ -0,0 +1,5 @@
+import type { ReactNode } from 'react'
+
+export interface NavBarProps {
+ children?: ReactNode
+}
diff --git a/packages/frontend-react/src/components/01-atoms/NavBar/NavBar.utils.ts b/packages/frontend-react/src/components/01-atoms/NavBar/NavBar.utils.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/packages/frontend-react/src/components/01-atoms/Overlay/Overlay.lazy.tsx b/packages/frontend-react/src/components/01-atoms/Overlay/Overlay.lazy.tsx
new file mode 100644
index 00000000..da920ba7
--- /dev/null
+++ b/packages/frontend-react/src/components/01-atoms/Overlay/Overlay.lazy.tsx
@@ -0,0 +1,15 @@
+import { lazy, Suspense, type JSX } from 'react'
+
+import type { OverlayProps } from './Overlay.types'
+
+import LoadingOverlay from '@/components/03-particles/LoadingOverlay/LoadingOverlay'
+
+const LazyOverlay = lazy(async () => await import('./Overlay'))
+
+const Overlay = (props: JSX.IntrinsicAttributes & OverlayProps): JSX.Element => (
+
+
+ )
+}
+
+export default Overlay
diff --git a/packages/frontend-react/src/components/01-atoms/Overlay/Overlay.types.ts b/packages/frontend-react/src/components/01-atoms/Overlay/Overlay.types.ts
new file mode 100644
index 00000000..f49660db
--- /dev/null
+++ b/packages/frontend-react/src/components/01-atoms/Overlay/Overlay.types.ts
@@ -0,0 +1,8 @@
+import type { ReactNode } from 'react'
+
+import type { ReactAction } from '@/types/ui'
+
+export interface OverlayProps {
+ children?: ReactNode
+ handler?: ReactAction
+ {children}
+
+
+ {children}
+
+)
+
+export default Pill
diff --git a/packages/frontend-react/src/components/01-atoms/Pill/Pill.types.ts b/packages/frontend-react/src/components/01-atoms/Pill/Pill.types.ts
new file mode 100644
index 00000000..d93fabaa
--- /dev/null
+++ b/packages/frontend-react/src/components/01-atoms/Pill/Pill.types.ts
@@ -0,0 +1,6 @@
+import type { ReactNode } from 'react'
+
+export interface PillProps {
+ children?: ReactNode
+ className?: string
+}
diff --git a/packages/frontend-react/src/components/01-atoms/Pill/Pill.utils.ts b/packages/frontend-react/src/components/01-atoms/Pill/Pill.utils.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/packages/frontend-react/src/components/01-atoms/Popover/Popover.lazy.tsx b/packages/frontend-react/src/components/01-atoms/Popover/Popover.lazy.tsx
new file mode 100644
index 00000000..713b83de
--- /dev/null
+++ b/packages/frontend-react/src/components/01-atoms/Popover/Popover.lazy.tsx
@@ -0,0 +1,15 @@
+import { lazy, Suspense, type JSX } from 'react'
+
+import type { PopoverProps } from './Popover.types'
+
+import LoadingOverlay from '@/components/03-particles/LoadingOverlay/LoadingOverlay'
+
+const LazyPopover = lazy(async () => await import('./Popover'))
+
+const Popover = (props: JSX.IntrinsicAttributes & PopoverProps): JSX.Element => (
+
+
+)
+
+export default Popover
diff --git a/packages/frontend-react/src/components/01-atoms/Popover/Popover.types.ts b/packages/frontend-react/src/components/01-atoms/Popover/Popover.types.ts
new file mode 100644
index 00000000..458ddd87
--- /dev/null
+++ b/packages/frontend-react/src/components/01-atoms/Popover/Popover.types.ts
@@ -0,0 +1,7 @@
+import type { ReactNode } from 'react'
+
+export interface PopoverProps {
+ className?: string
+ content: ReactNode
+ popover: ReactNode
+}
diff --git a/packages/frontend-react/src/components/01-atoms/Popover/Popover.utils.ts b/packages/frontend-react/src/components/01-atoms/Popover/Popover.utils.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/packages/frontend-react/src/components/01-atoms/Row/Row.lazy.tsx b/packages/frontend-react/src/components/01-atoms/Row/Row.lazy.tsx
new file mode 100644
index 00000000..0df366f0
--- /dev/null
+++ b/packages/frontend-react/src/components/01-atoms/Row/Row.lazy.tsx
@@ -0,0 +1,15 @@
+import { lazy, Suspense, type JSX } from 'react'
+
+import type { RowProps } from './Row.types'
+
+import LoadingOverlay from '@/components/03-particles/LoadingOverlay/LoadingOverlay'
+
+const LazyRow = lazy(async () => await import('./Row'))
+
+const Row = (props: JSX.IntrinsicAttributes & RowProps): JSX.Element => (
+ {content}
+
+
+
+ {popover}
+
+
+ {children}
+
+ )
+}
+
+export default Row
diff --git a/packages/frontend-react/src/components/01-atoms/Row/Row.types.ts b/packages/frontend-react/src/components/01-atoms/Row/Row.types.ts
new file mode 100644
index 00000000..de78a270
--- /dev/null
+++ b/packages/frontend-react/src/components/01-atoms/Row/Row.types.ts
@@ -0,0 +1,8 @@
+import type { ReactNode } from 'react'
+
+import type { CastReactElement } from '@/types/utils'
+
+export interface RowProps extends CastReactElement<'div'> {
+ children?: ReactNode
+ noWrap?: boolean
+}
diff --git a/packages/frontend-react/src/components/01-atoms/Row/Row.utils.ts b/packages/frontend-react/src/components/01-atoms/Row/Row.utils.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/packages/frontend-react/src/components/01-atoms/TableActionsCell/TableActionsCell.lazy.tsx b/packages/frontend-react/src/components/01-atoms/TableActionsCell/TableActionsCell.lazy.tsx
new file mode 100644
index 00000000..520cee13
--- /dev/null
+++ b/packages/frontend-react/src/components/01-atoms/TableActionsCell/TableActionsCell.lazy.tsx
@@ -0,0 +1,15 @@
+import { lazy, Suspense, type JSX } from 'react'
+
+import type { TableActionsCellProps } from './TableActionsCell.types'
+
+import LoadingOverlay from '@/components/03-particles/LoadingOverlay/LoadingOverlay'
+
+const LazyTableActionsCell = lazy(async () => await import('./TableActionsCell'))
+
+const TableActionsCell = (props: JSX.IntrinsicAttributes & TableActionsCellProps): JSX.Element => (
+ {children}
+
+
+ )
+}
+
+export default AccountStatusBadge
diff --git a/packages/frontend-react/src/components/02-molecules/AccountStatusBadge/AccountStatusBadge.types.ts b/packages/frontend-react/src/components/02-molecules/AccountStatusBadge/AccountStatusBadge.types.ts
new file mode 100644
index 00000000..102f49f6
--- /dev/null
+++ b/packages/frontend-react/src/components/02-molecules/AccountStatusBadge/AccountStatusBadge.types.ts
@@ -0,0 +1,5 @@
+import type { CastReactElement } from '@/types/utils'
+
+export interface AccountStatusBadgeProps extends CastReactElement<'div'> {
+ status: string | null
+}
diff --git a/packages/frontend-react/src/components/02-molecules/AccountStatusBadge/AccountStatusBadge.utils.ts b/packages/frontend-react/src/components/02-molecules/AccountStatusBadge/AccountStatusBadge.utils.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/packages/frontend-react/src/components/02-molecules/AdminGuard/AdminGuard.lazy.tsx b/packages/frontend-react/src/components/02-molecules/AdminGuard/AdminGuard.lazy.tsx
new file mode 100644
index 00000000..0d6f0239
--- /dev/null
+++ b/packages/frontend-react/src/components/02-molecules/AdminGuard/AdminGuard.lazy.tsx
@@ -0,0 +1,15 @@
+import { lazy, Suspense, type JSX } from 'react'
+
+import type { AdminGuardProps } from './AdminGuard.types'
+
+import LoadingOverlay from '@/components/03-particles/LoadingOverlay/LoadingOverlay'
+
+const LazyAdminGuard = lazy(async () => await import('./AdminGuard'))
+
+const AdminGuard = (props: JSX.IntrinsicAttributes & AdminGuardProps): JSX.Element => (
+ {getStatusIcon(status)}
+ {status}
+
+
+ )
+}
+
+export default ComplexChart
diff --git a/packages/frontend-react/src/components/02-molecules/ComplexChart/ComplexChart.types.ts b/packages/frontend-react/src/components/02-molecules/ComplexChart/ComplexChart.types.ts
new file mode 100644
index 00000000..1c76c34c
--- /dev/null
+++ b/packages/frontend-react/src/components/02-molecules/ComplexChart/ComplexChart.types.ts
@@ -0,0 +1,7 @@
+import type { ElementType, ComponentType } from 'react'
+
+export type ComplexChartProps
+
+)
+
+export default DoughnutChart
diff --git a/packages/frontend-react/src/components/02-molecules/DoughnutChart/DoughnutChart.types.ts b/packages/frontend-react/src/components/02-molecules/DoughnutChart/DoughnutChart.types.ts
new file mode 100644
index 00000000..18944e0f
--- /dev/null
+++ b/packages/frontend-react/src/components/02-molecules/DoughnutChart/DoughnutChart.types.ts
@@ -0,0 +1,6 @@
+import type { ChartProps } from 'react-chartjs-2'
+
+export interface DoughnutChartProps extends ChartProps<'doughnut'> {
+ height?: number | string
+ width?: number | string
+}
diff --git a/packages/frontend-react/src/components/02-molecules/DoughnutChart/DoughnutChart.utils.ts b/packages/frontend-react/src/components/02-molecules/DoughnutChart/DoughnutChart.utils.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/packages/frontend-react/src/components/02-molecules/EnabledCheckMark/EnabledCheckMark.lazy.tsx b/packages/frontend-react/src/components/02-molecules/EnabledCheckMark/EnabledCheckMark.lazy.tsx
new file mode 100644
index 00000000..85cc4b50
--- /dev/null
+++ b/packages/frontend-react/src/components/02-molecules/EnabledCheckMark/EnabledCheckMark.lazy.tsx
@@ -0,0 +1,15 @@
+import { lazy, Suspense, type JSX } from 'react'
+
+import type { EnabledCheckMarkProps } from './EnabledCheckMark.types'
+
+import LoadingOverlay from '@/components/03-particles/LoadingOverlay/LoadingOverlay'
+
+const LazyEnabledCheckMark = lazy(async () => await import('./EnabledCheckMark'))
+
+const EnabledCheckMark = (props: JSX.IntrinsicAttributes & EnabledCheckMarkProps): JSX.Element => (
+
+
+ )
+}
+
+export default EnabledCheckMark
diff --git a/packages/frontend-react/src/components/02-molecules/EnabledCheckMark/EnabledCheckMark.types.ts b/packages/frontend-react/src/components/02-molecules/EnabledCheckMark/EnabledCheckMark.types.ts
new file mode 100644
index 00000000..decd3963
--- /dev/null
+++ b/packages/frontend-react/src/components/02-molecules/EnabledCheckMark/EnabledCheckMark.types.ts
@@ -0,0 +1,10 @@
+import type { IconProp } from '@/components/01-atoms/FontAwesomeIcon/FontAwesomeIcon.types'
+
+export interface EnabledCheckMarkProps {
+ checked?: boolean
+ positiveIcon?: IconProp
+ positiveIconColour?: string
+ negativeIcon?: IconProp
+ negativeHighlight?: boolean
+ negativeHighlightColour?: string
+}
diff --git a/packages/frontend-react/src/components/02-molecules/EnabledCheckMark/EnabledCheckMark.utils.ts b/packages/frontend-react/src/components/02-molecules/EnabledCheckMark/EnabledCheckMark.utils.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/packages/frontend-react/src/components/02-molecules/FormCol/FormCol.lazy.tsx b/packages/frontend-react/src/components/02-molecules/FormCol/FormCol.lazy.tsx
new file mode 100644
index 00000000..b589430c
--- /dev/null
+++ b/packages/frontend-react/src/components/02-molecules/FormCol/FormCol.lazy.tsx
@@ -0,0 +1,15 @@
+import { lazy, Suspense, type JSX } from 'react'
+
+import type { FormColProps } from './FormCol.types'
+
+import LoadingOverlay from '@/components/03-particles/LoadingOverlay/LoadingOverlay'
+
+const LazyFormCol = lazy(async () => await import('./FormCol'))
+
+const FormCol = (props: JSX.IntrinsicAttributes & FormColProps): JSX.Element => (
+ {prepend}
+
+
+ {children}
+
+
+ )
+}
+
+export default LinkButton
diff --git a/packages/frontend-react/src/components/02-molecules/LinkButton/LinkButton.types.ts b/packages/frontend-react/src/components/02-molecules/LinkButton/LinkButton.types.ts
new file mode 100644
index 00000000..e321bd61
--- /dev/null
+++ b/packages/frontend-react/src/components/02-molecules/LinkButton/LinkButton.types.ts
@@ -0,0 +1,9 @@
+import type { ReactNode } from 'react'
+
+import type { LinkProps } from '@tanstack/react-router'
+
+import type { ButtonProps } from '@/components/02-molecules/Button/Button.types'
+
+export interface LinkButtonProps extends ButtonProps, LinkProps {
+ children: ReactNode
+}
diff --git a/packages/frontend-react/src/components/02-molecules/LinkButton/LinkButton.utils.ts b/packages/frontend-react/src/components/02-molecules/LinkButton/LinkButton.utils.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/packages/frontend-react/src/components/02-molecules/Loading/Loading.stories.tsx b/packages/frontend-react/src/components/02-molecules/Loading/Loading.stories.tsx
new file mode 100644
index 00000000..7f5a5212
--- /dev/null
+++ b/packages/frontend-react/src/components/02-molecules/Loading/Loading.stories.tsx
@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+// import { mockHandlers } from '@/lib/mocking/handlers'
+
+import { CenteredContentStorybookDecorator } from '@/lib/ui/storybook'
+
+import Loading from './Loading'
+
+type StoryType = StoryObj
+
+ )
+}
+
+export default Loading
diff --git a/packages/frontend-react/src/components/02-molecules/Loading/Loading.types.ts b/packages/frontend-react/src/components/02-molecules/Loading/Loading.types.ts
new file mode 100644
index 00000000..e11b93e8
--- /dev/null
+++ b/packages/frontend-react/src/components/02-molecules/Loading/Loading.types.ts
@@ -0,0 +1,3 @@
+import type { LoaderHeightWidthRadiusProps } from 'react-spinners/helpers/props'
+
+export interface LoadingProps extends LoaderHeightWidthRadiusProps {}
diff --git a/packages/frontend-react/src/components/02-molecules/Loading/Loading.utils.ts b/packages/frontend-react/src/components/02-molecules/Loading/Loading.utils.ts
new file mode 100644
index 00000000..c18316b1
--- /dev/null
+++ b/packages/frontend-react/src/components/02-molecules/Loading/Loading.utils.ts
@@ -0,0 +1,7 @@
+export const DefaultLoadingProps = {
+ height: 32,
+ width: 5,
+ radius: 5,
+ margin: 10,
+ color: '#35a435'
+}
diff --git a/packages/frontend-react/src/components/02-molecules/NotFoundComponent/NotFoundComponent.lazy.tsx b/packages/frontend-react/src/components/02-molecules/NotFoundComponent/NotFoundComponent.lazy.tsx
new file mode 100644
index 00000000..398d9589
--- /dev/null
+++ b/packages/frontend-react/src/components/02-molecules/NotFoundComponent/NotFoundComponent.lazy.tsx
@@ -0,0 +1,15 @@
+import { lazy, Suspense, type JSX } from 'react'
+
+import type { NotFoundComponentProps } from './NotFoundComponent.types'
+
+import LoadingOverlay from '@/components/03-particles/LoadingOverlay/LoadingOverlay'
+
+const LazyNotFoundComponent = lazy(async () => await import('./NotFoundComponent'))
+
+const NotFoundComponent = (props: JSX.IntrinsicAttributes & NotFoundComponentProps): JSX.Element => (
+
+
+
+
+)
+
+export default NotFoundComponent
diff --git a/packages/frontend-react/src/components/02-molecules/NotFoundComponent/NotFoundComponent.types.ts b/packages/frontend-react/src/components/02-molecules/NotFoundComponent/NotFoundComponent.types.ts
new file mode 100644
index 00000000..98e9c695
--- /dev/null
+++ b/packages/frontend-react/src/components/02-molecules/NotFoundComponent/NotFoundComponent.types.ts
@@ -0,0 +1 @@
+export interface NotFoundComponentProps {}
diff --git a/packages/frontend-react/src/components/02-molecules/NotFoundComponent/NotFoundComponent.utils.ts b/packages/frontend-react/src/components/02-molecules/NotFoundComponent/NotFoundComponent.utils.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/packages/frontend-react/src/components/02-molecules/PrivilegeIcon/PrivilegeIcon.lazy.tsx b/packages/frontend-react/src/components/02-molecules/PrivilegeIcon/PrivilegeIcon.lazy.tsx
new file mode 100644
index 00000000..e207a4cd
--- /dev/null
+++ b/packages/frontend-react/src/components/02-molecules/PrivilegeIcon/PrivilegeIcon.lazy.tsx
@@ -0,0 +1,15 @@
+import { lazy, Suspense, type JSX } from 'react'
+
+import type { PrivilegeIconProps } from './PrivilegeIcon.types'
+
+import LoadingOverlay from '@/components/03-particles/LoadingOverlay/LoadingOverlay'
+
+const LazyPrivilegeIcon = lazy(async () => await import('./PrivilegeIcon'))
+
+const PrivilegeIcon = (props: JSX.IntrinsicAttributes & PrivilegeIconProps): JSX.Element => (
+ Not found!
+ Go home +
+
+
+
+)
+
+export default UnderConstructionBanner
diff --git a/packages/frontend-react/src/components/02-molecules/UnderConstructionBanner/UnderConstructionBanner.types.ts b/packages/frontend-react/src/components/02-molecules/UnderConstructionBanner/UnderConstructionBanner.types.ts
new file mode 100644
index 00000000..dd0aaefc
--- /dev/null
+++ b/packages/frontend-react/src/components/02-molecules/UnderConstructionBanner/UnderConstructionBanner.types.ts
@@ -0,0 +1,5 @@
+import type { ReactNode } from 'react'
+
+export interface UnderConstructionBannerProps {
+ children?: ReactNode
+}
diff --git a/packages/frontend-react/src/components/02-molecules/UnderConstructionBanner/UnderConstructionBanner.utils.ts b/packages/frontend-react/src/components/02-molecules/UnderConstructionBanner/UnderConstructionBanner.utils.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/packages/frontend-react/src/components/02-molecules/UserGuard/UserGuard.lazy.tsx b/packages/frontend-react/src/components/02-molecules/UserGuard/UserGuard.lazy.tsx
new file mode 100644
index 00000000..2d08ddb5
--- /dev/null
+++ b/packages/frontend-react/src/components/02-molecules/UserGuard/UserGuard.lazy.tsx
@@ -0,0 +1,15 @@
+import { lazy, Suspense, type JSX } from 'react'
+
+import type { UserGuardProps } from './UserGuard.types'
+
+import LoadingOverlay from '@/components/03-particles/LoadingOverlay/LoadingOverlay'
+
+const LazyUserGuard = lazy(async () => await import('./UserGuard'))
+
+const UserGuard = (props: JSX.IntrinsicAttributes & UserGuardProps): JSX.Element => (
+
+
+
+
+ 
+
+
+
+
+ Under Construction
+
+
+ )
+ }
+}
+
+export default UserProfileCard
diff --git a/packages/frontend-react/src/components/02-molecules/UserProfileCard/UserProfileCard.types.ts b/packages/frontend-react/src/components/02-molecules/UserProfileCard/UserProfileCard.types.ts
new file mode 100644
index 00000000..76796888
--- /dev/null
+++ b/packages/frontend-react/src/components/02-molecules/UserProfileCard/UserProfileCard.types.ts
@@ -0,0 +1,5 @@
+import type { ReactNode } from 'react'
+
+export interface UserProfileCardProps {
+ children?: ReactNode
+}
diff --git a/packages/frontend-react/src/components/02-molecules/UserProfileCard/UserProfileCard.utils.ts b/packages/frontend-react/src/components/02-molecules/UserProfileCard/UserProfileCard.utils.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/packages/frontend-react/src/components/03-particles/Card/Card.stories.tsx b/packages/frontend-react/src/components/03-particles/Card/Card.stories.tsx
new file mode 100644
index 00000000..f0e1d272
--- /dev/null
+++ b/packages/frontend-react/src/components/03-particles/Card/Card.stories.tsx
@@ -0,0 +1,15 @@
+import type { JSX } from 'react'
+
+import Card from './Card'
+
+export default {
+ title: '03-Particles/Card'
+}
+
+export const Default = (): JSX.Element => (
+
+ 
+
+
+
+
+
+ @{currentUser.username}
+
+ {currentUser.membership?.title}
+
+ {children}
+
+)
+
+export default CardBody
diff --git a/packages/frontend-react/src/components/03-particles/Card/CardBody/CardBody.types.ts b/packages/frontend-react/src/components/03-particles/Card/CardBody/CardBody.types.ts
new file mode 100644
index 00000000..609ec56e
--- /dev/null
+++ b/packages/frontend-react/src/components/03-particles/Card/CardBody/CardBody.types.ts
@@ -0,0 +1,6 @@
+import type { ReactNode } from 'react'
+
+export interface CardBodyProps {
+ children?: ReactNode
+ className?: string
+}
diff --git a/packages/frontend-react/src/components/03-particles/Card/CardBody/CardBody.utils.ts b/packages/frontend-react/src/components/03-particles/Card/CardBody/CardBody.utils.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/packages/frontend-react/src/components/03-particles/Card/CardContainer/CardContainer.lazy.tsx b/packages/frontend-react/src/components/03-particles/Card/CardContainer/CardContainer.lazy.tsx
new file mode 100644
index 00000000..b9ded66e
--- /dev/null
+++ b/packages/frontend-react/src/components/03-particles/Card/CardContainer/CardContainer.lazy.tsx
@@ -0,0 +1,15 @@
+import { lazy, Suspense, type JSX } from 'react'
+
+import type { CardContainerProps } from './CardContainer.types'
+
+import LoadingOverlay from '@/components/03-particles/LoadingOverlay/LoadingOverlay'
+
+const LazyCardContainer = lazy(async () => await import('./CardContainer'))
+
+const CardContainer = (props: JSX.IntrinsicAttributes & CardContainerProps): JSX.Element => (
+
+ {children}
+
+ )
+}
+
+export default CardContainer
diff --git a/packages/frontend-react/src/components/03-particles/Card/CardContainer/CardContainer.types.ts b/packages/frontend-react/src/components/03-particles/Card/CardContainer/CardContainer.types.ts
new file mode 100644
index 00000000..82166e93
--- /dev/null
+++ b/packages/frontend-react/src/components/03-particles/Card/CardContainer/CardContainer.types.ts
@@ -0,0 +1,10 @@
+import type { MouseEventHandler, ReactNode } from 'react'
+
+export interface CardContainerProps {
+ children?: ReactNode
+ className?: string
+
+ error?: boolean
+
+ onMouseLeave?: MouseEventHandler /^justify-/.test(c)) === false ? 'justify-around' : null
+ ])}
+ data-testid='CardFooter'
+ >
+ {children}
+
+ )
+}
+
+export default CardFooter
diff --git a/packages/frontend-react/src/components/03-particles/Card/CardFooter/CardFooter.types.ts b/packages/frontend-react/src/components/03-particles/Card/CardFooter/CardFooter.types.ts
new file mode 100644
index 00000000..8f49f7ca
--- /dev/null
+++ b/packages/frontend-react/src/components/03-particles/Card/CardFooter/CardFooter.types.ts
@@ -0,0 +1,7 @@
+import type { ReactNode } from 'react'
+
+export interface CardFooterProps {
+ children?: ReactNode
+ className?: string
+ noGrid?: boolean
+}
diff --git a/packages/frontend-react/src/components/03-particles/Card/CardFooter/CardFooter.utils.ts b/packages/frontend-react/src/components/03-particles/Card/CardFooter/CardFooter.utils.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/packages/frontend-react/src/components/03-particles/Card/CardHeader/CardHeader.lazy.tsx b/packages/frontend-react/src/components/03-particles/Card/CardHeader/CardHeader.lazy.tsx
new file mode 100644
index 00000000..8e4ba40d
--- /dev/null
+++ b/packages/frontend-react/src/components/03-particles/Card/CardHeader/CardHeader.lazy.tsx
@@ -0,0 +1,15 @@
+import { lazy, Suspense, type JSX } from 'react'
+
+import type { CardHeaderProps } from './CardHeader.types'
+
+import LoadingOverlay from '@/components/03-particles/LoadingOverlay/LoadingOverlay'
+
+const LazyCardHeader = lazy(async () => await import('./CardHeader'))
+
+const CardHeader = (props: JSX.IntrinsicAttributes & CardHeaderProps): JSX.Element => (
+
+ {children}
+
+)
+
+export default CardHeader
diff --git a/packages/frontend-react/src/components/03-particles/Card/CardHeader/CardHeader.types.ts b/packages/frontend-react/src/components/03-particles/Card/CardHeader/CardHeader.types.ts
new file mode 100644
index 00000000..27dab23f
--- /dev/null
+++ b/packages/frontend-react/src/components/03-particles/Card/CardHeader/CardHeader.types.ts
@@ -0,0 +1,6 @@
+import type { ReactNode } from 'react'
+
+export interface CardHeaderProps {
+ children?: ReactNode
+ className?: string
+}
diff --git a/packages/frontend-react/src/components/03-particles/Card/CardHeader/CardHeader.utils.ts b/packages/frontend-react/src/components/03-particles/Card/CardHeader/CardHeader.utils.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/packages/frontend-react/src/components/03-particles/CreateUserModal/CreateUserModal.lazy.tsx b/packages/frontend-react/src/components/03-particles/CreateUserModal/CreateUserModal.lazy.tsx
new file mode 100644
index 00000000..b407d3b4
--- /dev/null
+++ b/packages/frontend-react/src/components/03-particles/CreateUserModal/CreateUserModal.lazy.tsx
@@ -0,0 +1,15 @@
+import { lazy, Suspense, type JSX } from 'react'
+
+import type { CreateUserModalProps } from './CreateUserModal.types'
+
+import LoadingOverlay from '@/components/03-particles/LoadingOverlay/LoadingOverlay'
+
+const LazyCreateUserModal = lazy(async () => await import('./CreateUserModal'))
+
+const CreateUserModal = (props: JSX.IntrinsicAttributes & CreateUserModalProps): JSX.Element => (
+
+
+
+)
+
+export default CreateUserModal
diff --git a/packages/frontend-react/src/components/03-particles/CreateUserModal/CreateUserModal.types.ts b/packages/frontend-react/src/components/03-particles/CreateUserModal/CreateUserModal.types.ts
new file mode 100644
index 00000000..4c226d32
--- /dev/null
+++ b/packages/frontend-react/src/components/03-particles/CreateUserModal/CreateUserModal.types.ts
@@ -0,0 +1,5 @@
+import type { ReactNode } from 'react'
+
+export interface CreateUserModalProps {
+ children?: ReactNode
+}
diff --git a/packages/frontend-react/src/components/03-particles/CreateUserModal/CreateUserModal.utils.ts b/packages/frontend-react/src/components/03-particles/CreateUserModal/CreateUserModal.utils.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/packages/frontend-react/src/components/03-particles/FormControl/FormControl.lazy.tsx b/packages/frontend-react/src/components/03-particles/FormControl/FormControl.lazy.tsx
new file mode 100644
index 00000000..4737b2d7
--- /dev/null
+++ b/packages/frontend-react/src/components/03-particles/FormControl/FormControl.lazy.tsx
@@ -0,0 +1,15 @@
+import { lazy, Suspense, type JSX } from 'react'
+
+import type { FormControlProps } from './FormControl.types'
+
+import LoadingOverlay from '@/components/03-particles/LoadingOverlay/LoadingOverlay'
+
+const LazyFormControl = lazy(async () => await import('./FormControl'))
+
+const FormControl = (props: JSX.IntrinsicAttributes & FormControlProps): JSX.Element => (
+ Unspecified
+ +Disabled
+ +Text
+ +Text with Reset
+ +Password
+ +Password
+ +Password
+ +Password
+ +Email with Info Button
+ +Number
+ +Pin
+ +Pin with Info Button
+ +Dropdown
+ +Text Area
+ +
+
+ )
+ } else if (isFormControlTextAreaProps(props)) {
+ return (
+
+
+ )
+ } else if (isFormControlPinProps(props)) {
+ return (
+
+
+ )
+ } else {
+ return (
+
+
+ )
+ }
+}
+
+export default FormControl
diff --git a/packages/frontend-react/src/components/03-particles/FormControl/FormControl.types.ts b/packages/frontend-react/src/components/03-particles/FormControl/FormControl.types.ts
new file mode 100644
index 00000000..cc584c49
--- /dev/null
+++ b/packages/frontend-react/src/components/03-particles/FormControl/FormControl.types.ts
@@ -0,0 +1,137 @@
+import type { ReactNode } from 'react'
+
+import { z } from 'zod'
+
+import type { InfoButtonProps } from '@/components/05-materials/InfoButton/InfoButton.types'
+
+import type { CastReactElement } from '@/types/utils'
+
+export const zFormControlDropdownOption = z.object({ name: z.string(), value: z.string() })
+export const zFormControlDropdownOptions = zFormControlDropdownOption.array()
+
+export const zFormTypeDefaults = z.union([
+ z.literal('button'),
+ z.literal('checkbox'),
+ z.literal('color'),
+ z.literal('date'),
+ z.literal('datetime-local'),
+ z.literal('email'),
+ z.literal('file'),
+ z.literal('hidden'),
+ z.literal('image'),
+ z.literal('month'),
+ z.literal('number'),
+ z.literal('password'),
+ z.literal('radio'),
+ z.literal('range'),
+ z.literal('reset'),
+ z.literal('search'),
+ z.literal('submit'),
+ z.literal('tel'),
+ z.literal('text'),
+ z.literal('time'),
+ z.literal('url'),
+ z.literal('week')
+])
+export const zFormTypeDropdown = z.literal('dropdown')
+export const zFormTypePin = z.literal('pin')
+export const zFormTypeTextArea = z.literal('textarea')
+
+export const zFormControlDefaultProps = z.object({ formType: zFormTypeDefaults })
+export const zFormControlPinProps = z.object({ formType: zFormTypePin })
+export const zFormControlDropdownProps = z.object({ formType: zFormTypeDropdown })
+export const zFormControlTextAreaProps = z.object({ formType: zFormTypeTextArea })
+
+export type FormControlDropdownOption = z.infer
+ {children}
+
+ )
+}
+
+export default FormControlContainer
diff --git a/packages/frontend-react/src/components/03-particles/FormControl/FormControlContainer/FormControlContainer.types.ts b/packages/frontend-react/src/components/03-particles/FormControl/FormControlContainer/FormControlContainer.types.ts
new file mode 100644
index 00000000..68a71a18
--- /dev/null
+++ b/packages/frontend-react/src/components/03-particles/FormControl/FormControlContainer/FormControlContainer.types.ts
@@ -0,0 +1,11 @@
+import type { ReactNode } from 'react'
+
+import type { CastReactElement } from '@/types/utils'
+
+export interface FormControlContainerProps extends CastReactElement<'div'> {
+ children?: ReactNode
+ error?: unknown
+ hasFocus?: boolean
+ hasPreContent?: boolean
+ hasPostContent?: boolean
+}
diff --git a/packages/frontend-react/src/components/03-particles/FormControl/FormControlContainer/FormControlContainer.utils.ts b/packages/frontend-react/src/components/03-particles/FormControl/FormControlContainer/FormControlContainer.utils.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/packages/frontend-react/src/components/03-particles/FormControl/FormControlDefault/FormControlDefault.lazy.tsx b/packages/frontend-react/src/components/03-particles/FormControl/FormControlDefault/FormControlDefault.lazy.tsx
new file mode 100644
index 00000000..145c824f
--- /dev/null
+++ b/packages/frontend-react/src/components/03-particles/FormControl/FormControlDefault/FormControlDefault.lazy.tsx
@@ -0,0 +1,15 @@
+import { lazy, Suspense, type JSX } from 'react'
+
+import type { FormControlDefaultProps } from '../FormControl.types'
+
+import LoadingOverlay from '@/components/03-particles/LoadingOverlay/LoadingOverlay'
+
+const LazyFormControlDefault = lazy(async () => await import('./FormControlDefault'))
+
+const FormControlDefault = (props: JSX.IntrinsicAttributes & FormControlDefaultProps): JSX.Element => (
+
+
+
+ {preContent ?? ''}
+
+ {
+ setHasFocus(false)
+ void onBlur(event)
+ }}
+ onChange={(event) => {
+ void onChange(event)
+ }}
+ onFocus={() => {
+ setHasFocus(true)
+ }}
+ {...restProps}
+ {...formProps}
+ />
+
+ {formType !== 'password' && reset != null && (
+
+ {
+ if (reset != null) reset()
+ }}
+ />
+
+ )}
+
+
+
+
+
+
+ )
+}
+export default FormControlDefault
diff --git a/packages/frontend-react/src/components/03-particles/FormControl/FormControlDefault/FormControlDefault.types.ts b/packages/frontend-react/src/components/03-particles/FormControl/FormControlDefault/FormControlDefault.types.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/packages/frontend-react/src/components/03-particles/FormControl/FormControlDefault/FormControlDefault.utils.ts b/packages/frontend-react/src/components/03-particles/FormControl/FormControlDefault/FormControlDefault.utils.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/packages/frontend-react/src/components/03-particles/FormControl/FormControlDropdown/FormControlDropdown.lazy.tsx b/packages/frontend-react/src/components/03-particles/FormControl/FormControlDropdown/FormControlDropdown.lazy.tsx
new file mode 100644
index 00000000..228e9a86
--- /dev/null
+++ b/packages/frontend-react/src/components/03-particles/FormControl/FormControlDropdown/FormControlDropdown.lazy.tsx
@@ -0,0 +1,15 @@
+import { lazy, Suspense, type JSX } from 'react'
+
+import type { FormControlDropdownProps } from '../FormControl.types'
+
+import LoadingOverlay from '@/components/03-particles/LoadingOverlay/LoadingOverlay'
+
+const LazyFormControlDropdown = lazy(async () => await import('./FormControlDropdown'))
+
+const FormControlDropdown = (props: JSX.IntrinsicAttributes & FormControlDropdownProps): JSX.Element => (
+
+
+
+
+
+ )
+}
+
+export default FormControlDropdown
diff --git a/packages/frontend-react/src/components/03-particles/FormControl/FormControlDropdown/FormControlDropdown.types.ts b/packages/frontend-react/src/components/03-particles/FormControl/FormControlDropdown/FormControlDropdown.types.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/packages/frontend-react/src/components/03-particles/FormControl/FormControlDropdown/FormControlDropdown.utils.ts b/packages/frontend-react/src/components/03-particles/FormControl/FormControlDropdown/FormControlDropdown.utils.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/packages/frontend-react/src/components/03-particles/FormControl/FormControlPin/FormControlPin.lazy.tsx b/packages/frontend-react/src/components/03-particles/FormControl/FormControlPin/FormControlPin.lazy.tsx
new file mode 100644
index 00000000..5835dac7
--- /dev/null
+++ b/packages/frontend-react/src/components/03-particles/FormControl/FormControlPin/FormControlPin.lazy.tsx
@@ -0,0 +1,15 @@
+import { lazy, Suspense, type JSX } from 'react'
+
+import type { FormControlPinProps } from '../FormControl.types'
+
+import LoadingOverlay from '@/components/03-particles/LoadingOverlay/LoadingOverlay'
+
+const LazyFormControlPin = lazy(async () => await import('./FormControlPin'))
+
+const FormControlPin = (props: JSX.IntrinsicAttributes & FormControlPinProps): JSX.Element => (
+
+
+
+ {preContent ?? ''}
+
+ {
+ void onBlur(coercePaddedPinEvent(event))
+ setHasFocus(false)
+ }}
+ onChange={(event) => {
+ void onChange(coercePaddedPinEvent(event))
+ }}
+ onFocus={() => {
+ setHasFocus(true)
+ }}
+ max={9999}
+ size={4}
+ maxLength={4}
+ {...restProps}
+ {...formProps}
+ />
+
+
+
+
+
+ )
+}
+export default FormControlPin
diff --git a/packages/frontend-react/src/components/03-particles/FormControl/FormControlPin/FormControlPin.types.ts b/packages/frontend-react/src/components/03-particles/FormControl/FormControlPin/FormControlPin.types.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/packages/frontend-react/src/components/03-particles/FormControl/FormControlPin/FormControlPin.utils.ts b/packages/frontend-react/src/components/03-particles/FormControl/FormControlPin/FormControlPin.utils.ts
new file mode 100644
index 00000000..a6f605b5
--- /dev/null
+++ b/packages/frontend-react/src/components/03-particles/FormControl/FormControlPin/FormControlPin.utils.ts
@@ -0,0 +1,13 @@
+import type { BaseSyntheticEvent, FocusEvent, ChangeEvent } from 'react'
+
+export const coercePaddedPinEvent = (
+ event: ChangeEvent
+
+