React component library used by solved.ac
npm install --save @solved-ac/ui-react
import React, { Component } from 'react'
import MyComponent from '@solved-ac/ui-react'
import '@solved-ac/ui-react/dist/index.css'
class Example extends Component {
render() {
return <MyComponent />
}
}
MIT © shiftpsh
리액트에서 권장하는 "진리의 원천"(Single source of truth) 개념을 바탕으로 꼭 필요하고 최소한의 props 의 조합으로 새 속성 값을 할당하는 방법을 사용했습니다:
어떤 값이 props 또는 state로부터 계산될 수 있다면, 아마도 그 값을 state에 두어서는 안 됩니다.
로컬에서 스토리북을 실행해서 컴포넌트가 이상 없는지 확인을 마쳤습니다..!
#5 (fix: invalid return type of cssVariables function)에서 적용한 타입에 오타가 있습니다. 실수로 고치다가 뒤에 있던 중괄호 하나를 그대로 놔뒀나봅니다. 🤯
https://github.com/solved-ac/ui-react/blob/7b3e77b2c4c84cf9dab02a587abc7c528dd5ffbf/src/utils/styles.ts#L40
https://github.com/solved-ac/ui-react/blob/7b3e77b2c4c84cf9dab02a587abc7c528dd5ffbf/src/utils/styles.ts#L54
closes #4
기존 타이핑에서 실제 값과 타입이 다른 문제를 해결합니다.
복잡한 타입이 활용됨에 따라 컴파일 시간이나 에디터 반응 속도에 악영향을 미칠 수 있으므로 단순화된 `--solvedac-${string}`도 고려해보았으나, 기존 코드의 목적이 타입 정확성에 가까운 것으로 보여 기존 목적에 부합하게 고쳤습니다.
https://github.com/solved-ac/ui-react/blob/609190fe6c6b13847fbccc7814bb073af95c7655/src/utils/styles.ts?_pjax=%23js-repo-pjax-container%2C%20div%5Bitemtype%3D%22http%3A%2F%2Fschema.org%2FSoftwareSourceCode%22%5D%20main%2C%20%5Bdata-pjax-container%5D#L7-L19
위 부분에서 v의 타입을 정확히 정의하기 위해서는 (MakeKebabCase<T> 같은 타입을 만든 후) `var(--solvedac-${MakeKebabCase<P>}-${string})`와 같이 정의되어야 합니다.
그 이유는 다음과 같습니다.
https://github.com/solved-ac/ui-react/blob/609190fe6c6b13847fbccc7814bb073af95c7655/src/utils/styles.ts?_pjax=%23js-repo-pjax-container%2C%20div%5Bitemtype%3D%22http%3A%2F%2Fschema.org%2FSoftwareSourceCode%22%5D%20main%2C%20%5Bdata-pjax-container%5D#L29-L31
v는 위 코드에 의해 결정되고, 각 값은 vars 오브젝트의 키 k에 대해 `var(${vars[k]})`입니다.
https://github.com/solved-ac/ui-react/blob/609190fe6c6b13847fbccc7814bb073af95c7655/src/utils/styles.ts?_pjax=%23js-repo-pjax-container%2C%20div%5Bitemtype%3D%22http%3A%2F%2Fschema.org%2FSoftwareSourceCode%22%5D%20main%2C%20%5Bdata-pjax-container%5D#L22-L27
vars는 위 코드에 의해 결정되고, 각 값은 names 배열의 원소 name에 대해 `--solvedac-${toCssName(prefix)}-${toCssName(name)}`입니다.
https://github.com/solved-ac/ui-react/blob/609190fe6c6b13847fbccc7814bb073af95c7655/src/utils/styles.ts?_pjax=%23js-repo-pjax-container%2C%20div%5Bitemtype%3D%22http%3A%2F%2Fschema.org%2FSoftwareSourceCode%22%5D%20main%2C%20%5Bdata-pjax-container%5D#L4-L5
toCssName은 위 코드와 같이 정의되고, 사이사이에 낀 알파벳 대문자를 소문자로 바꾸는 역할을 합니다.
따라서, toCssName(prefix)의 타입은 P라고 볼 수 없습니다.
반례로 P = 'exampleValue', name = string일 때 실제 값은 --solvedac-example-value-${string}일 것입니다.
현재 빌드를 위해 두가지의 절차를 거치는게 번거롭게 느껴졌습니다:
- 루트 경로에서
microbundle커맨드를 실행- example 경로로 이동해서
start-storybook을 실행
개발 환경에서는 프로덕션 빌드를 건너 뛰고 바로 스토리북 개발 서버를 실행하는 사용하는 프로젝트 구조를 사용하면 어떨까요..?
아래와 같이 컴포넌트와 스토리 컴포넌트를 같은 경로에 두면 스토리북 개발 서버에서 개발 중인 컴포넌트의 빌드를 위임을 할 수 있습니다!
❯ ls src/components
Button.tsx Button.stories.tsx Collapse.tsx Collapse..stories.tsx // (생략)
Full Changelog: https://github.com/solved-ac/ui-react/compare/v0.2.11...v0.2.12
Source code(tar.gz)Full Changelog: https://github.com/solved-ac/ui-react/compare/v0.2.9...v0.2.11
Source code(tar.gz)Full Changelog: https://github.com/solved-ac/ui-react/compare/v0.2.7...v0.2.9
Source code(tar.gz)Full Changelog: https://github.com/solved-ac/ui-react/compare/v0.2.6...v0.2.7
Source code(tar.gz)Full Changelog: https://github.com/solved-ac/ui-react/compare/v0.2.4...v0.2.5
Source code(tar.gz)Full Changelog: https://github.com/solved-ac/ui-react/compare/v0.2.3...v0.2.4
Source code(tar.gz)Fix border color in default Dark theme
Source code(tar.gz)Move from styled-components to emotion
Source code(tar.gz)Initial release
Source code(tar.gz)@solved-ac/ui-react React component library used by solved.ac Install npm install --save @solved-ac/ui-react Usage import React, { Component } from 'r
WORK IN PROGRESS Features Framework Agnostic Build with your preferred framework or with none at all! Official presets for Preact, React, Vue, and Sve
Moai Vue UI Kit ?? A Vue component library, where buttons look like buttons. Website: vue.moaijs.com Document: docs.vue.moaijs.com Install The [@moai-
Cosmos Framework A frontend framework for creating reactive UIs using direct DOM manipulation. (Heavily WIP) How to get started with Cosmos Framework
Genshin Bot Config $ cp config/bot.sample.ts config/bot.ts Development $ yarn $ yarn dev $ open http://localhost:7001/ Npm Scripts Use yarn lint to ch
My Website ?? WIP ?? Screenshots Lighthouse This website is built using Docusaurus 2, a modern static website generator. Installation $ yarn Local De
Note I'm no longer working on this project because I have just realized macOS does not support OpenGL ES API, and adding Desktop GL backend to this mo
solid-cosha A solid directive for adding colorful shadows to images (based on cosha). Quick start Install it: yarn add solid-cosha Use it: import { co
# Check your ipo allotment result via CLI Install node js and run these commands > clone the repo > cd checkipo-cli > npm
massCode next Built with Electron, Vue 3 & Ace Editor. Inspired by applications like SnippetsLab and Quiver. ☝️ massCode is currently in development,
md-report What's md-report The repo name md-report stands for both "Write your reports in markdown, and get them in docx." and "Made report again." ("
Flexi Dock (WIP) Gnome Shell extension to provide a flexible applications dock. Installation The easiest way to install this extension is via the offi
Umo programming language Concept Effect system (not implemented) Subtyping (not implemented) Opt-in shared mutability (not implemented) Gradual typing
@solved-ac/ui-react React component library used by solved.ac Install npm install --save @solved-ac/ui-react Usage import React, { Component } from 'r
TODO Signer l'ID Ban dès le lobby Limiter la taille des pseudos Joueur déconnecté avec une couleur Afficher un message en cas de kick Limiter les devi
Frostleaf https://zenn.dev/0918nobita/scraps/64a268583b8463 Development Install tools asdf plugin-add nodejs asdf plugin-add pnpm asdf install Install
Huff Debug An easy hevm debug integration for hardhat-huff projects What does it do: Speed up your development experience by gaining rich feedback in
??️ Gumori You [WIP] Bringing Material Design 3 to the Astro Blog. ?? Contributing If you're interested in contributing to Gumori You, pls read the fo
프로그래머를 위한 범주론 본 레파지토리는 Bartosz Milewsk의 Category Theory for Programmers을 번역하며 학습한 레파지토리입니다. ?? 목차 Part 1. 범주:합성의 본질 타입과 함수 크고 작은 범주 Kleisli Categories
SNPM (WIP) SNPM is an "alternative" for NPM, but it's not meant to replace NPM/Yarn/PNPM DISCLAIMER ?? This project was made to learn more about Packa
24 Nov 2, 2022
3.1k Dec 26, 2022
10 Nov 24, 2022
5 Nov 6, 2022
2 Dec 20, 2021
8 Mar 19, 2022
14 Jun 11, 2022
2 Feb 3, 2022
4 Oct 12, 2022
4.3k Jan 5, 2023
8 Jun 12, 2022
3 Aug 29, 2022
15 Feb 25, 2022
11 Apr 25, 2022
7 Jun 4, 2022
6 Jul 15, 2022
4 Oct 16, 2022
22 Aug 18, 2022
534 Dec 31, 2022