@ronas-it/nx-generators 0.24.0 → 0.26.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/src/generators/code-checks/config.d.ts +2 -1
- package/src/generators/code-checks/config.js +3 -2
- package/src/generators/code-checks/config.js.map +1 -1
- package/src/generators/code-checks/files/eslint.config.cjs.template +11 -1
- package/src/generators/code-checks/files/stylelint.config.mjs.template +20 -0
- package/src/generators/code-checks/generator.js +1 -0
- package/src/generators/code-checks/generator.js.map +1 -1
- package/src/generators/code-checks/scripts.d.ts +1 -0
- package/src/generators/code-checks/scripts.js +2 -1
- package/src/generators/code-checks/scripts.js.map +1 -1
- package/src/generators/next-app/generator.js +4 -3
- package/src/generators/next-app/generator.js.map +1 -1
- package/src/generators/repo-config/engines.d.ts +4 -0
- package/src/generators/repo-config/engines.js +6 -0
- package/src/generators/repo-config/engines.js.map +1 -0
- package/src/generators/repo-config/files/.npmrc.template +2 -0
- package/src/generators/repo-config/generator.js +2 -0
- package/src/generators/repo-config/generator.js.map +1 -1
- package/src/shared/dependencies.d.ts +2 -0
- package/src/shared/dependencies.js +3 -1
- package/src/shared/dependencies.js.map +1 -1
- package/src/shared/generators/ui-kit/form-ui-kit-components/form-text-input/component.tsx.template +48 -0
- package/src/shared/generators/ui-kit/form-ui-kit-components/index.ts.template +1 -0
- package/src/shared/generators/ui-kit/generator.d.ts +1 -0
- package/src/shared/generators/ui-kit/generator.js +16 -1
- package/src/shared/generators/ui-kit/generator.js.map +1 -1
- package/src/shared/generators/ui-kit/layout-files/index.tsx.template +29 -10
- package/src/shared/generators/ui-kit/lib-files/shared/ui/ui-kit/src/{text-input → animated-text-input}/component.tsx.template +6 -6
- package/src/shared/generators/ui-kit/lib-files/shared/ui/ui-kit/src/animated-text-input/index.ts.template +1 -0
- package/src/shared/generators/ui-kit/lib-files/shared/ui/ui-kit/src/index.ts.template +4 -1
- package/src/shared/generators/ui-kit/lib-files/shared/ui/ui-kit/src/search-input/component.tsx.template +1 -1
- package/src/shared/generators/ui-kit/lib-files/shared/ui/ui-kit/src/static-text-input/component.tsx.template +139 -0
- package/src/shared/generators/ui-kit/lib-files/shared/ui/ui-kit/src/static-text-input/index.ts.template +1 -0
- package/src/shared/generators/ui-kit/lib-files/shared/ui/ui-kit/src/switch/component.tsx.template +68 -0
- package/src/shared/generators/ui-kit/lib-files/shared/ui/ui-kit/src/switch/index.ts.template +1 -0
- package/src/shared/generators/ui-kit/lib-files/shared/ui/ui-kit/src/tag/component.tsx.template +72 -0
- package/src/shared/generators/ui-kit/lib-files/shared/ui/ui-kit/src/tag/index.ts.template +1 -0
- /package/src/shared/generators/ui-kit/{lib-files/shared/ui/ui-kit/src/text-input → form-ui-kit-components/form-text-input}/index.ts.template +0 -0
- /package/src/shared/generators/ui-kit/lib-files/shared/ui/ui-kit/src/{text-input → animated-text-input}/hooks/index.ts.template +0 -0
- /package/src/shared/generators/ui-kit/lib-files/shared/ui/ui-kit/src/{text-input → animated-text-input}/hooks/use-animated-label.ts.template +0 -0
package/package.json
CHANGED
|
@@ -3,8 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
exports.default = {
|
|
4
4
|
'lint-staged': {
|
|
5
5
|
'*.{ts,tsx}': 'tsc-files --noEmit types.d.ts',
|
|
6
|
-
'*.{ts,tsx,js,html,json,md}': 'prettier --write',
|
|
6
|
+
'*.{ts,tsx,js,html,json,md,css,scss}': 'prettier --write',
|
|
7
7
|
'*.{ts,tsx,js}': 'eslint --cache --fix',
|
|
8
|
+
'*.{css,scss}': 'stylelint --fix --allow-empty-input',
|
|
8
9
|
},
|
|
9
10
|
tsconfig: {
|
|
10
11
|
baseUrl: '.',
|
|
@@ -29,6 +30,6 @@ exports.default = {
|
|
|
29
30
|
lib: ['es2022', 'dom'],
|
|
30
31
|
},
|
|
31
32
|
tsConfigExclude: ['**/*.cjs', '**/*.mjs', 'node_modules', 'dist'],
|
|
32
|
-
gitIgnore: ['.eslintcache', '*.tsbuildinfo'],
|
|
33
|
+
gitIgnore: ['.eslintcache', '*.tsbuildinfo', 'output'],
|
|
33
34
|
};
|
|
34
35
|
//# sourceMappingURL=config.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"config.js","sourceRoot":"","sources":["../../../../../plugin/src/generators/code-checks/config.ts"],"names":[],"mappings":";;AAAA,kBAAe;IACb,aAAa,EAAE;QACb,YAAY,EAAE,+BAA+B;QAC7C,
|
|
1
|
+
{"version":3,"file":"config.js","sourceRoot":"","sources":["../../../../../plugin/src/generators/code-checks/config.ts"],"names":[],"mappings":";;AAAA,kBAAe;IACb,aAAa,EAAE;QACb,YAAY,EAAE,+BAA+B;QAC7C,qCAAqC,EAAE,kBAAkB;QACzD,eAAe,EAAE,sBAAsB;QACvC,cAAc,EAAE,qCAAqC;KACtD;IACD,QAAQ,EAAE;QACR,OAAO,EAAE,GAAG;QACZ,OAAO,EAAE,GAAG;QACZ,SAAS,EAAE,IAAI;QACf,MAAM,EAAE,IAAI;QACZ,qBAAqB,EAAE,IAAI;QAC3B,sBAAsB,EAAE,IAAI;QAC5B,SAAS,EAAE,KAAK;QAChB,cAAc,EAAE,KAAK;QACrB,mBAAmB,EAAE,KAAK;QAC1B,WAAW,EAAE,KAAK;QAClB,MAAM,EAAE,QAAQ;QAChB,gBAAgB,EAAE,SAAS;QAC3B,GAAG,EAAE,cAAc;QACnB,OAAO,EAAE,IAAI;QACb,MAAM,EAAE,IAAI;QACZ,4BAA4B,EAAE,IAAI;QAClC,aAAa,EAAE,IAAI;QACnB,4BAA4B,EAAE,KAAK;QACnC,gBAAgB,EAAE,IAAI;QACtB,GAAG,EAAE,CAAC,QAAQ,EAAE,KAAK,CAAC;KACvB;IACD,eAAe,EAAE,CAAC,UAAU,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,CAAC;IACjE,SAAS,EAAE,CAAC,cAAc,EAAE,eAAe,EAAE,QAAQ,CAAC;CACvD,CAAC"}
|
|
@@ -8,7 +8,17 @@ module.exports = (async () => {
|
|
|
8
8
|
|
|
9
9
|
return [
|
|
10
10
|
{
|
|
11
|
-
ignores: [
|
|
11
|
+
ignores: [
|
|
12
|
+
'**/node_modules',
|
|
13
|
+
'**/dist',
|
|
14
|
+
'**/output',
|
|
15
|
+
'**/.next',
|
|
16
|
+
'**/*.js',
|
|
17
|
+
'**/*.cjs',
|
|
18
|
+
'**/*.mjs',
|
|
19
|
+
'apps/*/app.config.ts',
|
|
20
|
+
'apps/*/next-env.d.ts',
|
|
21
|
+
],
|
|
12
22
|
},
|
|
13
23
|
...ronasitConfig,
|
|
14
24
|
{
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
/** @type {import('stylelint').Config} */
|
|
2
|
+
export default {
|
|
3
|
+
extends: ['stylelint-config-standard-scss'],
|
|
4
|
+
ignoreFiles: ['**/node_modules', 'dist', 'output'],
|
|
5
|
+
rules: {
|
|
6
|
+
'selector-class-pattern': [
|
|
7
|
+
'^([a-z][a-z0-9]*)(_[a-z0-9]+)*$',
|
|
8
|
+
{
|
|
9
|
+
message: (selector) => `Expected class selector "${selector}" to be snake-case`,
|
|
10
|
+
},
|
|
11
|
+
],
|
|
12
|
+
'custom-property-empty-line-before': [
|
|
13
|
+
'always',
|
|
14
|
+
{
|
|
15
|
+
except: ['first-nested'],
|
|
16
|
+
ignore: ['after-custom-property', 'after-comment', 'inside-single-line-block'],
|
|
17
|
+
},
|
|
18
|
+
],
|
|
19
|
+
},
|
|
20
|
+
};
|
|
@@ -34,6 +34,7 @@ function codeChecksGenerator(tree, options) {
|
|
|
34
34
|
tree.write('.gitignore', gitignoreContent);
|
|
35
35
|
// Update .prettierignore
|
|
36
36
|
const prettierignoreContent = ((_b = tree.read('.prettierignore')) === null || _b === void 0 ? void 0 : _b.toString()) +
|
|
37
|
+
'\n/output' +
|
|
37
38
|
'\n\n# Files with custom rules\n**/actions.ts\n**/epics.ts\n**/selectors.ts\n';
|
|
38
39
|
tree.write('.prettierignore', prettierignoreContent);
|
|
39
40
|
// Add files
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../plugin/src/generators/code-checks/generator.ts"],"names":[],"mappings":";;AAgBA,
|
|
1
|
+
{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../plugin/src/generators/code-checks/generator.ts"],"names":[],"mappings":";;AAgBA,kDA+CC;;AA/DD,iDAAyC;AACzC,6BAA6B;AAC7B,uCAQoB;AACpB,4DAA4D;AAC5D,qCAA8B;AAE9B,uCAAgC;AAEhC,SAAsB,mBAAmB,CAAC,IAAU,EAAE,OAAkC;;;QACtF,MAAM,WAAW,GAAG,GAAG,CAAC;QAExB,eAAe;QACf,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC;QAC3B,IAAI,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC;QAE7B,wBAAwB;QACxB,IAAA,wBAAQ,EAAC,uBAAuB,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,CAAC;QACxD,IAAA,wBAAQ,EAAC,8BAA8B,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,CAAC;QAE/D,4BAA4B;QAC5B,IAAA,wBAAQ,EAAC,uBAAuB,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,CAAC;QAExD,MAAM,WAAW,GAAG,IAAA,iBAAQ,EAAC,IAAI,EAAE,cAAc,CAAC,CAAC;QACnD,WAAW,CAAC,aAAa,CAAC,GAAG,gBAAM,CAAC,aAAa,CAAC,CAAC;QACnD,WAAW,CAAC,OAAO,mCAAQ,iBAAO,GAAK,WAAW,CAAC,OAAO,CAAE,CAAC;QAC7D,IAAA,kBAAS,EAAC,IAAI,EAAE,cAAc,EAAE,WAAW,CAAC,CAAC;QAE7C,4BAA4B;QAC5B,MAAM,YAAY,GAAG,IAAA,iBAAQ,EAAC,IAAI,EAAE,oBAAoB,CAAC,CAAC;QAC1D,YAAY,CAAC,eAAe,mCAAQ,YAAY,CAAC,eAAe,GAAK,gBAAM,CAAC,QAAQ,CAAE,CAAC;QACvF,YAAY,CAAC,OAAO,GAAG,CAAC,GAAG,gBAAM,CAAC,eAAe,CAAC,CAAC;QACnD,IAAA,kBAAS,EAAC,IAAI,EAAE,oBAAoB,EAAE,YAAY,CAAC,CAAC;QAEpD,oBAAoB;QACpB,MAAM,gBAAgB,GAAG,CAAA,MAAA,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,0CAAE,QAAQ,EAAE,IAAG,IAAI,GAAG,gBAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAClG,IAAI,CAAC,KAAK,CAAC,YAAY,EAAE,gBAAgB,CAAC,CAAC;QAE3C,yBAAyB;QACzB,MAAM,qBAAqB,GACzB,CAAA,MAAA,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC,0CAAE,QAAQ,EAAE;YACxC,WAAW;YACX,8EAA8E,CAAC;QACjF,IAAI,CAAC,KAAK,CAAC,iBAAiB,EAAE,qBAAqB,CAAC,CAAC;QAErD,YAAY;QACZ,IAAA,sBAAa,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,OAAO,CAAC,EAAE,WAAW,EAAE,OAAO,CAAC,CAAC;QAEzE,iCAAiC;QACjC,IAAA,qCAA4B,EAAC,IAAI,EAAE,EAAE,EAAE,8BAAe,CAAC,aAAa,CAAC,CAAC,CAAC;QAEvE,MAAM,IAAA,oBAAW,EAAC,IAAI,CAAC,CAAC;QAExB,OAAO,GAAS,EAAE;YAChB,IAAA,4BAAmB,EAAC,IAAI,CAAC,CAAC;QAC5B,CAAC,CAAC;IACJ,CAAC;CAAA;AAED,kBAAe,mBAAmB,CAAC"}
|
|
@@ -2,7 +2,8 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.default = {
|
|
4
4
|
lint: 'npx tsc && npx eslint ./',
|
|
5
|
-
|
|
5
|
+
'lint:css': 'npx stylelint "**/*.{css,scss}" --fix --allow-empty-input',
|
|
6
|
+
format: 'npx prettier --write . && npm run lint -- --fix && npm run lint:css',
|
|
6
7
|
prepare: 'husky',
|
|
7
8
|
};
|
|
8
9
|
//# sourceMappingURL=scripts.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"scripts.js","sourceRoot":"","sources":["../../../../../plugin/src/generators/code-checks/scripts.ts"],"names":[],"mappings":";;AAAA,kBAAe;IACb,IAAI,EAAE,0BAA0B;IAChC,MAAM,EAAE,
|
|
1
|
+
{"version":3,"file":"scripts.js","sourceRoot":"","sources":["../../../../../plugin/src/generators/code-checks/scripts.ts"],"names":[],"mappings":";;AAAA,kBAAe;IACb,IAAI,EAAE,0BAA0B;IAChC,UAAU,EAAE,2DAA2D;IACvE,MAAM,EAAE,qEAAqE;IAC7E,OAAO,EAAE,OAAO;CACjB,CAAC"}
|
|
@@ -13,7 +13,7 @@ const generators_1 = require("../../shared/generators");
|
|
|
13
13
|
const utils_1 = require("../../shared/utils");
|
|
14
14
|
function nextAppGenerator(tree, options) {
|
|
15
15
|
return tslib_1.__awaiter(this, void 0, void 0, function* () {
|
|
16
|
-
var _a, _b;
|
|
16
|
+
var _a, _b, _c;
|
|
17
17
|
const shouldGenerateApiClientLib = options.withStore && !(0, lodash_1.isBoolean)(options.withApiClient) && (yield (0, utils_1.confirm)('Do you want to create api client lib?'));
|
|
18
18
|
const shouldGenerateAuthLibs = shouldGenerateApiClientLib && (yield (0, utils_1.confirm)('Do you want to create auth lib?'));
|
|
19
19
|
const appRoot = `apps/${options.directory}`;
|
|
@@ -26,6 +26,7 @@ function nextAppGenerator(tree, options) {
|
|
|
26
26
|
if (!(0, fs_1.existsSync)(appRoot)) {
|
|
27
27
|
(0, child_process_1.execSync)(`npx nx g @nx/next:app ${options.name} --directory=apps/${options.directory} --tags="${tags.join(', ')}" --linter=none --appDir=true --style=scss --src=false --unitTestRunner=none --e2eTestRunner=none`, { stdio: 'inherit' });
|
|
28
28
|
}
|
|
29
|
+
tree.write('.gitignore', ((_a = tree.read('.gitignore')) === null || _a === void 0 ? void 0 : _a.toString()) + '\nnext-env.d.ts\n');
|
|
29
30
|
yield (0, generators_1.runI18nNextGenerator)(tree, options);
|
|
30
31
|
yield (0, generators_1.runNavigationUtilsGenerator)(tree, {
|
|
31
32
|
appDirectory: options.directory,
|
|
@@ -58,8 +59,8 @@ function nextAppGenerator(tree, options) {
|
|
|
58
59
|
if (!appTsconfigJson.include.includes(nextTypesInclude)) {
|
|
59
60
|
appTsconfigJson.include.push(nextTypesInclude);
|
|
60
61
|
}
|
|
61
|
-
(
|
|
62
|
-
(
|
|
62
|
+
(_b = appTsconfigJson.compilerOptions) === null || _b === void 0 ? true : delete _b.paths;
|
|
63
|
+
(_c = appTsconfigJson.compilerOptions) === null || _c === void 0 ? true : delete _c.rootDir;
|
|
63
64
|
(0, devkit_1.writeJson)(tree, appTsconfigPath, appTsconfigJson);
|
|
64
65
|
// Add app files
|
|
65
66
|
(0, devkit_1.generateFiles)(tree, path.join(__dirname, 'files'), appRoot, Object.assign(Object.assign({}, options), { formatName: utils_1.formatName,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../plugin/src/generators/next-app/generator.ts"],"names":[],"mappings":";;AAyBA,
|
|
1
|
+
{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../plugin/src/generators/next-app/generator.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"engines.js","sourceRoot":"","sources":["../../../../../plugin/src/generators/repo-config/engines.ts"],"names":[],"mappings":";;AAAA,kBAAe;IACb,GAAG,EAAE,WAAW;CACjB,CAAC"}
|
|
@@ -6,6 +6,7 @@ const path = require("path");
|
|
|
6
6
|
const devkit_1 = require("@nx/devkit");
|
|
7
7
|
const dependencies_1 = require("../../shared/dependencies");
|
|
8
8
|
const utils_1 = require("../../shared/utils");
|
|
9
|
+
const engines_1 = require("./engines");
|
|
9
10
|
const scripts_1 = require("./scripts");
|
|
10
11
|
function repoConfigGenerator(tree) {
|
|
11
12
|
return tslib_1.__awaiter(this, void 0, void 0, function* () {
|
|
@@ -19,6 +20,7 @@ function repoConfigGenerator(tree) {
|
|
|
19
20
|
const projectPackageJson = (0, devkit_1.readJson)(tree, projectPackagePath);
|
|
20
21
|
projectPackageJson.workspaces = ['apps/*'];
|
|
21
22
|
projectPackageJson.scripts = scripts_1.default;
|
|
23
|
+
projectPackageJson.engines = engines_1.default;
|
|
22
24
|
(0, devkit_1.writeJson)(tree, projectPackagePath, projectPackageJson);
|
|
23
25
|
// Add project files
|
|
24
26
|
(0, devkit_1.generateFiles)(tree, path.join(__dirname, 'files'), projectRoot, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../plugin/src/generators/repo-config/generator.ts"],"names":[],"mappings":";;
|
|
1
|
+
{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../plugin/src/generators/repo-config/generator.ts"],"names":[],"mappings":";;AAeA,kDA8BC;;AA7CD,6BAA6B;AAC7B,uCAQoB;AACpB,4DAA4D;AAC5D,8CAAgE;AAChE,uCAAgC;AAChC,uCAAgC;AAEhC,SAAsB,mBAAmB,CAAC,IAAU;;QAClD,MAAM,WAAW,GAAG,GAAG,CAAC;QACxB,MAAM,kBAAkB,GAAG,cAAc,CAAC;QAE1C,2DAA2D;QAC3D,IAAI,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;QACzB,IAAI,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;QACzB,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;QAExB,8BAA8B;QAC9B,MAAM,kBAAkB,GAAG,IAAA,iBAAQ,EAAC,IAAI,EAAE,kBAAkB,CAAC,CAAC;QAC9D,kBAAkB,CAAC,UAAU,GAAG,CAAC,QAAQ,CAAC,CAAC;QAC3C,kBAAkB,CAAC,OAAO,GAAG,iBAAO,CAAC;QACrC,kBAAkB,CAAC,OAAO,GAAG,iBAAO,CAAC;QACrC,IAAA,kBAAS,EAAC,IAAI,EAAE,kBAAkB,EAAE,kBAAkB,CAAC,CAAC;QAExD,oBAAoB;QACpB,IAAA,sBAAa,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,OAAO,CAAC,EAAE,WAAW,EAAE;YAC9D,IAAI,EAAE,IAAA,sBAAc,EAAC,kBAAkB,CAAC,IAAI,CAAC;YAC7C,UAAU,EAAV,kBAAU;SACX,CAAC,CAAC;QAEH,mBAAmB;QACnB,IAAA,qCAA4B,EAAC,IAAI,EAAE,EAAE,EAAE,8BAAe,CAAC,aAAa,CAAC,CAAC,CAAC;QAEvE,MAAM,IAAA,oBAAW,EAAC,IAAI,CAAC,CAAC;QAExB,OAAO,GAAS,EAAE;YAChB,IAAA,4BAAmB,EAAC,IAAI,CAAC,CAAC;QAC5B,CAAC,CAAC;IACJ,CAAC;CAAA;AAED,kBAAe,mBAAmB,CAAC"}
|
|
@@ -53,7 +53,7 @@ exports.dependencies = {
|
|
|
53
53
|
'expo-image': '~55.0.10',
|
|
54
54
|
'expo-router': '~55.0.14',
|
|
55
55
|
'react-native-toast-message': '^2.3.3',
|
|
56
|
-
'react-native-keyboard-controller': '1.
|
|
56
|
+
'react-native-keyboard-controller': '~1.21.8',
|
|
57
57
|
},
|
|
58
58
|
store: {
|
|
59
59
|
'@ronas-it/rtkq-entity-api': '^1.1.1',
|
|
@@ -93,6 +93,8 @@ exports.devDependencies = {
|
|
|
93
93
|
'@typescript-eslint/parser': '^8.46.0',
|
|
94
94
|
'tsc-files': '^1.1.4',
|
|
95
95
|
'typescript-eslint': '^8.46.0',
|
|
96
|
+
stylelint: '^17.12.0',
|
|
97
|
+
'stylelint-config-standard-scss': '^17.0.0',
|
|
96
98
|
},
|
|
97
99
|
'expo-app': {
|
|
98
100
|
'@types/lodash-es': '^4.17.12',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dependencies.js","sourceRoot":"","sources":["../../../../plugin/src/shared/dependencies.ts"],"names":[],"mappings":";;;AAAa,QAAA,YAAY,GAAG;IAC1B,UAAU,EAAE;QACV,uCAAuC,EAAE,QAAQ;QACjD,mBAAmB,EAAE,QAAQ;QAC7B,gBAAgB,EAAE,UAAU;QAC5B,iBAAiB,EAAE,UAAU;QAC7B,aAAa,EAAE,UAAU;QACzB,gCAAgC,EAAE,QAAQ;QAC1C,sBAAsB,EAAE,SAAS;QACjC,IAAI,EAAE,SAAS;QACf,cAAc,EAAE,UAAU;QAC1B,iBAAiB,EAAE,SAAS;QAC5B,cAAc,EAAE,UAAU;QAC1B,eAAe,EAAE,UAAU;QAC3B,mBAAmB,EAAE,UAAU;QAC/B,SAAS,EAAE,QAAQ;QACnB,WAAW,EAAE,UAAU;QACvB,KAAK,EAAE,QAAQ;QACf,WAAW,EAAE,QAAQ;QACrB,cAAc,EAAE,QAAQ;QACxB,kBAAkB,EAAE,SAAS;QAC7B,8BAA8B,EAAE,QAAQ;KACzC;IACD,UAAU,EAAE;QACV,WAAW,EAAE,QAAQ;QACrB,WAAW,EAAE,UAAU;QACvB,mBAAmB,EAAE,QAAQ;QAC7B,IAAI,EAAE,SAAS;QACf,KAAK,EAAE,SAAS;QAChB,WAAW,EAAE,SAAS;KACvB;IACD,YAAY,EAAE;QACZ,4BAA4B,EAAE,QAAQ;KACvC;IACD,IAAI,EAAE;QACJ,KAAK,EAAE,QAAQ;KAChB;IACD,WAAW,EAAE;QACX,WAAW,EAAE,QAAQ;KACtB;IACD,WAAW,EAAE;QACX,wBAAwB,EAAE,QAAQ;QAClC,2BAA2B,EAAE,QAAQ;QACrC,4BAA4B,EAAE,QAAQ;KACvC;IACD,QAAQ,EAAE;QACR,gBAAgB,EAAE,UAAU;QAC5B,yBAAyB,EAAE,OAAO;QAClC,uBAAuB,EAAE,OAAO;QAChC,YAAY,EAAE,UAAU;QACxB,aAAa,EAAE,UAAU;QACzB,4BAA4B,EAAE,QAAQ;QACtC,kCAAkC,EAAE,
|
|
1
|
+
{"version":3,"file":"dependencies.js","sourceRoot":"","sources":["../../../../plugin/src/shared/dependencies.ts"],"names":[],"mappings":"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"}
|
package/src/shared/generators/ui-kit/form-ui-kit-components/form-text-input/component.tsx.template
ADDED
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import { ReactElement, RefObject } from 'react';
|
|
2
|
+
import { Control, FieldValues, Path, useController } from 'react-hook-form';
|
|
3
|
+
import { TextInput } from 'react-native';
|
|
4
|
+
import { AnimatedTextInput, AnimatedTextInputProps } from '../animated-text-input';
|
|
5
|
+
import { StaticTextInput, StaticTextInputProps } from '../static-text-input';
|
|
6
|
+
|
|
7
|
+
export interface FormTextInputProps<T extends FieldValues>
|
|
8
|
+
extends Omit<AnimatedTextInputProps, 'ref'>,
|
|
9
|
+
Omit<StaticTextInputProps, 'ref'> {
|
|
10
|
+
name: Path<T>;
|
|
11
|
+
control: Control<T>;
|
|
12
|
+
inputRef?: RefObject<TextInput | null>;
|
|
13
|
+
inputVariant?: 'animated' | 'static';
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
export function FormTextInput<T extends FieldValues>({
|
|
17
|
+
name,
|
|
18
|
+
control,
|
|
19
|
+
inputRef,
|
|
20
|
+
inputVariant = 'animated',
|
|
21
|
+
...restProps
|
|
22
|
+
}: FormTextInputProps<T>): ReactElement {
|
|
23
|
+
const { field, fieldState } = useController({ control, name });
|
|
24
|
+
|
|
25
|
+
if (inputVariant === 'static') {
|
|
26
|
+
return (
|
|
27
|
+
<StaticTextInput
|
|
28
|
+
ref={inputRef}
|
|
29
|
+
value={field.value}
|
|
30
|
+
onChangeText={field.onChange}
|
|
31
|
+
onBlur={field.onBlur}
|
|
32
|
+
error={fieldState.error?.message}
|
|
33
|
+
{...(restProps as StaticTextInputProps)}
|
|
34
|
+
/>
|
|
35
|
+
);
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
return (
|
|
39
|
+
<AnimatedTextInput
|
|
40
|
+
ref={inputRef}
|
|
41
|
+
value={field.value}
|
|
42
|
+
onChangeText={field.onChange}
|
|
43
|
+
onBlur={field.onBlur}
|
|
44
|
+
error={fieldState.error?.message}
|
|
45
|
+
{...(restProps as AnimatedTextInputProps)}
|
|
46
|
+
/>
|
|
47
|
+
);
|
|
48
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './form-text-input';
|
|
@@ -13,10 +13,12 @@ function runUiKitGenerator(tree, options) {
|
|
|
13
13
|
const appRoot = `apps/${options.directory}`;
|
|
14
14
|
const i18nRoot = `i18n/${options.directory}`;
|
|
15
15
|
const libRoot = `libs/${options.directory}`;
|
|
16
|
+
const uiKitRoot = `${libRoot}/shared/ui/ui-kit/src`;
|
|
16
17
|
const libPath = `${(0, utils_1.getImportPathPrefix)(tree)}/${options.directory}`;
|
|
17
18
|
const appPackagePath = `${appRoot}/package.json`;
|
|
18
19
|
const appLayoutPath = `${appRoot}/app`;
|
|
19
20
|
const toastServicePath = `${libRoot}/shared/utils/toast-service/src`;
|
|
21
|
+
const uiKitIndexPath = `${uiKitRoot}/index.ts`;
|
|
20
22
|
// Generate ui-kit lib
|
|
21
23
|
(0, child_process_1.execSync)(`npx nx g react-lib --app=${options.directory} --scope=shared --type=ui --name=ui-kit --withComponent=false`, {
|
|
22
24
|
stdio: 'inherit',
|
|
@@ -26,12 +28,19 @@ function runUiKitGenerator(tree, options) {
|
|
|
26
28
|
stdio: 'inherit',
|
|
27
29
|
});
|
|
28
30
|
// Remove unnecessary files
|
|
29
|
-
tree.delete(
|
|
31
|
+
tree.delete(uiKitIndexPath);
|
|
30
32
|
tree.delete(`${appLayoutPath}/index.tsx`);
|
|
31
33
|
tree.delete(`${i18nRoot}/shared/en.json`);
|
|
32
34
|
tree.delete(`${toastServicePath}/index.ts`);
|
|
33
35
|
// Add lib files
|
|
34
36
|
(0, devkit_1.generateFiles)(tree, path.join(__dirname, 'lib-files'), libRoot, Object.assign(Object.assign({}, options), { libPath }));
|
|
37
|
+
const cachedUiKitIndexContent = tree.read(uiKitIndexPath, 'utf8') || '';
|
|
38
|
+
if (options.withFormUtils) {
|
|
39
|
+
(0, devkit_1.generateFiles)(tree, path.join(__dirname, 'form-ui-kit-components'), uiKitRoot, Object.assign(Object.assign({}, options), { libPath }));
|
|
40
|
+
const formUiKitIndexContent = tree.read(uiKitIndexPath, 'utf8') || '';
|
|
41
|
+
tree.write(uiKitIndexPath, cachedUiKitIndexContent);
|
|
42
|
+
(0, utils_1.appendFileContent)(uiKitIndexPath, formUiKitIndexContent, tree);
|
|
43
|
+
}
|
|
35
44
|
// Add app files
|
|
36
45
|
(0, devkit_1.generateFiles)(tree, path.join(__dirname, 'app-files'), appRoot, Object.assign(Object.assign({}, options), { libPath }));
|
|
37
46
|
// Add layout files
|
|
@@ -42,8 +51,14 @@ function runUiKitGenerator(tree, options) {
|
|
|
42
51
|
(0, devkit_1.generateFiles)(tree, path.join(__dirname, 'toast-service-files'), toastServicePath, {});
|
|
43
52
|
// Add dependencies
|
|
44
53
|
(0, devkit_1.addDependenciesToPackageJson)(tree, dependencies_1.dependencies['ui-kit'], {});
|
|
54
|
+
if (options.withFormUtils) {
|
|
55
|
+
(0, devkit_1.addDependenciesToPackageJson)(tree, dependencies_1.dependencies.form, {});
|
|
56
|
+
}
|
|
45
57
|
if ((0, fs_1.existsSync)(appPackagePath)) {
|
|
46
58
|
(0, devkit_1.addDependenciesToPackageJson)(tree, dependencies_1.dependencies['ui-kit'], {}, appPackagePath);
|
|
59
|
+
if (options.withFormUtils) {
|
|
60
|
+
(0, devkit_1.addDependenciesToPackageJson)(tree, dependencies_1.dependencies.form, {}, appPackagePath);
|
|
61
|
+
}
|
|
47
62
|
}
|
|
48
63
|
yield (0, devkit_1.formatFiles)(tree);
|
|
49
64
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../../plugin/src/shared/generators/ui-kit/generator.ts"],"names":[],"mappings":";;AAOA,
|
|
1
|
+
{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../../plugin/src/shared/generators/ui-kit/generator.ts"],"names":[],"mappings":"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"}
|
|
@@ -1,12 +1,25 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import {
|
|
2
|
+
AppButton,
|
|
3
|
+
AppCheckbox,
|
|
4
|
+
AppScreen,
|
|
5
|
+
AppSpinner,
|
|
6
|
+
AppSwitch,
|
|
7
|
+
AppTag,
|
|
8
|
+
AppText,
|
|
9
|
+
AnimatedTextInput,
|
|
10
|
+
SearchInput,
|
|
11
|
+
StaticTextInput,
|
|
12
|
+
} from '<%= libPath %>/shared/ui/ui-kit';
|
|
2
13
|
import { ReactElement, useState } from 'react';
|
|
3
14
|
import { View } from 'react-native';
|
|
4
15
|
import { StyleSheet } from 'react-native-unistyles';
|
|
5
16
|
|
|
6
17
|
export default function RootScreen(): ReactElement {
|
|
7
|
-
const [
|
|
18
|
+
const [animatedInputValue, setAnimatedInputValue] = useState('');
|
|
19
|
+
const [staticInputValue, setStaticInputValue] = useState('');
|
|
8
20
|
const [password, setPassword] = useState<string>('');
|
|
9
21
|
const [isChecked, setIsChecked] = useState<boolean>(false);
|
|
22
|
+
const [isSwitched, setIsSwitched] = useState(false);
|
|
10
23
|
const [searchValue, setSearchValue] = useState<string>('');
|
|
11
24
|
|
|
12
25
|
return (
|
|
@@ -29,20 +42,26 @@ export default function RootScreen(): ReactElement {
|
|
|
29
42
|
<AppCheckbox value={isChecked} onValueChange={setIsChecked} />
|
|
30
43
|
<AppText>Checkbox</AppText>
|
|
31
44
|
</View>
|
|
45
|
+
<View style={styles.checkbox}>
|
|
46
|
+
<AppSwitch checked={isSwitched} onValueChange={setIsSwitched} />
|
|
47
|
+
<AppText>Switch</AppText>
|
|
48
|
+
</View>
|
|
49
|
+
<AppTag text='Tag' />
|
|
50
|
+
<AnimatedTextInput
|
|
51
|
+
label='Animated text input'
|
|
52
|
+
autoCapitalize='none'
|
|
53
|
+
autoCorrect={false}
|
|
54
|
+
value={animatedInputValue}
|
|
55
|
+
onChangeText={setAnimatedInputValue}
|
|
56
|
+
/>
|
|
57
|
+
<StaticTextInput placeholder='Static text input' value={staticInputValue} onChangeText={setStaticInputValue} />
|
|
58
|
+
<AnimatedTextInput isPassword={true} label='Password' value={password} onChangeText={setPassword} />
|
|
32
59
|
<SearchInput
|
|
33
60
|
placeholder='Search'
|
|
34
61
|
value={searchValue}
|
|
35
62
|
onChangeText={setSearchValue}
|
|
36
63
|
onClearPress={() => setSearchValue('')}
|
|
37
64
|
/>
|
|
38
|
-
<AppTextInput
|
|
39
|
-
label='Username'
|
|
40
|
-
autoCapitalize='none'
|
|
41
|
-
autoCorrect={false}
|
|
42
|
-
value={username}
|
|
43
|
-
onChangeText={setUsername}
|
|
44
|
-
/>
|
|
45
|
-
<AppTextInput isPassword={true} label='Password' value={password} onChangeText={setPassword} />
|
|
46
65
|
<AppButton text='Button Primary Regular' />
|
|
47
66
|
<AppButton text='Button Primary Small' size='small' />
|
|
48
67
|
<AppButton text='Button Secondary Regular' variant='secondary' />
|
|
@@ -7,7 +7,7 @@ import { AppPressableIcon } from '../pressable-icon';
|
|
|
7
7
|
import { AppText, textStyles as appTextStyles } from '../text';
|
|
8
8
|
import { useAnimatedLabel } from './hooks';
|
|
9
9
|
|
|
10
|
-
export interface
|
|
10
|
+
export interface AnimatedTextInputProps extends TextInputProps {
|
|
11
11
|
accessoryRight?: ReactElement;
|
|
12
12
|
label?: string;
|
|
13
13
|
error?: string;
|
|
@@ -17,7 +17,7 @@ export interface AppTextInputProps extends TextInputProps {
|
|
|
17
17
|
nextInputRef?: RefObject<TextInput | null>;
|
|
18
18
|
}
|
|
19
19
|
|
|
20
|
-
export const
|
|
20
|
+
export const AnimatedTextInput = ({
|
|
21
21
|
disabled,
|
|
22
22
|
label,
|
|
23
23
|
error,
|
|
@@ -33,7 +33,7 @@ export const AppTextInput = ({
|
|
|
33
33
|
returnKeyType,
|
|
34
34
|
placeholder,
|
|
35
35
|
...props
|
|
36
|
-
}:
|
|
36
|
+
}: AnimatedTextInputProps): ReactElement => {
|
|
37
37
|
appTextStyles.useVariants({ variant: 'bodyDefault' });
|
|
38
38
|
const isIos = Platform.OS === 'ios';
|
|
39
39
|
const inputRef = ref || useRef<TextInput>(null);
|
|
@@ -71,7 +71,7 @@ export const AppTextInput = ({
|
|
|
71
71
|
<View style={inputStyles.container(isFocused, !!disabled, !!error)}>
|
|
72
72
|
<TouchableWithoutFeedback onPress={handleInputPress}>
|
|
73
73
|
<View style={commonStyle.fullFlex}>
|
|
74
|
-
{label && (
|
|
74
|
+
{!!label && (
|
|
75
75
|
<Animated.View style={labelAnimatedStyle} pointerEvents='none'>
|
|
76
76
|
<AppText
|
|
77
77
|
variant='bodyDefault'
|
|
@@ -91,7 +91,7 @@ export const AppTextInput = ({
|
|
|
91
91
|
onBlur={handleBlur}
|
|
92
92
|
style={[appTextStyles.text, textStyles.input(!!disabled, isIos), inputStyles.input]}
|
|
93
93
|
cursorColor={colors.textPrimary}
|
|
94
|
-
selectionColor={colors.
|
|
94
|
+
selectionColor={colors.primaryOpacity}
|
|
95
95
|
hitSlop={{ top: 40 }}
|
|
96
96
|
secureTextEntry={isSecured && isPassword}
|
|
97
97
|
onSubmitEditing={nextInputRef ? goToNextRef : onSubmitEditing}
|
|
@@ -103,7 +103,7 @@ export const AppTextInput = ({
|
|
|
103
103
|
</TouchableWithoutFeedback>
|
|
104
104
|
{accessoryRightComponent}
|
|
105
105
|
</View>
|
|
106
|
-
{error && (
|
|
106
|
+
{!!error && (
|
|
107
107
|
<AppText variant='bodySmall' style={textStyles.error}>
|
|
108
108
|
{error}
|
|
109
109
|
</AppText>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './component';
|
|
@@ -7,7 +7,7 @@ export * from './pressable-icon';
|
|
|
7
7
|
export * from './screen';
|
|
8
8
|
export * from './spinner';
|
|
9
9
|
export * from './text';
|
|
10
|
-
export * from './text-input';
|
|
10
|
+
export * from './animated-text-input';
|
|
11
11
|
export * from './header';
|
|
12
12
|
export * from './image';
|
|
13
13
|
export * from './keyboard-avoiding-view';
|
|
@@ -17,3 +17,6 @@ export * from './search-input';
|
|
|
17
17
|
export * from './bottom-tab-navigator';
|
|
18
18
|
export * from './toast';
|
|
19
19
|
export * from './modal';
|
|
20
|
+
export * from './switch';
|
|
21
|
+
export * from './tag';
|
|
22
|
+
export * from './static-text-input';
|
|
@@ -51,7 +51,7 @@ export function SearchInput({
|
|
|
51
51
|
ref={ref}
|
|
52
52
|
style={[textStyles.text, styles.input, isIos && styles.noLineHeight]}
|
|
53
53
|
cursorColor={colors.textPrimary}
|
|
54
|
-
selectionColor={colors.
|
|
54
|
+
selectionColor={colors.primaryOpacity}
|
|
55
55
|
placeholderTextColor={colors.textSecondary}
|
|
56
56
|
onBlur={handleBlur}
|
|
57
57
|
onFocus={handleFocus}
|
|
@@ -0,0 +1,139 @@
|
|
|
1
|
+
import { ReactElement, RefObject, useRef, useState } from 'react';
|
|
2
|
+
import { TextInput, FocusEvent, TextInputProps, View, Platform, TouchableWithoutFeedback } from 'react-native';
|
|
3
|
+
import { StyleSheet } from 'react-native-unistyles';
|
|
4
|
+
import { colors, commonStyle, rem, spacings } from '<%= libPath %>/shared/ui/styles';
|
|
5
|
+
import { AppPressableIcon } from '../pressable-icon';
|
|
6
|
+
import { AppText, textStyles as appTextStyles } from '../text';
|
|
7
|
+
|
|
8
|
+
export interface StaticTextInputProps extends TextInputProps {
|
|
9
|
+
label?: string;
|
|
10
|
+
accessoryRight?: ReactElement;
|
|
11
|
+
error?: string;
|
|
12
|
+
disabled?: boolean;
|
|
13
|
+
isPassword?: boolean;
|
|
14
|
+
ref?: RefObject<TextInput | null>;
|
|
15
|
+
nextInputRef?: RefObject<TextInput | null>;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
export const StaticTextInput = ({
|
|
19
|
+
disabled,
|
|
20
|
+
error,
|
|
21
|
+
style,
|
|
22
|
+
label,
|
|
23
|
+
accessoryRight,
|
|
24
|
+
value,
|
|
25
|
+
isPassword,
|
|
26
|
+
onFocus,
|
|
27
|
+
onBlur,
|
|
28
|
+
ref,
|
|
29
|
+
nextInputRef,
|
|
30
|
+
onSubmitEditing,
|
|
31
|
+
returnKeyType,
|
|
32
|
+
placeholder,
|
|
33
|
+
...props
|
|
34
|
+
}: StaticTextInputProps): ReactElement => {
|
|
35
|
+
appTextStyles.useVariants({ variant: 'bodyDefault' });
|
|
36
|
+
const isIos = Platform.OS === 'ios';
|
|
37
|
+
const inputRef = ref || useRef<TextInput>(null);
|
|
38
|
+
|
|
39
|
+
const [isFocused, setIsFocused] = useState(false);
|
|
40
|
+
const [isSecured, setIsSecured] = useState(true);
|
|
41
|
+
|
|
42
|
+
const handleOnFocus = (e: FocusEvent): void => {
|
|
43
|
+
setIsFocused(true);
|
|
44
|
+
onFocus?.(e);
|
|
45
|
+
};
|
|
46
|
+
|
|
47
|
+
const handleBlur = (e: FocusEvent): void => {
|
|
48
|
+
setIsFocused(false);
|
|
49
|
+
onBlur?.(e);
|
|
50
|
+
};
|
|
51
|
+
|
|
52
|
+
const goToNextRef = (): void => nextInputRef?.current?.focus();
|
|
53
|
+
|
|
54
|
+
const handleInputPress = (): void => inputRef.current?.focus();
|
|
55
|
+
|
|
56
|
+
const accessoryRightComponent = isPassword ? (
|
|
57
|
+
<AppPressableIcon name={isSecured ? 'eye' : 'eyeOff'} onPress={() => setIsSecured(!isSecured)} />
|
|
58
|
+
) : (
|
|
59
|
+
accessoryRight
|
|
60
|
+
);
|
|
61
|
+
|
|
62
|
+
return (
|
|
63
|
+
<View style={styles.wrapper}>
|
|
64
|
+
<View style={inputStyles.wrapper}>
|
|
65
|
+
{!!label && <AppText variant='bodySmall'>{label}</AppText>}
|
|
66
|
+
<View style={inputStyles.container(isFocused, !!error)}>
|
|
67
|
+
<TouchableWithoutFeedback onPress={handleInputPress}>
|
|
68
|
+
<View style={commonStyle.fullFlex}>
|
|
69
|
+
<TextInput
|
|
70
|
+
ref={inputRef}
|
|
71
|
+
editable={!disabled}
|
|
72
|
+
value={value}
|
|
73
|
+
onFocus={handleOnFocus}
|
|
74
|
+
onBlur={handleBlur}
|
|
75
|
+
style={[appTextStyles.text, textStyles.input(isIos), inputStyles.input]}
|
|
76
|
+
cursorColor={colors.textPrimary}
|
|
77
|
+
selectionColor={colors.primaryOpacity}
|
|
78
|
+
placeholder={label ? '' : placeholder}
|
|
79
|
+
placeholderTextColor={colors.textSecondary}
|
|
80
|
+
hitSlop={{ top: 40 }}
|
|
81
|
+
secureTextEntry={isSecured && isPassword}
|
|
82
|
+
onSubmitEditing={nextInputRef ? goToNextRef : onSubmitEditing}
|
|
83
|
+
returnKeyType={nextInputRef ? 'next' : returnKeyType}
|
|
84
|
+
{...props}
|
|
85
|
+
/>
|
|
86
|
+
</View>
|
|
87
|
+
</TouchableWithoutFeedback>
|
|
88
|
+
{accessoryRightComponent}
|
|
89
|
+
</View>
|
|
90
|
+
</View>
|
|
91
|
+
{!!error && (
|
|
92
|
+
<AppText variant='bodySmall' style={textStyles.error}>
|
|
93
|
+
{error}
|
|
94
|
+
</AppText>
|
|
95
|
+
)}
|
|
96
|
+
</View>
|
|
97
|
+
);
|
|
98
|
+
};
|
|
99
|
+
|
|
100
|
+
const styles = StyleSheet.create({
|
|
101
|
+
wrapper: {
|
|
102
|
+
gap: spacings.xs,
|
|
103
|
+
},
|
|
104
|
+
});
|
|
105
|
+
|
|
106
|
+
const inputStyles = StyleSheet.create(({ colors }) => ({
|
|
107
|
+
wrapper: {
|
|
108
|
+
gap: spacings.xxs,
|
|
109
|
+
},
|
|
110
|
+
container: (focused: boolean, errored: boolean) => ({
|
|
111
|
+
flexDirection: 'row',
|
|
112
|
+
alignItems: 'center',
|
|
113
|
+
gap: spacings.xs,
|
|
114
|
+
borderWidth: 1,
|
|
115
|
+
backgroundColor: focused ? colors.backgroundPrimary : colors.backgroundSecondary,
|
|
116
|
+
borderColor: focused ? colors.primary : errored ? colors.error : colors.backgroundSecondary,
|
|
117
|
+
borderRadius: spacings.md,
|
|
118
|
+
minHeight: 3.5 * rem,
|
|
119
|
+
paddingHorizontal: spacings.sm,
|
|
120
|
+
}),
|
|
121
|
+
input: {
|
|
122
|
+
flex: 1,
|
|
123
|
+
padding: 0,
|
|
124
|
+
},
|
|
125
|
+
}));
|
|
126
|
+
|
|
127
|
+
const textStyles = StyleSheet.create(({ colors }) => ({
|
|
128
|
+
input: (isIos: boolean) => ({
|
|
129
|
+
color: colors.textPrimary,
|
|
130
|
+
lineHeight: isIos ? 0 : 1.4375 * rem,
|
|
131
|
+
// NOTE: Needs to fix Android spacings
|
|
132
|
+
// https://reactnative.dev/docs/text-style-props#includefontpadding-android
|
|
133
|
+
includeFontPadding: false,
|
|
134
|
+
textAlignVertical: 'center',
|
|
135
|
+
}),
|
|
136
|
+
error: {
|
|
137
|
+
color: colors.error,
|
|
138
|
+
},
|
|
139
|
+
}));
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './component';
|
package/src/shared/generators/ui-kit/lib-files/shared/ui/ui-kit/src/switch/component.tsx.template
ADDED
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
import { ReactElement } from 'react';
|
|
2
|
+
import { StyleProp, View, ViewStyle } from 'react-native';
|
|
3
|
+
import Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
|
|
4
|
+
import { StyleSheet } from 'react-native-unistyles';
|
|
5
|
+
import { AppPressable, AppPressableProps } from '../pressable';
|
|
6
|
+
import { rem, spacings } from '<%= libPath %>/shared/ui/styles';
|
|
7
|
+
|
|
8
|
+
export interface AppSwitchProps extends Omit<AppPressableProps, 'onPress'> {
|
|
9
|
+
checked: boolean;
|
|
10
|
+
onValueChange: (value: boolean) => void;
|
|
11
|
+
style?: StyleProp<ViewStyle>;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
export function AppSwitch({ checked, onValueChange, disabled, style, ...props }: AppSwitchProps): ReactElement {
|
|
15
|
+
const thumbOffset = useSharedValue(checked ? 2.75 * rem - 4 - spacings.xxl : 0);
|
|
16
|
+
|
|
17
|
+
const thumbAnimatedStyle = useAnimatedStyle(() => ({
|
|
18
|
+
transform: [{ translateX: thumbOffset.value }],
|
|
19
|
+
}));
|
|
20
|
+
|
|
21
|
+
const handlePress = (): void => {
|
|
22
|
+
if (disabled) {
|
|
23
|
+
return;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
thumbOffset.value = withTiming(!checked ? 2.75 * rem - spacings.xxl - 4 : 0, { duration: 180 });
|
|
27
|
+
onValueChange(!checked);
|
|
28
|
+
};
|
|
29
|
+
|
|
30
|
+
return (
|
|
31
|
+
<AppPressable
|
|
32
|
+
style={style}
|
|
33
|
+
onPress={handlePress}
|
|
34
|
+
accessibilityRole='switch'
|
|
35
|
+
accessibilityState={{ checked: checked, disabled: !!disabled }}
|
|
36
|
+
pressedOpacity={1}
|
|
37
|
+
{...props}>
|
|
38
|
+
<View style={styles.track(checked, !!disabled)}>
|
|
39
|
+
<Animated.View style={[styles.thumb, thumbAnimatedStyle]} />
|
|
40
|
+
</View>
|
|
41
|
+
</AppPressable>
|
|
42
|
+
);
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
const styles = StyleSheet.create(({ colors, spacings }) => ({
|
|
46
|
+
track: (checked: boolean, disabled: boolean) => ({
|
|
47
|
+
width: 2.75 * rem,
|
|
48
|
+
height: 1.75 * rem,
|
|
49
|
+
borderRadius: 2 * rem,
|
|
50
|
+
backgroundColor: checked
|
|
51
|
+
? disabled
|
|
52
|
+
? colors.primaryOpacity
|
|
53
|
+
: colors.primary
|
|
54
|
+
: disabled
|
|
55
|
+
? colors.textTertiary
|
|
56
|
+
: colors.textSecondary,
|
|
57
|
+
justifyContent: 'center',
|
|
58
|
+
}),
|
|
59
|
+
thumb: {
|
|
60
|
+
position: 'absolute',
|
|
61
|
+
top: 2,
|
|
62
|
+
left: 2,
|
|
63
|
+
width: spacings.xxl,
|
|
64
|
+
height: spacings.xxl,
|
|
65
|
+
borderRadius: '100%',
|
|
66
|
+
backgroundColor: colors.textPrimary,
|
|
67
|
+
},
|
|
68
|
+
}));
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './component';
|
package/src/shared/generators/ui-kit/lib-files/shared/ui/ui-kit/src/tag/component.tsx.template
ADDED
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
import { ReactElement } from 'react';
|
|
2
|
+
import { View } from 'react-native';
|
|
3
|
+
import { StyleSheet } from 'react-native-unistyles';
|
|
4
|
+
import { AppText } from '../text';
|
|
5
|
+
import { Icon } from '../icon';
|
|
6
|
+
import { AppPressable } from '../pressable';
|
|
7
|
+
import { colors, spacings } from '<%= libPath %>/shared/ui/styles';
|
|
8
|
+
|
|
9
|
+
export interface AppTagProps {
|
|
10
|
+
text: string;
|
|
11
|
+
onRemovePress?: () => void;
|
|
12
|
+
backgroundColor?: keyof typeof colors;
|
|
13
|
+
textColor?: keyof typeof colors;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
export function AppTag({
|
|
17
|
+
text,
|
|
18
|
+
onRemovePress,
|
|
19
|
+
backgroundColor = 'primary',
|
|
20
|
+
textColor = 'textPrimary',
|
|
21
|
+
}: AppTagProps): ReactElement {
|
|
22
|
+
return (
|
|
23
|
+
<View style={containerStyles.container(backgroundColor, !!onRemovePress)}>
|
|
24
|
+
<AppText variant='bodySmall' style={textStyles.text(textColor)}>
|
|
25
|
+
{text}
|
|
26
|
+
</AppText>
|
|
27
|
+
{onRemovePress && (
|
|
28
|
+
<AppPressable onPress={onRemovePress} style={containerStyles.iconContainer} hitSlop={10}>
|
|
29
|
+
<View style={containerStyles.iconBackground(textColor)} />
|
|
30
|
+
<Icon name='close' color={textColor} width={16} height={16} />
|
|
31
|
+
</AppPressable>
|
|
32
|
+
)}
|
|
33
|
+
</View>
|
|
34
|
+
);
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
const containerStyles = StyleSheet.create(({ colors }) => ({
|
|
38
|
+
container: (backgroundColor: keyof typeof colors, withRemoveButton: boolean) => ({
|
|
39
|
+
flexDirection: 'row',
|
|
40
|
+
alignSelf: 'flex-start',
|
|
41
|
+
alignItems: 'center',
|
|
42
|
+
height: 32,
|
|
43
|
+
gap: 4,
|
|
44
|
+
paddingLeft: spacings.sm,
|
|
45
|
+
paddingRight: withRemoveButton ? spacings.xxs : spacings.sm,
|
|
46
|
+
borderRadius: spacings.xs,
|
|
47
|
+
backgroundColor: colors[backgroundColor],
|
|
48
|
+
}),
|
|
49
|
+
iconContainer: {
|
|
50
|
+
borderRadius: 100,
|
|
51
|
+
overflow: 'hidden',
|
|
52
|
+
width: 24,
|
|
53
|
+
height: 24,
|
|
54
|
+
justifyContent: 'center',
|
|
55
|
+
alignItems: 'center',
|
|
56
|
+
},
|
|
57
|
+
iconBackground: (iconColor: keyof typeof colors) => ({
|
|
58
|
+
position: 'absolute',
|
|
59
|
+
top: 0,
|
|
60
|
+
right: 0,
|
|
61
|
+
bottom: 0,
|
|
62
|
+
left: 0,
|
|
63
|
+
backgroundColor: colors[iconColor],
|
|
64
|
+
opacity: 0.1,
|
|
65
|
+
}),
|
|
66
|
+
}));
|
|
67
|
+
|
|
68
|
+
const textStyles = StyleSheet.create(({ colors }) => ({
|
|
69
|
+
text: (textColor: keyof typeof colors) => ({
|
|
70
|
+
color: colors[textColor],
|
|
71
|
+
}),
|
|
72
|
+
}));
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './component';
|
|
File without changes
|
|
File without changes
|