{"_id":"@ackee/fela","_rev":"2-8996c16524f4e50c90c41c9ebb12e021","name":"@ackee/fela","dist-tags":{"latest":"1.0.3"},"versions":{"1.0.0":{"name":"@ackee/fela","version":"1.0.0","author":{"name":"Martin Foldyna","email":"martin.foldyna@ackee.cz"},"license":"MIT","_id":"@ackee/fela@1.0.0","maintainers":[{"name":"pivl","email":"s.pavel66@gmail.com"},{"name":"hofp37","email":"hoffmann.p37@gmail.com"},{"name":"grissius","email":"grissius@gmail.com"},{"name":"ackeecz","email":"ackeedevelopment@gmail.com"},{"name":"horaklukas","email":"horaklukas@centrum.cz"},{"name":"borecekbaji","email":"jakub.baierl@ackee.cz"},{"name":"davidbilik","email":"david.bilik@ackee.cz"}],"homepage":"https://github.com/AckeeCZ/fela#readme","bugs":{"url":"https://github.com/AckeeCZ/fela/issues"},"dist":{"shasum":"3169e07f07c5cc0eb5ddd93fe9790180adc8626e","tarball":"https://registry.npmjs.org/@ackee/fela/-/fela-1.0.0.tgz","fileCount":28,"integrity":"sha512-UyVTaxsban7EOVBkOcZ3N80AcPBZHZpSOZozLJGaJeYD1joRtg1GGLtZ+ZK2aQjEStRgqrtbI1OmfOG1bnk9dg==","signatures":[{"sig":"MEUCIDJBDqgIb25mahZcrsFVP8X0BiZdSEE/PyszIbdygiM4AiEAyLbI740WzMtnTKLKhIilNHRiwVO3cs4gw4XUwvGVDEg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":19521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjV9b8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoViA/9H0H/vMgOzm4XxUGlRAzFegcF8KR9At7nAtzvDmvpmbi/H/3V\r\nFoRH5YHTHZGe1tL05mTUe+GRvy7AKO/0nu1xrPXUsRzS2um+Wk6ceOibH2/t\r\nDAE/6/kEaMS0NI8UNSZLTiMqnvLj3jgrYDMfix5XqNPPILYaXKkl4AW0JkQR\r\ncEol/J8r6HOctyaW5V8WDAygYZdRn3FK4Ay82aFCr13ceTpECqboudKa6j6t\r\nsfqJMfqsFiD3Q+egcNqTChO6X50lmCSVKrUOD3XP6kbUFl7ogd1cpyqNIQ9S\r\n3BBjlR4KmiAAKdGJC8stWg7fXnfL+6AuP+GnGLOlxjbMiSENUbt9FNY12tFp\r\ntApicu43CJRKA2hO1CD32uA1J+QAyURia7FiuYg30UIKuHVLuaTN9cz8jUR0\r\nCO4H7S7D6iWkZLkHWe2oULKRIrVmwPcYdN5GoQC2BbcJUH5mGG9st51erCcF\r\ntBF8PSADmb21kCaKDqbgPilnODMcxqiEj4l1I4GGZ0rtppx0kL4minai+Sdh\r\noKTMD7qULPYFC99JJnM+CqqRA2Jc2mxCl/H7dQx403L6sdP2Z13lCwSnvBnJ\r\ngtMv1w3UZ+ZF9F0tXP+4B/8blxaxEi4ejy44GbVG9MaN3G/LBj4bG0XxZpcr\r\nOI9J2m1Wpr00Y43zYFZFZONNew1N1c8VdHU=\r\n=iPgu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","husky":{"hooks":{"pre-push":"yarn lint","pre-commit":"lint-staged"}},"types":"./lib/index.d.ts","module":"es/index.js","gitHead":"5be200206e3f500d0c19673e08351bf0f311a672","scripts":{"build":"yarn build:es && yarn build:lib && yarn build:types","build:es":"rm -rf ../es && BABEL_ENV=es babel src --out-dir es --extensions \".ts,.js,.tsx,.jsx\"","prettier":"../node_modules/.bin/prettier --config ./prettier.config.js --write './src/**/*.{js,jsx,ts,tsx}'","build:lib":"rm -rf ../lib && BABEL_ENV=lib babel src --out-dir lib  --extensions \".ts,.js,.tsx,.jsx\"","build:types":"yarn build:es:types & yarn build:lib:types","build:es:types":"tsc -p tsconfig.types.es.json && tsc-alias -p tsconfig.types.es.json","build:lib:types":"tsc -p tsconfig.types.lib.json && tsc-alias -p tsconfig.types.lib.json"},"_npmUser":{"name":"ackeecz","email":"ackeedevelopment@gmail.com"},"repository":{"url":"git+https://github.com/AckeeCZ/fela.git","type":"git"},"_npmVersion":"6.14.15","description":"Set of Fela tools we commonly use on our projects","directories":{},"lint-staged":{"*.{ts,tsx,js,jsx,json,scss,less,css,md}":["prettier --config ./prettier.config.js --write"]},"_nodeVersion":"14.18.1","browserslist":["extends @ackee/browserslist-config"],"dependencies":{"fela":"^12.1.2","fela-tools":"^12.1.2","react-fela":"^12.1.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"husky":"^8.0.1","eslint":"^8.17.0","prettier":"^2.6.2","tsc-alias":"^1.6.11","@babel/cli":"^7.17.10","typescript":"^4.7.3","@babel/core":"^7.18.5","@babel/preset-env":"^7.18.2","@ackee/eslint-config":"^4.1.0","eslint-plugin-compat":"4.0.1","prettier-config-ackee":"0.x","@babel/plugin-syntax-flow":"^7.14.5","@ackee/browserslist-config":"^2.0.0","@babel/plugin-transform-react-jsx":"^7.14.9"},"_npmOperationalInternal":{"tmp":"tmp/fela_1.0.0_1666701052279_0.07892489262602442","host":"s3://npm-registry-packages"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.0.3":{"name":"@ackee/fela","version":"1.0.3","author":{"name":"Martin Foldyna","email":"martin.foldyna@ackee.cz"},"license":"MIT","_id":"@ackee/fela@1.0.3","maintainers":[{"name":"pivl","email":"s.pavel66@gmail.com"},{"name":"hofp37","email":"hoffmann.p37@gmail.com"},{"name":"grissius","email":"grissius@gmail.com"},{"name":"ackeecz","email":"ackeedevelopment@gmail.com"},{"name":"horaklukas","email":"horaklukas@centrum.cz"},{"name":"borecekbaji","email":"jakub.baierl@ackee.cz"},{"name":"davidbilik","email":"david.bilik@ackee.cz"}],"homepage":"https://github.com/AckeeCZ/fela#readme","bugs":{"url":"https://github.com/AckeeCZ/fela/issues"},"dist":{"shasum":"a75969303237c94b7f2a1cd8fd234f42c5d3ca4b","tarball":"https://registry.npmjs.org/@ackee/fela/-/fela-1.0.3.tgz","fileCount":28,"integrity":"sha512-NUyMNvz5GRwJL/IfVPiYaZO+zF/jzaoLdiBbIrKnxk/cRGx9cI+l0rCd9it3urAt6alxuDAMd1TiAsuP8T+25g==","signatures":[{"sig":"MEQCIB6T2OghvNdaiQlPbJEYko4FDjT14eRaUKin1pJr0dBhAiADlYZ15v0g+IGPrzr2iWqsIcEOXhTgOo9HTo9fncNehw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":19894,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjclRjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr4fRAAldYuEp08S8EmnMWo07t0GHEhIMMuzCkYgdik2+Fh4CNyVEU8\r\n+3CeX6E8iEM2LBMdZzDp9HLwnRicX6R31brhhnD5IXIZuSTratmVUC5xqwxK\r\nic41V7Ha0PTv3UyqHjR+bFtotpf39r/oRDlbl1GYaVIR+TNcmNWChiyyeWll\r\nNj5rgl6xLClIb3wE1/g8L93B/ziZbliHAUjbw/nVG9lvZtlc9t0vC/RZNi35\r\no4/VZD2fFtvqKwKxIi+Vy3T6sECPr56HoIjQ08gAXTEJqvH0Fx8pGecjCwE4\r\nnbLxibhHDVYWx823OnnIzgC5bJ+EvvAOqjyqyvYxbdtmTlXurGGJKXvm1OXS\r\n7BCNYsTVnxAYdyCk5wnUgT+/pTMiLtukeZXHm+stum48/oSRGIZwCjegCInS\r\nWdBiGFNSBy3D0/3Jp/k29qaSytmRynJTycGsvdTBi+7ufqqIzw1JTm+h9bvw\r\nS3j7EH/mQBR1cstt9/hliRHGq8tYgBHhsaJ3ckiruznaEhiaBlV1QH5/Qf+/\r\n/77IF2hD6yZkY4nmQV2BQpL9soaCj8HA0gJ6Bww9W0l4gM7rVSHyGsfBIE0Y\r\nd+yO/jgZM0y1xKK6WK1udhW7AYiZ3+78VxSkhYxMnsPdCmUS352nTT6WFbk0\r\nZHfEHIq/Xmfs8H4ugBhF9hLqOlt6ZbhjPtI=\r\n=QZ8n\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","husky":{"hooks":{"pre-push":"yarn lint","pre-commit":"lint-staged"}},"types":"./lib/index.d.ts","module":"es/index.js","gitHead":"1c20a0bb796273ac157bcb4dfcb5867559c77c42","scripts":{"build":"yarn build:es && yarn build:lib && yarn build:types","build:es":"rm -rf ../es && BABEL_ENV=es babel src --out-dir es --extensions \".ts,.js,.tsx,.jsx\"","prettier":"../node_modules/.bin/prettier --config ./prettier.config.js --write './src/**/*.{js,jsx,ts,tsx}'","build:lib":"rm -rf ../lib && BABEL_ENV=lib babel src --out-dir lib  --extensions \".ts,.js,.tsx,.jsx\"","build:types":"yarn build:es:types & yarn build:lib:types","build:es:types":"tsc -p tsconfig.types.es.json && tsc-alias -p tsconfig.types.es.json","build:lib:types":"tsc -p tsconfig.types.lib.json && tsc-alias -p tsconfig.types.lib.json"},"_npmUser":{"name":"ackeecz","email":"ackeedevelopment@gmail.com"},"repository":{"url":"git+https://github.com/AckeeCZ/fela.git","type":"git"},"_npmVersion":"8.19.2","description":"Set of Fela tools we commonly use on our projects","directories":{},"lint-staged":{"*.{ts,tsx,js,jsx,json,scss,less,css,md}":["prettier --config ./prettier.config.js --write"]},"_nodeVersion":"16.18.0","browserslist":["extends @ackee/browserslist-config"],"dependencies":{"fela":"^12.1.2","react":">=16.8.0","fela-tools":"^12.1.2","react-fela":"^12.1.2","@types/react":">=16.8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"husky":"^8.0.1","eslint":"^8.17.0","prettier":"^2.6.2","tsc-alias":"^1.6.11","@babel/cli":"^7.17.10","typescript":"^4.7.3","@babel/core":"^7.18.5","@babel/preset-env":"^7.18.2","@ackee/eslint-config":"^4.1.0","eslint-plugin-compat":"4.0.1","prettier-config-ackee":"0.x","@babel/plugin-syntax-flow":"^7.14.5","@ackee/browserslist-config":"^2.0.0","@babel/plugin-transform-react-jsx":"^7.14.9"},"_npmOperationalInternal":{"tmp":"tmp/fela_1.0.3_1668437091196_0.7033551081982456","host":"s3://npm-registry-packages"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."}},"time":{"created":"2022-10-25T12:30:52.187Z","modified":"2024-09-16T08:08:11.660Z","1.0.0":"2022-10-25T12:30:52.391Z","1.0.3":"2022-11-14T14:44:51.339Z"},"bugs":{"url":"https://github.com/AckeeCZ/fela/issues"},"author":{"name":"Martin Foldyna","email":"martin.foldyna@ackee.cz"},"license":"MIT","homepage":"https://github.com/AckeeCZ/fela#readme","repository":{"url":"git+https://github.com/AckeeCZ/fela.git","type":"git"},"description":"Set of Fela tools we commonly use on our projects","maintainers":[{"name":"ackeecz","email":"ackeedevelopment@gmail.com"},{"name":"borecekbaji","email":"jakub.baierl@ackee.cz"},{"name":"davidbilik","email":"david.bilik@ackee.cz"},{"name":"grissius","email":"grissius@gmail.com"},{"name":"hofp37","email":"hoffmann.p37@gmail.com"},{"name":"horaklukas","email":"horaklukas@centrum.cz"},{"name":"pivl","email":"s.pavel66@gmail.com"}],"readme":" # Ackee fela\n \nSet of commonly used hooks and types\n\n## Installation\n\n```$ yarn add @ackee/fela```\n\n## Hooks\n### `useFelaEnhanced`\n Enhanced memoized `useFela` hook from fela. It accepts fela rules and returns:\n - `styles`: an object of class names \n - `rules`: object of passed rules \n - `theme`: fela theme object\n\n#### Example\n\n```typescript jsx\n// Component.rules.ts\nimport type { TRuleWithTheme } from \"@ackee/fela\"\n\nexport const section: TRuleWithTheme = () => ({\n    padding: '0 2rem',\n})\n\nexport const title: TRuleWithTheme = ({ theme }) => ({\n    fontSize: '3rem',\n    color: theme.colors.red,\n    textTransform: 'uppercase'\n})\n\n// Component.jsx\nimport { useFelaEnhanced } from \"@ackee/fela\";\nimport * as felaRules from \"./Component.rules\"\n\nconst Component = () => {\n    const { styles } = useFelaEnhanced(felaRules);\n    \n    return (\n        <section className={styles.container}>\n            <h1 className={styles.title}>Hello world</h1>\n        </section>\n    )\n}\n```\n\n#### Example with props\n\n```typescript jsx\n// Paragraph.rules.ts\nimport type { TRuleWithTheme } from \"@ackee/fela\"\nimport type { ParagraphProps } from \"./Paragraph\"\n\nexport const paragraph: TRuleWithTheme<Pick<ParagraphProps<'weight'>>> = ({ weight }) => ({\n    padding: '0 2rem',\n    fontWeight: weight\n})\n\n// Paragraph.jsx\nimport { useFelaEnhanced } from \"@ackee/fela\";\nimport * as felaRules from \"./Paragraph.rules\"\n\nexport interface ParagraphProps {\n    weight: 400 | 500 | 600;\n}\n\nconst Paragraph = ({ weight }) => {\n    const { styles } = useFelaEnhanced(felaRules, { weight });\n    \n    return (\n        <p className={styles.paragraph}>Hello world</p>\n    )\n}\n```\n\n## Use with your own theme\n\n### Define `Theme` type\nIf you are using TypeScript, you should extend the default `Theme` type with your project's theme type inside a `.d.ts` file.\n```typescript\n// theme.ts\nexport const theme = {\n    colors: {\n        red: \"#F00\",\n        green: \"#0F0\",\n        blue: \"#00F\",\n    },\n} as const;\n\nexport type Theme = typeof theme;\n\n// index.d.ts \nimport { Theme as ProjectTheme } from \"./theme.ts\"\n\ndeclare module \"@ackee/fela\" {\n  interface Theme extends ProjectTheme {}\n}\n```\n### Extending an existing component \nTo extend rules of an existing component you can define a prop `extend` inside the component and pass it to the `useFelaEnhanced` hook.  \n```typescript jsx\n// Paragraph.tsx\nimport { useFelaEnhanced } from \"@ackee/fela\";\nimport type { RulesExtend } from \"@ackee/fela\";\n\nconst felaRules = {\n    paragraph: {\n        padding: '0 2rem',\n        fontSize: '1rem'\n    }\n}\n\nexport interface ParagraphProps {\n    weight: 400 | 500 | 600;\n    extend?: RulesExtend<typeof felaRules>\n}\n\nconst Paragraph = ({ extend }) => {\n    const { styles } = useFelaEnhanced(felaRules, { extend });\n\n    return (\n        <p className={styles.paragraph}>Hello world</p>\n    )\n}\n\n// Description.tsx\nimport { useFelaEnhanced } from \"@ackee/fela\";\nimport type { RulesExtend } from \"@ackee/fela\";\n\nimport { Paragraph } from \"../Paragraph\"\n\nexport interface ParagraphProps {\n    weight: 400 | 500 | 600;\n}\n\nconst felaRules = {\n    description: {\n        fontSize: '1.25rem',\n        color: '#00F'\n    }\n}\n\nconst Description = () => {\n    const { rules } = useFelaEnhanced(felaRules);\n\n    return (\n        <Paragraph extend={{ paragraph: rules.description }}>Hello world</Paragraph>\n    )\n}\n```\n\n## TypesScript\n### `TRuleWithTheme`\nA generic type that takes rule props as input. It is based on the `TRule` generic type from `fela` but extended with the `theme` prop in the function props.\n```typescript\n/// Component.rules.ts\nimport type { TRuleWithTheme } from \"@ackee/fela\";\n\nexport const paragraph: TRuleWithTheme<{ weight: number }> = ({ theme, weight }) => ({\n    color: theme.colors.red,\n    fontWeight: weight,\n})\n\nexport const container: TRuleWithTheme = ({ theme }) => ({\n    backgroundColor: theme.colors.red,\n    display: 'flex'\n})\n```\n\n### `RulesExtend`\nA generic type that takes type of component's fela rules as input.\n```typescript jsx\nconst felaRules = {\n    paragraph: {\n        padding: '0 2rem',\n        fontSize: '1rem'\n    }\n}\n\nexport interface ParagraphProps {\n    weight: 400 | 500 | 600;\n    extend?: RulesExtend<typeof felaRules>\n}\n\nconst Paragraph = ({ extend }) => {\n    const { styles } = useFelaEnhanced(felaRules, { extend });\n\n    return (\n        <p className={styles.paragraph}>Hello world</p>\n    )\n}\n```\n","readmeFilename":"README.md"}