mittwald / flow Goto Github PK

View Code? Open in Web Editor NEW

2.0 3.0 0.0 21.06 MB

A collection of packages related to Flow – the mittwald design system.

Home Page: https://mittwald.github.io/flow/

License: MIT License

TypeScript 79.60% CSS 0.86% JavaScript 0.57% MDX 9.39% SCSS 9.58%

flow's Issues

Button with Icon

Variant A ✅

We decided to use this variant because:

it is more expressive
same DX if it is documented
it is not required to import the Icon/Text component inside the Button component and therefore module dependencies are reduced

<Button>
  <Icon faIcon={faBomb} />
  <Text>Delete</Text>
</Button>

<Button>
  <Icon>{wordPressLogo}</Icon>
  <Text>Open Wordpress</Text>
</Button>

Variant B ❌

<Button faIcon={faBomb}>
  Delete
</Button>

<Button iconSvgContent={wordPressLogo}>
  Open Wordpress
</Button>

Form component

Dropzone (Upload) component

IllustratedMessage component

#195

Extract default export of code examples

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)

Check if Lerna is really needed

yarn lint pre-commit hook?

HeaderNavigation component

#289

Slider component

Live code editor

Add live code editor for MDX docs pages, that can be used to render code examples with live editing support.

Receive props via context

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.

Test TS compilation

State-Icon in Button nicht accessible

Tabler Icons werden in Safari beim Zoomen zu fett dargestellt

OffCanvas component

Fail in CI if peer dependencies are incorrectly met

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

    ✖  @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)

Remove Next.JS demo content
Add very basic CI conform styling
Add navigation for components
Keep A11y in mind

Tabs component

Warnings when running Storybook

The following warnings are shown:

WARN You (or an addon) are using the 'config' preset field. This has been replaced by 'previewAnnotations' and will be removed in 8.0
WARN Expected '@storybook/addon-actions' (or '@storybook/addon-essentials') to be listed before '@storybook/addon-interactions' in main Storybook config.
The CJS build of Vite's Node API is deprecated. See https://vitejs.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated for more details.
Pre-transform error: Failed to load url /sb-preview/runtime.js (resolved id: /sb-preview/runtime.js). Does the file exist?

Brauchen alle inputs ein Label? (z.B. Radiogroup in App installieren Modal)
Label als Property oder Element?

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>

show test coverage as badge

From https://github.com/marketplace/actions/jest-coverage-report

Reporting code coverage on each pull request. 📃
Rejecting pull request, if coverage is under threshold. ❌
Comparing coverage with base branch. 🔍
Showing spoiler in the comment for all new covered files. 🆕
Showing spoiler in the comment for all files, in which coverage was reduced. 🔻
Failed tests & uncovered line annotations 📢

Stable: The latest tagged version
Latest: The head of the main branch
n Devs: The head of all dev-branches

mittwald / flow Goto Github PK

flow's Issues

Variant A ✅

Variant B ❌

Recommend Projects

Recommend Topics

Recommend Org

Jobs