mittwald / flow Goto Github PK
View Code? Open in Web Editor NEWA collection of packages related to Flow – the mittwald design system.
Home Page: https://mittwald.github.io/flow/
License: MIT License
A collection of packages related to Flow – the mittwald design system.
Home Page: https://mittwald.github.io/flow/
License: MIT License
We decided to use this variant because:
<Button>
<Icon faIcon={faBomb} />
<Text>Delete</Text>
</Button>
<Button>
<Icon>{wordPressLogo}</Icon>
<Text>Open Wordpress</Text>
</Button>
<Button faIcon={faBomb}>
Delete
</Button>
<Button iconSvgContent={wordPressLogo}>
Open Wordpress
</Button>
Extract the default export of the component examples to render it properly and pass it to the render()
function in the background (using transformCode in LiveProvider)
Add live code editor for MDX docs pages, that can be used to render code examples with live editing support.
When it comes to component composition, some components need to define certain properties for their child components in order to get the desired overall result.
See this example:
<Form>
{/* Fields */}
<Button type="submit">Save</Button>
</Form>
The submit button should automatically receive the isPending=true
prop, during form submission.
It should also be possible to set properties conditionally, such as setting isPending
only if the type
prop is submit
.
If peer dependencies are not met correctly, the main CI job should fail.
➤ YN0000: · Yarn 4.0.1
➤ YN0000: ┌ Resolution step
➤ YN0000: └ Completed in 0s 224ms
➤ YN0000: ┌ Post-resolution validation
➤ YN0002: │ @mittwald/flow-documentation@workspace:packages/docs doesn't provide webpack (p3b577), requested by raw-loader.
➤ YN0002: │ @mittwald/flow-documentation@workspace:packages/docs doesn't provide webpack (p5e4d1), requested by @mdx-js/loader.
➤ YN0086: │ Some peer dependencies are incorrectly met; run yarn explain peer-requirements <hash> for details, where <hash> is the six-letter p-prefixed code.
➤ YN0000: └ Completed
➤ YN0000: ┌ Fetch step
➤ YN0000: └ Completed in 0s 577ms
➤ YN0000: ┌ Link step
➤ YN0000: │ ESM support for PnP uses the experimental loader API and is therefore experimental
➤ YN0000: └ Completed
➤ YN0000: · Done with warnings in 1s 59ms
When compiling the components package, some dependencies need to be "unplugged" in the root package.json to make things work. Otherwise compilation fails with errors like this.
✖ @mittwald/flow-components:build
vite v5.0.6 building for production...
transforming...
✓ 331 modules transformed.
rendering chunks...
[vite:dts] Start generate declaration files...
computing gzip size...
dist/style.css 18.96 kB │ gzip: 3.13 kB
dist/propsContext-1HT-3SRC.js 0.08 kB │ gzip: 0.09 kB
dist/useProps-48kI4eAI.js 0.49 kB │ gzip: 0.30 kB
dist/Label.js 0.50 kB │ gzip: 0.31 kB
dist/RadioGroup.js 0.51 kB │ gzip: 0.32 kB
dist/clsx-7d8NmkQq.js 0.52 kB │ gzip: 0.27 kB
dist/PropsContextProvider-FoKyLfRg.js 0.54 kB │ gzip: 0.35 kB
dist/Text.js 0.66 kB │ gzip: 0.38 kB
dist/Content.js 0.70 kB │ gzip: 0.39 kB
dist/import-_klyNjVT.js 0.89 kB │ gzip: 0.50 kB
dist/Button.js 1.09 kB │ gzip: 0.53 kB
dist/NavigationItem.js 1.18 kB │ gzip: 0.57 kB
dist/Radio.js 2.37 kB │ gzip: 0.97 kB
dist/Navigation.js 12.78 kB │ gzip: 3.39 kB
dist/import-e2ZRPojs.js 14.85 kB │ gzip: 4.99 kB
dist/omit-UMxI0b1O.js 30.77 kB │ gzip: 8.63 kB
dist/real-module-Df62czfX.js 31.54 kB │ gzip: 8.54 kB
dist/import-1GCZgtom.js 32.27 kB │ gzip: 9.92 kB
dist/Icon.js 155.87 kB │ gzip: 39.60 kB
[vite:dts] Start rollup declaration files...
Analysis will use the bundled TypeScript version 5.0.4
Analysis will use the bundled TypeScript version 5.0.4
Analysis will use the bundled TypeScript version 5.0.4
Analysis will use the bundled TypeScript version 5.0.4
Analysis will use the bundled TypeScript version 5.0.4
Analysis will use the bundled TypeScript version 5.0.4
[vite:dts] ENOTDIR: not a directory, lstat '/node_modules/@react-stately/tree/dist/types.d.ts/package.json'
✓ built in 19.00s
error during build:
Error: ENOTDIR: not a directory, lstat '/node_modules/@react-stately/tree/dist/types.d.ts/package.json'
at makeError$1 (/Users/marcofalkenberg/dev/flow-next/.pnp.cjs:30943:24)
at ENOTDIR (/Users/marcofalkenberg/dev/flow-next/.pnp.cjs:30961:10)
at ZipFS.resolveFilename (/Users/marcofalkenberg/dev/flow-next/.pnp.cjs:35567:15)
at ZipFS.realpathSync (/Users/marcofalkenberg/dev/flow-next/.pnp.cjs:35358:28)
at /Users/marcofalkenberg/dev/flow-next/.pnp.cjs:32899:102
at /Users/marcofalkenberg/dev/flow-next/.pnp.cjs:33399:66
at ZipOpenFS.getMountSync (/Users/marcofalkenberg/dev/flow-next/.pnp.cjs:33506:14)
at ZipOpenFS.makeCallSync (/Users/marcofalkenberg/dev/flow-next/.pnp.cjs:33399:17)
at ZipOpenFS.realpathSync (/Users/marcofalkenberg/dev/flow-next/.pnp.cjs:32891:17)
at VirtualFS.realpathSync (/Users/marcofalkenberg/dev/flow-next/.pnp.cjs:33580:34)
Reference: #46 (comment)
Currently the hover state also triggers when the pointer enters the FieldDescription/FieldError.
The following warnings are shown:
See Spectrum
... and start with "how to translate" in components
Render only necessarry parts in code editor for examples and maybe even add a switch to "expand code".
The example tsx file could then look like this:
import { Button } from "@mittwald/flow-components/Button";
export default function ButtonSimple() {
return (
<>
<Button>Button</Button>
<Button variant="primary">Primary</Button>
</>
);
}
And the code in the live editor would look like this:
<Button>Button</Button>
<Button variant="primary">Primary</Button>
Should use the the ProgressCircle with isIndeterminate
enabled.
From https://github.com/marketplace/actions/jest-coverage-report
main
branchTry-out integration of Pseudo-States-Plugin in Storybook.
See Spectrum
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.