Skip to content

Commit

Permalink
feat: create fower-plugin-grid
Browse files Browse the repository at this point in the history
  • Loading branch information
0x-leen committed Jun 4, 2023
1 parent 8e47fd5 commit 811582d
Show file tree
Hide file tree
Showing 38 changed files with 1,307 additions and 63 deletions.
1 change: 1 addition & 0 deletions .eslintignore
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
**/*.js
2 changes: 0 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,6 @@ A utility-first CSS in JS library for rapid UI development.
## Quick Start

- [Use with React](https://fower.vercel.app/docs/use-with-react)
- [Use with Vue](https://fower.vercel.app/docs/use-with-vue)
- [Use with Svelte](https://fower.vercel.app/docs/use-with-svelte)
- [Use with React Native](https://fower.vercel.app/docs/use-with-rn)

## Documentation
Expand Down
2 changes: 1 addition & 1 deletion examples/example-nextjs/pages/_app.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import type { AppProps } from 'next/app'
import { setConfig } from '@fower/react'

setConfig({
prefix: 'ai-c-',
// prefix: 'ai-c-',
mode: {
autoDarkMode: {
enabled: true,
Expand Down
4 changes: 2 additions & 2 deletions examples/example-nextjs/pages/_document.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,8 @@ class MyDocument extends Document {
}
render() {
return (
<Html className="dark">
{/* <Html> */}
// <Html className="dark">
<Html>
<Head>
<style data-fower={getAtomIds()} dangerouslySetInnerHTML={{ __html: getCssString() }} />
</Head>
Expand Down
4 changes: 2 additions & 2 deletions examples/example-nextjs/pages/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,12 @@ import { Colors } from '../components/Colors'

