Giter VIP home page Giter VIP logo

privy-open-source / design-system Goto Github PK

View Code? Open in Web Editor NEW
42.0 6.0 13.0 413.31 MB

Persona Design System, built on top Nuxt3, Typescript and Tailwind

Home Page: https://persona.privyid.dev

License: MIT License

TypeScript 8.95% JavaScript 31.54% Vue 58.05% CSS 1.44% Shell 0.01% Dockerfile 0.01% HTML 0.01%
nuxt-module nuxt3 vue-component-library vue-template vue3 scaffolding nuxt3-starter ui-components vue3-components

design-system's Introduction

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 avatar avatar

Watchers

avatar avatar avatar avatar avatar avatar

Forkers

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

design-system's Issues

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.

Base: Card

Specification:

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

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
})

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

Dependency Dashboard

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

Warning

These dependencies are deprecated:

Datasource Name Replacement PR?
npm @types/marked Unavailable
npm @vitest/coverage-c8 Unavailable
npm eslint-config-standard-with-typescript Unavailable
npm eslint-plugin-node Available

Rate-Limited

These updates are currently rate-limited. Click on a checkbox below to force their creation now.

  • chore(deps): update dependency postcss to v8.4.39
  • chore(deps): update dependency postcss-custom-properties to v13.3.12
  • chore(deps): update dependency sharp to v0.33.4
  • chore(deps): update dependency tailwindcss to v3.4.5
  • chore(deps): update dependency vite-plugin-image-optimizer to v1.1.8
  • chore(deps): update dependency vue-tsc to v2.0.26
  • chore(deps): update halverneus/static-file-server docker tag to v1.8.11
  • fix(deps): update dependency @floating-ui/dom to v1.6.7
  • fix(deps): update dependency @zxing/browser to v0.1.5
  • fix(deps): update dependency @zxing/library to v0.21.2
  • fix(deps): update dependency chart.js to v4.4.3
  • fix(deps): update dependency vue-demi to v0.14.8
  • chore(deps): update dependency typescript to v5.5.3
  • fix(deps): update dependency @jill64/universal-sanitizer to v1.3.0
  • fix(deps): update dependency @vueuse/core to v10.11.0
  • fix(deps): update dependency @vueuse/math to v10.11.0
  • fix(deps): update dependency vue-router to v4.4.0
  • fix(deps): update nuxt framework to v3.12.3 (@nuxt/kit, @nuxt/schema, nuxt)
  • fix(deps): update testing-library monorepo (@testing-library/dom, @testing-library/jest-dom, @testing-library/vue)
  • chore(deps): update dependency path2d-polyfill to v3
  • chore(deps): update eslint and plugins (major) (eslint, eslint-config-standard-with-typescript, eslint-formatter-pretty, eslint-plugin-n, eslint-plugin-unicorn)
  • fix(deps): update dependency @types/react to v18
  • fix(deps): update dependency marked to v13
  • 🔐 Create all rate-limited PRs at once 🔐

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
  • date-fns 3.6.0
  • defu 6.1.4
  • fast-equals ^5.0.0
  • fuse.js 7.0.0
  • html-escaper ^3.0.3
  • immutable ^5.0.0-beta.5
  • 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
  • pspdfkit ^2024.3.1
  • 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
  • @rollup/plugin-inject 5.0.5
  • @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-import 16.1.0
  • 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
  • unenv 1.9.0
  • vite-plugin-image-optimizer 1.1.7
  • vitepress 1.1.0
  • vitest 0.24.5
  • vue-tsc 2.0.19
  • 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 9.6.0
  • eslint-config-standard-with-typescript 43.0.1
  • eslint-formatter-pretty 6.0.1
  • eslint-plugin-align-assignments 1.1.2
  • eslint-plugin-import 2.29.1
  • eslint-plugin-n 17.9.0
  • eslint-plugin-node 11.1.0
  • eslint-plugin-promise 6.1.1
  • eslint-plugin-unicorn 54.0.0
  • 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.1
  • @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
src/public/js/[email protected]/package.json
  • canvas ^2.11.2
  • path2d-polyfill ^2.0.1
  • node >=18
src/public/js/[email protected]/package.json
  • @types/react ^17.0.39
nvm
.nvmrc
  • node 20
  • Check this box to trigger a request for Renovate to run again on this repository

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.