Code Monkey home page Code Monkey logo

design-system's People

Contributors

adenvt avatar afrijaldz avatar avriq avatar bypanji avatar devara avatar fossabot avatar imgbotapp avatar ngodingbentar avatar radyakaze avatar renovate-bot avatar renovate[bot] avatar wikanonymous-dev avatar

Stargazers

avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar

Watchers

avatar avatar avatar avatar avatar avatar

Forkers

fossabot sampahcoding wikanonymous-dev tomas-studio rikoprim rendyandika28 afrijaldz aquinotgr00 plengex widi-aryanto rambhupalreddy369

design-system's Issues

Packages: rename main package name "Persona"

Finally we decide the name of this project with name: Persona.

Todo:

  • Create landing page for with name Persona
  • Add prefix to all component with prefix p- in all documentation (component.md)
  • Update readme
  • Create package @privyid/persona

Non-Component: Tour Guide

LINK FIGMA STYLEGUIDE

https://www.figma.com/file/tVQNwXeQkMtZlX1x3qjJu8/B-A-S-E-%2F-Style-Guide?node-id=262%3A2174

Spec

Define Tour Guide

const tour = createTour({
  waitTimeout  : 3000,          // waiting timeout
  backdrop     : true,          // enable focus backdrop
  prevLabel    : 'Previous',    // prev button label
  nextLabel    : 'Next',        // next button label
  dismissLabel : 'Dismiss',     // dismiss button label
  finishLabel  : 'Finish',      // finish button label
  skipIfTimeout: false,         // Skip tour if target not found (timeout)
  skipIfHidden : false,         // Skip tour if target not visible 
  onBeforePrev (to, from) {
    // Run hook on prev button clicked (global)
  },
  onBeforeNext (to, from) {
    // Run hook on next button clicked (global)
  },
  onFinished () {
    // Run when tour finished
  },
})

Add Step

const tour = createTour({/*...*/})

tour.add({
  name       : 'step-1', // Unique name as identifier
  target     : '#step-1',
  title      : 'Tour Title',
  text       : 'Tour body text',
  image      : 'http://nganu.com/123.jpg',
  aligment   : 'top',
  waitTimeout: 3000,                         // waiting timeout, override global setting
  backdrop   : true,                         // enable focus backdrop, , override global setting
  type       : 'wait-action',                // 'basic' | 'wait-action', default: 'basic'
  dismissBtn : true,                         // enable dismiss button, default: 'true'
  onBeforePrev (to, from) {
    // Run hook on prev button clicked (run before global hook)
  },
  onBeforeNext (to, from) {
    // Run hook on next button clicked (run before global hook)
  },
})

Remove Tour

tour.remove('step-1' /* name */)

Control Tour

tour.start()   // Showing tour 
tour.start(5)  // Showing tour at specific step
tour.stop()    // Hide tour

tour.toStep(step) // Go to step, it also run the hook
tour.prev() // Programmatically tour prev, it also run the hook
tour.next() // Programmatically tour next, it also run the hook
tour.finish() // Programmatically finish, similar to close but it's run onFinished hook

Action Type

1. basic

Basic tour's step

2. wait-action

Waiting user to click the target

3. to-page

Redirect to specific target route

Nested Tour

Able to add tour instance as step

const tourA = createTour({/*...*/})
const tourB = createTour({/*...*/})

tourA
  .add({/* step-1 */})
  .add(tourB)
  .add({/* step-2 */})

// It will start tourB after step-1, and show step-2 after tourB finished

Non-Component: Dialog (Instant Modal)

Description

Alternate native function window.alert, window.confirm, window.prompt using Modal

Spec

Basic Usage

Alert

import dialog from "./use-dialog"

dialog.alert({
  title: 'Alert Title'
  message: 'Alert Message'
})

Confirm

import dialog from "./use-dialog"

dialog.alert({
  title: 'Alert Title'
  message: 'Alert Message'
}).then((result) => {
  console.log(result) // true / false
})

Prompt

import dialog from "./use-dialog"

dialog.alert({
  title: 'Alert Title'
  message: 'Alert Message'
}).then((result) => {
  console.log(result) // text user's have input
})

Base: Chart

LINK FIGMA STYLEGUIDE

https://www.figma.com/file/tVQNwXeQkMtZlX1x3qjJu8/B-A-S-E-%2F-Style-Guide?node-id=262%3A2145

Specification:
  • Component chould be wrapper of existing chart library, like ChartJS
  • Chart line:
<template>
  <p-chart variant="line">
    <p-chart-set name="January">
      <p-chart-val value="5" name="success" color="#000000" />
      <p-chart-val value="6" name="failed" color="#000000" />
    </p-chart-set>
  </p-chart>
</template>
  • Chart bar
