├── .eslintignore ├── .husky ├── .gitignore ├── commit-msg └── pre-commit ├── website ├── static │ ├── .nojekyll │ └── img │ │ ├── hint.png │ │ ├── jobs.jpg │ │ ├── jobs.webp │ │ ├── logo.png │ │ ├── favicon.ico │ │ ├── layout-1.png │ │ ├── layout-2.png │ │ ├── layout-3.png │ │ ├── layout-4.png │ │ ├── layout-5.png │ │ ├── vue-logo.png │ │ ├── type-safe.png │ │ ├── Intellisense.png │ │ ├── layout-figma.png │ │ ├── layout-sketch.png │ │ ├── fower-intellisense.png │ │ └── tutorial │ │ ├── localeDropdown.png │ │ └── docsVersionDropdown.png ├── docs │ ├── debug.mdx │ ├── faq-4.mdx │ ├── packages │ │ ├── colors.mdx │ │ ├── preset-taro.mdx │ │ ├── preset-web.mdx │ │ ├── color-helper.mdx │ │ ├── preset-react-native.mdx │ │ ├── react.mdx │ │ ├── react-native.mdx │ │ └── types.mdx │ ├── faq-3.mdx │ ├── faq-6.mdx │ ├── intellisense.mdx │ ├── design-system-letter-spacings.mdx │ ├── faq-5.mdx │ ├── plugin.mdx │ ├── article.mdx │ ├── unit.mdx │ ├── design-system-line-heights.mdx │ ├── appearance.mdx │ ├── max-height.mdx │ ├── max-width.mdx │ ├── design-system-font-weights.mdx │ ├── global-style.mdx │ ├── flex-basis.mdx │ ├── flexbox-introduction.mdx │ ├── visibility.mdx │ ├── box-sizing.mdx │ ├── css.mdx │ ├── to-bottom.mdx │ ├── font-style.mdx │ ├── height.mdx │ ├── text-decoration.mdx │ ├── compose-atom.mdx │ ├── benefits.mdx │ ├── z-index.mdx │ ├── createStyle.mdx │ ├── circle.mdx │ ├── to-around.mdx │ ├── to-evenly.mdx │ ├── min-height.mdx │ ├── opacity.mdx │ ├── to-top.mdx │ ├── to-center.mdx │ ├── to-left.mdx │ ├── design-system-radii.mdx │ ├── square.mdx │ ├── text-transform.mdx │ ├── design-system-breakpoints.mdx │ ├── to-right.mdx │ ├── composition-postfix.mdx │ ├── placeholder-color.mdx │ ├── to-between.mdx │ ├── transition-delay.mdx │ ├── why.mdx │ ├── transition-duration.mdx │ ├── to-center-y.mdx │ ├── to-center-x.mdx │ ├── background-image.mdx │ └── background-repeat.mdx ├── .vercel │ ├── project.json │ └── README.txt ├── babel.config.js ├── src │ ├── pages │ │ └── markdown-page.md │ └── components │ │ ├── GettingStarted.tsx │ │ ├── UtilityFirstFower.tsx │ │ ├── UtilityFirstRaw │ │ ├── index.tsx │ │ └── index.css │ │ ├── colors.module.css │ │ └── HighLight.tsx ├── tsconfig.json └── .gitignore ├── packages ├── fower │ ├── README.md │ ├── src │ │ └── index.ts │ ├── tsconfig.json │ └── package.json ├── core │ ├── README.md │ ├── test │ │ ├── keyframes.test.ts │ │ ├── css.test.ts │ │ ├── sheet.test.ts │ │ ├── is-unit-prop.test.ts │ │ ├── createStyle.test.ts │ │ └── injectGlobalStyle.test.ts │ ├── src │ │ ├── isAtomicArgsValid.ts │ │ ├── isUnitProp.ts │ │ ├── createStyle.ts │ │ ├── css.ts │ │ └── index.ts │ └── tsconfig.json ├── react │ ├── README.md │ ├── types │ │ └── index.d.ts │ ├── tsconfig.json │ ├── src │ │ ├── useMode.tsx │ │ └── index.tsx │ └── package.json ├── taro │ ├── README.md │ ├── tsconfig.json │ └── package.json ├── utils │ ├── README.md │ ├── tsconfig.json │ └── package.json ├── colors │ ├── README.md │ ├── tsconfig.json │ └── package.json ├── styled │ ├── README.md │ └── tsconfig.json ├── preset-web │ ├── README.md │ ├── src │ │ └── index.ts │ └── tsconfig.json ├── atomic-props │ ├── README.md │ ├── index.js │ ├── index.d.ts │ └── package.json ├── color-helper │ ├── README.md │ ├── test │ │ └── index.test.ts │ ├── tsconfig.json │ ├── package.json │ └── src │ │ └── index.test.ts ├── fower-plugin-gap │ ├── README.md │ ├── tsconfig.json │ └── package.json ├── fower-plugin-svg │ ├── README.md │ └── tsconfig.json ├── preset-taro │ ├── README.md │ ├── src │ │ └── index.ts │ └── tsconfig.json ├── react-native │ ├── README.md │ └── tsconfig.json ├── fower-plugin-color │ ├── README.md │ ├── tsconfig.json │ └── src │ │ └── index.ts ├── fower-plugin-grid │ ├── README.md │ ├── types │ │ └── index.d.ts │ ├── tsconfig.json │ ├── src │ │ ├── index.test.ts │ │ └── index.ts │ └── package.json ├── fower-plugin-list │ ├── README.md │ ├── tsconfig.json │ ├── src │ │ └── index.ts │ └── package.json ├── fower-plugin-ring │ ├── README.md │ └── tsconfig.json ├── fower-plugin-size │ ├── README.md │ ├── tsconfig.json │ └── src │ │ └── index.ts ├── fower-plugin-border │ ├── README.md │ ├── tsconfig.json │ └── package.json ├── fower-plugin-cursor │ ├── README.md │ ├── tsconfig.json │ ├── src │ │ ├── index.ts │ │ └── index.test.ts │ └── package.json ├── fower-plugin-display │ ├── README.md │ ├── tsconfig.json │ ├── src │ │ └── index.ts │ └── package.json ├── fower-plugin-flexbox │ ├── README.md │ ├── tsconfig.json │ └── package.json ├── fower-plugin-gradient │ ├── README.md │ ├── types │ │ └── index.d.ts │ ├── tsconfig.json │ └── package.json ├── fower-plugin-layout │ ├── README.md │ └── tsconfig.json ├── fower-plugin-margin │ ├── README.md │ ├── tsconfig.json │ ├── package.json │ └── src │ │ └── index.ts ├── fower-plugin-opacity │ ├── README.md │ ├── src │ │ ├── index.ts │ │ └── index.test.ts │ ├── tsconfig.json │ ├── package.json │ └── types │ │ └── index.d.ts ├── fower-plugin-outline │ ├── README.md │ ├── tsconfig.json │ ├── package.json │ └── src │ │ └── index.ts ├── fower-plugin-overflow │ ├── README.md │ ├── tsconfig.json │ ├── src │ │ └── index.ts │ └── package.json ├── fower-plugin-position │ ├── README.md │ ├── tsconfig.json │ └── src │ │ └── index.ts ├── fower-plugin-rounded │ ├── README.md │ └── tsconfig.json ├── fower-plugin-shadow │ ├── README.md │ ├── tsconfig.json │ ├── src │ │ └── index.ts │ └── package.json ├── fower-plugin-z-index │ ├── README.md │ ├── src │ │ └── index.ts │ ├── tsconfig.json │ ├── types │ │ └── index.d.ts │ └── package.json ├── fower-plugin-animation │ ├── README.md │ └── tsconfig.json ├── fower-plugin-appearance │ ├── README.md │ ├── src │ │ ├── index.ts │ │ └── index.test.ts │ ├── tsconfig.json │ ├── types │ │ └── index.d.ts │ └── package.json ├── fower-plugin-background │ ├── README.md │ └── tsconfig.json ├── fower-plugin-box-sizing │ ├── README.md │ ├── tsconfig.json │ └── src │ │ └── index.ts ├── fower-plugin-font-style │ ├── README.md │ ├── src │ │ └── index.ts │ ├── tsconfig.json │ ├── types │ │ └── index.d.ts │ └── package.json ├── fower-plugin-padding │ ├── README.md │ ├── tsconfig.json │ └── package.json ├── fower-plugin-text-align │ ├── README.md │ ├── tsconfig.json │ └── src │ │ └── index.ts ├── fower-plugin-text-size │ ├── README.md │ └── tsconfig.json ├── fower-plugin-transform │ ├── README.md │ ├── tsconfig.json │ ├── types │ │ └── index.d.ts │ └── package.json ├── fower-plugin-transition │ ├── README.md │ └── tsconfig.json ├── fower-plugin-visibility │ ├── README.md │ ├── tsconfig.json │ ├── src │ │ └── index.ts │ └── package.json ├── fower-plugin-word-break │ ├── README.md │ ├── src │ │ └── index.ts │ ├── tsconfig.json │ └── package.json ├── preset-react-native │ ├── README.md │ ├── src │ │ └── index.ts │ └── tsconfig.json ├── fower-plugin-font-family │ ├── README.md │ ├── tsconfig.json │ └── src │ │ ├── index.ts │ │ └── index.test.ts ├── fower-plugin-font-weight │ ├── README.md │ ├── tsconfig.json │ └── src │ │ └── index.ts ├── fower-plugin-line-height │ ├── README.md │ └── tsconfig.json ├── fower-plugin-placeholder │ ├── README.md │ ├── tsconfig.json │ └── src │ │ └── index.ts ├── fower-plugin-text-overflow │ ├── README.md │ ├── tsconfig.json │ ├── src │ │ └── index.ts │ └── package.json ├── fower-plugin-user-select │ ├── README.md │ ├── src │ │ ├── index.ts │ │ └── index.test.ts │ └── tsconfig.json ├── fower-plugin-text-decoration │ ├── README.md │ ├── tsconfig.json │ ├── src │ │ └── index.ts │ └── package.json ├── fower-plugin-text-transform │ ├── README.md │ ├── src │ │ └── index.ts │ └── tsconfig.json └── css-object-processor │ ├── README.md │ ├── tsconfig.json │ └── package.json ├── .npmrc ├── examples ├── ExampleReactNative │ ├── .watchmanconfig │ ├── .editorconfig │ ├── app.json │ ├── .eslintrc.js │ ├── babel.config.js │ ├── android │ │ ├── app │ │ │ ├── debug.keystore │ │ │ ├── src │ │ │ │ ├── main │ │ │ │ │ ├── res │ │ │ │ │ │ ├── values │ │ │ │ │ │ │ ├── strings.xml │ │ │ │ │ │ │ └── styles.xml │ │ │ │ │ │ ├── mipmap-hdpi │ │ │ │ │ │ │ ├── ic_launcher.png │ │ │ │ │ │ │ └── ic_launcher_round.png │ │ │ │ │ │ ├── mipmap-mdpi │ │ │ │ │ │ │ ├── ic_launcher.png │ │ │ │ │ │ │ └── ic_launcher_round.png │ │ │ │ │ │ ├── mipmap-xhdpi │ │ │ │ │ │ │ ├── ic_launcher.png │ │ │ │ │ │ │ └── ic_launcher_round.png │ │ │ │ │ │ ├── mipmap-xxhdpi │ │ │ │ │ │ │ ├── ic_launcher.png │ │ │ │ │ │ │ └── ic_launcher_round.png │ │ │ │ │ │ └── mipmap-xxxhdpi │ │ │ │ │ │ │ ├── ic_launcher.png │ │ │ │ │ │ │ └── ic_launcher_round.png │ │ │ │ │ └── java │ │ │ │ │ │ └── com │ │ │ │ │ │ └── examplereactnative │ │ │ │ │ │ └── MainActivity.java │ │ │ │ └── debug │ │ │ │ │ └── AndroidManifest.xml │ │ │ ├── proguard-rules.pro │ │ │ └── build_defs.bzl │ │ ├── gradle │ │ │ └── wrapper │ │ │ │ ├── gradle-wrapper.jar │ │ │ │ └── gradle-wrapper.properties │ │ └── settings.gradle │ ├── ios │ │ ├── ExampleReactNative │ │ │ ├── Images.xcassets │ │ │ │ ├── Contents.json │ │ │ │ └── AppIcon.appiconset │ │ │ │ │ └── Contents.json │ │ │ ├── AppDelegate.h │ │ │ └── main.m │ │ └── ExampleReactNative.xcworkspace │ │ │ └── contents.xcworkspacedata │ ├── .buckconfig │ ├── .gitattributes │ ├── .prettierrc.js │ ├── index.js │ └── metro.config.js ├── example-nextjs │ ├── .eslintrc.json │ ├── next.config.js │ ├── pages │ │ ├── Visibility.tsx │ │ ├── class.tsx │ │ ├── FontStyle.tsx │ │ ├── Container.tsx │ │ ├── api │ │ │ └── hello.ts │ │ ├── WordBreak.tsx │ │ ├── Appearance.tsx │ │ ├── BoxSizing.tsx │ │ ├── Transform.tsx │ │ ├── TextDecoration.tsx │ │ ├── ClientOnly.tsx │ │ ├── FontFamily.tsx │ │ ├── TextAlignment.tsx │ │ ├── Grid.tsx │ │ ├── Transition.tsx │ │ ├── Overflow.tsx │ │ ├── Placeholder.tsx │ │ ├── UserSelect.tsx │ │ ├── TextOverflow.tsx │ │ ├── Predictable.tsx │ │ ├── ZIndex.tsx │ │ ├── global.tsx │ │ ├── Responsive.tsx │ │ ├── Pseudo.tsx │ │ ├── css.tsx │ │ ├── Ring.tsx │ │ ├── OutLine.tsx │ │ ├── styled.tsx │ │ ├── Opacity.tsx │ │ ├── keyframes.tsx │ │ └── CSSProp.tsx │ ├── styles │ │ └── globals.css │ ├── .gitignore │ ├── tsconfig.json │ ├── package.json │ └── components │ │ └── DarkModeToggle.tsx └── example-react-native-expo │ ├── assets │ ├── icon.png │ ├── jobs.jpg │ ├── favicon.png │ ├── splash.png │ └── adaptive-icon.png │ ├── tsconfig.json │ ├── babel.config.js │ ├── .gitignore │ ├── .expo-shared │ └── assets.json │ ├── App.tsx │ └── app.json ├── commitlint.config.js ├── .coveralls.yml ├── .prettierignore ├── pnpm-workspace.yaml ├── .prettierrc ├── jest.config.js ├── .gitignore ├── turbo.json ├── .changeset ├── config.json └── README.md ├── tsconfig.json └── CONTRIBUTING.md /.eslintignore: -------------------------------------------------------------------------------- 1 | **/*.js -------------------------------------------------------------------------------- /.husky/.gitignore: -------------------------------------------------------------------------------- 1 | _ 2 | -------------------------------------------------------------------------------- /website/static/.nojekyll: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/fower/README.md: -------------------------------------------------------------------------------- 1 | # fower 2 | -------------------------------------------------------------------------------- /packages/core/README.md: -------------------------------------------------------------------------------- 1 | # @fower/core 2 | -------------------------------------------------------------------------------- /packages/react/README.md: -------------------------------------------------------------------------------- 1 | # @fower/react 2 | -------------------------------------------------------------------------------- /packages/taro/README.md: -------------------------------------------------------------------------------- 1 | # @fower/taro 2 | -------------------------------------------------------------------------------- /packages/utils/README.md: -------------------------------------------------------------------------------- 1 | # @fower/utils 2 | -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | registry=https://registry.npmjs.org 2 | -------------------------------------------------------------------------------- /examples/ExampleReactNative/.watchmanconfig: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /packages/colors/README.md: -------------------------------------------------------------------------------- 1 | # @fower/colors 2 | -------------------------------------------------------------------------------- /packages/styled/README.md: -------------------------------------------------------------------------------- 1 | # @fower/styled 2 | -------------------------------------------------------------------------------- /packages/preset-web/README.md: -------------------------------------------------------------------------------- 1 | # @fower/preset-web 2 | -------------------------------------------------------------------------------- /packages/atomic-props/README.md: -------------------------------------------------------------------------------- 1 | # @fower/atomic-props 2 | -------------------------------------------------------------------------------- /packages/atomic-props/index.js: -------------------------------------------------------------------------------- 1 | module.exports = {} 2 | -------------------------------------------------------------------------------- /packages/color-helper/README.md: -------------------------------------------------------------------------------- 1 | # @fower/color-helper 2 | -------------------------------------------------------------------------------- /packages/fower-plugin-gap/README.md: -------------------------------------------------------------------------------- 1 | # fower-plugin-gap 2 | -------------------------------------------------------------------------------- /packages/fower-plugin-svg/README.md: -------------------------------------------------------------------------------- 1 | # fower-plugin-svg 2 | -------------------------------------------------------------------------------- /packages/preset-taro/README.md: -------------------------------------------------------------------------------- 1 | # @fower/preset-taro 2 | -------------------------------------------------------------------------------- /packages/react-native/README.md: -------------------------------------------------------------------------------- 1 | # @fower/react-native 2 | -------------------------------------------------------------------------------- /packages/fower-plugin-color/README.md: -------------------------------------------------------------------------------- 1 | # fower-plugin-color 2 | -------------------------------------------------------------------------------- /packages/fower-plugin-grid/README.md: -------------------------------------------------------------------------------- 1 | # fower-plugin-grid 2 | -------------------------------------------------------------------------------- /packages/fower-plugin-list/README.md: -------------------------------------------------------------------------------- 1 | # fower-plugin-list 2 | -------------------------------------------------------------------------------- /packages/fower-plugin-ring/README.md: -------------------------------------------------------------------------------- 1 | # fower-plugin-ring 2 | -------------------------------------------------------------------------------- /packages/fower-plugin-size/README.md: -------------------------------------------------------------------------------- 1 | # fower-plugin-size 2 | -------------------------------------------------------------------------------- /packages/fower/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from '@fower/core' 2 | -------------------------------------------------------------------------------- /packages/fower-plugin-border/README.md: -------------------------------------------------------------------------------- 1 | # fower-plugin-border 2 | -------------------------------------------------------------------------------- /packages/fower-plugin-cursor/README.md: -------------------------------------------------------------------------------- 1 | # fower-plugin-cursor 2 | -------------------------------------------------------------------------------- /packages/fower-plugin-display/README.md: -------------------------------------------------------------------------------- 1 | # fower-plugin-display 2 | -------------------------------------------------------------------------------- /packages/fower-plugin-flexbox/README.md: -------------------------------------------------------------------------------- 1 | # fower-plugin-flexbox 2 | -------------------------------------------------------------------------------- /packages/fower-plugin-gradient/README.md: -------------------------------------------------------------------------------- 1 | # fower-plugin-gradient 2 | -------------------------------------------------------------------------------- /packages/fower-plugin-layout/README.md: -------------------------------------------------------------------------------- 1 | # fower-plugin-layout 2 | -------------------------------------------------------------------------------- /packages/fower-plugin-margin/README.md: -------------------------------------------------------------------------------- 1 | # fower-plugin-margin 2 | -------------------------------------------------------------------------------- /packages/fower-plugin-opacity/README.md: -------------------------------------------------------------------------------- 1 | # fower-plugin-opacity 2 | -------------------------------------------------------------------------------- /packages/fower-plugin-outline/README.md: -------------------------------------------------------------------------------- 1 | # fower-plugin-outline 2 | -------------------------------------------------------------------------------- /packages/fower-plugin-overflow/README.md: -------------------------------------------------------------------------------- 1 | # fower-plugin-overflow 2 | -------------------------------------------------------------------------------- /packages/fower-plugin-position/README.md: -------------------------------------------------------------------------------- 1 | # fower-plugin-position 2 | -------------------------------------------------------------------------------- /packages/fower-plugin-rounded/README.md: -------------------------------------------------------------------------------- 1 | # fower-plugin-rounded 2 | -------------------------------------------------------------------------------- /packages/fower-plugin-shadow/README.md: -------------------------------------------------------------------------------- 1 | # fower-plugin-shadow 2 | -------------------------------------------------------------------------------- /packages/fower-plugin-z-index/README.md: -------------------------------------------------------------------------------- 1 | # fower-plugin-z-index 2 | -------------------------------------------------------------------------------- /packages/fower-plugin-animation/README.md: -------------------------------------------------------------------------------- 1 | # fower-plugin-animation 2 | -------------------------------------------------------------------------------- /packages/fower-plugin-appearance/README.md: -------------------------------------------------------------------------------- 1 | # fower-plugin-appearance 2 | -------------------------------------------------------------------------------- /packages/fower-plugin-background/README.md: -------------------------------------------------------------------------------- 1 | # fower-plugin-background 2 | -------------------------------------------------------------------------------- /packages/fower-plugin-box-sizing/README.md: -------------------------------------------------------------------------------- 1 | # fower-plugin-box-sizing 2 | -------------------------------------------------------------------------------- /packages/fower-plugin-font-style/README.md: -------------------------------------------------------------------------------- 1 | # fower-plugin-font-style 2 | -------------------------------------------------------------------------------- /packages/fower-plugin-padding/README.md: -------------------------------------------------------------------------------- 1 | # fower-plugin-background 2 | -------------------------------------------------------------------------------- /packages/fower-plugin-text-align/README.md: -------------------------------------------------------------------------------- 1 | # fower-plugin-text-align 2 | -------------------------------------------------------------------------------- /packages/fower-plugin-text-size/README.md: -------------------------------------------------------------------------------- 1 | # fower-plugin-text-size 2 | -------------------------------------------------------------------------------- /packages/fower-plugin-transform/README.md: -------------------------------------------------------------------------------- 1 | # fower-plugin-transform 2 | -------------------------------------------------------------------------------- /packages/fower-plugin-transition/README.md: -------------------------------------------------------------------------------- 1 | # fower-plugin-transition 2 | -------------------------------------------------------------------------------- /packages/fower-plugin-visibility/README.md: -------------------------------------------------------------------------------- 1 | # fower-plugin-visibility 2 | -------------------------------------------------------------------------------- /packages/fower-plugin-word-break/README.md: -------------------------------------------------------------------------------- 1 | # fower-plugin-word-break 2 | -------------------------------------------------------------------------------- /packages/preset-react-native/README.md: -------------------------------------------------------------------------------- 1 | # @fower/preset-react-native 2 | -------------------------------------------------------------------------------- /packages/fower-plugin-font-family/README.md: -------------------------------------------------------------------------------- 1 | # fower-plugin-font-family 2 | -------------------------------------------------------------------------------- /packages/fower-plugin-font-weight/README.md: -------------------------------------------------------------------------------- 1 | # fower-plugin-font-weight 2 | -------------------------------------------------------------------------------- /packages/fower-plugin-line-height/README.md: -------------------------------------------------------------------------------- 1 | # fower-plugin-line-height 2 | -------------------------------------------------------------------------------- /packages/fower-plugin-placeholder/README.md: -------------------------------------------------------------------------------- 1 | # fower-plugin-placeholder 2 | -------------------------------------------------------------------------------- /packages/fower-plugin-text-overflow/README.md: -------------------------------------------------------------------------------- 1 | # fower-plugin-text-overflow 2 | -------------------------------------------------------------------------------- /packages/fower-plugin-user-select/README.md: -------------------------------------------------------------------------------- 1 | # fower-plugin-user-select 2 | -------------------------------------------------------------------------------- /packages/fower-plugin-text-decoration/README.md: -------------------------------------------------------------------------------- 1 | # fower-plugin-text-decoration 2 | -------------------------------------------------------------------------------- /packages/fower-plugin-text-transform/README.md: -------------------------------------------------------------------------------- 1 | # fower-plugin-text-transform 2 | -------------------------------------------------------------------------------- /commitlint.config.js: -------------------------------------------------------------------------------- 1 | module.exports = {extends: ['@commitlint/config-conventional']} 2 | -------------------------------------------------------------------------------- /website/docs/debug.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | id: debug 3 | title: debug 调试 4 | --- 5 | 6 | wip... 7 | -------------------------------------------------------------------------------- /.coveralls.yml: -------------------------------------------------------------------------------- 1 | service_name: travis-pro 2 | repo_token: CBUF34H7bfKnuAcYJ88JGXNRUDleRmlEG 3 | -------------------------------------------------------------------------------- /examples/example-nextjs/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals" 3 | } 4 | -------------------------------------------------------------------------------- /examples/ExampleReactNative/.editorconfig: -------------------------------------------------------------------------------- 1 | # Windows files 2 | [*.bat] 3 | end_of_line = crlf 4 | -------------------------------------------------------------------------------- /website/docs/faq-4.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | id: faq-4 3 | sidebar_label: Performance 4 | title: 性能 5 | --- 6 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | .docusaurus 4 | .cache 5 | *.html 6 | build 7 | *.json 8 | -------------------------------------------------------------------------------- /website/docs/packages/colors.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | id: colors 3 | title: '@fower/colors' 4 | --- 5 | 6 | wip 7 | -------------------------------------------------------------------------------- /website/static/img/hint.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/forsigner/fower/HEAD/website/static/img/hint.png -------------------------------------------------------------------------------- /website/static/img/jobs.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/forsigner/fower/HEAD/website/static/img/jobs.jpg -------------------------------------------------------------------------------- /website/static/img/jobs.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/forsigner/fower/HEAD/website/static/img/jobs.webp -------------------------------------------------------------------------------- /website/static/img/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/forsigner/fower/HEAD/website/static/img/logo.png -------------------------------------------------------------------------------- /pnpm-workspace.yaml: -------------------------------------------------------------------------------- 1 | packages: 2 | - 'apps/*' 3 | - 'packages/*' 4 | - 'examples/*' 5 | - 'website' 6 | -------------------------------------------------------------------------------- /website/.vercel/project.json: -------------------------------------------------------------------------------- 1 | {"projectId":"prj_fVKWxiTgr6QGsYTwzsOUXzJI7tSU","orgId":"AqmUr3PEbI2qnRaLowasRzdB"} -------------------------------------------------------------------------------- /website/docs/faq-3.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | id: faq-3 3 | sidebar_label: How to remember Atom? 4 | title: Index 5 | --- 6 | -------------------------------------------------------------------------------- /website/static/img/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/forsigner/fower/HEAD/website/static/img/favicon.ico -------------------------------------------------------------------------------- /website/static/img/layout-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/forsigner/fower/HEAD/website/static/img/layout-1.png -------------------------------------------------------------------------------- /website/static/img/layout-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/forsigner/fower/HEAD/website/static/img/layout-2.png -------------------------------------------------------------------------------- /website/static/img/layout-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/forsigner/fower/HEAD/website/static/img/layout-3.png -------------------------------------------------------------------------------- /website/static/img/layout-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/forsigner/fower/HEAD/website/static/img/layout-4.png -------------------------------------------------------------------------------- /website/static/img/layout-5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/forsigner/fower/HEAD/website/static/img/layout-5.png -------------------------------------------------------------------------------- /website/static/img/vue-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/forsigner/fower/HEAD/website/static/img/vue-logo.png -------------------------------------------------------------------------------- /.husky/commit-msg: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | . "$(dirname "$0")/_/husky.sh" 3 | 4 | npx --no-install commitlint --edit "$1" 5 | -------------------------------------------------------------------------------- /website/docs/faq-6.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | id: faq-6 3 | sidebar_label: HTML or Component? 4 | title: 使用 HTML 还是自定义组件 5 | --- 6 | -------------------------------------------------------------------------------- /website/docs/packages/preset-taro.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | id: preset-taro 3 | title: '@fower/preset-taro' 4 | --- 5 | 6 | wip 7 | -------------------------------------------------------------------------------- /website/docs/packages/preset-web.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | id: preset-web 3 | title: '@fower/preset-web' 4 | --- 5 | 6 | wip 7 | -------------------------------------------------------------------------------- /website/static/img/type-safe.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/forsigner/fower/HEAD/website/static/img/type-safe.png -------------------------------------------------------------------------------- /.husky/pre-commit: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | . "$(dirname "$0")/_/husky.sh" 3 | 4 | # npm test 5 | # npx --no-install lint-staged 6 | -------------------------------------------------------------------------------- /examples/ExampleReactNative/app.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ExampleReactNative", 3 | "displayName": "ExampleReactNative" 4 | } -------------------------------------------------------------------------------- /website/docs/packages/color-helper.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | id: color-helper 3 | title: '@fower/color-helper' 4 | --- 5 | 6 | wip 7 | -------------------------------------------------------------------------------- /website/static/img/Intellisense.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/forsigner/fower/HEAD/website/static/img/Intellisense.png -------------------------------------------------------------------------------- /website/static/img/layout-figma.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/forsigner/fower/HEAD/website/static/img/layout-figma.png -------------------------------------------------------------------------------- /website/static/img/layout-sketch.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/forsigner/fower/HEAD/website/static/img/layout-sketch.png -------------------------------------------------------------------------------- /website/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [require.resolve('@docusaurus/core/lib/babel/preset')], 3 | }; 4 | -------------------------------------------------------------------------------- /examples/ExampleReactNative/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | extends: '@react-native-community', 4 | }; 5 | -------------------------------------------------------------------------------- /examples/ExampleReactNative/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ['module:metro-react-native-babel-preset'], 3 | }; 4 | -------------------------------------------------------------------------------- /website/static/img/fower-intellisense.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/forsigner/fower/HEAD/website/static/img/fower-intellisense.png -------------------------------------------------------------------------------- /website/docs/intellisense.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | id: intellisense 3 | sidebar_label: Intellisense 4 | title: Intellisense 5 | --- 6 | 7 | wip... 8 | -------------------------------------------------------------------------------- /website/docs/packages/preset-react-native.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | id: preset-react-native 3 | title: '@fower/preset-react-native' 4 | --- 5 | 6 | wip 7 | -------------------------------------------------------------------------------- /website/static/img/tutorial/localeDropdown.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/forsigner/fower/HEAD/website/static/img/tutorial/localeDropdown.png -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "semi": false, 3 | "tabWidth": 2, 4 | "singleQuote": true, 5 | "trailingComma": "all", 6 | "printWidth": 100 7 | } 8 | -------------------------------------------------------------------------------- /website/docs/design-system-letter-spacings.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | id: design-system-letter-spacings 3 | sidebar_label: Typography 4 | title: 排版 5 | --- 6 | -------------------------------------------------------------------------------- /examples/example-react-native-expo/assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/forsigner/fower/HEAD/examples/example-react-native-expo/assets/icon.png -------------------------------------------------------------------------------- /examples/example-react-native-expo/assets/jobs.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/forsigner/fower/HEAD/examples/example-react-native-expo/assets/jobs.jpg -------------------------------------------------------------------------------- /website/static/img/tutorial/docsVersionDropdown.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/forsigner/fower/HEAD/website/static/img/tutorial/docsVersionDropdown.png -------------------------------------------------------------------------------- /examples/example-react-native-expo/assets/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/forsigner/fower/HEAD/examples/example-react-native-expo/assets/favicon.png -------------------------------------------------------------------------------- /examples/example-react-native-expo/assets/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/forsigner/fower/HEAD/examples/example-react-native-expo/assets/splash.png -------------------------------------------------------------------------------- /examples/example-react-native-expo/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "expo/tsconfig.base", 3 | "compilerOptions": { 4 | "strict": true 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /examples/ExampleReactNative/android/app/debug.keystore: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/forsigner/fower/HEAD/examples/ExampleReactNative/android/app/debug.keystore -------------------------------------------------------------------------------- /examples/ExampleReactNative/android/app/src/main/res/values/strings.xml: -------------------------------------------------------------------------------- 1 | 2 | ExampleReactNative 3 | 4 | -------------------------------------------------------------------------------- /examples/ExampleReactNative/ios/ExampleReactNative/Images.xcassets/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "info" : { 3 | "version" : 1, 4 | "author" : "xcode" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /examples/example-react-native-expo/assets/adaptive-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/forsigner/fower/HEAD/examples/example-react-native-expo/assets/adaptive-icon.png -------------------------------------------------------------------------------- /website/docs/faq-5.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | id: faq-5 3 | sidebar_label: Support SSR? 4 | title: 支持服务端渲染吗？ 5 | --- 6 | 7 | Fower 还在快速开发中，暂时不支持 Server-Side Rendering。不过后续我们肯定会支持 SSR。 8 | -------------------------------------------------------------------------------- /examples/ExampleReactNative/.buckconfig: -------------------------------------------------------------------------------- 1 | 2 | [android] 3 | target = Google Inc.:Google APIs:23 4 | 5 | [maven_repositories] 6 | central = https://repo1.maven.org/maven2 7 | -------------------------------------------------------------------------------- /examples/ExampleReactNative/.gitattributes: -------------------------------------------------------------------------------- 1 | # Windows files should use crlf line endings 2 | # https://help.github.com/articles/dealing-with-line-endings/ 3 | *.bat text eol=crlf 4 | -------------------------------------------------------------------------------- /examples/example-react-native-expo/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = function(api) { 2 | api.cache(true); 3 | return { 4 | presets: ['babel-preset-expo'], 5 | }; 6 | }; 7 | -------------------------------------------------------------------------------- /website/src/pages/markdown-page.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Markdown page example 3 | --- 4 | 5 | # Markdown page example 6 | 7 | You don't need React to write simple standalone pages. 8 | -------------------------------------------------------------------------------- /examples/ExampleReactNative/android/gradle/wrapper/gradle-wrapper.jar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/forsigner/fower/HEAD/examples/ExampleReactNative/android/gradle/wrapper/gradle-wrapper.jar -------------------------------------------------------------------------------- /examples/example-nextjs/next.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = { 3 | reactStrictMode: true, 4 | swcMinify: true, 5 | } 6 | 7 | module.exports = nextConfig 8 | -------------------------------------------------------------------------------- /examples/ExampleReactNative/android/app/src/main/res/mipmap-hdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/forsigner/fower/HEAD/examples/ExampleReactNative/android/app/src/main/res/mipmap-hdpi/ic_launcher.png -------------------------------------------------------------------------------- /examples/ExampleReactNative/android/app/src/main/res/mipmap-mdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/forsigner/fower/HEAD/examples/ExampleReactNative/android/app/src/main/res/mipmap-mdpi/ic_launcher.png -------------------------------------------------------------------------------- /examples/ExampleReactNative/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/forsigner/fower/HEAD/examples/ExampleReactNative/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png -------------------------------------------------------------------------------- /website/docs/plugin.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | id: plugin 3 | title: plugin 4 | --- 5 | 6 | ```jsx live 7 | 8 | Hello 9 | 10 | ``` 11 | -------------------------------------------------------------------------------- /examples/ExampleReactNative/.prettierrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | bracketSpacing: false, 3 | jsxBracketSameLine: true, 4 | singleQuote: true, 5 | trailingComma: 'all', 6 | arrowParens: 'avoid', 7 | }; 8 | -------------------------------------------------------------------------------- /examples/ExampleReactNative/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/forsigner/fower/HEAD/examples/ExampleReactNative/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /examples/ExampleReactNative/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/forsigner/fower/HEAD/examples/ExampleReactNative/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /examples/ExampleReactNative/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/forsigner/fower/HEAD/examples/ExampleReactNative/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /examples/ExampleReactNative/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/forsigner/fower/HEAD/examples/ExampleReactNative/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | preset: 'ts-jest', 3 | testEnvironment: 'node', 4 | testPathIgnorePatterns: ['/node_modules/', '/dist/'], 5 | coveragePathIgnorePatterns: ['node_modules', 'dist'], 6 | } 7 | -------------------------------------------------------------------------------- /packages/atomic-props/index.d.ts: -------------------------------------------------------------------------------- 1 | // tslint:disable-next-line:export-just-namespace 2 | export = FowerTypes 3 | export as namespace FowerTypes 4 | 5 | declare namespace FowerTypes { 6 | interface AtomicProps {} 7 | } 8 | -------------------------------------------------------------------------------- /examples/ExampleReactNative/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/forsigner/fower/HEAD/examples/ExampleReactNative/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /examples/ExampleReactNative/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/forsigner/fower/HEAD/examples/ExampleReactNative/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /examples/example-react-native-expo/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | .expo/ 3 | npm-debug.* 4 | *.jks 5 | *.p8 6 | *.p12 7 | *.key 8 | *.mobileprovision 9 | *.orig.* 10 | web-build/ 11 | 12 | # macOS 13 | .DS_Store 14 | -------------------------------------------------------------------------------- /examples/ExampleReactNative/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/forsigner/fower/HEAD/examples/ExampleReactNative/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /examples/example-react-native-expo/.expo-shared/assets.json: -------------------------------------------------------------------------------- 1 | { 2 | "12bb71342c6255bbf50437ec8f4441c083f47cdb74bd89160c15e4f43e52a1cb": true, 3 | "40b842e832070c58deac6aa9e08fa459302ee3f9da492c7e77d93d2fbf4a56fd": true 4 | } 5 | -------------------------------------------------------------------------------- /website/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | // This file is not used in compilation. It is here just for a nice editor experience. 3 | "extends": "@tsconfig/docusaurus/tsconfig.json", 4 | "compilerOptions": { 5 | "baseUrl": "." 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /examples/ExampleReactNative/android/settings.gradle: -------------------------------------------------------------------------------- 1 | rootProject.name = 'ExampleReactNative' 2 | apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings) 3 | include ':app' 4 | -------------------------------------------------------------------------------- /examples/ExampleReactNative/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @format 3 | */ 4 | 5 | import {AppRegistry} from 'react-native'; 6 | import App from './App'; 7 | import {name as appName} from './app.json'; 8 | 9 | AppRegistry.registerComponent(appName, () => App); 10 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | *.swp 3 | .cache 4 | 5 | node_modules/ 6 | dist 7 | 8 | coverage 9 | 10 | yarn-error.log 11 | npm-debug.log 12 | lerna-debug.log 13 | 14 | package-lock.json 15 | .docusaurus/ 16 | build/ 17 | .umi 18 | out 19 | 20 | public/ 21 | 22 | # turbo 23 | .turbo -------------------------------------------------------------------------------- /examples/ExampleReactNative/ios/ExampleReactNative/AppDelegate.h: -------------------------------------------------------------------------------- 1 | #import 2 | #import 3 | 4 | @interface AppDelegate : UIResponder 5 | 6 | @property (nonatomic, strong) UIWindow *window; 7 | 8 | @end 9 | -------------------------------------------------------------------------------- /examples/ExampleReactNative/android/gradle/wrapper/gradle-wrapper.properties: -------------------------------------------------------------------------------- 1 | distributionBase=GRADLE_USER_HOME 2 | distributionPath=wrapper/dists 3 | distributionUrl=https\://services.gradle.org/distributions/gradle-6.7-all.zip 4 | zipStoreBase=GRADLE_USER_HOME 5 | zipStorePath=wrapper/dists 6 | -------------------------------------------------------------------------------- /examples/ExampleReactNative/ios/ExampleReactNative/main.m: -------------------------------------------------------------------------------- 1 | #import 2 | 3 | #import "AppDelegate.h" 4 | 5 | int main(int argc, char * argv[]) { 6 | @autoreleasepool { 7 | return UIApplicationMain(argc, argv, nil, NSStringFromClass([AppDelegate class])); 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /examples/example-nextjs/pages/Visibility.tsx: -------------------------------------------------------------------------------- 1 | import { Box } from '@fower/react'; 2 | 3 | export default () => { 4 | return ( 5 | 6 | visible 7 | visible 8 | hidden 9 | 10 | ); 11 | }; 12 | -------------------------------------------------------------------------------- /packages/css-object-processor/README.md: -------------------------------------------------------------------------------- 1 | # @fower/css-object-processor 2 | 3 | > A Light–weight css object processor 4 | 5 | ## Installation 6 | 7 | ```bash 8 | yarn add @fower/css-object-processor 9 | ``` 10 | 11 | ## Usage 12 | 13 | ```js 14 | const cssObject = { 15 | // 16 | } 17 | ``` 18 | -------------------------------------------------------------------------------- /packages/preset-web/src/index.ts: -------------------------------------------------------------------------------- 1 | import { Preset } from '@fower/core' 2 | import { plugins } from './plugins' 3 | import { theme } from './theme' 4 | 5 | export const presetWeb: Preset = { 6 | unit: 'px', 7 | prefix: '', 8 | theme, 9 | plugins, 10 | } 11 | 12 | export default presetWeb 13 | -------------------------------------------------------------------------------- /examples/example-nextjs/pages/class.tsx: -------------------------------------------------------------------------------- 1 | import { Box } from '@fower/react'; 2 | import { Atom } from '@fower/core'; 3 | 4 | export default () => { 5 | return ( 6 | 7 | Lorem ipsum 8 | 9 | ); 10 | }; 11 | -------------------------------------------------------------------------------- /packages/core/test/keyframes.test.ts: -------------------------------------------------------------------------------- 1 | import { keyframes } from '../src' 2 | 3 | test('keyframes()', () => { 4 | const name = keyframes({ 5 | '0%': { 6 | backgroundColor: 'red', 7 | }, 8 | }) 9 | 10 | expect(typeof name).toBe('string') 11 | expect(name).toMatch(/^keyframes-/) 12 | }) 13 | -------------------------------------------------------------------------------- /website/.gitignore: -------------------------------------------------------------------------------- 1 | # Dependencies 2 | /node_modules 3 | 4 | # Production 5 | /build 6 | 7 | # Generated files 8 | .docusaurus 9 | .cache-loader 10 | 11 | # Misc 12 | .DS_Store 13 | .env.local 14 | .env.development.local 15 | .env.test.local 16 | .env.production.local 17 | 18 | npm-debug.log* 19 | yarn-debug.log* 20 | yarn-error.log* 21 | -------------------------------------------------------------------------------- /packages/core/test/css.test.ts: -------------------------------------------------------------------------------- 1 | import { presetWeb } from '@fower/preset-web' 2 | import { store } from '../src/store' 3 | import { css } from '../src/css' 4 | 5 | afterEach(() => { 6 | store.setConfig(presetWeb) 7 | }) 8 | 9 | test('css()', () => { 10 | const name = css('p-1', 'm-100') 11 | expect(typeof name).toBe('string') 12 | }) 13 | -------------------------------------------------------------------------------- /packages/atomic-props/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@fower/atomic-props", 3 | "version": "2.1.0", 4 | "license": "MIT", 5 | "main": "index.js", 6 | "types": "index.d.ts", 7 | "scripts": { 8 | "build": "echo 'build'", 9 | "test": "echo 'build:test'" 10 | }, 11 | "dependencies": { 12 | "csstype": "^3.1.2" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /examples/ExampleReactNative/android/app/src/main/res/values/styles.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /packages/preset-taro/src/index.ts: -------------------------------------------------------------------------------- 1 | import { Theme } from '@fower/core' 2 | import { Preset } from '@fower/core' 3 | import { plugins } from './plugins' 4 | import { theme } from './theme' 5 | 6 | export const presetTaro: Preset = { 7 | unit: 'rpx', 8 | inline: true, 9 | theme: theme as Theme, 10 | plugins, 11 | } 12 | 13 | export default presetTaro 14 | -------------------------------------------------------------------------------- /examples/ExampleReactNative/ios/ExampleReactNative.xcworkspace/contents.xcworkspacedata: -------------------------------------------------------------------------------- 1 | 2 | 4 | 6 | 7 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /examples/example-nextjs/pages/FontStyle.tsx: -------------------------------------------------------------------------------- 1 | import { Box } from '@fower/react'; 2 | 3 | export default () => { 4 | return ( 5 | 6 | 7 | Lorem ipsum dolor sit amet 8 | 9 | 10 | Lorem ipsum dolor sit amet 11 | 12 | 13 | ); 14 | }; 15 | -------------------------------------------------------------------------------- /website/docs/article.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | id: article 3 | title: Article 4 | --- 5 | 6 | - https://survivejs.com/react/advanced-techniques/styling-react/ 7 | - https://johnpolacek.github.io/rethinking-css/ 8 | - https://css-tricks.com/lets-define-exactly-atomic-css/ 9 | - https://github.com/chibicode/react-functional-css-protips 10 | - https://docs.emmet.io/cheat-sheet/ 11 | -------------------------------------------------------------------------------- /packages/color-helper/test/index.test.ts: -------------------------------------------------------------------------------- 1 | import { formatColor } from '../src' 2 | 3 | describe('fower-utils', () => { 4 | test('formatColor', () => { 5 | expect(formatColor('#000', 'T10')).toEqual('rgba(0,0,0,0.9)') 6 | expect(formatColor('#000000', 'T10')).toEqual('rgba(0,0,0,0.9)') 7 | expect(formatColor('#xxx', 'T10')).toEqual('#xxx') 8 | }) 9 | }) 10 | -------------------------------------------------------------------------------- /packages/fower-plugin-z-index/src/index.ts: -------------------------------------------------------------------------------- 1 | import { FowerPlugin } from '@fower/core' 2 | 3 | export function isMatch(key: string) { 4 | return /^zIndex$/i.test(key) 5 | } 6 | 7 | export default (): FowerPlugin => { 8 | return { 9 | isMatch, 10 | handleAtom(atom) { 11 | atom.style = { zIndex: atom.value as any } 12 | return atom 13 | }, 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /packages/preset-react-native/src/index.ts: -------------------------------------------------------------------------------- 1 | import { Preset } from '@fower/core' 2 | import { Theme } from '@fower/core' 3 | import { plugins } from './plugins' 4 | import { theme } from './theme' 5 | 6 | export const presetReactNative: Preset = { 7 | unit: 'none', 8 | inline: true, 9 | theme: theme as Theme, 10 | plugins, 11 | } 12 | 13 | export default presetReactNative 14 | -------------------------------------------------------------------------------- /packages/core/test/sheet.test.ts: -------------------------------------------------------------------------------- 1 | // import { presetWeb } from '@fower/preset-web' 2 | // import { store } from '../src/store' 3 | import { styleSheet } from '../src/sheet' 4 | 5 | test('getSsrAtomIds()', () => { 6 | const ids = styleSheet.getSsrAtomIds() 7 | expect(ids.length).toBe(0) 8 | }) 9 | 10 | test('getStyle()', () => { 11 | expect(styleSheet.getStyle()).toBe('') 12 | }) 13 | -------------------------------------------------------------------------------- /packages/fower-plugin-appearance/src/index.ts: -------------------------------------------------------------------------------- 1 | import { FowerPlugin } from '@fower/core' 2 | 3 | export function isMatch(key: string) { 4 | return /^appearanceNone$/i.test(key) 5 | } 6 | 7 | export default (): FowerPlugin => { 8 | return { 9 | isMatch, 10 | handleAtom(atom) { 11 | atom.style = { appearance: 'none' } 12 | return atom 13 | }, 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /turbo.json: -------------------------------------------------------------------------------- 1 | { 2 | "pipeline": { 3 | "build": { 4 | "dependsOn": [ 5 | "^build" 6 | ], 7 | "outputs": [ 8 | "dist/**", 9 | ".next/**" 10 | ] 11 | }, 12 | "lint": { 13 | "outputs": [] 14 | }, 15 | "build:types": { 16 | "outputs": [] 17 | }, 18 | "dev": { 19 | "cache": false 20 | } 21 | } 22 | } -------------------------------------------------------------------------------- /packages/fower-plugin-opacity/src/index.ts: -------------------------------------------------------------------------------- 1 | import { FowerPlugin } from '@fower/core' 2 | 3 | export function isMatch(key: string) { 4 | return /^opacity$/.test(key) 5 | } 6 | 7 | export default (): FowerPlugin => { 8 | return { 9 | isMatch, 10 | handleAtom(atom) { 11 | atom.style = { opacity: Number(atom.value) / 100 } 12 | return atom 13 | }, 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /examples/example-nextjs/pages/Container.tsx: -------------------------------------------------------------------------------- 1 | import { Box } from '@fower/react'; 2 | 3 | export default () => { 4 | return ( 5 | 6 | 7 | Lorem ipsum dolor sit amet 8 | 9 | 10 | 11 | Lorem ipsum dolor sit amet 12 | 13 | 14 | ); 15 | }; 16 | -------------------------------------------------------------------------------- /packages/core/test/is-unit-prop.test.ts: -------------------------------------------------------------------------------- 1 | import { isUnitProp } from '../src/isUnitProp' 2 | 3 | test('color is not unitProp', () => { 4 | expect(isUnitProp('color')).toBeFalsy() 5 | }) 6 | 7 | test('padding is unitProp', () => { 8 | expect(isUnitProp('padding')).toBeTruthy() 9 | }) 10 | 11 | test('font-size is unitProp', () => { 12 | expect(isUnitProp('font-size')).toBeTruthy() 13 | }) 14 | -------------------------------------------------------------------------------- /examples/example-nextjs/pages/api/hello.ts: -------------------------------------------------------------------------------- 1 | // Next.js API route support: https://nextjs.org/docs/api-routes/introduction 2 | import type { NextApiRequest, NextApiResponse } from 'next' 3 | 4 | type Data = { 5 | name: string 6 | } 7 | 8 | export default function handler( 9 | req: NextApiRequest, 10 | res: NextApiResponse 11 | ) { 12 | res.status(200).json({ name: 'John Doe' }) 13 | } 14 | -------------------------------------------------------------------------------- /examples/ExampleReactNative/metro.config.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Metro configuration for React Native 3 | * https://github.com/facebook/react-native 4 | * 5 | * @format 6 | */ 7 | 8 | module.exports = { 9 | transformer: { 10 | getTransformOptions: async () => ({ 11 | transform: { 12 | experimentalImportSupport: false, 13 | inlineRequires: true, 14 | }, 15 | }), 16 | }, 17 | }; 18 | -------------------------------------------------------------------------------- /examples/example-nextjs/pages/WordBreak.tsx: -------------------------------------------------------------------------------- 1 | import { Box } from '@fower/react'; 2 | 3 | export default () => { 4 | return ( 5 | 6 | Lorem ipsum dolor sit amet 7 | 8 | Lorem ipsum dolor sit amet 9 | 10 | 11 | Lorem ipsum dolor sit amet 12 | 13 | 14 | ); 15 | }; 16 | -------------------------------------------------------------------------------- /packages/core/test/createStyle.test.ts: -------------------------------------------------------------------------------- 1 | import { presetWeb } from '@fower/preset-web' 2 | import { store } from '../src/store' 3 | import { createStyle } from '../src' 4 | 5 | beforeAll(() => { 6 | store.setConfig(presetWeb) 7 | }) 8 | 9 | test('createStyle()', () => { 10 | const style = createStyle('p-1', 'm-100') 11 | expect(style.padding).toEqual('1px') 12 | expect(style.margin).toEqual('100px') 13 | }) 14 | -------------------------------------------------------------------------------- /examples/example-nextjs/pages/Appearance.tsx: -------------------------------------------------------------------------------- 1 | import { Box } from '@fower/react'; 2 | 3 | export default () => { 4 | return ( 5 | 6 | 7 | 8 | 9 | 10 | 11 | 15 | 16 | ); 17 | }; 18 | -------------------------------------------------------------------------------- /examples/example-nextjs/pages/BoxSizing.tsx: -------------------------------------------------------------------------------- 1 | import { Box } from '@fower/react'; 2 | 3 | export default () => { 4 | return ( 5 | 6 | 7 | border box 8 | 9 | 10 | content box 11 | 12 | 13 | ); 14 | }; 15 | -------------------------------------------------------------------------------- /examples/example-nextjs/pages/Transform.tsx: -------------------------------------------------------------------------------- 1 | import { Box } from '@fower/react'; 2 | 3 | export default () => { 4 | return ( 5 | 6 | 17 | 18 | ); 19 | }; 20 | -------------------------------------------------------------------------------- /examples/example-nextjs/pages/TextDecoration.tsx: -------------------------------------------------------------------------------- 1 | import { Box } from '@fower/react'; 2 | 3 | export default () => { 4 | return ( 5 | 6 | 7 | 40 Lorem ipsum dolor sit amet 8 | 9 | 10 | 40 Lorem ipsum dolor sit amet 11 | 12 | Lorem ipsum dolor sit amet 13 | 14 | ); 15 | }; 16 | -------------------------------------------------------------------------------- /packages/fower-plugin-font-style/src/index.ts: -------------------------------------------------------------------------------- 1 | import { FowerPlugin } from '@fower/core' 2 | 3 | export function isMatch(key: string) { 4 | return /^(not)?Italic$/i.test(key) 5 | } 6 | 7 | export default (): FowerPlugin => { 8 | return { 9 | isMatch, 10 | handleAtom(atom) { 11 | const { key } = atom 12 | atom.style = { fontStyle: key === 'italic' ? 'italic' : 'normal' } 13 | return atom 14 | }, 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /examples/example-nextjs/pages/ClientOnly.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect, PropsWithChildren } from 'react' 2 | 3 | export function ClientOnly({ children }: PropsWithChildren) { 4 | // State / Props 5 | const [hasMounted, setHasMounted] = useState(false) 6 | 7 | // Hooks 8 | useEffect(() => { 9 | setHasMounted(true) 10 | }, []) 11 | 12 | // Render 13 | if (!hasMounted) return null 14 | 15 | return <>{children} 16 | } 17 | -------------------------------------------------------------------------------- /examples/example-nextjs/pages/FontFamily.tsx: -------------------------------------------------------------------------------- 1 | import { Box } from '@fower/react'; 2 | 3 | export default () => { 4 | return ( 5 | 6 | 7 | Lorem ipsum dolor sit amet 8 | 9 | 10 | Lorem ipsum dolor sit amet 11 | 12 | 13 | Lorem ipsum dolor sit amet 14 | 15 | 16 | ); 17 | }; 18 | -------------------------------------------------------------------------------- /website/docs/unit.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | id: unit 3 | title: unit 4 | --- 5 | 6 | ### 声明单位 7 | 8 | 默认原子属性不需要带单位，如果有需要，你可以声明明确的单位: 9 | 10 | ```jsx live 11 | 12 | 13 | 默认 14 | 15 | 16 | px 17 | 18 | 19 | rem 20 | 21 | 22 | em 23 | 24 | 25 | ``` 26 | -------------------------------------------------------------------------------- /packages/core/test/injectGlobalStyle.test.ts: -------------------------------------------------------------------------------- 1 | import { presetWeb } from '@fower/preset-web' 2 | import { store } from '../src/store' 3 | import { injectGlobalStyle } from '../src/injectGlobalStyle' 4 | 5 | beforeAll(() => { 6 | store.setConfig(presetWeb) 7 | }) 8 | 9 | test('injectGlobalStyle()', () => { 10 | injectGlobalStyle({ 11 | '*': { 12 | boxSizing: 'border-box', 13 | }, 14 | }) 15 | // TODO: 16 | expect(1).toEqual(1) 17 | }) 18 | -------------------------------------------------------------------------------- /packages/fower-plugin-gradient/types/index.d.ts: -------------------------------------------------------------------------------- 1 | import { FowerPlugin, FowerColor, ResponsiveValue } from '@fower/core' 2 | 3 | declare const _default: () => FowerPlugin 4 | export default _default 5 | 6 | declare module '@fower/atomic-props' { 7 | export interface AtomicProps { 8 | bgGradientX?: ResponsiveValue 9 | 10 | bgGradientY?: ResponsiveValue 11 | 12 | bgGradient?: ResponsiveValue 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /website/docs/design-system-line-heights.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | id: design-system-line-heights 3 | sidebar_label: Line heights 4 | title: Line heights 5 | --- 6 | 7 | Fower provides a set of preset line heights values. 8 | 9 | ```jsx 10 | const config = { 11 | theme: { 12 | lineHeights: { 13 | none: 1, 14 | tight: 1.25, 15 | snug: 1.375, 16 | normal: 1.5, 17 | relaxed: 1.625, 18 | loose: 2, 19 | }, 20 | }, 21 | } 22 | ``` 23 | -------------------------------------------------------------------------------- /.changeset/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://unpkg.com/@changesets/config@2.1.1/schema.json", 3 | "changelog": "@changesets/cli/changelog", 4 | "commit": false, 5 | "fixed": [], 6 | "linked": [], 7 | "access": "public", 8 | "baseBranch": "master", 9 | "updateInternalDependencies": "patch", 10 | "ignore": [ 11 | "examplereactnative", 12 | "example-nextjs", 13 | "@fower/example-react-native-expo", 14 | "@fower/website" 15 | ] 16 | } -------------------------------------------------------------------------------- /packages/fower-plugin-user-select/src/index.ts: -------------------------------------------------------------------------------- 1 | import { FowerPlugin } from '@fower/core' 2 | 3 | export function isMatch(key: string) { 4 | return /^select(none|text|all|auto)$/i.test(key) 5 | } 6 | 7 | export default (): FowerPlugin => { 8 | return { 9 | isMatch, 10 | handleAtom(atom) { 11 | const value: any = atom.key.replace('select', '').toLowerCase() 12 | atom.style = { userSelect: value } 13 | return atom 14 | }, 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /examples/example-nextjs/pages/TextAlignment.tsx: -------------------------------------------------------------------------------- 1 | import { Box } from '@fower/react'; 2 | 3 | export default () => { 4 | return ( 5 | 6 | Lorem ipsum dolor sit amet 7 | Lorem ipsum dolor sit amet 8 | Lorem ipsum dolor sit amet 9 | Lorem ipsum dolor sit amet 10 | Lorem ipsum dolor sit amet 11 | 12 | ); 13 | }; 14 | -------------------------------------------------------------------------------- /examples/example-nextjs/pages/Grid.tsx: -------------------------------------------------------------------------------- 1 | import { Box } from '@fower/react'; 2 | 3 | export default () => { 4 | return ( 5 | 6 | 7 | Grid 8 | 9 | 10 | A 11 | B 12 | C 13 | D 14 | F 15 | G 16 | 17 | 18 | ); 19 | }; 20 | -------------------------------------------------------------------------------- /examples/example-nextjs/pages/Transition.tsx: -------------------------------------------------------------------------------- 1 | import { Box } from '@fower/react'; 2 | import { AtomicProps } from '@fower/atomic-props'; 3 | 4 | export default () => { 5 | return ( 6 | 7 | 17 | 18 | ); 19 | }; 20 | -------------------------------------------------------------------------------- /packages/core/src/isAtomicArgsValid.ts: -------------------------------------------------------------------------------- 1 | import { AtomicArray, CSSObject, AtomicKey } from './typings' 2 | import { Parser } from './parser' 3 | import { argsToProps } from '@fower/utils' 4 | 5 | export function isAtomicArgsValid( 6 | value: AtomicArray | CSSObject | AtomicKey | ({} & string), 7 | ): boolean { 8 | const props = argsToProps([value]) 9 | const parser = new Parser(props) 10 | const parsedProps = parser.getParsedProps() 11 | 12 | return !Object.keys(parsedProps).length 13 | } 14 | -------------------------------------------------------------------------------- /examples/example-nextjs/pages/Overflow.tsx: -------------------------------------------------------------------------------- 1 | import { Box } from '@fower/react'; 2 | 3 | export default () => { 4 | return ( 5 | 6 | 7 | OutLine 8 | 9 | 10 | overflow 11 | 12 | 13 | 14 | overflowXAuto 15 | 16 | 17 | 18 | overflow 19 | 20 | 21 | ); 22 | }; 23 | -------------------------------------------------------------------------------- /website/docs/appearance.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | id: appearance 3 | title: Appearance 4 | --- 5 | 6 | | Atomic Props | CSS Properties | 7 | | -------------- | ---------------- | 8 | | appearanceNone | appearance: none | 9 | 10 | ## Usage 11 | 12 | ```jsx live 13 | 14 | 15 | 16 | 17 | 18 | 19 | 23 | 24 | ``` 25 | -------------------------------------------------------------------------------- /website/docs/max-height.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | id: max-height 3 | title: Max Height 4 | --- 5 | 6 | Use `maxH-{value}` props to controll element max height. 7 | 8 | | Atomic Props | CSS Properties | 9 | | --------------------------- | -------------------- | 10 | | maxH-{value} / maxH={value} | max-height: {value}; | 11 | 12 | ## Usage 13 | 14 | ```jsx live 15 | 16 | 17 | maxH-100 18 | 19 | 20 | ``` 21 | -------------------------------------------------------------------------------- /website/docs/max-width.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | id: max-width 3 | title: Max Width 4 | --- 5 | 6 | Use `maxW-{value}` Atomic Props to control the max width of an element. 7 | 8 | | Atomic Props | CSS Properties | 9 | | --------------------------- | ------------------- | 10 | | maxW-{value} / maxW={value} | max-width: {value}; | 11 | 12 | ## Usage 13 | 14 | ```jsx live 15 | 16 | 17 | minW-100 18 | 19 | 20 | ``` 21 | -------------------------------------------------------------------------------- /packages/fower-plugin-grid/types/index.d.ts: -------------------------------------------------------------------------------- 1 | import { FowerPlugin, ResponsiveValue } from '@fower/core' 2 | 3 | declare const _default: () => FowerPlugin 4 | export default _default 5 | 6 | declare module '@fower/atomic-props' { 7 | export interface AtomicProps { 8 | /** 9 | * Set gridTemplateColumns 10 | * 11 | * @example 12 | * ```tsx 13 | * 14 | * ``` 15 | */ 16 | gridTemplateColumns?: ResponsiveValue 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /examples/ExampleReactNative/android/app/src/main/java/com/examplereactnative/MainActivity.java: -------------------------------------------------------------------------------- 1 | package com.examplereactnative; 2 | 3 | import com.facebook.react.ReactActivity; 4 | 5 | public class MainActivity extends ReactActivity { 6 | 7 | /** 8 | * Returns the name of the main component registered from JavaScript. This is used to schedule 9 | * rendering of the component. 10 | */ 11 | @Override 12 | protected String getMainComponentName() { 13 | return "ExampleReactNative"; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /packages/react/types/index.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | import React from 'react' 3 | declare const getAtomIds: () => string[] 4 | export { AtomicProps } from '@fower/atomic-props' 5 | export * from '@fower/core' 6 | export * from '@fower/styled' 7 | export * from '../dist/jsx' 8 | export * from '../dist/Box' 9 | export * from '../dist/useMode' 10 | export { getAtomIds } 11 | export declare function getCssString(): string 12 | export declare function ServerStyle(): React.JSX.Element 13 | -------------------------------------------------------------------------------- /packages/fower-plugin-opacity/src/index.test.ts: -------------------------------------------------------------------------------- 1 | import { Atom } from '@fower/core' 2 | import plugin from '.' 3 | 4 | const { isMatch, handleAtom } = plugin() 5 | 6 | const parser = {} as any 7 | 8 | test('isMatch', () => { 9 | expect(isMatch!('opacity')).toEqual(true) 10 | }) 11 | 12 | test('opacity={60}', () => { 13 | const atom = handleAtom!( 14 | new Atom({ 15 | propKey: 'opacity', 16 | propValue: 60, 17 | }), 18 | parser, 19 | ) 20 | expect(atom.style.opacity).toEqual(0.6) 21 | }) 22 | -------------------------------------------------------------------------------- /website/src/components/GettingStarted.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Box } from '@fower/react' 3 | 4 | export const GettingStarted = () => { 5 | return ( 6 | 7 | 8 | 9 | 10 | Steve Jobs 11 | Co-founder of Apple Inc. 12 | 13 | 14 | 15 | ) 16 | } 17 | -------------------------------------------------------------------------------- /examples/ExampleReactNative/android/app/proguard-rules.pro: -------------------------------------------------------------------------------- 1 | # Add project specific ProGuard rules here. 2 | # By default, the flags in this file are appended to flags specified 3 | # in /usr/local/Cellar/android-sdk/24.3.3/tools/proguard/proguard-android.txt 4 | # You can edit the include path and order by changing the proguardFiles 5 | # directive in build.gradle. 6 | # 7 | # For more details, see 8 | # http://developer.android.com/guide/developing/tools/proguard.html 9 | 10 | # Add any project specific keep options here: 11 | -------------------------------------------------------------------------------- /examples/example-nextjs/pages/Placeholder.tsx: -------------------------------------------------------------------------------- 1 | import { Box } from '@fower/react'; 2 | 3 | export default () => { 4 | return ( 5 | 6 | 7 | 8 | 9 | 10 | 17 | 18 | ); 19 | }; 20 | -------------------------------------------------------------------------------- /packages/fower-plugin-text-transform/src/index.ts: -------------------------------------------------------------------------------- 1 | import { FowerPlugin } from '@fower/core' 2 | 3 | export default (): FowerPlugin => { 4 | return { 5 | isMatch(key) { 6 | const caseKeys = ['normalcase', 'uppercase', 'lowercase', 'capitalize'] 7 | return caseKeys.includes(key) 8 | }, 9 | handleAtom(atom) { 10 | const { key } = atom 11 | const value: any = key === 'normalcase' ? 'none' : key 12 | 13 | atom.style = { textTransform: value } 14 | 15 | return atom 16 | }, 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /website/docs/design-system-font-weights.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | id: design-system-font-weights 3 | sidebar_label: Font weights 4 | title: Font weights 5 | --- 6 | 7 | Fower provides a set of preset font weights values. 8 | 9 | ```jsx 10 | const config = { 11 | theme: { 12 | fontWeights: { 13 | hairline: 100, 14 | thin: 200, 15 | light: 300, 16 | normal: 400, 17 | medium: 500, 18 | semibold: 600, 19 | bold: 700, 20 | extrabold: 800, 21 | black: 900, 22 | }, 23 | }, 24 | } 25 | ``` 26 | -------------------------------------------------------------------------------- /.changeset/README.md: -------------------------------------------------------------------------------- 1 | # Changesets 2 | 3 | Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works 4 | with multi-package repos, or single-package repos to help you version and publish your code. You can 5 | find the full documentation for it [in our repository](https://github.com/changesets/changesets) 6 | 7 | We have a quick list of common questions to get you started engaging with this project in 8 | [our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md) 9 | -------------------------------------------------------------------------------- /examples/example-nextjs/pages/UserSelect.tsx: -------------------------------------------------------------------------------- 1 | import { Box } from '@fower/react'; 2 | 3 | export default () => { 4 | return ( 5 | 6 | 7 | Lorem ipsum dolor sit amet 8 | 9 | 10 | Lorem ipsum dolor sit amet 11 | 12 | 13 | Lorem ipsum dolor sit amet 14 | 15 | 16 | 17 | Lorem ipsum dolor sit amet 18 | 19 | 20 | ); 21 | }; 22 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "module": "esnext", 4 | "lib": [ 5 | "dom", 6 | "esnext", 7 | "ES2020" 8 | ], 9 | "target": "ESNext", 10 | "importHelpers": true, 11 | "declaration": true, 12 | "sourceMap": true, 13 | "strict": true, 14 | "noUnusedLocals": true, 15 | "noUnusedParameters": true, 16 | "noImplicitReturns": true, 17 | "noFallthroughCasesInSwitch": true, 18 | "moduleResolution": "node", 19 | "jsx": "react", 20 | "esModuleInterop": true 21 | } 22 | } -------------------------------------------------------------------------------- /packages/colors/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "include": ["src", "types"], 3 | "compilerOptions": { 4 | "module": "esnext", 5 | "lib": ["dom", "esnext"], 6 | "importHelpers": true, 7 | "declaration": true, 8 | "sourceMap": true, 9 | "rootDir": "./src", 10 | "strict": true, 11 | "noUnusedLocals": true, 12 | "noUnusedParameters": true, 13 | "noImplicitReturns": true, 14 | "noFallthroughCasesInSwitch": true, 15 | "moduleResolution": "node", 16 | "jsx": "react", 17 | "esModuleInterop": true 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /packages/fower/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "include": ["src", "types"], 3 | "compilerOptions": { 4 | "module": "esnext", 5 | "lib": ["dom", "esnext"], 6 | "importHelpers": true, 7 | "declaration": true, 8 | "sourceMap": true, 9 | "rootDir": "./src", 10 | "strict": true, 11 | "noUnusedLocals": true, 12 | "noUnusedParameters": true, 13 | "noImplicitReturns": true, 14 | "noFallthroughCasesInSwitch": true, 15 | "moduleResolution": "node", 16 | "jsx": "react", 17 | "esModuleInterop": true 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /packages/react/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "include": ["src", "types"], 3 | "compilerOptions": { 4 | "module": "esnext", 5 | "lib": ["dom", "esnext"], 6 | "importHelpers": true, 7 | "declaration": true, 8 | "sourceMap": true, 9 | "rootDir": "./src", 10 | "strict": true, 11 | "noUnusedLocals": true, 12 | "noUnusedParameters": true, 13 | "noImplicitReturns": true, 14 | "noFallthroughCasesInSwitch": true, 15 | "moduleResolution": "node", 16 | "jsx": "react", 17 | "esModuleInterop": true 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /packages/styled/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "include": ["src", "types"], 3 | "compilerOptions": { 4 | "module": "esnext", 5 | "lib": ["dom", "esnext"], 6 | "importHelpers": true, 7 | "declaration": true, 8 | "sourceMap": true, 9 | "rootDir": "./src", 10 | "strict": true, 11 | "noUnusedLocals": true, 12 | "noUnusedParameters": true, 13 | "noImplicitReturns": true, 14 | "noFallthroughCasesInSwitch": true, 15 | "moduleResolution": "node", 16 | "jsx": "react", 17 | "esModuleInterop": true 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /packages/taro/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "include": ["src", "types"], 3 | "compilerOptions": { 4 | "module": "esnext", 5 | "lib": ["dom", "esnext"], 6 | "importHelpers": true, 7 | "declaration": true, 8 | "sourceMap": true, 9 | "rootDir": "./src", 10 | "strict": true, 11 | "noUnusedLocals": true, 12 | "noUnusedParameters": true, 13 | "noImplicitReturns": true, 14 | "noFallthroughCasesInSwitch": true, 15 | "moduleResolution": "node", 16 | "jsx": "react", 17 | "esModuleInterop": true 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /packages/utils/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "include": ["src", "types"], 3 | "compilerOptions": { 4 | "module": "esnext", 5 | "lib": ["dom", "esnext"], 6 | "importHelpers": true, 7 | "declaration": true, 8 | "sourceMap": true, 9 | "rootDir": "./src", 10 | "strict": true, 11 | "noUnusedLocals": true, 12 | "noUnusedParameters": true, 13 | "noImplicitReturns": true, 14 | "noFallthroughCasesInSwitch": true, 15 | "moduleResolution": "node", 16 | "jsx": "react", 17 | "esModuleInterop": true 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /packages/color-helper/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "include": ["src", "types"], 3 | "compilerOptions": { 4 | "module": "esnext", 5 | "lib": ["dom", "esnext"], 6 | "importHelpers": true, 7 | "declaration": true, 8 | "sourceMap": true, 9 | "rootDir": "./src", 10 | "strict": true, 11 | "noUnusedLocals": true, 12 | "noUnusedParameters": true, 13 | "noImplicitReturns": true, 14 | "noFallthroughCasesInSwitch": true, 15 | "moduleResolution": "node", 16 | "jsx": "react", 17 | "esModuleInterop": true 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /packages/fower-plugin-appearance/src/index.test.ts: -------------------------------------------------------------------------------- 1 | import { Parser, Atom } from '@fower/core' 2 | import plugin from '.' 3 | 4 | const { isMatch, handleAtom } = plugin() 5 | const parser = new Parser({}) 6 | 7 | test('isMatch', () => { 8 | expect(isMatch!('appearanceNone')).toEqual(true) 9 | }) 10 | 11 | test('appearanceNone', () => { 12 | const atom = handleAtom!( 13 | new Atom({ 14 | propKey: 'appearanceNone', 15 | propValue: true, 16 | }), 17 | parser, 18 | ) 19 | expect(atom.style.appearance).toEqual('none') 20 | }) 21 | -------------------------------------------------------------------------------- /packages/preset-taro/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "include": ["src", "types"], 3 | "compilerOptions": { 4 | "module": "esnext", 5 | "lib": ["dom", "esnext"], 6 | "importHelpers": true, 7 | "declaration": true, 8 | "sourceMap": true, 9 | "rootDir": "./src", 10 | "strict": true, 11 | "noUnusedLocals": true, 12 | "noUnusedParameters": true, 13 | "noImplicitReturns": true, 14 | "noFallthroughCasesInSwitch": true, 15 | "moduleResolution": "node", 16 | "jsx": "react", 17 | "esModuleInterop": true 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /packages/preset-web/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "include": ["src", "types"], 3 | "compilerOptions": { 4 | "module": "esnext", 5 | "lib": ["dom", "esnext"], 6 | "importHelpers": true, 7 | "declaration": true, 8 | "sourceMap": true, 9 | "rootDir": "./src", 10 | "strict": true, 11 | "noUnusedLocals": true, 12 | "noUnusedParameters": true, 13 | "noImplicitReturns": true, 14 | "noFallthroughCasesInSwitch": true, 15 | "moduleResolution": "node", 16 | "jsx": "react", 17 | "esModuleInterop": true 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /packages/react-native/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "include": ["src", "types"], 3 | "compilerOptions": { 4 | "module": "esnext", 5 | "lib": ["dom", "esnext"], 6 | "importHelpers": true, 7 | "declaration": true, 8 | "sourceMap": true, 9 | "rootDir": "src", 10 | "strict": true, 11 | "noUnusedLocals": true, 12 | "noUnusedParameters": true, 13 | "noImplicitReturns": true, 14 | "noFallthroughCasesInSwitch": true, 15 | "moduleResolution": "node", 16 | "jsx": "react", 17 | "esModuleInterop": true 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /website/docs/global-style.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | id: global-style 3 | title: Global style 4 | sidebar_label: Global style 5 | --- 6 | 7 | Sometimes you might want to insert global css like resets or font faces. Use `injectGlobalStyle` to write global CSS, and `injectGlobalStyle` supports ssr. 8 | 9 | ```jsx 10 | injectGlobalStyle({ 11 | '.title': { 12 | fontWeight: 800, 13 | fontSize: '20px', 14 | color: 'hotpink', 15 | }, 16 | }) 17 | ``` 18 | 19 | ```jsx live 20 | 21 |
Heading
22 | 23 | ``` 24 | -------------------------------------------------------------------------------- /examples/example-nextjs/styles/globals.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | padding: 0; 4 | margin: 0; 5 | font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, 6 | Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; 7 | } 8 | 9 | a { 10 | color: inherit; 11 | text-decoration: none; 12 | } 13 | 14 | * { 15 | box-sizing: border-box; 16 | } 17 | 18 | @media (prefers-color-scheme: dark) { 19 | html { 20 | color-scheme: dark; 21 | } 22 | body { 23 | color: white; 24 | background: black; 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /packages/fower-plugin-color/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "include": ["src", "types"], 3 | "compilerOptions": { 4 | "module": "esnext", 5 | "lib": ["dom", "esnext"], 6 | "importHelpers": true, 7 | "declaration": true, 8 | "sourceMap": true, 9 | "rootDir": "./src", 10 | "strict": true, 11 | "noUnusedLocals": true, 12 | "noUnusedParameters": true, 13 | "noImplicitReturns": true, 14 | "noFallthroughCasesInSwitch": true, 15 | "moduleResolution": "node", 16 | "jsx": "react", 17 | "esModuleInterop": true 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /packages/fower-plugin-gap/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "include": ["src", "types"], 3 | "compilerOptions": { 4 | "module": "esnext", 5 | "lib": ["dom", "esnext"], 6 | "importHelpers": true, 7 | "declaration": true, 8 | "sourceMap": true, 9 | "rootDir": "./src", 10 | "strict": true, 11 | "noUnusedLocals": true, 12 | "noUnusedParameters": true, 13 | "noImplicitReturns": true, 14 | "noFallthroughCasesInSwitch": true, 15 | "moduleResolution": "node", 16 | "jsx": "react", 17 | "esModuleInterop": true 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /packages/fower-plugin-grid/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "include": ["src", "types"], 3 | "compilerOptions": { 4 | "module": "esnext", 5 | "lib": ["dom", "esnext"], 6 | "importHelpers": true, 7 | "declaration": true, 8 | "sourceMap": true, 9 | "rootDir": "./src", 10 | "strict": true, 11 | "noUnusedLocals": true, 12 | "noUnusedParameters": true, 13 | "noImplicitReturns": true, 14 | "noFallthroughCasesInSwitch": true, 15 | "moduleResolution": "node", 16 | "jsx": "react", 17 | "esModuleInterop": true 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /packages/fower-plugin-list/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "include": ["src", "types"], 3 | "compilerOptions": { 4 | "module": "esnext", 5 | "lib": ["dom", "esnext"], 6 | "importHelpers": true, 7 | "declaration": true, 8 | "sourceMap": true, 9 | "rootDir": "./src", 10 | "strict": true, 11 | "noUnusedLocals": true, 12 | "noUnusedParameters": true, 13 | "noImplicitReturns": true, 14 | "noFallthroughCasesInSwitch": true, 15 | "moduleResolution": "node", 16 | "jsx": "react", 17 | "esModuleInterop": true 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /packages/fower-plugin-ring/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "include": ["src", "types"], 3 | "compilerOptions": { 4 | "module": "esnext", 5 | "lib": ["dom", "esnext"], 6 | "importHelpers": true, 7 | "declaration": true, 8 | "sourceMap": true, 9 | "rootDir": "./src", 10 | "strict": true, 11 | "noUnusedLocals": true, 12 | "noUnusedParameters": true, 13 | "noImplicitReturns": true, 14 | "noFallthroughCasesInSwitch": true, 15 | "moduleResolution": "node", 16 | "jsx": "react", 17 | "esModuleInterop": true 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /packages/fower-plugin-size/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "include": ["src", "types"], 3 | "compilerOptions": { 4 | "module": "esnext", 5 | "lib": ["dom", "esnext"], 6 | "importHelpers": true, 7 | "declaration": true, 8 | "sourceMap": true, 9 | "rootDir": "./src", 10 | "strict": true, 11 | "noUnusedLocals": true, 12 | "noUnusedParameters": true, 13 | "noImplicitReturns": true, 14 | "noFallthroughCasesInSwitch": true, 15 | "moduleResolution": "node", 16 | "jsx": "react", 17 | "esModuleInterop": true 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /packages/fower-plugin-svg/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "include": ["src", "types"], 3 | "compilerOptions": { 4 | "module": "esnext", 5 | "lib": ["dom", "esnext"], 6 | "importHelpers": true, 7 | "declaration": true, 8 | "sourceMap": true, 9 | "rootDir": "./src", 10 | "strict": true, 11 | "noUnusedLocals": true, 12 | "noUnusedParameters": true, 13 | "noImplicitReturns": true, 14 | "noFallthroughCasesInSwitch": true, 15 | "moduleResolution": "node", 16 | "jsx": "react", 17 | "esModuleInterop": true 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /packages/css-object-processor/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "include": ["src", "types"], 3 | "compilerOptions": { 4 | "module": "esnext", 5 | "lib": ["dom", "esnext"], 6 | "importHelpers": true, 7 | "declaration": true, 8 | "sourceMap": true, 9 | "rootDir": "./src", 10 | "strict": true, 11 | "noUnusedLocals": true, 12 | "noUnusedParameters": true, 13 | "noImplicitReturns": true, 14 | "noFallthroughCasesInSwitch": true, 15 | "moduleResolution": "node", 16 | "jsx": "react", 17 | "esModuleInterop": true 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /packages/fower-plugin-animation/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "include": ["src", "types"], 3 | "compilerOptions": { 4 | "module": "esnext", 5 | "lib": ["dom", "esnext"], 6 | "importHelpers": true, 7 | "declaration": true, 8 | "sourceMap": true, 9 | "rootDir": "./src", 10 | "strict": true, 11 | "noUnusedLocals": true, 12 | "noUnusedParameters": true, 13 | "noImplicitReturns": true, 14 | "noFallthroughCasesInSwitch": true, 15 | "moduleResolution": "node", 16 | "jsx": "react", 17 | "esModuleInterop": true 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /packages/fower-plugin-appearance/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "include": ["src", "types"], 3 | "compilerOptions": { 4 | "module": "esnext", 5 | "lib": ["dom", "esnext"], 6 | "importHelpers": true, 7 | "declaration": true, 8 | "sourceMap": true, 9 | "rootDir": "./src", 10 | "strict": true, 11 | "noUnusedLocals": true, 12 | "noUnusedParameters": true, 13 | "noImplicitReturns": true, 14 | "noFallthroughCasesInSwitch": true, 15 | "moduleResolution": "node", 16 | "jsx": "react", 17 | "esModuleInterop": true 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /packages/fower-plugin-background/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "include": ["src", "types"], 3 | "compilerOptions": { 4 | "module": "esnext", 5 | "lib": ["dom", "esnext"], 6 | "importHelpers": true, 7 | "declaration": true, 8 | "sourceMap": true, 9 | "rootDir": "./src", 10 | "strict": true, 11 | "noUnusedLocals": true, 12 | "noUnusedParameters": true, 13 | "noImplicitReturns": true, 14 | "noFallthroughCasesInSwitch": true, 15 | "moduleResolution": "node", 16 | "jsx": "react", 17 | "esModuleInterop": true 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /packages/fower-plugin-border/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "include": ["src", "types"], 3 | "compilerOptions": { 4 | "module": "esnext", 5 | "lib": ["dom", "esnext"], 6 | "importHelpers": true, 7 | "declaration": true, 8 | "sourceMap": true, 9 | "rootDir": "./src", 10 | "strict": true, 11 | "noUnusedLocals": true, 12 | "noUnusedParameters": true, 13 | "noImplicitReturns": true, 14 | "noFallthroughCasesInSwitch": true, 15 | "moduleResolution": "node", 16 | "jsx": "react", 17 | "esModuleInterop": true 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /packages/fower-plugin-box-sizing/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "include": ["src", "types"], 3 | "compilerOptions": { 4 | "module": "esnext", 5 | "lib": ["dom", "esnext"], 6 | "importHelpers": true, 7 | "declaration": true, 8 | "sourceMap": true, 9 | "rootDir": "./src", 10 | "strict": true, 11 | "noUnusedLocals": true, 12 | "noUnusedParameters": true, 13 | "noImplicitReturns": true, 14 | "noFallthroughCasesInSwitch": true, 15 | "moduleResolution": "node", 16 | "jsx": "react", 17 | "esModuleInterop": true 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /packages/fower-plugin-cursor/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "include": ["src", "types"], 3 | "compilerOptions": { 4 | "module": "esnext", 5 | "lib": ["dom", "esnext"], 6 | "importHelpers": true, 7 | "declaration": true, 8 | "sourceMap": true, 9 | "rootDir": "./src", 10 | "strict": true, 11 | "noUnusedLocals": true, 12 | "noUnusedParameters": true, 13 | "noImplicitReturns": true, 14 | "noFallthroughCasesInSwitch": true, 15 | "moduleResolution": "node", 16 | "jsx": "react", 17 | "esModuleInterop": true 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /packages/fower-plugin-display/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "include": ["src", "types"], 3 | "compilerOptions": { 4 | "module": "esnext", 5 | "lib": ["dom", "esnext"], 6 | "importHelpers": true, 7 | "declaration": true, 8 | "sourceMap": true, 9 | "rootDir": "./src", 10 | "strict": true, 11 | "noUnusedLocals": true, 12 | "noUnusedParameters": true, 13 | "noImplicitReturns": true, 14 | "noFallthroughCasesInSwitch": true, 15 | "moduleResolution": "node", 16 | "jsx": "react", 17 | "esModuleInterop": true 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /packages/fower-plugin-flexbox/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "include": ["src", "types"], 3 | "compilerOptions": { 4 | "module": "esnext", 5 | "lib": ["dom", "esnext"], 6 | "importHelpers": true, 7 | "declaration": true, 8 | "sourceMap": true, 9 | "rootDir": "./src", 10 | "strict": true, 11 | "noUnusedLocals": true, 12 | "noUnusedParameters": true, 13 | "noImplicitReturns": true, 14 | "noFallthroughCasesInSwitch": true, 15 | "moduleResolution": "node", 16 | "jsx": "react", 17 | "esModuleInterop": true 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /packages/fower-plugin-font-style/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "include": ["src", "types"], 3 | "compilerOptions": { 4 | "module": "esnext", 5 | "lib": ["dom", "esnext"], 6 | "importHelpers": true, 7 | "declaration": true, 8 | "sourceMap": true, 9 | "rootDir": "./src", 10 | "strict": true, 11 | "noUnusedLocals": true, 12 | "noUnusedParameters": true, 13 | "noImplicitReturns": true, 14 | "noFallthroughCasesInSwitch": true, 15 | "moduleResolution": "node", 16 | "jsx": "react", 17 | "esModuleInterop": true 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /packages/fower-plugin-gradient/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "include": ["src", "types"], 3 | "compilerOptions": { 4 | "module": "esnext", 5 | "lib": ["dom", "esnext"], 6 | "importHelpers": true, 7 | "declaration": true, 8 | "sourceMap": true, 9 | "rootDir": "./src", 10 | "strict": true, 11 | "noUnusedLocals": true, 12 | "noUnusedParameters": true, 13 | "noImplicitReturns": true, 14 | "noFallthroughCasesInSwitch": true, 15 | "moduleResolution": "node", 16 | "jsx": "react", 17 | "esModuleInterop": true 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /packages/fower-plugin-layout/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "include": ["src", "types"], 3 | "compilerOptions": { 4 | "module": "esnext", 5 | "lib": ["dom", "esnext"], 6 | "importHelpers": true, 7 | "declaration": true, 8 | "sourceMap": true, 9 | "rootDir": "./src", 10 | "strict": true, 11 | "noUnusedLocals": true, 12 | "noUnusedParameters": true, 13 | "noImplicitReturns": true, 14 | "noFallthroughCasesInSwitch": true, 15 | "moduleResolution": "node", 16 | "jsx": "react", 17 | "esModuleInterop": true 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /packages/fower-plugin-margin/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "include": ["src", "types"], 3 | "compilerOptions": { 4 | "module": "esnext", 5 | "lib": ["dom", "esnext"], 6 | "importHelpers": true, 7 | "declaration": true, 8 | "sourceMap": true, 9 | "rootDir": "./src", 10 | "strict": true, 11 | "noUnusedLocals": true, 12 | "noUnusedParameters": true, 13 | "noImplicitReturns": true, 14 | "noFallthroughCasesInSwitch": true, 15 | "moduleResolution": "node", 16 | "jsx": "react", 17 | "esModuleInterop": true 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /packages/fower-plugin-opacity/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "include": ["src", "types"], 3 | "compilerOptions": { 4 | "module": "esnext", 5 | "lib": ["dom", "esnext"], 6 | "importHelpers": true, 7 | "declaration": true, 8 | "sourceMap": true, 9 | "rootDir": "./src", 10 | "strict": true, 11 | "noUnusedLocals": true, 12 | "noUnusedParameters": true, 13 | "noImplicitReturns": true, 14 | "noFallthroughCasesInSwitch": true, 15 | "moduleResolution": "node", 16 | "jsx": "react", 17 | "esModuleInterop": true 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /packages/fower-plugin-outline/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "include": ["src", "types"], 3 | "compilerOptions": { 4 | "module": "esnext", 5 | "lib": ["dom", "esnext"], 6 | "importHelpers": true, 7 | "declaration": true, 8 | "sourceMap": true, 9 | "rootDir": "./src", 10 | "strict": true, 11 | "noUnusedLocals": true, 12 | "noUnusedParameters": true, 13 | "noImplicitReturns": true, 14 | "noFallthroughCasesInSwitch": true, 15 | "moduleResolution": "node", 16 | "jsx": "react", 17 | "esModuleInterop": true 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /packages/fower-plugin-overflow/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "include": ["src", "types"], 3 | "compilerOptions": { 4 | "module": "esnext", 5 | "lib": ["dom", "esnext"], 6 | "importHelpers": true, 7 | "declaration": true, 8 | "sourceMap": true, 9 | "rootDir": "./src", 10 | "strict": true, 11 | "noUnusedLocals": true, 12 | "noUnusedParameters": true, 13 | "noImplicitReturns": true, 14 | "noFallthroughCasesInSwitch": true, 15 | "moduleResolution": "node", 16 | "jsx": "react", 17 | "esModuleInterop": true 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /packages/fower-plugin-padding/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "include": ["src", "types"], 3 | "compilerOptions": { 4 | "module": "esnext", 5 | "lib": ["dom", "esnext"], 6 | "importHelpers": true, 7 | "declaration": true, 8 | "sourceMap": true, 9 | "rootDir": "./src", 10 | "strict": true, 11 | "noUnusedLocals": true, 12 | "noUnusedParameters": true, 13 | "noImplicitReturns": true, 14 | "noFallthroughCasesInSwitch": true, 15 | "moduleResolution": "node", 16 | "jsx": "react", 17 | "esModuleInterop": true 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /packages/fower-plugin-position/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "include": ["src", "types"], 3 | "compilerOptions": { 4 | "module": "esnext", 5 | "lib": ["dom", "esnext"], 6 | "importHelpers": true, 7 | "declaration": true, 8 | "sourceMap": true, 9 | "rootDir": "./src", 10 | "strict": true, 11 | "noUnusedLocals": true, 12 | "noUnusedParameters": true, 13 | "noImplicitReturns": true, 14 | "noFallthroughCasesInSwitch": true, 15 | "moduleResolution": "node", 16 | "jsx": "react", 17 | "esModuleInterop": true 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /packages/fower-plugin-rounded/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "include": ["src", "types"], 3 | "compilerOptions": { 4 | "module": "esnext", 5 | "lib": ["dom", "esnext"], 6 | "importHelpers": true, 7 | "declaration": true, 8 | "sourceMap": true, 9 | "rootDir": "./src", 10 | "strict": true, 11 | "noUnusedLocals": true, 12 | "noUnusedParameters": true, 13 | "noImplicitReturns": true, 14 | "noFallthroughCasesInSwitch": true, 15 | "moduleResolution": "node", 16 | "jsx": "react", 17 | "esModuleInterop": true 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /packages/fower-plugin-shadow/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "include": ["src", "types"], 3 | "compilerOptions": { 4 | "module": "esnext", 5 | "lib": ["dom", "esnext"], 6 | "importHelpers": true, 7 | "declaration": true, 8 | "sourceMap": true, 9 | "rootDir": "./src", 10 | "strict": true, 11 | "noUnusedLocals": true, 12 | "noUnusedParameters": true, 13 | "noImplicitReturns": true, 14 | "noFallthroughCasesInSwitch": true, 15 | "moduleResolution": "node", 16 | "jsx": "react", 17 | "esModuleInterop": true 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /packages/fower-plugin-text-align/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "include": ["src", "types"], 3 | "compilerOptions": { 4 | "module": "esnext", 5 | "lib": ["dom", "esnext"], 6 | "importHelpers": true, 7 | "declaration": true, 8 | "sourceMap": true, 9 | "rootDir": "./src", 10 | "strict": true, 11 | "noUnusedLocals": true, 12 | "noUnusedParameters": true, 13 | "noImplicitReturns": true, 14 | "noFallthroughCasesInSwitch": true, 15 | "moduleResolution": "node", 16 | "jsx": "react", 17 | "esModuleInterop": true 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /packages/fower-plugin-text-size/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "include": ["src", "types"], 3 | "compilerOptions": { 4 | "module": "esnext", 5 | "lib": ["dom", "esnext"], 6 | "importHelpers": true, 7 | "declaration": true, 8 | "sourceMap": true, 9 | "rootDir": "./src", 10 | "strict": true, 11 | "noUnusedLocals": true, 12 | "noUnusedParameters": true, 13 | "noImplicitReturns": true, 14 | "noFallthroughCasesInSwitch": true, 15 | "moduleResolution": "node", 16 | "jsx": "react", 17 | "esModuleInterop": true 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /packages/fower-plugin-transform/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "include": ["src", "types"], 3 | "compilerOptions": { 4 | "module": "esnext", 5 | "lib": ["dom", "esnext"], 6 | "importHelpers": true, 7 | "declaration": true, 8 | "sourceMap": true, 9 | "rootDir": "./src", 10 | "strict": true, 11 | "noUnusedLocals": true, 12 | "noUnusedParameters": true, 13 | "noImplicitReturns": true, 14 | "noFallthroughCasesInSwitch": true, 15 | "moduleResolution": "node", 16 | "jsx": "react", 17 | "esModuleInterop": true 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /packages/fower-plugin-transition/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "include": ["src", "types"], 3 | "compilerOptions": { 4 | "module": "esnext", 5 | "lib": ["dom", "esnext"], 6 | "importHelpers": true, 7 | "declaration": true, 8 | "sourceMap": true, 9 | "rootDir": "./src", 10 | "strict": true, 11 | "noUnusedLocals": true, 12 | "noUnusedParameters": true, 13 | "noImplicitReturns": true, 14 | "noFallthroughCasesInSwitch": true, 15 | "moduleResolution": "node", 16 | "jsx": "react", 17 | "esModuleInterop": true 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /packages/fower-plugin-visibility/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "include": ["src", "types"], 3 | "compilerOptions": { 4 | "module": "esnext", 5 | "lib": ["dom", "esnext"], 6 | "importHelpers": true, 7 | "declaration": true, 8 | "sourceMap": true, 9 | "rootDir": "./src", 10 | "strict": true, 11 | "noUnusedLocals": true, 12 | "noUnusedParameters": true, 13 | "noImplicitReturns": true, 14 | "noFallthroughCasesInSwitch": true, 15 | "moduleResolution": "node", 16 | "jsx": "react", 17 | "esModuleInterop": true 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /packages/fower-plugin-word-break/src/index.ts: -------------------------------------------------------------------------------- 1 | import { FowerPlugin } from '@fower/core' 2 | 3 | const maps: any = { 4 | breaknormal: { overflowWrap: 'normal', wordBreak: 'normal' }, 5 | breakwords: { overflowWrap: 'break-word' }, 6 | breakall: { wordBreak: 'break-all' }, 7 | } 8 | 9 | export default (): FowerPlugin => { 10 | return { 11 | isMatch(key) { 12 | return /^break(normal|words|all)$/i.test(key) 13 | }, 14 | handleAtom(atom) { 15 | atom.style = maps[atom.key.toLowerCase()] 16 | return atom 17 | }, 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /packages/fower-plugin-word-break/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "include": ["src", "types"], 3 | "compilerOptions": { 4 | "module": "esnext", 5 | "lib": ["dom", "esnext"], 6 | "importHelpers": true, 7 | "declaration": true, 8 | "sourceMap": true, 9 | "rootDir": "./src", 10 | "strict": true, 11 | "noUnusedLocals": true, 12 | "noUnusedParameters": true, 13 | "noImplicitReturns": true, 14 | "noFallthroughCasesInSwitch": true, 15 | "moduleResolution": "node", 16 | "jsx": "react", 17 | "esModuleInterop": true 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /packages/fower-plugin-z-index/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "include": ["src", "types"], 3 | "compilerOptions": { 4 | "module": "esnext", 5 | "lib": ["dom", "esnext"], 6 | "importHelpers": true, 7 | "declaration": true, 8 | "sourceMap": true, 9 | "rootDir": "./src", 10 | "strict": true, 11 | "noUnusedLocals": true, 12 | "noUnusedParameters": true, 13 | "noImplicitReturns": true, 14 | "noFallthroughCasesInSwitch": true, 15 | "moduleResolution": "node", 16 | "jsx": "react", 17 | "esModuleInterop": true 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /packages/preset-react-native/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "include": ["src", "types"], 3 | "compilerOptions": { 4 | "module": "esnext", 5 | "lib": ["dom", "esnext"], 6 | "importHelpers": true, 7 | "declaration": true, 8 | "sourceMap": true, 9 | "rootDir": "./src", 10 | "strict": true, 11 | "noUnusedLocals": true, 12 | "noUnusedParameters": true, 13 | "noImplicitReturns": true, 14 | "noFallthroughCasesInSwitch": true, 15 | "moduleResolution": "node", 16 | "jsx": "react", 17 | "esModuleInterop": true 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | ## Prerequisites 2 | 3 | - [Node.js](http://nodejs.org/) >= v7 must be installed. 4 | - [Yarn](https://yarnpkg.com/en/docs/install) 5 | 6 | ## Installation 7 | 8 | In root directory, Run `yarn install` to install dependencies for development. 9 | 10 | ```bash 11 | yarn install 12 | ``` 13 | 14 | ### Build 15 | 16 | In root directory, Run `yarn build` to build all package. 17 | 18 | ```bash 19 | yarn build 20 | ``` 21 | 22 | ### Run Example 23 | 24 | Run a example to test ui. 25 | 26 | ```bash 27 | cd examples/example-react 28 | yarn start 29 | ``` 30 | -------------------------------------------------------------------------------- /packages/fower-plugin-font-family/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "include": ["src", "types"], 3 | "compilerOptions": { 4 | "module": "esnext", 5 | "lib": ["dom", "esnext"], 6 | "importHelpers": true, 7 | "declaration": true, 8 | "sourceMap": true, 9 | "rootDir": "./src", 10 | "strict": true, 11 | "noUnusedLocals": true, 12 | "noUnusedParameters": true, 13 | "noImplicitReturns": true, 14 | "noFallthroughCasesInSwitch": true, 15 | "moduleResolution": "node", 16 | "jsx": "react", 17 | "esModuleInterop": true 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /packages/fower-plugin-font-weight/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "include": ["src", "types"], 3 | "compilerOptions": { 4 | "module": "esnext", 5 | "lib": ["dom", "esnext"], 6 | "importHelpers": true, 7 | "declaration": true, 8 | "sourceMap": true, 9 | "rootDir": "./src", 10 | "strict": true, 11 | "noUnusedLocals": true, 12 | "noUnusedParameters": true, 13 | "noImplicitReturns": true, 14 | "noFallthroughCasesInSwitch": true, 15 | "moduleResolution": "node", 16 | "jsx": "react", 17 | "esModuleInterop": true 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /packages/fower-plugin-line-height/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "include": ["src", "types"], 3 | "compilerOptions": { 4 | "module": "esnext", 5 | "lib": ["dom", "esnext"], 6 | "importHelpers": true, 7 | "declaration": true, 8 | "sourceMap": true, 9 | "rootDir": "./src", 10 | "strict": true, 11 | "noUnusedLocals": true, 12 | "noUnusedParameters": true, 13 | "noImplicitReturns": true, 14 | "noFallthroughCasesInSwitch": true, 15 | "moduleResolution": "node", 16 | "jsx": "react", 17 | "esModuleInterop": true 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /packages/fower-plugin-placeholder/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "include": ["src", "types"], 3 | "compilerOptions": { 4 | "module": "esnext", 5 | "lib": ["dom", "esnext"], 6 | "importHelpers": true, 7 | "declaration": true, 8 | "sourceMap": true, 9 | "rootDir": "./src", 10 | "strict": true, 11 | "noUnusedLocals": true, 12 | "noUnusedParameters": true, 13 | "noImplicitReturns": true, 14 | "noFallthroughCasesInSwitch": true, 15 | "moduleResolution": "node", 16 | "jsx": "react", 17 | "esModuleInterop": true 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /packages/fower-plugin-text-decoration/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "include": ["src", "types"], 3 | "compilerOptions": { 4 | "module": "esnext", 5 | "lib": ["dom", "esnext"], 6 | "importHelpers": true, 7 | "declaration": true, 8 | "sourceMap": true, 9 | "rootDir": "./src", 10 | "strict": true, 11 | "noUnusedLocals": true, 12 | "noUnusedParameters": true, 13 | "noImplicitReturns": true, 14 | "noFallthroughCasesInSwitch": true, 15 | "moduleResolution": "node", 16 | "jsx": "react", 17 | "esModuleInterop": true 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /packages/fower-plugin-text-overflow/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "include": ["src", "types"], 3 | "compilerOptions": { 4 | "module": "esnext", 5 | "lib": ["dom", "esnext"], 6 | "importHelpers": true, 7 | "declaration": true, 8 | "sourceMap": true, 9 | "rootDir": "./src", 10 | "strict": true, 11 | "noUnusedLocals": true, 12 | "noUnusedParameters": true, 13 | "noImplicitReturns": true, 14 | "noFallthroughCasesInSwitch": true, 15 | "moduleResolution": "node", 16 | "jsx": "react", 17 | "esModuleInterop": true 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /packages/fower-plugin-text-transform/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "include": ["src", "types"], 3 | "compilerOptions": { 4 | "module": "esnext", 5 | "lib": ["dom", "esnext"], 6 | "importHelpers": true, 7 | "declaration": true, 8 | "sourceMap": true, 9 | "rootDir": "./src", 10 | "strict": true, 11 | "noUnusedLocals": true, 12 | "noUnusedParameters": true, 13 | "noImplicitReturns": true, 14 | "noFallthroughCasesInSwitch": true, 15 | "moduleResolution": "node", 16 | "jsx": "react", 17 | "esModuleInterop": true 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /packages/fower-plugin-user-select/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "include": ["src", "types"], 3 | "compilerOptions": { 4 | "module": "esnext", 5 | "lib": ["dom", "esnext"], 6 | "importHelpers": true, 7 | "declaration": true, 8 | "sourceMap": true, 9 | "rootDir": "./src", 10 | "strict": true, 11 | "noUnusedLocals": true, 12 | "noUnusedParameters": true, 13 | "noImplicitReturns": true, 14 | "noFallthroughCasesInSwitch": true, 15 | "moduleResolution": "node", 16 | "jsx": "react", 17 | "esModuleInterop": true 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /website/src/components/UtilityFirstFower.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Box } from '@fower/react' 3 | 4 | export const UtilityFirstFower = () => { 5 | return ( 6 | 7 | 8 | 9 | 10 | 11 | Steve Jobs 12 | 13 | Co-founder of Apple Inc. 14 | 15 | 16 | 17 | ) 18 | } 19 | -------------------------------------------------------------------------------- /website/src/components/UtilityFirstRaw/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import './index.css' 3 | 4 | export const UtilityFirstRaw = () => { 5 | return ( 6 |
7 |
8 | 9 |
10 |
Steve Jobs
11 | Co-founder of Apple Inc. 12 |
13 |
14 |
15 | ) 16 | } 17 | -------------------------------------------------------------------------------- /examples/example-nextjs/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | *.pem 21 | 22 | # debug 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | .pnpm-debug.log* 27 | 28 | # local env files 29 | .env*.local 30 | 31 | # vercel 32 | .vercel 33 | 34 | # typescript 35 | *.tsbuildinfo 36 | next-env.d.ts 37 | -------------------------------------------------------------------------------- /website/.vercel/README.txt: -------------------------------------------------------------------------------- 1 | > Why do I have a folder named ".vercel" in my project? 2 | The ".vercel" folder is created when you link a directory to a Vercel project. 3 | 4 | > What does the "project.json" file contain? 5 | The "project.json" file contains: 6 | - The ID of the Vercel project that you linked ("projectId") 7 | - The ID of the user or team your Vercel project is owned by ("orgId") 8 | 9 | > Should I commit the ".vercel" folder? 10 | No, you should not share the ".vercel" folder with anyone. 11 | Upon creation, it will be automatically added to your ".gitignore" file. 12 | -------------------------------------------------------------------------------- /examples/example-nextjs/pages/TextOverflow.tsx: -------------------------------------------------------------------------------- 1 | import { Box } from '@fower/react'; 2 | 3 | export default () => { 4 | return ( 5 | 6 | 7 | Lorem ipsum dolor sit amet 8 | 9 | 10 | Lorem ipsum dolorrrrrrrrrrrrrrrrrrrrrrrrrr sit amet 11 | 12 | 13 | Lorem ipsum dolorrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr sit amet 14 | 15 | 16 | ); 17 | }; 18 | -------------------------------------------------------------------------------- /examples/example-nextjs/pages/Predictable.tsx: -------------------------------------------------------------------------------- 1 | import { Box } from '@fower/react'; 2 | import { styled } from '@fower/styled'; 3 | import { FC } from 'react'; 4 | 5 | export default () => { 6 | const MyButton = (props) => { 7 | return ; 8 | }; 9 | 10 | const Button = styled(MyButton); 11 | return ( 12 | 13 | 14 | 15 | 16 | 17 | 18 | ); 19 | }; 20 | -------------------------------------------------------------------------------- /packages/fower-plugin-appearance/types/index.d.ts: -------------------------------------------------------------------------------- 1 | import { FowerPlugin, ResponsiveBoolean } from '@fower/core' 2 | 3 | declare const _default: () => FowerPlugin 4 | export default _default 5 | 6 | declare module '@fower/atomic-props' { 7 | export interface AtomicProps { 8 | /** 9 | * Set appearance to none 10 | * ```css 11 | * { 12 | * appearance: none; 13 | * } 14 | * ``` 15 | * 16 | * @example 17 | * ```tsx 18 | * 19 | * ``` 20 | */ 21 | appearanceNone?: ResponsiveBoolean 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /packages/fower-plugin-grid/src/index.test.ts: -------------------------------------------------------------------------------- 1 | import { Parser, Atom } from '@fower/core' 2 | import plugin from '.' 3 | 4 | const { isMatch, handleAtom } = plugin() 5 | const parser = {} as Parser 6 | 7 | test('isMatch', () => { 8 | expect(isMatch!('gridTemplateColumns')).toEqual(true) 9 | }) 10 | 11 | test('gridTemplateColumns={4}', () => { 12 | const atom = handleAtom!( 13 | new Atom({ 14 | propKey: 'gridTemplateColumns', 15 | propValue: 4, 16 | }), 17 | parser, 18 | ) 19 | expect(atom.style.gridTemplateColumns).toEqual('repeat(4, minmax(0px, 1fr))') 20 | }) 21 | -------------------------------------------------------------------------------- /website/docs/flex-basis.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | id: flex-basis 3 | title: Flex Basis 4 | --- 5 | 6 | Flexbox 是一种用于按行或按列布局元素的一维布局方法 。元素可以膨胀以填充额外的空间, 收缩以适应更小的空间。Fower 支持大部分常用的 flexbox 属性，可以满足您大部分布局场景。 7 | 8 | 如果你不熟悉弹性盒子，建议先通过 MDN [了解 flexbox](https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout/Flexbox)。 9 | 10 | ## Flex Direction 11 | 12 | 使用 `row` 和 `column` 控制 flex 布局的方向，为了你的 UI 结构更加简洁，当你设置了 `row` 和 `column`，你不需要再设置 `display: flex` 样式属性，Fower 会自动帮你添加该属性。 13 | 14 | ```jsx live 15 | 16 | 17 | 18 | 19 | ``` 20 | -------------------------------------------------------------------------------- /examples/example-nextjs/pages/ZIndex.tsx: -------------------------------------------------------------------------------- 1 | import { Box } from '@fower/react'; 2 | import { styled } from '@fower/styled'; 3 | 4 | export default function Demo() { 5 | const Item = styled('div', [ 6 | 'white', 7 | 'toCenter', 8 | 'shadow', 9 | 'bgOrange400', 10 | 'circle-80', 11 | 'absolute', 12 | ]); 13 | return ( 14 | 15 | 20 16 | 17 | 10 18 | 19 | 20 | 0 21 | 22 | 23 | ); 24 | } 25 | -------------------------------------------------------------------------------- /packages/fower-plugin-text-align/src/index.ts: -------------------------------------------------------------------------------- 1 | import { FowerPlugin, Atom } from '@fower/core' 2 | 3 | export function isMatch(key: string) { 4 | return /^text(Left|Center|Right|Justify|Align)$/i.test(key) 5 | } 6 | 7 | export function toStyle({ key, value, isValueProp }: Atom): any { 8 | if (isValueProp) return { textAlign: value } 9 | return { textAlign: key.replace(/^text/i, '').toLowerCase() } 10 | } 11 | 12 | export default (): FowerPlugin => { 13 | return { 14 | isMatch, 15 | handleAtom(atom) { 16 | atom.style = toStyle(atom) 17 | return atom 18 | }, 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /examples/ExampleReactNative/android/app/src/debug/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 6 | 7 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /packages/fower-plugin-color/src/index.ts: -------------------------------------------------------------------------------- 1 | import { FowerPlugin, Parser } from '@fower/core' 2 | 3 | export function isMatch(key: string, parser: Parser) { 4 | if (key === 'color') return true 5 | 6 | // color in theme 7 | const colors: any = parser.config.theme.colors 8 | return !!colors[key] 9 | } 10 | 11 | export default (): FowerPlugin => { 12 | return { 13 | isMatch, 14 | handleAtom(atom) { 15 | const { key, value } = atom 16 | atom.style = { 17 | color: key === 'color' ? value : key, 18 | } 19 | atom.type = 'color' 20 | return atom 21 | }, 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /examples/example-nextjs/pages/global.tsx: -------------------------------------------------------------------------------- 1 | import { Box } from '@fower/react'; 2 | import { injectGlobalStyle } from '@fower/core'; 3 | import { css, setConfig } from '@fower/core'; 4 | 5 | setConfig({ 6 | objectPropKeys: ['sx'], 7 | }); 8 | 9 | // 预期输出 toRight，但是会输出空 10 | // console.log('----', css({ toRight: true })); 11 | 12 | injectGlobalStyle({ 13 | '.title': { 14 | fontWeight: 800, 15 | fontSize: '20px', 16 | color: 'hotpink', 17 | }, 18 | }); 19 | 20 | export default () => { 21 | return ( 22 | 23 |
Heading
24 | 25 | ); 26 | }; 27 | -------------------------------------------------------------------------------- /examples/example-nextjs/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "allowJs": true, 6 | "skipLibCheck": true, 7 | "strict": true, 8 | "forceConsistentCasingInFileNames": true, 9 | "noEmit": true, 10 | "esModuleInterop": true, 11 | "module": "esnext", 12 | "moduleResolution": "node", 13 | "resolveJsonModule": true, 14 | "isolatedModules": true, 15 | "jsx": "preserve", 16 | "incremental": true 17 | }, 18 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], 19 | "exclude": ["node_modules"] 20 | } 21 | -------------------------------------------------------------------------------- /website/docs/flexbox-introduction.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | id: flexbox-introduction 3 | title: Flexbox Introduction 4 | --- 5 | 6 | Flexbox 是一种用于按行或按列布局元素的一维布局方法 。元素可以膨胀以填充额外的空间, 收缩以适应更小的空间。Fower 支持大部分常用的 flexbox 属性，可以满足您大部分布局场景。 7 | 8 | 如果你不熟悉弹性盒子，建议先通过 MDN [了解 flexbox](https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout/Flexbox)。 9 | 10 | ## Flex Direction 11 | 12 | 使用 `row` 和 `column` 控制 flex 布局的方向，为了你的 UI 结构更加简洁，当你设置了 `row` 和 `column`，你不需要再设置 `display: flex` 样式属性，Fower 会自动帮你添加该属性。 13 | 14 | ```jsx live 15 | 16 | 17 | 18 | 19 | ``` 20 | -------------------------------------------------------------------------------- /packages/core/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "include": [ 3 | "src", 4 | "types" 5 | ], 6 | "compilerOptions": { 7 | "module": "esnext", 8 | "lib": [ 9 | "dom", 10 | "esnext" 11 | ], 12 | "target": "ESNext", 13 | "importHelpers": true, 14 | "declaration": true, 15 | "sourceMap": true, 16 | "rootDir": "./src", 17 | "strict": true, 18 | "noUnusedLocals": true, 19 | "noUnusedParameters": true, 20 | "noImplicitReturns": true, 21 | "noFallthroughCasesInSwitch": true, 22 | "moduleResolution": "node", 23 | "jsx": "react", 24 | "esModuleInterop": true 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /packages/fower-plugin-grid/src/index.ts: -------------------------------------------------------------------------------- 1 | import { FowerPlugin } from '@fower/core' 2 | 3 | function isMatch(key: string) { 4 | return /^gridTemplateColumns$/i.test(key) 5 | } 6 | 7 | function toStyle(key: string, value: any): any { 8 | const style: any = {} 9 | 10 | if (key.startsWith('gridTemplateColumns')) { 11 | style.gridTemplateColumns = `repeat(${value}, minmax(0px, 1fr))` 12 | } 13 | 14 | return style 15 | } 16 | 17 | export default (): FowerPlugin => { 18 | return { 19 | isMatch, 20 | handleAtom(atom) { 21 | atom.style = toStyle(atom.key, atom.value) 22 | return atom 23 | }, 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /packages/fower-plugin-text-decoration/src/index.ts: -------------------------------------------------------------------------------- 1 | import { FowerPlugin } from '@fower/core' 2 | import { kebab } from '@fower/utils' 3 | 4 | export default (): FowerPlugin => { 5 | return { 6 | isMatch(key) { 7 | const keys = ['textDecoration', 'underline', 'lineThrough', 'noUnderline'] 8 | return keys.includes(key) 9 | }, 10 | handleAtom(atom) { 11 | const { key } = atom 12 | const value: any = 13 | key === 'textDecoration' ? atom.value : key === 'noUnderline' ? 'none' : kebab(key) 14 | 15 | atom.style = { textDecoration: value } 16 | 17 | return atom 18 | }, 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /website/docs/visibility.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | id: visibility 3 | title: Visibility 4 | --- 5 | 6 | Atomic Props for controlling the visibility of an element. 7 | 8 | | Atomic Props | CSS Properties | 9 | | ------------ | -------------------- | 10 | | visible | visibility: visible; | 11 | | invisible | visibility: hidden; | 12 | 13 | ## Usage 14 | 15 | ```jsx live 16 | 17 | 18 | A 19 | 20 | 21 | B 22 | 23 | 24 | C 25 | 26 | 27 | ``` 28 | -------------------------------------------------------------------------------- /packages/color-helper/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@fower/color-helper", 3 | "version": "2.1.0", 4 | "license": "MIT", 5 | "main": "dist/index.js", 6 | "typings": "dist/index.d.ts", 7 | "files": [ 8 | "dist" 9 | ], 10 | "engines": { 11 | "node": ">=10" 12 | }, 13 | "scripts": { 14 | "start": "tsdx watch --verbose", 15 | "build": "tsdx build", 16 | "test": "tsdx test --passWithNoTests", 17 | "test:watch": "tsdx test --watch", 18 | "test:cov": "tsdx test --coverage --passWithNoTests", 19 | "lint": "tsdx lint" 20 | }, 21 | "author": "forsigner", 22 | "module": "dist/color-helper.esm.js" 23 | } 24 | -------------------------------------------------------------------------------- /packages/colors/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@fower/colors", 3 | "version": "2.1.0", 4 | "license": "MIT", 5 | "main": "dist/index.js", 6 | "typings": "dist/index.d.ts", 7 | "files": [ 8 | "dist", 9 | "types" 10 | ], 11 | "engines": { 12 | "node": ">=10" 13 | }, 14 | "scripts": { 15 | "start": "tsdx watch --verbose", 16 | "build": "tsdx build", 17 | "test": "tsdx test --passWithNoTests", 18 | "test:watch": "tsdx test --watch", 19 | "test:cov": "tsdx test --coverage --passWithNoTests", 20 | "lint": "tsdx lint" 21 | }, 22 | "author": "forsigner", 23 | "module": "dist/colors.esm.js" 24 | } 25 | -------------------------------------------------------------------------------- /website/docs/box-sizing.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | id: box-sizing 3 | title: Box Sizing 4 | --- 5 | 6 | Atomic props for controlling how an element is positioned. 7 | 8 | | Atomic Props | CSS Properties | 9 | | ------------ | ------------------------ | 10 | | boxBorder | box-sizing: border-box; | 11 | | boxContent | box-sizing: content-box; | 12 | 13 | ## Usage 14 | 15 | ```jsx live 16 | 17 | 18 | border box 19 | 20 | 21 | content box 22 | 23 | 24 | ``` 25 | -------------------------------------------------------------------------------- /website/docs/css.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | id: css 3 | title: css 4 | --- 5 | 6 | Fower 原子属性覆盖了常见的样式需求，但对于稍复杂的样式，我们同时提供了 ** css ** 属性来满足您的需求。 7 | 8 | ```jsx live 9 | 21 | 22 | Fower 23 | 24 | 25 | ``` 26 | 27 | 上面的代码将被编译为 28 | 29 | ```css 30 | .fower-1910396923 a:hover { 31 | color: #ff00ff; 32 | } 33 | 34 | .fower-1910396923 a:visited { 35 | color: #00ff00; 36 | } 37 | ``` 38 | -------------------------------------------------------------------------------- /packages/fower-plugin-cursor/src/index.ts: -------------------------------------------------------------------------------- 1 | import { FowerPlugin } from '@fower/core' 2 | import { kebab } from '@fower/utils' 3 | 4 | export function isMatch(key: string) { 5 | return /^cursor[a-z]*?$/i.test(key) 6 | } 7 | 8 | export function toStyle(key: string, value: any): any { 9 | if (key === 'cursor') return { cursor: value } 10 | const styleValue = key.replace('cursor', '') 11 | return { cursor: kebab(styleValue) } 12 | } 13 | 14 | export default (): FowerPlugin => { 15 | return { 16 | isMatch, 17 | handleAtom(atom) { 18 | atom.style = toStyle(atom.key, atom.value) 19 | return atom 20 | }, 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /examples/example-nextjs/pages/Responsive.tsx: -------------------------------------------------------------------------------- 1 | import { Box } from '@fower/react'; 2 | import { setTheme } from '@fower/core'; 3 | 4 | export default () => { 5 | return ( 6 | 7 | 8 | Lorem ipsum dolor sit amet 9 | 10 | 11 | Lorem ipsum dolor sit amet 12 | 13 | Lorem ipsum dolor sit amet 14 | 15 | Lorem ipsum dolor sit amet 16 | 17 | 18 | ); 19 | }; 20 | -------------------------------------------------------------------------------- /packages/fower-plugin-box-sizing/src/index.ts: -------------------------------------------------------------------------------- 1 | import { FowerPlugin } from '@fower/core' 2 | import { kebab } from '@fower/utils' 3 | 4 | function isMatch(key: string) { 5 | return /^box(Sizing|Content|Border)$/i.test(key) 6 | } 7 | 8 | export default (): FowerPlugin => { 9 | return { 10 | isMatch, 11 | handleAtom(atom) { 12 | let v: string = '' 13 | const { key, value } = atom 14 | if (key === 'boxSizing') v = value 15 | if (key === 'boxBorder') v = 'border-box' 16 | if (key === 'boxContent') v = 'content-box' 17 | atom.style = { boxSizing: kebab(v) as any } 18 | return atom 19 | }, 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /packages/fower-plugin-font-family/src/index.ts: -------------------------------------------------------------------------------- 1 | import { FowerPlugin } from '@fower/core' 2 | import { downFirst } from '@fower/utils' 3 | 4 | export function isMatch(key: string) { 5 | return /^font(Sans|Serif|Mono)?$/i.test(key) 6 | } 7 | 8 | export default (): FowerPlugin => { 9 | return { 10 | isMatch, 11 | handleAtom(atom, parser) { 12 | const { key } = atom 13 | const fontFamilies: any = parser.config.theme.fontFamilies 14 | const postfix = key.replace(/^font/i, '') 15 | const styleValue = fontFamilies[downFirst(postfix)] 16 | atom.style = { fontFamily: styleValue } 17 | return atom 18 | }, 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /website/docs/to-bottom.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | id: to-bottom 3 | title: To Bottom 4 | --- 5 | 6 | import { Layout6 } from '@site/src/components/Layout' 7 | 8 | Atomic Props to make children elements align to bottom. 9 | 10 | | Atomic Props | Effect | 11 | | ------------ | -------------------------------------- | 12 | | toBottom | Make children elements align to bottom | 13 | 14 | ## Usage 15 | 16 | Use `toBottom` to make children elements align to bottom. 17 | 18 | ```jsx live 19 | 20 | 21 | 22 | 23 | ``` 24 | -------------------------------------------------------------------------------- /packages/core/src/isUnitProp.ts: -------------------------------------------------------------------------------- 1 | // from https://github.com/modulz/stitches/blob/canary/packages/core/src/unitOnlyProps.js 2 | 3 | const reg = /(-columns|(^|[^e]-)padding|[^t]-spacing|l-align|rows|(^|(^border|[dkmnptx]|le|ne)-)width|^border|tom|[ek]-start|(o|[^e]-du)ration|us|(^|[^tv]-)left|(^|-)top|tance|rgin|e-offset|(er|g|n|t)-block|(^|[^tv]-)right|basis|[gnt]-inline|gap|(^|[^e]-)height|ness|(^|[^p]-)inset|[ek]-end|elay|tline|ve|dent|-rotate|n-rule|(c|ck|d|ne|t)-size)$/ 4 | 5 | /** 6 | * check css need unit 7 | * @param cssKey css key, eg: border-width 8 | * @returns 9 | */ 10 | export function isUnitProp(cssKey: string) { 11 | return reg.test(cssKey) 12 | } 13 | -------------------------------------------------------------------------------- /packages/core/src/createStyle.ts: -------------------------------------------------------------------------------- 1 | import { Parser } from './parser' 2 | import { FowerCSSProperties } from './typings' 3 | import { AtomicProps } from '@fower/atomic-props' 4 | import { CSSProperties } from 'react' 5 | 6 | export function createStyle( 7 | ...args: (keyof AtomicProps | ({} & string) | FowerCSSProperties)[] 8 | ): CSSProperties { 9 | const props = args.reduce((result, cur) => { 10 | if (typeof cur === 'string') return { ...result, [cur]: true } 11 | 12 | // not string, is object 13 | return { ...result, css: cur } 14 | }, {}) 15 | 16 | const parser = new Parser(props) 17 | const style = parser.toStyle() 18 | return style 19 | } 20 | -------------------------------------------------------------------------------- /examples/example-nextjs/pages/Pseudo.tsx: -------------------------------------------------------------------------------- 1 | import { Box } from '@fower/react'; 2 | 3 | export default () => { 4 | return ( 5 | 6 | 7 | Lorem ipsum dolor sit amet 8 | 9 | 10 | 11 | children 1 12 | children 2 13 | 14 | 15 | 16 | children 1 17 | children 2 18 | 19 | 20 | ); 21 | }; 22 | -------------------------------------------------------------------------------- /packages/fower-plugin-z-index/types/index.d.ts: -------------------------------------------------------------------------------- 1 | import { FowerPlugin, ResponsiveValue } from '@fower/core' 2 | 3 | declare const _default: () => FowerPlugin 4 | export default _default 5 | 6 | declare module '@fower/atomic-props' { 7 | export interface AtomicProps { 8 | /** 9 | * Set z-index 10 | * ```css 11 | * { z-index: $value; } 12 | * ``` 13 | * 14 | * @example 15 | * ```tsx 16 | * 17 | * 18 | * 19 | * ``` 20 | * @see https://developer.mozilla.org/en-US/docs/Web/CSS/z-index 21 | */ 22 | zIndex?: ResponsiveValue 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /packages/fower/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "fower", 3 | "version": "2.1.0", 4 | "license": "MIT", 5 | "main": "dist/index.js", 6 | "typings": "dist/index.d.ts", 7 | "scripts": { 8 | "start": "tsdx watch --verbose", 9 | "build": "tsdx build", 10 | "test": "tsdx test --passWithNoTests", 11 | "test:watch": "tsdx test --watch", 12 | "test:cov": "tsdx test --coverage --passWithNoTests", 13 | "lint": "tsdx lint" 14 | }, 15 | "files": [ 16 | "dist" 17 | ], 18 | "engines": { 19 | "node": ">=10" 20 | }, 21 | "author": "forsigner", 22 | "module": "dist/fower.esm.js", 23 | "dependencies": { 24 | "@fower/core": "workspace:*" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /packages/fower-plugin-transform/types/index.d.ts: -------------------------------------------------------------------------------- 1 | import { FowerPlugin, ResponsiveValue } from '@fower/core' 2 | 3 | declare const _default: () => FowerPlugin 4 | export default _default 5 | 6 | declare module '@fower/atomic-props' { 7 | export interface AtomicProps { 8 | scale?: ResponsiveValue 9 | 10 | rotate?: ResponsiveValue 11 | 12 | translateX?: ResponsiveValue 13 | 14 | translateY?: ResponsiveValue 15 | 16 | // translateZ?: boolean | number | string 17 | 18 | skewX?: ResponsiveValue 19 | 20 | skewY?: ResponsiveValue 21 | 22 | origin?: ResponsiveValue 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /packages/fower-plugin-user-select/src/index.test.ts: -------------------------------------------------------------------------------- 1 | import { Parser, Atom } from '@fower/core' 2 | import plugin from '.' 3 | 4 | const { isMatch, handleAtom } = plugin() 5 | const parser = new Parser({}) 6 | 7 | test('isMatch', () => { 8 | expect(isMatch!('selectNone')).toEqual(true) 9 | expect(isMatch!('selectAll')).toEqual(true) 10 | expect(isMatch!('selectText')).toEqual(true) 11 | expect(isMatch!('selectAuto')).toEqual(true) 12 | }) 13 | 14 | test('selectNone', () => { 15 | const atom = handleAtom!( 16 | new Atom({ 17 | propKey: 'selectNone', 18 | propValue: true, 19 | }), 20 | parser, 21 | ) 22 | expect(atom.style.userSelect).toEqual('none') 23 | }) 24 | -------------------------------------------------------------------------------- /website/docs/font-style.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | id: font-style 3 | title: Font Style 4 | --- 5 | 6 | Atomic props for control the font style of an element. 7 | 8 | | Atomic Props | CSS Properties | 9 | | ------------ | ------------------- | 10 | | italic | font-style: italic; | 11 | | notItalic | font-style: normal; | 12 | 13 | ## Italic 14 | 15 | Use the italic props to make text italic. 16 | 17 | ```jsx live 18 | 19 | Lorem ipsum dolor sit amet 20 | 21 | ``` 22 | 23 | ## Normal(notItalic) 24 | 25 | Use the notItalic props to make font style normal. 26 | 27 | ```jsx live 28 | 29 | Lorem ipsum dolor sit amet 30 | 31 | ``` 32 | -------------------------------------------------------------------------------- /website/docs/height.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | id: height 3 | title: Height 4 | --- 5 | 6 | Use `h-{value}` props to controll element height. 7 | 8 | | Atomic Props | CSS Properties | 9 | | --------------------- | ---------------- | 10 | | h-{value} / h={value} | height: {value}; | 11 | 12 | ## Usage 13 | 14 | ```jsx live 15 | 16 | 17 | h-50 18 | 19 | 20 | h-5rem 21 | 22 | 23 | h={'{50}'} 24 | 25 | 26 | h="100px" 27 | 28 | 29 | h="80%" 30 | 31 | 32 | ``` 33 | -------------------------------------------------------------------------------- /website/docs/text-decoration.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | id: text-decoration 3 | title: Text Decoration 4 | --- 5 | 6 | | Atomic Props | CSS Properties | 7 | | ------------ | ------------------------------ | 8 | | underline | text-decoration: underline; | 9 | | lineThrough | text-decoration: line-through; | 10 | | noUnderline | text-decoration: none; | 11 | 12 | ## Usage 13 | 14 | Use `underline`, `lineThrough`, `noUnderline` to control the Text Decoration. 15 | 16 | ```jsx live 17 | 18 | Lorem ipsum dolor sit amet 19 | Lorem ipsum dolor sit amet 20 | Lorem ipsum dolor sit amet 21 | 22 | ``` 23 | -------------------------------------------------------------------------------- /website/src/components/UtilityFirstRaw/index.css: -------------------------------------------------------------------------------- 1 | .profile-container { 2 | background-color: #edf2f7; 3 | height: 200px; 4 | display: flex; 5 | align-items: center; 6 | justify-content: center; 7 | } 8 | 9 | .profile-card { 10 | display: flex; 11 | align-items: center; 12 | padding: 20px; 13 | width: 300px; 14 | background-color: white; 15 | border-radius: 10px; 16 | } 17 | 18 | .profile-avatar { 19 | width: 60px; 20 | height: 60px; 21 | border-radius: 8px; 22 | } 23 | 24 | .profile-content { 25 | margin-left: 10px; 26 | } 27 | 28 | .profile-username { 29 | font-size: 22px; 30 | font-weight: bold; 31 | } 32 | 33 | .profile-introduction { 34 | color: #2d3748; 35 | } 36 | -------------------------------------------------------------------------------- /packages/fower-plugin-list/src/index.ts: -------------------------------------------------------------------------------- 1 | import { FowerPlugin } from '@fower/core' 2 | import { kebab } from '@fower/utils' 3 | 4 | export default (): FowerPlugin => { 5 | return { 6 | isMatch(key) { 7 | return /^list(Inside|Outside|disc|circle|square|decimal|none|TradChineseInformal|LowerRoman|LowerAlpha|UpperAlpha|UpperRoman)$/i.test( 8 | key, 9 | ) 10 | }, 11 | handleAtom(atom) { 12 | const { key } = atom 13 | 14 | const value = key.replace(/^list/, '') 15 | const styleKey = /^(in|out)side$/i.test(value) ? 'Position' : 'Type' 16 | atom.style = { [`listStyle${styleKey}`]: kebab(value).toLowerCase() } 17 | return atom 18 | }, 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /packages/react/src/useMode.tsx: -------------------------------------------------------------------------------- 1 | import { fowerStore } from '@fower/core' 2 | import { useState, useEffect } from 'react' 3 | interface Result { 4 | mode: string 5 | setMode: (mode: string) => void 6 | } 7 | 8 | export function useMode(): Result { 9 | const [state, setState] = useState(fowerStore.getMode()) 10 | 11 | useEffect(() => { 12 | const cacheMode = localStorage.getItem('fower-mode') 13 | if (cacheMode && cacheMode !== fowerStore.config.mode.currentMode) { 14 | setMode(cacheMode) 15 | } 16 | }, []) 17 | function setMode(mode: string) { 18 | setState(mode) 19 | fowerStore.setMode(mode) 20 | } 21 | 22 | return { mode: state, setMode } as Result 23 | } 24 | -------------------------------------------------------------------------------- /website/docs/compose-atom.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | id: compose-atom 3 | title: composeAtom 4 | sidebar: composeAtom 5 | --- 6 | 7 | Similar to `addAtom`, You can create your own Atomic Props with `composeAtom`, the difference is that `composeAtom` will not create a new Atomic Props, it just composes existed Atomic Porps. 8 | 9 | ## Usage 10 | 11 | ```js 12 | import { composeAtom } from '@fower/core' 13 | 14 | composeAtom('formInput', { 15 | 'border-2': true, 16 | borderGray200: true, 17 | 'borderOrange400--focus': true, 18 | rounded: true, 19 | outlineNone: true, 20 | px4: true, 21 | py2: true, 22 | }) 23 | ``` 24 | 25 | now you can use it: 26 | 27 | ```jsx live 28 | 29 | ``` 30 | -------------------------------------------------------------------------------- /packages/color-helper/src/index.test.ts: -------------------------------------------------------------------------------- 1 | import { opacify, transparentize, formatColor } from './index' 2 | 3 | test('opacify()', () => { 4 | expect(opacify('rgba(0,0,0,0.2)', 20)).toEqual('rgba(0,0,0,0.4)') 5 | }) 6 | 7 | test('transparentize()', () => { 8 | expect(transparentize('#000', 20)).toEqual('rgba(0,0,0,0.8)') 9 | }) 10 | 11 | test('formatColor()', () => { 12 | expect(formatColor('#000', 'T20')).toEqual('rgba(0,0,0,0.8)') 13 | expect(formatColor('rgba(0,0,0,0.6)', 'O20')).toEqual('rgba(0,0,0,0.8)') 14 | expect(formatColor('#666666', 'D20')).toEqual('#333333') 15 | expect(formatColor('#666666', 'L20')).toEqual('#999999') 16 | 17 | expect(formatColor('#666666', '')).toEqual('#666666') 18 | }) 19 | -------------------------------------------------------------------------------- /examples/example-nextjs/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "example-nextjs", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev", 7 | "build": "next build", 8 | "start": "next start", 9 | "lint": "next lint" 10 | }, 11 | "dependencies": { 12 | "@bone-ui/utils": "^0.37.0", 13 | "@fower/atomic-props": "workspace:*", 14 | "@fower/react": "workspace:*", 15 | "@types/node": "^20.2.5", 16 | "@types/react": "^18.0.26", 17 | "@types/react-dom": "^18.0.9", 18 | "eslint": "^8.29.0", 19 | "eslint-config-next": "^13.0.6", 20 | "next": "^13.0.6", 21 | "react": "^18.2.0", 22 | "react-dom": "^18.2.0", 23 | "typescript": "5.1.3" 24 | } 25 | } -------------------------------------------------------------------------------- /packages/react/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { setConfig, styleSheet, fowerStore } from '@fower/core' 3 | import presetWeb from '@fower/preset-web' 4 | 5 | setConfig(presetWeb) 6 | 7 | const getAtomIds = fowerStore.getAtomIds 8 | 9 | export { AtomicProps } from '@fower/atomic-props' 10 | export * from '@fower/core' 11 | export * from '@fower/styled' 12 | export * from './jsx' 13 | export * from './Box' 14 | export * from './useMode' 15 | 16 | export { getAtomIds } 17 | 18 | export function getCssString() { 19 | return styleSheet.getStyle() 20 | } 21 | 22 | export function ServerStyle() { 23 | return