export default function Home() {
return (
<Box bgGreen200 toCenterY toBetween>
<Box bgGreen200 toCenterX gapX={[30, 50, 60, 100, 200]}>
<Box gray800 red500 green600--hover>
AA
</Box>
<Box gray800 red500 green600--hover>
AA
BB
</Box>
</Box>
)
Expand Down
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,7 @@
"@fower/colors": "workspace:*",
"@fower/utils": "workspace:*",
"@types/react": "^18.2.8",
"csstype": "^3.1.2",
"@changesets/cli": "^2.25.2",
"@commitlint/cli": "^12.1.4",
"@commitlint/config-conventional": "^12.1.4",
Expand Down
2 changes: 1 addition & 1 deletion packages/core/src/atom.ts
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ export { Options, Meta }
* @example p-20,opacity-80
*/
export const digitReg =
/^(m[xytrbl]?-?|p[xytrbl]?|space[xy]?|top-?|right-?|bottom-?|left-?|[wh]|square|circle|min[hw]|max[hw]|opacity|delay|duration|translate[xyz]|scale[xy]?|rotate[xy]?|skew[xy]?|text|zIndex-?|leading|stroke|fontWeight|outlineOffset|order|flex(Grow|Shrink|Basis)?|(row|column)?Gap|gridTemplateColumns|border(Top|Right|Bottom|Left)?|rounded(Top(Left|Right)?|Right|Bottom(Left|Right)?|Left)?)(-?\d+[a-z]*?|-auto)$/i
/^(m[xytrbl]?-?|p[xytrbl]?|gap[xy]?|space[xy]?|top-?|right-?|bottom-?|left-?|[wh]|square|circle|min[hw]|max[hw]|opacity|delay|duration|translate[xyz]|scale[xy]?|rotate[xy]?|skew[xy]?|text|zIndex-?|leading|stroke|fontWeight|outlineOffset|order|flex(Grow|Shrink|Basis)?|(row|column)?Gap|gridTemplateColumns|border(Top|Right|Bottom|Left)?|rounded(Top(Left|Right)?|Right|Bottom(Left|Right)?|Left)?)(-?\d+[a-z]*?|-auto)$/i

export class Atom {
/**
Expand Down
123 changes: 123 additions & 0 deletions packages/fower-plugin-gap/CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,123 @@
# fower-plugin-grid

## 1.78.0

### Minor Changes

- use pnpm

### Patch Changes

- Updated dependencies
- @fower/atomic-props@1.78.0
- @fower/core@1.78.0
- @fower/utils@1.78.0

## 1.77.0

### Minor Changes

- only support react-like lib

### Patch Changes

- Updated dependencies
- @fower/atomic-props@1.77.0
- @fower/core@1.77.0
- @fower/utils@1.77.0

## 1.76.0

### Minor Changes

- improve rounded and shadow

### Patch Changes

- Updated dependencies
- @fower/atomic-props@1.76.0
- @fower/core@1.76.0
- @fower/utils@1.76.0

## 1.75.7

### Patch Changes

- fix auto dark mode
- Updated dependencies
- @fower/atomic-props@1.75.7
- @fower/core@1.75.7
- @fower/utils@1.75.7

## 1.75.6

### Patch Changes

- improve mappings in auto dark mode
- Updated dependencies
- @fower/atomic-props@1.75.6
- @fower/core@1.75.6
- @fower/utils@1.75.6

## 1.75.5

### Patch Changes

- improve auto darkmode
- Updated dependencies
- @fower/atomic-props@1.75.5
- @fower/core@1.75.5
- @fower/utils@1.75.5

## 1.75.4

### Patch Changes

- improve for auto dark mode
- Updated dependencies
- @fower/atomic-props@1.75.4
- @fower/core@1.75.4
- @fower/utils@1.75.4

## 1.75.3

### Patch Changes

- fix auto dark mode
- Updated dependencies
- @fower/atomic-props@1.75.3
- @fower/core@1.75.3
- @fower/utils@1.75.3

## 1.75.2

### Patch Changes

- improve auto dark mode
- Updated dependencies
- @fower/atomic-props@1.75.2
- @fower/core@1.75.2
- @fower/utils@1.75.2

## 1.75.1

### Patch Changes

- fix auto dark mode
- Updated dependencies
- @fower/atomic-props@1.75.1
- @fower/core@1.75.1
- @fower/utils@1.75.1

## 1.75.0

### Minor Changes

- update colors

### Patch Changes

- Updated dependencies
- @fower/atomic-props@1.75.0
- @fower/core@1.75.0
- @fower/utils@1.75.0
1 change: 1 addition & 0 deletions packages/fower-plugin-gap/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
# fower-plugin-gap
98 changes: 98 additions & 0 deletions packages/fower-plugin-gap/gen-types.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,98 @@
const { colors } = require('@fower/colors')
const { presetWeb } = require('@fower/preset-web')
const { kebab, upFirst } = require('@fower/utils')
const { SemicolonPreference } = require('typescript')
const { join } = require('path')
const { Project } = require('ts-morph')

/** init somethings */
const project = new Project()
const cwd = process.cwd()
const outPath = join(cwd, 'types', 'index.d.ts')
const sourceFile = project.createSourceFile(outPath, undefined, {
overwrite: true,
})

/** add something to sourceFile */
sourceFile.addImportDeclarations([
{
namedImports: ['FowerPlugin', 'ResponsiveValue', 'ResponsiveBoolean'],
moduleSpecifier: '@fower/core',
},
])
sourceFile.addStatements(`import * as CSS from 'csstype'`)
sourceFile.addStatements('declare const _default: () => FowerPlugin')
sourceFile.addStatements('export default _default')

const typingModule = sourceFile.addModule({
name: `'@fower/atomic-props'`,
})

const entries = Object.entries(presetWeb?.theme?.spacings || {})

const atoms = [
{ alias: 'gap', properties: [] },
{ alias: 'gapX', properties: [] },
{ alias: 'gapY', properties: [] },
]

const props = atoms.reduce((result, { alias, properties }) => {
const items = entries.reduce((r, item, index) => {
const [gapKey, value] = item
const getItem = (isBase = false) => {
let examples = isBase
? [
`<Box ${alias}-8></Box>`,
`<Box ${alias}-1rem></Box>`,
`<Box ${alias}-4px></Box>`,
`<Box ${alias}={8}></Box>`,
`<Box ${alias}={a + b}></Box>`,
]
: [`<Box ${alias + gapKey}></Box>`]
return {
name: isBase ? `${alias}?` : alias + gapKey + '?',
type: isBase ? 'ResponsiveValue<string|number>' : 'ResponsiveBoolean',
docs: [
{
description: [
`set the gap between child elements to ${isBase ? 'some value' : value}`,
].join('\n'),
tags: [
{
tagName: 'example',
text: ['\n', '```tsx', ...examples, '```'],
},
{
tagName: 'see',
text: [`https://developer.mozilla.org/en-US/docs/Web/CSS/position`],
},
],
},
],
}
}

if (index === 0) r.push(getItem(true))

r.push(getItem())
return r
}, [])
return result.concat(items)
}, [])

typingModule.addInterface({
name: 'AtomicProps',
isExported: true,
properties: props,
})

/** format types code */
sourceFile.formatText({
indentSize: 2,
semicolons: SemicolonPreference.Remove,
})

/** save to file */
sourceFile.save().then(function () {
console.log('typing file created...')
})
30 changes: 30 additions & 0 deletions packages/fower-plugin-gap/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
{
"name": "fower-plugin-gap",
"version": "1.78.0",
"license": "MIT",
"main": "dist/index.js",
"typings": "types/index.d.ts",
"files": [
"dist",
"types"
],
"engines": {
"node": ">=10"
},
"scripts": {
"start": "tsdx watch --verbose",
"build:types": "node gen-types.js",
"build": "tsdx build",
"test": "tsdx test --passWithNoTests",
"test:watch": "tsdx test --watch",
"test:cov": "tsdx test --coverage --passWithNoTests",
"lint": "tsdx lint"
},
"author": "forsigner",
"module": "dist/fower-plugin-gap.esm.js",
"dependencies": {
"@fower/atomic-props": "workspace:*",
"@fower/core": "workspace:*",
"@fower/utils": "workspace:*"
}
}
45 changes: 45 additions & 0 deletions packages/fower-plugin-gap/src/index.test.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
import { Parser, Atom } from '@fower/core'
import plugin from '.'

const { isMatch, handleAtom } = plugin()
const parser = {} as Parser

test('isMatch', () => {
expect(isMatch!('gap')).toEqual(true)
expect(isMatch!('rowGap')).toEqual(true)
expect(isMatch!('columnGap')).toEqual(true)
expect(isMatch!('gridTemplateColumns')).toEqual(true)
})

test('rowGap={8}', () => {
const atom = handleAtom!(
new Atom({
propKey: 'rowGap',
propValue: 8,
}),
parser,
)
expect(atom.style.rowGap).toEqual(8)
})

test('columnGap={8}', () => {
const atom = handleAtom!(
new Atom({
propKey: 'columnGap',
propValue: 8,
}),
parser,
)
expect(atom.style.columnGap).toEqual(8)
})

test('gridTemplateColumns={4}', () => {
const atom = handleAtom!(
new Atom({
propKey: 'gridTemplateColumns',
propValue: 4,
}),
parser,
)
expect(atom.style.gridTemplateColumns).toEqual('repeat(4, minmax(0px, 1fr))')
})

0 comments on commit 811582d

Please sign in to comment.