<template>
  <p-chart variant="bar">
    <p-chart-set name="January">
      <p-chart-val value="5" name="success" color="#000000" />
      <p-chart-val value="6" name="failed" color="#000000" />
    </p-chart-set>
  </p-chart>
</template>
  • Chart Pie
<template>
  <p-chart variant="pie">
    <p-chart-set name="Dataset 1">
      <p-chart-val value="5" name="success" color="#000000" />
	  <p-chart-val value="6" name="failed" color="#000000" />
    </p-chart-set>
  </p-chart>
</template>
  • prop name is required
  • prop color is optional, if not provided, it taken from hashing name.

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Edited/Blocked

These updates have been manually edited so Renovate will no longer make changes. To discard all commits and start over, click on a checkbox.

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

Detected dependencies

docker-compose
docker-compose.yml
dockerfile
Dockerfile
  • node 20-alpine
  • halverneus/static-file-server v1.8.10
github-actions
.github/workflows/ci.yml
  • actions/checkout v4
  • actions/cache v4
  • actions/setup-node v4
  • codecov/codecov-action v4
  • actions/checkout v4
  • actions/cache v4
  • actions/setup-node v4
  • actions/checkout v4
  • actions/cache v4
  • actions/setup-node v4
  • actions/checkout v4
  • github/codeql-action v3
  • github/codeql-action v3
  • github/codeql-action v3
  • actions/checkout v4
  • actions/cache v4
  • actions/setup-node v4
  • peaceiris/actions-gh-pages v4
.github/workflows/sync.yml
  • actions/checkout v4
  • actions/cache v4
  • actions/setup-node v4
  • peter-evans/create-pull-request v6
npm
package.json
  • @floating-ui/dom ^1.0.4
  • @fontsource/dm-sans 5.0.21
  • @jill64/universal-sanitizer ^1.0.2
  • @juggle/resize-observer ^3.4.0
  • @splidejs/splide ^4.1.4
  • @testing-library/user-event ^14.4.3
  • @vueuse/core 10.9.0
  • @vueuse/math 10.9.0
  • @zxing/browser 0.1.4
  • @zxing/library 0.21.0
  • chart.js 4.4.2
  • core-js 3
  • date-fns 3.6.0
  • defu 6.1.4
  • fast-equals ^5.0.0
  • fuse.js 7.0.0
  • html-escaper ^3.0.3
  • interactjs 1.10.27
  • lodash-es 4.17.21
  • marked ^12.0.0
  • nanodelay 2.0.2
  • pdfjs-dist ^3.11.174
  • postcss-hexrgba ^2.1.0
  • postcss-lighten-darken ^0.9.0
  • qr-code-styling ^1.6.0-rc.1
  • scroll-into-view ^1.16.2
  • tabbable 6.2.0
  • vue-collapsed ^1.2.5
  • vue-content-loader ^2.0.1
  • vue-demi 0.14.7
  • vue-router 4.3.2
  • webfontloader 1.6.28
  • zxcvbn ^4.4.2
  • @interactjs/types 1.10.27
  • @rushstack/eslint-patch 1.10.2
  • @testing-library/jest-dom 6.4.5
  • @testing-library/vue 8.0.3
  • @types/html-escaper 3.0.2
  • @types/lodash-es 4.17.12
  • @types/marked 6.0.0
  • @types/sanitize-html 2.11.0
  • @types/scroll-into-view 1.16.4
  • @types/webfontloader 1.6.38
  • @types/zxcvbn 4.4.4
  • @typescript-eslint/eslint-plugin 5.62.0
  • @typescript-eslint/parser 5.62.0
  • @vitejs/plugin-vue 4.5.2
  • @vitest/browser 0.25.8
  • @vitest/coverage-c8 0.24.5
  • @vue/eslint-config-typescript 13.0.0
  • autoprefixer 10.4.19
  • browserslist-to-esbuild 2.1.1
  • eslint 8.57.0
  • eslint-config-standard-with-typescript ~21.0.1
  • eslint-formatter-pretty 5.0.0
  • eslint-plugin-align-assignments 1.1.2
  • eslint-plugin-import 2.29.1
  • eslint-plugin-n 16.6.2
  • eslint-plugin-node 11.1.0
  • eslint-plugin-promise 6.1.1
  • eslint-plugin-unicorn 48.0.1
  • eslint-plugin-varspacing 1.2.2
  • eslint-plugin-vue 9.23.0
  • happy-dom 8.9.0
  • husky 9.0.11
  • jest-extended 4.0.2
  • lint-staged 15.2.2
  • nanodelay 2.0.2
  • postcss 8.4.38
  • postcss-nested 6.0.1
  • sharp 0.33.3
  • svgo 3.3.2
  • tailwindcss 3.4.3
  • typescript 5.4.5
  • ufo 1.5.3
  • vite-plugin-image-optimizer 1.1.7
  • vitepress 1.1.0
  • vitest 0.24.5
  • vue-tsc 2.0.16
  • yarn 4.2.2
