kata-ai / aksara-ui Goto Github PK
View Code? Open in Web Editor NEWAksara Design System, from Kata.ai.
Home Page: https://aksara.kata.ai/
License: Apache License 2.0
Aksara Design System, from Kata.ai.
Home Page: https://aksara.kata.ai/
License: Apache License 2.0
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
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.
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.
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.
Pluggable notifications element that doesn't rely on Redux.
Inspirations:
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.
Project scope will also be renamed from @kata-kit
to @wicara
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.
Same as above, esentially.
Inspirations:
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.We’ll also be standardising our prop naming conventions + improving our props API according to our new guidelines.
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.
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.
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
we need to create a script for bundling all components into one package
Reference page: https://dev-kata-kit.surge.sh/components/loading
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.
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.
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.
To be fully ported we will need to do this to a component:
theme
+ reset
)styled-components
+ primitivesThis will be updated periodically as we go through each component
<Button size="sm" />
Popover
component (a la Zeit) and a PopoverMenu
component.@wicara/fonts
button
.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
).
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 will use Lerna for this
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.
Expected Behavior
Current Behavior
Possible Solution
Steps to Reproduce
use Travis
using commitizen
We don't need react-router to be included anywhere in our component library. Consider removing them.
Currently dialog only supports width: 500px
We should add support for multiple dialog sizes. We'll use the updated design system for dialogs:
sm
: 400pxmd
: 600pxlg
: 800pxcc @IzzanNurdin
All utility functions for styled-components, including theming.
Reference page: https://dev-kata-kit.surge.sh/components/dropdown
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.
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.
Pluggable notifications element that doesn't rely on Redux.
New button variant for dark backgrounds.
error missing loader.svg
while importing components
Convert the demo into a somewhat functional KDS website + component kit documentation. See atlaskit's homepage for reference.
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?
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.
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.
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
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 buttonIf 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.
IMO we can use rollup instead of webpack, since it's simpler than webpack
A few things we can do to improve modal/drawer accessibility:
We're planning to switch the build system from tsc
to Babel 7 with @babel/preset-typescript
.
More info will be provided soon.
Atomic-level implementation of our styleguide, constructed using styled-system
.
<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.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.
react-select
v2)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.
@kata-kit/marker
- Marker (#25)@kata-kit/form
- Form fieldsCreate 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.
Develop Aksara icons alongside the new Aksara UI Kit.
need to update documentation for all components
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.
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
let's move SplitButton
back to its family (Button
group) 🎉
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.