josemarluedke / frontile Goto Github PK

This is most probably a thing of HTML itself, but for random bypassers: The @onChange / @onInput will not get fired unless all parts of the date(time) are defined. This can be quite decieving as the date picker from datetime-local disappears when the user selects date, but the time is still not defined, thus no event gets fired.

Talking about the new Input:

import Component from '@glimmer/component';
import { Form } from '@frontile/forms';
import { Input } from '@frontile/forms';

export default class MapForm extends Component {
  log(where: string) {
    console.log(where);
  }

  <template>
    <Form @onChange={{fn this.log 'Form.onChange'}}>
      <Input
        @type='datetime-local'
        @name='startDate'
        @onInput={{fn this.log 'Input[type=datetime-local].onInput'}}
        @onChange={{fn this.log 'Input[type=datetime-local].onChange'}}
      />
      <Input
        @type='date'
        @name='date'
        @onInput={{fn this.log 'Input[type=date].onInput'}}
        @onChange={{fn this.log 'Input[type=date].onChange'}}
      />
    </Form>
  </template>

This is not an issue, this is just a love-letter to some random bypasser that could stumble upon the same issue.

• Current code: focus-visable: https://github.com/search?q=repo%3Ajosemarluedke%2Ffrontile%20focus-visable&type=code
• Should be: focus-visible: https://tailwindcss.com/docs/hover-focus-and-other-states#focus-visible

Does this addon provide types we can import for using with @glint/environment-ember-loose ?

My original goal was to simply tell <Button @intent='primary' /> that it's supposed to be different color (background and text) than the default. I know that I can tell it to @appearance="custom" and add custom classes, but that seems like an overkill given that I just want different pick on the colors. I've seen PRs talking about customisation, but those don't really live in the documentation & I'm not really sure how would that translate to my case.

So I thought that section with customisation examples & list of options for each component would be the best thing to ask for the sake of other users?

To avoid long CI times because of animation, we should allow to globally disable animations, similar to what notifications pkg does.

Where it takes over the parent element instead of the full page

Would love to have a button with a second button (button group) that triggers a dropdown. Like https://getbootstrap.com/docs/4.5/components/dropdowns/#split-button

This might be a long-shot, but I was trying to use frontile together with TailwindCSS 2.x.x mostly following this manual, but it seems like styles are applied only partially. Since there are no big breaking changes in new tailwind I was wondering whether anyone successfully managed to use those two together?

Can use a polyfill https://github.com/ember-polyfills/ember-in-element-polyfill

In most packages, we have not following any pattern for the CSS class names that our Tailwind plugins generate. We could migrate to use BEM instead. In the overlays package, we implemented using BEM and seems good so far.

Having a naming convention to follow would be great, it could make things simpler if users won't want to use TailwindCSS.

Hi, I'm excited to try this project out.

I've installed the core, form and changeset form packages.

When I try to run my app after installation succeeds, I get this error.

➜  datafruits git:(wiki) ✗ FASTBOOT_DISABLED=true ./node_modules/ember-cli/bin/ember s
non serializable item found in config: /^localhost:\d+$/
[Embroider:MacrosConfig] the given config from '/home/tony/src/datafruits/node_modules/@frontile/forms/node_modules/ember-get-config' for packageName 'undefined' is not JSON serializable.


Stack Trace and Error Report: /tmp/error.dump.eac4c197d2b2ad408ff9426f383344c6.log

Here's the stack trace.

ERROR Summary:

  - broccoliBuilderErrorStack: [undefined]
  - code: [undefined]
  - codeFrame: [undefined]
  - errorMessage: [Embroider:MacrosConfig] the given config from '/home/tony/src/datafruits/node_modules/@frontile/forms/node_modules/ember-get-config' for packageName 'undefined' is not JSON serializable.
  - errorType: [undefined]
  - location:
    - column: [undefined]
    - file: [undefined]
    - line: [undefined]
  - message: [Embroider:MacrosConfig] the given config from '/home/tony/src/datafruits/node_modules/@frontile/forms/node_modules/ember-get-config' for packageName 'undefined' is not JSON serializable.
  - name: Error
  - nodeAnnotation: [undefined]
  - nodeName: [undefined]
  - originalErrorMessage: [undefined]
  - stack: Error: [Embroider:MacrosConfig] the given config from '/home/tony/src/datafruits/node_modules/@frontile/forms/node_modules/ember-get-config' for packageName 'undefined' is not JSON serializable.
    at MacrosConfig.internalSetConfig (/home/tony/src/datafruits/node_modules/@frontile/forms/node_modules/ember-get-config/node_modules/@embroider/macros/src/macros-config.js:163:19)
    at MacrosConfig.setOwnConfig (/home/tony/src/datafruits/node_modules/@frontile/forms/node_modules/ember-get-config/node_modules/@embroider/macros/src/macros-config.js:142:21)
    at Class.included (/home/tony/src/datafruits/node_modules/@frontile/forms/node_modules/ember-get-config/node_modules/@embroider/macros/src/ember-addon-main.js:26:26)
    at Class.superWrapper [as included] (/home/tony/src/datafruits/node_modules/core-object/lib/assign-properties.js:34:20)
    at /home/tony/src/datafruits/node_modules/ember-cli/lib/models/addon.js:497:26
    at Array.reduce (<anonymous>)
    at Class.eachAddonInvoke (/home/tony/src/datafruits/node_modules/ember-cli/lib/models/addon.js:494:24)
    at Class.included (/home/tony/src/datafruits/node_modules/ember-cli/lib/models/addon.js:769:10)
    at Class.superWrapper [as included] (/home/tony/src/datafruits/node_modules/core-object/lib/assign-properties.js:34:20)
    at Class.included (/home/tony/src/datafruits/node_modules/@frontile/forms/node_modules/ember-get-config/index.js:29:26)

I'm on ember-cli 3.28.5.

<Button @busy={{true}}> would show a loading spinner. Also a good time to add a spinner component too.

Atm a spinner is a pain to add to tailwind, so this would be sweet.

Currently I have to disable it for ember-power-datepicker because it prevents events from firing. Would prefer to just configure it.

Looks like an undefined in the css.

Code looks like so:

<m.Footer class='flex justify-between'>
  <Button
    @appearance='minimal'
    class='mr-4'
    {{on 'click' this.toggleNewPostModal}}
  >
    Cancel
  </Button>

  <Button
    @type='submit'
    @intent='primary'
    disabled={{this.createPost.isRunning}}
  >
    {{if this.createPost.isRunning 'Creating..' 'Create & Write'}}
  </Button>
</m.Footer>

We just updated to v.17 alpha. It looks like there is a hard dependency on ember-element-helper because of the divider component. I was going to PR adding the dependency, but made me think, since there is only one component using this add-on would the direction be to add the package or modify divider component to use a different approach.

I know there is a note about "rewriting the docs", but maybe few hints that are not obvious from the perspective of the author: I am missing complete end-to-end example that would wire up all the common requirements together. And possibly explain what works how and why.

• There is no mention of @onSubmit={{this.save}} on the <ChangesetForm> page. I thought I would have to wire up saving myself, but somehow the library does it for me. I can't see that information surfaced anywhere.
• I think that the way to handle saving completely manually I would have to: <ChangesetForm @runExecuteInsteadOfSave={{true}} @onSubmit={{this.save}}> is that the intended way?
• I want to show flash message on successful save - how to wire that up?
• Examples use native HTML <button> instead the provided one. I can see that the parts are independent and you might want to keep them that way, which is fine. Personally I'm a fan of great copy&paste examples, that will just work.

Feel free to just close this comment if it does not serve additional value.

p.s: Love the addon. Thanks for doing this.

I'm trying to use the @onsubmit function for changeset forms.
The data arg is always undefined.

result seems to just be the changeset that was saved.
I see a data property in the changeset docs, but for me it's undefined even though the changeset saved successfully.
https://github.com/poteto/ember-changeset#data

Maybe simply returning the changeset will be the most flexible for users of this API?

I'm looking for a way to customize Frontile 0.17.0-alpha.x component styles from a tailwind config file.

I think this is possible based on this issue (big thank you to @MichalBryxi for pointing me in this direction) and an old tailwind config file in the project I'm working on with @cloke, but I can't seem to produce the behavior I'm looking for. For example, I'd like to be able to make the border color on the FormInput (from @frontile/forms-legacy) something other than its default style.

I can see that the component imports the useStyles function from Frontile Theme to generate a Tailwind Variants object and then destructures classes from its slots property. I suspect that the registerCustomStyles function that the Frontile Theme package exports is what I should use in order to merge a custom styles config into the built-in component styles, but I can't tell where I need to call the function. I've tried calling it in the tailwind config file, but to no avail so far.

What's the proper usage of registerCustomStyles, and is it the right tool to change the default styling on a Frontile FormInput? I would be happy to write up some examples and/or docs for this if it would be helpful for other users.

The safelist won't really work with JIT, because:

The safelist option does not support regular expressions. Because no CSS is generated by default, the safelist has to be a list of complete class names. It’s not possible to safelist a regular expression, because there is not a pre-generated list of class names to match against that regular expression.

Or from v3.x documentation.

In FullHuman/purgecss#439 purgecss changed terminology from whitelist to safelist. Frontile documentation should reflect that.

Code:

        <Input
          @type='hidden'
          name='form-name'
          @value='newsletter'
          @label={{t 'footer.newsletter.form-name.label'}}
          @classes={{hash base='foo'}}
        />

Results in:

<div class="foo">
        
    <label for="ember77" class="text-foreground inline-block font-semibold leading-tight pb-1 a => { var i, r; return w(h$1[n], p(n, a), ((i = ee(a)) != null ? i : [])[n], ((r = te(a)) != null ? r : [])[n], a == null ? void 0 : a.class, a == null ? void 0 : a.className)(m); }" data-component="label">
      
          Form name
          
        
<!---->    </label>
  

<!---->
      
      <input id="ember77" name="form-name" class="appearance-none flex-1 w-full bg-white dark:bg-default-100 placeholder-default-400 text-base text-foreground border border-default-400 rounded leading-tight focus:ring focus:outline-none focus:border-primary-400 selection:bg-content3 disabled:border-default-200 disabled:text-default-500 aria-invalid:border-danger-400 aria-invalid:focus:ring-danger-400 p-3" data-component="input" type="hidden" value="newsletter">
    

<!---->    </div>

See ther :sus: class attributes of a => { var i, r; return w(h$1[n] on label.

When I remove the @classes argument from the <Input />, it will disappear.

Used versions

    "@frontile/buttons": "0.17.0-alpha.13",
    "@frontile/collections": "0.17.0-alpha.15",
    "@frontile/forms": "0.17.0-alpha.13",
    "@frontile/notifications": "0.17.0-alpha.14",
    "@frontile/theme": "0.17.0-alpha.13",
    "@frontile/utilities": "0.17.0-alpha.15",

Need to add the options to configure TailwindCSS in the overlays package.

When the host app doesn't directly depend on ember-basic-dropdown, the styles are not included. This results in FormSelect to not work out of the box.

Seems like form-select styles are there, but not the power select? Maybe the purge safelist needs updating, esp since the comment method doesn't seem to work any more.

There's a cool project by @tailwindlabs that creates components without styles and there is an early version by @GavinJoyce https://github.com/GavinJoyce/ember-headlessui that implements it for Ember. Since this project uses tailwind and ember, it might be a good combo to build upon the headless components where possible.

Although the Ember version is still young and the whole HeadlessUI project too.

If you set @isOpen={{this.someObject}} the modal shows but the backdrop does not.

The workflow release-drafter.yml is referencing action toolmantim/release-drafter using references v5.2.0. However this reference is missing the commit 70eb821099dbcd875c2cba75dad4332d3cf5544d which may contain fix to the some vulnerability.
The vulnerability fix that is missing by actions version could be related to:
(1) CVE fix
(2) upgrade of vulnerable dependency
(3) fix to secret leak and others.
Please consider to update the reference to the action.

Not sure what the issue is, my powerselect input is in an overlay and I get this:

Note how even the arrow styles are changed.

The file Tailwind node file, app/tailwind/default-options.js is getting bundled into the App's JS.

The scenario is this:

Click and hold on the modal, drag the mouse over the overlay, release, modal closes. This is unexpected, since you could be highlighting something or using s slider and accidentally veer off the modal body.

This really goes to the weirdness of how datetime-local works, but maybe internal wiring to make it work out-of the box would be a good idea.

The problem

Following code will not work:

// models/meeting.js
import Model, { attr } from '@ember-data/model';

export default class MeetingModel extends Model {
  @attr('date') startedAt;
}

...
<Form.Input
  @fieldName="startedAt"
  @type="datetime-local"
/>
...

The problem is that respective HTML element will return value as string that has format as follows: 2017-06-01T08:30. Which then does not get translated properly from/to Date() used in ember-data. Also I believe this will make problems with validation.

Proposed solution

• In case <Form.Input> receives @type='datetime-local' it should do the conversion automagically.
• Possible opt-out functionality should be provided.

Workaround

In case anyone wonders, there is pretty simple manual solution for this:

// models/meeting.js
import Model, { attr } from '@ember-data/model';
import moment from "moment";

export default class MeetingModel extends Model {
  @attr('date') startedAt;

  get startedAtString() {
    return moment(this.startedAt).format('YYYY-MM-DDTHH:mm');
  }

  set startedAtString(newDate) {
    this.startedAt = new Date(newDate);
  }
}

...
<Form.Input
  @fieldName="startedAtString"
  @type="datetime-local"
/>
...

We have been working on version 0.17 alpha builds for a few months now. The new version includes major changes in styling and some breaking changes in components, as well as many new components. Below are a few things I would like to see completed before releasing the next major version. We would probably release 0.17 stable with the legacy forms and changeset-from pkg, but they will be dropped before v1.

New features

• Input
  • loading state, natively?
  • Clear button #288
  • Start and End content #282
• Select
  •  Loading state
  •  Ability to render content for the selected item
  •  Filter/search
    •  no results message
    •  optional filter function
  •  ability to use Native Select in forms pkg
  •  Scroll shadow
  •  Multiple with chips
  •  Clear button #290
  •  Selected item should be scrolled into view
  • Focus Ring
  • Dropdown size -> auto
  • Test helpers to select, clear and others.
• Button
  • Loading state #68
  • onClick / onPress argument
• Listbox
  • Groups / Sections
  • Sub menu
  • Focus Ring
• Dropdown
  • Allow changing the dropdown content size, default to auto.
  • Pass event to onAction argument.
• Modal / Drawer / Overlay
  • Make animation is executed when rendering modal initially open

Refactors

• Portals
  • Move renderInPlace to something else
  • Try to remove the need for renderInElement (specifically in tests)
• Rolling focus
  • Button Group
  • ?
• Move class fields to new object for style-variants
• Move away from appearance and intent arguments -> variant & color, matches most UI libraries

Docs

• New Forms pkg
• Deprecate ChangesetForm PKG
• Rework
  • Drawer
  • Modal
  • Overlay
  • Notifications
• Docs issue in Popover Focus Trapping
• Document style slots
• Theming
• How to keep docs for older Frontile versions?
• Implement StoryBook
• Mention lack of onchange/oninout on date field, issue #292

Other issues

• Add config to disable overlay animations globally #219

New components

• Autocomplete ? Or use Select?
• Avatar
• Alert
• Tabs
• Pagination
• External Link ?
• Skeleton
• Input OTP
• Date picker
• Switch
• File Uploader
• Tooltip
• Spinner (loading) #281

New components are nice to have, but most of them are not required.

Currently ...attributes is on the input and there is no way to change the top level element that wraps everything.

<ChangesetForm @model={{@model}} @onSubmit={{this.create}} as |Form|>
  <Form.Input @fieldName='title' @label='Title' class='mt-2' />

  <button
    type='submit'
    class='mt-2 bg-white hover:bg-gray-300 text-gray-700 hover:text-gray-800 py-1 px-2 border border-gray-500 rounded-sm'
  >
    Submit
  </button>
</ChangesetForm>

mt-2 on the input places it in an unexpected area.

I have a code that goes something like this (only showing important fields):

<Drawer @isOpen={{true}} as |d|>
    <PowerSelect @searchEnabled={{true}} as |el|>
      {{yield el}}
    </PowerSelect>
</Drawer>

The problem then is that the input search field in power-select is not reachable. It renders. I could click it, but it won't get the focus.

My theory is that since the power-select itself is rendered through a wormhole and since drawer is trying to keep the focus, it just does not work.

I figured out that in my case when I set @disableFocusTrap={{true}} on the drawer it starts working again.

Just wanted to bring this issue to attention. Maybe there is a better way? And also to "document" it for future travellers.

Feel free to close if this is "works as intended".

Get this error

$ ember serve
Build Error (broccoli-persistent-filter:Babel > [Babel: @embroider/macros]) in @embroider/macros/runtime.js

/Users/ilya/maintained/bchess/@embroider/macros/runtime.js: @babel/template placeholder "APP": Expected string substitution


Stack Trace and Error Report: /var/folders/kw/7vmtd5m91sn1kwsvblc7z1080000gn/T/error.dump.0a1dce955e6458ce08af9c881bd0c487.log

Which seems to be caused by ember-element-helper:

Error: @babel/template placeholder "APP": Expected string substitution
        at applyReplacement (/Users/ilya/maintained/bchess/node_modules/@babel/template/lib/populate.js:74:13)
        at /Users/ilya/maintained/bchess/node_modules/@babel/template/lib/populate.js:44:7
        at Array.forEach (<anonymous>)
        at populatePlaceholders (/Users/ilya/maintained/bchess/node_modules/@babel/template/lib/populate.js:42:43)
        at /Users/ilya/maintained/bchess/node_modules/@babel/template/lib/string.js:20:51
        at /Users/ilya/maintained/bchess/node_modules/@babel/template/lib/builder.js:75:14
        at Object.buildLiterals (/Users/ilya/maintained/bchess/node_modules/ember-element-helper/node_modules/@embroider/macros/src/babel/evaluate-json.js:377:73)
        at Object.inlineRuntimeConfig (/Users/ilya/maintained/bchess/node_modules/ember-element-helper/node_modules/@embroider/macros/src/babel/get-config.js:107:55)
        at PluginPass.enter (/Users/ilya/maintained/bchess/node_modules/ember-element-helper/node_modules/@embroider/macros/src/babel/macros-babel-plugin.js:77:38)
        at newFn (/Users/ilya/maintained/bchess/node_modules/@babel/traverse/lib/visitors.js:177:21)
        =============
        at Object.buildLiterals (/Users/ilya/maintained/bchess/node_modules/ember-element-helper/node_modules/@embroider/macros/src/babel/evaluate-json.js:377:34)
        at Object.inlineRuntimeConfig (/Users/ilya/maintained/bchess/node_modules/ember-element-helper/node_modules/@embroider/macros/src/babel/get-config.js:107:55)
        at PluginPass.enter (/Users/ilya/maintained/bchess/node_modules/ember-element-helper/node_modules/@embroider/macros/src/babel/macros-babel-plugin.js:77:38)
        at newFn (/Users/ilya/maintained/bchess/node_modules/@babel/traverse/lib/visitors.js:177:21)
        at NodePath._call (/Users/ilya/maintained/bchess/node_modules/@babel/traverse/lib/path/context.js:53:20)
        at NodePath.call (/Users/ilya/maintained/bchess/node_modules/@babel/traverse/lib/path/context.js:40:17)
        at NodePath.visit (/Users/ilya/maintained/bchess/node_modules/@babel/traverse/lib/path/context.js:100:31)
        at TraversalContext.visitQueue (/Users/ilya/maintained/bchess/node_modules/@babel/traverse/lib/context.js:103:16) {
      code: 'BABEL_TRANSFORM_ERROR',
      file: '@embroider/macros/runtime.js',
      treeDir: '/var/folders/kw/7vmtd5m91sn1kwsvblc7z1080000gn/T/broccoli-19503Ykau1Heg5XG3/out-163-funnel_funnel_embroider_macros_addon'

Should be fixable once tildeio/ember-element-helper#73 lands
Note that Overlays depend on Forms, that's why both are affected.

When I throttle network and start smashing submit button on <ChangesetForm> I can see in the Network panel that my ember-data model fired multiple requests. The same then happens when those finish with @onSubmit being called multiple times. I can't think of many cases when this is a wanted behaviour. Might be a good idea to debounce by default? Possibly via ember-concurrency?

<ChangesetForm
  @changeset={{changeset this.model}}
  @onSubmit={{this.saved}}
  as |Form changeset|
>
  <Form.Input
    @fieldName='foo'
  />
  <Button @type='submit' @intent='primary' disabled={{changeset.isInvalid}}>
    {{t 'Submit'}}
  </Button>
</ChangesetForm>

Would love the ability to theme via tailwind plugins. If this is possible, maybe some docs about it? Or just darkmode support.