packages/browserslist-config/package.json
  • yarn 4.2.2
packages/eslint-config-persona/package.json
  • @typescript-eslint/eslint-plugin 5.62.0
  • @typescript-eslint/parser 5.62.0
  • @vue/eslint-config-typescript 13.0.0
  • eslint 8.57.0
  • eslint-config-standard-with-typescript 21.0.1
  • eslint-formatter-pretty 5.0.0
  • eslint-plugin-align-assignments 1.1.2
  • eslint-plugin-import 2.29.1
  • eslint-plugin-n 16.6.2
  • eslint-plugin-node 11.1.0
  • eslint-plugin-promise 6.1.1
  • eslint-plugin-unicorn 48.0.1
  • eslint-plugin-varspacing 1.2.2
  • eslint-plugin-vue 9.23.0
  • typescript 5.4.5
  • yarn 4.2.2
packages/persona-icon/package.json
  • @nuxt/kit ^3.4.3
  • @nuxt/module-builder 0.6.0
  • @types/fs-extra 11.0.4
  • @types/minimist 1.2.5
  • dotenv 16.4.5
  • figma-api 1.11.0
  • fs-extra 11.2.0
  • jiti 1.21.0
  • minimist 1.2.8
  • ofetch 1.3.4
  • ohash 1.1.3
  • ora 8.0.1
  • p-all 5.0.0
  • svg-path-commander 2.0.9
  • svgo 3.3.2
  • webfont 11.2.26
  • yarn 4.2.2
packages/persona-ilustration/package.json
  • @nuxt/kit ^3.4.3
  • @nuxt/module-builder 0.6.0
  • @types/fs-extra 11.0.4
  • @types/minimist 1.2.5
  • dotenv 16.4.5
  • figma-api 1.11.0
  • fs-extra 11.2.0
  • jiti 1.21.0
  • minimist 1.2.8
  • ofetch 1.3.4
  • ohash 1.1.3
  • ora 8.0.1
  • p-all 5.0.0
  • sharp 0.33.3
  • svg-path-commander 2.0.9
  • svgo 3.3.2
  • webfont 11.2.26
  • yarn 4.2.2
packages/persona/package.json
  • @floating-ui/dom 1.6.5
  • @jill64/universal-sanitizer 1.2.11
  • @juggle/resize-observer 3.4.0
  • @nuxt/kit 3.11.2
  • @splidejs/splide 4.1.4
  • @testing-library/dom 10.1.0
  • @testing-library/user-event 14.5.2
  • @vueuse/core 10.9.0
  • @vueuse/math 10.9.0
  • @zxing/browser 0.1.4
  • @zxing/library 0.21.0
  • chart.js 4.4.2
  • core-js 3
  • date-fns 3.6.0
  • defu 6.1.4
  • fast-equals 5.0.1
  • fuse.js 7.0.0
  • interactjs 1.10.27
  • lodash-es 4.17.21
  • marked 12.0.2
  • nanodelay 2.0.2
  • pdfjs-dist 3.11.174
  • scroll-into-view 1.16.2
  • tabbable 6.2.0
  • vue-collapsed 1.3.3
  • vue-demi 0.14.7
  • webfontloader 1.6.28
  • zxcvbn 4.4.2
  • @nuxt/module-builder 0.6.0
  • @nuxt/schema 3.11.2
  • @nuxtjs/tailwindcss 6.12.0
  • @types/sanitize-html 2.11.0
  • browserslist-to-esbuild 2.1.1
  • nuxt 3.11.2
  • postcss-custom-properties 13.3.10
  • postcss-hexrgba 2.1.0
  • postcss-lighten-darken 0.9.0
  • tailwind 4.0.0
  • postcss-custom-properties ^12.1.11 || ^13.0.0
  • postcss-hexrgba ^2.1.0
  • postcss-lighten-darken ^0.9.0
  • tailwind >=3.0.0
  • vue-router >=4.0.0
packages/persona/playground/package.json
packages/tailwind-animation/package.json
  • tailwind >= 3.0.0
  • yarn 4.2.2
packages/tailwind-extended/package.json
  • tailwind >= 3.0.0
  • yarn 4.2.2
packages/tailwind-preset/package.json
  • tailwind >= 3.0.0
  • yarn 4.2.2
nvm
.nvmrc
  • node 20
  • Check this box to trigger a request for Renovate to run again on this repository

Base: Card

Specification:

  • Type: Component
  • Name: Card
  • Category: Base
  • I have implement:
    • Component
    • Documentation
    • Unit Test

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.