kata-ai / aksara-ui Goto Github PK

• Move shadow hooks into Box
• Apply new elevation tokens, as defined on the Figma:

Convert the demo into a somewhat functional KDS website + component kit documentation. See atlaskit's homepage for reference.

• Icon-only buttons have the same size values as standard buttons, but is square. Can be used as an additional prop in Button, or a separate component.
• Floating buttons work similar to the floating buttons at Kata.ai. Circular and has layer shadows.

We don't need react-router to be included anywhere in our component library. Consider removing them.

we need to create a script for bundling all components into one package

split button toggle seems not right

This was planned for 1.0 on #58 but let's move it up to 0.7.0.

[email protected] introduced a lot of new features that we so desperately need, including the all-new createGlobalStyle() API.

We also need to set styled-components as a peerDependency, which will reduce unnecessary duplication of styled-components in our installed packages.

@kata-kit/form is still missing input addon, for adding text/icon to form elements:

This package houses every single one of our shared components. All new Wicara components will now be created + published inside this package, and we'll slowly migrate all existing components to this new package.

I think we can add a collapsible container for component props on the docs site so the others can read the docs without getting distracted by other component props doc

Storybook 5 has just announced, and our current storybook setup is a bit crap, so let's rewrite everything from scratch with v5.

With this next iteration, we can let Storybook solely be an environment to develop, instead of doubling up as a documentation.

IMO we can use rollup instead of webpack, since it's simpler than webpack

error missing loader.svg while importing components

let's move SplitButton back to its family (Button group) 🎉

All components inside the components/ folder in Tafel should be brought up to date, and moved to the new package structure, along with its unit tests.

The list below is incomplete, so please edit this comment w/ additional components.

• Banner
• Board
• EmptyMessage
• Button
• Card
• Loading
• Support Button
• Floating Button
• Toggle Button
• Badge
• Drawer
• Form
  • Input (text, radio, textarea)
  • Select (use react-select v2)
  • Form Container
• Dropdown
  • Dropdown Item
  • Dropdown menu
  • Dropdown Selector
  • Dropdown Toggle
• Layout (Sidebar, Wrapper, Content)
• Modal
• Pagination
• Split Button
• Tooltip

This issue is dedicated as an umbrella issue to track all the progress in kata-kit v0.5.0. Once all milestone items are completed, we can close this.

TODO Items

• Break up components into separate packages. (#17) - @resir014
• Set up styled-components for styling. (#18) - @resir014
• Port all components to v0.5.0. (#23) - @resir014
• Remove bootstrap dependency (#20) - @resir014
• v0.5.0 docs + Kata Design System (KDS) page. (#22) - @resir014 (sama mas Tri juga)
• Additional components? - @resir014
  • @kata-kit/marker - Marker (#25)
  • @kata-kit/form - Form fields

Prepublish tasks

• Upgrade dependencies

A few things we can do to improve modal/drawer accessibility:

• Make modal/drawer closable by pressing the escape button. This is crucial for easy access for people with no access to a mouse.
• Use correct ARIA roles/attributes. References: 1, 2.
• Trap focus inside the modal/drawer. This will trap the tabindex(?) focus inside the modal when we're tabbing around. react-focus-lock seems to be the best library for this.

Pluggable notifications element that doesn't rely on Redux.

Inspirations

• https://evergreen.segment.com/components/toaster

Reference page: https://dev-kata-kit.surge.sh/components/dropdown

New button variant for dark backgrounds.

• Banner
• Button
• Support Button
• Floating Button
• Drawer
• Circle Loading
• Infinite Scroll Loading
• Dropdown
• Dropdown Item
• Dropdown menu
• Dropdown Selector
• Dropdown Toggle
• Modal
• Pagination
• Split Button
• Tooltip

Since TSLint is being deprecated, we need to port the configs for our development standard to its ESLint counterpart. Therefore, this project will be where we dogfood our new ESLint config, and the migration will be tracked in this issue.

After we finished converting to ESLint + it fits with our development standard, we'll begin putting it into its own package.

Create a new documentation site based on Next.js, following the template we had from the Aksara website.

Documentation site will include getting started guide, and complete documentation for each component (including code examples + prop tables using @wicara/doc-utils).

Reference: https://storybook.js.org/docs/formats/component-story-format/

This issue is made to track the porting of old components into @wicara/core for 0.8.

First we shall audit all the current components, and list out components which can be ported over and which ones can be discarded. Then, we will assign different team members to port over each components.

This first post will be updated regularly.

Porting Checklist

To be fully ported we will need to do this to a component:

• Remove the old theming framework (theme + reset)
• Refactor component structure to fully use styled-components + primitives
• Replace prop names that might conflict with JSX default props
• If a component uses other components, determine if we should still use said component or rewrite with component-specific implementation

Component Audit Results

This will be updated periodically as we go through each component

Delete

• button
  • SupportButton: replace with <Button size="sm" />
• dashboard: too high-level. Just create a custom dashboard for each project
• card: Use foundational components instead.
• common
  • Board: Use foundational components instead.
• dropdown: Replace with generic Popover component (a la Zeit) and a PopoverMenu component.
• layout: too high-level as well.
• react-select: Create a custom react-select wrapper inside the project.
• theme: Kill the old theming framework.
• reset: Kill the old theming framework.

Keep on separate package

• fonts: -> @wicara/fonts

Merge with other component

• split-button: to be merged with button.

Port

• avatar
• badge
• banner
• button
  • FloatingButton
  • IconButton
  • OutlineButton
• common
  • Portal
  • FocusTrap
  • EmptyMessage -> NonIdealState
  • Skeleton
• drawer -> side-sheet
• form
• modal -> dialog
• pagination
• tooltip

Since WicaraReset doesn't really just contain the reset styles anymore, the name is a bit misleading. Let's rename it to WicaraProvider and deprecate the WicaraReset name to be removed once we reach version 1.0.

Reference page: https://dev-kata-kit.surge.sh/components/loading

use Travis

Contributing guidelines should include steps to setup environments for local development.

Code of Conduct should follow the Contributor Covenant v1.4 template: https://www.contributor-covenant.org/version/1/4/code-of-conduct.md

to maintain consistency on all components, we must use ThemedComponent as the component wrapper. below is the list of components that need to be adjusted

• Button
  • ButtonGroup
  • FloatingButton
  • SupportButton
  • ToggleButton
• Card
  • Card
  • CardGrid
  • DashboardCard
• Dashboard
• Dropdown
  • Dropdown
  • DropdownItem
  • DropdownMenu
  • DropdownSelector
  • DropdownToggle
• Modal
  • Modal
  • ModalDialog
• Pagination
• Split Button

In mobile view, the sidebar should collapse to the left, and be toggleable by menu. This would be really helpful for implementing responsive design.

We're planning to switch the build system from tsc to Babel 7 with @babel/preset-typescript.

More info will be provided soon.

When i use tslint, it errors with

$ tslint -p tsconfig.json
{ Error: Cannot find module 'prettier'
    at Function.Module._resolveFilename (module.js:547:15)
    at Function.Module._load (module.js:474:25)
    at Module.require (module.js:596:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (C:\WebDev\kata-kit\node_modules\tslint-plugin-prettier\rules\prettierRule.js:6:16)
    at Module._compile (module.js:652:30)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12)
    at Function.Module._load (module.js:497:3) code: 'MODULE_NOT_FOUND' }

Adding prettier as dependency makes it work, should i create a pull request for that?

Develop Aksara icons alongside the new Aksara UI Kit.

Button's active state is inverted

When I set the active state of a toggle button e.g. active={isEnabled}, it won't toggle the button, but when I negate the variable (e.g. active={!isEnabled}) it will work.

onClick is triggered outside of button

If I click outside of the rendered button but still inside its containing div, the button will still click. Solution: Move the onClick away from the containing div and into each render prop.

Demo

All utility functions for styled-components, including theming.

Important links

• 0.8 Roadmap

Wait, I thought this is kata-kit?

Yes, you're right. kata-kit has been the working title for our component library. However, to align with our upcoming design system revamp, we are renaming our component library

What's behind the name?

wicara /wi·ca·ra/ noun
is series of voices in a language used to communicate words and sentences.

Wicara (formerly kata-kit) is the component library powering the Kata.ai platform. It's the true implementation of our design system in React, in raw code form.

Principles

These principles guide us on what to strive for when building components for Wicara. We will be adding this to our contributing guidelines and Storybook docs shortly.

Clear and transparent.

• Use component/prop names that are as clear and standard as possible.
• Strive for component + prop names no longer than 2-3 words. Keep them concise without being clever.
• When in doubt, look at other component libraries for inspiration.

Modular and reusable.

• Components should do one thing and do it well.
• Consider leveraging modern React features + patterns like render/children props or Hooks for enhanced modularity + easy reuse of components.
• Strive for a cleaner API. Don’t expose underlying internals in the API unless necessary.

Accessibility comes first.

• Components should be designed with accessibility in mind. Make sure the fancy features doesn’t break accessibility. (Morten Rand-Hendriksen)
• Strive for an accessible color contrast ratio. Aim for a contrast rating higher than “AA” and “AA Large”. (Check your color contrast here)
• Make sure components work well with screen readers, as well as for users with limited access to keyboards and mice.

The future.

Guided by the principles above, we have big plans for Wicara while we continue to align to our revamped design system. Some of the changes that we propose are as follows.

0.8 - ?????

Notifications

Pluggable notifications element that doesn't rely on Redux.

Inspirations:

• https://evergreen.segment.com/components/toaster

SVG Icons

Rewrite our icons package to use SVG icons instead of font icons. This allows us to easily extend our icon set without having to rebuild font packages.

Renamed project scope

Project scope will also be renamed from @kata-kit to @wicara

Theme framework rewriting

Turns out how we currently theme stuff is not flexible, and is a candidate for rewriting. Not yet decided how I'm going to approach this, but putting it here as a note.

Update: Might use styled-system as our reference implementation.

Elements rewriting

Same as above, esentially.

Inspirations:

• https://github.com/artsy/palette
• https://github.com/artsy/reaction

Monorepo restructuring

This is partly related to above. Initial idea for package organisation in monorepo:

• @wicara/core - All foundational elements and basic-level components exported by Wicara.
• @wicara/docs - (tentative) Documentation site!
• @wicara/doc-utils - Utility components/methods used by the docs site or Storybook pages.

Prop naming convention cleanups.

We’ll also be standardising our prop naming conventions + improving our props API according to our new guidelines.

1.0 - Aksara UI Kit

This already exists in its experimental form at the (feature/aksara-ui-kit) branch. It's a rewrite of all of Wicara from the ground-up, utilising some new technologies.

More info will be available soon.

Since Bootstrap's css is huge, this will really affect performance since unused Bootstrap CSS will be included in our CSS. Therefore we should look into dropping the bootstrap dependency.

The Dropdown component will be replaced with a generic Popover component (a la Zeit) which can be extended to other components. Then we'll create a DropdownMenu component which can be attached to the popover's content.

References

• https://zeit.co/design/popover
• https://evergreen.segment.com/components/popover/

using commitizen

Create an optional prop to have icons either in the left or right of the button text. Icons should be a React node, since we will use it for SVG icons.

Currently dialog only supports width: 500px We should add support for multiple dialog sizes. We'll use the updated design system for dialogs:

• sm: 400px
• md: 600px
• lg: 800px

cc @IzzanNurdin

we will use Lerna for this

@kata-kit/form is still missing an InputAddon element, for adding text/icon into the front/back of a form field like so:

As a developer, I'd like to make a text marked just by importing a single component.

Therefore, it's necessary to include a <Marker>...</Marker> component inside the @kata-kit/badge component to mark a text, using either a custom colour, or colour randomised from a seed and mapped to our special colour sets.

This would be useful, for example, in places like Kata Platform's NLU Training screen.

need to update documentation for all components

Atomic-level implementation of our styleguide, constructed using styled-system.

Components

• <Box /> - the most primitive form of a Wicara component. Accepts almost all styled-system attributes.
• <Card /> - Extends the Box component with useful props to prototype UI cards with elevation.
• <Text /> - Primitive text elements. Use this to render text according to the type scales based on our design system.
• <Heading /> - Like Text, but provides higher-level type scales for headings.
• <Paragraph /> - Like Text but specified for paragraph-level texts.

Expected Behavior

• when drawer scrolled then drawer header should have shadow to indicate there are overflow element refer this link
• when drawer has overflow content, then user should able to see all of them

Current Behavior

• there are no shadow yet
• bottom element is not visible because of footer

Possible Solution

• implement onScroll handler, when user scroll drawer to certain position then add shadow, and if scroll back to zero then remove shadow
• add more padding-bottom to Drawer body

Steps to Reproduce

1. Create drawer element with overflow content
2. Open drawer and scroll

The color prop currently used to define button types collides with the color HTML attribute. Consider renaming it to something like variant. Any naming ideas are also welcome.